/* =====================================================================
   Local Commerce OS - lightweight mobile-first stylesheet
   Palette: deep green #14532D | warm yellow #FACC15 | red #DC2626
            soft bg #F8FAFC | dark text #111827
   ===================================================================== */

:root{
  --green:#14532D; --green-600:#166534; --green-50:#ECFDF5;
  --yellow:#FACC15; --yellow-600:#EAB308;
  --red:#DC2626;
  --bg:#F8FAFC; --card:#FFFFFF; --text:#111827; --muted:#6B7280;
  --border:#E5E7EB; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green-600); text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.25}
h1{font-size:1.5rem} h2{font-size:1.25rem} h3{font-size:1.1rem}
p{margin:0 0 .75rem}
small,.muted{color:var(--muted)}

/* ---- Layout ---- */
.container{width:100%; max-width:1120px; margin:0 auto; padding:0 16px}
.container-narrow{max-width:520px}
.page{padding:20px 0 90px}                /* bottom pad for mobile nav */
.row{display:flex; flex-wrap:wrap; gap:16px}
.col{flex:1 1 0; min-width:0}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  /* Mobile shows information as a 2-column grid (denser, easier to scan). */
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid{gap:10px}
}
.mt{margin-top:16px}.mt2{margin-top:24px}.mb{margin-bottom:16px}
.text-center{text-align:center}.flex{display:flex;gap:10px;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wrap{flex-wrap:wrap}

/* ---- Top bar ---- */
.topbar{
  background:var(--green); color:#fff; position:sticky; top:0; z-index:40;
  box-shadow:var(--shadow);
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:1.1rem}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--yellow)}
.topbar a{color:#fff}
.topnav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.topnav a{padding:8px 12px; border-radius:10px; font-size:.95rem; opacity:.9}
.topnav a.active,.topnav a:hover{background:rgba(255,255,255,.15); opacity:1}

/* ---- Cards ---- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:16px;
}
.card.pad-0{padding:0; overflow:hidden}
.card h3{margin-bottom:.4rem}
.stat{padding:18px}
.stat .num{font-size:1.9rem; font-weight:800; color:var(--green); line-height:1.1}
.stat .lbl{color:var(--muted); font-size:.9rem; margin-top:4px}
.stat .ico{font-size:1.4rem}
.stat.accent{border-left:5px solid var(--yellow)}
.stat.green{border-left:5px solid var(--green)}
.stat.red{border-left:5px solid var(--red)}

/* ---- Buttons (big, touch friendly) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  font-size:1rem; font-weight:600; cursor:pointer; min-height:48px; line-height:1;
  transition:filter .15s, transform .05s; text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-block{display:flex; width:100%}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-yellow{background:var(--yellow); color:#111827}
.btn-yellow:hover{filter:brightness(1.03)}
.btn-red{background:var(--red); color:#fff}
.btn-wa{background:#25D366; color:#fff}
.btn-map{background:#1a73e8; color:#fff}
.btn-outline{background:#fff; color:var(--green); border-color:var(--green)}
.btn-ghost{background:#f1f5f9; color:var(--text)}
.btn-sm{min-height:38px; padding:8px 12px; font-size:.9rem}

/* ---- Forms ---- */
.form-group{margin-bottom:14px}
label{display:block; font-weight:600; margin-bottom:6px; font-size:.95rem}
.req{color:var(--red)}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=url],input[type=file],select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  font-size:1rem; background:#fff; color:var(--text); min-height:48px;
}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(22,101,52,.12);
}
.help{font-size:.82rem; color:var(--muted); margin-top:4px}
.checkbox{display:flex; align-items:flex-start; gap:10px}
.checkbox input{width:20px;height:20px;min-height:0;margin-top:2px}

/* ---- Tables (responsive) ---- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.94rem}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap}
th{background:#f8fafc; color:var(--muted); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em}
tbody tr:hover{background:#fafcff}

/* ---- Badges & pills ---- */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700}
.badge-green{background:var(--green-50); color:var(--green-600)}
.badge-yellow{background:#FEF9C3; color:#854D0E}
.badge-red{background:#FEE2E2; color:#991B1B}
.badge-gray{background:#F1F5F9; color:#475569}

/* ---- Alerts ---- */
.alert{padding:12px 14px; border-radius:12px; margin-bottom:14px; font-weight:500}
.alert-success{background:#DCFCE7; color:#166534; border:1px solid #86EFAC}
.alert-error{background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5}
.alert-info{background:#DBEAFE; color:#1E40AF; border:1px solid #93C5FD}

/* ---- Mobile bottom navigation ---- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff;
  border-top:1px solid var(--border); display:flex; height:64px;
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--muted); font-size:.72rem; font-weight:600;
}
.bottom-nav a .bi{font-size:1.35rem}
.bottom-nav a.active{color:var(--green)}
.bottom-nav a.scan{color:#fff}
.bottom-nav a.scan .circle{
  background:var(--yellow); color:#111827; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-top:-18px;
  box-shadow:var(--shadow); font-size:1.5rem;
}

/* ---- Landing / public mobile ---- */
.landing{max-width:520px; margin:0 auto}
.cover{width:100%; height:190px; object-fit:cover; background:#e2e8f0}
.logo-round{
  width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;
  margin-top:-46px; background:#fff; box-shadow:var(--shadow)
}
.offer-tag{
  display:inline-block; background:var(--red); color:#fff; font-weight:800;
  padding:6px 14px; border-radius:999px; font-size:1rem
}
.merchant-mini{
  display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--border);
  border-radius:12px; background:#fff; margin-bottom:10px
}
.merchant-mini img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#e2e8f0}
.ad-banner{
  border:1px dashed var(--yellow-600); background:#FFFBEB; border-radius:12px; padding:14px;
}

/* ---- Coupon ticket ---- */
.ticket{
  background:linear-gradient(135deg,var(--green),var(--green-600)); color:#fff;
  border-radius:16px; padding:22px; text-align:center; position:relative;
}
.ticket .code{
  font-size:1.7rem; font-weight:800; letter-spacing:2px; background:#fff; color:var(--green);
  display:inline-block; padding:10px 18px; border-radius:12px; margin-top:10px
}

/* ---- Auth ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--green),#0b3a1f)}
.auth-card{background:#fff; border-radius:18px; padding:28px; width:100%; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.auth-card .brand{color:var(--green); justify-content:center; font-size:1.3rem; margin-bottom:6px}

.divider{height:1px;background:var(--border);margin:16px 0}
.pill-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px}
.pill-tabs a{white-space:nowrap; padding:8px 16px; border-radius:999px; background:#fff;
  border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.9rem}
.pill-tabs a.active{background:var(--green); color:#fff; border-color:var(--green)}
.qr-box{text-align:center}
.qr-box img{margin:0 auto; border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff}
.footer{padding:24px 0; text-align:center; color:var(--muted); font-size:.85rem}
.hide-mobile{display:block}
@media(max-width:820px){.hide-mobile{display:none}}

/* ---- Show/hide password ---- */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:46px}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; min-height:0; padding:8px; cursor:pointer;
  color:var(--muted); display:flex; align-items:center; line-height:0;
}
.pw-toggle:hover{color:var(--text)}
.pw-toggle svg{width:20px; height:20px}

/* ---- Rich public footer ---- */
.site-footer{background:var(--green); color:#e5e7eb; margin-top:36px; padding:34px 0 22px}
.site-footer .brand{color:#fff; font-size:1.15rem}
.site-footer a{color:#e5e7eb; opacity:.9; display:block; padding:4px 0}
.site-footer a:hover{opacity:1; color:#fff}
.site-footer h4{color:#fff; font-size:.95rem; margin:0 0 8px; letter-spacing:.02em}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr; gap:20px}}
.foot-tag{color:var(--yellow); font-weight:700; margin:12px 0 4px; font-size:1.02rem}
.foot-sub{opacity:.8; font-size:.9rem; margin:0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18); margin-top:22px; padding-top:16px;
  font-size:.85rem; opacity:.85; text-align:center}

/* ---- Landing sections ---- */
.section{padding:40px 0}
.section-tinted{background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.eyebrow{color:var(--green-600); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:100%}
.step .n{width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:10px}
.feature{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.feature .fi{flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center; font-size:1.4rem}
.cta-band{background:linear-gradient(120deg,var(--yellow),#fde68a); border-radius:18px; padding:26px; text-align:center; color:#111827}
.cat-chip{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; background:#fff; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.9rem}
.cat-chip:hover{border-color:var(--green); color:var(--green-600)}

/* =====================================================================
   Mobile responsiveness layer — keep everything usable on small phones
   ===================================================================== */
html, body { max-width: 100%; overflow-x: clip; }  /* clip (not hidden) keeps position:sticky working */
code { word-break: break-all; }

@media (max-width: 640px){
  .container{ padding: 0 12px; }

  /* Any two-column .row/.col layout collapses to a single stacked column.
     (!important overrides the inline min-width/flex used across pages.)   */
  .row{ gap: 12px; }
  .row > .col, .col{ min-width: 0 !important; flex: 1 1 100% !important; }

  /* Tighter type + spacing on phones */
  h1{ font-size: 1.4rem; }
  h2{ font-size: 1.2rem; }
  .stat .num{ font-size: 1.6rem; }
  .section{ padding: 26px 0; }
  .card{ padding: 15px; }

  /* Top bar: allow the brand + nav to breathe / wrap */
  .topbar .container{ height: auto; min-height: 54px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; row-gap: 4px; }
  .brand{ font-size: 1rem; }
  .topnav{ width: 100%; justify-content: flex-start; }
  .topnav a{ padding: 6px 10px; font-size: .88rem; }

  /* Inline flex form rows (e.g. Counter) stack their controls full-width */
  form .flex.wrap > .form-group,
  form .flex.wrap > input,
  form .flex.wrap > select,
  form .flex.wrap > button{ flex: 1 1 100% !important; width: 100%; }

  /* Buttons grouped in a flex row wrap nicely and stay tappable */
  .flex-between{ gap: 8px; }
}

@media (max-width: 400px){
  .stat .num{ font-size: 1.45rem; }
  .btn{ padding: 12px 14px; }
}

/* ---- Cookie consent bar ---- */
.cookie-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60; margin:0 auto; max-width:660px;
  background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.16); padding:12px 14px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:.86rem;
}
.cookie-bar p{margin:0; flex:1 1 220px; color:var(--muted)}
.cookie-bar p a{color:var(--green-600); font-weight:600}
.cookie-bar[hidden]{display:none}

/* ---- Camera QR scanner overlay ---- */
.scan-overlay{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.9);
  display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px}
.scan-overlay.on{display:flex}
.scan-overlay video{width:100%; max-width:420px; aspect-ratio:1; object-fit:cover; border-radius:16px; background:#000}
.scan-overlay .scan-hint{color:#fff; margin:16px 0 4px; font-weight:600; text-align:center}
.scan-overlay .muted{color:#cbd5e1}

/* Sticky action bar (e.g. Scan / Redeem) above the bottom nav */
.action-bar{position:fixed; left:0; right:0; bottom:64px; z-index:45; background:var(--card);
  border-top:1px solid var(--border); box-shadow:0 -2px 10px rgba(0,0,0,.06); padding:10px 12px;
  display:flex; gap:10px}
.action-bar .btn{flex:1}
@media(min-width:821px){ .action-bar{position:static; bottom:auto; box-shadow:none; border:0; padding:0; margin-bottom:16px} }