/* Spotd design system (brand book R2).
   Type: Plus Jakarta Sans for display, Manrope for text.
   Colors: light grey #F2F2F2 background, cream #F9F4ED, ink #191919, blue #9AB8F4, yellow #FDF4AB,
   grey #A3A3A3, white #FFFFFF. Motif: the four-circle logo mark. */
:root{
  --bg:#F2F2F2;
  --surface:#FFFFFF;
  --ink:#191919;
  --ink-soft:#6B6B6B;      /* secondary text, darker than brand grey for legibility */
  --grey:#A3A3A3;          /* brand grey: captions, strikethrough, idle icons */
  --line:#E4E4E4;
  --blue:#9AB8F4;
  --blue-soft:#DCE6FB;
  --yellow:#FDF4AB;
  --motif:#DAD7D0;         /* the soft grey of the logo rings */
  --cream:#F9F4ED;         /* brand cream, kept for accents */
  /* Legacy names still used by page styles. */
  --honey:var(--yellow);
  --honey-deep:var(--ink);
  --radius:22px;
  --shadow: 0 1px 2px rgba(25,25,25,.04), 0 14px 30px -20px rgba(25,25,25,.28);
  --display:'Plus Jakarta Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:#191919;
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:24px 0;
}
::selection{background:var(--blue)}

.phone{
  width:390px;
  max-width:100%;
  background:var(--bg);
  min-height:844px;
  border-radius:34px;
  overflow:hidden;
  padding:20px 20px 100px;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

/* On a real phone this becomes the whole screen instead of a fixed-size
   mockup card, otherwise a shorter viewport pushes the tab bar off-screen. */
@media (max-width:480px){
  body{ padding:0!important; background:var(--bg)!important; }
  .phone{
    width:100vw!important; max-width:none!important;
    height:100dvh!important; min-height:100dvh!important; max-height:none!important;
    border-radius:0!important; box-shadow:none!important;
  }
  .topbar{ margin-bottom:14px; }
  .greeting-name{ font-size:26px; }
  .cat-section{ margin-bottom:18px; }
  .cat-row{ gap:8px; }
  .list-section{ margin-bottom:22px; }
  .list-header{ margin-bottom:10px; }
}

/* ---- Type ---------------------------------------------------------- */
h1,h2,h3,.page-title,.greeting-name,.card-title,.profile-name,.stat-value{
  font-family:var(--display);letter-spacing:-.02em;
}
/* The brand's blue highlight behind a key word ("Your Workout"). */
.hl{
  background:var(--blue);color:var(--ink);padding:0 .16em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.topbar{margin-bottom:20px}
.greeting-label{
  margin:0 0 2px;font-size:12px;color:var(--ink-soft);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
.greeting-name{
  margin:0;font-weight:500;font-size:30px;line-height:1.15;
}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:none;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);flex:0 0 auto;
}
.back-btn{
  width:38px;height:38px;border-radius:50%;border:none;background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto;
  text-decoration:none;box-shadow:var(--shadow);
}

/* ---- Categories: one style for all, in a row that scrolls so the
   list can grow. Round photos echo the circles of the logo. ---------- */
.cat-section{margin:0 -20px 28px}
.cat-row{
  display:flex;gap:14px;overflow-x:auto;padding:4px 20px 2px;scrollbar-width:none;
}
.cat-row::-webkit-scrollbar{display:none}
.cat-tile{
  flex:0 0 auto;width:72px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink);
}
.cat-tile-photo{
  width:68px;height:68px;border-radius:50%;
  background-size:cover;background-position:center;background-color:var(--motif);
  box-shadow:0 4px 12px rgba(25,25,25,.12);
  transition:transform .15s;
}
.cat-tile:active .cat-tile-photo{transform:scale(.95)}
.cat-tile-label{
  font-size:11.5px;font-weight:600;font-family:var(--display);letter-spacing:-.01em;
  text-align:center;white-space:nowrap;
}

/* ---- Section headers ---------------------------------------------- */
.list-header{
  display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;
}
.list-header h2{
  margin:0;font-weight:500;font-size:20px;
}
.see-all{font-size:12.5px;color:var(--ink);text-decoration:underline;font-weight:600}
.list-section{margin-bottom:30px}
.scroll-row{
  display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px;
  scrollbar-width:none;
}
.scroll-row::-webkit-scrollbar{display:none}
.section-subtitle{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft)}
.more-btn{
  border:none;background:var(--surface);color:var(--ink);font-size:16px;line-height:1;
  cursor:pointer;width:32px;height:32px;border-radius:50%;flex:0 0 auto;box-shadow:var(--shadow);
}

/* ---- Cards --------------------------------------------------------- */
.cards{display:flex;flex-direction:column;gap:16px}
.card{
  background:var(--surface);
  border:none;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card-photo{
  height:160px;width:100%;
  background-size:cover;background-position:center;background-color:var(--motif);
  position:relative;
}
/* Colour rules: yellow = deals, blue = booking and time. */
.card-badge{
  position:absolute;top:10px;left:10px;
  background:var(--yellow);color:var(--ink);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;
  padding:5px 10px;border-radius:999px;
}
.card-body{padding:14px 16px 16px}
.card-top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.card-tag{
  margin:0;font-size:10.5px;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}
.rating{font-size:11.5px;font-weight:700;color:var(--ink)}
.rating-count{font-weight:500;color:var(--ink-soft)}
.card-title{
  margin:0 0 3px;font-weight:500;font-size:17px;line-height:1.25;
}
.card-meta{margin:0 0 10px;font-size:12px;color:var(--ink-soft)}
.card-bottom{display:flex;justify-content:space-between;align-items:center}

/* Prices: old one struck through in brand grey, Spotd price bold in ink. */
.price{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.price-old{font-size:12px;color:var(--grey);text-decoration:line-through;font-weight:600}
.price-new{font-size:16px;font-weight:800;color:var(--ink);font-family:var(--display);letter-spacing:-.01em}
.btn-book{
  border:none;background:var(--blue);color:var(--ink);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
}
.btn-cancel{
  border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
}

/* ---- Tab bar: a floating black pill ---------------------------------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ink);
  border:none;
  border-radius:26px;
  display:flex;
  padding:9px 8px 8px;
  margin:0 12px calc(12px + env(safe-area-inset-bottom,0px));
  box-shadow:0 14px 30px -12px rgba(25,25,25,.55);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--grey);text-decoration:none;font-size:10.5px;font-weight:600;
  position:relative;
}
.tab svg{width:21px;height:21px}
.tab.active{color:#fff}
.tab.active::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);margin-top:1px}

.topbar-row{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
.page-title{
  margin:0;font-weight:500;font-size:28px;line-height:1.15;
}
.page-subtitle{
  margin:4px 0 0;font-size:13px;color:var(--ink-soft);
}
.view-toggle{
  display:flex;background:var(--surface);border:none;box-shadow:var(--shadow);
  border-radius:999px;padding:3px;
}
.toggle-btn{
  border:none;background:transparent;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;
  color:var(--ink-soft);cursor:pointer;
}
.toggle-btn.active{background:var(--ink);color:#fff}

/* ---- Filter chips ------------------------------------------------- */
.filter-row{
  display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
  flex:0 0 auto;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;
  padding:7px 15px;border-radius:999px;cursor:pointer;
}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- Map ------------------------------------------------------------ */
.map-wrap{
  margin:0 -20px;
  height:calc(100% - 288px);
  position:relative;
}
#map{ position:absolute;inset:0; }
.price-pin{cursor:pointer}
.price-pin span{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:12px;
  padding:6px 11px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(25,25,25,.3);
  white-space:nowrap;
}
.mapboxgl-popup-content{
  border-radius:16px;font-family:'Manrope',sans-serif;font-size:12.5px;
  padding:12px 14px;box-shadow:var(--shadow);
}
.mapboxgl-popup-content strong{font-family:var(--display);font-weight:600;font-size:14px}
.mapboxgl-ctrl-attrib{font-size:9px}

/* ---- Profile ------------------------------------------------------- */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:18px;
}
.avatar-wrap{ position:relative; margin-bottom:12px; }
.avatar{
  width:88px;height:88px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:400;font-size:32px;
}
.avatar-edit{
  position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.profile-name{margin:0;font-weight:500;font-size:23px}
.profile-since{margin:4px 0 0;font-size:12.5px;color:var(--ink-soft)}
.profile-stats-row{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:16px;padding:16px 12px;width:100%;
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
}
.profile-stat{text-align:center;flex:1 1 0;min-width:0}
.stat-divider{width:1px;height:32px;background:var(--line);flex:0 0 auto}

.settings-list{
  background:var(--surface);border:none;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.settings-row{
  display:flex;align-items:center;gap:12px;
  padding:15px 18px;text-decoration:none;color:var(--ink);
  font-size:14px;font-weight:600;border-bottom:1px solid var(--line);
}
.settings-row svg{flex:0 0 auto;color:var(--ink)}
.settings-row .row-label{flex:1 1 auto}
.settings-row:last-child{border-bottom:none}
.chev{color:var(--grey);font-size:13px;font-weight:600;flex:0 0 auto}

.membership-card{
  background:var(--surface);border:none;border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);margin-bottom:16px;
}
.membership-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.membership-title{margin:0;font-size:13.5px;font-weight:600}
.tier-badge{
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--yellow);color:var(--ink);
}
.membership-stats{display:flex;gap:28px;margin-bottom:14px}
.stat-value{margin:0;font-weight:500;font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-label{margin:2px 0 0;font-size:11.5px;color:var(--ink-soft)}
.membership-hint{
  margin:0;font-size:12px;color:var(--ink-soft);line-height:1.5;
  border-top:1px solid var(--line);padding-top:12px;
}

.loyalty-card{
  background:var(--surface); border:none; border-radius:var(--radius);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow);
}
.loyalty-title{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:16px; }
.loyalty-dots{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.loyalty-dot{ width:14px; height:14px; border-radius:50%; border:1.8px solid var(--ink); flex:0 0 auto; }
.loyalty-dot.filled{ background:var(--ink); }

/* ---- Modals -------------------------------------------------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(25,25,25,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:100;
}
.modal-card{
  background:var(--surface);border-radius:26px;padding:26px 24px;
  max-width:340px;box-shadow:var(--shadow);text-align:center;
}
.modal-card h2{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:21px}
.modal-card p{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.modal-card .modal-hint{margin-bottom:18px}
.modal-ok-btn{
  border:none;background:var(--ink);color:#fff;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
  padding:14px 24px;border-radius:999px;cursor:pointer;width:100%;
}

/* ---- Partner space ------------------------------------------------- */
.studio-status-card{
  background:var(--ink);color:#fff;border:none;border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:20px;position:relative;overflow:hidden;
}
.studio-status-card::after{
  content:'';position:absolute;right:-26px;bottom:-26px;width:110px;height:110px;
  background:url('logo-mark-white.svg') center/contain no-repeat;opacity:.12;
}
.studio-status-card h2{margin:0 0 6px;font-family:var(--display);font-weight:500;font-size:21px;color:#fff}
.studio-status-card p{margin:0;font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.5}
.status-pill{
  display:inline-block;font-size:11px;font-weight:800;padding:4px 11px;
  border-radius:999px;background:var(--yellow);color:var(--ink);margin-bottom:10px;
}
.locked-card{
  background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:20px;text-align:center;color:var(--ink-soft);
}
.locked-card svg{margin-bottom:8px}
.locked-card p{margin:0;font-size:13px;line-height:1.5}
.studio-cta{
  background:var(--blue);border:none;border-radius:var(--radius);
  padding:24px 20px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.studio-cta h2{margin:0 0 8px;font-family:var(--display);font-weight:500;font-size:21px}
.studio-cta p{margin:0 0 16px;font-size:13.5px;color:var(--ink);opacity:.75;line-height:1.5}
.studio-cta a{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
  padding:13px 24px;border-radius:999px;
}

/* ---- Empty / loading states for live data lists ---------------------- */
.live-empty{
  margin:0; padding:26px 18px 20px; background:var(--surface); border:none;
  border-radius:var(--radius); font-size:13px; color:var(--ink-soft); line-height:1.55;
  white-space:normal; flex:1 1 auto; text-align:center; box-shadow:var(--shadow);
}
.live-empty::before{
  content:''; display:block; width:34px; height:34px; margin:0 auto 12px;
  background:url('logo-mark.svg') center/contain no-repeat; opacity:.22;
}
.live-empty a, .live-empty button{
  display:inline-block; margin-top:12px; background:var(--ink); color:#fff; text-decoration:none; border:none;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; padding:11px 20px; border-radius:999px; cursor:pointer;
}

/* Decorative logo rings (the brand motif), used on welcome/auth screens. */
.motif-rings{
  position:absolute;pointer-events:none;
  background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="27.4" r="16" fill="%23DAD7D0"/><circle cx="27.4" cy="50" r="12.5" fill="none" stroke="%23DAD7D0" stroke-width="7"/><circle cx="72.6" cy="50" r="12.5" fill="none" stroke="%23DAD7D0" stroke-width="7"/><circle cx="50" cy="72.6" r="12.5" fill="none" stroke="%23DAD7D0" stroke-width="7"/></svg>') center/contain no-repeat;
}

/* Time until a class starts ("in 2h"). */
.starts-pill{
  display:inline-block;margin-left:6px;vertical-align:2px;
  background:var(--blue-soft);color:var(--ink);font-family:'Manrope',sans-serif;
  font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:0;
}

/* ---- Loading animation (see loader.js) --------------------------------- */
.spotd-loader{ width:44px; height:44px; color:var(--ink); overflow:visible; display:block; }
.spotd-loader .ring{ fill:none; stroke:currentColor; stroke-width:7; }
.spotd-loader .hole{ opacity:0; }
/* The filled dot hops from circle to circle: each circle fills in turn
   (top, right, bottom, left) with a quick cross-fade. */
.spotd-loader .dot, .intro-mark .dot{
  fill:currentColor; opacity:0;
  animation:spotd-hop 1.6s ease-in-out infinite;
}
.spotd-loader .d0, .intro-mark .d0{ animation-delay:0s; }
.spotd-loader .d1, .intro-mark .d1{ animation-delay:-1.2s; }
.spotd-loader .d2, .intro-mark .d2{ animation-delay:-.8s; }
.spotd-loader .d3, .intro-mark .d3{ animation-delay:-.4s; }
@keyframes spotd-hop{
  0%{ opacity:1 }
  20%{ opacity:1 }
  28%{ opacity:0 }
  92%{ opacity:0 }
  100%{ opacity:1 }
}
@media (prefers-reduced-motion:reduce){ .spotd-loader .dot, .intro-mark .dot{ animation-duration:4s } }
.spotd-loading{ display:flex; justify-content:center; align-items:center; padding:30px 0; flex:1 1 auto; }
[data-spotd-loader]{ display:flex; justify-content:center; align-items:center; padding:30px 0; flex:1 1 auto; }
.spotd-page-loading{
  position:absolute; inset:0; z-index:50; background:var(--bg);
  display:flex; align-items:center; justify-content:center; transition:opacity .25s;
}
.spotd-page-loading.done{ opacity:0; pointer-events:none; }


/* ---- Opening animation (see intro.js) ----------------------------------- */
.spotd-intro{
  position:absolute; inset:0; z-index:300;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.spotd-intro.open{ pointer-events:none; }
.intro-mark{
  width:92px; height:92px; overflow:visible; color:var(--ink);
  transform-origin:50% 50%; transition:transform 1.05s cubic-bezier(.55,0,.25,1);
}
.intro-cover{ fill:var(--bg); }
.intro-plug{ fill:var(--bg); transition:opacity .2s ease; }
.intro-mark .ring{ fill:none; stroke:currentColor; stroke-width:7; transition:opacity .45s ease; }
.intro-logo{ transition:opacity .45s ease; }
/* At rest (logo as-is) until the intro starts, so the dive lands on the top circle. */
.intro-mark .dot{ animation-play-state:paused; }
.spotd-intro.turning .dot{ animation-play-state:running; }
.spotd-intro.open .intro-logo{ opacity:0; }
.intro-word{ position:relative; height:24px; width:auto; margin-top:30px; transition:opacity .3s ease; }
/* Diving in: the centre opens onto the page beneath. */
.spotd-intro.open .intro-mark{ transform:scale(95); }
.spotd-intro.open .intro-plug,
.spotd-intro.open .ring,
.spotd-intro.open .dot,
.spotd-intro.open .intro-word{ opacity:0; }

/* Show/hide password (see password-eye.js). */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input{ padding-right:46px !important; }
.pw-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:none; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%;
}
.pw-eye:hover{ color:var(--ink); }

/* Fields in use: Spotd ink instead of the browser's own (orange) ring. */
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--ink)!important; }
:where(button, a, summary):focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* "How Spotd works" (how-it-works.js): three dark pages on first visit.
   Yellow = deals, blue = time, like the rest of the app. */
.how-overlay{
  position:absolute; inset:0; z-index:300; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; animation:how-in .3s ease both;
}
.how-overlay.closing{ animation:how-out .25s ease both; }
.how-card{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* On a computer: a centred window over the page (photo on the left, the
   explanation on the right), not the phone's full-screen pages stretched. */
/* Website: always over the screen, never stretched down the whole page. */
@media (min-width:520px){ .is-site .how-overlay{ position:fixed; inset:0; } }
@media (min-width:640px){
  .is-site .how-overlay{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:rgba(25,25,25,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .is-site .how-card{ flex:none; width:min(980px, 100%); height:min(600px, calc(100vh - 48px)); background:var(--ink); border-radius:30px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
  .is-site .how-top{ padding:28px 34px 0; }
  .is-site .how-page{ justify-content:center; padding:40px 56px 90px calc(46% + 56px); }
  .is-site .how-photo{ width:46%; height:100%; right:auto; }
  .is-site .how-photo::after{ background:linear-gradient(180deg, rgba(25,25,25,.35) 0%, rgba(25,25,25,0) 28%), linear-gradient(90deg, rgba(25,25,25,0) 62%, var(--ink) 100%); }
  .is-site .how-visual{ flex:0 0 auto; margin:0 0 34px; max-width:440px; }
  .is-site .how-ladder{ height:200px; margin-top:0; }
  .is-site .how-trip, .is-site .how-perks{ margin-top:0; }
  .is-site .how-page h2{ font-size:34px; margin-bottom:12px; }
  .is-site .how-page p{ font-size:16px; max-width:440px; }
  .is-site .how-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 56px 40px calc(46% + 56px); }
}
@keyframes how-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes how-out{ from{ opacity:1 } to{ opacity:0 } }
.how-top{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:26px 24px 0; }
.how-logo{ height:22px; width:auto; display:block; }
.how-skip{ background:none; border:none; color:rgba(255,255,255,.85); font:600 13px 'Manrope',sans-serif; cursor:pointer; padding:6px 0; }
.how-window{ flex:1 1 auto; min-height:0; overflow:hidden; }
.how-track{ display:flex; height:100%; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.how-page{ position:relative; flex:0 0 100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 26px 8px; }
.how-page > :not(.how-photo){ position:relative; }
/* A photo at the top of each page, fading into the black. */
.how-photo{ position:absolute; top:0; left:0; right:0; height:46%; background-size:cover; background-position:center; }
.how-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,25,25,.25) 0%, rgba(25,25,25,.15) 35%, rgba(25,25,25,.7) 72%, var(--ink) 100%); }
.how-page h2{ margin:0 0 10px; font-family:var(--display); font-weight:400; font-size:28px; line-height:1.15; letter-spacing:-.025em; }
.how-page p{ margin:0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.66); }
.how-visual{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.how-ladder{ align-items:flex-end; gap:10px; height:190px; flex:0 0 auto; margin-top:auto; }
.how-step{ flex:1 1 0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; }
.how-bar{
  width:100%; height:var(--h); border-radius:16px; background:var(--yellow); color:var(--ink);
  display:flex; align-items:flex-start; justify-content:center; padding-top:10px;
  font-family:'Manrope',sans-serif; font-size:15px;
}
.how-step small{ font-size:11px; color:rgba(255,255,255,.55); text-align:center; line-height:1.3; }
.how-trip{ flex-direction:column; align-items:stretch; width:100%; flex:0 0 auto; margin-top:auto; }
.how-trip-ends{ display:flex; justify-content:space-between; }
.how-trip-ends > div:last-child{ text-align:end; }
.how-trip-ends b{ display:block; font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.03em; line-height:1.1; }
.how-trip-ends b.opens{ color:var(--blue); }
.how-trip-ends small{ display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); }
/* The 12 hours between opening and the class; the notch is the last
   booking, 40 minutes before (94% of the way). */
.how-trip-bar{
  position:relative; height:8px; margin:34px 7px 0; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), rgba(255,255,255,.85));
}
[dir="rtl"] .how-trip-bar{ background:linear-gradient(270deg, var(--blue), rgba(255,255,255,.85)); }
.how-trip-bar::before, .how-trip-bar::after{
  content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%);
}
.how-trip-bar::before{ inset-inline-start:0; background:var(--blue); }
.how-trip-bar::after{ inset-inline-start:100%; background:#fff; }
.how-trip-bar span{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font:800 12px 'Manrope',sans-serif; color:rgba(255,255,255,.75); letter-spacing:.04em;
}
.how-trip-bar i{ position:absolute; top:-5px; bottom:-5px; inset-inline-start:94%; width:3px; border-radius:2px; background:var(--ink); }
.how-trip-note{ margin:16px 0 0 !important; font-size:12.5px !important; text-align:end; color:rgba(255,255,255,.55) !important; }
.how-perks{ flex-direction:column; align-items:stretch; gap:0; width:100%; flex:0 0 auto; margin-top:auto; }
.how-perk{ display:flex; gap:18px; align-items:center; padding:18px 0; }
.how-perk + .how-perk{ border-top:1px solid rgba(255,255,255,.12); }
.how-circle{
  flex:0 0 auto; width:84px; height:84px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink);
}
.how-circle.blue{ background:var(--blue); }
.how-circle.yellow{ background:var(--yellow); }
.how-circle b{ font-family:var(--display); font-weight:500; font-size:30px; line-height:1; letter-spacing:-.03em; }
.how-circle small{ font-size:10.5px; font-weight:700; margin-top:3px; opacity:.75; }
.how-perk > div b{ display:block; font-family:var(--display); font-weight:500; font-size:19px; letter-spacing:-.01em; margin-bottom:4px; }
.how-perk > div small{ display:block; font-size:13px; line-height:1.45; color:rgba(255,255,255,.66); }
.how-bottom{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:22px 26px calc(24px + env(safe-area-inset-bottom,0px)); }
.how-dots{ display:flex; gap:7px; }
.how-dot{ width:7px; height:7px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.3); cursor:pointer; transition:width .25s; }
.how-dot.active{ width:22px; background:#fff; }
.how-next{
  background:#fff; color:var(--ink); border:none; border-radius:999px; padding:14px 24px;
  font:700 14px 'Manrope',sans-serif; cursor:pointer;
}
.help-how-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 18px;
  padding:16px 18px; border-radius:20px; border:none; background:var(--ink); color:#fff;
  font:700 14px 'Manrope',sans-serif; cursor:pointer; text-align:start;
}

/* ---- Website (site.js) ------------------------------------------------
   The top bar with the site's tabs, always visible. On the website's own
   pages it shows on every screen; on the app's pages, from 520px wide.
   In a phone browser Home gets Log in / Sign up; the installed app is
   unchanged. */
.site-bar{ display:none; }
.hero-auth{ display:flex; gap:6px; margin-inline-start:auto; margin-inline-end:8px; }
.hero-auth a{
  font:700 12px 'Manrope',sans-serif; color:#fff; text-decoration:none; padding:9px 13px; border-radius:999px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.35);
}
.hero-auth a.solid{ background:#fff; color:var(--ink); border-color:#fff; }
/* Narrow phones: the buttons on one line each, and no "Dubai" next to the
   logo so everything fits. */
.hero-auth a{ white-space:nowrap; }
@media (max-width:400px){
  .hero-auth a{ padding:8px 11px; }
  .home-hero-top:has(.hero-auth) .topbar-city{ display:none; }
}

.site-page .site-bar, .is-site .site-bar{
  position:fixed; top:0; left:0; right:0; z-index:150;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-page .site-bar{ display:block; }
:root{ --bar-h:104px; }
/* A white bar with plain text tabs: logo and Log in / Sign up on the first
   line, tabs on a second line when narrow; one line on a wide screen. */
.site-bar-in{ max-width:1240px; margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; }
.site-bar-logo{ height:58px; display:flex; align-items:center; }
.site-bar-logo img{ height:21px; display:block; }
.site-bar-auth{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.site-btn{ font:700 13.5px 'Manrope',sans-serif; text-decoration:none; padding:9px 16px; border-radius:999px; color:var(--ink); white-space:nowrap; }
.site-btn.dark{ background:var(--ink); color:#fff; }
.site-me{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-size:14px; }
.site-me span{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.site-me em{ display:none; }
/* A customer's next class, in the brand blue (booking and time). */
.site-next{ display:flex; align-items:center; gap:8px; max-width:340px; margin-inline-end:8px; padding:8px 14px; border-radius:999px; background:var(--blue); color:var(--ink); text-decoration:none; font-size:13px; white-space:nowrap; }
.site-next[hidden]{ display:none; }
.site-next span{ font-weight:600; opacity:.75; }
.site-next b{ font-weight:800; overflow:hidden; text-overflow:ellipsis; }
.site-next em{ font-style:normal; font-weight:800; padding:2px 8px; border-radius:999px; background:#fff; }
@media (max-width:1199px){ .site-next span{ display:none; } }
@media (max-width:520px){ .site-next b{ display:none; } }
.site-bar-nav a:has(svg){ display:inline-flex; align-items:center; gap:7px; }
.site-bar-nav a svg{ flex:none; }
.site-bar-nav .tab-count{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; margin-inline-start:6px; padding:0 5px; border-radius:999px; background:var(--blue); color:var(--ink); font-size:11.5px; font-weight:800; vertical-align:1px; }
.site-bar-nav{
  order:3; flex:1 0 100%; height:46px; display:flex; align-items:center; gap:24px;
  overflow-x:auto; scrollbar-width:none; border-top:1px solid var(--line); margin:0 -20px; padding:0 20px;
}
.site-bar-nav::-webkit-scrollbar{ display:none; }
.site-bar-nav a{
  position:relative; flex:0 0 auto; color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; padding:8px 0; white-space:nowrap;
}
.site-bar-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:3px; height:1.5px; border-radius:2px;
  background:var(--ink); transform:scaleX(0); transition:transform .2s;
}
.site-bar-nav a:hover::after, .site-bar-nav a.active::after{ transform:scaleX(1); }

/* Over the top photo (About, For venues): see-through bar, white text. */
.over-photo .site-bar:not(.solid){ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; transition:background .25s; }
.over-photo .site-bar:not(.solid) .site-bar-logo img{ filter:brightness(0) invert(1); }
.over-photo .site-bar:not(.solid) .site-bar-nav{ border-top-color:rgba(255,255,255,.25); }
.over-photo .site-bar:not(.solid) .site-bar-nav a, .over-photo .site-bar:not(.solid) .site-btn:not(.dark), .over-photo .site-bar:not(.solid) .site-me{ color:#fff; }
.over-photo .site-bar:not(.solid) .site-bar-nav a::after{ background:#fff; }
.over-photo .site-bar:not(.solid) .site-btn.dark{ background:#fff; color:var(--ink); }
.over-photo .site-bar:not(.solid) .site-me span{ background:#fff; color:var(--ink); }

@media (min-width:520px){
  .site-bar-nav{ justify-content:center; gap:32px; }
}
@media (max-width:519px){
  .site-bar-auth .site-btn:not(.dark){ display:none; }
}
/* Wide screen: one line, logo left, tabs in the middle, Log in / Sign up right. */
@media (min-width:1000px){
  :root{ --bar-h:76px; }
  .site-bar-in{ flex-wrap:nowrap; height:76px; max-width:none; padding:0 40px; column-gap:24px; }
  /* Tabs at the exact centre of the bar, so they never move when something
     appears on the right (next class, a count). */
  .site-bar-in{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-bar-auth{ justify-self:end; }
  .site-bar-logo{ height:auto; }
  .site-bar-logo img{ height:27px; }
  .site-bar-nav{ order:0; flex:1 1 auto; height:auto; border-top:none; margin:0; padding:0; gap:34px; overflow:visible; }
  .site-bar-nav a{ font-size:15px; }
  .site-btn{ font-size:14px; padding:10px 18px; }
  .site-bar-auth{ margin-inline-start:0; }
}

@media (min-width:520px){
  html, body{ height:auto; }
  body{ display:block; padding:0; background:var(--bg); }
  .is-site .site-bar{ display:block; }
  .hero-auth{ display:none; }

  /* The phone frame becomes the page. */
  .is-site .phone{
    width:100% !important; max-width:none !important; height:auto !important; max-height:none !important;
    min-height:100vh !important; border-radius:0 !important; box-shadow:none !important;
    overflow:visible !important; padding:var(--bar-h) 0 0 !important; display:block !important; background:var(--bg);
  }
  .is-site .phone > .tabbar{ display:none !important; }
  .is-site .home-scroll, .is-site .spotted-scroll, .is-site .profile-scroll, .is-site .help-scroll,
  .is-site .auth-scroll, .is-site .fr-scroll, .is-site .fav-scroll, .is-site .studio-scroll, .is-site .res-scroll{
    overflow:visible !important; height:auto !important; min-height:0 !important; flex:none !important;
  }
  /* Reading pages: one centred column. */
  .is-site .spotted-scroll, .is-site .profile-scroll, .is-site .help-scroll,
  .is-site .fr-scroll, .is-site .fav-scroll, .is-site .res-scroll{
    max-width:760px; margin:0 auto; padding:40px 32px 90px !important;
  }
  /* Log in / Sign up: a card in the middle of the page. */
  .is-site .auth-scroll{
    max-width:480px; margin:48px auto 90px; padding:40px 44px 36px !important;
    background:var(--surface); border-radius:28px; box-shadow:var(--shadow);
  }
  .is-site .motif-rings{ display:none; }
}

/* Website, My profile: the favorite venues block (laid out in profil.html). */
.profile-side{ display:none; }
@media (min-width:520px){
  .side-block{ background:var(--surface); border-radius:24px; padding:22px 22px 14px; box-shadow:var(--shadow); }
  .side-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .side-head h2{ margin:0; font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-.02em; color:var(--ink); }
  .side-head p{ margin:3px 0 0; font-size:13.5px; color:var(--ink-soft); }
  .side-head a{ flex:none; margin-top:4px; font-size:13.5px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
  .side-row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
  .side-row:first-child{ border-top:none; }
  .side-photo{ flex:none; width:64px; height:64px; border-radius:16px; background:var(--cream) center/cover; }
  .side-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .side-info b{ font-family:var(--display); font-weight:600; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .side-info span{ font-size:13.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .side-info em{ font-style:normal; font-size:13px; font-weight:700; color:var(--ink); }
  .side-empty{ margin:6px 0 10px; font-size:14px; line-height:1.6; color:var(--ink-soft); }
  .side-empty a{ font-weight:700; color:var(--ink); }
}

/* A customer's website: every page on the brand's cream, like Home, so
   moving between the tabs never changes the background. */
.is-customer.is-site, .is-customer.is-site body, .is-customer.is-site .phone{ background:var(--cream) !important; }

/* A visitor on a phone stays on the website: the website's bar on top of
   every page (the app's pages included), never the app's tab bar. Once
   logged in, a phone gets the app. */
@media (max-width:519px){
  .is-site.is-visitor .site-bar{ display:block; }
  .is-site.is-visitor .phone > .tabbar{ display:none !important; }
  .is-site.is-visitor .phone{ margin-top:var(--bar-h); height:calc(100dvh - var(--bar-h)) !important; min-height:0 !important; }
  .is-site.is-visitor .home-hero-top{ display:none; }
}

/* "Book this spot in the app": the app first, the website second. */
.book-gate .modal-card{ position:relative; max-width:380px; text-align:center; padding:30px 24px 24px; }
.book-gate .bg-close{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; }
.book-gate .bg-mark{ width:40px; margin:0 auto 12px; display:block; }
.book-gate h2{ margin:0 0 8px; font-family:var(--display); font-weight:500; font-size:22px; color:var(--ink); }
.book-gate p{ margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--ink-soft); }
.bg-stores{ display:flex; justify-content:center; gap:8px; }
.bg-stores .store-btn{ display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 13px 0 10px; border-radius:11px; background:#000; border:1px solid #A6A6A6; color:#fff; text-decoration:none; text-align:left; }
.bg-stores .store-btn span{ display:flex; flex-direction:column; font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size:16px; font-weight:600; line-height:1.05; }
.bg-stores .store-btn small{ font-size:9px; font-weight:500; }
.book-gate .bg-soon{ margin:12px 0 0; font-size:12.5px; color:var(--ink); }
.book-gate .bg-or{ display:flex; align-items:center; gap:10px; margin:22px 0 14px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.book-gate .bg-or::before, .book-gate .bg-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.bg-web{ display:flex; gap:8px; }
.bg-btn{ flex:1; padding:12px 10px; border-radius:999px; border:1.5px solid var(--ink); font:700 13.5px 'Manrope',sans-serif; color:var(--ink); text-decoration:none; }
.bg-btn.dark{ background:var(--ink); color:#fff; }
.bg-stores .store-btn span{ white-space:nowrap; font-size:15px; }
.bg-stores .store-btn{ padding:0 11px 0 9px; gap:6px; }
.bg-btn{ white-space:nowrap; font-size:13px; padding:12px 8px; }

/* A short message at the bottom of the screen (e.g. after Notify me). */
.spotd-toast{ position:fixed; left:50%; bottom:calc(110px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:400; width:max-content; max-width:min(420px, calc(100vw - 32px)); padding:13px 18px; border-radius:16px; background:var(--ink); color:#fff; font:600 13.5px/1.45 'Manrope',sans-serif; text-align:center; box-shadow:0 12px 30px rgba(25,25,25,.25); transition:opacity .4s; }
.spotd-toast.gone{ opacity:0; }
@media (min-width:520px){ .is-site .spotd-toast{ bottom:32px; } }
/* Notify me on a class not open yet: a bell, blue once it's on. */
.btn-notify{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:none; border-radius:999px; background:var(--ink); color:#fff; font:800 12px 'Manrope',sans-serif; white-space:nowrap; cursor:pointer; }
.btn-notify.on{ background:var(--blue); color:var(--ink); }
.btn-notify svg{ flex:none; }
.book-gate .bg-ok{ display:block; width:100%; margin-top:18px; cursor:pointer; }
.share-sheet .modal-card{ max-height:90vh; overflow-y:auto; }
.share-friends{ text-align:left; }
.share-label{ margin:0 0 8px !important; font-size:12px !important; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.share-list{ display:flex; flex-direction:column; gap:6px; }
.share-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1.5px solid var(--line); border-radius:14px; cursor:pointer; }
.share-row:has(input:checked){ border-color:var(--ink); background:var(--blue-soft); }
.share-row input{ width:18px; height:18px; margin:0; accent-color:var(--ink); }
.share-avatar{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:13px; font-weight:700; }
.share-name{ font-size:14px; font-weight:700; color:var(--ink); }
.share-empty{ margin:0 !important; font-size:13px !important; }
.share-send{ display:block; width:100%; margin-top:6px; cursor:pointer; }
.share-send:disabled{ opacity:.4; cursor:default; }
.share-sheet .invite-opt{ display:block; width:100%; box-sizing:border-box; margin-top:10px; text-align:center; cursor:pointer; background:#fff; }
/* Unread venue reply: a red dot on the Spotted tab and on Message. */
a.has-unread, .has-unread{ position:relative; }
.site-bar-nav a.has-unread::before{ content:""; position:absolute; top:4px; right:-9px; width:9px; height:9px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px #fff; }
.tabbar a.has-unread::before{ content:""; position:absolute; top:6px; right:calc(50% - 18px); width:9px; height:9px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px var(--ink); }
.card-action-btn.has-unread::after{ content:""; position:absolute; top:8px; right:14px; width:10px; height:10px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px #fff; }