/**
 * Ordivity Ordering — shared dashboard styles.
 *
 * Matched 1:1 to the Afritivity Loyalty dashboard design system (admin.css) so
 * the Online Orders dashboard is visually identical to the Loyalty / Tip Jar
 * dashboards. Tokens mirrored from Loyalty:
 *   text        #e0e0e0   headings #fff   muted #888 / #666 / #555
 *   card        linear-gradient(145deg, rgba(26,26,46,.95), rgba(15,15,35,.95))
 *               border rgba(255,255,255,.08)  radius 16px  shadow 0 4px 20px rgba(0,0,0,.3)
 *   accent      #22c55e  hover #16a34a  deep #15803d   (GREEN, not blue)
 *   primary btn green bg + BLACK text (.af-dash-btn parity)
 *   input       bg rgba(0,0,0,.3)  border rgba(255,255,255,.15)  focus #22c55e
 *   toggle      52x28  track rgba(255,255,255,.15)  on #22c55e
 *   nav pill    bg rgba(255,255,255,.05)  active green-tint
 *
 * Values are replicated (not imported) so the ordering plugin stays
 * self-contained and correctly styled even when Loyalty is inactive.
 *
 * @version 0.2.1
 */

/* v0.59.0 — GLOBAL [hidden] GUARD. See ordivity-storefront.css for the full
   rationale. Short version: the `hidden` attribute is a user-agent rule, and
   ANY author `display` declaration beats it. Without this, `el.hidden = true`
   is a no-op on every element whose class sets a display value. */
[hidden] { display: none !important; }


.ordv-wrap {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: #e0e0e0;
	line-height: 1.5;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	text-align: left;
}
.ordv-wrap * { box-sizing: border-box; }

/* Team banner (matches Loyalty) */
.ordv-team-banner {
	background: rgba(33,150,243,0.12);
	border: 1px solid rgba(33,150,243,0.3);
	border-radius: 12px;
	padding: 16px 20px; margin-bottom: 20px;
	color: #90CAF9; display: flex; align-items: center; gap: 12px;
}
.ordv-team-banner strong { color: #2196F3; }
.ordv-team-banner span:first-child { font-size: 1.5rem; }

/* =========================================================================
   Header: status box + nav pills (mirrors .af-status-box + .af-nav-btn)
   ========================================================================= */
.ordv-header { margin-bottom: 20px; }

.ordv-status-box {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 14px;
}
.ordv-status-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #22c55e; }
.ordv-status-warning { background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.25); color: #ffc107; }

.ordv-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ordv-nav-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 18px; min-width: 100px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 10px;
	color: #ccc !important; text-decoration: none !important;
	font-size: 0.9rem; font-weight: 600; transition: all 0.2s;
}
.ordv-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff !important; border-color: rgba(255,255,255,0.2); }
.ordv-nav-btn.is-active { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); color: #22c55e !important; }

/* =========================================================================
   Cards (mirrors .af-card — gradient + shadow)
   ========================================================================= */
.ordv-card {
	background: linear-gradient(145deg, rgba(26,26,46,0.95), rgba(15,15,35,0.95));
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.ordv-card h3 { margin: 0 0 16px 0; font-size: 1.1rem; font-weight: 600; color: #fff; }
.ordv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ordv-card-head h3 { margin: 0; }
.ordv-muted { color: #888; font-size: 0.9rem; margin: 8px 0 18px; }

/* v0.30.0 — menu export / import controls */
.ordv-menu-io { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.ordv-menu-io-export { background: none; border: none; padding: 0; color: #22c55e; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.ordv-menu-io-export:hover { text-decoration: underline; }
.ordv-menu-io-sep { color: #555; }
.ordv-menu-io-panel { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; margin-bottom: 16px; background: rgba(255,255,255,0.03); }
.ordv-menu-io-confirm { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: #ccc; font-size: 0.9rem; cursor: pointer; }

/* =========================================================================
   Buttons (mirror .af-dash-btn — GREEN with BLACK text)
   ========================================================================= */
.ordv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer;
	font-size: 0.9rem; font-weight: 500; transition: all 0.2s; box-sizing: border-box;
	text-decoration: none;
}
.ordv-btn-primary { background: #22c55e; color: #000; }
.ordv-btn-primary:hover { background: #16a34a; color: #000; }
.ordv-btn-ghost { background: rgba(255,255,255,0.1); color: #ccc; }
.ordv-btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }
.ordv-btn[disabled] { background: #333; color: #666; cursor: not-allowed; transform: none; }

.ordv-link { background: none; border: none; color: #22c55e; cursor: pointer; font-weight: 600; font-size: 0.85rem; padding: 4px 6px; }
.ordv-link:hover { text-decoration: underline; }
.ordv-link.ordv-danger { color: #f87171; }

/* =========================================================================
   Forms (mirror .af-input / .af-form-actions)
   ========================================================================= */
.ordv-form { display: flex; flex-direction: column; gap: 16px; }
.ordv-field { display: flex; flex-direction: column; gap: 6px; }
.ordv-field > span { font-size: 0.85rem; font-weight: 600; color: #ccc; }
/* v0.37.0 — per-day trading hours editor */
.ordv-hours-week { display: flex; flex-direction: column; gap: 8px; }
.ordv-hours-day { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #1c1f26; border: 1px solid #2a2f3a; border-radius: 8px; }
.ordv-hours-dayname { flex: 0 0 92px; font-weight: 600; color: #e6e8ec; font-size: 0.9rem; }
.ordv-hours-closed { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: #b6bcc6; cursor: pointer; }
.ordv-hours-closed input { cursor: pointer; }
.ordv-hours-day input[type="time"] { background: #0f1115; border: 1px solid #2a2f3a; color: #e6e8ec; border-radius: 6px; padding: 5px 7px; }
.ordv-hours-day input[type="time"]:disabled { opacity: 0.4; }
.ordv-hours-to { color: #8b949e; font-size: 0.85rem; }
.ordv-form input[type="text"],
.ordv-form input[type="number"],
.ordv-form select,
.ordv-form textarea {
	width: 100%; padding: 10px 14px; box-sizing: border-box;
	background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px; color: #fff; font-size: 0.95rem; outline: none;
	transition: border-color 0.2s;
}
.ordv-form input:focus, .ordv-form select:focus, .ordv-form textarea:focus { border-color: #22c55e; }
.ordv-form input::placeholder, .ordv-form textarea::placeholder { color: #555; }
.ordv-form textarea { min-height: 80px; resize: vertical; }
.ordv-form select option { color: #111; }
.ordv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ordv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.ordv-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ordv-form-msg { font-size: 0.9rem; font-weight: 600; }

/* Toggle field rows (mirror .af-toggle-row) */
.ordv-field-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,0.03); border-radius: 12px; }
.ordv-field-toggle.compact { padding: 10px 14px; gap: 10px; }
.ordv-field-toggle strong { color: #fff; font-size: 0.95rem; }
.ordv-field-toggle small { display: block; color: #888; font-size: 0.82rem; }
/* v0.53.0 — inline state notes under a toggle. Same typography as the
   surrounding <small>, only the colour carries the meaning, so these stay
   consistent with the terminal's .ordv-push-state pill and every other
   ok/warn surface across the dashboard. */
.ordv-field-toggle small.ordv-note-ok   { color: #3fb950; margin-top: 4px; }
.ordv-field-toggle small.ordv-note-warn { color: #d29922; margin-top: 4px; }

/* v0.142.0 — availability schedule editor (items + categories). Reuses the
   field-toggle chrome for the master switch; the day pills mirror the
   dashboard's dark input surfaces (#1c1f26 / #2a2f3a) so it reads as one
   system with the trading-hours grid above. */
.ordv-sched-editor { display: flex; flex-direction: column; gap: 10px; }
.ordv-sched-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: #1c1f26; border: 1px solid #2a2f3a; border-radius: 10px; }
.ordv-sched-body[hidden] { display: none; }
.ordv-sched-days { display: flex; flex-wrap: wrap; gap: 8px; }
.ordv-sched-day { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #0f1115; border: 1px solid #2a2f3a; border-radius: 8px; cursor: pointer; user-select: none; font-size: 0.86rem; color: #c7cad1; }
.ordv-sched-day input { margin: 0; accent-color: #3fb950; }
.ordv-sched-day:has(input:checked) { border-color: #3fb950; color: #fff; background: rgba(63,185,80,0.10); }
.ordv-sched-body input[type="time"] { background: #0f1115; border: 1px solid #2a2f3a; color: #e6e8ec; border-radius: 6px; padding: 5px 7px; }

/* Switch (mirror .af-toggle — 52x28, green) */
.ordv-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.ordv-switch.tiny { width: 44px; height: 24px; }
.ordv-switch input { opacity: 0; width: 0; height: 0; }
.ordv-switch span { position: absolute; inset: 0; background: rgba(255,255,255,0.15); border-radius: 28px; transition: 0.3s; cursor: pointer; }
.ordv-switch span::before { content: ""; position: absolute; height: 20px; width: 20px; left: 4px; bottom: 4px; background: #fff; border-radius: 50%; transition: 0.3s; }
.ordv-switch.tiny span::before { height: 16px; width: 16px; }
.ordv-switch input:checked + span { background: #22c55e; }
.ordv-switch input:checked + span::before { transform: translateX(24px); }
.ordv-switch.tiny input:checked + span::before { transform: translateX(20px); }
.ordv-switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* =========================================================================
   Menu tree
   ========================================================================= */
.ordv-cat { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.ordv-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,0.03); }
.ordv-cat-title strong { font-size: 1.05rem; color: #fff; }
.ordv-cat-actions { display: flex; align-items: center; gap: 4px; }
.ordv-items { padding: 8px 16px 16px; }

.ordv-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ordv-item:last-child { border-bottom: none; }
.ordv-item-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.06); }
.ordv-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ordv-thumb-ph { display: block; width: 100%; height: 100%; }
.ordv-item-main { flex: 1; min-width: 0; }
.ordv-item-name { font-weight: 600; color: #fff; }
.ordv-item-desc { color: #888; font-size: 0.85rem; margin-top: 2px; }
.ordv-item-price { font-weight: 700; color: #fff; white-space: nowrap; }
.ordv-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ordv-veg { margin-left: 4px; }

.ordv-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #888; font-size: 0.75rem; font-weight: 500; }
.ordv-pill-muted { background: rgba(255,255,255,0.05); color: #666; }

.ordv-empty { padding: 24px; text-align: center; color: #888; border: 1px dashed rgba(255,255,255,0.15); border-radius: 12px; }
.ordv-empty.small { padding: 14px; font-size: 0.88rem; }

.ordv-modifiers-hint { font-size: 0.82rem; color: #888; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.18); border-radius: 8px; padding: 10px 12px; }

/* Settings: subheads + shareable link box */
.ordv-subhead { margin: 8px 0 0; color: #fff; font-size: 1rem; font-weight: 600; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; }
/* v0.55.0 — delivery zone editor. Each band is boxed so three stacked rows of
   four inputs read as three things rather than twelve. */
.ordv-zones { margin: 12px 0 6px; }
.ordv-zone-row { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px 4px; margin-bottom: 12px; background: rgba(255,255,255,0.02); }
.ordv-zone-row + .ordv-zone-row { margin-top: 0; }
.ordv-linkbox { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.ordv-linkbox-label { display: block; font-size: 0.8rem; font-weight: 600; color: #22c55e; margin-bottom: 8px; }
.ordv-linkbox-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ordv-linkbox-row input { flex: 1; min-width: 180px; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #fff; }
.ordv-logo-preview { width: 64px; height: 64px; object-fit: contain; background: rgba(255,255,255,0.06); }

/* Image picker */
.ordv-image-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ordv-image-preview { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); }
/* v0.15.0 — pasted image-URL input (Google Drive etc. instead of WP media). */
.ordv-image-url { flex: 1 1 220px; min-width: 0; }
.ordv-field-hint { display: block; margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: rgba(255,255,255,0.55); }

/* v0.133.0 — optional delivery weight/dimension group (capacity gate). */
.ordv-physical-fields { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.ordv-field-group-label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.75); }

/* Orders table */
.ordv-table { width: 100%; border-collapse: collapse; }
.ordv-table th, .ordv-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
.ordv-table th { color: #888; font-weight: 600; }

/* Notices */
.ordv-notice { padding: 14px 18px; border-radius: 12px; }
.ordv-notice-warning { background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.25); color: #ffc107; }
.ordv-notice a { color: #22c55e; }

/* Modal (gradient card to match) */
.ordv-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 99999; overflow-y: auto; }
.ordv-modal.is-open { display: flex; }
.ordv-modal-box { background: linear-gradient(145deg, rgba(26,26,46,0.98), rgba(15,15,35,0.98)); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 24px; width: 100%; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.ordv-modal-box h3 { margin-top: 0; color: #fff; }

/* =========================================================================
   Extras & Options builder
   ========================================================================= */
.ordv-modal-wide { max-width: 640px; }
.ordv-modifiers-list { margin: 12px 0 4px; }
.ordv-mod-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

.ordv-mod-group { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.ordv-mod-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.03); flex-wrap: wrap; }
.ordv-mod-group-head strong { color: #fff; margin-right: 6px; }
.ordv-mod-group-actions { display: flex; align-items: center; gap: 4px; }

.ordv-mod-options { padding: 6px 14px 12px; }
.ordv-mod-option { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ordv-mod-option:last-child { border-bottom: none; }
.ordv-mod-option-name { flex: 1; min-width: 0; color: #e0e0e0; }
.ordv-mod-option-price { color: #22c55e; font-weight: 600; white-space: nowrap; font-size: 0.9rem; }
.ordv-mod-option-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.ordv-pill-req { background: rgba(34,197,94,0.15); color: #22c55e; }

.ordv-subform { border: 1px solid rgba(34,197,94,0.25); border-radius: 12px; padding: 16px; margin-top: 14px; background: rgba(34,197,94,0.04); }
.ordv-subform h4 { margin: 0 0 6px; color: #fff; font-size: 1rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
	.ordv-wrap { padding: 10px; }
	.ordv-card { padding: 20px 15px; }
	.ordv-grid-2, .ordv-grid-3 { grid-template-columns: 1fr; }
	.ordv-nav-btn { flex: 1 1 auto; min-width: 0; }
	.ordv-item { flex-wrap: wrap; }
	.ordv-item-actions { width: 100%; justify-content: flex-end; }
}

/* --- Shared Vendor Profile badge (afritivity-core integration) ------------- */
.ordv-shared-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    margin-left: 6px;
    border-radius: 999px;
    color: #0f5132;
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* --- Dashboard landing (Status + Overview) — matches Loyalty/Tip-Jar -------- */
.ordv-dash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
@media (max-width: 860px) {
	.ordv-dash-grid { grid-template-columns: 1fr; }
}
.ordv-dash-status h3,
.ordv-dash-overview h3 { margin: 0 0 18px; }

.ordv-dash-statuspill {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 16px;
}
.ordv-dash-statuspill.is-on {
	color: #22c55e;
	background: rgba(34,197,94,0.12);
	border: 1px solid rgba(34,197,94,0.35);
}
.ordv-dash-statuspill.is-off {
	color: #fbbf24;
	background: rgba(251,191,36,0.10);
	border: 1px solid rgba(251,191,36,0.30);
}
.ordv-dash-warning {
	background: rgba(251,191,36,0.10);
	border: 1px solid rgba(251,191,36,0.30);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 14px 0;
	color: #fbbf24;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ordv-dash-warning a { color: #22c55e; font-weight: 600; text-decoration: none; }
.ordv-dash-warning a:hover { text-decoration: underline; }

.ordv-dash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* Stat blocks (mirror Loyalty Overview) */
.ordv-stat-blocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.ordv-stat {
	background: rgba(0,0,0,0.25);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 18px 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ordv-stat-num { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; }
.ordv-stat-label { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #888; }

.ordv-quickstats { display: flex; flex-direction: column; gap: 10px; }
.ordv-quickstat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(0,0,0,0.20);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.92rem;
}
.ordv-quickstat span { color: #b8b8b8; }
.ordv-quickstat strong { color: #fff; }
.ordv-txt-on { color: #22c55e; }
.ordv-txt-off { color: #fbbf24; }

/* Active section button on the dashboard Status card */
.ordv-dash-actions .ordv-btn.is-active {
	background: rgba(34,197,94,0.15);
	border-color: rgba(34,197,94,0.45);
	color: #22c55e;
}
/* Spacing between the dashboard cards and the active sub-section below */
.ordv-dash-grid + .ordv-card,
.ordv-dash-grid + .ordv-section { margin-top: 4px; }

/* ---------------------------------------------------------------------------
 * v0.9.0 — merged dashboard (Ordivity sections rendered INSIDE the Loyalty
 * Status / Overview cards on /loyalty-dashboard). Loyalty's own classes
 * (af-status-box, af-overview-stat, af-summary-grid) style the shared pieces
 * so the merged card reads as ONE card; these helpers only add the divider,
 * section label and the 3-column ordering stat row.
 * ------------------------------------------------------------------------- */
.ordv-merged-section {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ordv-merged-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 12px;
}
.ordv-merged-stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
@media (max-width: 640px) {
	.ordv-merged-stats { grid-template-columns: 1fr; }
}
/* The merged Settings accordion hosts the ordv-form inside Loyalty's
 * .af-accordion-content — give it the same breathing room as standalone. */
.af-accordion-content .ordv-form { margin-top: 4px; }
.af-accordion-content .ordv-linkbox { margin-bottom: 16px; }

/* ---------------------------------------------------------------------------
 * v0.10.0 — shared ("floating") option groups
 * ------------------------------------------------------------------------- */
.ordv-attach-bar {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
}
.ordv-attach-bar select {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: inherit;
	padding: 8px 10px;
	font-size: 0.9rem;
}
.ordv-pill-shared {
	background: rgba(46, 204, 113, 0.15);
	color: #2ecc71;
	border: 1px solid rgba(46, 204, 113, 0.35);
}
.ordv-shared-edit-note { margin: -4px 0 10px; font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
 * v0.11.0 — starter menu template card (empty-menu state)
 * ------------------------------------------------------------------------- */
.ordv-template-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px;
	margin-bottom: 14px;
	border: 1px dashed rgba(46, 204, 113, 0.45);
	border-radius: 12px;
	background: rgba(46, 204, 113, 0.06);
}
.ordv-template-card strong { font-size: 1rem; }
.ordv-template-copy p { margin: 6px 0 0; }
.ordv-template-card .ordv-btn { flex-shrink: 0; }
@media (max-width: 640px) {
	.ordv-template-card { flex-direction: column; align-items: stretch; text-align: left; }
}

/* =========================================================================
   v0.38.0 — Promotions / Deals (menu editor)
   Matches the established dashboard palette: dark panels (#161b22 family),
   green accent #3fb950, amber warnings, subtle borders #30363d.
   ========================================================================= */
.ordv-pill-deal { background: rgba(63,185,80,0.15); color: #3fb950; }
.ordv-pill-warn { background: rgba(210,153,34,0.18); color: #d29922; }

.ordv-type-switch { display: flex; gap: 8px; margin-bottom: 14px; }
.ordv-type-btn {
	flex: 1; padding: 9px 12px; border-radius: 8px; cursor: pointer;
	background: transparent; border: 1px solid #30363d; color: #8b949e;
	font-weight: 600; font-size: 0.9rem; transition: all 0.15s ease;
}
.ordv-type-btn.is-active { border-color: #3fb950; color: #3fb950; background: rgba(63,185,80,0.08); }

.ordv-deal-fields { margin-bottom: 14px; }
.ordv-deal-slots { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0; }
.ordv-deal-col {
	border: 1px solid #30363d; border-radius: 10px; padding: 10px;
	background: rgba(255,255,255,0.02);
}
.ordv-deal-col > strong { display: block; margin-bottom: 8px; font-size: 0.85rem; color: #e6edf3; }
.ordv-deal-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ordv-deal-row {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	border: 1px solid #30363d; border-radius: 8px; padding: 8px;
}
.ordv-deal-item { flex: 1 1 200px; min-width: 0; }
.ordv-deal-qty { width: 62px; flex: 0 0 auto; }
.ordv-deal-locks { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.ordv-deal-lock { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #8b949e; }
.ordv-deal-lock select { flex: 1; min-width: 0; }
.ordv-deal-remove { margin-left: auto; }

/* v0.39.0 — choice slots ("customer chooses from a list") */
.ordv-deal-mode { flex: 0 0 auto; max-width: 170px; }
.ordv-deal-choicebox { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.ordv-deal-pinlabel { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #8b949e; }
.ordv-deal-pin { flex: 1; min-width: 0; max-width: 220px; }
.ordv-deal-cat { border: 1px solid #30363d; border-radius: 8px; padding: 6px 8px; }
.ordv-deal-cat > summary { cursor: pointer; font-size: 0.85rem; color: #e6edf3; user-select: none; }
.ordv-deal-cat > summary input { vertical-align: middle; margin-right: 4px; }
.ordv-deal-choicelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 10px; padding: 8px 4px 2px; }
.ordv-deal-choice { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #8b949e; }

/* v0.60.0 — shop-pin nag. Amber, not red: nothing is broken, something is
   merely unfinished, and the dashboard already reserves red for failures. */
.ordv-pin-nag { margin: 0 0 12px; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.55;
	background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); color: #fbbf24; }

/* v0.60.1 — the zone name input is gone; the band is identified by a heading
   derived from its slot. Same weight as the field labels around it so it reads
   as a section marker, not a competing control. */
.ordv-zone-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .3px;
	text-transform: uppercase; color: #9ca3af; }


/* ---------------------------------------------------------------------------
   v0.62.0 — SHOP PIN MAP MODAL (dashboard / dark theme).

   A separate shell from .ordv-sf-pinmodal in the storefront sheet, on purpose:
   that one is a light customer-facing card, this is the dark vendor dashboard.
   Only the map BEHAVIOUR is shared (assets/js/ordivity-map-modal.js). The two
   keep the same geometry, radii and crosshair proportions so they still read
   as one product. Tokens are the dashboard set declared at the top of this
   file — card gradient, rgba(255,255,255,.08) borders, #22c55e accent.
   --------------------------------------------------------------------------- */
.ordv-mapmodal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px; }
.ordv-mapmodal[hidden] { display: none; }
.ordv-mapmodal-box { position: relative; width: 100%; max-width: 560px; padding: 22px; border-radius: 16px; background: linear-gradient(145deg, rgba(26,26,46,0.98), rgba(15,15,35,0.98)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.ordv-mapmodal-box h4 { margin: 0 34px 6px 0; color: #fff; font-size: 1.05rem; }
.ordv-mapmodal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #e0e0e0; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ordv-mapmodal-close:hover { background: rgba(255,255,255,0.16); }
.ordv-mapmodal-note { min-height: 1.2em; margin: 0 0 10px; font-size: 0.82rem; color: #888; }
.ordv-mapmodal-hint { margin: 10px 0 0; font-size: 0.8rem; color: #888; }
.ordv-mapmodal-cta { width: 100%; margin-top: 12px; }

/* The sized parent. A definite height here is what the canvas resolves its
   100% against, so it must never be left to content. */
.ordv-mapmodal-map { position: relative; height: 340px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); }

/* THIS SELECTOR IS OVER-QUALIFIED ON PURPOSE. DO NOT SIMPLIFY IT.
   MapLibre stamps `maplibregl-map` onto whatever container it is handed, and
   its own sheet declares `.maplibregl-map { position: relative; overflow:
   hidden; }` at specificity (0,1,0). A bare .ordv-mapmodal-canvas TIES with
   that, and maplibre-gl.css is injected at map-open time, so it is always the
   later sheet and always wins the tie. The container then loses its height,
   MapLibre's inner canvas is absolute and adds none, the host collapses to 0,
   and overflow:hidden clips a working canvas to nothing — a grey panel,
   ready:true, and no error anywhere. That cost three release cycles to find in
   the storefront (v0.61.3) and it is not happening twice. Descendant-
   qualifying takes this to (0,2,0). No !important: winning on specificity is
   repeatable and debuggable, and !important would only make the next
   collision worse. Guarded by tests/test-pin-css-cascade.js. */
.ordv-mapmodal-map .ordv-mapmodal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Crosshair: fixed at the centre while the map moves underneath. Sits above
   the canvas and must never intercept a drag. */
.ordv-mapmodal-cross { position: absolute; top: 50%; left: 50%; width: 28px; height: 40px; margin: -40px 0 0 -14px; pointer-events: none; z-index: 5;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 40'%3E%3Cpath d='M14 0C6.3 0 0 6.3 0 14c0 10.5 14 26 14 26s14-15.5 14-26c0-7.7-6.3-14-14-14z' fill='%2322c55e'/%3E%3Ccircle cx='14' cy='14' r='5' fill='%23fff'/%3E%3C/svg%3E"); }

@media (max-width: 600px) {
	.ordv-mapmodal-box { padding: 16px; border-radius: 14px; }
	.ordv-mapmodal-map { height: 50vh; }
}

/* =========================================================================
   v0.73.2 — PHASE 7B. THE RATING BLOCK (vendor surfaces).
   =========================================================================
   Light theme. The component lives in ordivity-storefront.css; this sets
   only its variables, so the terminal, the driver app and the customer's
   status card cannot drift apart.
   ========================================================================= */

.ordv-dash-rate {
	--ordv-rate-star-on: #f5a623;
	--ordv-rate-star-off: #d1d5db;
	--ordv-rate-fg: #1f2937;
	--ordv-rate-muted: #6b7280;
	--ordv-rate-field-bg: #fff;
	--ordv-rate-field-br: #d4d9e0;

	background: #fff;
	border: 1px solid #e5e7eb;
}

/* ==========================================================================
   v0.77.0 — DELIVERY-ZONE SUBURB PICKER
   ==========================================================================

   Deliberately the same interaction and the same visual grammar as the
   drivers dashboard's suburb card (.drv-chips / .drv-sub-*): a type-ahead
   that drops results beneath the field, chips for what is chosen, and an
   add-with-a-pin panel that only appears when nothing matched. A vendor
   moves between the Settings tab and the Drivers tab constantly, and two
   different ways to do the same thing is one more thing to learn.

   Prefixed .ordv- rather than sharing the .drv- classes on purpose: these
   sheets ship in different plugins and either can be deactivated, so a
   shared class name would be a silent cross-plugin style dependency. The
   VALUES are kept in step; the selectors are not shared.

   NOTE ON box-sizing: this dashboard has its own reset (see the top of this
   file). Anything added here inherits it. The drivers sheet scopes its reset
   to .drv-app / .drv-page, which is why the two files cannot simply be
   pointed at each other.
   ========================================================================== */

.ordv-sub-picker { position: relative; }
.ordv-sub-picker > span { display: block; margin-bottom: 6px; }

/* The wrapper is the positioning context for the dropdown. Without it the
   results panel anchors to the zone row and lands over the wrong field. */
.ordv-sub-search-wrap { position: relative; }

.ordv-sub-search:disabled { opacity: .5; cursor: not-allowed; }

.ordv-sub-results {
	position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
	background: #14142b; border: 1px solid rgba(255,255,255,0.15);
	border-radius: 10px; max-height: 260px; overflow-y: auto; margin-top: 4px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.ordv-sub-results[hidden] { display: none; }

.ordv-sub-result-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ordv-sub-result-row:last-child { border-bottom: none; }
.ordv-sub-result { flex: 1 1 auto; padding: 10px 12px; cursor: pointer; font-size: 0.88rem; color: #e0e0e0; }
.ordv-sub-result:hover { background: rgba(34,197,94,0.12); }
.ordv-sub-result .ordv-sub-flag { color: #fbbf24; font-size: 0.78rem; margin-left: 6px; }

.ordv-sub-result-map {
	flex: 0 0 auto; background: rgba(255,255,255,0.06); color: #93c5fd;
	border: none; border-left: 1px solid rgba(255,255,255,0.08);
	padding: 0 12px; font-size: 0.78rem; font-family: inherit; cursor: pointer;
}
.ordv-sub-result-map:hover { background: rgba(59,130,246,0.18); }

/* Chips ------------------------------------------------------------------ */
.ordv-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.ordv-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
	color: #86efac; border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 0.85rem;
}
.ordv-chip-x {
	background: rgba(255,255,255,0.08); border: none; color: inherit; cursor: pointer;
	border-radius: 999px; padding: 2px 8px; font-size: 0.8rem; font-family: inherit; line-height: 1.4;
}
.ordv-chip-x:hover { background: rgba(220,38,38,0.3); }

/* Two-step suburb rows (v0.88.0, G1) --------------------------------------
   One list of everywhere the outlet delivers, each row carrying its band.
   Deliberately reusing the existing palette, .ordv-chip-x and .ordv-field
   spacing rather than introducing a second visual language for the same
   dashboard — the Drivers tab card and this one should read as one product.

   The row is a grid rather than a flex line so the zone selects align into a
   column down the list. With flex they track the suburb name's width and the
   dropdowns stagger, which makes a list of thirty suburbs hard to scan. */
.ordv-sub-panel { margin-bottom: 22px; }

.ordv-sub-rows { list-style: none; margin: 12px 0 0; padding: 0; }

.ordv-sub-row {
	display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
	padding: 8px 10px; border-radius: 10px; margin-bottom: 6px;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
}
.ordv-sub-row:hover { background: rgba(255,255,255,0.05); }

.ordv-sub-row-name { font-size: 0.9rem; color: #e0e0e0; overflow-wrap: anywhere; }

.ordv-sub-row-zone { display: flex; align-items: center; margin: 0; }
.ordv-sub-row-zone select {
	background: #14142b; color: #e0e0e0; font-family: inherit; font-size: 0.82rem;
	border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 5px 8px;
	/* Without color-scheme the browser assumes a light page and paints the open
	   dropdown's options near-black on its dark popup — invisible. This renders
	   the native list for a dark surface; the option rule is the belt-and-braces
	   for engines that colour options directly. */
	color-scheme: dark;
}
.ordv-sub-row-zone select option { color: #e0e0e0; background: #14142b; }

/* An unbanded suburb is on the outlet but has no fee, so the server drops it
   on save. Amber rather than red: it is an unfinished step, not an error, and
   it is exactly the state a two-step flow puts a vendor in halfway through. */
.ordv-sub-row.is-unbanded {
	background: rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.35);
}
.ordv-sub-row.is-unbanded .ordv-sub-row-zone select { border-color: rgba(251,191,36,0.5); color: #fbbf24; }

.ordv-zone-count { font-size: 0.78rem; font-weight: 400; color: #9ca3af; margin-left: 8px; }

.ordv-step-two { margin-top: 20px; }

/* Below roughly a phone width the three-column row wraps: the name takes the
   full line and the control pair sits under it, which keeps the select at a
   tappable size instead of crushing it to fit beside a long suburb name. */
@media (max-width: 480px) {
	.ordv-sub-row { grid-template-columns: 1fr auto; }
	.ordv-sub-row-name { grid-column: 1 / -1; }
}

/* Add-with-a-pin --------------------------------------------------------- */
.ordv-sub-new {
	margin-top: 14px; padding: 14px 16px; border-radius: 12px;
	border: 1px solid rgba(251,191,36,0.28); background: rgba(251,191,36,0.06);
}
.ordv-sub-new[hidden] { display: none; }

/* Shown when the drivers plugin is inactive: existing suburbs still save,
   only adding a new one is unavailable. Informational, not an error. */
.ordv-sub-offline {
	margin-top: 10px; padding: 11px 13px; border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03);
}

/* v0.149.0 — "Turn on payment alerts" line (Status card) */
.ordv-alerts-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0; padding: 8px 12px; border: 1px solid #2a2f3a; border-radius: 8px; background: #1c1f26; color: #b6bcc6; font-size: 0.85rem; }
.ordv-alerts-text { flex: 1 1 220px; }
.ordv-alerts-btn { padding: 6px 12px; font-size: 0.85rem; }
.ordv-alerts-btn[data-on="1"] { background: rgba(34,197,94,0.15); color: #22c55e; }
.ordv-alerts-msg { flex: 1 0 100%; font-size: 0.8rem; color: #d29922; }

/* v0.151.2 — "Suburbs near your shop" directory (Settings → Step 1) */
.ordv-sub-dir { margin: 10px 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.ordv-sub-dir-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ordv-sub-dir-head strong { color: #fff; }
.ordv-sub-dir-filter { width: 100%; box-sizing: border-box; margin: 6px 0 8px; }
.ordv-sub-dir-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.ordv-sub-dir-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; }
.ordv-sub-dir-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordv-sub-dir-km { color: #888; font-size: .8rem; white-space: nowrap; }
.ordv-sub-dir-flag { color: #fbbf24; font-size: .75rem; white-space: nowrap; }
.ordv-sub-dir-added { color: #22c55e; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ordv-sub-dir-add { padding: 4px 10px; font-size: .8rem; }
.ordv-sub-dir-item.is-added .ordv-sub-dir-name { color: #86efac; }