/* UrbanPass shared chrome: tokens, reset, nav, mobile menu, footer, cookie bar, buttons, a11y.
   Pages set their own body background/colour (light: var(--bg)/var(--g900); dark: var(--dk)/#fff). */

/* ─── TOKENS (union of all pages; index.html values canonical) ─── */
:root{
  --p:#00C8D4;--pd:#008B96;
  --p08:rgba(0,200,212,.08);--p15:rgba(0,200,212,.15);--p30:rgba(0,200,212,.30);
  --ok:#40916C;--ok08:rgba(64,145,108,.08);--ok20:rgba(64,145,108,.20);
  --err:#E63946;--err08:rgba(230,57,70,.08);
  --ac:#D4A017;--ac08:rgba(212,160,23,.08);
  --dk:#0D1117;--dks:#1A1F2B;--dkb:#2A3040;
  --bg:#F5F7F5;--sur:#FFFFFF;--sv:#E6FAFA;--cb:#E0F7FA;
  --g100:#F8F9FA;--g200:#E9ECEF;--g300:#DEE2E6;--g400:#CED4DA;--g500:#ADB5BD;
  --g600:#6C757D;--g700:#495057;--g900:#212529;
  --f:'Poppins',sans-serif;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;
  --focus:var(--p);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:16px;line-height:1.65;overflow-x:hidden}

/* ─── MATERIAL ICONS ─── */
.mi{
  font-family:'Material Icons Round';
  font-style:normal;font-weight:400;
  display:inline-block;line-height:1;
  text-transform:none;letter-spacing:normal;
  word-wrap:normal;white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
  font-size:inherit;
}

/* ─── SKIP LINK ─── */
.skip-link{
  position:fixed;top:.6rem;left:.6rem;z-index:1000;
  background:var(--dk);color:#fff;text-decoration:none;
  border:2px solid var(--p);border-radius:100px;
  padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;
  transform:translateY(-250%);transition:transform .15s;
}
.skip-link:focus{transform:none}

/* ─── FOCUS ─── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
:focus:not(:focus-visible){outline:none}

/* ─── LOGO ─── */
.logo-img{height:36px;width:auto;display:block}
.logo-img-sm{height:28px;width:auto;display:block}
.logo-img-lg{height:72px;width:auto;display:block}
.logo-compact{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.25rem;font-weight:800;letter-spacing:.12em;
  text-decoration:none;
}
.logo-compact .u{color:#fff}
.logo-compact .p{color:var(--p)}

/* ─── BUTTONS ─── */
.btn-primary{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--p);color:var(--dk);
  font-family:var(--f);font-weight:700;font-size:.9rem;
  padding:.8rem 1.75rem;border-radius:var(--r12);
  border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 18px rgba(0,200,212,.2);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-primary:hover{background:var(--pd);color:#fff;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,200,212,.42)}
.btn-outline{
  display:inline-flex;align-items:center;gap:.45rem;
  background:transparent;color:var(--g400);
  font-family:var(--f);font-weight:500;font-size:.9rem;
  padding:.8rem 1.75rem;border-radius:var(--r12);
  border:1px solid var(--dkb);cursor:pointer;text-decoration:none;
  transition:border-color .2s,color .2s,transform .15s;
}
.btn-outline:hover{border-color:var(--g600);color:#fff;transform:translateY(-1px)}

/* ─── NAV (dark on every page; .nav-clear = transparent until scrolled) ─── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:60px;background:var(--dk);
  border-bottom:1px solid var(--dkb);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,4vw,3rem);
  transition:background .4s,border-color .4s,box-shadow .4s;
}
#nav.nav-clear{background:rgba(13,17,23,0);border-bottom-color:transparent}
#nav.nav-accent::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--p)}
#nav.scrolled{
  background:rgba(13,17,23,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 1px 24px rgba(0,0,0,.4);
}
#nav a,.mob-menu a,footer a{text-decoration:none}
.nav-links{display:flex;align-items:center;list-style:none;gap:2rem}
.nav-links a,.nav-link{
  position:relative;font-size:.8rem;font-weight:500;color:var(--g500);
  transition:color .2s;
}
.nav-links a:hover,.nav-link:hover{color:#fff}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;
  background:var(--p);border-radius:1px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.nav-partner{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(0,200,212,.1);color:var(--p);
  border:1px solid rgba(0,200,212,.3);border-radius:var(--r8);
  font-family:var(--f);font-size:.78rem;font-weight:700;letter-spacing:.01em;
  padding:.4rem 1rem;transition:all .2s;
}
.nav-partner:hover{background:var(--p);color:var(--dk)}
.nav-partner .mi{font-size:1rem}
.nav-cta{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--p);color:var(--dk);border:none;cursor:pointer;
  font-family:var(--f);font-size:.8rem;font-weight:700;
  padding:.45rem 1.25rem;border-radius:var(--r8);
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:var(--pd);color:#fff;transform:translateY(-1px)}
.nav-links a.nav-cta{color:var(--dk)}
.nav-links a.nav-cta:hover{color:#fff}
.nav-links a.nav-cta::after{display:none}
.nav-back{margin-left:auto;
  display:flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:500;color:var(--g500);transition:color .2s;
}
.nav-back:hover{color:#fff}
.nav-back .mi{font-size:1.1rem}
.nav-mob{display:none;align-items:center;cursor:pointer;color:var(--g500);background:none;border:none;font-family:inherit;padding:4px}
.nav-mob:hover{color:#fff}
.nav-mob .mi{font-size:1.4rem}
.nav-back + .nav-mob{margin-left:.5rem}

/* ─── MOBILE MENU ─── */
.mob-menu{
  display:none;
  position:fixed;top:60px;left:0;right:0;bottom:0;z-index:299;
  background:rgba(13,17,23,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;padding:2rem 1.5rem;overflow-y:auto;
  animation:menuSlide .25s ease;
}
.mob-menu.open{display:flex}
@keyframes menuSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.mob-menu-links{list-style:none;display:flex;flex-direction:column;gap:0}
.mob-menu-links a{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 0;font-size:1rem;font-weight:500;color:var(--g400);
  border-bottom:1px solid var(--dkb);transition:color .2s;
}
.mob-menu-links a:hover,.mob-menu-links a:active{color:#fff}
.mob-menu-links a .mi{font-size:1.2rem;color:var(--p)}
.mob-menu-ctas{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.mob-menu-ctas .btn-primary,.mob-menu-ctas .nav-partner{
  width:100%;justify-content:center;
  padding:.85rem 1.25rem;font-size:.9rem;border-radius:var(--r12);
}

/* ─── STORE BADGES ─── */
.stb{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.65rem;
  background:var(--dks);border:1px solid var(--dkb);
  border-radius:12px;padding:.9rem 1.6rem;color:#fff;
  transition:all .22s;
}
.stb::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,200,212,.12) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;
}
.stb:hover::before{opacity:1}
.stb:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.3);background:var(--p);color:var(--dk);border-color:var(--p)}
.stb:hover .stb-sm{color:rgba(0,0,0,.5)}
.stb-soon{opacity:.7;cursor:default;pointer-events:none}
.stb-ic{font-size:1.6rem;line-height:1}
.stb-sm{font-size:.6rem;color:var(--g500);letter-spacing:.02em;line-height:1.3}
.stb-nm{font-weight:700;font-size:.95rem;line-height:1.3}

/* ─── FOOTER (.ft-center = stacked, centred variant used by form/partner/agreement pages) ─── */
footer{
  background:var(--dk);border-top:1px solid var(--dkb);
  padding:2.5rem clamp(1.25rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.25rem;
}
.ft-links{display:flex;gap:1.75rem;list-style:none;flex-wrap:wrap}
.ft-links a{font-size:.8rem;color:var(--g600);transition:color .2s}
.ft-links a:hover{color:var(--g400)}
.ft-stores{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.75rem}
.ft-stores .stb{font-size:.8rem;padding:.35rem .7rem}
.ft-stores .stb-ic{font-size:1rem}
.ft-stores .stb-sm{font-size:.45rem}
.ft-stores .stb-nm{font-size:.7rem}
.ft-copy{font-size:.75rem;color:var(--g700)}
footer.ft-center{display:block;text-align:center;padding:1.75rem 1rem;font-size:.78rem;color:var(--g600)}
footer.ft-center a{color:var(--g500);margin:0 .4rem;transition:color .2s}
footer.ft-center a:hover{color:var(--p)}
footer.ft-center .ft-copy{margin-top:.75rem}

/* ─── COOKIE BAR ─── */
#cookie-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:var(--dks);border-top:1px solid var(--dkb);
  padding:.9rem clamp(1.25rem,4vw,3rem);
  align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.cb-text{font-size:.8rem;color:var(--g400);line-height:1.55;max-width:700px}
.cb-text a{color:var(--p);text-decoration:underline;text-underline-offset:2px}
.cb-btns{display:flex;gap:.6rem;flex-shrink:0}
.cb-btn{
  font-family:var(--f);font-size:.8rem;font-weight:600;
  padding:.45rem 1.1rem;border-radius:var(--r8);
  cursor:pointer;border:none;transition:all .2s;
}
.cb-btn.accept{background:var(--p);color:var(--dk)}
.cb-btn.accept:hover{background:var(--pd);color:#fff}
.cb-btn.decline{background:transparent;color:var(--g500);border:1px solid var(--dkb)}
.cb-btn.decline:hover{border-color:var(--g600);color:var(--g400)}

/* ─── REVEAL (.rv toggled by shared.js; .rv-stagger children get 70ms steps) ─── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-stagger > .rv:nth-child(2){transition-delay:70ms}
.rv-stagger > .rv:nth-child(3){transition-delay:140ms}
.rv-stagger > .rv:nth-child(4){transition-delay:210ms}
.rv-stagger > .rv:nth-child(5){transition-delay:280ms}
.rv-stagger > .rv:nth-child(6){transition-delay:350ms}
.rv-stagger > .rv:nth-child(7){transition-delay:420ms}
.rv-stagger > .rv:nth-child(n+8){transition-delay:490ms}
.rv.rv-done{transition-delay:0s!important} /* set by shared.js so hover transitions are not delayed */

/* ─── RESPONSIVE (shared chrome) ─── */
@media(max-width:900px){
  .nav-links,.nav-actions{display:none!important}
  .nav-mob{display:flex}
  footer{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
  .ft-links{justify-content:center}
}
@media(max-width:560px){
  #cookie-bar{flex-direction:column;text-align:center;padding:1rem}
  .cb-text{font-size:.75rem}
  .cb-btns{justify-content:center;width:100%}
  .cb-btn{flex:1}
}

/* ─── REDUCED MOTION ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
}