/* =============================================================
ILLUMINEX FIREFISH PRODUCTION CSS v21.1

CURRENT PRODUCTION BASELINE
✓ Existing Firefish layout and spacing preserved
✓ Jobs list and vacancy cards preserved
✓ Candidate registration and application journey preserved
✓ Application-success page preserved
✓ GDPR page preserved
✓ Mobile reCAPTCHA and button containment preserved
✓ JavaScript remains unchanged
✓ Only genuine Apply controls receive the global orange-pill treatment

v21.1 changes
- Preserves the complete v21.0 production styling.
- Fixes the transformed application-card ancestor that trapped the mobile login modal.
- Keeps the login modal attached to the real browser viewport on Samsung mobile.
- Gives the login body its own touch-scroll area without changing other modals.

============================================================= */

/* =============================================================
   ILLUMINEX CONSULTANCY — FIREFISH FINAL PRODUCTION STYLESHEET V6
   Complete replacement file for Jobs List + Candidate Application
   ============================================================= */

:root{
  --ilx-navy:#083a63;
  --ilx-deep:#052f50;
  --ilx-orange:#ff7a00;
  --ilx-gold:#ffb347;
  --ilx-white:#fff;
  --ilx-placeholder:#c8d3dd;
  --ilx-field:rgba(255,255,255,.18);
  --ilx-field-hover:rgba(255,255,255,.23);
  --ilx-field-border:rgba(255,255,255,.48);
  --ilx-bg:url("https://jobs.illuminex.co.uk/userfiles/Illuminex/ffImages/illuminex-live-jobs-background-optimized.jpg");
}

html,body{
  margin:0!important;
  min-height:100%;
  color:#fff!important;
  background:var(--ilx-navy)!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

*,*::before,*::after{box-sizing:border-box}

textarea#g-recaptcha-response,
textarea[name="g-recaptcha-response"]{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  visibility:hidden!important;
}

.pageWrapper{
  min-height:100vh;
  color:#fff!important;
  background:
    linear-gradient(135deg,rgba(8,58,99,.58),rgba(11,95,158,.48)),
    var(--ilx-bg) center 24%/cover fixed no-repeat!important;
}

/* FINAL IMAGE POSITION — show more of the people at the top on both pages */
body:has(.advertApplicationArea) .pageWrapper,
body:not(:has(.advertApplicationArea)) .pageWrapper{
  background-position:center 8%!important;
}

.header{
  position:relative;
  z-index:20;
  color:#fff!important;
  background:rgba(5,47,80,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 26px rgba(0,0,0,.16);
}

.mainContent{
  position:relative;
  z-index:2;
  color:#fff!important;
  background:transparent!important;
}

.footer{
  color:#fff!important;
  background:rgba(5,47,80,.96)!important;
  border-top:1px solid rgba(255,255,255,.12);
}


/* ==========================================================
   3. JOBS PAGE BACKGROUND
   ========================================================== */

.pageWrapper {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}

.pageWrapper > .banner,
section.banner {
    position: fixed !important;
    inset: 112px 0 0 0 !important;
    width: 100% !important;
    min-height: calc(100vh - 112px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-position: center 28% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    z-index: -2 !important;
}

.pageWrapper > .banner img,
section.banner img,
.pageWrapper > .banner picture,
section.banner picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 28% !important;
}

.mainContent {
    position: relative !important;
    z-index: 1 !important;
    min-height: calc(100vh - 112px) !important;
    background: rgba(3, 91, 163, 0.76) !important;
}

.mainContent .jobList,
.mainContent .container,
.mainContent .ffPageSection,
.mainContent .ffContentSystemGrid,
.mainContent .ffRichTextContent,
.mainContent .ffRichTextContent__section {
    background-color: transparent !important;
}

.pageWrapper > .header,
.pageWrapper > header,
section.header {
    position: relative !important;
    z-index: 10 !important;
}

.pageWrapper > footer,
.pageWrapper > .footer,
section.footer {
    position: relative !important;
    z-index: 2 !important;
}



/* ==========================================================
   17. JOB LIST — FINAL CARD POLISH
   Added only to restore rounded cards and apply the agreed
   finishing touches. Application-page styling is unchanged.
   ========================================================== */

/* Reduce the space between the jobs-page introduction and first vacancy */
body:not(:has(.advertApplicationArea)) .mainContent .jobList {
    margin-top: 28px !important;
}

/* Rounded premium vacancy cards */
body:not(:has(.advertApplicationArea)) .jobList .job,
body:not(:has(.advertApplicationArea)) .jobList .jobItem,
body:not(:has(.advertApplicationArea)) .jobList .advert,
body:not(:has(.advertApplicationArea)) .jobList .vacancy,
body:not(:has(.advertApplicationArea)) .jobList article,
body:not(:has(.advertApplicationArea)) .jobList [class*="jobAdvert"],
body:not(:has(.advertApplicationArea)) .jobList [class*="job-advert"],
body:not(:has(.advertApplicationArea)) .jobList [class*="vacancyItem"] {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 4px solid var(--ilx-orange) !important;
    border-radius: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow:
        0 16px 38px rgba(0, 27, 50, 0.24),
        0 0 0 1px rgba(255, 122, 0, 0.08),
        0 0 22px rgba(255, 122, 0, 0.09) !important;
}

/* Soft glass highlight across the top of each vacancy */
body:not(:has(.advertApplicationArea)) .jobList .job::before,
body:not(:has(.advertApplicationArea)) .jobList .jobItem::before,
body:not(:has(.advertApplicationArea)) .jobList .advert::before,
body:not(:has(.advertApplicationArea)) .jobList .vacancy::before,
body:not(:has(.advertApplicationArea)) .jobList article::before,
body:not(:has(.advertApplicationArea)) .jobList [class*="jobAdvert"]::before,
body:not(:has(.advertApplicationArea)) .jobList [class*="job-advert"]::before,
body:not(:has(.advertApplicationArea)) .jobList [class*="vacancyItem"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 42% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0)
        ) !important;
}

/* Premium interaction for the vacancy action button */
body:not(:has(.advertApplicationArea)) .jobList a[class*="interest"],
body:not(:has(.advertApplicationArea)) .jobList button[class*="interest"],
body:not(:has(.advertApplicationArea)) .jobList input[value*="Interested"],
body:not(:has(.advertApplicationArea)) .jobList .button,
body:not(:has(.advertApplicationArea)) .jobList .btn {
    box-shadow: 0 9px 22px rgba(255, 122, 0, 0.22) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease !important;
}

body:not(:has(.advertApplicationArea)) .jobList a[class*="interest"]:hover,
body:not(:has(.advertApplicationArea)) .jobList button[class*="interest"]:hover,
body:not(:has(.advertApplicationArea)) .jobList input[value*="Interested"]:hover,
body:not(:has(.advertApplicationArea)) .jobList .button:hover,
body:not(:has(.advertApplicationArea)) .jobList .btn:hover {
    transform: translateY(-2px) !important;
    background-color: #e86f00 !important;
    border-color: #e86f00 !important;
    box-shadow: 0 13px 28px rgba(255, 122, 0, 0.30) !important;
}

@media (max-width: 768px) {
    body:not(:has(.advertApplicationArea)) .mainContent .jobList {
        margin-top: 22px !important;
    }

    body:not(:has(.advertApplicationArea)) .jobList .job,
    body:not(:has(.advertApplicationArea)) .jobList .jobItem,
    body:not(:has(.advertApplicationArea)) .jobList .advert,
    body:not(:has(.advertApplicationArea)) .jobList .vacancy,
    body:not(:has(.advertApplicationArea)) .jobList article,
    body:not(:has(.advertApplicationArea)) .jobList [class*="jobAdvert"],
    body:not(:has(.advertApplicationArea)) .jobList [class*="job-advert"],
    body:not(:has(.advertApplicationArea)) .jobList [class*="vacancyItem"] {
        border-width: 3px !important;
        border-radius: 16px !important;
    }
}


/* APPLICATION BACKGROUND SAFEGUARD */
body:has(.advertApplicationArea) .pageWrapper{
  min-height:100vh!important;
  background:
    linear-gradient(135deg,rgba(8,58,99,.58),rgba(11,95,158,.48)),
    var(--ilx-bg) center 8%/cover fixed no-repeat!important;
}

body:has(.advertApplicationArea) .mainContent{
  background:transparent!important;
}

/* APPLICATION PAGE */
body:has(.advertApplicationArea) .banner{display:none!important}

body:has(.advertApplicationArea) .mainContent{
  width:min(calc(100% - 32px),1180px)!important;
  margin:0 auto!important;
  padding:36px 0 72px!important;
}

body:has(.advertApplicationArea) .advertApplicationArea{
  width:100%;
  margin:0!important;
  padding:clamp(24px,3vw,38px)!important;
  border:5px solid var(--ilx-orange)!important;
  border-radius:24px!important;
  color:#fff!important;
  background:linear-gradient(135deg,rgba(8,58,99,.92),rgba(10,73,119,.88))!important;
  box-shadow:0 24px 65px rgba(0,0,0,.28),0 0 0 1px rgba(255,179,71,.18)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

body:has(.advertApplicationArea) .candidateAdvertApplicationArea,
body:has(.advertApplicationArea) .registrationArea,
body:has(.advertApplicationArea) .registrationPage{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#fff!important;
  background:transparent!important;
  box-shadow:none!important;
}

body:has(.advertApplicationArea) .title,
body:has(.advertApplicationArea) .title .textArea{
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}

body:has(.advertApplicationArea) .title h1{
  margin:0 0 14px!important;
  color:#fff!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:clamp(1.8rem,2.5vw,2.5rem)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
}

body:has(.advertApplicationArea) .ff-advert-login-info{
  margin:0 0 26px!important;
  padding:0!important;
  color:#fff!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.55!important;
  letter-spacing:0!important;
}

body:has(.advertApplicationArea) .ff-advert-login-info span{color:#fff!important}
body:has(.advertApplicationArea) .ff-advert-login-info a{
  color:var(--ilx-gold)!important;
  font-weight:700!important;
  text-decoration:none!important;
}

body:has(.advertApplicationArea) .ff-reg-AdvertRegistration>span>table:first-child,
body:has(.advertApplicationArea) .ff-reg-AdvertRegistration .RegistrationDescription{
  display:none!important;
}

body:has(.advertApplicationArea) .registrationTable{
  display:block!important;
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-collapse:separate!important;
  background:transparent!important;
}

body:has(.advertApplicationArea) .registrationTable tbody{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
  width:100%;
}

body:has(.advertApplicationArea) .registrationTable tr{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  min-width:0;
  margin:0!important;
  padding:0!important;
}

body:has(.advertApplicationArea) .registrationTable tr:has([id*="docUL"]),
body:has(.advertApplicationArea) .registrationTable tr:has(select),
body:has(.advertApplicationArea) .registrationTable tr:has(input[type="checkbox"]){grid-column:1/-1}

body:has(.advertApplicationArea) .registrationTable tr.registrationSpacerRow{display:none!important}

body:has(.advertApplicationArea) .registrationTable td{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#fff!important;
  text-align:left!important;
  vertical-align:top!important;
  background:transparent!important;
}

body:has(.advertApplicationArea) .registrationTable td.registrationDescription{margin-bottom:7px!important}

body:has(.advertApplicationArea) .registrationTable td.registrationDescription label{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.02em!important;
  text-transform:uppercase;
}

body:has(.advertApplicationArea) .requiredFieldIndicator{display:none!important}

body:has(.advertApplicationArea) label[for*="txtFirstName"]::after,
body:has(.advertApplicationArea) label[for*="txtLastName"]::after,
body:has(.advertApplicationArea) label[for*="txtEMail"]::after,
body:has(.advertApplicationArea) label[for*="txtPassword"]::after,
body:has(.advertApplicationArea) label[for*="txtMobileNumber"]::after,
body:has(.advertApplicationArea) label[for*="docUL"]::after,
body:has(.advertApplicationArea) label[for*="ddCandidateSource"]::after,
body:has(.advertApplicationArea) .registrationDescription label[for*="chkAcceptCandidateAgreement"]::after{
  content:" *";
  color:var(--ilx-gold)!important;
  font-weight:800!important;
}

body:has(.advertApplicationArea) .registrationTable input.webWidgetFormField:not([type="checkbox"]):not([type="radio"]),
body:has(.advertApplicationArea) .registrationTable select.webWidgetFormField{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:46px!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid var(--ilx-field-border)!important;
  border-radius:14px!important;
  outline:none!important;
  color:#fff!important;
  background:var(--ilx-field)!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  box-shadow:none!important;
}

body:has(.advertApplicationArea) .registrationTable input.webWidgetFormField::placeholder{
  color:var(--ilx-placeholder)!important;
  opacity:1!important;
}

body:has(.advertApplicationArea) .registrationTable input.webWidgetFormField:hover,
body:has(.advertApplicationArea) .registrationTable select.webWidgetFormField:hover{
  border-color:rgba(255,255,255,.52)!important;
  background:var(--ilx-field-hover)!important;
}

body:has(.advertApplicationArea) .registrationTable input.webWidgetFormField:focus,
body:has(.advertApplicationArea) .registrationTable select.webWidgetFormField:focus{
  border-color:rgba(255,179,71,.88)!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:0 0 0 4px rgba(255,179,71,.18)!important;
}

body:has(.advertApplicationArea) .registrationTable select.webWidgetFormField option{
  color:#16364e!important;
  background:#fff!important;
}

body:has(.advertApplicationArea) .errorText,
body:has(.advertApplicationArea) .errorTextBold{
  display:block;
  margin:0 0 7px!important;
  color:#ff1f1f!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

body:has(.advertApplicationArea) .registrationTable [id*="docUL"][class~="inline"]{
  display:block!important;
  width:100%!important;
}

body:has(.advertApplicationArea) .registrationTable [id*="docUL"]>a{
  display:flex!important;
  align-items:center;
  width:100%;
  min-height:46px;
  padding:5px 12px;
  overflow:hidden;
  border:1px solid var(--ilx-field-border)!important;
  border-radius:14px!important;
  color:#fff!important;
  background:rgba(255,255,255,.10)!important;
  text-decoration:none!important;
  box-shadow:none!important;
}

body:has(.advertApplicationArea) .registrationTable [id*="docUL"]>a>div{
  display:flex!important;
  align-items:center;
  width:100%;
  min-width:0;
}

body:has(.advertApplicationArea) .registrationTable .uploadFontImage{display:none!important}

body:has(.advertApplicationArea) .registrationTable .uploadText{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:34px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:transparent!important;
  background:rgba(255,255,255,.12);
  font-size:0!important;
}

body:has(.advertApplicationArea) .registrationTable .uploadText::before{
  content:"Choose file";
  color:#fff;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
}

body:has(.advertApplicationArea) .registrationTable [id*="docUL"]>a>div::after{
  content:"No file selected — PDF, DOC or DOCX (max 10MB)";
  min-width:0;
  margin-left:12px;
  overflow:hidden;
  color:var(--ilx-placeholder);
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:has(.advertApplicationArea) .registrationTable tr:has(input[type="checkbox"]){
  display:grid!important;
  grid-template-columns:minmax(260px,42%) minmax(0,1fr);
  column-gap:18px;
  align-items:center;
  min-height:34px;
}

body:has(.advertApplicationArea) .registrationTable tr:has(input[type="checkbox"]) td.registrationDescription{margin:0!important}

body:has(.advertApplicationArea) .registrationTable input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  margin:0 8px 0 0!important;
  vertical-align:middle;
  cursor:pointer;
  accent-color:var(--ilx-orange);
}

body:has(.advertApplicationArea) .registrationTable input[type="checkbox"]+label{
  display:inline!important;
  margin:0!important;
  color:#fff!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:13px!important;
  font-weight:550!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

body:has(.advertApplicationArea) .registrationTable input[type="checkbox"]+label a{
  color:var(--ilx-gold)!important;
  font-weight:700!important;
  text-decoration:none!important;
}

body:has(.advertApplicationArea) .captcha{
  display:flex;
  justify-content:flex-start;
  width:100%;
  margin:10px 0 36px!important;
  padding-left:calc(50% + 6px);
}

body:has(.advertApplicationArea) .registrationButtonArea{
  display:flex!important;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0!important;
  padding:0!important;
}

body:has(.advertApplicationArea) .registrationButtonArea input{
  min-width:128px;
  min-height:48px;
  margin:0!important;
  padding:12px 20px!important;
  border-radius:999px!important;
  cursor:pointer;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}

body:has(.advertApplicationArea) .registrationButtonArea .btn-go-profile{
  border:0!important;
  color:var(--ilx-navy)!important;
  background:linear-gradient(135deg,#ff7a00,#ff8c00,#ffb347)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.22)!important;
}

body:has(.advertApplicationArea) .registrationButtonArea .btn-cancel{
  border:2px solid var(--ilx-orange)!important;
  color:#fff!important;
  background:rgba(8,58,99,.58)!important;
  box-shadow:none!important;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

body:has(.advertApplicationArea) .registrationButtonArea .btn-cancel:hover,
body:has(.advertApplicationArea) .registrationButtonArea .btn-cancel:focus{
  border-color:var(--ilx-orange)!important;
  color:var(--ilx-navy)!important;
  background:linear-gradient(135deg,#ff7a00,#ff8c00,#ffb347)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
  transform:translateY(-1px);
}

body:has(.advertApplicationArea) .modalBackground{background:rgba(2,21,36,.76)!important}
body:has(.advertApplicationArea) .modalPanel{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:18px!important;
  color:#fff!important;
  background:#0b456f!important;
  box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
}
body:has(.advertApplicationArea) .mdl-hdr{color:#fff!important;background:#083a63!important}
/* CV UPLOAD MODAL — keep the title comfortably clear of the left edge */
body:has(.advertApplicationArea) .uplMdlPnl .mdl-hdr{
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  padding:0 48px 0 22px!important;
}

body:has(.advertApplicationArea) .uplMdlPnl .mdl-hdr-txt,
body:has(.advertApplicationArea) .uplMdlPnl .mdl-hdr-no-icn{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

body:has(.advertApplicationArea) .uplMdlPnl .mdl-hdr-btn{
  position:absolute!important;
  top:50%!important;
  right:16px!important;
  transform:translateY(-50%)!important;
}

body:has(.advertApplicationArea) .mdl-body,
body:has(.advertApplicationArea) .UploadMain,
body:has(.advertApplicationArea) .UploadBody{color:#fff!important;background:#0b456f!important}
body:has(.advertApplicationArea) .UploadPath{
  width:100%!important;
  min-height:46px;
  padding:7px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:12px!important;
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
}
body:has(.advertApplicationArea) .UploadButtonArea{margin-top:14px!important}
body:has(.advertApplicationArea) .UploadButtonArea input{
  min-height:44px;
  padding:10px 20px!important;
  border:0!important;
  border-radius:999px!important;
  color:var(--ilx-navy)!important;
  background:linear-gradient(135deg,#ff7a00,#ff8c00,#ffb347)!important;
  font-weight:700!important;
}


/* SOURCE DROPDOWN — hide Firefish legacy duplicate “Linked In” option */
body:has(.advertApplicationArea)
select[id*="ddCandidateSource"] option[value="c40be36e-3c91-40b7-b52c-0e838c628a93"]{
  display:none!important;
}

@media(max-width:900px){
  body:has(.advertApplicationArea) .mainContent{width:min(calc(100% - 24px),1180px)!important;padding-top:24px!important}
  body:has(.advertApplicationArea) .advertApplicationArea{padding:24px 20px!important;border-radius:20px!important}
  body:has(.advertApplicationArea) .registrationTable tbody{grid-template-columns:minmax(0,1fr)}
  body:has(.advertApplicationArea) .registrationTable tr,
  body:has(.advertApplicationArea) .registrationTable tr:has([id*="docUL"]),
  body:has(.advertApplicationArea) .registrationTable tr:has(select),
  body:has(.advertApplicationArea) .registrationTable tr:has(input[type="checkbox"]){grid-column:1/-1}
  body:has(.advertApplicationArea) .registrationTable tr:has(input[type="checkbox"]){grid-template-columns:minmax(0,1fr);row-gap:7px;align-items:start}
  body:has(.advertApplicationArea) .captcha{padding-left:0}
  body:has(.advertApplicationArea) .registrationButtonArea{justify-content:flex-start}
}

@media(max-width:600px){
  .pageWrapper{background-attachment:scroll!important;background-position:center 6%!important}
  body:not(:has(.advertApplicationArea)) .mainContent{padding:22px 12px 48px!important}
  body:has(.advertApplicationArea) .mainContent{width:calc(100% - 16px)!important;padding:14px 0 42px!important}
  body:has(.advertApplicationArea) .advertApplicationArea{padding:20px 14px!important;border-radius:18px!important}
  body:has(.advertApplicationArea) .title h1{font-size:2rem!important}
  body:has(.advertApplicationArea) .registrationTable [id*="docUL"]>a>div{flex-wrap:wrap;gap:7px}
  body:has(.advertApplicationArea) .registrationTable [id*="docUL"]>a>div::after{width:100%;margin-left:0;white-space:normal}
  body:has(.advertApplicationArea) .registrationButtonArea{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(.advertApplicationArea) .registrationButtonArea input{width:100%;min-width:0}
}

@media(max-width:360px){
  body:has(.advertApplicationArea) .g-recaptcha{transform:scale(.88);transform-origin:left top;margin-bottom:-10px}
}

/* FINAL VALIDATION OVERRIDE — clear red with no shadow. */
body:has(.advertApplicationArea) .errorText,
body:has(.advertApplicationArea) .errorTextBold{
  color:#ff2d2d!important;
  text-shadow:none!important;
  filter:none!important;
}

/* =============================================================

/* =============================================================
   GDPR CANDIDATE AGREEMENT — ISOLATED PAGE STYLING
   Scope safeguard: every rule requires .illuminex-gdpr-page.
   Jobs and candidate-registration styles are untouched.
   ============================================================= */

body:has(.illuminex-gdpr-page) .pageWrapper{
  min-height:100vh!important;
  background:
    linear-gradient(135deg,rgba(8,58,99,.58),rgba(11,95,158,.48)),
    var(--ilx-bg) center 8%/cover fixed no-repeat!important;
}

body:has(.illuminex-gdpr-page) .mainContent{
  min-height:calc(100vh - 112px)!important;
  padding:28px 18px 54px!important;
  color:var(--ilx-white)!important;
  background:transparent!important;
}

body:has(.illuminex-gdpr-page) .mainContent > .container,
body:has(.illuminex-gdpr-page) .ffSystemContent,
body:has(.illuminex-gdpr-page) .ffRichTextContent,
body:has(.illuminex-gdpr-page) .ffRichTextContent__section{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  color:var(--ilx-white)!important;
  background:transparent!important;
}

.illuminex-gdpr-page{
  width:min(100%,1400px)!important;
  margin:0 auto!important;
  color:var(--ilx-white)!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:15px!important;
  line-height:1.62!important;
  letter-spacing:.002em!important;
}

.illuminex-gdpr-page,
.illuminex-gdpr-page *{
  box-sizing:border-box!important;
  font-family:Arial,"Segoe UI",sans-serif!important;
}

.illuminex-gdpr-page .gdpr-hero{
  margin:0 0 28px!important;
}

.illuminex-gdpr-page .gdpr-title{
  margin:0 0 12px!important;
  padding:0!important;
  color:var(--ilx-white)!important;
  font-size:clamp(2.25rem,4.5vw,3.35rem)!important;
  line-height:1.06!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  text-shadow:0 3px 14px rgba(0,24,45,.28)!important;
}

.illuminex-gdpr-page .gdpr-intro{
  max-width:1180px!important;
  margin:0 0 14px!important;
  color:rgba(255,255,255,.94)!important;
  font-size:1.08rem!important;
  line-height:1.62!important;
  font-weight:550!important;
}

.illuminex-gdpr-page .gdpr-card{
  margin:0 0 18px!important;
  padding:25px 22px 22px!important;
  color:var(--ilx-white)!important;
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.045),transparent 34%),
    linear-gradient(145deg,rgba(5,47,79,.985),rgba(7,66,104,.975))!important;
  border:4px solid var(--ilx-orange)!important;
  border-radius:22px!important;
  box-shadow:
    0 18px 44px rgba(0,24,45,.28),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.illuminex-gdpr-page .gdpr-card h2{
  margin:0 0 15px!important;
  padding:0!important;
  color:var(--ilx-white)!important;
  font-size:clamp(1.55rem,2.5vw,2rem)!important;
  line-height:1.16!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

.illuminex-gdpr-page .gdpr-card h3{
  margin:20px 0 10px!important;
  padding:0!important;
  color:var(--ilx-white)!important;
  font-size:clamp(1.18rem,2vw,1.42rem)!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.012em!important;
}

.illuminex-gdpr-page .gdpr-card h2 + h3{
  margin-top:0!important;
}

.illuminex-gdpr-page .gdpr-card p{
  margin:0 0 13px!important;
  color:rgba(255,255,255,.93)!important;
  font-size:1rem!important;
  line-height:1.68!important;
  font-weight:500!important;
}

.illuminex-gdpr-page .gdpr-card p:last-child,
.illuminex-gdpr-page .gdpr-card ul:last-child{
  margin-bottom:0!important;
}

.illuminex-gdpr-page .gdpr-card ul{
  margin:8px 0 15px 1.25rem!important;
  padding:0!important;
  color:rgba(255,255,255,.94)!important;
}

.illuminex-gdpr-page .gdpr-card li{
  margin:0 0 8px!important;
  padding-left:4px!important;
  color:rgba(255,255,255,.94)!important;
  font-size:1rem!important;
  line-height:1.62!important;
  font-weight:500!important;
}

.illuminex-gdpr-page .gdpr-card li::marker{
  color:var(--ilx-orange)!important;
}

.illuminex-gdpr-page a{
  color:#ffd09a!important;
  font-weight:700!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}

.illuminex-gdpr-page a:hover{
  color:var(--ilx-white)!important;
}

@media (max-width:768px){
  body:has(.illuminex-gdpr-page) .mainContent{
    min-height:calc(100vh - 90px)!important;
    padding:20px 10px 38px!important;
  }

  body:has(.illuminex-gdpr-page) .pageWrapper{
    background-attachment:scroll!important;
    background-position:center 12%!important;
  }

  .illuminex-gdpr-page .gdpr-hero{
    margin-bottom:22px!important;
  }

  .illuminex-gdpr-page .gdpr-title{
    font-size:2.25rem!important;
  }

  .illuminex-gdpr-page .gdpr-intro{
    font-size:1rem!important;
  }

  .illuminex-gdpr-page .gdpr-card{
    margin-bottom:14px!important;
    padding:20px 17px 18px!important;
    border-width:3px!important;
    border-radius:17px!important;
  }

  .illuminex-gdpr-page .gdpr-card h2{
    font-size:1.48rem!important;
  }

  .illuminex-gdpr-page .gdpr-card h3{
    font-size:1.18rem!important;
  }
}



/* ==========================================================
   GDPR v16.1 REFINEMENT
   - Centre page title
   - Intro becomes first card
   - GDPR ONLY
   ========================================================== */

.illuminex-gdpr-page .gdpr-title{
    display:block!important;
    width:100%!important;
    max-width:1400px!important;
    margin:0 auto 24px!important;
    text-align:center!important;
}

.illuminex-gdpr-page .gdpr-hero{
    max-width:1400px!important;
    margin:0 auto 24px!important;
    padding:26px 24px!important;
    background:
      radial-gradient(circle at top right,rgba(255,255,255,.045),transparent 34%),
      linear-gradient(145deg,rgba(5,47,79,.985),rgba(7,66,104,.975))!important;
    border:4px solid var(--ilx-orange)!important;
    border-radius:22px!important;
    box-shadow:
      0 18px 44px rgba(0,24,45,.28),
      inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.illuminex-gdpr-page .gdpr-intro{
    max-width:none!important;
    margin:0 0 14px!important;
}

@media (max-width:768px){
  .illuminex-gdpr-page .gdpr-hero{
      padding:20px 17px!important;
      border-width:3px!important;
      border-radius:17px!important;
  }
}

/* ==========================================================
   GDPR v16.2 TITLE FIX
   - Hides Firefish's forced page heading on the GDPR page only
   - Places the title inside the first GDPR card
   - Jobs and candidate registration remain untouched
   ========================================================== */

/* Hide the title Firefish prints outside the GDPR content card. */
body:has(.illuminex-gdpr-page) .mainContent h1:not(.gdpr-title),
body:has(.illuminex-gdpr-page) .mainContent .pageTitle,
body:has(.illuminex-gdpr-page) .mainContent .ffPageTitle,
body:has(.illuminex-gdpr-page) .mainContent > .title{
    display:none!important;
}

/* The HTML title is no longer required inside the legal-item source. */
.illuminex-gdpr-page .gdpr-title{
    display:none!important;
}

/* Put one clean title inside the first dark-blue/orange card. */
.illuminex-gdpr-page .gdpr-hero::before{
    content:"GDPR Candidate Agreement"!important;
    display:block!important;
    width:100%!important;
    margin:0 0 18px!important;
    padding:0!important;
    color:var(--ilx-white)!important;
    font-family:Arial,"Segoe UI",sans-serif!important;
    font-size:clamp(2rem,4vw,3rem)!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-.03em!important;
    text-align:left!important;
    text-shadow:0 3px 14px rgba(0,24,45,.28)!important;
}

@media (max-width:768px){
    .illuminex-gdpr-page .gdpr-hero::before{
        margin-bottom:15px!important;
        font-size:2rem!important;
    }
}

/* ==========================================================
   GDPR v16.3 HEADING SPACING REFINEMENT
   Paste this at the very bottom of the current CSS.
   GDPR page only.
   ========================================================== */

.illuminex-gdpr-page .gdpr-hero::before{
    letter-spacing:0.005em!important;
    word-spacing:0.08em!important;
    line-height:1.16!important;
}

.illuminex-gdpr-page .gdpr-card h2{
    letter-spacing:0.005em!important;
    word-spacing:0.075em!important;
    line-height:1.24!important;
}

.illuminex-gdpr-page .gdpr-card h3{
    letter-spacing:0.008em!important;
    word-spacing:0.07em!important;
    line-height:1.32!important;
}

/* ==========================================================
   GDPR FINAL TYPOGRAPHY POLISH — v18
   GDPR page only
   ========================================================== */

.illuminex-gdpr-page .gdpr-intro,
.illuminex-gdpr-page .gdpr-card p,
.illuminex-gdpr-page .gdpr-card li{
    font-family:Arial,"Segoe UI",sans-serif!important;
    font-size:15px!important;
    font-weight:550!important;
    line-height:1.62!important;
    letter-spacing:.006em!important;
    word-spacing:.018em!important;
    color:rgba(255,255,255,.94)!important;
}

.illuminex-gdpr-page .gdpr-card p{
    margin-bottom:13px!important;
}

.illuminex-gdpr-page .gdpr-card ul{
    margin:10px 0 15px 1.25rem!important;
}

.illuminex-gdpr-page .gdpr-card li{
    margin-bottom:7px!important;
}

.illuminex-gdpr-page .gdpr-card h2{
    letter-spacing:.012em!important;
    word-spacing:.085em!important;
    line-height:1.26!important;
}

.illuminex-gdpr-page .gdpr-card h3{
    letter-spacing:.012em!important;
    word-spacing:.08em!important;
    line-height:1.34!important;
}

/* ==========================================================
   JOB DETAIL — MORE OPPORTUNITIES BUTTON
   ========================================================== */

#illuminex-more-opportunities{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    min-width:300px!important;
    height:52px!important;
    padding:0 30px!important;

    margin:28px auto 6px!important;

    background:linear-gradient(180deg,#ff9d26 0%,#ff7a00 100%)!important;
    color:#fff!important;

    font-family:Arial,"Segoe UI",sans-serif!important;
    font-size:17px!important;
    font-weight:700!important;
    letter-spacing:.4px!important;
    text-decoration:none!important;

    border:2px solid rgba(255,255,255,.9)!important;
    border-radius:999px!important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.28)!important;

    transition:all .25s ease!important;
}

#illuminex-more-opportunities:hover,
#illuminex-more-opportunities:focus{
    transform:translateY(-2px)!important;
    background:linear-gradient(180deg,#ffae43 0%,#ff8608 100%)!important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.35)!important;
    outline:none!important;
}

#illuminex-more-opportunities:active{
    transform:translateY(1px)!important;
}

.illuminex-more-opportunities-wrap{
    width:100%!important;
    margin-top:4px!important;
    text-align:center!important;
}

@media (max-width:768px){
    .illuminex-gdpr-page .gdpr-intro,
    .illuminex-gdpr-page .gdpr-card p,
    .illuminex-gdpr-page .gdpr-card li{
        font-size:15px!important;
        line-height:1.62!important;
    }

    #illuminex-more-opportunities{
        width:100%!important;
        max-width:420px!important;
    }
}

/* ==========================================================
   FIREFISH SOCIAL ICON FIX — v18.2.1
   Paste at the very bottom of the current v18.2 CSS.
   Job cards only.
   ========================================================== */

/* Remove Facebook and X/Twitter from Firefish vacancy cards. */
.job-card .ff-social-share-buttons .a2a_button_facebook,
.job-card .ff-social-share-buttons .a2a_button_x{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
}

/* Keep LinkedIn visible. */
.job-card .ff-social-share-buttons .a2a_button_linkedin{
    display:inline-block!important;
    visibility:visible!important;
}

/* ==========================================================
   ILLUMINEX FIREFISH MOBILE CONTAINMENT FIX — v20
   Append-only override
   - Keeps reCAPTCHA inside the application panel
   - Keeps application action buttons inside the panel
   - Does not alter desktop styling or JavaScript
   ========================================================== */

@media (max-width: 600px) {

  /* Prevent the application card and its children exceeding the viewport. */
  body:has(.advertApplicationArea) .advertApplicationArea,
  body:has(.advertApplicationArea) .candidateAdvertApplicationArea,
  body:has(.advertApplicationArea) .registrationArea,
  body:has(.advertApplicationArea) .registrationPage,
  body:has(.advertApplicationArea) .registrationTable,
  body:has(.advertApplicationArea) .registrationTable tbody,
  body:has(.advertApplicationArea) .registrationTable tr,
  body:has(.advertApplicationArea) .registrationTable td {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:has(.advertApplicationArea) .advertApplicationArea {
    overflow: hidden !important;
  }

  /* ReCAPTCHA wrapper containment. */
  body:has(.advertApplicationArea) .captcha {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 26px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(.advertApplicationArea) .captcha > div,
  body:has(.advertApplicationArea) .captcha .g-recaptcha {
    width: 304px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: scale(0.84) !important;
    transform-origin: left top !important;
  }

  /* Recover the blank vertical space created by scaling the widget. */
  body:has(.advertApplicationArea) .captcha {
    min-height: 66px !important;
    height: 66px !important;
  }

  /* Keep the Firefish action area inside the orange-bordered panel. */
  body:has(.advertApplicationArea) .registrationButtonArea,
  body:has(.advertApplicationArea) .advertApplicationButtonArea {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(.advertApplicationArea) .registrationButtonArea input,
  body:has(.advertApplicationArea) .registrationButtonArea button,
  body:has(.advertApplicationArea) .registrationButtonArea a,
  body:has(.advertApplicationArea) .advertApplicationButtonArea input,
  body:has(.advertApplicationArea) .advertApplicationButtonArea button,
  body:has(.advertApplicationArea) .advertApplicationButtonArea a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  /* Keep the inserted opportunities button inside the panel width. */
  body:has(.advertApplicationArea)
  .illuminex-more-opportunities-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(.advertApplicationArea)
  #illuminex-more-opportunities {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
}

/* Narrow phones need slightly more reCAPTCHA reduction. */
@media (max-width: 380px) {
  body:has(.advertApplicationArea) .captcha > div,
  body:has(.advertApplicationArea) .captcha .g-recaptcha {
    transform: scale(0.78) !important;
  }

  body:has(.advertApplicationArea) .captcha {
    min-height: 61px !important;
    height: 61px !important;
  }

  body:has(.advertApplicationArea) .registrationButtonArea input,
  body:has(.advertApplicationArea) .registrationButtonArea button,
  body:has(.advertApplicationArea) .registrationButtonArea a,
  body:has(.advertApplicationArea) .advertApplicationButtonArea input,
  body:has(.advertApplicationArea) .advertApplicationButtonArea button,
  body:has(.advertApplicationArea) .advertApplicationButtonArea a {
    font-size: 13px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }
}

/* ==========================================================
   ILLUMINEX FIREFISH MOBILE CONTAINMENT FIX — v19.1
   Append-only override
   Candidate registration/application page only
   ========================================================== */

@media (max-width: 600px) {

    /* Keep Google reCAPTCHA inside the orange-bordered card */
    body:has(.advertApplicationArea) .captcha {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 26px !important;
        padding-left: 0 !important;
        overflow: hidden !important;
    }

    body:has(.advertApplicationArea) .captcha .g-recaptcha,
    body:has(.advertApplicationArea) .captcha > div {
        max-width: 100% !important;
        transform-origin: left top !important;
    }

    /* Prevent the Continue and Cancel controls exceeding the card */
    body:has(.advertApplicationArea) .registrationButtonArea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
    }

    body:has(.advertApplicationArea) .registrationButtonArea input,
    body:has(.advertApplicationArea) .registrationButtonArea button,
    body:has(.advertApplicationArea) .registrationButtonArea a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Stack buttons safely on narrower mobile screens */
@media (max-width: 420px) {

    body:has(.advertApplicationArea) .registrationButtonArea {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Standard reCAPTCHA is 304px wide, so reduce it on very small screens */
@media (max-width: 360px) {

    body:has(.advertApplicationArea) .captcha .g-recaptcha {
        width: 304px !important;
        max-width: none !important;
        margin-bottom: -12px !important;
        transform: scale(0.85) !important;
        transform-origin: left top !important;
    }
}

/* ==========================================================
   ILLUMINEX FIREFISH APPLICATION SUCCESS PAGE — v19.2
   Adds the shared background and premium confirmation card
   Success page only
   ========================================================== */

/* Shared Illuminex background used on the application journey */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    min-height: calc(100vh - 112px) !important;

    margin: 0 !important;
    padding: 44px 16px 80px !important;

    background:
        linear-gradient(
            rgba(3, 91, 163, 0.58),
            rgba(3, 91, 163, 0.73)
        ),
        url("https://jobs.illuminex.co.uk/userfiles/Illuminex/ffImages/illuminex-live-jobs-background-optimized.jpg")
        center 24% / cover no-repeat fixed !important;
}

/* Remove any flat Firefish backgrounds inside the page */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent .ffPageSection,

:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent .ffContentSystemGrid,

:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent .ffRichTextContent {
    background: transparent !important;
}

/* Main dark-blue confirmation card */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent > .container {
    position: relative !important;
    isolation: isolate !important;

    width: min(calc(100% - 24px), 1180px) !important;
    max-width: 1180px !important;
    min-height: 250px !important;

    margin: 0 auto !important;
    padding: 38px 42px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(7, 59, 99, 0.96),
            rgba(3, 91, 163, 0.91)
        ) padding-box,
        linear-gradient(
            135deg,
            #ff6a00,
            #ff8c00,
            #ffb347
        ) border-box !important;

    border: 4px solid transparent !important;
    border-radius: 24px !important;

    box-shadow:
        0 24px 60px rgba(0, 27, 50, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

    overflow: hidden !important;
}

/* Premium inner rim */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent > .container::before {
    content: "" !important;

    position: absolute !important;
    inset: 3px !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 19px !important;

    pointer-events: none !important;
}

/* Job title */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent h1,

:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent h2 {
    margin: 0 0 16px !important;

    color: #ffffff !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: clamp(1.9rem, 2.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
}

/* Confirmation wording */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent p {
    margin: 0 0 24px !important;

    color: rgba(255, 255, 255, 0.96) !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

/* Success-page buttons */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 150px !important;
    min-height: 48px !important;

    margin: 8px 8px 0 0 !important;
    padding: 12px 22px !important;

    color: #ffffff !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;

    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 999px !important;

    background: #08a7e6 !important;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

/* More Vacancies — secondary black button */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent a[href*="vacanc" i] {
    background: #050505 !important;
}

/* Button interaction */
:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent a:hover,

:is(
  body:has(form[action*="success.aspx" i]),
  body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
) .mainContent a:focus-visible {
    color: #ffffff !important;

    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.25),
        0 0 0 4px rgba(255, 159, 26, 0.18) !important;

    outline: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent {
        padding: 30px 12px 60px !important;
    }

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent > .container {
        width: min(calc(100% - 16px), 1180px) !important;
        padding: 32px 28px !important;
        border-radius: 22px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent {
        min-height: calc(100vh - 96px) !important;
        padding: 22px 8px 48px !important;

        background-attachment: scroll !important;
        background-position: center 18% !important;
    }

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent > .container {
        width: calc(100% - 8px) !important;
        min-height: 0 !important;

        padding: 26px 18px !important;

        border-radius: 18px !important;
    }

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent h1,

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    :is(
      body:has(form[action*="success.aspx" i]),
      body:has(.mainContent a[href*="vacanc" i]):has(.mainContent a[href*="account" i])
    ) .mainContent a {
        width: 100% !important;
        max-width: 320px !important;

        margin: 10px 0 0 !important;
    }
}

/* ==========================================================
   GLOBAL ILLUMINEX ORANGE APPLY PILLS — v20.6
   Genuine Apply controls only
   ========================================================== */

:is(
    input.btn-apply,
    button.btn-apply,
    a.btn-apply,
    input[value="Apply" i],
    button[value="Apply" i],
    a[id$="_lnkApply"],
    a[href*="apply.aspx" i][class*="btn"]
) {
    color: var(--ilx-navy) !important;
    background:
        linear-gradient(
            135deg,
            #ff7a00 0%,
            #ff8c00 55%,
            #ffb347 100%
        ) !important;
    border: 2px solid #ffb347 !important;
    border-radius: 999px !important;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    font-family: Arial, "Segoe UI", sans-serif !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

:is(
    input.btn-apply,
    button.btn-apply,
    a.btn-apply,
    input[value="Apply" i],
    button[value="Apply" i],
    a[id$="_lnkApply"],
    a[href*="apply.aspx" i][class*="btn"]
):hover,

:is(
    input.btn-apply,
    button.btn-apply,
    a.btn-apply,
    input[value="Apply" i],
    button[value="Apply" i],
    a[id$="_lnkApply"],
    a[href*="apply.aspx" i][class*="btn"]
):focus-visible {
    color: var(--ilx-navy) !important;
    background:
        linear-gradient(
            135deg,
            #ff8a0a 0%,
            #ff9a22 55%,
            #ffc062 100%
        ) !important;
    border-color: #ffd08a !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.28),
        0 0 0 4px rgba(255, 159, 26, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
    outline: none !important;
}

:is(
    input.btn-apply,
    button.btn-apply,
    a.btn-apply,
    input[value="Apply" i],
    button[value="Apply" i],
    a[id$="_lnkApply"],
    a[href*="apply.aspx" i][class*="btn"]
):active {
    transform: translateY(0) !important;
    filter: brightness(0.98) !important;
}

/* ==========================================================
   NATIVE FIREFISH JOB-DETAIL PAGE — ISOLATED v20.7
   This block affects only the native vacancy .aspx page.
   It does not restyle controls or any other Firefish page.
   ========================================================== */

/*
 * Exact live-page identifiers previously confirmed:
 * - Refer a Friend control ending in _btnRefer
 * - Apply link ending in _lnkApply
 *
 * Both identifiers must exist before any rule below can apply.
 */

/* Shared Illuminex background */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.pageWrapper {
    min-height: 100vh !important;
    background:
        linear-gradient(
            135deg,
            rgba(8, 58, 99, 0.58),
            rgba(11, 95, 158, 0.48)
        ),
        var(--ilx-bg) center 8% / cover fixed no-repeat !important;
}

/* Remove the unused Firefish banner from this page only */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.pageWrapper > .banner,

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
section.banner {
    display: none !important;
}

/* Match the spacing used by the application journey */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: calc(100vh - 112px) !important;
    margin: 0 !important;
    padding: 36px 16px 72px !important;
    color: var(--ilx-white) !important;
    background: transparent !important;
}

/* Keep the page centred at the same width as the other Firefish pages */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container {
    width: min(calc(100% - 24px), 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--ilx-white) !important;
    background: transparent !important;
}

/*
 * Chrome inspection confirmed that .row is the direct content wrapper.
 * It becomes the matching dark-blue/orange vacancy card.
 */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(26px, 3vw, 40px) !important;
    overflow: hidden !important;

    color: var(--ilx-white) !important;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.045),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(5, 47, 79, 0.985),
            rgba(7, 66, 104, 0.975)
        ) !important;

    border: 4px solid var(--ilx-orange) !important;
    border-radius: 24px !important;

    box-shadow:
        0 24px 60px rgba(0, 27, 50, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Remove flat Firefish backgrounds inside this card only */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row
:is(
    .ffPageSection,
    .ffContentSystemGrid,
    .ffRichTextContent,
    .ffRichTextContent__section,
    .advertApplicationArea
) {
    color: var(--ilx-white) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Typography — isolated to the native vacancy-detail card */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row {
    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
}

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row
:is(h1, h2, h3, h4) {
    color: var(--ilx-white) !important;
    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row h1 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-size: clamp(1.9rem, 2.5vw, 2.5rem) !important;
    line-height: 1.16 !important;
}

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row
:is(p, li, td, th, span, label) {
    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
}

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row
:is(p, li) {
    color: rgba(255, 255, 255, 0.94) !important;
}

body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row li::marker {
    color: var(--ilx-orange) !important;
}

/*
 * The existing v20.6 global Apply-pill rule remains responsible for Apply.
 * Back and Refer a Friend retain their already-approved styling.
 */

/* Tablet */
@media (max-width: 900px) {
    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent {
        padding: 28px 12px 58px !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent > .container {
        width: min(calc(100% - 16px), 1180px) !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent > .container > .row {
        padding: 30px 24px !important;
        border-radius: 21px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .pageWrapper {
        background-attachment: scroll !important;
        background-position: center 12% !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent {
        min-height: calc(100vh - 96px) !important;
        padding: 20px 8px 46px !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent > .container {
        width: calc(100% - 8px) !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent > .container > .row {
        padding: 25px 17px !important;
        border-width: 3px !important;
        border-radius: 18px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent > .container > .row h1 {
        font-size: 1.75rem !important;
        line-height: 1.22 !important;
    }
}

/* ==========================================================
   NATIVE JOB-DETAIL TYPOGRAPHY REFINEMENT — v20.8
   Exact elements confirmed in Chrome Developer Tools:
   - H1 ID ending _HeaderTitle
   - First advert paragraph STRONG element
   This block affects the native vacancy-detail page only.
   ========================================================== */

/* Confirmed native vacancy title */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent h1[id$="_HeaderTitle"] {
    margin: 0 0 22px !important;
    color: var(--ilx-white) !important;
    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance !important;
}

/* Confirmed bold role phrase in the opening advert paragraph */
body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
.mainContent > .container > .row p:first-of-type strong:first-of-type {
    color: var(--ilx-gold) !important;
    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    line-height: inherit !important;
    letter-spacing: 0.004em !important;
    text-shadow: 0 1px 10px rgba(255, 179, 71, 0.12) !important;
}

@media (max-width: 900px) {
    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent h1[id$="_HeaderTitle"] {
        font-size: 36px !important;
    }
}

@media (max-width: 600px) {
    body:has(.mainContent input[id$="_btnRefer"]):has(.mainContent a[id$="_lnkApply"])
    .mainContent h1[id$="_HeaderTitle"] {
        margin-bottom: 18px !important;
        font-size: 30px !important;
        line-height: 1.16 !important;
    }
}

/* ==========================================================
   SUCCESS PAGE — MORE VACANCIES BUTTON v20.9
   Success page only. My Account is not targeted.
   ========================================================== */

/*
 * The JavaScript add-on assigns this exact ID to the native
 * Firefish More Vacancies link on success.aspx only.
 */
body:has(form[action*="success.aspx" i])
#illuminex-success-more-vacancies,

body:has(.mainContent a[href*="account" i])
#illuminex-success-more-vacancies {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 152px !important;
    min-height: 44px !important;
    margin: 0 4px !important;
    padding: 10px 22px !important;

    color: var(--ilx-navy) !important;
    background:
        linear-gradient(
            135deg,
            #ff7a00 0%,
            #ff8c00 55%,
            #ffb347 100%
        ) !important;

    border: 2px solid #ffb347 !important;
    border-radius: 999px !important;

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    font-family: "Inter", Arial, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

body:has(form[action*="success.aspx" i])
#illuminex-success-more-vacancies:hover,

body:has(form[action*="success.aspx" i])
#illuminex-success-more-vacancies:focus-visible,

body:has(.mainContent a[href*="account" i])
#illuminex-success-more-vacancies:hover,

body:has(.mainContent a[href*="account" i])
#illuminex-success-more-vacancies:focus-visible {
    color: var(--ilx-navy) !important;
    background:
        linear-gradient(
            135deg,
            #ff8a0a 0%,
            #ff9a22 55%,
            #ffc062 100%
        ) !important;
    border-color: #ffd08a !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.28),
        0 0 0 4px rgba(255, 159, 26, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
    outline: none !important;
}

body:has(form[action*="success.aspx" i])
#illuminex-success-more-vacancies:active,

body:has(.mainContent a[href*="account" i])
#illuminex-success-more-vacancies:active {
    transform: translateY(0) !important;
    filter: brightness(0.98) !important;
}

@media (max-width: 600px) {
    body:has(form[action*="success.aspx" i])
    #illuminex-success-more-vacancies,

    body:has(.mainContent a[href*="account" i])
    #illuminex-success-more-vacancies {
        width: 100% !important;
        max-width: 320px !important;
        margin: 7px 0 !important;
    }
}

/* ==========================================================
   LOGIN MODAL POSITION AND MOBILE SCROLL FIX — v21.0
   Candidate sign-in modal only.
   CV upload and all other Firefish modals are untouched.
   ========================================================== */

/*
 * The login modal is isolated by the presence of a password field.
 * This avoids changing the CV upload modal or unrelated Firefish pop-ups.
 */

/* Keep the overlay fixed to the visible browser viewport */
body:has(.modalPanel input[type="password"])
.modalBackground {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: rgba(2, 21, 36, 0.76) !important;
}

/* Centre the login box consistently on desktop and tablet */
body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"]) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(420px, calc(100vw - 32px)) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px) !important;

    margin: 0 !important;
    transform: translate(-50%, -50%) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 10001 !important;
}

/* Let the modal content use the panel's independent scrolling area */
body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
.mdl-body {
    max-height: none !important;
    overflow: visible !important;
}

/* Prevent mobile browsers zooming or fighting the input focus */
body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
input[type="email"],

body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
input[type="text"],

body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}

/* Mobile: anchor near the top so the keyboard cannot push it off-screen */
@media (max-width: 600px) {
    body:has(.modalPanel input[type="password"])
    .modalBackground {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"]) {
        top: max(12px, env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        max-height:
            calc(
                100dvh
                - 24px
                - env(safe-area-inset-top)
                - env(safe-area-inset-bottom)
            ) !important;

        transform: translateX(-50%) !important;
        border-radius: 16px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================================
   SAMSUNG LOGIN MODAL CONTAINING-BLOCK FIX — v21.1
   Login modal only.
   ========================================================== */

/*
 * Root cause:
 * The application card uses backdrop-filter. On mobile browsers,
 * that can make a fixed-position descendant behave as though it is
 * fixed to the card instead of the browser viewport.
 *
 * These rules remove that containing block only while the login
 * modal is open, then make the modal body independently scrollable.
 */

/* Remove fixed-position containing blocks only while the login modal is open */
body:has(.modalPanel input[type="password"])
:is(
    .pageWrapper,
    .mainContent,
    .mainContent > .container,
    .advertApplicationArea,
    .candidateAdvertApplicationArea,
    .registrationArea,
    .registrationPage
) {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
}

body:has(.modalPanel input[type="password"])
.advertApplicationArea {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep the overlay on the true browser viewport */
body:has(.modalPanel input[type="password"])
.modalBackground {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

/* Make the login panel a proper viewport-fixed flex container */
body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"]) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    display: flex !important;
    flex-direction: column !important;

    width: min(420px, calc(100vw - 32px)) !important;
    max-width: 420px !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;

    margin: 0 !important;
    transform: translate(-50%, -50%) !important;

    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;

    z-index: 10001 !important;
}

/* Keep the title visible and let only the modal body scroll */
body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
.mdl-hdr {
    flex: 0 0 auto !important;
}

body:has(.advertApplicationArea)
.modalPanel:has(input[type="password"])
.mdl-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Samsung/mobile viewport handling */
@media (max-width: 600px) {
    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"]) {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: calc(100vw - 20px) !important;
        max-width: 420px !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;

        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 16px !important;
    }

    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"])
    .mdl-body {
        max-height: calc(100vh - 84px) !important;
        max-height: calc(100dvh - 84px) !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"])
    input[type="email"],

    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"])
    input[type="text"],

    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"])
    input[type="password"] {
        font-size: 16px !important;
    }
}

/* ==========================================================
   MOBILE LOGIN MODAL — LOWER VERTICAL POSITION
   Login popup only. Desktop and other modals are untouched.
   ========================================================== */

@media (max-width: 600px) {
    body:has(.advertApplicationArea)
    .modalPanel:has(input[type="password"]) {
        top: 61% !important;
        transform: translate(-50%, -50%) !important;
    }
}