/* Full-page gate (Display: Full page).

   The gate stops being a window over the site and becomes the page: an opaque
   surface, the brand side widened for logos, trust signals and badges, the
   form beside it. Loaded only when the option is on, after the skin, so it
   reshapes whichever skin is active — or the stock look — without touching
   either. Colour comes from the skin's tokens, with neutral fallbacks for the
   stock look, which declares none. */

/* ---------- Stage 2: the login / create-account gate ---------- */

#sp-login-gate-modal.sp-gate-fullpage{padding:0 !important;align-items:stretch !important;justify-content:stretch !important}
#sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-overlay{
  background:var(--g-sheet,#FFFFFF) !important;background-color:var(--g-sheet,#FFFFFF) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:1 !important}
/* Height is pinned with !important so the tab-change animation, which writes
   an inline height to resize a card, has nothing to animate on a full page. */
#sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-container{
  width:100% !important;max-width:none !important;height:100% !important;max-height:none !important;
  margin:0 !important;border-radius:0 !important;box-shadow:none !important;border:0 !important;
  background:var(--g-sheet,#FFFFFF) !important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-scrollable{min-height:100%;max-height:none !important;overflow:visible !important}

/* Brand content added by full page */
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-headline{margin:0;font-family:inherit;font-weight:700;
  line-height:1.15;letter-spacing:-.01em;text-wrap:balance;color:var(--g-title,var(--g-ink,#0F172A))}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-body{margin:0;line-height:1.6;text-wrap:pretty;color:var(--g-ink,#334155)}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-badges img{display:block;width:auto;height:var(--g-fp-badge-h,48px);max-width:150px;object-fit:contain}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-trust{display:flex !important;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;
  text-align:left;font-weight:600;color:var(--g-trust,var(--g-ink,#0F172A))}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-trust li{display:flex;align-items:flex-start;gap:10px;margin:0}
#sp-login-gate-modal.sp-gate-fullpage .sp-gate-trust li::before{content:"\2713";flex:none;font-weight:700;color:var(--g-trust-mark,var(--g-accent,currentColor))}

/* Phones and tablets: one column that scrolls as a page. Heading and form
   first, the brand content after them, so the first screen is the task. */
@media (max-width:899.98px){
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-scrollable{display:flex !important;flex-direction:column;padding:0 !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-header{order:1;padding:max(28px,env(safe-area-inset-top)) 22px 0 !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-formside{order:2;width:100%;max-width:520px;margin:0 auto;padding:4px 22px 28px !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-header{width:100%;max-width:520px;margin:0 auto}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-brandpanel{order:3;display:flex !important;width:100%;flex:1 0 auto;
    padding:28px 22px max(32px,env(safe-area-inset-bottom)) !important;background:var(--g-panelbg,var(--g-panel,#F4F6FA)) !important}
  /* The header already carries the logo on a phone; the panel's copy of it would repeat it. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-brandpanel .sp-gate-mark{display:none !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-panelstack{gap:18px;max-width:520px;margin:0 auto}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-headline{font-size:22px;text-align:center}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-body{font-size:14.5px;text-align:center}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-trust{font-size:14.5px;align-self:center}
  #sp-login-gate-modal.sp-gate-fullpage{--g-fp-badge-h:38px}
}

/* Desktop: two columns across the whole window. The brand side takes the
   larger share; the form column holds a readable width and centres its
   content in whatever space it gets. */
@media (min-width:900px){
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-container{display:block !important;overflow:hidden}
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-scrollable{height:100%;display:grid !important;padding:0 !important;
    grid-template-columns:minmax(0,1.15fr) minmax(460px,1fr);grid-template-rows:minmax(0,1fr)}
  /* The skin paints its brand colour on a layer spanning the first column. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-scrollable::before{grid-column:1 !important;grid-row:1 !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-brandpanel{display:flex !important;grid-column:1 !important;grid-row:1 !important;
    align-items:center;justify-content:center;overflow-y:auto;padding:clamp(40px,6vh,80px) clamp(36px,5vw,96px) !important;background:none !important}
  /* The heading and the form share the right-hand column and scroll together.
     Short content sits in the middle of the column; long content starts at
     the top and scrolls. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-maincol{display:flex !important;flex-direction:column;grid-column:2;grid-row:1;
    min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:32px max(40px,calc(50% - 250px))}
  /* Flex children shrink by default; in a scrolling column that squeezes the
     heading under the tabs instead of letting the column scroll. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-maincol > *{flex-shrink:0}
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-header{grid-column:auto !important;grid-row:auto !important;
    margin-top:auto;padding:0 0 4px !important;background:none !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-formside{grid-column:auto !important;grid-row:auto !important;
    margin-bottom:auto;overflow:visible !important;padding:0 !important;min-width:0}
  /* Skins that seat the heading on their dark brand panel paint it white
     (Meridian, Aurora). On a full page it sits on the form's white sheet, so
     it takes the skin's own sheet colours back. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-title{color:var(--g-title,var(--g-ink,#0F172A)) !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-login-gate-message{color:var(--g-muted,var(--g-ink,#334155)) !important}
  /* The edge shadow belongs to the modal's two-tone card. */
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-formside::before{display:none !important}

  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-panelstack{gap:clamp(18px,3vh,30px);max-width:620px}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-mark{width:min(360px,80%) !important;margin:0 !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-mark.is-pair{width:min(480px,92%) !important}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-mark .sp-gate-logo{max-height:180px;object-fit:contain}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-headline{font-size:clamp(26px,2.4vw,40px);text-align:center}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-body{font-size:clamp(15px,1.1vw,17px);text-align:center;max-width:52ch}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-trust{font-size:clamp(15px,1.1vw,17px);align-self:center;
    display:grid !important;grid-template-columns:repeat(auto-fit,minmax(220px,max-content));gap:12px 32px;justify-content:center}
  #sp-login-gate-modal.sp-gate-fullpage{--g-fp-badge-h:clamp(40px,5vh,60px)}
  #sp-login-gate-modal.sp-gate-fullpage .sp-gate-fp-badges{margin-top:6px}
}

/* ---------- Stage 1: the age gate ---------- */

#sp-ruo-stage1-overlay.sp-gate-fullpage #sp-ruo-stage1-modal{
  width:100% !important;max-width:560px !important;margin:auto !important;
  background:transparent !important;box-shadow:none !important;border-radius:0 !important;overflow:visible !important}
/* The thin rule across the top of the window has nothing to sit on here. */
#sp-ruo-stage1-overlay.sp-gate-fullpage #sp-ruo-stage1-modal > div:first-child{display:none !important}
#sp-ruo-stage1-overlay.sp-gate-fullpage .sp-ruo-gate-content{padding:max(36px,env(safe-area-inset-top)) 22px 8px !important}
#sp-ruo-stage1-overlay .sp-gate-fp-brand{display:flex;flex-direction:column;align-items:center;gap:16px;
  margin:12px 0 0;padding:28px 22px max(36px,env(safe-area-inset-bottom));text-align:center;
  border-top:1px solid var(--g-line,#E2E8F0)}
#sp-ruo-stage1-overlay .sp-gate-fp-headline{margin:0;font-size:22px;font-weight:700;line-height:1.2;text-wrap:balance;
  color:var(--g-title,var(--g-ink,#0F172A))}
#sp-ruo-stage1-overlay .sp-gate-fp-body{margin:0;font-size:14.5px;line-height:1.6;color:var(--g-ink,#334155)}
#sp-ruo-stage1-overlay .sp-gate-trust{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;text-align:left;
  font-size:14.5px;font-weight:600;color:var(--g-trust,var(--g-ink,#0F172A))}
#sp-ruo-stage1-overlay .sp-gate-trust li{display:flex;gap:10px;margin:0}
#sp-ruo-stage1-overlay .sp-gate-trust li::before{content:"\2713";font-weight:700;color:var(--g-trust-mark,var(--g-accent,#1A2C83))}
#sp-ruo-stage1-overlay .sp-gate-fp-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
#sp-ruo-stage1-overlay .sp-gate-fp-badges img{display:block;width:auto;height:40px;max-width:140px;object-fit:contain}
@media (min-width:900px){
  #sp-ruo-stage1-overlay.sp-gate-fullpage #sp-ruo-stage1-modal{max-width:620px !important}
  #sp-ruo-stage1-overlay .sp-gate-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,max-content));gap:10px 28px;justify-content:center}
  #sp-ruo-stage1-overlay .sp-gate-fp-badges img{height:48px}
}

/* The logo already sits above the heading on a phone; the brand block's copy
   is for the desktop layout, where the brand block becomes its own column. */
#sp-ruo-stage1-overlay .sp-gate-fp-brand .sp-gate-mark{display:none}
#sp-ruo-stage1-overlay .sp-gate-mark{align-items:center;justify-content:center;gap:16px}
#sp-ruo-stage1-overlay .sp-gate-mark img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
#sp-ruo-stage1-overlay.sp-gate-fullpage .sp-ruo-gate-content img{display:block;margin:0 auto}
/* Phones and tablets: the attestation in a readable column, the brand block
   full width beneath it, running to the bottom of the screen. */
@media (max-width:899.98px){
  #sp-ruo-stage1-overlay.sp-gate-fullpage #sp-ruo-stage1-modal{max-width:none !important;min-height:100%;margin:0 !important;
    display:flex !important;flex-direction:column}
  #sp-ruo-stage1-overlay.sp-gate-fullpage .sp-ruo-gate-content{width:100%;max-width:560px;margin:0 auto}
  #sp-ruo-stage1-overlay .sp-gate-fp-brand{flex:1 0 auto;justify-content:center;margin-top:20px;border-top:0;
    background:var(--g-panelbg,var(--g-panel,#F4F6FA))}
}
/* Desktop: the same two columns as the login gate — brand on the left, the
   attestation on the right, each centred in its half of the window. */
@media (min-width:900px){
  #sp-ruo-stage1-overlay.sp-gate-fullpage #sp-ruo-stage1-modal{max-width:none !important;width:100% !important;min-height:100%;margin:0 !important;
    display:grid !important;grid-template-columns:minmax(0,1.15fr) minmax(460px,1fr);align-items:stretch}
  #sp-ruo-stage1-overlay.sp-gate-fullpage .sp-ruo-gate-content{grid-column:2;grid-row:1;align-self:center;width:100%;
    max-width:580px;margin:0 auto;padding:48px 40px !important}
  /* The brand block now carries the logo; don't show it twice. */
  #sp-ruo-stage1-overlay.sp-gate-fullpage .sp-ruo-gate-content > div:first-child:has(img){display:none !important}
  #sp-ruo-stage1-overlay .sp-gate-fp-brand{grid-column:1;grid-row:1;margin:0;border-top:0;justify-content:center;
    gap:clamp(18px,3vh,28px);padding:clamp(40px,6vh,80px) clamp(36px,5vw,96px);
    background:var(--g-panelbg,var(--g-panel,#F4F6FA))}
  #sp-ruo-stage1-overlay .sp-gate-fp-brand.is-textured{background-image:var(--g-panel-tex);background-size:cover;background-position:center}
  #sp-ruo-stage1-overlay .sp-gate-fp-brand .sp-gate-mark{display:flex;width:min(360px,80%)}
  #sp-ruo-stage1-overlay .sp-gate-mark.is-pair{width:min(480px,92%)}
  #sp-ruo-stage1-overlay .sp-gate-mark img{max-height:180px}
  #sp-ruo-stage1-overlay .sp-gate-fp-headline{font-size:clamp(26px,2.4vw,40px);line-height:1.15}
  #sp-ruo-stage1-overlay .sp-gate-fp-body{font-size:clamp(15px,1.1vw,17px);max-width:52ch}
  #sp-ruo-stage1-overlay .sp-gate-trust{font-size:clamp(15px,1.1vw,17px)}
}