/* GROW Platform — Design System v2 — Mobile-First PWA */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400;1,9..40,500&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── CSS Variables ───────────────────────────────────────────────────────────── */
:root {
  --leaf:        #4D7C1F; --leaf-dark:  #3A5E17; --leaf-light: #6B9E2F;
  --leaf-pale:   #EBF5D6; --mint:       #A8D58C; --bamboo:     #C4A464;
  --bamboo-dark: #A0834A; --bamboo-pale:#F7F0E4; --earth:      #7A5C3A;
  --bg:          #FAFAF7; --surface:    #FFFFFF;  --surface-2:  #F4F6F0;
  --border:      #E2E8D8; --border-2:   #CED6BE;
  --text:        #1E2518; --text-2:     #4A5240;  --text-muted: #7A8568; --text-inv: #FFFFFF;
  --success:     #2D7A22; --warning:    #B87D1A;  --error:      #C0392B; --info: #1A6B8A;
  --shadow-sm:   0 2px 8px rgba(30,37,24,.06);
  --shadow-md:   0 8px 24px rgba(30,37,24,.09);
  --shadow-lg:   0 16px 48px rgba(30,37,24,.12);
  --shadow-xl:   0 24px 80px rgba(30,37,24,.16);
  --r-sm:4px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --t-fast:150ms; --t-mid:280ms; --t-slow:500ms;
  --container:1140px;
  --nav-h:60px;
  --bottom-nav-h:64px;
  --section-gap:72px;
  /* Safe area for notches/home indicators */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

[data-theme="dark"] {
  --bg:#0E1409; --surface:#161D0E; --surface-2:#1E2914;
  --border:#2A3A1A; --border-2:#3A4E28;
  --text:#E8F0D8; --text-2:#B8C8A0; --text-muted:#7A9060; --text-inv:#0E1409;
  --leaf:#6BAF2F; --leaf-dark:#4D8020; --leaf-light:#8ED44F;
  --leaf-pale:#1A2B0A; --bamboo:#C4A464; --bamboo-pale:#1E1608;
  --shadow-sm:0 2px 8px rgba(0,0,0,.25); --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45); --shadow-xl:0 24px 80px rgba(0,0,0,.55);
}

/* ── Reset & Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;height:100%;}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--text);
  line-height:1.6; min-height:100%; overflow-x:hidden;
  transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
  /* Extra bottom padding for mobile bottom nav */
  padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Desktop: no bottom nav padding */
@media(min-width:769px){body{padding-bottom:0;}}

img,video{max-width:100%;height:auto;display:block;}
a{color:var(--leaf);text-decoration:none;}
a:hover{color:var(--leaf-dark);}
button,input,select,textarea{font-family:inherit;-webkit-appearance:none;border-radius:0;}
ul{list-style:none;}
/* Improve tap targets globally */
a,button,label,[role="button"]{min-height:44px;min-width:44px;}
button{cursor:pointer;}

/* ── Typography ──────────────────────────────────────────────────────────────── */
.display{font-family:var(--font-display);font-weight:400;line-height:1.15;}
h1,.h1{font-size:clamp(1.75rem,6vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;}
h2,.h2{font-size:clamp(1.3rem,4vw,2.2rem);font-weight:700;line-height:1.2;letter-spacing:-0.01em;}
h3,.h3{font-size:clamp(1rem,3vw,1.5rem);font-weight:600;line-height:1.3;}
h4,.h4{font-size:1.0625rem;font-weight:600;}
h5,.h5{font-size:1rem;font-weight:600;}
.text-muted{color:var(--text-muted);} .text-sm{font-size:0.875rem;} .text-xs{font-size:0.75rem;}
.text-lg{font-size:1.125rem;} .text-xl{font-size:1.25rem;} .text-center{text-align:center;}

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px;}
@media(min-width:640px){.container{padding:0 24px;}}
.section{padding:var(--section-gap) 0;}
.section-sm{padding:40px 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);}
.flex{display:flex;} .flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-1{gap:8px;} .gap-2{gap:16px;} .gap-3{gap:24px;} .gap-4{gap:32px;}

/* ── Navbar ──────────────────────────────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  padding-top:var(--safe-top);
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t-mid) var(--ease),background var(--t-mid) var(--ease);
}
[data-theme="dark"] .navbar{background:rgba(14,20,9,.92);}
.navbar.scrolled{box-shadow:var(--shadow-md);}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px;}
.navbar__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.125rem;color:var(--text);text-decoration:none;min-height:auto;}
.navbar__logo svg{width:28px;height:28px;}
.navbar__links{display:none;align-items:center;gap:2px;flex:1;justify-content:center;}
.navbar__links a{padding:6px 12px;border-radius:var(--r-pill);color:var(--text-2);font-weight:500;font-size:0.9rem;transition:background var(--t-fast),color var(--t-fast);min-height:auto;}
.navbar__links a:hover{background:var(--leaf-pale);color:var(--leaf-dark);}
.navbar__links a.active{color:var(--leaf);}
@media(min-width:960px){.navbar__links{display:flex;}}
.navbar__actions{display:flex;align-items:center;gap:8px;}

/* ── Bottom Nav (Mobile PWA) ──────────────────────────────────────────────────── */
.bottom-nav{
  display:flex;
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  height:var(--bottom-nav-h);
  padding-bottom:var(--safe-bottom);
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(30,37,24,.08);
}
@media(min-width:769px){.bottom-nav{display:none;}}
.bottom-nav__item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 4px;color:var(--text-muted);font-size:0.65rem;font-weight:600;
  text-decoration:none;letter-spacing:0.02em;min-height:auto;min-width:auto;
  transition:color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav__item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bottom-nav__item.active{color:var(--leaf);}
.bottom-nav__item.active svg{stroke:var(--leaf);}
.bottom-nav__item--cta{color:#fff !important;}
.bottom-nav__cta-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;padding:6px 4px;
}
.bottom-nav__cta{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--leaf-light),var(--leaf-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(77,124,31,.45);
  border:3px solid var(--surface);
  margin-top:-16px;
  min-height:auto;min-width:auto;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.bottom-nav__cta:hover,.bottom-nav__cta:active{transform:scale(1.08);box-shadow:0 6px 24px rgba(77,124,31,.55);}
.bottom-nav__cta svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-weight:600;font-size:0.9375rem;
  cursor:pointer;border:none;text-decoration:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{
  background:linear-gradient(145deg,var(--leaf-light),var(--leaf-dark));color:#fff;
  box-shadow:0 4px 16px rgba(77,124,31,.32),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover{box-shadow:0 8px 28px rgba(77,124,31,.42),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;}
.btn-outline{background:transparent;color:var(--leaf);border:2px solid var(--leaf);}
.btn-outline:hover{background:var(--leaf-pale);}
.btn-ghost{background:transparent;color:var(--text-2);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);}
.btn-bamboo{background:linear-gradient(145deg,var(--bamboo),var(--bamboo-dark));color:#fff;box-shadow:0 4px 16px rgba(196,164,100,.32);}
.btn-sm{padding:7px 16px;font-size:0.875rem;min-height:36px;}
.btn-lg{padding:14px 32px;font-size:1.0625rem;}
.btn-block{width:100%;}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card-body{padding:16px;}
@media(min-width:640px){.card-body{padding:24px;}}
.card-header{padding:16px;border-bottom:1px solid var(--border);}
@media(min-width:640px){.card-header{padding:20px 24px;}}
.card-footer{padding:14px 16px;border-top:1px solid var(--border);background:var(--surface-2);}
@media(min-width:640px){.card-footer{padding:16px 24px;}}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:0.72rem;font-weight:600;letter-spacing:0.02em;}
.badge-green{background:var(--leaf-pale);color:var(--leaf-dark);}
.badge-bamboo{background:var(--bamboo-pale);color:var(--bamboo-dark);}
.badge-red{background:#FDE8E8;color:#C0392B;}
.badge-blue{background:#E5F4FA;color:#1A5E78;}
[data-theme="dark"] .badge-red{background:#2A1010;color:#E06060;}
[data-theme="dark"] .badge-blue{background:#0A1E28;color:#5AC0E0;}

/* ── Site Status Badges ──────────────────────────────────────────────────────── */
.badge-active{background:#d1fae5;color:#065f46;}
.badge-pre-reserve{background:#fef3c7;color:#92400e;}
.badge-development{background:#fee2e2;color:#991b1b;}
[data-theme="dark"] .badge-active{background:#064e3b;color:#6ee7b7;}
[data-theme="dark"] .badge-pre-reserve{background:#451a03;color:#fcd34d;}
[data-theme="dark"] .badge-development{background:#450a0a;color:#fca5a5;}

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-label{font-weight:500;font-size:0.875rem;color:var(--text-2);}
.form-control{
  width:100%;padding:12px 14px;
  background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);
  color:var(--text);font-size:1rem; /* 1rem prevents iOS zoom */
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  min-height:48px;
}
.form-control:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(77,124,31,.18);}
.form-control::placeholder{color:var(--text-muted);}
textarea.form-control{min-height:90px;resize:vertical;}
.form-hint{font-size:0.8125rem;color:var(--text-muted);}
.form-error{font-size:0.8125rem;color:var(--error);}
.form-control.is-invalid{border-color:var(--error);}
.form-control.is-valid{border-color:var(--success);}
.input-group{display:flex;}
.input-group .form-control{border-radius:var(--r-md) 0 0 var(--r-md);flex:1;}
.input-group .btn{border-radius:0 var(--r-md) var(--r-md) 0;min-height:48px;}
/* Checkbox/radio touch targets */
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;accent-color:var(--leaf);cursor:pointer;flex-shrink:0;}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--leaf-pale) 0%,var(--bg) 70%);
  position:relative;overflow:hidden;padding-top:var(--nav-h);
}
[data-theme="dark"] .hero{background:radial-gradient(ellipse 90% 70% at 50% 0%,#1A2E0A 0%,var(--bg) 70%);}
.hero__bg-pattern{position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234D7C1F' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

/* ── Section Headers ─────────────────────────────────────────────────────────── */
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--leaf);margin-bottom:10px;}
.section-label::before{content:'';width:20px;height:2px;background:var(--leaf);border-radius:2px;}
.section-title{margin-bottom:14px;}
.section-desc{color:var(--text-muted);font-size:1rem;max-width:600px;line-height:1.7;}

/* ── Feature Cards ───────────────────────────────────────────────────────────── */
.feat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:24px 20px;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
  position:relative;overflow:hidden;
}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--leaf),var(--mint));opacity:0;transition:opacity var(--t-mid) var(--ease);}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);border-color:var(--leaf);}
.feat-card:hover::before{opacity:1;}
.feat-icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--leaf-pale);color:var(--leaf);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}

/* ── Plot Cards ──────────────────────────────────────────────────────────────── */
.plot-card{border:2px solid var(--border);border-radius:var(--r-xl);padding:20px;transition:all var(--t-mid) var(--ease);position:relative;}
@media(min-width:640px){.plot-card{padding:28px;}}
.plot-card.featured{border-color:var(--leaf);background:linear-gradient(145deg,var(--leaf-pale),var(--surface));}
.plot-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.plot-card .popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--leaf);color:#fff;padding:4px 16px;border-radius:var(--r-pill);font-size:0.72rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;}

/* ── Site Cards ──────────────────────────────────────────────────────────────── */
.site-card{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:transform var(--t-mid),box-shadow var(--t-mid);}
.site-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.site-card__header{padding:20px;background:linear-gradient(135deg,var(--leaf-pale),var(--bamboo-pale));border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.site-card__body{padding:16px 20px;}
.site-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;}
.site-card__stat{background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;}
.site-card__stat-val{font-size:1.1rem;font-weight:800;color:var(--leaf);}
.site-card__stat-lbl{font-size:0.72rem;color:var(--text-muted);margin-top:2px;}

/* ── Progress Bar ────────────────────────────────────────────────────────────── */
.progress{height:8px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--leaf-light),var(--leaf));border-radius:var(--r-pill);transition:width 1s var(--ease);}
.progress-bar--warning{background:linear-gradient(90deg,#f59e0b,#d97706);}
.progress-bar--danger{background:linear-gradient(90deg,#ef4444,#dc2626);}

/* ── Testimonials ────────────────────────────────────────────────────────────── */
.testimonial{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;}
.testimonial__stars{color:var(--bamboo);font-size:.9rem;margin-bottom:12px;}
.testimonial__quote{color:var(--text-2);line-height:1.7;margin-bottom:16px;font-size:.9375rem;}
.testimonial__author{display:flex;align-items:center;gap:12px;}
.testimonial__avatar{width:40px;height:40px;border-radius:50%;background:var(--leaf-pale);color:var(--leaf);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;overflow:hidden;flex-shrink:0;}

/* ── FAQ ─────────────────────────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--text);background:none;border:none;width:100%;text-align:left;transition:color var(--t-fast);min-height:auto;}
.faq-q:hover{color:var(--leaf);}
.faq-q svg{flex-shrink:0;transition:transform var(--t-mid) var(--ease);}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease);}
.faq-a-inner{padding-bottom:18px;color:var(--text-muted);line-height:1.7;font-size:.9375rem;}
.faq-item.open .faq-a{max-height:400px;}

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border);-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:500px;}
thead{background:var(--surface-2);}
th{padding:12px 16px;text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
td{padding:14px 16px;border-top:1px solid var(--border);color:var(--text-2);font-size:.9rem;}
tbody tr:hover{background:var(--surface-2);}

/* Mobile card table (stacked rows) */
.table-mobile{display:block;}
.table-mobile thead{display:none;}
.table-mobile tbody{display:block;}
.table-mobile tr{display:block;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:12px;padding:14px;background:var(--surface);}
.table-mobile td{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:none;font-size:.875rem;}
.table-mobile td::before{content:attr(data-label);font-weight:600;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r-md);font-size:.9375rem;display:flex;align-items:flex-start;gap:10px;}
.alert-success{background:#EBF7E8;color:#1E6B19;border:1px solid #B8E4B2;}
.alert-error  {background:#FDE8E8;color:#B52626;border:1px solid #F5B8B8;}
.alert-info   {background:#E5F4FA;color:#1A5E78;border:1px solid #B0DCEE;}
.alert-warning{background:#FEF3E2;color:#8A5C12;border:1px solid #F5D9A0;}
[data-theme="dark"] .alert-success{background:#102010;color:#5ADB50;border-color:#1E4020;}
[data-theme="dark"] .alert-error  {background:#200E0E;color:#E87070;border-color:#3A1A1A;}
[data-theme="dark"] .alert-info   {background:#081820;color:#5AC0E0;border-color:#0A2840;}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.footer{background:var(--surface-2);border-top:1px solid var(--border);padding:48px 0 28px;}
.footer__grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:40px;}
@media(min-width:640px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(min-width:960px){.footer__grid{grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;}}
.footer__brand p{color:var(--text-muted);line-height:1.7;margin-top:10px;font-size:.9rem;}
.footer__col h5{font-weight:700;margin-bottom:14px;font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em;}
.footer__col a{display:block;color:var(--text-muted);margin-bottom:8px;font-size:.9rem;transition:color var(--t-fast);min-height:auto;}
.footer__col a:hover{color:var(--leaf);}
.footer__bottom{padding-top:20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer__bottom p{font-size:.8125rem;color:var(--text-muted);}

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
@media(min-width:769px){.toast-container{bottom:24px;right:24px;}}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:10px;font-size:.9rem;min-width:240px;max-width:calc(100vw - 32px);animation:toastIn .3s var(--ease);}
.toast.toast-success{border-left:4px solid var(--success);}
.toast.toast-error  {border-left:4px solid var(--error);}
.toast.toast-info   {border-left:4px solid var(--info);}
@keyframes toastIn{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.fade-up{animation:fadeUp .6s var(--ease) both;}
.animate-in{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.animate-in.visible{opacity:1;transform:translateY(0);}
.hero-cta-pulse{animation:pulse 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* ── Theme Toggle ────────────────────────────────────────────────────────────── */
.theme-toggle{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast);min-height:auto;min-width:auto;}
.theme-toggle:hover{background:var(--leaf-pale);}

/* ── Hamburger ───────────────────────────────────────────────────────────────── */
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;min-height:auto;min-width:auto;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all var(--t-mid) var(--ease);}
@media(min-width:960px){.hamburger{display:none;}}

/* ── Mobile Menu (slide-down) ────────────────────────────────────────────────── */
.mobile-menu{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:16px;box-shadow:var(--shadow-lg);z-index:999;
  max-height:calc(100svh - var(--nav-h));overflow-y:auto;
}
.mobile-menu.open{display:block;animation:fadeUp .2s var(--ease);}
.mobile-menu a{display:flex;align-items:center;padding:14px 8px;border-bottom:1px solid var(--border);color:var(--text-2);font-weight:500;font-size:1rem;}
.mobile-menu a:last-child{border-bottom:none;}

/* ── PWA Install Banner ──────────────────────────────────────────────────────── */
.install-banner{background:linear-gradient(135deg,var(--leaf),var(--leaf-dark));color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--r-md);font-size:.9rem;}
.install-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;min-height:36px;}
.install-banner button:hover{background:rgba(255,255,255,.35);}

/* ── Auth Pages ──────────────────────────────────────────────────────────────── */
.auth-page{min-height:100svh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 70% 60% at 30% 50%,var(--leaf-pale),var(--bg));padding:16px;}
[data-theme="dark"] .auth-page{background:radial-gradient(ellipse 70% 60% at 30% 50%,#162505,var(--bg));}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-xl);}
@media(min-width:640px){.auth-card{padding:44px;}}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-muted);font-size:.875rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:var(--r-pill);border:1.5px solid var(--border-2);background:var(--surface);color:var(--text);font-weight:500;font-size:.9375rem;cursor:pointer;width:100%;transition:all var(--t-fast);text-decoration:none;min-height:48px;}
.oauth-btn:hover{background:var(--surface-2);border-color:var(--leaf);color:var(--text);transform:translateY(-1px);}

/* ── Dashboard Layout ────────────────────────────────────────────────────────── */
.dashboard-layout{display:flex;min-height:calc(100svh - var(--nav-h));margin-top:var(--nav-h);}
.sidebar{width:240px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);min-height:calc(100svh - var(--nav-h));padding:20px 12px;display:none;}
@media(min-width:900px){.sidebar{display:block;}}
.sidebar__link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:.9rem;transition:background var(--t-fast),color var(--t-fast);margin-bottom:2px;min-height:auto;}
.sidebar__link:hover{background:var(--leaf-pale);color:var(--leaf-dark);}
.sidebar__link.active{background:var(--leaf-pale);color:var(--leaf);font-weight:600;}
.dashboard-content{flex:1;padding:16px;min-width:0;}
@media(min-width:640px){.dashboard-content{padding:24px;}}
@media(min-width:900px){.dashboard-content{padding:32px;max-width:calc(100% - 240px);}}

/* ── Dashboard Mobile Tab Bar (separate from bottom-nav) ─────────────────────── */
.dash-tabs{display:flex;overflow-x:auto;gap:6px;padding:0 0 12px;margin-bottom:16px;scrollbar-width:none;}
.dash-tabs::-webkit-scrollbar{display:none;}
.dash-tabs a{white-space:nowrap;padding:8px 14px;border-radius:var(--r-pill);font-size:.8125rem;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);min-height:auto;}
.dash-tabs a.active{background:var(--leaf);color:#fff;border-color:var(--leaf);}
@media(min-width:900px){.dash-tabs{display:none;}}

/* ── Stat Cards ──────────────────────────────────────────────────────────────── */
.stat-card{border-radius:var(--r-xl);padding:16px;}
@media(min-width:640px){.stat-card{padding:24px;}}
.stat-card .value{font-size:1.6rem;font-weight:800;line-height:1;}
@media(min-width:640px){.stat-card .value{font-size:2rem;}}
.stat-card .label{font-size:.8125rem;color:var(--text-muted);margin-top:5px;}

/* ── Reserve Page Layout ─────────────────────────────────────────────────────── */
.reserve-grid{display:flex;flex-direction:column;gap:20px;}
@media(min-width:900px){.reserve-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}}
.reserve-sticky{position:relative;}
@media(min-width:900px){.reserve-sticky{position:sticky;top:calc(var(--nav-h) + 20px);}}
/* Mobile order summary collapsed */
.summary-collapse{cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.summary-collapse svg{transition:transform var(--t-mid);}
.summary-collapse.open svg{transform:rotate(180deg);}
.summary-body{display:none;}
.summary-body.open{display:block;}
@media(min-width:900px){.summary-body{display:block !important;}}
/* Mobile: float reserve button above bottom-nav */
.reserve-float-btn{
  position:fixed;bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);left:16px;right:16px;z-index:900;
}
@media(min-width:769px){.reserve-float-btn{display:none;}}

/* ── Swipeable Tabs (mobile) ─────────────────────────────────────────────────── */
.tab-bar{display:flex;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:none;border-bottom:2px solid var(--border);margin-bottom:20px;}
.tab-bar::-webkit-scrollbar{display:none;}
.tab-bar button{white-space:nowrap;padding:8px 16px;font-size:.875rem;font-weight:600;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;min-height:auto;transition:color var(--t-fast),border-color var(--t-fast);}
.tab-bar button.active{color:var(--leaf);border-bottom-color:var(--leaf);}

/* ── Pull-to-refresh indicator ───────────────────────────────────────────────── */
.ptr-indicator{position:fixed;top:var(--nav-h);left:50%;transform:translateX(-50%);z-index:1001;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 16px;font-size:.8125rem;font-weight:600;color:var(--text-muted);box-shadow:var(--shadow-md);display:none;align-items:center;gap:8px;}
.ptr-indicator.visible{display:flex;}

/* ── Responsive Grid Overrides ───────────────────────────────────────────────── */
@media(max-width:639px){
  :root{--section-gap:48px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;text-align:center;}
  .table-wrap table{min-width:440px;}
}
@media(min-width:640px) and (max-width:899px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:900px){
  :root{--section-gap:80px;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.d-none{display:none !important;}
.overflow-hidden{overflow:hidden;}