/* Screen-specific layout. Components live in components.css. */

/* ---------- Auth screens ---------- */
.auth { width: 100%; max-width: 440px; min-height: 100dvh; margin: 0 auto; padding: calc(var(--s8) + var(--safe-top)) var(--s5) calc(var(--s8) + var(--safe-bottom)); display: grid; gap: var(--s4); align-content: start; }
.auth__back { display: inline-flex; align-items: center; gap: var(--s1); width: fit-content; min-height: 40px; font-weight: 600; }
.auth__logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: var(--shadow); }
.auth h1 { font-size: var(--text-2xl); }
.auth__foot { text-align: center; }
.auth .card h2 { display: flex; align-items: center; gap: var(--s2); }
.step { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: var(--text-sm); color: var(--on-brand); background: var(--brand); border-radius: var(--r-pill); }
.lang-chip--float { position: fixed; top: calc(var(--s3) + var(--safe-top)); right: var(--s4); z-index: 10; color: var(--brand); border-color: var(--line); background: var(--surface); }
.lang-chip--dark { color: var(--brand); border-color: var(--line); }

/* ---------- Customer ---------- */
.menu-line { display: flex; gap: var(--s3); margin-top: var(--s2); color: var(--ink); }
.menu-line .i { margin-top: 2px; color: var(--accent); }
.menu-line small { display: block; }
fieldset.segmented-set { display: grid; gap: 0; margin: 0; padding: 0; border: 0; }
.order-total { display: grid; gap: var(--s1); background: var(--brand-soft); border-color: transparent; }
.receipt-amount { font-size: 2rem; color: var(--brand); }
.balance-figure { white-space: nowrap; color: var(--brand); }

/* ---------- Rider ---------- */
.zone-banner { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--on-brand); background: linear-gradient(145deg, var(--brand), var(--brand-dark)); border-radius: var(--r-lg); }
.zone-banner small { color: inherit; opacity: .85; display: block; }
.delivery__address { display: flex; gap: var(--s2); align-items: flex-start; color: var(--muted); }
.delivery__address .i { margin-top: 3px; }
.status-card-paused, .status-card-payment_required { opacity: .7; }
.status-card-delivered { border-color: var(--ok); }

/* ---------- Admin ---------- */
.card-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.religion-groups { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 720px) { .religion-groups { grid-template-columns: repeat(2, 1fr); } }
.manual-payment-panel .selected-customer { margin: 0; }

/* ---------- Landing ---------- */
.landing { max-width: 720px; margin: 0 auto; padding-bottom: calc(96px + var(--safe-bottom)); }
.landing__bar { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--s3) + var(--safe-top)) var(--s4) var(--s3); }
.landing__brand { display: flex; align-items: center; gap: var(--s2); color: var(--ink); }
.landing__brand img { border-radius: 10px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s2) var(--s4) var(--s5); }
.hero__copy { display: grid; gap: var(--s2); }
.hero h1 { font-size: 1.4rem; line-height: 1.25; }
.hero p { font-size: var(--text-sm); color: var(--muted); }
.hero__actions { display: grid; gap: var(--s2); margin-top: var(--s1); }
.hero__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
@media (min-width: 720px) { .hero { gap: var(--s6); } .hero h1 { font-size: 2rem; } .hero p { font-size: var(--text-md); } .hero__actions { grid-template-columns: 1fr 1fr; } .hero__img { aspect-ratio: 4 / 3; } }

.landing__section { display: grid; gap: var(--s4); padding: var(--s4); }
.landing__section h2 { font-size: var(--text-xl); }

.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); margin: var(--s3) 0; }
.day-tabs button { display: grid; justify-items: center; padding: var(--s2) 0; font-size: var(--text-xs); color: var(--muted); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.day-tabs b { font-size: var(--text-md); color: var(--ink); }
.day-tabs button[aria-selected="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.day-tabs button[aria-selected="true"] b { color: inherit; }
.featured-menu .menu-label { font-size: var(--text-sm); font-weight: 700; color: var(--brand-dark); }
.featured-menu .menu-deadline { display: block; margin-top: var(--s2); font-size: var(--text-sm); font-weight: 600; color: var(--brand-dark); }
.featured-menu .menu-deadline:empty { display: none; }

.plan-grid { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card--featured { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow); }
.plan-card strong small { font-weight: 400; }
.builder-summary { display: grid; gap: var(--s2); padding: var(--s3); background: var(--surface-2); border-radius: var(--r-md); }
.summary-lines { display: grid; gap: var(--s1); font-size: var(--text-sm); color: var(--muted); }

.landing__footer { display: grid; gap: var(--s2); padding: var(--s6) var(--s4); color: var(--muted); border-top: 1px solid var(--line); }
.landing__footer a { color: var(--brand); }
.mobile-order-cta { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + var(--safe-bottom)); z-index: 15; max-width: 480px; margin: 0 auto; box-shadow: var(--shadow); transform: translateY(160%); transition: transform .25s ease; }
.mobile-order-cta.visible { transform: none; }

/* Toggle card text stacks vertically */
.toggle-card strong, .toggle-card small { display: block; }

/* Order page */
.landing__back { display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; font-weight: 600; }
.plan-builder h1 { font-size: var(--text-xl); margin-bottom: var(--s3); }

/* Customer screens have no top bar: the tab bar is the only chrome. */
body.role-customer:not(.is-landing):not(.is-bare) .page { padding-top: calc(var(--s5) + var(--safe-top)); }
.page-back { display: flex; align-items: center; gap: var(--s1); width: fit-content; min-height: 40px; margin: calc(var(--safe-top) + var(--s3)) var(--s4) calc(var(--s4) * -1); font-weight: 600; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); font-weight: 600; color: inherit; }

/* ---------- Admin: collapsible editors (menus, zones) ---------- */
details.menu-edit { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
details.menu-edit > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
details.menu-edit[open] > summary { margin-bottom: var(--s3); }
details.menu-edit > .form, details.menu-edit > form { margin-bottom: var(--s3); }
details.card.menu-edit { border-top: 0; margin-top: 0; }
details.menu-edit .setting-row { align-items: flex-end; flex-wrap: wrap; }
details.menu-edit .setting-row > form.form { flex: 1 1 260px; }