/* ============================================================
   OFFERBUN — shared stylesheet (all pages)
   Design system v4 · responsive (desktop + mobile in one file)
   CodeIgniter note: serve from public/assets/css/style.css
   ============================================================ */

:root{
  --ink:#0E0F13; --ink-soft:#61656F; --ink-faint:#9CA0AC;
  --bg:#F5F6F8; --surface:#FFFFFF;
  --line:#ECEDF1;
  --green:#00A868; --green-dark:#00794C; --green-tint:#E1F6EC;
  --coral:#FF6B4A; --coral-dark:#C94A2E; --coral-tint:#FFE9E2;
  --amber:#FFB020; --amber-dark:#8A5B0A; --amber-tint:#FFF3DC;
  --g-green:linear-gradient(155deg,#00C27A,#00593A);
  --g-coral:linear-gradient(155deg,#FF8563,#B23A22);
  --g-amber:linear-gradient(155deg,#FFC24D,#B37B12);
  --g-ink:linear-gradient(155deg,#3A3D46,#131418);
  --shadow-sm:0 1px 2px rgba(14,15,19,.05), 0 2px 10px rgba(14,15,19,.06);
  --shadow-md:0 6px 14px rgba(14,15,19,.07), 0 18px 38px rgba(14,15,19,.10);
  --r-md:18px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --f-head:'Plus Jakarta Sans', sans-serif;
  --f-body:'Inter', sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--f-body); color:var(--ink); background:var(--bg);}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font:inherit;}
img{max-width:100%;}
.msi{font-family:'Material Symbols Rounded'; font-size:20px; line-height:1;}
.msi-fill{font-variation-settings:'FILL' 1, 'wght' 500;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

/* ---- photo holder: gradient fallback + real image on top ---- */
.ph{position:relative; overflow:hidden;}
.ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ph.ov::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,14,0) 30%, rgba(10,10,14,.72) 100%); z-index:1;}
.ph .over{position:absolute; z-index:2;}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-body); font-weight:700; font-size:13.5px; padding:11px 18px;
  border-radius:var(--r-pill); border:none; cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; white-space:nowrap;}
.btn-dark{background:var(--ink); color:#fff;}
.btn-white{background:#fff; color:var(--ink);}
.btn-green{background:var(--green); color:#fff;}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
.btn-lg{padding:14px 24px; font-size:14.5px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- top bar (glass) ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(14,15,19,.05);}
.topbar-in{display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; max-width:var(--wrap); margin:0 auto;}
.logo{font-family:var(--f-head); font-weight:800; font-size:20px;
  display:flex; align-items:center; gap:9px;}
.logo-mark{width:32px; height:32px; border-radius:11px; background:var(--g-coral);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); flex-shrink:0;}
.logo-mark .msi{font-size:17px;}
.nav-links{display:flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); background:var(--bg); border-radius:var(--r-pill); padding:4px;}
.nav-links a{padding:8px 16px; border-radius:var(--r-pill);}
.nav-links a.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.nav-links a.is-offer{color:var(--coral-dark);}
.top-right{display:flex; align-items:center; gap:10px;}
.icon-btn{width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); background:var(--bg); flex-shrink:0;
  border:none; cursor:pointer; position:relative;}
.dot-badge{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background:var(--coral); border:1.5px solid #fff;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--g-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-head);
  font-weight:700; font-size:13px; flex-shrink:0;}
.hamburger{display:none;}

/* mobile slide-down menu */
.m-menu{display:none; background:var(--surface); border-bottom:1px solid var(--line);}
.m-menu.open{display:block;}
.m-menu a{display:block; padding:14px 24px; font-weight:600; font-size:14.5px;
  border-bottom:1px solid var(--line);}
.m-menu a:last-child{border:none;}

/* ---------- page head / breadcrumb ---------- */
.page-head{padding:30px 0 6px;}
.crumb{font-size:12px; color:var(--ink-faint); font-weight:600; margin-bottom:8px;
  display:flex; align-items:center; gap:6px;}
.crumb .msi{font-size:13px;}
.page-title{font-family:var(--f-head); font-weight:800; font-size:28px;
  letter-spacing:-.015em; margin:0;}
.page-sub{font-size:13.5px; color:var(--ink-soft); margin:6px 0 0;}

/* ---------- hero ---------- */
.hero{padding:20px 0 6px;}
.hero-card{border-radius:var(--r-xl); min-height:400px; display:flex; align-items:flex-end;}
.hero-content{position:relative; z-index:2; padding:40px; width:100%;}
.hero-badges{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.glass-chip{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:var(--r-pill);}
.glass-chip .msi{font-size:14px;}
.hero h1{font-family:var(--f-head); font-weight:800; font-size:40px; line-height:1.08;
  letter-spacing:-.015em; color:#fff; margin:0 0 8px; max-width:17ch;}
.hero-sub{font-size:15px; color:rgba(255,255,255,.87); max-width:54ch;
  line-height:1.55; margin:0 0 22px;}
.hero-dots{position:absolute; top:20px; right:24px; display:flex; gap:6px; z-index:3;}
.hero-dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5);
  cursor:pointer; border:none; padding:0; transition:all .25s;}
.hero-dot.active{background:#fff; width:16px; border-radius:4px;}

/* ---------- search card ---------- */
.search-card{background:rgba(255,255,255,.97); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:8px; display:flex; align-items:center;
  gap:4px; max-width:660px;}
.search-field{flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:10px 14px;}
.search-field .msi{color:var(--ink-faint); font-size:19px; flex-shrink:0;}
.search-field select, .search-field input{border:none; background:none; outline:none;
  font-family:var(--f-body); font-weight:500; font-size:14px; color:var(--ink); width:100%;}
.search-div{width:1px; height:24px; background:var(--line); flex-shrink:0;}
.search-btn{background:var(--green); color:#fff; border:none; border-radius:var(--r-md);
  padding:12px 20px; font-weight:700; font-size:14px; display:flex; align-items:center;
  gap:6px; cursor:pointer; flex-shrink:0;}

/* ---------- category pills ---------- */
.cat-scroll{display:flex; gap:10px; overflow-x:auto; padding:18px 0 6px;
  scrollbar-width:none;}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-pill{display:flex; align-items:center; gap:8px; flex-shrink:0; background:var(--surface);
  border-radius:var(--r-pill); padding:9px 16px 9px 9px; box-shadow:var(--shadow-sm);
  font-size:13px; font-weight:600; cursor:pointer;}
.cat-pill .ic{width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:16px;}
.cat-pill.on{background:var(--ink); color:#fff;}

/* ---------- sections ---------- */
.section{padding:28px 0 6px;}
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px;}
.section-title{font-family:var(--f-head); font-weight:800; font-size:19px; letter-spacing:-.01em;}
.section-sub{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}
.section-link{font-size:12.5px; font-weight:700; color:var(--green-dark);
  display:flex; align-items:center; gap:2px; flex-shrink:0;}
.slider-wrap{position:relative;}
.scroll-arrow{position:absolute; top:40%; transform:translateY(-50%); width:36px; height:36px;
  border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4;
  box-shadow:var(--shadow-md); color:var(--ink);}
.scroll-arrow.left{left:4px;} .scroll-arrow.right{right:4px;}

/* ---------- offer cards ---------- */
.offer-scroll{display:flex; gap:16px; overflow-x:auto; padding:4px 2px 18px;
  scroll-snap-type:x mandatory; scrollbar-width:none;}
.offer-scroll::-webkit-scrollbar{display:none;}
.offer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.offer-card{scroll-snap-align:start; flex-shrink:0; width:262px; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface);
  transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column;}
.offer-grid .offer-card{width:auto;}
.offer-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.offer-photo{height:140px;}
.offer-off{top:12px; left:12px; background:var(--ink); color:#fff; font-family:var(--f-head);
  font-weight:800; font-size:13px; padding:7px 13px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);}
.offer-timer{bottom:12px; left:12px; display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.92); color:var(--coral-dark); font-size:10.5px;
  font-weight:700; padding:5px 10px; border-radius:var(--r-pill);}
.offer-timer .msi{font-size:13px;}
.offer-body{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
.offer-cat{font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); margin-bottom:4px;}
.offer-body .name{font-family:var(--f-head); font-weight:700; font-size:14.5px; margin:0 0 3px;}
.offer-body .loc{font-size:11.5px; color:var(--ink-faint); margin-bottom:12px;
  display:flex; align-items:center; gap:4px;}
.offer-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto;}
.offer-code{font-size:11px; font-weight:700; color:var(--green-dark); background:var(--green-tint);
  padding:6px 11px; border-radius:10px; border:1px dashed var(--green);}
.offer-claim{font-size:12px; font-weight:700; color:#fff; background:var(--ink);
  padding:8px 14px; border-radius:var(--r-pill); border:none; cursor:pointer;}

/* ---------- business cards ---------- */
.biz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.biz-card{background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s; display:block;}
.biz-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.biz-photo{height:150px;}
.biz-fav{top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); border:none; cursor:pointer;}
.biz-fav .msi{font-size:17px;}
.biz-open{bottom:10px; left:12px; display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.94); font-size:10.5px; font-weight:700; padding:5px 10px;
  border-radius:var(--r-pill); color:var(--green-dark);}
.o-dot{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block;}
.biz-body{padding:13px 15px 15px;}
.biz-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.biz-name{font-family:var(--f-head); font-weight:700; font-size:14.5px; margin:0;}
.biz-rating{display:flex; align-items:center; gap:3px; font-size:12px; font-weight:700;
  background:var(--amber-tint); color:var(--amber-dark); padding:4px 8px;
  border-radius:8px; flex-shrink:0;}
.biz-rating .msi{font-size:13px;}
.biz-tagline{font-size:11.5px; color:var(--ink-faint); margin:5px 0 10px;}
.biz-actions{display:flex; gap:8px;}
.mini-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:8px 0; border-radius:12px; border:none; cursor:pointer;}
.mini-btn .msi{font-size:14px;}
.mini-call{background:var(--green-tint); color:var(--green-dark);}
.mini-dir{background:var(--bg); color:var(--ink-soft);}

/* ---------- listing rows (browse page) ---------- */
.browse-layout{display:grid; grid-template-columns:260px 1fr; gap:24px; padding:20px 0;}
.filter-panel{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:20px; align-self:start; position:sticky; top:84px;}
.filter-h{font-family:var(--f-head); font-weight:800; font-size:14px; margin:0 0 12px;}
.filter-group{margin-bottom:18px;}
.filter-group label{display:flex; align-items:center; gap:8px; font-size:13px;
  font-weight:500; color:var(--ink-soft); padding:5px 0; cursor:pointer;}
.filter-group input[type=checkbox]{accent-color:var(--green); width:15px; height:15px;}
.listing-row{display:flex; gap:16px; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:14px; margin-bottom:14px;
  transition:box-shadow .15s, transform .15s;}
.listing-row:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.listing-row .ph{width:150px; height:120px; border-radius:16px; flex-shrink:0;}
.lr-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.lr-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.lr-name{font-family:var(--f-head); font-weight:700; font-size:15.5px; margin:0;}
.lr-tag{font-size:11.5px; color:var(--ink-faint); font-weight:600; margin:3px 0 6px;}
.lr-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.lr-foot{margin-top:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.lr-offer-chip{display:inline-flex; align-items:center; gap:5px; background:var(--coral-tint);
  color:var(--coral-dark); font-size:11px; font-weight:700; padding:5px 11px;
  border-radius:var(--r-pill);}
.lr-offer-chip .msi{font-size:13px;}
.sort-row{display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.result-count{font-size:13px; color:var(--ink-soft);}
.result-count b{color:var(--ink);}
.sort-select{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 14px; font-size:12.5px; font-weight:600; font-family:var(--f-body); color:var(--ink);}

/* ---------- filter chips row (mobile + offers page) ---------- */
.filter-row{display:flex; gap:8px; overflow-x:auto; padding:12px 0 6px; scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.f-chip{flex-shrink:0; font-size:12px; font-weight:600; padding:8px 15px;
  border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--shadow-sm);
  color:var(--ink-soft); cursor:pointer; border:none;}
.f-chip.on{background:var(--ink); color:#fff;}

/* ---------- town tiles ---------- */
.town-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.town-tile{border-radius:var(--r-lg); height:135px; box-shadow:var(--shadow-sm);
  display:flex; align-items:flex-end; transition:transform .15s;}
.town-tile:hover{transform:translateY(-3px);}
.town-name{padding:14px; color:#fff; font-family:var(--f-head); font-weight:700; font-size:15px;}
.town-count{display:block; font-family:var(--f-body); font-weight:500; font-size:11px;
  opacity:.85; margin-top:2px;}
.town-far{top:12px; left:12px; background:rgba(255,255,255,.2); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-size:10px; font-weight:700;
  padding:4px 9px; border-radius:var(--r-pill);}
.group-h{font-family:var(--f-head); font-weight:800; font-size:15px; margin:26px 0 12px;
  display:flex; align-items:center; gap:8px;}
.group-h .msi{font-size:18px; color:var(--green-dark);}

/* ---------- category tiles page ---------- */
.catpage-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.cat-tile{background:var(--surface); border-radius:var(--r-md); padding:18px 12px;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;}
.cat-tile:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.cat-tile .ic2{width:44px; height:44px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:21px;}
.cat-tile .name2{font-weight:700; font-size:12.5px;}
.cat-tile .count2{font-size:10.5px; color:var(--ink-faint);}
.cat-tile .count2.new{color:var(--coral-dark); font-weight:600;}

/* ---------- PWA strip ---------- */
.pwa-strip{margin:24px 0 0; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:16px 20px; display:flex; align-items:center; gap:16px;}
.pwa-ic{width:46px; height:46px; border-radius:14px; background:var(--g-coral); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.pwa-txt{flex:1; min-width:0;}
.pwa-txt b{font-family:var(--f-head); font-size:14px; display:block; margin-bottom:2px;}
.pwa-txt span{font-size:12px; color:var(--ink-soft);}

/* ---------- CTA banner ---------- */
.cta-banner{margin:24px 0 0; border-radius:var(--r-xl); min-height:220px;
  display:flex; align-items:center;}
.cta-inner{position:relative; z-index:2; padding:36px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; width:100%;}
.cta-inner h3{font-family:var(--f-head); font-weight:800; color:#fff; font-size:26px;
  margin:0 0 6px; letter-spacing:-.01em;}
.cta-inner p{color:rgba(255,255,255,.85); font-size:13.5px; margin:0; max-width:40ch;}

/* ---------- forms ---------- */
.form-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:26px; margin-bottom:18px;}
.form-h{font-family:var(--f-head); font-weight:800; font-size:16px; margin:0 0 4px;}
.form-hint{font-size:12.5px; color:var(--ink-faint); margin:0 0 18px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px; font-weight:700; color:var(--ink-soft);}
.field label .req{color:var(--coral);}
.field input, .field select, .field textarea{font-family:var(--f-body); font-size:13.5px;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:14px; background:var(--bg);
  color:var(--ink); outline:none; transition:border-color .15s;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green);
  background:var(--surface);}
.field textarea{resize:vertical; min-height:96px;}
.upload-box{border:2px dashed var(--line); border-radius:var(--r-md); padding:26px;
  text-align:center; color:var(--ink-faint); font-size:12.5px; background:var(--bg); cursor:pointer;}
.upload-box .msi{font-size:28px; display:block; margin:0 auto 6px; color:var(--ink-faint);}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px; flex-wrap:wrap;}
.auth-wrap{max-width:420px; margin:36px auto; padding:0 20px;}
.auth-tabs{display:flex; background:var(--bg); border-radius:var(--r-pill); padding:4px; margin-bottom:20px;}
.auth-tabs button{flex:1; border:none; background:none; padding:10px; border-radius:var(--r-pill);
  font-weight:700; font-size:13px; color:var(--ink-soft); cursor:pointer;}
.auth-tabs button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.divider{display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:11.5px;
  font-weight:600; margin:16px 0;}
.divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--line);}

/* ---------- business profile ---------- */
.prof-hero{height:300px; border-radius:var(--r-xl);}
.prof-back{top:14px; left:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;}
.prof-fav{top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  color:var(--coral); border:none; cursor:pointer;}
.prof-gallery-tag{bottom:14px; right:14px; display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,.55); color:#fff; font-size:10.5px; font-weight:700;
  padding:5px 10px; border-radius:var(--r-pill);}
.prof-layout{display:grid; grid-template-columns:1fr 340px; gap:22px; padding:0 0 20px;}
.prof-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  margin-top:16px; padding:20px;}
.prof-name{font-family:var(--f-head); font-weight:800; font-size:23px; margin:0 0 3px;}
.prof-sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 14px;}
.prof-stats{display:flex; gap:8px; margin-bottom:16px;}
.p-stat{flex:1; background:var(--bg); border-radius:14px; padding:10px 6px; text-align:center;}
.p-stat b{font-family:var(--f-head); font-size:14px; display:block;}
.p-stat span{font-size:9.5px; color:var(--ink-faint); font-weight:600;}
.prof-actions{display:flex; gap:8px;}
.pa-btn{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:10px; font-weight:700; padding:12px 0; border-radius:14px; border:none; cursor:pointer;}
.pa-btn .msi{font-size:19px;}
.pa-call{background:var(--green); color:#fff;}
.pa-wa{background:var(--green-tint); color:var(--green-dark);}
.pa-dir{background:var(--bg); color:var(--ink-soft);}
.pa-share{background:var(--bg); color:var(--ink-soft);}
.prof-offer{margin-top:16px; border-radius:var(--r-lg); background:var(--g-coral); color:#fff;
  padding:16px 18px; display:flex; align-items:center; gap:13px; box-shadow:var(--shadow-md);}
.prof-offer .msi{font-size:26px;}
.prof-offer b{font-family:var(--f-head); font-size:14px; display:block;}
.prof-offer span{font-size:11px; opacity:.9;}
.gal-strip{display:flex; gap:8px; overflow-x:auto; padding:16px 0 4px; scrollbar-width:none;}
.gal-strip::-webkit-scrollbar{display:none;}
.gal-strip .ph{width:110px; height:84px; border-radius:14px; flex-shrink:0;}
.prof-about{font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0;}
.hours-row{display:flex; justify-content:space-between; font-size:12.5px; padding:8px 0;
  border-bottom:1px solid var(--line);}
.hours-row:last-child{border:none;}
.hours-row .open{color:var(--green-dark); font-weight:700;}
.card-h{font-family:var(--f-head); font-weight:800; font-size:14.5px; margin:0 0 12px;}
.map-box{height:180px; border-radius:var(--r-md); background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
  font-size:12px; font-weight:600; gap:6px; border:1.5px dashed var(--line);}

/* reviews */
.review{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.review:last-child{border:none;}
.rev-av{width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; color:#fff; font-family:var(--f-head);
  font-weight:700; font-size:12px;}
.rev-body{flex:1; min-width:0;}
.rev-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.rev-name{font-weight:700; font-size:13px;}
.rev-date{font-size:10.5px; color:var(--ink-faint);}
.rev-stars{color:var(--amber); font-size:12px; letter-spacing:1px; margin:2px 0 5px;}
.rev-text{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0;}

/* sticky mobile action bar (business page) */
.sticky-cta{display:none;}

/* ---------- dashboard ---------- */
.dash-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:8px;}
.stat-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:18px;}
.stat-card .ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; margin-bottom:12px;}
.stat-card b{font-family:var(--f-head); font-size:22px; display:block;}
.stat-card span{font-size:11.5px; color:var(--ink-faint); font-weight:600;}
.stat-trend{font-size:10.5px; font-weight:700; color:var(--green-dark); margin-top:4px; display:block;}
.dash-table{width:100%; border-collapse:collapse; background:var(--surface);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); font-size:13px;}
.dash-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--bg); font-weight:700;}
.dash-table td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle;}
.dash-table tr:last-child td{border:none;}
.status-pill{font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill);}
.st-live{background:var(--green-tint); color:var(--green-dark);}
.st-end{background:var(--bg); color:var(--ink-faint);}
.st-pend{background:var(--amber-tint); color:var(--amber-dark);}
.table-wrap{overflow-x:auto; border-radius:var(--r-lg);}

/* ---------- pagination ---------- */
.pagination{display:flex; gap:6px; justify-content:center; padding:22px 0;}
.pg{width:36px; height:36px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; background:var(--surface);
  box-shadow:var(--shadow-sm); color:var(--ink-soft); border:none; cursor:pointer;}
.pg.on{background:var(--ink); color:#fff;}

/* ---------- static pages ---------- */
.prose{font-size:14px; line-height:1.75; color:var(--ink-soft); max-width:70ch;}
.prose h3{font-family:var(--f-head); color:var(--ink); font-size:17px; margin:26px 0 8px;}
.stats-band{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0;}
.err-wrap{text-align:center; padding:70px 20px;}
.err-code{font-family:var(--f-head); font-weight:800; font-size:90px; line-height:1;
  background:var(--g-coral); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#B9BCC4; padding:44px 0 24px; margin-top:34px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px;}
.foot-logo{font-family:var(--f-head); font-weight:800; font-size:17px; color:#fff;
  display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.foot-desc{font-size:13px; max-width:32ch; line-height:1.6; margin-bottom:14px;}
.foot-social{display:flex; gap:9px;}
.foot-social a{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff;}
.foot-col h4{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#7A7E88;
  margin:0 0 11px; font-weight:700;}
.foot-col li{margin-bottom:8px; font-size:13px;}
.foot-bottom{display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#7A7E88;}

/* ---------- mobile bottom tab bar (web-app concept) ---------- */
.tab-bar{display:none;}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 980px){
  .biz-grid{grid-template-columns:1fr 1fr;}
  .offer-grid{grid-template-columns:1fr 1fr;}
  .town-grid{grid-template-columns:1fr 1fr;}
  .catpage-grid{grid-template-columns:repeat(3,1fr);}
  .dash-grid{grid-template-columns:1fr 1fr;}
  .browse-layout{grid-template-columns:1fr;}
  .filter-panel{position:static; display:none;}
  .prof-layout{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   RESPONSIVE — mobile (app-like chrome switches on)
   ============================================================ */
@media (max-width: 768px){
  .wrap{padding:0 18px;}
  .topbar-in{padding:12px 18px;}
  .nav-links, .top-right .btn, .top-right .avatar{display:none;}
  .hamburger{display:flex;}

  .hero-card{min-height:340px;}
  .hero-content{padding:22px;}
  .hero h1{font-size:28px;}
  .hero-sub{font-size:13px;}
  .search-card{max-width:100%; flex-direction:column; align-items:stretch; padding:8px; gap:0;}
  .search-field{padding:11px 10px; border-bottom:1px solid var(--line);}
  .search-field:last-of-type{border-bottom:none;}
  .search-div{display:none;}
  .search-btn{width:100%; justify-content:center; margin-top:6px;}

  .page-title{font-size:23px;}
  .section-title{font-size:17px;}
  .scroll-arrow{display:none;}
  .offer-card{width:225px;}
  .offer-photo{height:120px;}
  .offer-grid{grid-template-columns:1fr;}
  .biz-grid{grid-template-columns:1fr;}
  .town-grid{grid-template-columns:1fr 1fr; gap:11px;}
  .town-tile{height:110px;}
  .catpage-grid{grid-template-columns:1fr 1fr;}
  .dash-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .listing-row .ph{width:104px; height:104px;}
  .lr-desc{display:none;}

  .pwa-strip{flex-wrap:wrap;}
  .pwa-strip .btn{width:100%; justify-content:center;}
  .cta-inner{flex-direction:column; align-items:flex-start; padding:24px 22px;}
  .cta-inner .btn{width:100%; justify-content:center;}

  .prof-hero{height:230px; border-radius:0 0 var(--r-xl) var(--r-xl); margin:0 -18px;}
  .prof-card:first-of-type{margin-top:-34px; position:relative; z-index:3;}

  footer{padding:30px 0 110px;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:6px;}

  /* sticky call-to-action on business page */
  .sticky-cta{display:flex; gap:8px; position:fixed; left:14px; right:14px; bottom:78px;
    z-index:45;}
  .sticky-cta .btn{flex:1; justify-content:center; box-shadow:var(--shadow-md);}

  /* floating pill tab bar */
  .tab-bar{display:flex; justify-content:space-around; align-items:center;
    position:fixed; bottom:12px; left:14px; right:14px; z-index:50;
    background:rgba(20,21,26,.94); backdrop-filter:blur(10px);
    border-radius:var(--r-pill); box-shadow:var(--shadow-md); padding:8px 6px;}
  .tab-item{display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:9.5px; font-weight:600; color:#8B8F99; padding:6px 13px;
    border-radius:var(--r-pill);}
  .tab-item.active{color:#fff;}
  .tab-item .msi{font-size:20px;}
  .tab-post{width:46px; height:46px; border-radius:50%; background:var(--coral); color:#fff;
    display:flex; align-items:center; justify-content:center; margin-top:-26px;
    box-shadow:var(--shadow-md); border:4px solid #fff;}
}

/* ============================================================
   ACCOUNT / DASHBOARD / ADMIN additions
   ============================================================ */

/* ---- sidebar shell (owner dashboard + admin) ---- */
.dash-shell{display:grid; grid-template-columns:230px 1fr; gap:22px; padding:20px 0;}
.side-nav{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:12px; align-self:start; position:sticky; top:84px;}
.side-link{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px;
  font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:2px;}
.side-link .msi{font-size:18px;}
.side-link.on{background:var(--ink); color:#fff;}
.side-link .cnt{margin-left:auto; background:var(--coral); color:#fff; font-size:10px;
  font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; padding:0 5px;}
.side-sep{height:1px; background:var(--line); margin:10px 8px;}

/* ---- toggle switch ---- */
.switch{position:relative; width:42px; height:24px; appearance:none; -webkit-appearance:none;
  background:var(--line); border-radius:var(--r-pill); cursor:pointer; outline:none;
  transition:background .2s; flex-shrink:0;}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:left .2s;}
.switch:checked{background:var(--green);}
.switch:checked::after{left:21px;}
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line);}
.setting-row:last-child{border:none;}
.setting-row b{font-size:13px; display:block; margin-bottom:2px;}
.setting-row span{font-size:11.5px; color:var(--ink-faint);}

/* ---- approval rows (admin) ---- */
.appr-type{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 9px; border-radius:var(--r-pill);}
.t-listing{background:var(--green-tint); color:var(--green-dark);}
.t-offer{background:var(--coral-tint); color:var(--coral-dark);}
.appr-actions{display:flex; gap:6px;}
.ok-btn, .no-btn{width:32px; height:32px; border-radius:10px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.ok-btn{background:var(--green-tint); color:var(--green-dark);}
.no-btn{background:var(--coral-tint); color:var(--coral-dark);}
.ok-btn .msi, .no-btn .msi{font-size:17px;}

/* ---- category manager chips (admin) ---- */
.tag-manage{display:flex; flex-wrap:wrap; gap:8px;}
.tag-x{display:inline-flex; align-items:center; gap:6px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 8px 7px 13px;
  font-size:12px; font-weight:600;}
.tag-x .msi{font-size:14px; color:var(--ink-faint); cursor:pointer;}
.tag-add{display:flex; gap:8px; margin-top:12px;}
.tag-add input{flex:1; font-family:var(--f-body); font-size:13px; padding:10px 14px;
  border:1.5px solid var(--line); border-radius:14px; background:var(--bg); outline:none;}

/* ---- profile row (account) ---- */
.me-row{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.me-av{width:64px; height:64px; border-radius:50%; background:var(--g-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-head);
  font-weight:800; font-size:20px; flex-shrink:0;}
.me-row b{font-family:var(--f-head); font-size:17px; display:block;}
.me-row span{font-size:12px; color:var(--ink-faint);}

/* ---- reply box under reviews ---- */
.reply-box{display:flex; gap:8px; margin-top:8px;}
.reply-box input{flex:1; font-family:var(--f-body); font-size:12.5px; padding:9px 13px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--bg); outline:none;}
.reply-box button{border:none; background:var(--ink); color:#fff; border-radius:12px;
  padding:0 14px; font-size:12px; font-weight:700; cursor:pointer;}
.owner-reply{background:var(--bg); border-radius:12px; padding:10px 12px; margin-top:8px;
  font-size:12px; color:var(--ink-soft);}
.owner-reply b{color:var(--ink); font-size:11px; display:block; margin-bottom:3px;}

@media (max-width: 980px){
  .dash-shell{grid-template-columns:1fr;}
  .side-nav{position:static; display:flex; overflow-x:auto; padding:8px; gap:4px;
    scrollbar-width:none;}
  .side-nav::-webkit-scrollbar{display:none;}
  .side-link{flex-shrink:0; margin:0; padding:9px 13px;}
  .side-sep{display:none;}
}

/* ============================================================
   COMPONENT LIBRARY additions
   (alerts, modal, toast, accordion, skeleton, empty state,
    steps, code copy, countdown, blog, OTP, table tools)
   ============================================================ */

/* ---- alerts ---- */
.alert{display:flex; gap:11px; align-items:flex-start; padding:13px 15px;
  border-radius:var(--r-md); font-size:12.5px; line-height:1.5; margin-bottom:14px;}
.alert .msi{font-size:18px; flex-shrink:0; margin-top:1px;}
.alert b{display:block; font-size:13px; margin-bottom:1px;}
.al-success{background:var(--green-tint); color:var(--green-dark);}
.al-error{background:var(--coral-tint); color:var(--coral-dark);}
.al-warn{background:var(--amber-tint); color:var(--amber-dark);}
.al-info{background:#E5EEFB; color:#2B5FA8;}

/* ---- modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(14,15,19,.55); z-index:90;
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  width:100%; max-width:400px; padding:24px; position:relative;
  animation:pop .18s ease;}
@keyframes pop{from{transform:scale(.94); opacity:0} to{transform:scale(1); opacity:1}}
.modal-x{position:absolute; top:14px; right:14px;}
.modal-h{font-family:var(--f-head); font-weight:800; font-size:17px; margin:0 0 4px;}
.modal-sub{font-size:12.5px; color:var(--ink-soft); margin:0 0 16px;}

/* ---- toast ---- */
.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600;
  padding:11px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-md);
  z-index:99; opacity:0; pointer-events:none; transition:all .25s;
  display:flex; align-items:center; gap:7px;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .msi{font-size:16px; color:var(--green);}

/* ---- accordion (native details) ---- */
.accordion{background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  margin-bottom:10px; overflow:hidden;}
.accordion summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:15px 17px; font-weight:700; font-size:13.5px;}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary .msi{transition:transform .2s; color:var(--ink-faint);}
.accordion[open] summary .msi{transform:rotate(180deg);}
.accordion .acc-body{padding:0 17px 15px; font-size:13px; color:var(--ink-soft); line-height:1.65;}

/* ---- skeleton loader ---- */
.skeleton{position:relative; overflow:hidden; background:var(--line); border-radius:12px;}
.skeleton::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:shimmer 1.4s infinite;}
@keyframes shimmer{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
.sk-line{height:12px; margin-bottom:8px;}
.sk-card{height:140px; border-radius:var(--r-md);}

/* ---- empty state ---- */
.empty-state{text-align:center; padding:44px 20px; background:var(--surface);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.empty-ic{width:66px; height:66px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  color:var(--ink-faint);}
.empty-ic .msi{font-size:30px;}
.empty-state b{font-family:var(--f-head); font-size:15.5px; display:block; margin-bottom:4px;}
.empty-state p{font-size:12.5px; color:var(--ink-faint); margin:0 0 16px;}

/* ---- numbered steps ---- */
.steps{counter-reset:step;}
.step{display:flex; gap:13px; padding:11px 0;}
.step::before{counter-increment:step; content:counter(step);
  width:28px; height:28px; border-radius:50%; background:var(--green-tint);
  color:var(--green-dark); font-weight:800; font-size:13px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;}
.step b{font-size:13px; display:block; margin-bottom:2px;}
.step span{font-size:12px; color:var(--ink-soft); line-height:1.5;}

/* ---- big code copy box ---- */
.code-copy{display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:2px dashed var(--green); background:var(--green-tint); border-radius:var(--r-md);
  padding:14px 16px;}
.code-copy b{font-family:var(--f-head); font-size:19px; letter-spacing:.06em;
  color:var(--green-dark);}
.code-copy button{border:none; background:var(--green); color:#fff; font-weight:700;
  font-size:12px; padding:9px 15px; border-radius:var(--r-pill); cursor:pointer;
  display:flex; align-items:center; gap:5px;}
.code-copy button .msi{font-size:15px;}

/* ---- countdown ---- */
.countdown{display:flex; gap:8px;}
.cd-box{background:var(--ink); color:#fff; border-radius:12px; padding:9px 0;
  min-width:56px; text-align:center;}
.cd-box b{font-family:var(--f-head); font-size:18px; display:block; line-height:1;}
.cd-box span{font-size:8.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; opacity:.65;}

/* ---- offer hero (detail page) ---- */
.offer-hero{border-radius:var(--r-xl); min-height:260px; display:flex; align-items:flex-end;}
.offer-hero-in{position:relative; z-index:2; padding:28px; width:100%;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.oh-off{font-family:var(--f-head); font-weight:800; font-size:40px; color:#fff;
  line-height:1; letter-spacing:-.01em;}
.oh-title{color:rgba(255,255,255,.9); font-size:14px; font-weight:600; margin-top:6px;}

/* ---- blog ---- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.post-card{background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s; display:block;}
.post-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.post-img{height:150px;}
.post-body{padding:15px 16px 17px;}
.post-chip{display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--coral-dark); background:var(--coral-tint);
  padding:4px 9px; border-radius:var(--r-pill); margin-bottom:9px;}
.post-title{font-family:var(--f-head); font-weight:700; font-size:15px; margin:0 0 6px;
  line-height:1.35;}
.post-ex{font-size:12px; color:var(--ink-soft); line-height:1.55; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.post-meta{font-size:11px; color:var(--ink-faint); display:flex; align-items:center; gap:6px;}
.post-hero{height:320px; border-radius:var(--r-xl); margin-bottom:22px;}
.post-prose{font-size:14.5px; line-height:1.8; color:#3A3D46; max-width:70ch;}
.post-prose h3{font-family:var(--f-head); color:var(--ink); font-size:18px; margin:28px 0 8px;}
.post-prose blockquote{border-left:3px solid var(--green); margin:18px 0; padding:4px 0 4px 16px;
  color:var(--ink); font-weight:600; font-style:italic;}

/* ---- OTP inputs ---- */
.otp-row{display:flex; gap:10px; justify-content:center; margin:6px 0 4px;}
.otp-row input{width:52px; height:58px; text-align:center; font-family:var(--f-head);
  font-weight:800; font-size:20px; border:1.5px solid var(--line); border-radius:14px;
  background:var(--bg); outline:none;}
.otp-row input:focus{border-color:var(--green); background:var(--surface);}

/* ---- table tools (admin listings) ---- */
.table-tools{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.table-search{flex:1; min-width:200px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:9px 15px;}
.table-search .msi{color:var(--ink-faint); font-size:17px;}
.table-search input{border:none; background:none; outline:none; width:100%;
  font-family:var(--f-body); font-size:13px;}
.st-susp{background:var(--coral-tint); color:var(--coral-dark);}

/* ---- share row ---- */
.share-row{display:flex; gap:8px;}
.share-row .icon-btn{background:var(--bg);}

@media (max-width: 980px){
  .post-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 768px){
  .post-grid{grid-template-columns:1fr;}
  .oh-off{font-size:30px;}
  .post-hero{height:200px;}
  .cd-box{min-width:50px;}
}

/* ============================================================
   DETAIL-PAGE additions (reviews summary, notifications,
   claimed/expired offers, offer live preview)
   ============================================================ */

/* ---- rating summary (business-reviews) ---- */
.rating-summary{display:flex; gap:22px; align-items:center;}
.rs-big{text-align:center; flex-shrink:0;}
.rs-big b{font-family:var(--f-head); font-weight:800; font-size:42px; line-height:1; display:block;}
.rs-big .stars{color:var(--amber); font-size:14px; letter-spacing:1px; margin:6px 0 3px;}
.rs-big span{font-size:11px; color:var(--ink-faint); font-weight:600;}
.rs-bars{flex:1; min-width:0;}
.rate-bar{display:flex; align-items:center; gap:9px; margin-bottom:6px;}
.rate-bar em{font-style:normal; font-size:11px; font-weight:700; width:10px; color:var(--ink-soft);}
.rate-bar .track{flex:1; height:7px; border-radius:4px; background:var(--bg); overflow:hidden;}
.rate-bar .fill{height:100%; border-radius:4px; background:var(--amber);}
.rate-bar i{font-style:normal; font-size:10.5px; color:var(--ink-faint); width:26px; text-align:right;}

/* ---- star input (write a review) ---- */
.star-input{display:flex; gap:4px;}
.star-input .msi{font-size:26px; color:var(--line); cursor:pointer;}
.star-input .msi.on{color:var(--amber); font-variation-settings:'FILL' 1;}

/* ---- notifications list ---- */
.notif-item{display:flex; gap:13px; background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:14px 16px; margin-bottom:10px; position:relative;}
.notif-item.unread{border-left:3px solid var(--green);}
.notif-ic{width:40px; height:40px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;}
.notif-body{flex:1; min-width:0;}
.notif-body b{font-size:13px; display:block; margin-bottom:2px;}
.notif-body span{font-size:12px; color:var(--ink-soft); line-height:1.5;}
.notif-time{font-size:10.5px; color:var(--ink-faint); white-space:nowrap; flex-shrink:0;}

/* ---- claimed / expired offer state ---- */
.offer-card.expired{opacity:.72;}
.offer-card.expired .offer-photo img{filter:grayscale(1);}
.offer-card.expired .offer-off{background:var(--ink-faint);}
.offer-card.expired .offer-code{color:var(--ink-faint); background:var(--bg);
  border-color:var(--ink-faint);}

/* ---- offer form live preview note ---- */
.preview-note{font-size:11px; color:var(--ink-faint); text-align:center; margin-top:10px;}

/* ---- stat chips on town/category hero ---- */
.hero-stat-row{display:flex; gap:8px; flex-wrap:wrap;}