/* =========================================================
   clevercratelistscrt.online — shared stylesheet
   Palette: Navy #101827 · Charcoal #1B1F26 · Electric #2F80ED
            Green #27AE60 · Light Gray #F4F6F8
   ========================================================= */
:root{
  --navy:#101827;
  --charcoal:#1B1F26;
  --electric:#2F80ED;
  --signal:#27AE60;
  --mist:#F4F6F8;
}
html{scroll-behavior:smooth}
body{
  background:var(--navy);
  color:var(--mist);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Background imagery (descriptive names) ---------- */
.hero-stadium-floodlights-bg{
  background-image:
    radial-gradient(ellipse at 85% 0%,rgba(47,128,237,.35),transparent 55%),
    radial-gradient(ellipse at 0% 100%,rgba(39,174,96,.18),transparent 50%),
    linear-gradient(180deg,rgba(16,24,39,.80) 0%,rgba(16,24,39,.96) 70%,#101827 100%),
    url('images/photo-1508098682722-e99c43a406b2.png');
  background-size:cover;
  background-position:center;
}
.page-banner-city-night-lights-bg{
  background-image:
    radial-gradient(ellipse at 80% 0%,rgba(47,128,237,.30),transparent 55%),
    linear-gradient(180deg,rgba(16,24,39,.85),rgba(16,24,39,.97)),
    url('images/photo-1514565131-fce0801e5785.png');
  background-size:cover;
  background-position:center;
}
.newsletter-earth-network-bg{
  background-image:
    linear-gradient(120deg,rgba(16,24,39,.94),rgba(47,128,237,.55)),
    url('images/photo-1451187580459-43490279c0fa.png');
  background-size:cover;
  background-position:center;
}
.grid-dots{
  background-image:radial-gradient(rgba(244,246,248,.07) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ---------- Buttons & controls ---------- */
.btn-primary,.btn-ghost,.btn-green{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;border-radius:.8rem;padding:.65rem 1.1rem;
  transition:all .2s ease;cursor:pointer;white-space:nowrap;font-size:.92rem;
}
.btn-primary{background:var(--electric);color:#fff;box-shadow:0 10px 24px -10px rgba(47,128,237,.7)}
.btn-primary:hover{background:#1f6fdc;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);color:#e5e7eb;border:1px solid rgba(255,255,255,.14)}
.btn-ghost:hover{border-color:var(--electric);color:#fff;background:rgba(47,128,237,.12)}
.btn-green{background:var(--signal);color:#fff;box-shadow:0 10px 24px -10px rgba(39,174,96,.7)}
.btn-green:hover{background:#1f9a53;transform:translateY(-1px)}
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-green:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--electric);outline-offset:2px;
}
.nav-link{padding:.5rem .8rem;border-radius:.6rem;color:#cbd5e1;transition:.2s}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(47,128,237,.16)}
.mobile-link{display:flex;align-items:center;gap:.6rem;padding:.75rem .5rem;border-bottom:1px solid rgba(255,255,255,.06);color:#e5e7eb}
.mobile-link:hover{color:#fff}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border-radius:999px;
  font-size:.82rem;font-weight:600;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);color:#d1d5db;transition:.2s;cursor:pointer;
}
.chip:hover{border-color:var(--electric);color:#fff}
.chip-active{background:var(--electric);border-color:var(--electric);color:#fff}
.tag{display:inline-flex;align-items:center;padding:.18rem .55rem;border-radius:.45rem;font-size:.72rem;font-weight:600;background:rgba(47,128,237,.14);color:#9ec5ff}
.tag-green{background:rgba(39,174,96,.16);color:#7be0a5}
.tag-amber{background:rgba(245,158,11,.16);color:#fcd34d}
.tag-red{background:rgba(239,68,68,.16);color:#fca5a5}
.age-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;border:2px solid #ef4444;color:#fecaca;border-radius:999px;padding:.15rem .55rem}
.input{
  width:100%;background:#0c1320;border:1px solid rgba(255,255,255,.13);border-radius:.8rem;
  padding:.68rem .9rem;color:var(--mist);font-size:.92rem;transition:.2s;
}
.input::placeholder{color:#6b7280}
.input:focus{outline:none;border-color:var(--electric);box-shadow:0 0 0 3px rgba(47,128,237,.25)}
select.input option{background:var(--charcoal);color:var(--mist)}
.label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin-bottom:.35rem}
input[type=checkbox].check{accent-color:var(--electric);width:1rem;height:1rem}

/* ---------- Surfaces & cards ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7fb2ff}
.card-surface{
  background:linear-gradient(180deg,rgba(27,31,38,.96),rgba(27,31,38,.86));
  border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;
}
.venue-card{
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  transform:perspective(900px) translateZ(0);
}
.venue-card:hover{
  transform:perspective(900px) translateY(-6px) rotateX(2deg);
  border-color:rgba(47,128,237,.55);
  box-shadow:0 26px 50px -22px rgba(47,128,237,.5);
}
.venue-card img{transition:transform .6s ease}
.venue-card:hover img{transform:scale(1.06)}
.lift{transition:.3s}
.lift:hover{transform:translateY(-4px);border-color:rgba(47,128,237,.45)}
.operator-logo{
  display:grid;place-items:center;flex-shrink:0;border-radius:.7rem;font-weight:800;color:#fff;
  letter-spacing:.02em;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.6);
}
.floating-card{animation:floatY 6s ease-in-out infinite}
.floating-card.delay-1{animation-delay:-2s}
.floating-card.delay-2{animation-delay:-4s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Map pins (3D) ---------- */
.pin-wrap{position:relative;display:block;width:24px;height:24px}
.map-pin{
  position:absolute;left:1px;top:0;width:22px;height:22px;border-radius:50% 50% 50% 0;
  background:linear-gradient(135deg,#6aa9ff,#2F80ED 60%,#1b5fbf);
  transform:rotate(-45deg);border:2px solid #fff;
  box-shadow:0 6px 10px rgba(0,0,0,.55),inset -2px -2px 4px rgba(0,0,0,.25);
}
.map-pin::after{content:'';position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%;background:#101827}
.map-pin.green{background:linear-gradient(135deg,#5fe39a,#27AE60 60%,#1a7f45)}
.map-pin-pulse{
  position:absolute;left:50%;bottom:-6px;width:36px;height:14px;margin-left:-18px;border-radius:50%;
  background:rgba(47,128,237,.45);animation:pinPulse 2.2s ease-out infinite;
}
@keyframes pinPulse{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.leaflet-container{background:#0b111c;font-family:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--charcoal);color:var(--mist);border:1px solid rgba(255,255,255,.1)}
.leaflet-popup-content{margin:12px 14px;font-size:.85rem;line-height:1.45}
.leaflet-popup-content a{color:#7fb2ff;font-weight:600}
.leaflet-container a.leaflet-popup-close-button{color:#9ca3af}
.leaflet-control-attribution{background:rgba(16,24,39,.8)!important;color:#9ca3af!important}
.leaflet-control-attribution a{color:#7fb2ff!important}
.leaflet-bar a{background:var(--charcoal)!important;color:#fff!important;border-color:rgba(255,255,255,.1)!important}

/* ---------- FAQ ---------- */
details.faq{border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:rgba(27,31,38,.7);transition:.2s}
details.faq[open]{border-color:rgba(47,128,237,.45)}
details.faq summary{list-style:none;cursor:pointer;padding:1.05rem 1.2rem;font-weight:600;display:flex;justify-content:space-between;gap:1rem;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .faq-icon{transition:transform .25s}
details.faq[open] summary .faq-icon{transform:rotate(45deg)}
details.faq .faq-body{padding:0 1.2rem 1.1rem;color:#cbd5e1;font-size:.94rem;line-height:1.65}

/* ---------- Prose (legal pages) ---------- */
.prose-legal h2{font-size:1.35rem;font-weight:700;margin:2.2rem 0 .7rem;color:#fff}
.prose-legal h3{font-size:1.05rem;font-weight:700;margin:1.4rem 0 .5rem;color:#e5e7eb}
.prose-legal p,.prose-legal li{color:#cbd5e1;line-height:1.75;font-size:.97rem}
.prose-legal p{margin:.6rem 0}
.prose-legal ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0}
.prose-legal a{color:#7fb2ff;text-decoration:underline;text-underline-offset:3px}
.prose-legal .legal-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.prose-legal .legal-table th,.prose-legal .legal-table td{border:1px solid rgba(255,255,255,.1);padding:.6rem .75rem;text-align:left;vertical-align:top;color:#cbd5e1}
.prose-legal .legal-table thead th{background:var(--navy);color:#e5e7eb;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.prose-legal .legal-table-wrap{overflow-x:auto}

/* ---------- Cookie banner, toast, lightbox ---------- */
.cookie-banner{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:2000;max-width:52rem;margin:0 auto;
  background:rgba(27,31,38,.98);border:1px solid rgba(255,255,255,.12);border-radius:1.1rem;
  padding:1.1rem 1.2rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);animation:slideUp .4s ease;
}
.cc-banner-inner{display:flex;flex-direction:column;gap:1rem}
.cc-banner-title{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;color:#fff}
.cc-banner-text p{margin-top:.35rem;font-size:.86rem;line-height:1.6;color:#cbd5e1}
.cc-banner-text a{color:#7fb2ff;text-decoration:underline}
.cc-banner-actions{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:640px){.cc-banner-actions{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .cc-banner-inner{flex-direction:row;align-items:center}
  .cc-banner-text{flex:1}
  .cc-banner-actions{grid-template-columns:repeat(3,auto);flex-shrink:0}
}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.toast{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:2500;background:var(--charcoal);
  border:1px solid rgba(47,128,237,.5);color:#fff;padding:.65rem 1rem;border-radius:.8rem;font-size:.88rem;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.8);animation:slideUp .3s ease;max-width:92vw;text-align:center;
}
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(5,8,14,.94);display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox.open{display:flex}
.thumb{opacity:.6;transition:.2s;border:2px solid transparent}
.thumb:hover,.thumb.active{opacity:1;border-color:var(--electric)}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:1rem;top:1rem;z-index:4000;background:var(--electric);color:#fff;padding:.5rem 1rem;border-radius:.5rem}

/* ---------- Cookie preferences modal ---------- */
.cc-modal{
  position:fixed;inset:0;z-index:4500;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(5,8,14,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:ccFade .25s ease;
}
@media (min-width:640px){.cc-modal{align-items:center;padding:1.5rem}}
.cc-modal-panel{
  width:100%;max-width:46rem;max-height:94vh;display:flex;flex-direction:column;
  background:var(--charcoal);border:1px solid rgba(255,255,255,.12);border-radius:1.25rem 1.25rem 0 0;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);animation:slideUp .3s ease;
}
@media (min-width:640px){.cc-modal-panel{border-radius:1.25rem;max-height:90vh}}
.cc-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.cc-modal-header h2{font-size:1.25rem;font-weight:800;color:#fff}
.cc-modal-header p{margin-top:.25rem;font-size:.85rem;color:#9ca3af;line-height:1.55}
.cc-close{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:999px;background:rgba(255,255,255,.06);color:#e5e7eb;cursor:pointer}
.cc-close:hover{background:rgba(255,255,255,.14)}
.cc-modal-body{overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;overscroll-behavior:contain}
.cc-modal-footer{display:grid;grid-template-columns:1fr;gap:.5rem;padding:1rem 1.25rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:560px){.cc-modal-footer{grid-template-columns:repeat(3,1fr)}}
.cc-cat{border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:rgba(16,24,39,.6);padding:1rem}
.cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cc-cat-head h3{font-weight:700;color:#fff;font-size:.98rem}
.cc-cat p.cc-desc{margin-top:.5rem;font-size:.85rem;line-height:1.6;color:#cbd5e1}
.cc-cat details{margin-top:.6rem}
.cc-cat summary{cursor:pointer;font-size:.8rem;font-weight:600;color:#7fb2ff;list-style:none;display:inline-flex;align-items:center;gap:.3rem}
.cc-cat summary::-webkit-details-marker{display:none}
.cc-cat summary::before{content:'▸';transition:transform .2s;display:inline-block}
.cc-cat details[open] summary::before{transform:rotate(90deg)}
.cc-items{margin-top:.6rem;display:flex;flex-direction:column;gap:.5rem}
.cc-item{border-radius:.7rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:.6rem .75rem;font-size:.8rem;color:#cbd5e1;line-height:1.5}
.cc-item code{font-size:.78rem;color:#9ec5ff;background:rgba(47,128,237,.12);padding:.05rem .35rem;border-radius:.3rem}
.cc-item-meta{display:block;color:#9ca3af;font-size:.74rem;margin-top:.15rem}
.cc-state{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;color:#9ca3af}
.cc-always{font-size:.75rem;font-weight:700;color:#7be0a5;background:rgba(39,174,96,.16);padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.cc-third a{color:#7fb2ff;text-decoration:underline}

/* Accessible toggle switch */
.cc-switch{position:relative;display:inline-flex;width:2.9rem;height:1.6rem;flex-shrink:0}
.cc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.cc-switch-track{position:absolute;inset:0;border-radius:999px;background:#374151;border:1px solid rgba(255,255,255,.15);transition:background .2s}
.cc-switch-track::after{content:'';position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform .2s}
.cc-switch input:checked + .cc-switch-track{background:var(--signal)}
.cc-switch input:checked + .cc-switch-track::after{transform:translateX(1.3rem)}
.cc-switch input:focus-visible + .cc-switch-track{outline:2px solid var(--electric);outline-offset:2px}
.cc-switch input:disabled{cursor:not-allowed}
.cc-switch input:disabled + .cc-switch-track{opacity:.65}

/* ---------- 18+ Age verification gate ---------- */
/* Restricted content stays hidden until the visitor confirms they are 18+.
   visibility (not display) keeps map containers measurable for Leaflet. */
html:not(.cc-age-ok) body{overflow:hidden}
html:not(.cc-age-ok) body > *:not(.age-gate){visibility:hidden!important}
@media (scripting:none){
  html:not(.cc-age-ok) body{overflow:auto}
  html:not(.cc-age-ok) body > *{visibility:visible!important}
}
.age-gate{
  position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  padding:1rem;overflow-y:auto;
  background:
    radial-gradient(ellipse at 85% 0%,rgba(47,128,237,.35),transparent 55%),
    radial-gradient(ellipse at 0% 100%,rgba(39,174,96,.2),transparent 50%),
    var(--navy);
  animation:ccFade .3s ease;
}
.age-gate::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,246,248,.07) 1px,transparent 1px);background-size:22px 22px;
}
.age-gate.is-leaving{animation:ccFadeOut .3s ease forwards}
.age-gate-panel{
  position:relative;width:100%;max-width:31rem;margin:auto;
  background:linear-gradient(180deg,rgba(27,31,38,.98),rgba(27,31,38,.92));
  border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;padding:2rem 1.5rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(47,128,237,.08);text-align:center;
}
@media (min-width:640px){.age-gate-panel{padding:2.5rem 2.25rem}}
.age-gate-brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:.95rem;color:#fff}
.age-gate-brand-logo{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.75rem;background:var(--electric);box-shadow:0 10px 24px -10px rgba(47,128,237,.8)}
.age-gate-brand span.crt{color:var(--electric)}
.age-gate-badge{
  display:grid;place-items:center;width:4.5rem;height:4.5rem;margin:1.5rem auto 0;border-radius:999px;
  border:3px solid #ef4444;color:#fecaca;font-weight:800;font-size:1.35rem;background:rgba(239,68,68,.08);
}
.age-gate h2{margin-top:1.1rem;font-size:1.65rem;line-height:1.2;font-weight:800;color:#fff}
@media (min-width:640px){.age-gate h2{font-size:1.9rem}}
.age-gate h2:focus{outline:none}
.age-gate p{color:#cbd5e1;font-size:.93rem;line-height:1.65}
.age-gate .age-gate-lead{margin-top:.75rem}
.age-gate-actions{margin-top:1.5rem;display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:480px){.age-gate-actions{grid-template-columns:1fr 1fr}}
.age-gate-actions button{padding:.85rem 1rem;font-size:.95rem;white-space:normal}
.age-gate-note{margin-top:1.25rem;font-size:.78rem!important;color:#9ca3af!important;line-height:1.55}
.age-gate-help{margin-top:1.25rem;text-align:left;border-radius:1rem;border:1px solid rgba(39,174,96,.3);background:rgba(39,174,96,.08);padding:1rem}
.age-gate-help p{font-size:.85rem}
.age-gate-help ul{margin-top:.5rem;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:#e5e7eb}
.age-gate-help a{color:#7be0a5;text-decoration:underline}
.age-gate-denied-icon{display:grid;place-items:center;width:4.5rem;height:4.5rem;margin:1.5rem auto 0;border-radius:999px;background:rgba(239,68,68,.12);color:#fca5a5}
@keyframes ccFade{from{opacity:0}to{opacity:1}}
@keyframes ccFadeOut{from{opacity:1}to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}