:root {
  /* brand */
  --brand: #ff5a36;        /* warm orange — primary, the HomeFlavors signature */
  --brand-dark: #e23e1f;   /* deeper orange — links and pressed states */
  --brand-brown: #4d2b17; /* deep cocoa — "Home" half of bicolor wordmark (eyedropped from logo) */
  --green: #2f9e5b;        /* fresh herb green — success / open / active, logo steam */
  /* neutrals */
  --ink: #1f1d1b;
  --muted: #76726c;
  --bg: #f6f5f2;
  --card: #ffffff;
  --line: #e9e5dd;
  /* accents */
  --gold: #f5a623;         /* star ratings */
  --danger: #d23b2e;       /* errors */
  --radius: 16px;
  --shadow: 0 2px 12px rgba(30, 20, 10, 0.08);
  --shadow-lg: 0 8px 28px rgba(30, 20, 10, 0.16);
  /* Nunito (rounded, warm — echoes the logo) for the wordmark and headings;
     system stack stays for body text. */
  --font-brand: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Fraunces (variable serif, optical-size axis) for landing-page editorial
     headlines on /join. Reserved for marketing surfaces — never override
     the global h1/h2/h3 which stay in --font-brand for dashboard/admin. */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand-dark); }
h1, h2, h3, .brand, .section-title, .menu-cat { font-family: var(--font-brand); }

/* ================================================================ layout */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 110px; }

.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--brand);
  color: #fff;
  padding: 12px 16px;
}
.appbar-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.brand {
  font-weight: 800; font-size: 1.2rem; letter-spacing: .2px;
  display: flex; align-items: center; gap: 6px;
}
.brand-mark { display: block; height: 30px; width: auto; flex: none; }
.appbar .spacer { flex: 1; }
.appbar .loc {
  font-size: .78rem; opacity: .92; display: flex; align-items: center; gap: 4px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  background: rgba(255, 255, 255, .16); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}

/* bottom nav */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--line);
}
.tabbar-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1; background: none; border: none; color: var(--muted);
  padding: 7px 2px; font-size: .68rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  position: relative;
}
.tabbar button .ic { font-size: 1.35rem; line-height: 1; }
.tabbar button.active { color: var(--brand); }
.tab-badge {
  position: absolute; top: 0; left: 50%; margin-left: 4px;
  background: var(--brand); color: #fff; font-size: .62rem; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ================================================================ generic */
.section-title { font-size: 1.3rem; font-weight: 800; margin: 20px 0 3px; }
.section-sub { color: var(--muted); font-size: .9rem; margin-bottom: 14px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 14px; }
.mt-sm { margin-top: 8px; }
.spinner { text-align: center; padding: 56px 20px; color: var(--muted); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 14px; overflow: hidden;
}
.card-pad { padding: 16px; }

.empty {
  text-align: center; color: var(--muted);
  padding: 54px 22px; font-size: .95rem;
}
.empty .big { font-size: 3rem; display: block; margin-bottom: 10px; }

/* buttons */
.btn {
  background: var(--brand); color: #fff; border: none;
  border-radius: 12px; padding: 13px 18px; font-weight: 700;
  width: 100%; transition: filter .12s; text-align: center;
}
.btn:active { filter: brightness(.93); }
.btn:disabled { opacity: .5; }
.btn.secondary { background: #fff; color: var(--brand-dark); border: 1.5px solid var(--brand); }
.btn.ghost { background: #efece5; color: var(--ink); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.danger { background: #fff; color: var(--danger); border: 1.5px solid var(--danger); }
.btn.sm { width: auto; padding: 9px 14px; font-size: .87rem; border-radius: 10px; }
.btn.block { width: 100%; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.row-btns .btn { flex: 1; width: auto; min-width: 130px; }

.linkish {
  background: none; border: none; color: var(--brand-dark);
  font-weight: 700; text-decoration: underline; padding: 4px;
}

/* pills */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.pill.open { background: #e3f4e8; color: var(--green); }
.pill.closed { background: #f0ece4; color: var(--muted); }
.pill.pending { background: #fff2d6; color: #8a6500; }
.pill.approved { background: #e3f4e8; color: var(--green); }
.pill.founder { background: #fff7ee; color: var(--brand-brown); border: 1px solid var(--brand); }
.pill.intro { background: #ecf7ef; color: var(--green); border: 1px solid var(--green); }
.pill.rejected { background: #fdecea; color: var(--danger); }
.pill.info { background: #e9eefb; color: #3556b5; }

/* ================================================================== forms */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid rgba(255, 90, 54, .35); outline-offset: -1px; border-color: var(--brand);
}
.field textarea { resize: vertical; min-height: 74px; }
.field .hint { font-size: .76rem; color: var(--muted); margin-top: 4px; }

/* Google Places autocomplete host. The PlaceAutocompleteElement is a
 * web component whose inner input lives in shadow DOM — we can size
 * it like any block element and customize via Google's Material
 * design tokens (`--gmp-mat-*`). color-scheme:light prevents the
 * element from rendering with the user-agent dark default, which was
 * making the field show as black-on-black on some setups. */
/* Saved-address list on /profile and chips above the autocomplete on checkout. */
.saved-addr-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--line);
}
.saved-addr-row:first-child { border-top: 0; padding-top: 0; }
.saved-addr-row .sa-main { flex: 1; min-width: 0; font-size: .92rem; }
.saved-addr-row .sa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.saved-addr-row .badge.sm {
  font-size: .68rem; padding: 1px 7px; background: var(--brand);
  color: #fff; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}
/* Selected-address confirmation card. Replaces the autocomplete once
 * the customer has picked a place, so they aren't staring at an
 * empty-looking input wondering whether the pick registered. */
.addr-confirm {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--brand);
  background: #fff7ee;
  border-radius: 12px;
}
.addr-confirm .ac-check {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 900; font-size: .9rem;
  flex: none;
}
.addr-confirm .ac-text { flex: 1; min-width: 0; }
.addr-confirm .ac-line1 { font-weight: 700; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-confirm .ac-line2 { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.addr-confirm .ac-change {
  border: 1px solid var(--brand); background: #fff; color: var(--brand);
  font-weight: 700; font-size: .82rem;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; flex: none;
}
.addr-confirm .ac-change:hover { background: var(--brand); color: #fff; }

.saved-addrs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.saved-chip {
  border: 1px solid var(--line); background: #fff;
  padding: 6px 11px; border-radius: 999px;
  font-size: .82rem; color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saved-chip:hover { border-color: var(--brand); }
.saved-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.addr-host { display: block; }
.addr-host gmp-place-autocomplete,
.addr-host .addr-pac {
  display: block;
  width: 100%;
  color-scheme: light;
  /* Material color tokens picked up by the inner Material text field. */
  --gmp-mat-color-surface: #ffffff;
  --gmp-mat-color-on-surface: #2a1a10;
  --gmp-mat-color-on-surface-variant: #6b6b6b;
  --gmp-mat-color-outline: #e6e6e6;
  --gmp-mat-color-primary: #e48c44;
  /* 16px keeps iOS Safari from zooming on focus (the zoom cascades
   * into the field-behind-the-address-bar bug); scroll-margin-top
   * leaves space when the browser scrolls the field into view as
   * the on-screen keyboard opens. */
  font-size: 16px;
  scroll-margin-top: 80px;
}
.addr-host input {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff;
  color: var(--ink);
  /* iOS Safari zooms in when an input's effective font-size is < 16px;
   * lock to 16px to prevent the page from zooming and then jumping
   * the field behind the address bar. */
  font-size: 16px;
  /* On mobile, when the field auto-scrolls into view as the on-screen
   * keyboard opens, keep enough space above so it doesn't hide behind
   * a sticky appbar. */
  scroll-margin-top: 80px;
}
.addr-host input:focus {
  outline: 2px solid rgba(255, 90, 54, .35); outline-offset: -1px;
  border-color: var(--brand);
}
/* Google's legacy Autocomplete dropdown — make sure it sits above
 * modals and sticky headers on mobile. */
.pac-container {
  z-index: 10000;
  border-radius: 11px;
  margin-top: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  font-family: inherit;
}
.pac-item { padding: 8px 12px; font-size: .92rem; }
.pac-item:hover { background: #fff5ec; }
.check-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: .92rem; }
.check-row input { width: 19px; height: 19px; accent-color: var(--brand); }

/* weekly schedule editor */
.schedule { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.schedule[hidden] { display: none; }
.sched-row { display: flex; align-items: center; gap: 8px; }
.sched-day {
  display: flex; align-items: center; gap: 7px; width: 76px; flex: none;
  font-weight: 700; font-size: .88rem;
}
.sched-day input { width: 18px; height: 18px; accent-color: var(--brand); }
.sched-row input[type="time"] {
  flex: 1; min-width: 0; padding: 9px 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 9px;
}
.sched-row input[type="time"]:disabled { background: #f1ede4; color: var(--muted); }
.sched-to { color: var(--muted); font-size: .8rem; flex: none; }

/* opening hours (customer seller page) */
.hours-card .hours-title { font-weight: 800; margin-bottom: 6px; }
.hours-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: .9rem; color: var(--muted);
}
.hours-row.today { color: var(--ink); font-weight: 700; }

.form-error {
  background: #fdecea; color: var(--danger);
  border: 1px solid #f3c9c4; border-radius: 11px;
  padding: 10px 13px; font-size: .86rem; margin-bottom: 13px;
}
.banner {
  background: #fff7e3; border: 1px solid #f1dca2;
  color: #6b5200; border-radius: var(--radius);
  padding: 12px 14px; font-size: .87rem; margin-bottom: 14px;
}
.banner.info { background: #eaf0fc; border-color: #c8d6f5; color: #2f4ba0; }

/* country tabs on /setup */
.country-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.country-tab {
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .92rem;
  white-space: nowrap;
}
.country-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* /cooks landing — steps and pricing block */
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.55; }
.step-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem;
}
.pricing-card { text-align: center; }
.pricing-card .big-num {
  font-family: var(--font-brand);
  font-weight: 900; font-size: 4.4rem; color: var(--brand); line-height: 1;
}

/* /cooks: photo strip under hero (3 dishes) + mosaic before FAQ (6 dishes) */
.hero-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin: 14px 0 8px;
}
.hero-strip img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
}
.cooks-mosaic {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin: 14px 0;
}
.cooks-mosaic img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
}

/* language toggle on /cooks */
.lang-toggle { display: inline-flex; gap: 4px; background: #f1ede4; border-radius: 999px; padding: 3px; }
.lang-pill {
  background: none; border: none; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--muted);
}
.lang-pill.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* funnel: per-kitchen onboarding progress strip in admin */
.funnel-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.funnel-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.funnel-item.on { background: #e3f4e8; color: var(--green); }
.funnel-item.off { background: #fdecea; color: var(--danger); }

/* citation/source line on /setup, shown after each step */
.source-line {
  border-left: 3px solid var(--brand);
  background: #fff7ee;
  padding: 8px 12px;
  margin: 6px 0 14px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink);
  border-radius: 0 9px 9px 0;
}
.source-line a { color: var(--brand-dark); }

/* ================================================================== auth */
.auth-hero { text-align: center; padding: 40px 16px 10px; }
.auth-hero .brand-mark { height: 76px; margin: 0 auto 4px; }
.auth-hero h1 { font-size: 1.9rem; font-weight: 800; margin-top: 6px; }
.auth-hero p { color: var(--muted); margin-top: 4px; }
.auth-tabs { display: flex; gap: 6px; margin: 20px 0 16px; }
.auth-tabs button {
  flex: 1; background: #efece5; border: none; color: var(--muted);
  padding: 12px; border-radius: 11px; font-weight: 700;
}
.auth-tabs button.active { background: var(--brand); color: #fff; }
/* Sub-toggle inside the Log in tab: pick Phone or Email as the
 * sign-in method. Visually lighter than the Log in / Sign up tabs
 * so the hierarchy reads as primary → secondary. */
.auth-mode-row {
  display: flex; gap: 4px; margin: 0 0 10px;
  background: #efece5; border-radius: 10px; padding: 4px;
}
.auth-mode-row button {
  flex: 1; background: transparent; border: none; color: var(--muted);
  padding: 8px 10px; border-radius: 7px; font-weight: 600; font-size: .9rem;
  cursor: pointer;
}
.auth-mode-row button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.demo-box {
  background: #fff; border: 1px dashed var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: .8rem; color: var(--muted); margin-top: 16px;
}
.demo-box b { color: var(--ink); }

/* =============================================================== browse */
.cuisine-row { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; flex-wrap: wrap; }
.cuisine-chip {
  flex: none; background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem;
  white-space: nowrap;
}
.cuisine-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* "More ▾" sits at the end of the chip row when the cuisine list
 * outgrows the visible 4 — distinct dashed border to read as
 * "open more" rather than "another option". */
.cuisine-chip.cuisine-more {
  border-style: dashed; color: var(--ink); background: transparent;
}
.cuisine-chip.cuisine-more:hover { background: #fff8ee; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; margin: 8px 0 4px;
}
.search input { border: none; outline: none; flex: 1; background: none; }
.search .ic { color: var(--muted); }

.seller-card { display: block; cursor: pointer; }
.seller-card .cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: linear-gradient(135deg, #ffd9b0, #ffb38a);
}
.seller-card .cover.ph {
  display: flex; align-items: center; justify-content: center; font-size: 3.4rem;
}
.seller-card.closed .cover { filter: grayscale(.7) brightness(.96); }
.seller-meta { padding: 13px 15px; }
.seller-meta h3 { font-size: 1.08rem; font-weight: 800; }
.seller-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--muted); font-size: .84rem; margin-top: 4px;
}
.seller-line .dot { opacity: .5; }

/* stars */
.stars { display: inline-flex; gap: 1px; }
.star { color: #d8d3c8; font-size: .92rem; line-height: 1; }
.star.on { color: var(--gold); }
.rating-num { font-weight: 800; }

/* ============================================================ seller page */
.seller-hero {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin: 14px 0;
}
.seller-hero .cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: linear-gradient(135deg, #ffd9b0, #ffb38a);
}
.seller-hero .cover.ph { display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.seller-hero-body { padding: 15px 16px; }
.seller-hero-body h1 { font-size: 1.45rem; font-weight: 800; }
.seller-hero-body .desc { color: var(--muted); font-size: .9rem; margin: 6px 0; }
.fact-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  font-size: .82rem; color: var(--muted);
}
.fact {
  background: #f6f4ef; border-radius: 9px; padding: 6px 10px;
  display: flex; align-items: center; gap: 5px;
}

.menu-cat { font-size: 1.1rem; font-weight: 800; margin: 20px 0 8px; }
.dish {
  display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.dish:last-child { border-bottom: none; }
/* Whole card is the tap target — cursor + active feedback signal it. */
.dish[data-dish-open] { cursor: pointer; -webkit-tap-highlight-color: rgba(255,90,54,.10); }
.dish[data-dish-open]:active { background: rgba(255,90,54,.05); }
.dish[data-dish-open]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.dish-info { flex: 1; min-width: 0; }
.dish-info h4 { font-size: 1rem; font-weight: 700; }
.dish-info .d-desc {
  color: var(--muted); font-size: .85rem; margin: 3px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish-info .d-price { font-weight: 800; }
.dish-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.dish-thumb {
  width: 92px; height: 92px; border-radius: 12px; object-fit: cover;
  background: #f1ede4; flex: none;
}
.dish-thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.add-btn {
  background: #fff; border: 1.5px solid var(--brand); color: var(--brand-dark);
  border-radius: 10px; padding: 7px 15px; font-weight: 800; font-size: .85rem;
}
/* Inline-add CTA on each dish row — filled brand color (vs the
 * outlined .add-btn) so it reads as a primary action and the eye
 * lands on it as the obvious next step. */
.add-btn.brand {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.add-btn.brand:active { transform: scale(0.97); }
/* Inline qty stepper that replaces the "+ Add" button once the dish
 * is in the cart. Roughly the same total width as the button so the
 * dish row doesn't reflow when toggling between the two. */
.dish-qty {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1.5px solid var(--brand);
  border-radius: 10px; padding: 2px;
}
.dish-qty .qty-btn {
  width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--brand-dark); font-size: 1.05rem; font-weight: 900;
  border-radius: 8px; cursor: pointer; padding: 0;
}
.dish-qty .qty-btn:active { background: rgba(255,90,54,.12); }
.dish-qty .qty-num {
  min-width: 18px; text-align: center; font-weight: 800; font-size: .92rem;
  color: var(--brand-dark);
}

/* sticky cart bar */
.cartbar {
  position: fixed; left: 0; right: 0; bottom: 62px; z-index: 25;
  padding: 0 16px;
}
.cartbar-inner {
  max-width: 760px; margin: 0 auto;
  background: var(--ink); color: #fff; border-radius: 14px;
  padding: 13px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg); cursor: pointer;
}
.cartbar-inner .count {
  background: var(--brand); width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
}
.cartbar-inner .label { flex: 1; font-weight: 700; }
.cartbar-inner .total { font-weight: 800; }

/* ================================================================== cart */
.cart-item { display: flex; gap: 12px; align-items: flex-start; }
.cart-item .ci-main { flex: 1; min-width: 0; }
.cart-item .ci-name { font-weight: 700; }
.cart-item .ci-note { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.cart-item .ci-price { font-weight: 800; white-space: nowrap; }

.qty {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 2px;
}
.qty button {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #f1ede4; color: var(--brand-dark); font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.qty span { min-width: 22px; text-align: center; font-weight: 800; }

.total-rows { margin: 6px 0; }
.total-rows .tr {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: .92rem;
}
.total-rows .tr.grand {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px;
  font-weight: 800; font-size: 1.1rem;
}
.total-rows .tr .muted { color: var(--muted); }

/* fulfillment + tip selectors */
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 12px 8px; font-weight: 700; font-size: .9rem;
}
.seg button.active { border-color: var(--brand); background: #fff3ef; color: var(--brand-dark); }
.seg button:disabled { opacity: .42; }
.tip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tip-row button {
  flex: 1; min-width: 60px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 11px; padding: 10px 6px; font-weight: 700;
}
.tip-row button.active { border-color: var(--brand); background: #fff3ef; color: var(--brand-dark); }

/* =============================================================== orders */
.order-card .oc-head { display: flex; gap: 12px; align-items: center; }
.order-card .oc-logo {
  width: 50px; height: 50px; border-radius: 11px; flex: none;
  background: #f1ede4; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.order-card .oc-main { flex: 1; min-width: 0; }
.order-card .oc-name { font-weight: 800; }
.order-card .oc-sub { color: var(--muted); font-size: .82rem; }

.ostatus {
  display: inline-block; font-size: .74rem; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
}
.st-placed { background: #fff2d6; color: #8a6500; }
.st-accepted, .st-preparing { background: #e9eefb; color: #3556b5; }
.st-ready { background: #e3f0ff; color: #1f5fb5; }
.st-completed { background: #e3f4e8; color: var(--green); }
.st-cancelled { background: #fdecea; color: var(--danger); }

/* order status tracker */
.tracker { display: flex; margin: 14px 0 4px; }
.tracker .step { flex: 1; text-align: center; position: relative; }
.tracker .step .bar {
  height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 7px;
}
.tracker .step.done .bar { background: var(--brand); }
.tracker .step .lbl { font-size: .68rem; color: var(--muted); font-weight: 700; }
.tracker .step.done .lbl { color: var(--ink); }

.line-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.line-item:last-child { border-bottom: none; }
.line-item .li-qty { color: var(--brand-dark); font-weight: 800; margin-right: 6px; }

.info-box {
  background: #f7f5f0; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; margin-top: 12px; font-size: .88rem;
}
.info-box .lbl {
  font-weight: 800; color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}

/* ================================================================== tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.tabs button {
  background: #efece5; border: none; color: var(--muted);
  padding: 10px 14px; border-radius: 11px; font-weight: 700; font-size: .88rem; white-space: nowrap;
}
.tabs button.active { background: var(--ink); color: #fff; }

/* admin stats */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px; box-shadow: var(--shadow);
}
.stat .num { font-size: 1.7rem; font-weight: 800; }
.stat .lbl { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* account rows */
.acc-row {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left;
}
.acc-row:last-child { border-bottom: none; }
.acc-row .ar-ic { font-size: 1.3rem; }
.acc-row .ar-main { flex: 1; }
.acc-row .ar-title { font-weight: 700; }
.acc-row .ar-sub { color: var(--muted); font-size: .8rem; }
.acc-row .chev { color: var(--muted); }

/* =============================================================== modal */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 14, 8, .52);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--bg); width: 100%; max-width: 760px;
  border-radius: 20px 20px 0 0; padding: 20px 16px 30px;
  max-height: 92vh; overflow-y: auto;
}
.modal h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.modal .modal-sub { color: var(--muted); font-size: .88rem; margin-bottom: 14px; }
/* Big hero image at the top of the Add-to-cart modal. Aspect 4:3
 * keeps the dish framed without scrolling the price/qty controls
 * below the fold on small phones. */
.dish-modal-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; margin-bottom: 14px; background: #f1ede4;
  display: block;
}
.dish-modal-photo.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}

@media (min-width: 560px) {
  .overlay { align-items: center; }
  .modal { border-radius: 20px; margin: 16px; }
}

/* photo picker */
.photo-pick {
  border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 22px 14px; text-align: center; color: var(--muted);
  background: #fff; font-size: .9rem;
}
.photo-preview { border-radius: 12px; margin-bottom: 8px; max-height: 220px; width: 100%; object-fit: cover; }

/* star picker */
.star-pick { display: flex; gap: 6px; font-size: 2.3rem; }
.star-pick span { color: #d8d3c8; cursor: pointer; }
.star-pick span.on { color: var(--gold); }

/* bicolor wordmark */
.brand-word { font-family: var(--font-brand); font-weight: 900; }
.bw-home { color: var(--brand-brown); }
.bw-flavors { color: var(--brand); }

/* value props — 4-card brand pillar grid */
.value-props { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
@media (min-width: 600px) { .value-props { grid-template-columns: repeat(4, 1fr); } }
.value-prop { background: var(--card); border-radius: 12px; padding: 14px; text-align: center; }
.value-prop .vp-icon { font-size: 1.6rem; }
.value-prop .vp-label { font-weight: 900; font-size: .8rem; letter-spacing: .04em; color: var(--brand-brown); margin-top: 6px; }
.value-prop .vp-text { font-size: .82rem; color: var(--muted); line-height: 1.35; margin-top: 4px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 999px; font-size: .88rem; font-weight: 600;
  z-index: 70; box-shadow: var(--shadow-lg); max-width: 90vw; text-align: center;
}
/* When the floating "View cart" pill is on screen (seller menu after
 * the first add-to-cart), push the toast above it so a customer
 * trying to tap "View cart" doesn't fat-finger the toast that just
 * appeared in front of it. cartbar bottom edge sits at ~112px from
 * viewport bottom (62px gap + ~50px pill height); 130px leaves a
 * comfortable 18px gap above. */
body:has(.cartbar) .toast { bottom: 130px; }

/* ================================================== /fundadora landing
 * Direct-response style: emotional hero, 3 enemy sections, mechanism reveal,
 * 10/30 comparison, risk-zero pitch, soft scarcity, CTA. PT only. */
.fnd-hero {
  text-align: center;
  padding: 20px 0 18px;
}
.fnd-hero-mark img,
.fnd-hero-mark svg { height: 88px; margin: 0 auto 10px; }
.fnd-h1 {
  font-family: var(--font-brand);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.18;
  margin-bottom: 12px;
  color: var(--ink);
}
.fnd-h1-num {
  color: var(--brand);
  white-space: nowrap;
}
.fnd-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.fnd-cta {
  max-width: 320px;
  margin: 0 auto;
  font-size: 1.05rem;
  padding: 14px 18px;
}
.fnd-trust {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 10px;
}
/* mid-page contextual CTAs — slightly smaller than hero/final, centered, with
 * a 1-line trust signal that matches the section just read. They reuse
 * data-go-apply so existing click handlers wire them automatically. */
.fnd-mid-cta-wrap {
  text-align: center;
  margin: 22px 0 26px;
  padding: 4px 8px;
}
.fnd-mid-cta {
  display: inline-block;
  width: auto;
  max-width: 360px;
  font-size: .98rem;
  padding: 13px 24px;
}
.fnd-mid-cta-trust {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}
.fnd-block {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 22px 0;
  line-height: 1.6;
  font-size: .96rem;
}
.fnd-block p { margin-bottom: 12px; }
.fnd-block p:last-child { margin-bottom: 0; }
.fnd-h2 {
  font-family: var(--font-brand);
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.22;
  margin-bottom: 12px;
  color: var(--ink);
}
.fnd-enemy {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 18px 0;
  border-left: 4px solid var(--brand);
  line-height: 1.6;
  font-size: .94rem;
}
.fnd-enemy p { margin-bottom: 10px; }
.fnd-enemy-tag {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.fnd-h3 {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 10px;
  color: var(--brand-brown);
}
.fnd-enemy-twist {
  font-style: italic;
  color: var(--brand-brown);
  font-weight: 700;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}
.fnd-turn { background: #fff7ee; border: 1px solid var(--brand); }
.fnd-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}
/* 3-col on tablet/desktop. EXAMPLES has 3 entries (one Brazilian, one
 * Mexican, one Bolivian) so the grid lands cleanly in a single row.
 * If the example count changes, swap to auto-fit minmax. */
@media (min-width: 720px) {
  .fnd-proof { grid-template-columns: repeat(3, 1fr); }
}
.fnd-proof-card { transition: transform .15s ease, box-shadow .15s ease; }
.fnd-proof-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fnd-proof-cta {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand);
  margin-top: 6px;
}
.fnd-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.fnd-compare-col {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  font-size: .85rem;
}
.fnd-compare-col ul {
  margin: 8px 0 0 16px;
  line-height: 1.5;
}
.fnd-compare-h {
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: 4px;
}
.fnd-compare-big {
  font-family: var(--font-brand);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}
.fnd-compare-bad { opacity: .85; }
.fnd-compare-bad .fnd-compare-big { color: var(--danger); text-decoration: line-through; }
.fnd-compare-good { border: 2px solid var(--green); }
.fnd-compare-good .fnd-compare-big { color: var(--green); }
.fnd-compare-foot {
  font-size: .82rem;
  margin-top: 10px;
  line-height: 1.5;
}
.fnd-risk { background: #ecf7ef; border: 1px solid var(--green); }
.fnd-risk-badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.fnd-scarcity { background: var(--card); border: 1px dashed var(--brand-brown); }
/* welcome-offer + founder lock-in cards inside the "Por que entrar agora?"
 * block. Two side-by-side visual anchors that mirror the same perks the
 * cook will see on the welcome state after signing up. */
.fnd-offer-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0 0;
  font-size: .92rem;
  line-height: 1.45;
}
.fnd-offer-emo { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.fnd-offer-h {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}
.fnd-offer-intro { background: #ecf7ef; border: 1px solid var(--green); }
.fnd-offer-intro .fnd-offer-h { color: var(--green); }
.fnd-offer-founder { background: #fff7ee; border: 1px solid var(--brand); }
.fnd-offer-founder .fnd-offer-h { color: var(--brand-brown); }

/* ============== plan-centric variant B (DoorDash-style cards) ============== */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 24px;
}
@media (min-width: 720px) {
  .plans-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.plan-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 18px 18px;
  border: 2px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plan-card-founder {
  border-color: var(--brand);
  background: linear-gradient(180deg, #fff7ee 0%, var(--card) 60%);
  box-shadow: 0 4px 16px rgba(228,140,68,0.18);
}
.plan-card-disabled { opacity: 0.6; }
.plan-card-standard { border-color: var(--line); }
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
.plan-badge-best { background: var(--brand); color: #fff; }
.plan-badge-default { background: var(--line); color: var(--muted); }
.plan-badge-soldout { background: var(--danger); color: #fff; }
.plan-name {
  font-family: var(--font-brand);
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 6px;
  margin-bottom: 4px;
  color: var(--ink);
}
.plan-card-founder .plan-name { color: var(--brand-brown); }
.plan-tagline {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.plan-price-num {
  font-family: var(--font-brand);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.plan-card-founder .plan-price-num { color: var(--brand); }
.plan-price-unit {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.2;
}
.plan-intro {
  font-size: .88rem;
  color: var(--green);
  margin-bottom: 14px;
  padding: 6px 10px;
  background: #ecf7ef;
  border-radius: 8px;
  display: inline-block;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.plan-features li {
  font-size: .88rem;
  line-height: 1.45;
  padding: 6px 0 6px 22px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--green);
  font-weight: 900;
}
.plan-cta {
  width: 100%;
  padding: 12px 16px;
  font-size: .98rem;
}
.plan-cta.disabled { opacity: 0.5; cursor: not-allowed; }
.plan-foot {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 10px;
}

.plans-included {
  margin-top: 14px;
  background: #fff7ee;
  border: 1px dashed var(--brand);
}
.plans-included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
}
.plans-included-list li { padding: 4px 0; }

.faq { padding: 8px 14px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  list-style: none;
  padding: 6px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+ ";
  color: var(--brand);
  font-weight: 900;
}
.faq details[open] summary::before { content: "− "; }
.faq p {
  font-size: .9rem;
  line-height: 1.55;
  margin-top: 8px;
  color: var(--muted);
}
.faq a { color: var(--brand-brown); }

.plans-final-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  margin: 14px 0;
}
.plans-final-row .plan-cta { max-width: 360px; }

/* single-plan layout — one big centered card with rich benefit list,
 * replacing the previous side-by-side founder/standard grid */
.plan-single-wrap {
  margin: 24px 0;
}
.plan-card-single {
  max-width: 520px;
  margin: 0 auto;
  border: 2px solid var(--brand);
  background: linear-gradient(180deg, #fff7ee 0%, var(--card) 50%);
  padding: 32px 22px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(228, 140, 68, 0.22);
}
.plan-free {
  font-family: var(--font-brand);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1.05;
  margin-bottom: 6px;
}
@media (min-width: 480px) { .plan-free { font-size: 2.8rem; } }
.plan-then {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 22px;
}
.plan-features-rich {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
}
.plan-features-rich li {
  font-size: .92rem;
  line-height: 1.5;
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.plan-features-rich li:last-child { border-bottom: none; }
.plan-features-rich li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--green);
  font-weight: 900;
  font-size: 1rem;
}
.plan-card-single .plan-cta {
  width: 100%;
  max-width: 380px;
  padding: 15px 18px;
  font-size: 1.08rem;
}
.plan-nothing-to-lose {
  max-width: 520px;
  margin: 14px auto 0;
  background: var(--card);
  border: 1px dashed var(--brand-brown);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.5;
}
.fnd-final {
  margin-top: 26px;
  text-align: center;
  background: linear-gradient(180deg, #fff7ee 0%, var(--card) 100%);
}
.fnd-final .fnd-h2 { color: var(--brand-brown); }
.fnd-final p { margin-bottom: 14px; line-height: 1.55; }

/* --- order-flow walkthrough --- */
.fnd-flow { padding: 18px 16px; }
.fnd-flow-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
  line-height: 1.55;
}
.fnd-flow-step:last-child { border-bottom: none; padding-bottom: 0; }
.fnd-flow-step:first-child { padding-top: 0; }
.fnd-flow-step .step-n {
  flex: 0 0 32px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.fnd-flow-step h4 {
  font-family: var(--font-brand);
  font-size: 1.02rem;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.25;
}
.fnd-flow-step p { margin-bottom: 8px; }
.fnd-flow-step p:last-child { margin-bottom: 0; }
.fnd-flow-step code {
  background: #f3f3f3;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .85em;
  font-family: ui-monospace, monospace;
  color: var(--brand-brown);
  word-break: break-all;
}

/* WhatsApp-style bubble for the notification preview */
.wa-bubble {
  background: #dcf8c6;
  border-radius: 12px 12px 12px 2px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  max-width: 320px;
  font-size: .9rem;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  position: relative;
}
.wa-bubble-from {
  font-weight: 800;
  color: #075e54;
  font-size: .82rem;
  margin-bottom: 4px;
}
.wa-bubble-text { color: #2a2a2a; }
.wa-bubble-time {
  font-size: .7rem;
  color: #64908a;
  text-align: right;
  margin-top: 4px;
  letter-spacing: .03em;
}

/* extras grid */
.fnd-extras { margin-top: 16px; background: #fff7ee; border: 1px solid var(--brand); }
.fnd-extras-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .fnd-extras-grid { grid-template-columns: 1fr 1fr; }
}
.fnd-extra {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.45;
}
.fnd-extra-emo {
  flex: 0 0 32px;
  font-size: 1.5rem;
  line-height: 1.1;
}

/* WhatsApp fallback at the bottom of the landing — soft secondary CTA */
.fnd-contact {
  margin-top: 22px;
  padding: 22px 18px;
  background: var(--card);
  border: 1px dashed var(--brand-brown);
  border-radius: var(--radius);
  text-align: center;
}

/* Sticky bottom CTA on /join. Mobile-only — desktop already shows
 * CTAs in the viewport at every scroll position. The body padding rule
 * keeps the last block (WhatsApp fallback) from being hidden behind
 * the bar, including iOS safe-area for notched/home-indicator devices.
 * Hidden by default so it doesn't render at all on desktop, even as a
 * positioned-off-screen element. */
.fnd-sticky-cta { display: none; }
@media (max-width: 768px) {
  .fnd-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  }
  .fnd-sticky-btn {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 700;
  }
  /* Page-bottom breathing room so the last card isn't covered by the
   * sticky bar. Scoped via :has() so only views that actually mount
   * .fnd-sticky-cta get the extra padding — home, cart, kitchen, etc.
   * stay unaffected. :has() is supported in all evergreen browsers
   * since 2023 (the floor we target). */
  body:has(.fnd-sticky-cta) { padding-bottom: 88px; }
}
.fnd-contact-emo {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
}
.fnd-contact h3 {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 8px;
}
.fnd-contact p {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 14px;
}
.fnd-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(37,211,102,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.fnd-wa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37,211,102,0.45);
}
.fnd-wa-ico { font-size: 1.1rem; }
.fnd-wa-num { font-size: 1rem; letter-spacing: .01em; }
.fnd-wa-tag {
  font-size: .72rem;
  background: rgba(255,255,255,0.22);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 700;
}

/* ================================================== /apply lean form
 * Continues the warmth of /fundadora into the registration screen.
 * 3 visible fields with a progress indicator so the cook never feels
 * deep in a form. */
.apply-hero { text-align: center; padding: 16px 0 14px; }
.apply-hero img, .apply-hero svg { height: 64px; margin: 0 auto 8px; }
.apply-h1 {
  font-family: var(--font-brand);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.18;
  margin-bottom: 8px;
  color: var(--ink);
}
.apply-sub {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 440px;
  margin: 0 auto;
}
.apply-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 14px 0 18px;
  font-size: .8rem;
  flex-wrap: wrap;
}
.apply-step {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 8px;
}
.apply-step.active { color: var(--brand); }
.apply-step.done { color: var(--green); }
.apply-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ddd;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}
.apply-step.active .apply-step-n { background: var(--brand); }
.apply-step.done .apply-step-n { background: var(--green); }

/* ── Kitchen wizard (multi-step onboarding at /apply for logged-in
 * cooks). Linear flow, one question per screen. The chrome at the
 * top is just a progress bar + "Passo N de M" label, intentionally
 * lean so each screen reads as a single question, not a form. */
.wiz-shell { padding: 4px 0 8px; }
.wiz-progress {
  height: 6px; background: #efece5; border-radius: 999px; overflow: hidden;
  margin: 4px 0 6px;
}
.wiz-progress-bar {
  height: 100%; background: var(--brand);
  border-radius: 999px; transition: width .25s ease;
}
.wiz-step-label {
  font-size: .78rem; color: var(--muted); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px;
}
.wiz-body { display: block; }
.wiz-q {
  font-size: 1.45rem; line-height: 1.25; font-weight: 800;
  color: var(--ink); margin: 8px 0 8px;
}
.wiz-hint {
  color: var(--muted); font-size: .95rem; line-height: 1.5;
  margin: 0 0 18px;
}
.wiz-cta { width: 100%; margin-top: 8px; padding: 14px 16px; font-weight: 800; }
.wiz-back { width: 100%; margin-top: 8px; font-size: .9rem; }
/* Photo picker shared by profile + dish steps. Round avatar-style
 * preview + a ghost button below — the file input is hidden inside
 * the label so the whole label acts as the trigger. */
.wiz-photo {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin: 4px 0 18px;
}
.wiz-photo-preview {
  width: 120px; height: 120px; border-radius: 16px;
  background: #efece5; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 2.4rem;
}
.wiz-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.wiz-photo-btn { cursor: pointer; padding: 8px 14px; font-size: .9rem; }
/* Radio-card option list used by the hours step. Each radio row is
 * a tappable block (label wraps the input + the description), with
 * the active option marked by an accent border. */
.wiz-radio {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; margin-bottom: 10px;
  background: #fafaf6;
}
.wiz-radio input[type="radio"] { margin-top: 2px; flex-shrink: 0; }
.wiz-radio:has(input[type="radio"]:checked) {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 2px rgba(199, 92, 38, .12);
}
.wiz-sched { margin: 12px 0 4px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.wiz-sched-times { display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.wiz-sched-times label { display: flex; align-items: center; gap: 6px;
  font-size: .9rem; color: var(--muted); }
.wiz-sched-times input[type="time"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 1rem;
}
.wiz-sched-days {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
@media (max-width: 480px) {
  .wiz-sched-days { grid-template-columns: repeat(4, 1fr); }
}
.wiz-sched-day {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px;
  font-size: .88rem; cursor: pointer; background: #fafaf6;
}
.wiz-sched-day:has(input:checked) {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.wiz-sched-day input[type="checkbox"] { accent-color: #fff; }

/* Celebration step. Big emoji, no chrome, single CTA. */
.wiz-done { text-align: center; padding: 20px 0; }
.wiz-done-emo { font-size: 3.5rem; line-height: 1; margin-bottom: 12px; }
.wiz-done-note {
  background: #fff7e6; border: 1px solid #ffd9a8;
  padding: 12px 14px; border-radius: 10px;
  font-size: .9rem; color: #6b3a00; margin: 14px 0;
}
.apply-form .field { margin-bottom: 16px; }
.apply-photo-field { margin-bottom: 18px; }
.apply-cta {
  width: 100%;
  margin-top: 8px;
  font-size: 1.05rem;
  padding: 14px 18px;
}
.apply-fineprint {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 14px;
}
.apply-defer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px;
  background: #fff7ee;
  border-radius: 12px;
  border: 1px dashed var(--brand);
  font-size: .9rem;
  line-height: 1.5;
}
.apply-defer-emo { font-size: 1.4rem; line-height: 1; }
.apply-section-h {
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: .9rem;
  color: var(--brand-brown);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.apply-section-sub-h {
  font-weight: 800;
  font-size: .92rem;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 4px;
}
.apply-section-sub {
  font-size: .86rem;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.apply-divider {
  height: 1px;
  background: var(--line);
  margin: 20px 0;
}

/* ================================================== welcome screen
 * One-shot celebration after first /apply submission. */
.welcome-hero {
  text-align: center;
  padding: 20px 0 16px;
  background: linear-gradient(180deg, #fff7ee 0%, transparent 100%);
  margin: -12px -12px 16px;
  border-radius: 0 0 24px 24px;
}
.welcome-confetti { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.welcome-h1 {
  font-family: var(--font-brand);
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--brand-brown);
  margin-bottom: 6px;
}
.welcome-sub {
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 0 18px;
}
.welcome-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.welcome-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.welcome-logo-fallback {
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.welcome-link {
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  color: var(--brand-brown);
  word-break: break-all;
  font-weight: 700;
}
.welcome-checklist { margin-top: 12px; }
.welcome-task {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}
.welcome-task-n {
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.welcome-task-body {
  flex: 1;
  font-size: .92rem;
  line-height: 1.45;
}
.welcome-task-body p { margin-top: 4px; font-size: .85rem; }
.welcome-task .btn.sm { align-self: center; flex-shrink: 0; }
.welcome-help {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
  border: 1px dashed var(--brand-brown);
  font-size: .9rem;
  line-height: 1.4;
}
.welcome-help .btn.sm { color: #fff !important; }

/* perks shown right above the next-steps checklist on the welcome state
 * — celebrate the cook's founder status and/or active 0% intro window. */
.welcome-perks { margin-top: 14px; display: grid; gap: 10px; }
.welcome-perk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.45;
}
.welcome-perk-emo { font-size: 1.6rem; line-height: 1; }
.welcome-perk-founder { border-color: var(--brand); background: #fff7ee; }
.welcome-perk-intro { border-color: var(--green); background: #ecf7ef; }

/* persistent Setup tab on /kitchen — celebration hero + progress bar +
 * checklist with live status icons. Replaces the one-shot welcome page. */
.setup-hero { text-align: center; padding: 10px 0 12px; }
.setup-hero-emo { font-size: 2.4rem; line-height: 1; margin-bottom: 4px; }
.setup-hero-h {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brand-brown);
  margin: 0 0 6px;
  line-height: 1.15;
}
.setup-hero-sub { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.45; }

.setup-progress {
  background: var(--line);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.setup-progress-bar {
  background: linear-gradient(90deg, var(--brand) 0%, var(--green) 100%);
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.setup-checklist { margin-top: 18px; display: grid; gap: 10px; }
.setup-task {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.setup-task.is-done {
  background: #ecf7ef;
  border-color: var(--green);
}
.setup-task-body b {
  display: block;
  font-size: .98rem;
  margin-bottom: 2px;
}
.setup-task-body p { margin: 0; font-size: .86rem; line-height: 1.45; }
.setup-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
}
.setup-icon.done { background: var(--green); color: #fff; }
.setup-icon.todo { background: var(--line); color: var(--muted); }
.setup-icon.wait { background: #fff2d6; color: #8a6500; }

/* Tab badge — small pill next to "Setup" showing pending count. */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

/* ============================================================ /join v2
 * Landing refresh to match the Meta-ad creatives (warm cream + terracotta
 * + editorial serif). Scoped to /join-only classes; the legacy .fnd-*
 * rules above stay untouched so older landings/wizards don't regress. */
.fnd-hero-split {
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 24px 0 32px;
}
@media (min-width: 720px) {
  .fnd-hero-split {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    padding: 48px 0 64px;
  }
  .fnd-hero-split .fnd-hero-text { order: 1; }
  .fnd-hero-split .fnd-hero-img { order: 2; }
}
.fnd-hero-img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 24px;
  box-shadow: var(--shadow-lg);
  background: #f1ede4;
}
.fnd-hero-h1 {
  font-family: var(--font-serif);
  font-weight: 900; line-height: 1.05;
  font-size: 2.4rem; color: var(--brand-brown);
  letter-spacing: -0.02em;
}
@media (min-width: 720px) { .fnd-hero-h1 { font-size: 3.6rem; } }
.fnd-hero-h1 em { color: var(--brand); font-style: normal; }
.fnd-hero-sub {
  font-size: 1.05rem; color: var(--muted); line-height: 1.5;
  margin-top: 14px;
}
.fnd-hero-cta-row { margin-top: 22px; }
.fnd-hero-cta-row .btn { padding: 14px 22px; font-size: 1.05rem; }
.fnd-hero-trust { font-size: .82rem; color: var(--muted); margin-top: 10px; }

/* "You don't need..." section — echoes ad creative #1 */
.fnd-dont-need { padding: 40px 0; text-align: center; }
.fnd-dont-need h2 {
  font-family: var(--font-serif); font-weight: 900;
  font-size: 1.9rem; line-height: 1.1; color: var(--brand-brown);
  max-width: 22ch; margin: 0 auto;
  letter-spacing: -0.01em;
}
@media (min-width: 600px) { .fnd-dont-need h2 { font-size: 2.4rem; } }
.fnd-dont-need ul {
  list-style: none; padding: 0;
  margin: 22px auto 0; max-width: 360px;
}
.fnd-dont-need li {
  padding: 10px 0; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.fnd-dont-need li::before {
  content: "✕";
  color: var(--muted); font-weight: 800; font-size: .9rem;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #f1ede4;
}
.fnd-dont-need .closer {
  margin-top: 26px; font-weight: 700;
  color: var(--brand-brown); font-size: 1.1rem;
  font-family: var(--font-serif);
}

/* 3 steps */
.fnd-3steps {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  padding: 32px 0;
}
@media (min-width: 600px) {
  .fnd-3steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.fnd-step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px 20px; text-align: center;
}
.fnd-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 900; font-size: 1rem;
  margin-bottom: 12px;
}
.fnd-step-h {
  font-family: var(--font-serif); font-weight: 800;
  font-size: 1.2rem; color: var(--brand-brown);
}
.fnd-step-p { font-size: .92rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* cuisine strip — anchored by cultures.jpg (ad creative #4) */
.fnd-cuisines { padding: 40px 0; text-align: center; }
.fnd-cuisines-h {
  font-family: var(--font-serif); font-weight: 800;
  font-size: 1.4rem; color: var(--brand-brown);
  margin-bottom: 14px; letter-spacing: -0.01em;
}
.fnd-cultures-img {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 22px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  background: #f1ede4;
  /* Image carries its own headline; cap height on tall portrait
   * (story-format) uploads so it doesn't dominate the desktop view. */
  max-height: 720px;
  object-fit: cover;
}
.fnd-cuisines-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 600px; margin: 0 auto;
}
.fnd-cuisine-chip {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px;
  font-size: .92rem; color: var(--ink);
}

/* serif accent for existing landing classes on /join */
.plan-headline, .fnd-final-h {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--brand-brown);
  font-weight: 900;
}
.fnd-final-h { font-size: 2rem; line-height: 1.1; margin-bottom: 10px; }
@media (min-width: 600px) { .fnd-final-h { font-size: 2.4rem; } }


/* ─────────────────────────────────── Admin WhatsApp inbox (admin Chats tab)
 * Two-pane layout: list (left, fixed width) + thread (right, fills).
 * On mobile the list and thread stack — admin is typically a desktop
 * surface so we don't over-engineer the mobile case (full-width
 * collapse, no swipe-back gesture). Variables reuse the brand
 * palette already in :root above. */
.wa-chat {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: 0;
  height: calc(100vh - 220px);
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper, #fff);
}
@media (max-width: 720px) {
  .wa-chat {
    grid-template-columns: 1fr;
    /* Fill the visible area below the admin tabs so the master/detail
     * panes occupy a real screen and the composer sits where the
     * thumb expects it. dvh handles iOS Safari's collapsing URL bar
     * better than plain vh. */
    height: calc(100dvh - 200px);
    min-height: 420px;
  }
  .wa-list { max-height: none; }

  /* Master/detail toggles. Desktop ignores these (the grid stays
   * two-column); on a phone the .wa-chat carries either --show-list
   * (the inbox) or --show-thread (one conversation full-screen with
   * a back button in the thread header). admin-chats.js flips them
   * on open / back. */
  .wa-chat.wa-chat--show-thread .wa-list { display: none; }
  .wa-chat.wa-chat--show-list .wa-thread { display: none; }
  .wa-back { display: inline-flex; }
}
/* Default: back-arrow chrome is hidden on every breakpoint above the
 * mobile cutoff. The button still ships in the DOM so the same render
 * function works both places. */
.wa-back {
  display: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 1.4rem; line-height: 1;
  margin-right: 6px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-back:hover { background: rgba(255,255,255,0.28); }
/* Mobile composer: 4 icon buttons + textarea + Send all need to fit
 * inside a ~360px viewport. Without these tweaks the Send button gets
 * pushed off-screen the moment the admin starts typing. We shrink the
 * gap + padding, downsize the icon chrome a touch, and collapse the
 * "Send" text into a paper-plane glyph so the button matches the
 * other icon controls in width. */
@media (max-width: 600px) {
  .wa-send {
    padding: 8px 10px;
    gap: 6px;
  }
  .wa-send-icon {
    width: 36px; height: 36px;
    font-size: .95rem;
  }
  .wa-send-input {
    min-height: 36px;
    padding: 8px 12px;
    font-size: .9rem;
  }
  .wa-send-btn {
    /* Drop the "Send" word in favor of a glyph; the chip now lines up
     * with the other icon buttons. font-size: 0 hides the original
     * text without needing a JS swap. */
    padding: 0;
    width: 38px; min-height: 36px;
    border-radius: 50%;
    font-size: 0;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wa-send-btn::after {
    content: '➤';
    font-size: 1rem;
    color: #fff;
    line-height: 1;
  }
  .wa-send-btn:disabled::after { opacity: .8; }
}
/* Mobile composer: 4 icon buttons + textarea + Send all need to fit
 * inside a ~360px viewport. Without these tweaks the Send button gets
 * pushed off-screen the moment the admin starts typing. We shrink the
 * gap + padding, downsize the icon chrome a touch, and collapse the
 * "Send" text into a paper-plane glyph so the button matches the
 * other icon controls in width. */
@media (max-width: 600px) {
  .wa-send {
    padding: 8px 10px;
    gap: 6px;
  }
  .wa-send-icon {
    width: 36px; height: 36px;
    font-size: .95rem;
  }
  .wa-send-input {
    min-height: 36px;
    padding: 8px 12px;
    font-size: .9rem;
  }
  .wa-send-btn {
    /* Drop the "Send" word in favor of a glyph; the chip now lines up
     * with the other icon buttons. font-size: 0 hides the original
     * text without needing a JS swap. */
    padding: 0;
    width: 38px; min-height: 36px;
    border-radius: 50%;
    font-size: 0;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wa-send-btn::after {
    content: '➤';
    font-size: 1rem;
    color: #fff;
    line-height: 1;
  }
  .wa-send-btn:disabled::after { opacity: .8; }
}

.wa-list {
  border-right: 1px solid var(--line);
  background: #faf7f1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wa-list-h {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wa-list-title { font-weight: 700; color: var(--ink); }
.wa-refresh {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; font-size: 1rem;
}
.wa-list > div[data-list] { flex: 1; overflow-y: auto; }
.wa-list-empty, .wa-list-err {
  padding: 18px 14px; color: var(--muted, #6f5e54);
  font-size: .88rem; line-height: 1.5;
}
.wa-list-err { color: #b00020; }

.wa-list-row {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid #efe9dc;
  cursor: pointer;
  align-items: flex-start;
}
.wa-list-row:hover { background: #f3ede0; }
.wa-list-row.active { background: #fff2e6; }
.wa-list-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.wa-list-body { flex: 1; min-width: 0; }
.wa-list-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px;
}
.wa-list-name {
  font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .92rem;
}
.wa-list-time { font-size: .72rem; color: var(--muted, #6f5e54); flex-shrink: 0; }
.wa-list-bot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; margin-top: 2px;
}
.wa-list-preview {
  font-size: .82rem; color: #7a6c60;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.wa-list-prefix { color: #aa9c8e; }
.wa-list-badge {
  background: var(--brand, #ff5a36); color: #fff;
  border-radius: 999px; padding: 1px 7px;
  font-size: .7rem; font-weight: 700;
}
.wa-list-sub {
  font-size: .72rem; color: #9c8b7d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.wa-thread {
  display: flex; flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(circle at 25% 25%, #f6efe2 0, transparent 35%),
    radial-gradient(circle at 75% 75%, #f6efe2 0, transparent 35%),
    #fbf6ea;
}
.wa-thread-empty {
  margin: auto; text-align: center; padding: 32px;
  color: var(--muted, #6f5e54);
}
.wa-empty-icon { font-size: 3rem; margin-bottom: 8px; }
.wa-empty-sub { font-size: .82rem; max-width: 380px; margin: 8px auto 0; }

.wa-head {
  padding: 14px 18px;
  color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.wa-head-name { font-weight: 700; font-size: 1.02rem; }
.wa-head-sub { font-size: .82rem; opacity: .92; margin-top: 2px; }
.wa-head-meta { text-align: right; font-size: .8rem; }
.wa-head-phone { opacity: .95; }
.wa-head-tag {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  margin-top: 4px;
}

.wa-thread-body {
  flex: 1; overflow-y: auto;
  padding: 18px 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.wa-thread-empty-msg {
  margin: auto; color: var(--muted, #6f5e54); font-size: .88rem;
}
.wa-warn {
  background: #fff7e6; border-left: 3px solid #f5b400;
  padding: 9px 12px; border-radius: 0 8px 8px 0;
  font-size: .82rem; line-height: 1.5; color: #5d4a18;
  margin-bottom: 8px;
}
.wa-thread-err {
  margin: 20px; padding: 12px; color: #b00020;
  background: #fde9ec; border-radius: 8px;
}

.wa-msg { display: flex; }
.wa-msg-in { justify-content: flex-start; }
.wa-msg-out { justify-content: flex-end; }
.wa-msg-bubble {
  max-width: 70%;
  padding: 7px 10px 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  position: relative;
}
.wa-msg-out .wa-msg-bubble { background: #d9fdd3; }
.wa-msg-body { font-size: .92rem; line-height: 1.45; color: var(--ink); word-wrap: break-word; }
.wa-msg-meta {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 4px; margin-top: 2px;
}
.wa-msg-time { font-size: .68rem; color: #6f7a82; }
.wa-tick { font-size: .75rem; font-weight: 700; letter-spacing: -.04em; }
.wa-tick-sent { color: #99a4ad; }
.wa-tick-delv { color: #99a4ad; }
.wa-tick-read { color: #4fc3f7; }
.wa-tick-fail { color: #c62828; }
.wa-msg-err {
  font-size: .72rem; color: #c62828;
  border-top: 1px solid #f7caca; margin-top: 4px; padding-top: 3px;
}

.wa-media-img-wrap { display: block; margin: -2px -3px 5px; }
.wa-media-img { width: 100%; max-width: 280px; border-radius: 7px; display: block; }
.wa-media-audio { width: 100%; max-width: 240px; margin: -2px 0 5px; display: block; }
.wa-media-video { width: 100%; max-width: 280px; border-radius: 7px; margin: -2px 0 5px; }
.wa-media-file {
  display: inline-block; padding: 4px 8px;
  background: #f0eee8; border-radius: 6px; font-size: .82rem;
  color: var(--ink); text-decoration: none; margin-bottom: 4px;
}

.wa-send {
  border-top: 1px solid var(--line);
  background: #f0eee8;
  display: flex; gap: 8px; padding: 10px 12px;
  align-items: flex-end;
  flex-shrink: 0;
}
.wa-send-input {
  flex: 1; border: 1px solid var(--line); border-radius: 18px;
  padding: 9px 14px; font-size: .92rem; line-height: 1.4;
  resize: none; max-height: 120px; min-height: 38px;
  background: #fff; font-family: inherit;
}
.wa-send-input:focus { outline: 2px solid rgba(255,90,54,0.3); border-color: var(--brand, #ff5a36); }
.wa-send-btn {
  background: var(--brand, #ff5a36); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 18px; font-weight: 700;
  cursor: pointer; min-height: 38px;
}
.wa-send-btn:disabled { opacity: .6; cursor: default; }

/* Cuisine picker on wizard step 1 — dropdown + reactive flag emoji
 * next to it. The flag updates inline when the cook switches, so she
 * sees the right country before submitting. .field select base
 * styling already covers the select itself; this just lays it out
 * next to the flag and sizes the flag readably. */
.wiz-cuisine-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wiz-cuisine-row select { flex: 1; min-width: 0; }
.wiz-cuisine-flag {
  font-size: 1.6rem;
  line-height: 1;
  min-width: 1.8rem;
  text-align: center;
}

/* Admin "Abandoned" tab — cards listing cooks who started signup but
 * didn't finish, with WhatsApp outreach buttons. Card uses the same
 * card/.card-pad rhythm as other admin lists; the language buttons
 * are sized for thumb-tapping since the operator may use this on
 * mobile while on the go. */
.abn-summary { margin-bottom: 14px; }
.abn-h {
  margin: 22px 0 10px;
  font-size: 1rem;
  color: var(--brand-brown, #4a2a1d);
  display: flex;
  align-items: center;
  gap: 8px;
}
.abn-h-count {
  background: var(--tint, #fff2e6);
  color: var(--brand, #ff5a36);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .76rem;
  font-weight: 700;
}
.abn-card {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e4ddd0);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.abn-card-h {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.abn-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5a36, #ff7e54);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.abn-meta { flex: 1; min-width: 0; }
.abn-name { font-weight: 700; font-size: .98rem; color: var(--ink, #1d1410); }
.abn-sub { font-size: .84rem; margin-top: 2px; line-height: 1.4; }
.abn-muted { color: var(--muted, #6f5e54); }
.abn-warn {
  display: inline-block;
  background: #fff3cd;
  color: #6b5212;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .76rem;
  margin-top: 4px;
}
.abn-status { flex-shrink: 0; }
.abn-badge {
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.abn-cta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0e9da;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.abn-cta-label {
  font-size: .82rem;
  color: var(--muted, #6f5e54);
  margin-right: 4px;
}
.abn-wa { padding: 5px 12px; font-size: .85rem; }
.abn-wa:disabled { opacity: .4; cursor: not-allowed; }

.abn-outreach { padding: 6px 12px; font-size: .88rem; }
.abn-outreach:disabled { opacity: .4; cursor: not-allowed; }
/* Subtle ring marking the cook's saved-locale button as recommended.
 * Doesn't disable the other two — older cooks whose locale defaulted
 * to 'en' may still read PT/ES and the operator can override on the
 * fly. */
.abn-outreach-rec {
  box-shadow: 0 0 0 2px rgba(255,90,54,0.35);
  font-weight: 700;
}

/* WhatsApp admin chat — template picker modal. Overlays the chat
 * surface; two views (list of templates + variable form) reuse the
 * same shell. */
.wa-send-icon {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e4ddd0);
  border-radius: 18px;
  width: 38px; height: 38px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-send-icon:hover { background: var(--tint, #fff2e6); }
.wa-send-icon.wa-mic-rec {
  background: #e63946;
  color: #fff;
  border-color: #e63946;
  width: auto; min-width: 56px; padding: 0 10px;
  animation: wa-mic-pulse 1s ease-in-out infinite;
}
@keyframes wa-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(230,57,70,0); }
}

/* Attach preview — appears above the send box when an image is
 * picked or a voice note finished recording. Operator can preview,
 * caption, and send or discard. */
.wa-attach-preview {
  padding: 10px 12px;
  background: #fff7ec;
  border-top: 1px solid #f0e3cf;
}
.wa-attach-row {
  display: flex; gap: 10px; align-items: center;
}
.wa-attach-img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.wa-attach-audio { width: 240px; flex-shrink: 0; }
.wa-attach-body { flex: 1; min-width: 0; }
.wa-attach-caption {
  width: 100%;
  border: 1px solid var(--line, #e4ddd0);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .88rem;
  font-family: inherit;
  margin-bottom: 6px;
}
.wa-attach-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}

.wa-tmpl-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px;
}
@media (min-width: 600px) { .wa-tmpl-overlay { align-items: center; } }

.wa-tmpl-modal {
  background: var(--paper, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.wa-tmpl-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e4ddd0);
}
.wa-tmpl-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.wa-tmpl-close, .wa-tmpl-back {
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--muted, #6f5e54);
}
.wa-tmpl-close:hover, .wa-tmpl-back:hover { background: #f0e9da; }
.wa-tmpl-intro {
  margin: 0; padding: 10px 16px 0;
  font-size: .85rem; color: var(--muted, #6f5e54);
}
.wa-tmpl-list {
  padding: 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.wa-tmpl-card {
  display: block;
  width: 100%; text-align: left;
  background: #faf7f1;
  border: 1px solid var(--line, #e4ddd0);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
}
.wa-tmpl-card:hover { background: var(--tint, #fff2e6); border-color: var(--brand, #ff5a36); }
.wa-tmpl-card-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.wa-tmpl-name { font-weight: 700; color: var(--ink, #1d1410); }
.wa-tmpl-aud {
  background: #e7e0d0; color: #5d4a18;
  font-size: .68rem; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.wa-tmpl-aud-cook { background: #ffd9c9; color: #8a3914; }
.wa-tmpl-aud-customer { background: #c9e7d4; color: #1f5a3a; }
.wa-tmpl-desc {
  font-size: .82rem; color: var(--muted, #6f5e54);
  margin: 4px 0 6px;
}
.wa-tmpl-preview {
  font-size: .78rem; color: #5d4a18;
  background: #fff;
  border: 1px dashed var(--line, #e4ddd0);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-tmpl-preview-box {
  margin: 10px 16px;
  padding: 10px;
  background: #f0eee8;
  border-radius: 10px;
}
.wa-tmpl-preview-lbl {
  font-size: .72rem; font-weight: 700; color: var(--muted, #6f5e54);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px;
}
.wa-tmpl-preview-body {
  font-size: .9rem; line-height: 1.5;
  color: var(--ink, #1d1410);
  white-space: pre-wrap; word-break: break-word;
}
.wa-tmpl-form {
  padding: 0 16px 14px;
  overflow-y: auto;
}
.wa-tmpl-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--line, #e4ddd0);
  background: #faf7f1;
  margin: 0 -16px -14px;
}