/* ---------- Type ---------- */
.t-display{ font-family:var(--font-display); font-size:36px; font-weight:760; font-synthesis:none; letter-spacing:.005em; line-height:1; }
.t-title{ font-family:var(--font-display); font-size:24px; font-weight:760; font-synthesis:none; letter-spacing:.01em; line-height:1.1; }
.t-sub{ font-size:15.5px; font-weight:660; letter-spacing:-.01em; }
.t-body{ font-size:14.5px; font-weight:450; color:var(--ink-2); line-height:1.45; }
.t-label{ font-size:12.5px; font-weight:620; color:var(--ink-2); }
.t-cap{ font-size:10.5px; font-weight:730; letter-spacing:.085em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:0; font-family:var(--font); font-size:15px; font-weight:680;
  border-radius:var(--r-pill); padding:14px 20px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), opacity var(--dur-1);
}
.btn:active{ transform:scale(.965); }
.btn-primary{ background:var(--accent-deep); color:#fff; box-shadow:0 6px 16px rgba(var(--accent-rgb),.30); }
.btn-ghost{ background:var(--surface); color:var(--ink); box-shadow:var(--e1); border:1px solid var(--line); }
.btn-quiet{ background:var(--line-2); color:var(--ink); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.4; pointer-events:none; }

.icon-btn{
  width:38px; height:38px; border-radius:var(--r-pill); border:0; background:var(--surface);
  box-shadow:var(--e2); display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink); flex:none; transition:transform var(--dur-1) var(--ease);
}
.icon-btn:active{ transform:scale(.92); }
.icon-btn.plain{ background:transparent; box-shadow:none; }

/* ---------- Chips ---------- */
.chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-size:13px; font-weight:640; cursor:pointer; white-space:nowrap;
  transition:all var(--dur-1) var(--ease);
}
.chip:active{ transform:scale(.95); }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip.on.accent{ background:var(--accent-deep); border-color:var(--accent-deep); }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding:0 18px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:7px; font-size:11px; font-weight:730; letter-spacing:.01em;
}
.badge-deal{ background:var(--accent-tint); color:var(--accent-deep); }
.badge-save{ background:var(--save-tint); color:var(--save); }
.badge-warn{ background:var(--warn-tint); color:var(--warn); }
.badge-dark{ background:rgba(14,18,22,.72); color:#fff; backdrop-filter:blur(6px); }

/* ---------- Photo placeholders (illustrated, no external assets) ---------- */
.photo{ position:relative; overflow:hidden; background:#eee; flex:none; }
.photo svg.glyph{ position:absolute; right:-14%; bottom:-18%; width:78%; height:auto; opacity:.30; color:#fff; }
.photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%);
}
.photo.dim::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(14,18,22,.32) 0%, rgba(14,18,22,0) 34%, rgba(14,18,22,.55) 100%);
}

/* ---------- Restaurant list card ---------- */
.rcard{
  display:flex; gap:12px; padding:12px; background:var(--surface);
  border-radius:var(--r-md); box-shadow:var(--e1); cursor:pointer; align-items:center;
  transition:transform var(--dur-1) var(--ease);
}
.rcard:active{ transform:scale(.982); }
.rcard .photo{ width:74px; height:74px; border-radius:13px; }
.rcard .photo svg.glyph{ width:54%; right:auto; bottom:auto; left:50%; top:50%;
  transform:translate(-50%,-50%); opacity:.42; }
.rcard .body{ flex:1; min-width:0; }
.rcard .nm{ font-size:15.5px; font-weight:700; letter-spacing:-.014em; display:flex; align-items:center; gap:6px; }
.rcard .meta{ font-size:12.5px; color:var(--ink-2); margin-top:3px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); display:inline-block; flex:none; }
.rcard .offer{ margin-top:7px; min-width:0; }
.rcard .offer .badge{ max-width:100%; min-width:0; }
.rcard .offer .badge span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stars{ display:inline-flex; align-items:center; gap:3px; font-weight:700; color:var(--ink); }

/* ---------- Map ---------- */
.mapwrap{ position:absolute; inset:0; background:var(--map-bg); overflow:hidden; touch-action:none; cursor:grab; }
.mapwrap:active{ cursor:grabbing; }
.mapinner{ position:absolute; top:0; left:0; width:760px; height:1180px; transform-origin:0 0; will-change:transform; }
.mapinner > svg{ position:absolute; inset:0; width:760px; height:1180px; }
.pin svg{ display:block; }
.nlabel{ position:absolute; transform:translate(-50%,-50%); font-size:11px; font-weight:760; letter-spacing:.10em;
  text-transform:uppercase; color:#98A2B0; pointer-events:none; white-space:nowrap; }

.pin{
  position:absolute; transform:translate(-50%,-100%); cursor:pointer;
  transition:filter var(--dur-2) var(--ease); z-index:5;
}
.pin .bubble{
  display:flex; align-items:center; gap:5px; height:32px; padding:0 10px 0 7px;
  background:var(--surface); border-radius:var(--r-pill); box-shadow:var(--e-pin);
  font-size:12px; font-weight:730; color:var(--ink); white-space:nowrap;
  transition:transform var(--dur-2) var(--ease-out), background var(--dur-2), color var(--dur-2);
  transform-origin:bottom center;
}
.pin .ico{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.pin .tail{
  width:9px; height:9px; background:var(--surface); position:absolute; left:50%; bottom:-3px;
  transform:translateX(-50%) rotate(45deg); border-radius:2px; box-shadow:var(--e-pin);
  transition:background var(--dur-2);
}
.pin.deal .bubble{ box-shadow:0 4px 10px rgba(var(--accent-rgb),.30); }
.pin.sel{ z-index:20; }
.pin.sel .bubble{ background:var(--ink); color:#fff; transform:scale(1.14); }
.pin.sel .tail{ background:var(--ink); }
.pin.dimmed{ opacity:.28; filter:saturate(.2); }
.pin .pulse{
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:var(--accent); opacity:0; pointer-events:none;
}
.pin.sel .pulse{ animation:pulse 1.6s var(--ease-out) infinite; }
@keyframes pulse{ 0%{ transform:scale(.35); opacity:.32 } 70%{ transform:scale(1.25); opacity:0 } 100%{ opacity:0 } }

.me{ position:absolute; transform:translate(-50%,-50%); width:18px; height:18px; z-index:4; }
.me i{ position:absolute; inset:0; border-radius:50%; background:#2C7BE5; border:3px solid #fff; box-shadow:0 2px 6px rgba(14,18,22,.3); }
.me em{ position:absolute; inset:-13px; border-radius:50%; background:rgba(44,123,229,.14); }

.map-top{ position:absolute; top:0; left:0; right:0; z-index:40; padding:8px 16px 12px;
  background:linear-gradient(180deg, rgba(247,248,250,.96) 30%, rgba(247,248,250,0)); }
.searchbar{
  display:flex; align-items:center; gap:9px; height:46px; padding:0 14px;
  background:var(--surface); border-radius:var(--r-pill); box-shadow:var(--e2); cursor:pointer;
}
.searchbar input{
  border:0; outline:0; flex:1; font-family:var(--font); font-size:15px; font-weight:520; color:var(--ink);
  background:transparent; min-width:0;
}
.searchbar input::placeholder{ color:var(--ink-3); font-weight:500; }
.map-ctrl{ position:absolute; right:16px; display:flex; flex-direction:column; gap:9px; z-index:30; }

/* ---------- Bottom sheet (map) ---------- */
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:45;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -8px 34px rgba(14,18,22,.13);
  display:flex; flex-direction:column;
  transition:transform var(--dur-3) var(--ease-out);
  will-change:transform; touch-action:none;
  height:78%;
}
.grabber{ padding:9px 0 5px; display:flex; justify-content:center; flex:none; cursor:grab; }
.grabber i{ width:38px; height:4.5px; border-radius:3px; background:#D8DDE4; display:block; }
.sheet-head{ padding:2px 18px 10px; display:flex; align-items:baseline; justify-content:space-between; flex:none; }

/* ---------- Tab bar ---------- */
.tabbar{
  flex:none; height:calc(58px + var(--safe-b)); padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.90); backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--line); display:flex; z-index:70; position:relative;
}
.tab{
  flex:1; border:0; background:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; color:var(--ink-2); padding:0;
  font-family:var(--font); font-size:10px; font-weight:640; letter-spacing:.005em;
  transition:color var(--dur-1) var(--ease);
}
.tab.on{ color:var(--accent-deep); }
.tab .ic{ position:relative; transition:transform var(--dur-2) var(--ease-out); }
.tab.on .ic{ transform:translateY(-1px) scale(1.06); }
.tab .cnt{
  position:absolute; top:-4px; right:-9px; min-width:16px; height:16px; padding:0 4px;
  background:var(--accent); color:#fff; border-radius:9px; font-size:9.5px; font-weight:760;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* ---------- Nav bar ---------- */
.navbar{
  flex:none; height:52px; display:flex; align-items:center; gap:10px; padding:0 12px 0 8px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border-bottom:1px solid transparent;
  transition:border-color var(--dur-2), background var(--dur-2); z-index:30;
}
.navbar.solid{ border-bottom-color:var(--line); }
.navbar .ttl{ flex:1; font-family:var(--font-display); font-size:21px; font-weight:760; font-synthesis:none; letter-spacing:.01em; opacity:0; transition:opacity var(--dur-2); }
.navbar.solid .ttl{ opacity:1; }
.navbar.over{ position:absolute; top:0; left:0; right:0; background:transparent; backdrop-filter:none; }

/* ---------- Detail ---------- */
.hero{ position:relative; height:270px; flex:none; }
.hero .photo{ position:absolute; inset:0; }
.hero-info{ position:absolute; left:20px; right:20px; bottom:46px; color:#fff; z-index:3; }
.hero-info h2{ margin:0; font-family:var(--font-display); font-size:36px; font-weight:760; font-synthesis:none; letter-spacing:.01em; line-height:1; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.hero-info .m{ margin-top:6px; font-size:13px; font-weight:600; opacity:.94; display:flex; gap:6px; align-items:center; flex-wrap:wrap; text-shadow:0 1px 8px rgba(0,0,0,.3); }
.detail-body{ background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; margin-top:-24px; position:relative; z-index:4; padding:6px 0 30px; }
.section{ padding:18px 18px 4px; }
.quickrow{ display:flex; gap:8px; padding:14px 18px 4px; }
.quickrow .q{ flex:1; background:var(--canvas); border-radius:14px; padding:11px 8px; text-align:center; border:1px solid var(--line-2); }
.quickrow .q .v{ font-size:14.5px; font-weight:740; letter-spacing:-.01em; }
.quickrow .q .k{ font-size:10.5px; font-weight:640; color:var(--ink-3); margin-top:2px; }

/* ---------- Coupon card ---------- */
.coupon{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; cursor:pointer; display:flex; z-index:0;
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  box-shadow:var(--e1);
}
.coupon:active{ transform:scale(.982); }
.coupon .stub{
  width:88px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; color:#fff; padding:14px 6px; position:relative;
  background:linear-gradient(150deg, var(--accent), var(--accent-ink));
}
.coupon .stub .big{ color:var(--butter); font-size:23px; font-weight:830; letter-spacing:-.035em; line-height:1; }
.coupon .stub .big.long{ font-size:15px; letter-spacing:-.02em; line-height:1.1; }
.coupon .stub .sm{ font-size:9.5px; font-weight:740; letter-spacing:.10em; text-transform:uppercase; opacity:.92; }
.coupon .notch-t,.coupon .notch-b{ position:absolute; left:88px; width:13px; height:13px; border-radius:50%;
  background:var(--canvas); transform:translate(-50%,-50%); z-index:4; box-shadow:inset 0 0 0 1px var(--line); }
.coupon .notch-t{ top:0; } .coupon .notch-b{ top:100%; }
.coupon .cbody{ flex:1; padding:13px 14px 13px 15px; min-width:0; border-left:2px dashed var(--line); }
.coupon .cbody h4{ margin:0; font-size:14.5px; font-weight:715; letter-spacing:-.013em; }
.coupon .cbody p{ margin:3px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.35; }
.coupon .cfoot{ margin-top:9px; display:flex; align-items:center; gap:7px; }
.coupon.used{ opacity:.56; }
.coupon.used .stub{ background:linear-gradient(150deg,#AEB6C1,#8A93A1); }
.coupon.exp .stub{ background:linear-gradient(150deg,#C7CDD6,#A6AEBA); }
.coupon.onwash{ --surface:#FFFFFF; }
.coupon.wash .notch-t,.coupon.wash .notch-b{ background:var(--canvas); }

/* ---------- Overlay sheets (filters / coupon) ---------- */
.overlay{ position:absolute; inset:0; z-index:200; visibility:hidden; }
.overlay.open{ visibility:visible; }
.overlay .scrim{ position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity var(--dur-2) var(--ease); }
.overlay.open .scrim{ opacity:1; }
.overlay .panel{
  position:absolute; left:0; right:0; bottom:0; background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(100%);
  transition:transform var(--dur-3) var(--ease-out); max-height:92%; display:flex; flex-direction:column;
  box-shadow:0 -10px 40px rgba(14,18,22,.2);
}
.overlay.open .panel{ transform:translateY(0); }
.overlay.full .panel{ top:0; border-radius:0; max-height:none; }

.rowline{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; }
.rowline + .rowline{ border-top:1px solid var(--line-2); }
.switch{ width:48px; height:29px; border-radius:var(--r-pill); background:#DFE3E9; position:relative; cursor:pointer; flex:none; transition:background var(--dur-2) var(--ease); border:0; }
.switch i{ position:absolute; top:2.5px; left:2.5px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--dur-2) var(--ease-out); }
.switch.on{ background:var(--save); }
.switch.on i{ transform:translateX(19px); }

.seg{ display:flex; background:var(--line-2); border-radius:12px; padding:3px; gap:3px; }
.seg button{ flex:1; border:0; background:transparent; font-family:var(--font); font-size:13px; font-weight:640;
  color:var(--ink-2); padding:8px 4px; border-radius:9px; cursor:pointer; transition:all var(--dur-2) var(--ease); }
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--e1); }

input[type=range]{ -webkit-appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line); outline:0; margin-bottom:12px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(14,18,22,.28), inset 0 0 0 1.5px var(--line); cursor:grab; }

/* ---------- Redeem screen ---------- */
.redeem{ background:linear-gradient(178deg,var(--accent-tint) 0%, #FFFFFF 42%); }
.rdm-card{
  margin:0 18px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--e3);
  padding:22px 20px; text-align:center; position:relative; overflow:hidden;
}
.rdm-amt{ font-size:52px; font-weight:840; letter-spacing:-.045em; line-height:1; color:var(--accent-deep); }
.barcode{ display:flex; align-items:flex-end; gap:2px; height:62px; justify-content:center; margin:6px 0 8px; }
.barcode i{ background:var(--ink); border-radius:1px; display:block; }
.code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:15px; font-weight:600; letter-spacing:.24em; color:var(--ink-2); }

.slider{
  position:relative; height:60px; border-radius:var(--r-pill); background:var(--line-2);
  overflow:hidden; margin:0 18px; touch-action:none; user-select:none; border:1px solid var(--line);
}
.slider .fill{ position:absolute; inset:0; width:60px; background:var(--accent-deep); transition:width var(--dur-2) var(--ease); }
.slider .lbl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--ink-2); letter-spacing:.02em; pointer-events:none; }
.slider .knob{
  position:absolute; top:5px; left:5px; width:50px; height:48px; border-radius:var(--r-pill);
  background:#fff; box-shadow:var(--e2); display:flex; align-items:center; justify-content:center;
  color:var(--accent-deep); cursor:grab; z-index:3; touch-action:none;
}
.slider.done .lbl{ opacity:0; }

.success-ring{ width:96px; height:96px; margin:0 auto; position:relative; }
.success-ring svg{ position:absolute; inset:0; }
.success-ring .c1{ stroke:var(--save); stroke-width:4; fill:none; stroke-dasharray:283; stroke-dashoffset:283;
  animation:draw .55s var(--ease-out) forwards; transform:rotate(-90deg); transform-origin:50% 50%; }
.success-ring .c2{ stroke:var(--save); stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:44; stroke-dashoffset:44; animation:draw .3s var(--ease-out) .38s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.fu{ animation:fadeUp .42s var(--ease-out) both; }

/* ---------- Toast ---------- */
.toast{
  position:absolute; left:50%; bottom:96px; transform:translate(-50%,14px); z-index:300;
  background:rgba(14,18,22,.93); color:#fff; padding:11px 17px; border-radius:var(--r-pill);
  font-size:13px; font-weight:620; box-shadow:var(--e3); opacity:0; pointer-events:none;
  transition:all var(--dur-2) var(--ease-out); display:flex; align-items:center; gap:8px; white-space:nowrap;
  backdrop-filter:blur(10px);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.empty{ text-align:center; padding:56px 34px; }
.empty .ec{ width:64px; height:64px; border-radius:20px; background:var(--line-2); display:flex;
  align-items:center; justify-content:center; margin:0 auto 14px; color:var(--ink-3); }

.skel{ background:linear-gradient(90deg,var(--line-2) 25%,#FAFBFC 50%,var(--line-2) 75%);
  background-size:200% 100%; animation:sh 1.2s linear infinite; border-radius:8px; }
@keyframes sh{ to{ background-position:-200% 0 } }

/* ---------- Misc (search recents, hours, tab bar state) ---------- */
.tabbar.hidden{ display:none; }
.recent{ display:flex; align-items:center; gap:11px; padding:11px 2px; cursor:pointer; }
.recent .ri{ width:34px; height:34px; border-radius:50%; background:var(--line-2); display:flex;
  align-items:center; justify-content:center; color:var(--ink-2); flex:none; }
.hours-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; }
.hours-row.today{ font-weight:730; color:var(--ink); }
.hours-row span:first-child{ color:var(--ink-2); }
.hours-row.today span{ color:var(--ink); }