/* ════════════════════════════════════════
   RECRUITMENT LANDING — Hero section
   Loaded only on the "Recruitment Landing" page template.
   Everything is scoped under .recruit-landing so generic class
   names (.btn, .card, .featured, h1) and design-specific custom
   properties (--radius, etc.) never leak into the rest of the site.
   Reuses the theme's --navy / --blue tokens (identical values).
════════════════════════════════════════ */

.recruit-landing {
    /* — design-specific tokens, scoped (NOT :root) — */
    --ink: #0B0B45;
    --muted: #5b6b8c;
    --radius: 22px;
    --shadow-sm: 0 8px 24px rgba(11, 11, 69, .10);
    /* --portrait-w = max portrait width.
       --portrait-bottom = the agent's seat INSIDE the card (measured from the
       cards-row bottom, so it's a large negative number). Less negative = agent
       moves up in the card; more negative = agent moves down. */
    --portrait-w: 815px;
    --portrait-bottom: -230px;

    font-family: 'Poppins', Arial, sans-serif;
    color: var(--ink);
    background: #f4f6fa;
    -webkit-font-smoothing: antialiased;
}

.recruit-landing * {
    box-sizing: border-box;
}

/* Loads only on this template. Lock the document to the viewport so the wide
   hero content (heading at content-width + oversized portrait) can't push the
   whole page wider than the screen and shift/clip everything on small phones. */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ===== HERO ===== */
.recruit-landing .hero {
    position: relative;
    text-align: center;
    padding: 74px 20px 40px;
    overflow: hidden;
    /* Sky photo on top; gradient underneath as a fallback if the image is missing.
       Swap the filename — file lives in assets/images/recruitment/ */
    background:
        url('https://dandbdubai.ae/wp-content/uploads/2026/06/clouds-drifting-peacefully-in-a-blue-sky.webp') center / cover no-repeat,
        linear-gradient(180deg, #4a8bcf 0%, #76aede 34%, #a7cdec 74%, #cfe5f7 100%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

.recruit-landing .hero::before {
    /* cloud wisps */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 36% at 15% 20%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(45% 26% at 88% 26%, rgba(255, 255, 255, .38), transparent 60%),
        radial-gradient(40% 24% at 70% 12%, rgba(255, 255, 255, .3), transparent 60%);
}

/* Bottom of the hero fades into a blurred, light-blue band. The backdrop-filter
   blurs the sky + the agent's lower body behind it; the mask fades the blur in
   from the middle so there's no hard edge. Sits below the cards/text (z-index 2)
   so they stay crisp. */
.recruit-landing .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15%;
    /* Above the cards layer (z-index 2) so it blurs the agent's lower body again
       now that the agent sits in the cards layer. It only covers the bottom band,
       where nothing but the suit + sky lives, so cards/text stay crisp. */
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(191, 217, 242, 0) 0%, rgba(191, 217, 242, .55) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}

.recruit-landing .hero-portrait {
    /* Agent portrait — anchored to .cards (its positioned parent), NOT the hero.
       So: moving the cards moves the agent with them; --portrait-bottom moves the
       agent within the card. `bottom` is measured from the cards-row bottom, so it
       needs a large negative value to drop the body below the row and seat the face
       in the card. z-index:0 keeps it behind the card tiles. */
    position: absolute;
    left: 50%;
    bottom: var(--portrait-bottom);
    transform: translateX(-50%);
    width: clamp(320px, 45vw, 440px);
    /* Override the parent theme's reset (img{max-width:100%}) so it can exceed
       the container width and zoom in on mobile. */
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.recruit-landing .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
}

.recruit-landing .lp-logo {
    display: block;
    height: clamp(38px, 5vw, 48px);
    width: auto;
    margin: 0 auto 32px;
}

.recruit-landing h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.7rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(104deg, #ffffff 28%, rgba(255, 255, 255, .42) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.recruit-landing .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
    flex-wrap: wrap;
}

.recruit-landing .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 13px 24px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.recruit-landing .btn:hover {
    transform: translateY(-2px);
}

.recruit-landing .btn svg {
    width: 17px;
    height: 17px;
}

.recruit-landing .btn-dark {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 12px 26px rgba(11, 11, 69, .32);
}

.recruit-landing .btn-light {
    background: #fff;
    color: var(--navy);
    box-shadow: var(--shadow-sm);
}

/* cards row — center card is tallest and protrudes top & bottom */
.recruit-landing .cards {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
    /* Larger top margin pushes the cards down; the bottom-anchored portrait
       follows (stays seated), so cards + agent move down together. */
    margin-top: 90px;
}

.recruit-landing .card {
    position: relative;
    border-radius: var(--radius);
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recruit-landing .card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.recruit-landing .foot-label {
    font-size: .8rem;
    opacity: .82;
}

.recruit-landing .foot-value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
}

.recruit-landing .card-solid {
    /* left: opaque blue, like the reference's card-issuing tile */
    width: 272px;
    height: 332px;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(158deg, #5277cc 0%, #21317f 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 50px rgba(11, 11, 69, .30);
}

.recruit-landing .chip {
    margin-top: auto;
    background: #fff;
    color: var(--navy);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
}

.recruit-landing .chip svg {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    color: var(--blue);
}

.recruit-landing .chip .chip-t {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
}

.recruit-landing .featured {
    /* center: clear glass, face shows through */
    width: 312px;
    height: 436px;
    z-index: 3;
    justify-content: space-between;
    color: #fff;
    /* Transparent at the top (the agent's face shows through) → solid #0F0A44
       at the bottom so the "Commission / Uncapped" text stays readable. */
    background: linear-gradient(180deg, rgba(15, 10, 68, 0) 55%, rgba(15, 10, 68, .55) 99%, #0F0A44 100%);
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 28px 62px rgba(11, 11, 69, .32);
}

.recruit-landing .featured .tag-pill {
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    backdrop-filter: blur(4px);
    text-shadow: 0 1px 4px rgba(11, 11, 69, .3);
}

.recruit-landing .featured .foot-label,
.recruit-landing .featured .foot-value {
    text-shadow: 0 2px 10px rgba(11, 11, 69, .45);
}

.recruit-landing .card-tint {
    /* right: lavender-tinted glass with an icon */
    width: 272px;
    height: 332px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background: linear-gradient(158deg, rgba(186, 176, 222, .6), rgba(110, 112, 176, .5));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 24px 50px rgba(11, 11, 69, .26);
}

.recruit-landing .coin {
    margin: auto;
    width: 96px;
    height: 96px;
}
/* "Open roles" (left) & "Perks" (right) list cards
   ──────────────────────────────────────────────── */
.recruit-landing .card-title {
    text-align: center;
    margin-bottom: 8px;
}

.recruit-landing .card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.recruit-landing .card-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.22;
}

.recruit-landing .card-list li svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

/* Left card (roles): chevron pinned to the left edge, text centred in the card */
.recruit-landing .card-tint .card-list li,
.recruit-landing .card-solid .card-list li{
    align-items: flex-start;
    text-align: left;
}

.recruit-landing .card-tint .card-list li svg,
.recruit-landing .card-solid .card-list li svg
 {
    margin-top: 1px;
    opacity: .9;
}

/* Right card (perks): check icon left, text left-aligned (base .card-list li) */
.recruit-landing .card-tint .card-list li svg {
    opacity: .85;
}

.recruit-landing .trust {
    position: relative;
    z-index: 5;
    margin-top: 60px;
    text-align: center;
}

.recruit-landing .stars {
    color: #FFC53D;
    letter-spacing: 3px;
    font-size: 1.05rem;
}

.recruit-landing .trust p {
    margin-top: 6px;
    font-size: .92rem;
    color: #FFFFFF;
}

.recruit-landing .lp-footer {
    text-align: center;
    padding: 30px 20px 50px;
    color: #9aa6c4;
    font-size: 13px;
}

/* ════════════════════════════════════════
   APPLICATION FORM (#apply)
   Styles the Contact Form 7 output to match the design. The CF7 form template
   wraps each field in <div class="rc-field"> with a <label>; CF7 then generates
   the inputs/radios/file/submit which we target by their wpcf7-* classes.
════════════════════════════════════════ */
.recruit-landing .apply {
    padding: 90px 20px 100px;
    background: #f4f6fa;
}

.recruit-landing .apply-inner {
    max-width: 680px;
    margin: 0 auto;
}

.recruit-landing .apply h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--navy);
    text-align: center;
    letter-spacing: -.01em;
}

.recruit-landing .apply .lead {
    text-align: center;
    color: var(--muted);
    margin-top: 12px;
    font-size: 1.02rem;
}

/* The CF7 <form> is the card — white on the light-grey section */
.recruit-landing .apply .wpcf7-form {
    margin-top: 40px;
    padding: 38px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid #eceff5;
    box-shadow: var(--shadow-sm);
}

.recruit-landing .apply .rc-field {
    margin-bottom: 22px;
}

.recruit-landing .apply .rc-field > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.recruit-landing .apply .rc-req {
    color: #e0322d;
}

.recruit-landing .apply .wpcf7-form-control-wrap {
    display: block;
}

/* Text-like inputs + textarea */
.recruit-landing .apply input[type=text],
.recruit-landing .apply input[type=email],
.recruit-landing .apply input[type=tel],
.recruit-landing .apply textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    padding: 13px 15px;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.recruit-landing .apply textarea {
    min-height: 130px;
    resize: vertical;
}

.recruit-landing .apply input[type=text]:focus,
.recruit-landing .apply input[type=email]:focus,
.recruit-landing .apply input[type=tel]:focus,
.recruit-landing .apply textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(31, 60, 158, .14);
}

/* Radio groups → inline navy pills (CF7 use_label_element wraps each in a label) */
.recruit-landing .apply .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recruit-landing .apply .wpcf7-radio .wpcf7-list-item {
    margin: 0;
    display: inline-flex;
}

.recruit-landing .apply .wpcf7-radio .wpcf7-list-item > label {
    margin: 0;
    padding: 11px 22px;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.recruit-landing .apply .wpcf7-radio .wpcf7-list-item > label:hover {
    border-color: #aab3c4;
}

/* Hide the native radio circle — pills show text only */
.recruit-landing .apply .wpcf7-radio input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Keyboard focus ring on the pill while tabbing through options */
.recruit-landing .apply .wpcf7-radio .wpcf7-list-item > label:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(31, 60, 158, .2);
}

/* Selected pill → solid navy fill, white text */
.recruit-landing .apply .wpcf7-radio .wpcf7-list-item > label:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.recruit-landing .apply .wpcf7-radio .wpcf7-list-item>label:has(input:checked) .wpcf7-list-item-label {
    color: #fff;
}

/* File upload — dashed dropzone box with a navy button */
.recruit-landing .apply input[type=file] {
    width: 100%;
    border: 1.5px dashed #cdd4df;
    border-radius: 14px;
    background: #fafbfc;
    padding: 24px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.recruit-landing .apply input[type=file]:hover {
    border-color: var(--blue);
    background: #f5f8ff;
}

.recruit-landing .apply input[type=file]::file-selector-button {
    margin-right: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.recruit-landing .apply input[type=file]::-webkit-file-upload-button {
    margin-right: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.recruit-landing .apply input[type=file]:hover::file-selector-button {
    background: var(--blue);
}

.recruit-landing .apply input[type=file]:hover::-webkit-file-upload-button {
    background: var(--blue);
}

/* Submit */
.recruit-landing .apply .wpcf7-submit {
    width: 100%;
    margin-top: 6px;
    background: var(--navy);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    transition: background .15s ease, transform .15s ease;
}

.recruit-landing .apply .wpcf7-submit:hover {
    background: var(--blue);
    transform: translateY(-1px);
}

/* CF7 validation / response messages */
.recruit-landing .apply .wpcf7-not-valid-tip {
    color: #d33;
    font-size: 13px;
    margin-top: 6px;
}

.recruit-landing .apply .wpcf7-response-output {
    margin: 18px 0 0 !important;
    border-radius: 8px;
    font-size: 14px;
}

/* ════════════════════════════════════════
   HERO ENTRANCE ANIMATION
   Staggered reveal on load: headline → CTAs → cards → trust → agent photo.
   `both` fill-mode holds each element hidden until its delay elapses.
════════════════════════════════════════ */

@keyframes rc-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Portrait keeps its translateX(-50%) centering while it rises in */
@keyframes rc-rise-portrait {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.recruit-landing h1,
.recruit-landing .cta-row,
.recruit-landing .card,
.recruit-landing .trust {
    animation: rc-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}

/* Stagger order (text → cards → photo) */
.recruit-landing h1 {
    animation-delay: .10s;
}

.recruit-landing .cta-row {
    animation-delay: .28s;
}

.recruit-landing .card-solid {
    animation-delay: .50s;
}

.recruit-landing .featured {
    animation-delay: .62s;
}

.recruit-landing .card-tint {
    animation-delay: .74s;
}

.recruit-landing .trust {
    animation-delay: .90s;
}

.recruit-landing .hero-portrait {
    animation: rc-rise-portrait .9s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: 1.05s;
}

/* ===== RESPONSIVE ===== */

/* Desktop seat is constant (--portrait-bottom: 0) now that the portrait stays
   a near-constant size across 1000–1456px — no per-width compensation needed. */

@media (max-width: 980px) {
    .recruit-landing {
        /* Agent seat inside the card on mobile (now measured from the cards-row
           bottom, like desktop). Less negative = agent up; more = agent down. */
        --portrait-bottom: -40px;
    }

    .recruit-landing .hero {
        clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
        padding-bottom: 90px;
        padding: 20px 10px;
    }

    .recruit-landing .apply .wpcf7-form {
        padding: 30px 15px;
    }

    .recruit-landing .hero-portrait {
        /* NEAR-CONSTANT size across all phones & tablets. The area below the
           card (trust + padding) is fixed, so a constant portrait size keeps
           the head in the same spot relative to the card at every width — that
           is what makes phone AND tablet look the same. The tight clamp only
           guards the extremes. Bump all three numbers together to resize. */
        width: clamp(410px, 66vw, 300px);
        bottom: -210px;
        
    }

    /* Bigger headline on phones. The theme renders the heading at its content
       width (so it doesn't wrap and overflows the page, shifting everything).
       Force it to a block, cap the width, and let it wrap. */
    .recruit-landing h1 {
        font-size: clamp(2rem, 9vw, 3.4rem);
        display: block !important;
        padding: 40px 10px 0px;
        white-space: normal !important;
        margin-inline: auto;
        overflow-wrap: break-word;
    }

    .recruit-landing .cards {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 86px;
    }

    /* On mobile, show only the center glass card; hide the two side cards */
    .recruit-landing .card-solid,
    .recruit-landing .card-tint {
        display: none;
    }

    .recruit-landing .featured {
        /* Portrait card; inherits the desktop transparent→#0F0A44 gradient
           and white text (no mobile background/color override). */
        width: min(300px, 88vw);
        height: auto;
        min-height: 380px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .recruit-landing * {
        transition: none !important;
        /* Disable the entrance animation; elements fall back to their visible
           base state (no animation = no hidden `from` keyframe applied). */
        animation: none !important;
    }
}

.recruit-landing .apply .iti {
    display: block;
    width: 100%;
}
.recruit-landing .apply .iti__country-list {
    background: #fff;
    border: 1px solid #dfe3ec;
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(11, 11, 69, .14);
    border-radius: 8px;
}
.recruit-landing .apply .iti__country.iti__highlight {
    background: #f4f6fa;
}
.recruit-landing .apply .iti__divider {
    border-bottom: 1px solid #eceff5;
}
.recruit-landing .apply .iti__dial-code {
    color: var(--muted);
}