/* IWD-9475: Yoti age-verification pages (splash, standalone, failed).
   Aligned with the SSO design system: same iwc-black/iwc-pink/iwc-brightPink palette,
   same card treatment (rounded-3xl + 2px brightPink border + dark ambient glow),
   same backdrop pattern (image layer + black/75 overlay with backdrop-blur). */

:root {
    --yoti-pink: #f48fb1;          /* iwc-pink */
    --yoti-pink-bright: #ff8bcb;   /* iwc-brightPink */
    --yoti-pink-hover: #ff9bc2;
    --yoti-bg: #121212;            /* iwc-black */
    --yoti-card-bg: #121212;
    --yoti-card-border: var(--yoti-pink-bright);
    --yoti-card-glow: 0 0 54px 0 rgba(0, 0, 0, 0.32);
    --yoti-btn-glow: 0 0 16px 0 rgba(244, 143, 177, 0.48);
    --yoti-text: #fff;
    --yoti-text-muted: rgba(255, 255, 255, 0.6);
    --yoti-divider: rgba(255, 255, 255, 0.3);
    --yoti-radius-card: 24px;
    --yoti-radius-btn: 12px;
    --yoti-font: 'Figtree', 'Open Sans', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Page shell ---------- */
.yoti-page {
    background: var(--yoti-bg);
    color: var(--yoti-text);
    font-family: var(--yoti-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.yoti-page * { box-sizing: border-box; }
body.yoti-page-body { background: var(--yoti-bg); margin: 0; }

/* Backdrop is desktop-only. Mobile is plain dark. */
.yoti-page__backdrop { display: none; }

/* ---------- Card / main ---------- */
.yoti-page__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 1;
}
.yoti-page__card {
    width: 100%;
    background: var(--yoti-card-bg);
    color: var(--yoti-text);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    flex: 1 1 auto;
}
.yoti-page__logo {
    display: block;
    width: 180px;
    height: 32px;
    margin: 8px 0 24px;
}
.yoti-page__divider {
    border: 0;
    height: 1px;
    width: 100%;
    background: var(--yoti-divider);
    border-radius: 4px;
    margin: 0 0 24px;
}
.yoti-page__heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 20px;
    color: var(--yoti-text);
}
.yoti-page__body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px;
    max-width: 380px;
    letter-spacing: 0.0225px;
}
.yoti-page__body strong {
    font-weight: 700;
    color: var(--yoti-text);
}
.yoti-page__body-extra { display: none; }
.yoti-page__body[data-expanded="true"] .yoti-page__body-extra { display: inline; }
.yoti-page__body-toggle {
    background: none;
    border: 0;
    color: var(--yoti-pink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 6px;
    margin: 4px auto 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.yoti-page__body-toggle:hover { color: var(--yoti-pink-bright); }
.yoti-page__body-toggle:focus-visible {
    outline: 2px solid var(--yoti-pink);
    outline-offset: 2px;
    border-radius: 4px;
}
.yoti-page__body-toggle .yoti-caret {
    width: 10px;
    height: 10px;
    transition: transform 0.18s ease;
}
.yoti-page__body[data-expanded="true"] .yoti-page__body-toggle .yoti-caret {
    transform: rotate(180deg);
}

/* ---------- "OR" divider ---------- */
.yoti-page__or {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 24px 0;
    color: var(--yoti-text-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.yoti-page__or::before,
.yoti-page__or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--yoti-divider);
}

/* ---------- Buttons (matches SSO sign-in/join-now) ---------- */
.yoti-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 18px 16px;
    border-radius: var(--yoti-radius-btn);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
    border: 1.5px solid transparent;
    margin: 0 0 12px;
    text-align: center;
}
.yoti-btn:focus-visible {
    outline: 2px solid var(--yoti-pink);
    outline-offset: 2px;
}

.yoti-btn--primary {
    background: var(--yoti-pink);
    color: var(--yoti-bg);
    box-shadow: var(--yoti-btn-glow);
}
.yoti-btn--primary:focus-visible {
    background: var(--yoti-pink-hover);
    color: var(--yoti-bg);
}

.yoti-btn--secondary {
    background: transparent;
    color: var(--yoti-pink);
    border-color: var(--yoti-pink);
}
.yoti-btn--secondary:focus-visible {
    background: var(--yoti-pink);
    color: var(--yoti-bg);
    border-color: var(--yoti-pink);
}

/* Hover styles only on devices that actually support hover (desktop pointers).
   Mobile browsers otherwise retain the :hover state after a tap, which made
   the "Verify My Age" button visually flip color when the user tapped "More". */
@media (hover: hover) {
    .yoti-btn--primary:hover {
        background: var(--yoti-pink-hover);
        color: var(--yoti-bg);
    }
    .yoti-btn--secondary:hover {
        background: var(--yoti-pink);
        color: var(--yoti-bg);
        border-color: var(--yoti-pink);
    }
}

/* ---------- Powered by Yoti ---------- */
.yoti-page__powered-by {
    margin: 24px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yoti-text-muted);
    font-size: 13px;
}
.yoti-page__powered-by img {
    height: 18px;
    width: auto;
    display: inline-block;
}

/* ---------- Rotation banner (signup discount) ----------
   Mobile: pinned to top of viewport (fixed); page reserves padding-top to match.
   Desktop: lives inside the card (relative positioning + negative margins). */
.yoti-page__rotation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 30;
    background: var(--yoti-pink-bright);
    color: #000;
    font-weight: 700;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    margin: 0;
}
/* Reserve room at the top of the splash so card content isn't hidden under the fixed banner. */
.yoti-page--splash { padding-top: 40px; }
.yoti-page__rotation-banner-track {
    display: flex;
    width: max-content;
    animation: yotiMarquee 14s linear infinite;
}
.yoti-page__rotation-banner-text {
    display: inline-block;
    white-space: nowrap;
}
@keyframes yotiMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- VPN banner: desktop (top, closable) ---------- */
.yoti-vpn-top {
    display: none;
    position: relative;
    background: var(--yoti-pink-bright);
    color: #000;
    font-weight: 600;
    font-size: 14px;
    z-index: 50;
}
.yoti-vpn-top.is-hidden { display: none !important; }
.yoti-vpn-top__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 48px 6px 24px;
    text-align: center;
    min-height: 32px;
}
.yoti-vpn-top__text { margin: 0; }
.yoti-vpn-top__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #000;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
}
.yoti-vpn-top__close:hover,
.yoti-vpn-top__close:focus-visible {
    background: rgba(0, 0, 0, 0.08);
}

/* ---------- VPN banner: mobile (bottom, plain) ---------- */
.yoti-vpn-bottom {
    padding: 18px 24px 24px;
    text-align: center;
    color: var(--yoti-text);
    font-size: 14px;
    background: var(--yoti-bg);
    line-height: 1.5;
}
.yoti-vpn-bottom__text { margin: 0; }

/* The Yoti polling modal lives in the page DOM so its JS can fire on sessionId
   redirects, but it should be hidden until the modal API shows it. Bootstrap's
   modal CSS isn't loaded on this page, so we hide it explicitly. */
#verificationModal { display: none; }

/* ---------- Failed state ---------- */

/* Mobile splash backdrop: renders the splash markup behind the failed modal
   so the user sees the page they came from, blurred. Desktop hides it and
   uses the photo-collage backdrop instead. */
.yoti-page__failed-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
/* The splash partial when rendered as a backdrop should not show the sticky
   rotation banner (it would float above the failed modal otherwise). */
.yoti-page__failed-bg .yoti-page__rotation-banner { display: none; }
.yoti-page__failed-bg .yoti-page--splash { padding-top: 0; }

/* The bg-blur "halo" — a pink-tinted glass wrapper around the modal card.
   Matches Figma's "bg blur" layer (rgba pink + backdrop-filter: blur(16px)). */
.yoti-failed-card-wrapper {
    width: 100%;
    max-width: 476px;
    margin: 24px auto;
    padding: 20px;
    background: rgba(244, 143, 177, 0.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 32px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}
.yoti-failed-card {
    width: 100%;
    background: var(--yoti-card-bg);
    color: var(--yoti-text);
    border: 2px solid var(--yoti-card-border);
    border-radius: var(--yoti-radius-card);
    box-shadow: var(--yoti-card-glow);
    padding: 40px;
    text-align: center;
    position: relative;
}
.yoti-failed-card__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: 0;
    color: var(--yoti-text);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    text-decoration: none;
}
.yoti-failed-card__close:hover,
.yoti-failed-card__close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--yoti-text);
}
.yoti-failed-card__icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px auto 20px;
}
.yoti-failed-card__heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 20px;
}
.yoti-failed-card__body {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 28px;
    letter-spacing: 0.0225px;
}

/* ---------- Tablet+ / desktop (768px+) ---------- */
@media (min-width: 768px) {
    .yoti-vpn-top { display: block; }
    .yoti-vpn-bottom { display: none; }

    .yoti-page__main {
        padding: 32px 24px;
    }
    .yoti-page__card {
        max-width: 436px;
        flex: 0 0 auto;
        border: 2px solid var(--yoti-card-border);
        border-radius: var(--yoti-radius-card);
        box-shadow: var(--yoti-card-glow);
        padding: 32px;
    }
    .yoti-page--splash { padding-top: 0; }
    .yoti-page__rotation-banner {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        width: calc(100% + 64px);
        margin: -32px -32px 18px;
        border-radius: var(--yoti-radius-card) var(--yoti-radius-card) 0 0;
    }

    /* Splash has more content than standalone (sign-in + OR + double headings +
       More toggle + rotation banner). Tighten vertical rhythm on desktop so the
       whole card fits in viewport without page scroll. */
    .yoti-page--splash .yoti-page__logo        { margin: 4px 0 14px; }
    .yoti-page--splash .yoti-page__divider     { margin: 0 0 14px; }
    .yoti-page--splash .yoti-page__heading     { margin: 0 0 12px; }
    .yoti-page--splash .yoti-page__body        { margin: 0 0 14px; }
    .yoti-page--splash .yoti-page__or          { margin: 12px 0; }
    .yoti-page--splash .yoti-btn               { margin: 0 0 8px; }
    .yoti-page--splash .yoti-page__powered-by  { margin: 14px 0 0; }

    /* Two-layer backdrop, matching SSO pattern:
       1. The image (cover, sharp)
       2. ::after overlay = black/75 + backdrop-blur for the dim+blur effect */
    .yoti-page__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        background: var(--yoti-bg) center/cover no-repeat;
        background-image: url('../../images/yoti-pages/backdrop.png');
        pointer-events: none;
    }
    .yoti-page--failed .yoti-page__backdrop {
        background-image: url('../../images/yoti-pages/backdrop.png');
    }
    .yoti-page__backdrop::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /* Failed page: hide the mobile splash backdrop on desktop (photo backdrop takes over). */
    .yoti-page__failed-bg { display: none; }

    .yoti-failed-card__heading { font-size: 26px; }
    .yoti-failed-card__body { font-size: 16px; }
}