/* ============================================================
   StoreWA — App Stylesheet v2
   Includes: Dark Mode, PWA polish, all new sections
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --primary:     #059669;
  --primary-dark:#047857;
  --secondary:   #f59e0b;
  --accent:      #34d399;
  --danger:      #ef4444;
  --bg:          #fdfbf7;
  --surface:     #ffffff;
  --border:      #e5e7eb;
  --text:        #111827;
  --muted:       #6b7280;
  --radius:      0.75rem;
  --shadow:      0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
}

/* ── Dark mode ────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #0f172a;
  --surface:  #1e293b;
  --border:   #334155;
  --text:     #f1f5f9;
  --muted:    #94a3b8;
}
[data-theme="dark"] body { background:var(--bg); color:var(--text); }
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .nav,
[data-theme="dark"] .dash-header { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .form-control { background:#0f172a; color:var(--text); border-color:var(--border); }
[data-theme="dark"] .modal { background:var(--surface); }
[data-theme="dark"] th { background:#0f172a; }
[data-theme="dark"] tr:hover td { background:#243146; }
[data-theme="dark"] .tabs { border-color:var(--border); }
[data-theme="dark"] .upload-area { background:var(--surface); }
[data-theme="dark"] select.form-control { background:#0f172a; }

body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:background .2s,color .2s; }

/* ── Loading ──────────────────────────────────────────────── */
.loading-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.spinner { width:44px; height:44px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
.page { min-height:100vh; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; max-width:1200px; margin:0 auto; }
.logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--primary); font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:800; }
.logo svg { width:32px; height:32px; }
.nav-links { display:flex; gap:.75rem; align-items:center; }

/* ── Dark mode toggle button ─────────────────────────────── */
.theme-btn { background:none; border:1.5px solid var(--border); border-radius:9999px; padding:.35rem .75rem; cursor:pointer; font-size:.8rem; color:var(--muted); transition:all .15s; }
.theme-btn:hover { color:var(--text); border-color:var(--text); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:9999px; font-size:.875rem; font-weight:600; cursor:pointer; border:none; transition:all .15s; text-decoration:none; white-space:nowrap; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary   { background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--secondary); color:#111; }
.btn-outline   { background:var(--surface); color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-ghost     { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--border); color:var(--text); }
.btn-danger    { background:var(--danger); color:#fff; }
.btn-sm        { padding:.375rem .875rem; font-size:.8rem; }
.btn-lg        { padding:.875rem 2rem; font-size:1rem; }
.btn-block     { width:100%; }

/* ── Cards ────────────────────────────────────────────────── */
.card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:1.5rem; box-shadow:var(--shadow); }
.card-title { font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:.25rem; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.375rem; color:var(--text); }
.form-control { width:100%; padding:.625rem .875rem; border:1.5px solid var(--border); border-radius:.5rem; font-size:.9rem; background:var(--surface); color:var(--text); transition:border .15s; outline:none; font-family:inherit; }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(5,150,105,.12); }
textarea.form-control { min-height:80px; resize:vertical; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.5rem; background-color:var(--surface); }
.form-hint  { font-size:.75rem; color:var(--muted); margin-top:.25rem; }
.form-error { font-size:.75rem; color:var(--danger); margin-top:.25rem; }

/* ── File upload ─────────────────────────────────────────── */
.upload-area { border:2px dashed var(--border); border-radius:var(--radius); padding:1.25rem; text-align:center; cursor:pointer; transition:all .15s; background:var(--surface); }
.upload-area:hover,.upload-area.dragover { border-color:var(--primary); background:rgba(5,150,105,.04); }
.upload-preview { width:100%; max-height:160px; object-fit:cover; border-radius:.5rem; margin-top:.75rem; }
.upload-field-wrap { position:relative; }
.upload-tabs { display:flex; gap:.5rem; margin-bottom:.5rem; }
.upload-tab { padding:.3rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); transition:all .15s; }
.upload-tab.active { border-color:var(--primary); color:var(--primary); background:rgba(5,150,105,.07); }

/* ── Grid ─────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:768px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
@media(max-width:1024px) { .grid-3 { grid-template-columns:repeat(2,1fr); } .grid-4 { grid-template-columns:repeat(2,1fr); } }

/* ── Badges ───────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:9999px; font-size:.72rem; font-weight:600; }
.badge-pending    { background:#fef3c7; color:#92400e; }
.badge-confirmed  { background:#dbeafe; color:#1e40af; }
.badge-processing { background:#ede9fe; color:#5b21b6; }
.badge-delivered,.badge-completed { background:#d1fae5; color:#065f46; }
.badge-cancelled  { background:#fee2e2; color:#991b1b; }
.badge-paid       { background:#d1fae5; color:#065f46; }
.badge-no_show    { background:#f3f4f6; color:#6b7280; }
.badge-active     { background:#d1fae5; color:#065f46; }
.badge-inactive   { background:#f3f4f6; color:#6b7280; }
.badge-free       { background:#dbeafe; color:#1e40af; }
.badge-pro        { background:#fef3c7; color:#92400e; }
.badge-enterprise { background:#ede9fe; color:#5b21b6; }

/* ── Toast ────────────────────────────────────────────────── */
#toast-container { position:fixed; top:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast { padding:.875rem 1.25rem; border-radius:.75rem; color:#fff; font-size:.875rem; font-weight:500; box-shadow:var(--shadow-lg); animation:slideIn .2s ease; max-width:340px; }
.toast-success { background:#059669; }
.toast-error   { background:#ef4444; }
.toast-info    { background:#3b82f6; }
@keyframes slideIn { from { transform:translateX(120%); opacity:0; } to { transform:none; opacity:1; } }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; }
.modal { background:var(--surface); border-radius:1rem; width:100%; max-width:540px; padding:1.75rem; box-shadow:var(--shadow-lg); color:var(--text); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.modal-title { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700; }
.modal-close { background:none; border:none; cursor:pointer; padding:.25rem; color:var(--muted); font-size:1.25rem; line-height:1; }

/* ── Table ────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
th { text-align:left; padding:.75rem 1rem; font-weight:600; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--border); background:var(--bg); }
td { padding:.875rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#f9fafb; }

/* ── Stat Card ────────────────────────────────────────────── */
.stat-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:1.25rem 1.5rem; }
.stat-icon { width:40px; height:40px; border-radius:.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; font-size:1.25rem; }
.stat-value { font-size:1.75rem; font-weight:800; font-family:'Outfit',sans-serif; color:var(--text); }
.stat-label { font-size:.8rem; color:var(--muted); font-weight:500; margin-top:.1rem; }

/* ── Dashboard ────────────────────────────────────────────── */
.dash-header { background:var(--surface); border-bottom:1px solid var(--border); padding:1rem 0; margin-bottom:2rem; }
.dash-header-inner { display:flex; align-items:center; justify-content:space-between; }
.section-title { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700; margin-bottom:1.25rem; }
.action-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:1.5rem; cursor:pointer; transition:all .15s; text-decoration:none; display:block; color:inherit; }
.action-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.action-card-icon { width:48px; height:48px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; }
.action-card h3 { font-weight:600; margin-bottom:.25rem; }
.action-card p  { font-size:.825rem; color:var(--muted); }

/* ── Low stock alert ──────────────────────────────────────── */
.low-stock-alert { background:#fef3c7; border:1px solid #fcd34d; border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.25rem; font-size:.875rem; color:#92400e; }

/* ── QR code card ─────────────────────────────────────────── */
.qr-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; }
.qr-card canvas,.qr-card img { border-radius:.5rem; }

/* ── Landing ──────────────────────────────────────────────── */
.hero { background:linear-gradient(135deg,#d5f4e6 0%,#fef3c7 100%); padding:5rem 0; }
.hero h1 { font-family:'Outfit',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.15; margin-bottom:1.25rem; }
.hero p  { font-size:1.1rem; color:#374151; line-height:1.7; margin-bottom:2rem; max-width:500px; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-img { border-radius:1.5rem; box-shadow:var(--shadow-lg); width:100%; max-height:420px; object-fit:cover; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media(max-width:768px) { .hero-grid { grid-template-columns:1fr; } .hero-img { display:none; } }
.section { padding:4rem 0; }
.section-center { text-align:center; margin-bottom:3rem; }
.section-center h2 { font-family:'Outfit',sans-serif; font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; margin-bottom:.75rem; }
.section-center p  { color:var(--muted); font-size:1.05rem; }
.feature-card { padding:1.75rem; border-radius:1rem; border:1px solid var(--border); background:var(--surface); transition:box-shadow .2s; }
.feature-card:hover { box-shadow:var(--shadow-md); }
.feature-icon { width:60px; height:60px; border-radius:.875rem; background:rgba(5,150,105,.1); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; }
.pricing-card { border-radius:1.25rem; padding:2rem; border:2px solid var(--border); background:var(--surface); position:relative; }
.pricing-card.popular { border-color:var(--primary); box-shadow:0 0 0 4px rgba(5,150,105,.1); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--secondary); color:#111; padding:.2rem .875rem; border-radius:9999px; font-size:.75rem; font-weight:700; }
.price-amount { font-size:2.5rem; font-weight:800; font-family:'Outfit',sans-serif; color:var(--primary); }
.price-period { font-size:.9rem; color:var(--muted); }
.feature-list { list-style:none; margin:1.25rem 0; display:flex; flex-direction:column; gap:.625rem; }
.feature-list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.875rem; }
.feature-list li::before { content:'✓'; color:var(--primary); font-weight:700; flex-shrink:0; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
@media(max-width:640px) { .steps-grid { grid-template-columns:1fr; gap:1.5rem; } }
.step-num { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; margin:0 auto 1rem; color:#fff; }
.cta-section { background:linear-gradient(135deg,#d5f4e6 0%,#fef3c7 100%); padding:4rem 0; text-align:center; }
.cta-section h2 { font-family:'Outfit',sans-serif; font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:1rem; }
footer { background:#111827; color:#9ca3af; padding:3rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer-brand p { font-size:.85rem; line-height:1.6; margin:.75rem 0 1rem; }
.footer-col h4 { color:#f9fafb; font-weight:600; margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul a { color:#9ca3af; text-decoration:none; font-size:.85rem; transition:color .15s; }
.footer-col ul a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #374151; padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.8rem; }

/* ── Auth ─────────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:768px) { .auth-page { grid-template-columns:1fr; } }
.auth-form-side { display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--surface); }
.auth-form-inner { width:100%; max-width:400px; }
.auth-visual { background:linear-gradient(135deg,#d5f4e6 0%,#fef3c7 100%); display:flex; align-items:center; justify-content:center; padding:3rem; }
@media(max-width:768px) { .auth-visual { display:none; } }

/* ── Products ─────────────────────────────────────────────── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.product-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:box-shadow .15s; }
.product-card:hover { box-shadow:var(--shadow-md); }
.product-img { width:100%; height:180px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:2rem; overflow:hidden; position:relative; }
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:1rem; }
.product-name { font-weight:600; margin-bottom:.25rem; }
.product-cat  { font-size:.75rem; color:var(--muted); margin-bottom:.5rem; }
.product-price { display:flex; align-items:center; gap:.5rem; }
.price-sale    { font-weight:700; color:var(--primary); font-size:1.05rem; }
.price-mrp     { font-size:.8rem; color:var(--muted); text-decoration:line-through; }
.price-discount { font-size:.75rem; background:#d1fae5; color:#065f46; padding:.1rem .4rem; border-radius:.25rem; font-weight:600; }
.product-actions { display:flex; gap:.5rem; margin-top:.75rem; }
.product-search { display:flex; gap:.75rem; margin-bottom:1.25rem; }
.product-search .form-control { flex:1; }

/* ── Gallery grid ─────────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.5rem; margin-top:.5rem; }
.gallery-item { position:relative; aspect-ratio:1; border-radius:.5rem; overflow:hidden; border:1px solid var(--border); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item-remove { position:absolute; top:.25rem; right:.25rem; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:20px; height:20px; cursor:pointer; font-size:.7rem; display:flex; align-items:center; justify-content:center; }
.gallery-add { border:2px dashed var(--border); border-radius:.5rem; aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); font-size:1.5rem; transition:all .15s; }
.gallery-add:hover { border-color:var(--primary); color:var(--primary); }

/* ── Business hours schedule ──────────────────────────────── */
.hours-row { display:flex; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--border); }
.hours-row:last-child { border-bottom:none; }
.hours-day { width:80px; font-size:.875rem; font-weight:500; }
.hours-times { display:flex; align-items:center; gap:.5rem; flex:1; }
.hours-times input[type="time"] { padding:.35rem .6rem; border:1.5px solid var(--border); border-radius:.5rem; font-size:.8rem; background:var(--surface); color:var(--text); }

/* ── Social links ─────────────────────────────────────────── */
.social-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.social-input-wrap { display:flex; align-items:center; gap:.5rem; }
.social-icon { font-size:1.25rem; width:32px; text-align:center; }

/* ── Customer site templates ──────────────────────────────── */
.customer-page { min-height:100vh; background:var(--bg); }
.biz-hero { position:relative; height:260px; overflow:hidden; }
.biz-hero img { width:100%; height:100%; object-fit:cover; }
.biz-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.65)); }
.biz-hero-text { position:absolute; bottom:1.5rem; left:1.5rem; color:#fff; }
.biz-hero-text h1 { font-family:'Outfit',sans-serif; font-size:1.75rem; font-weight:800; }
.biz-logo { width:80px; height:80px; border-radius:1rem; border:3px solid #fff; background:#f3f4f6; overflow:hidden; position:absolute; top:-40px; left:1.5rem; box-shadow:var(--shadow-md); flex-shrink:0; }
.biz-logo img { width:100%; height:100%; object-fit:cover; }
.cart-fab { position:fixed; bottom:1.5rem; right:1.5rem; z-index:100; }
.cart-count { position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; width:20px; height:20px; border-radius:50%; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.delivery-calc { background:#f0fdf4; border:1px solid #a7f3d0; border-radius:var(--radius); padding:1rem; margin:.75rem 0; font-size:.875rem; }
.template-section { padding:2.5rem 0; }
.template-section h2 { font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:700; margin-bottom:1.25rem; }
/* Doctor template */
.service-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:1.25rem; cursor:pointer; transition:all .15s; }
.service-card:hover { box-shadow:var(--shadow-md); border-color:var(--primary); }
/* Retail */
.retail-banner { width:100%; border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem; }
.retail-banner img { width:100%; max-height:280px; object-fit:cover; }
/* Restaurant */
.menu-section { margin-bottom:2rem; }
.menu-section h3 { font-weight:700; font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--border); }
.menu-item { display:flex; justify-content:space-between; align-items:center; padding:.875rem 0; border-bottom:1px solid var(--border); gap:1rem; }
.menu-item:last-child { border-bottom:none; }
.menu-item-img { width:72px; height:72px; border-radius:.5rem; object-fit:cover; flex-shrink:0; }
.menu-item-info { flex:1; }
.menu-item-name { font-weight:600; margin-bottom:.2rem; }
.menu-item-desc { font-size:.8rem; color:var(--muted); }
.menu-item-price { font-weight:700; color:var(--primary); white-space:nowrap; }
/* Gallery carousel */
.gallery-carousel { display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:thin; }
.gallery-carousel img { height:160px; border-radius:.75rem; object-fit:cover; flex-shrink:0; }
/* Social bar */
.social-bar { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }
.social-link { display:inline-flex; align-items:center; gap:.375rem; padding:.35rem .875rem; border-radius:9999px; font-size:.8rem; font-weight:600; text-decoration:none; background:var(--border); color:var(--text); transition:all .15s; }
.social-link:hover { opacity:.8; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display:flex; gap:.5rem; align-items:center; margin-top:1.5rem; justify-content:center; }
.page-btn { padding:.4rem .8rem; border-radius:.5rem; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-size:.85rem; font-weight:500; transition:all .15s; color:var(--text); }
.page-btn:hover { border-color:var(--primary); color:var(--primary); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Toggle ───────────────────────────────────────────────── */
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:9999px; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ── Misc ─────────────────────────────────────────────────── */
.flex { display:flex; } .flex-center { display:flex; align-items:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-1{gap:.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.text-muted{color:var(--muted)} .text-small{font-size:.8rem} .text-center{text-align:center}
.fw-bold{font-weight:700} .w-full{width:100%}
.divider{height:1px;background:var(--border);margin:1rem 0}
hr.divider{border:none;border-top:1px solid var(--border)}
.alert{padding:.875rem 1.125rem;border-radius:.625rem;margin-bottom:1rem;font-size:.875rem}
.alert-error  {background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.alert-info   {background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.text-primary{color:var(--primary)}
a{color:var(--primary)}
.biz-website-card{background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius);padding:1.5rem;color:#fff}
.biz-website-card .url{background:rgba(255,255,255,.15);border-radius:.5rem;padding:.75rem;font-family:monospace;font-size:.85rem;word-break:break-all;margin:.75rem 0}
.whatsapp-btn{background:#25D366;color:#fff}
.whatsapp-btn:hover{background:#128C7E}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--muted)}
.empty-state-icon{font-size:3rem;margin-bottom:1rem}
.empty-state h3{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.tabs{display:flex;border-bottom:2px solid var(--border);gap:0;margin-bottom:1.5rem;overflow-x:auto}
.tab-btn{padding:.625rem 1.25rem;border:none;background:none;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-btn:hover{color:var(--text)}

/* ── v3 Feature Styles ──────────────────────────────────────── */
.tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.tab-btn { padding:.45rem 1rem; border-radius:.5rem; border:1.5px solid var(--border); background:var(--surface); font-size:.875rem; cursor:pointer; transition:all .15s; }
.tab-btn.active, .tab-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(5,150,105,.06); }

.variant-btn:hover { border-color:var(--primary) !important; background:rgba(5,150,105,.06) !important; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
table thead tr { background:var(--surface); }
table th { padding:.75rem 1rem; text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; border-bottom:2px solid var(--border); }
table td { padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
table tr:hover td { background:var(--bg); }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:640px) { .grid-3 { grid-template-columns:1fr; } }

.alert-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; padding:.75rem 1rem; border-radius:.5rem; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; padding:.75rem 1rem; border-radius:.5rem; }

/* tracking timeline */
.tracking-timeline { position:relative; padding-left:2.5rem; }

/* verified badge */
.biz-name-verified { display:inline-flex; align-items:center; gap:.4rem; }

/* reservation widget */
#reservation-form .form-group { margin-bottom:1rem; }

/* coupon widget */
#coupon-wrap input { text-transform:uppercase; }
#coupon-msg { min-height:1.2em; }

/* stat cards grid fix */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:768px) { .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .grid-4 { grid-template-columns:1fr 1fr; } }

/* review stars */
#star-picker span { transition:opacity .15s; user-select:none; }
#star-picker span:hover, #star-picker span:hover ~ span { opacity:1 !important; }

.form-hint { font-size:.78rem; color:var(--muted); margin-top:.25rem; line-height:1.4; }

/* ── v4 Additions ─────────────────────────────────────────────────────── */

/* Slot picker */
.slots-grid { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
.slot-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: .4rem; padding: .3rem .7rem; font-size: .8rem; cursor: pointer; transition: all .12s; color: var(--text); }
.slot-btn:hover { border-color: var(--primary); color: var(--primary); }
.slot-btn.selected { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Ecommerce product card hover */
.product-card { transition: box-shadow .15s, transform .15s; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Link-in-bio theme */
.link-card { display: flex; align-items: center; gap: .875rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: .75rem; text-decoration: none; color: var(--text); font-weight: 600; transition: box-shadow .15s, border-color .15s; }
.link-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }

/* Website/bio hero */
.bio-hero { padding: 3.5rem 1.5rem; text-align: center; color: #fff; position: relative; overflow: hidden; }
.bio-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.12); }
.bio-hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }

/* Cart FAB animation */
.cart-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; animation: fabIn .2s ease-out; }
@keyframes fabIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cart-count { background: #fff; color: var(--primary); border-radius: 9999px; font-size: .7rem; font-weight: 800; padding: .1rem .4rem; margin-left: .35rem; }

/* Delivery provider cards in settings */
.provider-card { border: 1.5px solid var(--border); border-radius: .875rem; padding: 1rem; margin-bottom: .75rem; transition: border-color .15s; }
.provider-card.active { border-color: var(--primary); background: rgba(5,150,105,.04); }

/* Theme picker in settings */
.theme-pill { border: 2px solid var(--border); border-radius: .875rem; padding: .875rem .75rem; cursor: pointer; text-align: center; transition: all .15s; }
.theme-pill:hover { border-color: var(--primary); }
.theme-pill.selected { border-color: var(--primary); background: rgba(5,150,105,.07); }

/* Responsive: single column on mobile for auth page */
@media (max-width: 768px) {
  .auth-grid { grid-template-columns: 1fr !important; }
  .auth-right { display: none !important; }
  .bio-hero { padding: 2.5rem 1rem; }
}