/* Cards, tiles, pills, toggles, search, hold buttons, legal page, footer.
   Layer 3 of 5. */

/* ── Icon + square toggle (theme-aware, professional) ─ */
.btn-icon{
  width:var(--control-height);height:var(--control-height);padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;border:1px solid transparent;font-size:1.05rem;line-height:1;
  flex-shrink:0;
}
.btn-icon--plus{background:var(--button-primary);color:#fff;border-color:transparent;}
.btn-icon--plus:hover{background:var(--button-primary-hover);}
.btn-icon--plus.btn-icon--ghost{background:var(--card-bg);color:var(--text);border-color:var(--border);}
.btn-icon--plus.btn-icon--ghost:hover{background:var(--surface-hover);}
.toggle-square{display:inline-flex;align-items:center;justify-content:center;height:var(--control-height);cursor:pointer;user-select:none;}
.toggle-square input{display:none;}
.toggle-square .ts-track{
  width:48px;height:var(--control-height);background:var(--border);border-radius:7px;position:relative;
  transition:background .18s,border-color .18s;border:1px solid var(--border);flex-shrink:0;
}
.toggle-square .ts-thumb{
  width:26px;height:26px;background:#fff;border-radius:5px;position:absolute;top:50%;left:3px;transform:translateY(-50%);
  transition:left .18s, background .18s;box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle-square input:checked + .ts-track{background:var(--primary);border-color:var(--primary);}
.toggle-square input:checked + .ts-track .ts-thumb{left:17px;background:#fff;}
.toggle-square input:disabled + .ts-track{opacity:0.5;cursor:not-allowed;}

.inline-form { display: inline-flex; gap: 0.35rem; align-items: center; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: .55rem 0 0;
  display: block;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  white-space: nowrap;
  font-size: .82rem;
}
table thead, table tbody { display: table; width: 100%; }
table th, table td { text-align: left; padding: .46rem .55rem; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: normal; }
table th { background: var(--surface-subtle); color: var(--muted); font-size: .72rem; font-weight: 720; letter-spacing: .025em; text-transform: uppercase; }
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:hover { background: var(--surface-subtle); }

table.db-table { display: table; table-layout: auto; white-space: nowrap; }
table.db-table thead, table.db-table tbody { display: table-row-group; }
table.db-table th { padding: 0.5rem 0.75rem; font-size: 0.85rem; border-bottom: 2px solid var(--border); background: var(--card-bg); position: sticky; top: 0; z-index: 1; }
table.db-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
table.db-table td input { all: unset; box-sizing: border-box; width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; font-family: monospace; background: var(--card-bg); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.db-table td input:focus { border-color: var(--primary); outline: 1px solid var(--primary); }
table.db-table td input.dirty { border-color: #f59e0b; background: #78350f; color: #fef3c7; }
table.db-table .db-actions { display: inline-flex; gap: 0.35rem; align-items: center; }
table.db-table .db-actions button { padding: 0.3rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }
table.db-table th .col-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; background: transparent; z-index: 2; }
table.db-table th .col-resize:hover, table.db-table th .col-resize.active { background: var(--primary); }

.menu-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .55rem; }
.menu-row {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 7px; padding: .52rem .65rem;
  transition: border-color .15s ease, background .15s ease;
}
.menu-row:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.menu-row > div:first-child { flex: 1; min-width: 0; }
.menu-row > div:first-child strong { line-height: 1.2; }
.menu-row > div:first-child p { margin: .1rem 0 0; color: var(--muted); line-height: 1.25; font-size: .78rem; }
.menu-row .price { color: var(--text); font-weight: 700; white-space: nowrap; }
.add-form { display: flex; gap: .3rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.add-form input[type="number"] {
  width: 3.5em;
  height: var(--control-height);
  padding: .3rem .35rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: .84rem;
  font-family: inherit;
  background: var(--surface-subtle);
  color: var(--text);
  text-align: center;
}
.added-confirm { color: var(--success); font-size: 0.9rem; }

.muted { color: var(--muted); font-size: 0.9rem; }
.total { font-weight: 700; font-size: 1.1rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 22px;
  padding: .1rem .42rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.status::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-placed { background: var(--info-soft); color: var(--info); }
.status-accepted, .status-preparing, .status-pending { background: var(--warning-soft); color: var(--warning); }
.status-out_for_delivery { background: var(--info-soft); color: var(--info); }
.status-delivered { background: var(--success-soft); color: var(--success); }
.status-cancelled { background: var(--danger-soft); color: var(--danger); }
.status-vendor_delivery { background: var(--accent-soft); color: var(--primary); }

/* ── Pill buttons (same theme as status tags) ─────── */
.pill{
  display:inline-flex;align-items:center;gap:.28rem;
  min-height:24px;padding:.12rem .48rem;border-radius:999px;
  font-size:.72rem;font-weight:680;white-space:nowrap;line-height:1.3;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:filter .15s ease,transform .1s ease;
}
.pill:hover{text-decoration:none;filter:brightness(.97);}
.pill:active{transform:translateY(1px);}
.pill:disabled{opacity:0.5;cursor:not-allowed;}
.pill-whatsapp{background:var(--success-soft);color:var(--success);}
.pill-call{background:var(--info-soft);color:var(--info);}
.pill-nav{background:var(--accent-soft);color:var(--primary);}
.pill-otp{background:var(--warning-soft);color:var(--warning);}
.pill-group{display:inline-flex;gap:.28rem;flex-wrap:wrap;align-items:center;}
/* hold variant inside pill — keep pill sizing, not button sizing */
.pill.btn-hold{min-width:unset;height:auto;padding:.12rem .48rem;border-radius:999px;font-size:.72rem;}
.pill.btn-hold .hold-ring{width:14px;height:14px;border-width:1.5px;}

/* ── Search (expands width only, never height) ──────── */
.search-wrap{position:relative;display:inline-flex;align-items:center;gap:.3rem;height:32px;}
.search-toggle{
  width:32px;height:32px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card-bg);border:1px solid var(--border);border-radius:7px;
  color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;
}
.search-toggle:hover{background:var(--surface-hover);color:var(--text);}
/* Open state reads as one continuous capsule: toggle and box share an edge,
   with the seam border removed and the gap collapsed. */
.search-wrap.open{gap:0;}
.search-wrap.open .search-toggle{border-radius:999px 0 0 999px;border-right-color:transparent;}
.search-box{
  display:inline-flex;align-items:center;gap:.25rem;
  height:32px;padding:0 .35rem 0 .6rem;
  background:var(--card-bg);border:1px solid var(--border);border-left:0;
  border-radius:0 999px 999px 0;
  overflow:hidden;white-space:nowrap;
  width:0;opacity:0;pointer-events:none;
  transition:width .22s ease, opacity .15s ease;
}
.search-wrap.open .search-box{width:300px;opacity:1;pointer-events:auto;}
.search-box:focus-within{border-color:var(--border-strong);}
.search-form{display:flex;align-items:center;gap:.25rem;width:100%;margin:0;}
/* Scoped out of the generic `form input` rules above: this one draws its own
   borderless field inside the pill. */
.search-input{
  display:block;width:100%;min-width:0;
  margin:0;padding:0;min-height:0;
  border:0;border-radius:0;
  background:transparent;color:var(--text);
  font-family:inherit;font-size:.85rem;line-height:1.35;
}
.search-input:hover{border-color:transparent;}
.search-input:focus{outline:none;border-color:transparent;box-shadow:none;}
.search-box input::placeholder{color:var(--muted);}
/* Suppress the UA's own clear affordance so only .search-clear shows. */
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
.search-clear{
  background:transparent;border:none;color:var(--muted);cursor:pointer;flex:0 0 auto;
  font-size:1.05rem;line-height:1;padding:0;height:auto;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .12s ease;
}
.search-box.has-value .search-clear{opacity:1;pointer-events:auto;}
.search-clear:hover{color:var(--text);}
.search-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;width:100%;
  background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-md);padding:.3rem;
  z-index:200;max-height:60vh;overflow:auto;overscroll-behavior:contain;display:none;
}
.search-wrap.open .search-dropdown.has-results{display:block;}
/* On phones the pill would overflow the topbar, so the dropdown anchors to
   the sticky topbar instead and spans its full width. */
@media(max-width:700px){
  .search-wrap.open .search-box{width:min(58vw,280px);}
  .search-wrap.open{position:static;}
  .search-wrap.open .search-dropdown{left:0;right:0;width:auto;min-width:0;}
}

.status-wrap { position: relative; display: inline-block; }
.status-wrap .status { cursor: pointer; }
.status-wrap .status::after { content: ' ▾'; font-size: 0.65rem; opacity: 0.6; }

.status-timeline {
  display: none;
  margin: 0.5rem 0 0.25rem;
  padding: 0;
  width: 100%;
}
.status-wrap.open .status-timeline { display: block; }

.status-timeline .tl-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  position: relative;
  padding-bottom: 0.75rem;
  padding-left: 0.15rem;
}
.status-timeline .tl-item:last-child { padding-bottom: 0; }

.status-timeline .tl-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
  position: relative;
}

.status-timeline .tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}

.status-timeline .tl-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: var(--border);
  margin-top: 2px;
}
.status-timeline .tl-item:last-child .tl-line { display: none; }

.status-timeline .tl-body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.status-timeline .tl-label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: capitalize;
}
.status-timeline .tl-date {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.items-list { margin: 0; padding-left: 1.1rem; }

.mini-cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--card-bg) 94%, transparent);
  padding: .55rem .75rem;
  box-shadow: 0 -5px 18px rgba(24,33,47,.08);
  backdrop-filter: blur(12px);
}
.mini-cart-bar.empty { display: none; }
.mini-cart-bar .button { margin: 0; }

.login-prompt { padding: 1.25rem; border: 1px dashed var(--border-strong); border-radius: 8px; }

.dummy-captcha {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .65rem; padding: .45rem .65rem;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-subtle); cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.dummy-captcha:hover { border-color: var(--primary); }
.dummy-captcha.dc-solved { cursor: default; }
.dc-checkbox { font-size: 1.3rem; line-height: 1; }
.dc-label { font-size: 0.9rem; color: var(--text); }
.dc-spinner { font-size: 1.1rem; }

.pw-wrap { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.pw-wrap .pw-input { margin-top: 0; flex: 1; }
.pw-toggle {
  padding: 0 .55rem; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-subtle); color: var(--muted);
  cursor: pointer; line-height: 1; font-size: .9rem;
}
.pw-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.role-selector { display: flex; gap: .4rem; margin-bottom: .65rem; }
.role-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  padding: .55rem .3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  text-align: center;
  color: var(--text);
}
.role-card:hover { border-color: var(--border-strong); }
.role-card:active { transform: translateY(1px); }
.role-card input { display: none; }
.role-card:has(input:checked) { border-color: var(--primary); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--primary); }
.role-icon { font-size: 1.5rem; }
.role-label { font-size: 0.8rem; font-weight: 600; }

/* Customer is the implicit default on the signup form, so the other roles hide
   behind a disclosure instead of taking a full row by default. The radios stay
   in the DOM (details, not display:none) because a collapsed <details> still
   submits its controls -- that is what makes "customer" arrive unchecked-free. */
.role-disclosure { margin-bottom: .65rem; }
.role-disclosure > summary {
  cursor: pointer;
  font-size: 0.85rem;
  list-style: none;
  margin-bottom: .4rem;
}
.role-disclosure > summary::-webkit-details-marker { display: none; }
.role-disclosure > summary u { color: var(--primary); }
.role-disclosure[open] > summary u { color: var(--muted); }
.role-disclosure > summary .role-chevron { color: var(--muted); font-size: 0.75rem; }

@media (max-width: 600px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.4rem;
  }
  .menu-row { flex-direction: column; align-items: flex-start; }
  .add-form { margin-left: 0; }
  .btn-hold { min-width: unset !important; }
}

/* ── Order Cards ────────────────────────────────── */

.order-cards { display: flex; flex-direction: column; gap: .55rem; }

@media (min-width: 700px) {
  .order-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  body.role-customer .order-cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.order-card {
  min-width: 0;
  padding: .72rem;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.order-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
a.order-card:hover { text-decoration: none; transform: translateY(-1px); }

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.order-card-header .order-id { font-weight: 750; font-size: .94rem; letter-spacing: -.01em; }
.order-card-header .order-vendor {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.order-card-header .order-vendor:hover { text-decoration: underline; }
.order-card-header .order-sep {
  color: var(--muted);
  margin: 0 0.3rem;
}

.order-card-body { display: flex; flex-direction: column; gap: .18rem; color: var(--text); font-size: .82rem; }
.order-card-body .label { color: var(--muted); font-size: .74rem; font-weight: 600; }

.order-card-detail { padding-top: .08rem; border-top: 0; }
.order-card-detail + .order-card-detail { margin-top: -.18rem; }

.order-card-detail summary {
  cursor: pointer;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 680;
  user-select: none;
  -webkit-user-select: none;
  list-style: none;
}
.order-card-detail summary::-webkit-details-marker { display: none; }
.order-card-detail summary::before {
  content: '▸ ';
}
.order-card-detail[open] summary::before {
  content: '▾ ';
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { content: ""; }

.order-card-detail .detail-content {
  margin-top: .38rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: .78rem;
  display: flex;
  flex-direction: column;
  gap: .22rem;
}

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .35rem;
  border-top: 0;
}

/* ── Tile Grid (vendors, drivers, etc.) ─────────── */

.tile-grid {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  margin-top: .6rem;
}

.tile-card {
  min-width: 0;
  min-height: 82px;
  padding: .72rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tile-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tile-card .count{margin:0;color:var(--primary);font-size:1.45rem;font-weight:760;line-height:1.05;letter-spacing:-.03em;}
.tile-grid a.tile-card{text-decoration:none;}
.tile-grid a.tile-card:hover{text-decoration:none;}
.tile-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.tile-card h3 { margin: 0; color: var(--text); font-size: .88rem; }
.tile-card .tile-meta { color: var(--muted); font-size: .75rem; }
.tile-card .tile-actions { margin-top: auto; padding-top: .4rem; }

/* ── Animations ─────────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes holdProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* ── Press-and-Hold Button ──────────────────────── */

.btn-hold {
  position: relative;
  overflow: hidden;
  min-width: 140px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.15s;
}
.btn-hold:active { transform: scale(0.97); }

.btn-hold .hold-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
  pointer-events: none;
}
.btn-hold .hold-fill {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.35);
  transition: none;
}
.btn-hold.holding .hold-fill {
  animation: holdProgress var(--hold-duration, 1.2s) ease-out forwards;
}

.btn-hold.holding {
  box-shadow: 0 0 0 3px var(--primary), 0 0 12px rgba(184,91,59,0.28);
}
.btn-hold.confirmed {
  animation: pulse 0.3s ease;
  background: var(--button-success) !important;
}

.btn-hold .hold-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-hold .hold-ring {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.btn-hold .hold-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity 0.15s;
}
.btn-hold.holding .hold-ring::after { opacity: 1; }
.btn-hold.confirmed .hold-ring::after { opacity: 0; }
.btn-hold.confirmed .hold-ring {
  border-color: #fff;
}
.btn-hold.confirmed .hold-ring::before {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Smooth Page Transitions ────────────────────── */

main { animation: fadeIn 0.25s ease-out; }

/* ── Driver Dashboard ───────────────────────────── */

.driver-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
}

/* ── Unified Utilities ────────────────────────────── */

.u-mt-sm { margin-top: 0.4rem; }
.u-mt-xs { margin-top: 0.15rem; }
.u-mb-sm { margin-bottom: 0.4rem; }
.u-mb-xs { margin-bottom: 0.15rem; }

.counter-card { padding: 0.6rem; margin-bottom: 0.5rem; border-left: 3px solid var(--primary); }
.counter-card--past { padding: 0.5rem; margin-bottom: 0.4rem; border-left: 3px solid var(--border); opacity: 0.85; }
.counter-card--accepted { padding: 0.5rem; margin-bottom: 0.4rem; border-left: 3px solid var(--success); opacity: 0.85; }
.fee-delta--pos { color: var(--success); font-weight: 600; }
.fee-delta--neg { color: #c0392b; font-weight: 600; }
/* Unified variants share the role-aware control height; only color differs. */
.btn-secondary { background: var(--card-bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-success { background: var(--button-success); color: #fff; }
.btn-success:hover { background: var(--button-success-hover); }
.btn-hold--success { background: var(--button-success); }
.input-sm { width: 5em; height: var(--control-height); padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); color: var(--text); font-size: .84rem; }
.input-msg { flex: 1; min-width: 8em; height: var(--control-height); padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); color: var(--text); font-size: .84rem; }
.select { height: var(--control-height); padding: 0 .5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); color: var(--text); font-size: .82rem; }
.search-group { padding: 0 .3rem .1rem; }
.search-group + .search-group { margin-top: .35rem; }
.search-group-label { color: var(--muted); font-size: .7rem; font-weight: 680; letter-spacing: .02em; text-transform: uppercase; padding: .3rem .15rem .25rem; }
.search-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 7px; background: var(--surface-subtle); color: var(--text); text-decoration: none; }
.search-row:hover, .search-row:focus-visible { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.search-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.search-row-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.search-row-body { flex: 1; min-width: 0; }
.search-row-title { display: block; overflow: hidden; color: var(--text); font-size: .79rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.search-row-sub { display: block; overflow: hidden; color: var(--muted); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.search-row-meta { color: var(--muted); font-weight: 400; }
.search-empty { padding: .7rem .6rem; font-size: .82rem; }
.search-all { display: block; text-align: center; margin-top: .25rem; padding: .45rem; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; color: var(--primary); font-size: .8rem; font-weight: 650; }
.search-all:hover { background: var(--surface-hover); text-decoration: none; }
.order-meta { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; }
.route-line { font-size: .78rem; line-height: 1.25; }

.menu-toggle{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--card-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer;font-size:1.1rem;line-height:1;flex-shrink:0;}
.menu-toggle:hover{background:var(--surface-hover);}


/* ── Privacy and site footer ─────────────────────── */
.legal-page{max-width:820px;margin:0 auto;}
.legal-header{margin-bottom:1rem;}
.legal-header h1{margin:0 0 0.15rem;}
.legal-header p{margin:0;}
.privacy-summary{padding:.75rem .85rem;margin:0 0 .75rem;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:7px;background:var(--card-bg);}
.legal-section{margin:.5rem 0;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:7px;background:var(--card-bg);}
.legal-section summary{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.65rem 0.85rem;cursor:pointer;list-style:none;font-weight:600;background:var(--card-bg);}
.legal-section summary::-webkit-details-marker{display:none;}
.legal-section summary::after{content:'▾';color:var(--muted);transition:transform 0.15s ease;}
.legal-section[open] summary::after{transform:rotate(180deg);}
.legal-content{padding:0.35rem 0.9rem 0.9rem;border-top:0;font-size:0.92rem;overflow-wrap:anywhere;}
.legal-content h3{margin:0.9rem 0 0.3rem;font-size:0.98rem;}
.legal-content ul{margin:0.35rem 0;padding-left:1.2rem;}
.legal-content li{margin:0.28rem 0;}
.legal-content .button{display:inline-flex;align-items:center;margin:0.2rem 0;}
html.privacy-pending,html.privacy-pending body{overflow:hidden;}
.privacy-consent-gate{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:1rem;background:rgba(28,24,21,0.38);}
.privacy-consent-card{width:min(460px,100%);max-height:calc(100vh - 2rem);overflow-y:auto;padding:1rem;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--card-bg) 96%,transparent);color:var(--text);box-shadow:var(--shadow-md);outline:none;}
.privacy-consent-card h2{margin:0 0 0.4rem;color:var(--text);font-size:1.15rem;}
.privacy-consent-card>p{margin:0.35rem 0;}
.privacy-consent-actions{display:grid;grid-template-columns:1fr;gap:0.55rem;margin-top:0.9rem;}
.privacy-consent-form{margin:0;min-width:0;}
.privacy-consent-form .btn-hold{width:100%;min-width:0;}
:root[data-theme="dark"] .privacy-consent-gate{background:rgba(0,0,0,0.58);}

@media (max-width:520px){
  .privacy-consent-gate{padding:0.7rem;align-items:end;}
  .privacy-consent-card{padding:1rem;border-radius:12px 12px 8px 8px;max-height:88vh;}
  .privacy-consent-actions{grid-template-columns:1fr;}
}

.site-footer{display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;margin-top:1rem;padding:.65rem 1rem;border-top:0;color:var(--muted);font-size:.7rem;}
.site-footer a{color:var(--muted);}
.site-footer a:hover{color:var(--primary);}

@media (max-width:600px){
  .legal-section summary{padding:0.6rem 0.7rem;}
  .legal-content{padding:0.15rem 0.7rem 0.75rem;}
}

/* Offline reads: the shell is cached, mutations are not queued. The banner
   makes stale data explicit; .is-offline lets views dim network-only controls. */
.offline-banner{
  position:sticky;
  top:0;
  z-index:40;
  padding:.4rem .75rem;
  text-align:center;
  font-size:.82rem;
  font-weight:650;
  color:var(--warning);
  background:var(--warning-soft);
  border-bottom:1px solid var(--border);
}
.is-offline [data-requires-network]{
  opacity:.55;
  pointer-events:none;
}

/* ── SPA auth/account forms ─────────────────────────────────────────
   Same visual language as the Jinja forms: narrow card, muted helper text,
   one-line inline errors. The captcha keeps the old math layout. */

.auth-link { margin: .7rem 0 0; font-size: .87rem; }
.auth-link + .auth-link { margin-top: .3rem; }

.form-error {
  margin: .1rem 0 .55rem;
  padding: .4rem .55rem;
  border: 1px solid var(--danger);
  border-radius: 7px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .84rem;
}

.captcha { margin-bottom: .8rem; }
.captcha-label { display: block; margin-bottom: .25rem; font-size: .9rem; color: var(--muted); }
.captcha-row { display: flex; align-items: center; gap: .5rem; }
.captcha-expr { font-weight: 600; font-size: 1.05rem; }
.captcha-input {
  width: 4em;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
}

.verify-code {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
}
.verify-code span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--primary);
}
.verify-waiting { margin-top: 1rem; font-size: .9rem; }

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
}
.linklike:hover { color: var(--primary-strong, var(--primary)); }

.profile-card { padding-top: 1rem; padding-bottom: 1rem; }
.profile-card + .profile-card { margin-top: .6rem; }