/* ============================================================
   ZoomCoupon — core styles
   Signature: ticket-stub coupon cards with perforated tear line
   ============================================================ */

:root{
  --ink:#123B68;            /* primary text / header */
  --ink-2:#1C7EE3;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --bg:#F5FAFF;             /* page background */
  --bg-2:#EAF4FF;
  --green:#1C7EE3;          /* primary blue */
  --green-dark:#1166BC;
  --green-soft:#E6F2FF;
  --coral:#7C3AED;          /* accent */
  --coral-soft:#F1EAFE;
  --amber:#7C3AED;
  --amber-soft:#F1EAFE;
  --line:#D7E8FA;
  --muted:#445E78;
  --muted-2:#5E748B;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,35,59,.06), 0 8px 24px rgba(16,35,59,.07);
  --shadow-sm:0 1px 2px rgba(16,35,59,.08);
  --maxw:1180px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px;width:100%}

.visually-hidden,.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:inherit;font-weight:700;line-height:1;cursor:pointer;
  padding:.72em 1.15em;border-radius:10px;border:1.5px solid transparent;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.5em .85em;font-size:.9rem}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--green-dark);color:#fff;box-shadow:0 4px 12px rgba(28,126,227,.3)}
.btn-primary:hover{background:#0B4F93}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--green);color:var(--green-dark)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#5B21B6}
.btn-disabled,.btn:disabled{background:var(--bg-2);color:var(--muted-2);cursor:not-allowed;box-shadow:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid rgba(28,126,227,.4);outline-offset:2px;border-radius:8px}

/* ---------- Pills & badges ---------- */
.pill{display:inline-flex;align-items:center;gap:.35em;font-size:.78rem;font-weight:700;
  padding:.28em .6em;border-radius:999px;background:var(--bg-2);color:var(--muted)}
.pill--count{background:var(--green-soft);color:var(--green-dark)}
.badge{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.25em .5em;border-radius:6px}
.badge--exclusive{background:var(--amber-soft);color:#8a5a06}

/* ---------- Header ---------- */
.site-header{background:#fff;color:var(--ink);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(28,126,227,.12);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;padding-block:14px}
.logo{display:inline-flex;align-items:center;color:var(--green);flex:0 0 auto}
.logo:hover{text-decoration:none}
.site-logo{width:62px;height:54px;object-fit:contain;object-position:center}
.logo-text b{font-weight:800;color:var(--green)}
.logo--footer{color:var(--ink)}
.logo--footer .logo-text b{color:var(--green-dark)}

.header-search{position:relative;flex:1;max-width:520px}
.header-search input{
  width:100%;padding:.7em 3em .7em 1em;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;font-size:.95rem}
.header-search input::placeholder{color:var(--muted-2)}
.header-search button{position:absolute;right:5px;top:5px;bottom:5px;width:40px;border:0;border-radius:8px;
  background:var(--green-dark);color:#fff;cursor:pointer;display:grid;place-items:center}
.header-search button:hover{background:#0B4F93}
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;z-index:60;max-height:60vh;overflow-y:auto}
.search-suggest .ss-group{padding:.4em 0}
.search-suggest .ss-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:.4em 1em;font-weight:700}
.search-suggest a{display:flex;gap:.6em;align-items:center;padding:.55em 1em;color:var(--ink)}
.search-suggest a:hover,.search-suggest a.is-active{background:var(--green-soft);text-decoration:none}
.search-suggest .ss-empty{padding:1em;color:var(--muted);font-size:.9rem}

.main-nav{display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);font-weight:600;padding:.5em .7em;border-radius:8px;font-size:.95rem}
.nav-links a:hover{color:var(--green);background:var(--green-soft);text-decoration:none}
.nav-links .btn-primary{color:#fff}
.nav-links .btn-ghost{color:var(--ink)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--green);border-radius:2px}

/* ---------- Flash & breadcrumbs ---------- */
.flash-wrap{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.flash{padding:.7em 1em;border-radius:10px;font-weight:600;font-size:.95rem}
.flash--success{background:var(--green-soft);color:var(--green-dark)}
.flash--error{background:var(--coral-soft);color:#b4331b}
.flash--info{background:#E5EEFB;color:#1d4e93}
.breadcrumbs{padding-top:18px;font-size:.86rem}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0;color:var(--muted)}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.5em;color:var(--muted-2)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Sections ---------- */
.section{padding-block:44px}
.section--tight{padding-block:28px}
.section__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section__head p{color:var(--muted);margin:0}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-dark);background:var(--green-soft);padding:.35em .7em;border-radius:999px;margin-bottom:.8em}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#0E5FAC 0%,#1C7EE3 62%,#7C3AED 140%);
  color:#fff;padding-block:56px 64px;position:relative;overflow:hidden}
.hero__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);align-items:center;gap:48px}
.hero__content{min-width:0}
.hero__visual{margin:0;border-radius:28px;overflow:hidden;border:0px solid rgba(255,255,255,.8);box-shadow:0 24px 60px rgba(7,40,75,.3);aspect-ratio:16/9}
.hero__visual img{width:100%;height:100%;object-fit:cover}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:#fff;font-size:1.15rem;max-width:52ch;margin-bottom:26px}
.hero .highlight{color:#fff;text-decoration:none}
.hero-search{display:flex;gap:10px;max-width:560px;flex-wrap:wrap}
.hero-search input{flex:1;min-width:220px;padding:.95em 1.1em;border-radius:12px;border:0;font:inherit;font-size:1rem}
.hero-stats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-size:1.7rem;font-weight:800;color:#fff}
.hero-stats .stat span{color:#fff;font-size:.9rem}

/* ---------- Merchant grid ---------- */
.merchant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.merchant-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;overflow:hidden}
.merchant-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.merchant-card__link{display:flex;flex-direction:column;gap:12px;padding:18px;height:100%;color:inherit}
.merchant-card__link:hover{text-decoration:none}
.merchant-card__head{display:flex;gap:12px;align-items:center}
.merchant-card__name{margin:0;font-size:1.05rem}
.merchant-card__best{color:var(--coral);font-weight:700;font-size:.85rem}
.merchant-card__desc{color:var(--muted);font-size:.88rem;margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.merchant-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.merchant-card__updated{font-size:.8rem;color:var(--muted)}
.brand-logo{border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none;padding:7px}
.brand-logo--letter{display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;border:0}

/* ============================================================
   Modern ticket coupon card (SIGNATURE v2)
   Compact stacked card in grids; becomes a horizontal ticket row
   in wide containers (store pages) via container queries.
   ============================================================ */
.coupon-list{display:grid;gap:16px;container-type:inline-size}
.coupon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

.coupon-card{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:16px 16px 14px;overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease}
.coupon-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#BFDCF8}
.coupon-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--green),var(--coral));opacity:0;transition:opacity .15s ease}
.coupon-card:hover::before{opacity:1}

.coupon-card__save{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--muted-2);cursor:pointer;display:grid;place-items:center;
  transition:color .12s ease, border-color .12s ease, background .12s ease}
.coupon-card__save:hover{color:var(--green-dark);border-color:var(--green);background:var(--green-soft)}
.coupon-card__save.is-saved{color:#fff;background:var(--coral);border-color:var(--coral)}

.coupon-card__stub{display:flex;align-items:center;gap:12px;padding-right:38px}
.coupon-card__logo{flex:none;display:inline-flex}
.coupon-card__logo .brand-logo{border-radius:11px}
.coupon-card__discount{display:inline-flex;align-items:baseline;gap:.28em;min-width:0}
.coupon-card__discount b{font-size:1.65rem;font-weight:900;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(120deg,var(--green-dark),var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.coupon-card__discount i{font-style:normal;font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted-2)}

.coupon-card__body{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.coupon-card__meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:.78rem}
.coupon-card__store{font-weight:800;color:var(--green-dark);text-transform:uppercase;letter-spacing:.04em}
.coupon-card__type{color:var(--muted-2);font-weight:600;padding-left:8px;border-left:1px solid var(--line)}
.coupon-card__title{font-size:1.02rem;margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.coupon-card__title a{color:var(--ink)}
.coupon-card__title a:hover{color:var(--green-dark);text-decoration:none}
.coupon-card__desc{color:var(--muted);font-size:.86rem;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.coupon-card__facts{list-style:none;display:flex;flex-wrap:wrap;gap:5px 13px;margin:0;padding:0;font-size:.78rem;color:var(--muted)}
.fact{display:inline-flex;align-items:center;gap:.3em}
.fact--verified{color:var(--green-dark);font-weight:700}
.fact--expiry{color:var(--coral);font-weight:600}

/* Perforated tear line above the action area — ticket DNA */
.coupon-card__action{position:relative;margin-top:auto;padding-top:13px;border-top:2px dashed var(--line);
  display:flex;flex-direction:column;gap:8px}
.coupon-card__action::before,.coupon-card__action::after{content:"";position:absolute;top:-7px;width:12px;height:12px;
  border-radius:50%;background:var(--bg);border:1.5px solid var(--line)}
.coupon-card__action::before{left:-22px}
.coupon-card__action::after{right:-22px}

/* Peel-corner reveal button */
.cc-btn{position:relative;display:flex;width:100%;align-items:center;justify-content:center;
  font:inherit;font-weight:800;font-size:.95rem;line-height:1;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,var(--green-dark),var(--green));
  border:0;border-radius:11px;padding:.85em 3.2em .85em 1em;overflow:hidden;
  box-shadow:0 4px 14px rgba(28,126,227,.28);transition:box-shadow .15s ease, filter .15s ease}
.cc-btn:hover{filter:brightness(1.06);box-shadow:0 6px 18px rgba(28,126,227,.36)}
.cc-btn:active{transform:translateY(1px)}
.cc-btn__label{flex:1;text-align:center}
.cc-btn__peel{position:absolute;top:0;right:0;bottom:0;width:2.9em;display:grid;place-items:center;
  background:#fff;color:var(--ink);font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  border-left:2px dashed var(--green-dark);border-radius:0 11px 11px 0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  background:linear-gradient(135deg,#fff 0%,#fff 55%,var(--green-soft) 56%,#D5EAFF 100%)}
.cc-btn__peel::after{content:"";position:absolute;left:-2px;top:-4px;bottom:-4px;width:0;
  border-left:2px dashed rgba(255,255,255,.9)}
.cc-btn--code .cc-btn__peel{text-indent:-.15em}
.cc-btn__peel--deal{color:var(--green-dark);font-size:1rem}
.cc-btn:focus-visible{outline:3px solid rgba(28,126,227,.4);outline-offset:2px}

.coupon-card__terms{font-size:.8rem;color:var(--muted)}
.coupon-card__terms summary{cursor:pointer;color:var(--green-dark);font-weight:600;width:max-content}
.coupon-card__terms-preview{font-size:.8rem;color:var(--muted);margin:0}

.coupon-card.is-expired{background:#FAFCFF}
.coupon-card.is-expired .coupon-card__discount b{background:none;color:var(--muted-2)}
.coupon-card.is-expired .brand-logo{filter:grayscale(1);opacity:.75}
.coupon-card.is-expired:hover{transform:none;border-color:var(--line)}
.coupon-card.is-expired:hover::before{opacity:0}

/* Wide full-width lists (store page, dashboard): horizontal ticket row like a classic coupon strip.
   The list is the query container; the 4-up .coupon-grid keeps the stacked card. */
@container (min-width: 620px){
  .coupon-list:not(.coupon-grid) .coupon-card{flex-direction:row;align-items:stretch;gap:0;padding:0}
  .coupon-list:not(.coupon-grid) .coupon-card__stub{flex:none;width:148px;flex-direction:column;justify-content:center;
    text-align:center;gap:10px;padding:18px 12px 18px 16px;background:linear-gradient(165deg,var(--green-soft),#F3F9FF);
    border-right:2px dashed var(--line)}
  .coupon-list:not(.coupon-grid) .coupon-card__discount{flex-direction:column;align-items:center;gap:2px}
  .coupon-list:not(.coupon-grid) .coupon-card__discount b{font-size:1.9rem}
  .coupon-list:not(.coupon-grid) .coupon-card__body{padding:18px 18px 16px;justify-content:center}
  .coupon-list:not(.coupon-grid) .coupon-card__action{flex:none;width:190px;margin:0;padding:18px 16px;
    justify-content:center;border-top:0;border-left:1px solid var(--line);background:#FCFEFF}
  .coupon-list:not(.coupon-grid) .coupon-card__action::before,
  .coupon-list:not(.coupon-grid) .coupon-card__action::after{display:none}
  /* punch holes on the stub perforation line */
  .coupon-list:not(.coupon-grid) .coupon-card__stub::before,
  .coupon-list:not(.coupon-grid) .coupon-card__stub::after{content:"";position:absolute;left:142px;width:12px;
    height:12px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);z-index:1}
  .coupon-list:not(.coupon-grid) .coupon-card__stub::before{top:-7px}
  .coupon-list:not(.coupon-grid) .coupon-card__stub::after{bottom:-7px}
  .coupon-list:not(.coupon-grid) .coupon-card.is-expired .coupon-card__stub{
    background:linear-gradient(165deg,#EEF2F6,#F6F8FB)}
}

/* ============================================================
   Today's Top Coupons — spotlight carousel + brand highlights
   ============================================================ */
.top-coupons{background:linear-gradient(180deg,#F0F7FF 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.top-coupons__head{align-items:center}
.tc-nav{display:flex;gap:8px}
.tc-nav__btn{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;transition:all .15s ease;box-shadow:var(--shadow-sm)}
.tc-nav__btn:hover:not(:disabled){background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.tc-nav__btn:disabled{opacity:.35;cursor:default}

.tc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 14px;margin:0 -4px;
  scroll-padding-inline:4px;scrollbar-width:none}
.tc-track::-webkit-scrollbar{display:none}
.tc-track:focus-visible{outline:3px solid rgba(28,126,227,.4);outline-offset:2px;border-radius:12px}

.tc-card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 20px 18px;
  box-shadow:var(--shadow-sm);color:inherit;overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.tc-card::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--green),var(--coral));opacity:0;transition:opacity .15s ease}
.tc-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow);border-color:#BFDCF8}
.tc-card:hover::after{opacity:1}
.tc-card__flag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:.35em;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  background:var(--coral-soft);color:var(--coral);padding:.35em .65em;border-radius:999px}
.tc-card__flag--verified{background:var(--green-soft);color:var(--green-dark)}
.tc-card__logo .brand-logo{width:64px;height:64px;border-radius:14px}
.tc-card__offer{font-size:1.04rem;font-weight:800;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tc-card__brand{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tc-card__foot{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:2px dashed var(--line)}
.tc-card__value{font-size:.85rem;font-weight:900;color:var(--green-dark);background:var(--green-soft);
  padding:.35em .7em;border-radius:8px;white-space:nowrap}
.tc-card__cta{display:inline-flex;align-items:center;gap:.2em;font-size:.88rem;font-weight:800;color:var(--coral)}

/* Brand highlight tiles (static cards under the carousel) */
.brand-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:10px}
.brand-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:18px 12px 44px;box-shadow:var(--shadow-sm);color:inherit;
  overflow:hidden;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.brand-tile:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow);border-color:#BFDCF8}
.brand-tile__logo .brand-logo{width:52px;height:52px;border-radius:12px}
.brand-tile__name{font-size:.86rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.brand-tile__ribbon{position:absolute;left:0;right:0;bottom:0;padding:.5em;text-align:center;
  font-size:.78rem;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(120deg,var(--green-dark),var(--green))}
.brand-tile:hover .brand-tile__ribbon{background:linear-gradient(120deg,var(--coral),#9F67F5)}

/* Trending searches row */
.trend-row{margin:22px 0 0;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.trend-row__label{font-weight:800;color:var(--ink)}
.trend-row a{color:var(--green-dark);font-weight:600}
.trend-row span{color:var(--muted-2)}

/* ---------- Store grid pagination note ---------- */
.store-page-note{text-align:center;color:var(--muted);font-size:.88rem;margin:24px 0 0}
.store-page-note + .pagination{margin-top:12px}

/* ============================================================
   Popular Stores band (site-wide, before the footer)
   ============================================================ */
.popular-stores{background:var(--bg-2);border-top:1px solid var(--line);padding-block:40px 44px;margin-top:40px}
.popular-stores h2{text-align:center;margin-bottom:22px}
.popular-stores__list{list-style:none;margin:0;padding:26px 30px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px 22px}
.popular-stores__list a{color:var(--muted);font-size:.88rem;font-weight:600;display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .12s ease}
.popular-stores__list a:hover{color:var(--green-dark);text-decoration:none}
.popular-stores + .site-footer{margin-top:0}

/* ---------- Reveal modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,35,59,.55);display:none;align-items:center;justify-content:center;
  z-index:120;padding:20px}
.modal-backdrop.is-open{display:flex}
.modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:28px;box-shadow:0 24px 60px rgba(16,35,59,.3);
  text-align:center;position:relative;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:8px;background:var(--bg-2);
  cursor:pointer;font-size:1.1rem;color:var(--muted)}
.modal__close:hover{background:var(--coral-soft);color:var(--coral)}
.modal__brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px;font-weight:700}
.modal__title{font-size:1.05rem;color:var(--muted);font-weight:600;margin-bottom:14px}
.code-box{display:flex;align-items:stretch;gap:0;border:2px dashed var(--green);border-radius:12px;overflow:hidden;margin-bottom:14px}
.code-box code{flex:1;font-family:var(--mono);font-size:1.3rem;font-weight:700;letter-spacing:.12em;padding:.7em;
  background:var(--green-soft);color:var(--ink);display:flex;align-items:center;justify-content:center}
.code-box button{border:0;background:var(--green);color:#fff;font-weight:700;padding:0 1.1em;cursor:pointer}
.code-box button:hover{background:var(--green-dark)}
.copied-msg{color:var(--green-dark);font-weight:700;font-size:.9rem;min-height:1.2em}
.modal .btn{margin-top:6px}
.modal__hint{font-size:.84rem;color:var(--muted);margin-top:12px}

/* ---------- Filters / toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:20px}
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.filter-tabs a{padding:.5em .9em;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-weight:600;font-size:.88rem}
.filter-tabs a.is-active,.filter-tabs a:hover{background:var(--ink);color:#fff;border-color:var(--ink);text-decoration:none}
.sort-select{padding:.55em .8em;border-radius:9px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink)}

/* ---------- Store header ---------- */
.store-head{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:24px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.store-head__info{flex:1;min-width:240px}
.store-head__info h1{margin:0 0 6px}
.store-head__meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:10px}
.store-head__meta b{color:var(--ink)}
.store-head__visit{display:flex;flex-direction:column;gap:8px;align-items:stretch}

/* ---------- Layout helpers ---------- */
.layout-2col{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}
.card h3{margin-top:0}
.aside-card + .aside-card{margin-top:18px}
.tips-list{margin:0;padding-left:1.1em;color:var(--muted)}
.tips-list li{margin-bottom:.5em}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.7em 0 0;color:var(--muted)}

/* ---------- Category chips ---------- */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.chip-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease;color:inherit;display:block}
.chip-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.chip-card h3{margin:0 0 4px}
.chip-card p{margin:0;color:var(--muted);font-size:.85rem}
.chip-card .pill{margin-top:10px}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.step__num{counter-increment:step;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--green-soft);color:var(--green-dark);font-weight:800;margin-bottom:12px}
.step__num::before{content:counter(step)}
.step h3{margin:0 0 6px}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- Trust band ---------- */
.trust-band{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.trust-item{display:flex;gap:12px;align-items:flex-start}
.trust-item svg{color:var(--green);flex:none}
.trust-item b{display:block}
.trust-item span{color:var(--muted);font-size:.88rem}

/* ---------- Newsletter band ---------- */
.news-band{background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;border-radius:18px;padding:32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.news-band h2{color:#fff;margin:0 0 6px}
.news-band p{color:#fff;margin:0}
.news-band form{display:flex;gap:10px;flex-wrap:wrap;min-width:280px}
.news-band input{padding:.85em 1em;border-radius:11px;border:2px solid #fff;font:inherit;min-width:220px;color:var(--ink);background:#fff}
.news-band input::placeholder{color:var(--muted)}
.news-band .consent{color:#fff;max-width:430px;font-size:.85rem}
.news-band .btn-primary{background:#fff;color:#0B4F93;box-shadow:none}
.news-band .btn-primary:hover{background:var(--green-soft);color:#083E73}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:56px 20px;color:var(--muted)}
.empty-state svg{color:var(--muted-2);margin-bottom:14px}
.empty-state h2{color:var(--ink)}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pagination a,.pagination span{padding:.55em .85em;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-weight:600;min-width:40px;text-align:center}
.pagination .is-current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination a:hover{border-color:var(--green);text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-block:48px 32px}
.footer-brand p{color:var(--muted);font-size:.9rem;max-width:34ch}
.footer-news{display:flex;flex-direction:column;gap:10px;max-width:340px;margin-top:14px}
.footer-news input{padding:.75em 1em;border-radius:10px;border:1.5px solid var(--line);font:inherit}
.consent{display:flex;gap:8px;font-size:.8rem;color:var(--muted);align-items:flex-start;max-width:100%;min-width:0}
.consent input{margin-top:3px;flex:none}
.consent span{min-width:0}
.footer-col h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--ink);font-size:.92rem}
.footer-bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-direction:column;gap:8px}
.affiliate-note{font-size:.82rem;color:var(--muted);margin:0;max-width:80ch}
.copyright{font-size:.84rem;color:var(--muted);margin:0}

/* ---------- Utilities ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-muted{color:var(--muted)}
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.related-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.related-list a{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);font-weight:600;font-size:.9rem}
.related-list a:hover{border-color:var(--green);text-decoration:none}

/* ---------- Editorial blog ---------- */
.blog-hero{padding:64px 0;background:linear-gradient(135deg,#e8f4ff,#f4efff);border-bottom:1px solid var(--line)}
.blog-hero h1{max-width:16ch;font-size:clamp(2.2rem,5vw,4rem)}
.blog-hero p{max-width:58ch;font-size:1.12rem;color:var(--muted);margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card__image{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.blog-card:hover .blog-card__image img{transform:scale(1.025)}
.blog-card__body{padding:20px}
.blog-card__body h2{font-size:1.28rem;margin:.55rem 0}
.blog-card__body h3{margin:.55rem 0 0}
.blog-card__body h2 a,.blog-card__body h3 a{color:var(--ink)}
.blog-card__body p{color:var(--muted);font-size:.94rem}
.blog-meta{display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.blog-card__read{font-weight:800}
.home-blog{background:#fff;border-block:1px solid var(--line)}
.blog-card--home .blog-card__body{display:flex;flex-direction:column;align-items:flex-start;min-height:156px}
.blog-card--home .blog-card__body h3{font-size:1.12rem;margin:0 0 18px}
.blog-card--home .blog-card__body .btn{margin-top:auto}
.article{padding-top:52px}
.article__header{max-width:930px;text-align:center}
.article__header h1{font-size:clamp(2.25rem,5vw,4.4rem);letter-spacing:-.045em}
.article__dek{font-size:1.18rem;color:var(--muted);max-width:720px;margin:18px auto}
.article__byline{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
.article__hero{max-width:1180px;margin-top:38px}
.article__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.article__layout{display:grid;grid-template-columns:230px minmax(0,720px);justify-content:center;gap:56px;align-items:start;padding-top:50px}
.article__toc{position:sticky;top:100px;border-left:3px solid var(--line);padding-left:18px;font-size:.86rem}
.article__toc ol{padding-left:18px;margin:12px 0 0}
.article__toc li{margin:.55rem 0}
.article__content{font-size:1.06rem;color:#193d63}
.article__content section{scroll-margin-top:100px}
.article__content h2{font-size:1.85rem;margin:2.2em 0 .65em;color:var(--ink)}
.article__content h3{font-size:1.2rem;margin:1.2em 0 .55em}
.article__content p{margin:0 0 1.25em}
.article__lead:first-child::first-letter{float:left;font-size:4.2rem;line-height:.8;font-weight:800;color:var(--green-dark);padding:.08em .1em 0 0}
.article__content ul{background:#f0f7ff;border-radius:14px;padding:18px 22px 18px 42px;margin:1.5rem 0}
.article__content li{margin:.5rem 0}
.article__conclusion{background:linear-gradient(135deg,#eaf4ff,#f3edff);border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:48px}
.article__conclusion h2{margin:.2em 0 .55em}
.article__conclusion p{margin:0}
.article-related{margin-top:52px;background:#fff;border-top:1px solid var(--line)}
.blog-grid--related .blog-card__body{padding:16px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ============ Auth / forms ============ */
.auth-wrap{display:flex;justify-content:center}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)}
.auth-card--wide{max-width:620px}
.auth-card h1{margin-top:0}
.auth-card label,.form-field label{display:block;font-weight:600;margin:14px 0 0;font-size:.92rem}
.auth-card input,.auth-card select,.auth-card textarea,
.form-field input,.form-field select,.form-field textarea,
.data-form input,.data-form select,.data-form textarea{
  width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;color:var(--ink);background:#fff}
.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus,
.data-form input:focus,.data-form textarea:focus,.data-form select:focus{outline:2px solid var(--green);border-color:var(--green)}
.auth-card .btn{margin-top:18px}
.auth-alt{margin:12px 0 0;font-size:.9rem;text-align:center}
.consent{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin-top:16px}
.consent input{width:auto;margin-top:3px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* ============ Dashboard ============ */
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:22px}
.dash-tab{padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.dash-tab.is-active{color:var(--ink);border-color:var(--green)}
.dash-panel{margin-bottom:36px}

/* ============ Data tables ============ */
.data-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.92rem}
.data-table th,.data-table td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table th{background:var(--bg);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.data-table tr:last-child td{border-bottom:0}
.data-table code{background:var(--bg);padding:2px 6px;border-radius:6px}
.pill--pending{background:#FEF3C7;color:#92400E}
.pill--approved,.pill--active{background:#D1FAE5;color:#065F46}
.pill--rejected,.pill--expired,.pill--archived{background:#FEE2E2;color:#991B1B}
.pill--new{background:#DBEAFE;color:#1E40AF}
.pill--read{background:#E0E7FF;color:#3730A3}
.pill--replied{background:#D1FAE5;color:#065F46}

/* ============ Admin ============ */
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:var(--bg)}
.admin-side{background:var(--ink);color:#cdd7e5;padding:20px 0;position:sticky;top:0;height:100vh;overflow:auto}
.admin-side .brand{color:#fff;font-weight:800;font-size:1.15rem;padding:0 20px 16px;display:block}
.admin-side a.nav-link{display:block;padding:10px 20px;color:#cdd7e5;font-size:.93rem}
.admin-side a.nav-link:hover,.admin-side a.nav-link.is-active{background:rgba(255,255,255,.08);color:#fff}
.admin-main{padding:26px 30px;max-width:1150px;min-width:0;overflow-x:auto}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:26px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-card b{display:block;font-size:1.9rem;line-height:1;color:var(--ink)}
.stat-card span{color:var(--muted);font-size:.85rem}
.data-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:720px}
.data-form input[type="file"]{padding:8px;background:var(--bg)}
.data-form input[type="file"]::file-selector-button{border:0;border-radius:8px;background:var(--ink);color:#fff;padding:8px 12px;margin-right:10px;font:inherit;font-weight:700;cursor:pointer}
.store-logo-preview{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:.82rem;font-weight:600}
.admin-actions{display:flex;gap:8px}
.btn-sm{padding:6px 11px;font-size:.83rem}
.btn-danger{background:var(--coral);color:#fff;border:0}
@media(max-width:820px){.admin-shell{grid-template-columns:1fr}.admin-side{position:static;height:auto}}

/* Coupon save button */
.coupon-card__stub{position:relative}
.coupon-card__save{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.14);border:0;color:#fff;
  width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s,background .15s}
.coupon-card__save:hover{opacity:1;background:rgba(255,255,255,.28)}
.coupon-card__save.is-saved{opacity:1;color:var(--amber,#F5A623)}
.coupon-card__save:focus-visible{outline:2px solid #fff;outline-offset:2px}