/* ==========================================================================
   CatalogCore — shared stylesheet for the three surfaces.
   Platform (store picker) · Storefront (customer) · Console (store owner).
   Arabic RTL first. Calm, evidence-led, no decorative SaaS cards.
   ========================================================================== */

:root {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --ink: #172033;
    --muted: #59667a;
    --border: #d9e0ea;
    --accent: #175cd3;
    --accent-strong: #0f48a8;
    --accent-soft: #e9f1ff;
    --success: #126b45;
    --success-soft: #eaf8f0;
    --danger: #a93535;
    --danger-bg: #fff0f0;
    --warning: #8a5900;
    --warning-bg: #fff5df;
    --whatsapp: #147a46;
    --radius: 14px;
    --radius-lg: 20px;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; width: 100%; padding: 2rem; }

h1, h2, h3 { text-wrap: balance; }
a { color: var(--accent); }
.muted { color: var(--muted); margin: 0; }
.small { font-size: 0.9rem; }

/* --- Forms and buttons ---------------------------------------------------- */
form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
form.wide { max-width: none; }
label { font-weight: 700; color: var(--ink); }
label small { display: block; color: var(--muted); font-weight: 400; }
input, textarea, select {
    width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border);
    border-radius: 10px; background: #fff; color: var(--ink); font: inherit;
}
input:focus, textarea:focus, select:focus, button:focus, a:focus {
    outline: 3px solid rgba(23, 92, 211, 0.28); outline-offset: 2px;
}
button, .button-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: var(--accent); color: #fff; padding: 0.7rem 1rem; border: none;
    border-radius: 10px; cursor: pointer; text-decoration: none; font-weight: 700;
    font: inherit; font-weight: 700;
}
button:hover, .button-link:hover { background: var(--accent-strong); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.button-quiet { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.button-quiet:hover { background: var(--border); }
.whatsapp-button { background: var(--whatsapp); }
.whatsapp-button:hover { background: #0d6036; }
.secondary-link { color: var(--accent); }

/* --- Blocks --------------------------------------------------------------- */
.card, .empty-state {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.alert { border-radius: 10px; padding: 0.75rem 1rem; margin: 0.75rem 0; }
.alert-error { color: var(--danger); background: var(--danger-bg); border: 1px solid #f1b8b8; }
.alert-success { color: var(--success); background: var(--success-soft); border: 1px solid #a8ddbe; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { border: 1px solid var(--border); padding: 0.65rem; text-align: right; }
th { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }
.status-pill { display: inline-flex; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.85rem; white-space: nowrap; }
.status-completed, .status-confirmed { color: var(--success); background: var(--success-soft); }
.status-pending { color: var(--warning); background: var(--warning-bg); }
.status-disabled, .status-cancelled { color: var(--muted); background: var(--surface-2); }
.status-fulfilled { color: var(--accent-strong); background: var(--accent-soft); }

/* ==========================================================================
   Platform — the entry page: pick a store, or add one.
   ========================================================================== */
.platform-bar { background: var(--ink); color: #fff; padding: 0.9rem 1.25rem; }
.platform-bar .wrap { padding: 0 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.platform-bar strong { font-size: 1.05rem; }
.platform-bar span { color: #aebbd0; font-size: 0.9rem; }

.platform-intro { margin-bottom: 1.5rem; }
.platform-intro h1 { margin: 0 0 0.35rem; font-size: 1.9rem; }
.platform-intro p { color: var(--muted); margin: 0; max-width: 68ch; }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.store-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem;
}
.store-card-head { display: flex; justify-content: space-between; align-items: start; gap: 0.75rem; }
.store-card h2 { margin: 0; font-size: 1.2rem; }
.store-card code { color: var(--muted); font-size: 0.85rem; }
.store-stats { display: flex; gap: 1.25rem; margin: 0; }
.store-stats div { display: grid; }
.store-stats dt { color: var(--muted); font-size: 0.85rem; }
.store-stats dd { margin: 0; font-weight: 800; font-size: 1.15rem; }
.plugin-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.plugin-chips span {
    background: var(--accent-soft); color: var(--accent-strong); border: 1px solid #bfd3f6;
    border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.82rem;
}
.plugin-chips span.off { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.store-card-actions { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.store-card-actions .button-link { flex: 1; }

.new-store { margin-top: 2rem; }
.new-store form { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 0.85rem; }

/* ==========================================================================
   Storefront — customer facing, mobile first.
   ========================================================================== */

.inline-check { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.inline-check input { width: auto; }
.category-index { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.category-index a {
    background: var(--surface); border: 1px solid var(--border); color: var(--ink);
    border-radius: 999px; padding: 0.45rem 0.75rem; text-decoration: none;
}
.category-index span { color: var(--muted); margin-inline-start: 0.25rem; }

.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; min-height: 150px; }
.product-thumb { width: 64px; flex: 0 0 64px; background: #dce7f7; color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; }
.sku { color: var(--muted); font-size: 0.9rem; margin: 0.45rem 0; word-break: break-word; }
.stock { display: inline-flex; gap: 0.35rem; margin: 0.35rem 0 0; border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.88rem; }
.stock-ok { color: var(--success); background: var(--success-soft); }
.stock-out { color: var(--danger); background: var(--danger-bg); }
.sale-badge { color: var(--danger); background: var(--danger-bg); border-radius: 999px; padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.add-to-cart { width: 100%; margin-top: 0.6rem; padding: 0.5rem; }
.product-detail { margin: 0.2rem 0; font-size: 0.9rem; color: var(--ink); }
.product-detail span { color: var(--muted); }

/* Variant options: one card, several sellable rows behind it. */
.variant-picker { border: 0; padding: 0; margin: 0.6rem 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.variant-picker legend { color: var(--muted); font-size: 0.85rem; padding: 0; margin-bottom: 0.35rem; width: 100%; }
.variant-option { position: relative; }
.variant-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.variant-option span {
    display: inline-block; border: 1px solid var(--border); border-radius: 999px;
    padding: 0.3rem 0.7rem; font-size: 0.9rem; font-weight: 700; background: var(--surface);
    transition: background 120ms ease, border-color 120ms ease;
}
.variant-option input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.variant-option input:focus-visible + span { outline: 3px solid rgba(23, 92, 211, 0.28); outline-offset: 2px; }
.variant-option.is-out span { color: var(--muted); background: var(--surface-2); text-decoration: line-through; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .variant-option span { transition: none; } }

.cart-panel {
    position: fixed; z-index: 50; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%);
    background: var(--surface); padding: 1rem; overflow-y: auto; transform: translateX(-105%);
    transition: transform 200ms ease-out; box-shadow: -20px 0 50px rgba(23, 32, 51, 0.2);
}
.cart-panel.is-open { transform: translateX(0); }
.cart-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(23, 32, 51, 0.5); }
body.cart-open { overflow: hidden; }
.cart-panel-head { display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.cart-panel-head h2 { margin: 0; font-size: 1.15rem; }
.icon-button { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.5rem; }
.cart-items { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
.cart-line { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.cart-line-copy { display: grid; min-width: 0; }
.cart-line-copy span { color: var(--muted); }
.quantity-control { display: flex; align-items: center; gap: 0.55rem; }
.quantity-control button { width: 32px; height: 32px; padding: 0; }
.cart-empty { color: var(--muted); background: var(--surface-2); padding: 1rem; border-radius: 10px; margin: 1rem 0; }
.cart-client-total { display: flex; justify-content: space-between; padding: 0.75rem 0; font-size: 1.05rem; }
.cart-disclaimer { font-size: 0.85rem; }
.checkout-form { max-width: none; }
.fulfillment-options { border: 1px solid var(--border); border-radius: 10px; display: flex; gap: 1rem; padding: 0.65rem; }
.fulfillment-options label { display: flex; align-items: center; gap: 0.4rem; }
.fulfillment-options input { width: auto; }
.customer-points { display: inline-flex; align-items: center; gap: 0.3rem; color: #563a96; font-weight: 600; }
.customer-points .icon { width: 1rem; height: 1rem; }
.loyalty-note { background: #f1ecff; color: #563a96; border-radius: 10px; padding: 0.65rem; }
/* The one checkbox in the checkout that spends something, so it reads as a
   choice rather than another field. */
.loyalty-redeem { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.8rem;
                  border: 1px solid var(--brand, var(--accent)); border-radius: 12px;
                  background: color-mix(in srgb, var(--brand, var(--accent)) 6%, transparent);
                  font-weight: 600; cursor: pointer; }
.loyalty-redeem input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand, var(--accent)); }

.whatsapp-preview { white-space: pre-wrap; text-align: start; direction: rtl; background: #edf8f1; border: 1px solid #b8dcc5; border-radius: 12px; padding: 1rem; font: inherit; }

/* ==========================================================================
   Console — the store owner's work surface.
   ========================================================================== */

.work-queue {
    background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--warning);
    border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.work-queue.is-clear { border-inline-start-color: var(--success); }
.work-queue h2 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.work-queue p { margin: 0; color: var(--muted); }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.metric dt { color: var(--muted); font-size: 0.9rem; margin: 0; }
.metric dd { margin: 0.25rem 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.metric dd small { font-size: 0.9rem; font-weight: 400; color: var(--muted); }

.console-columns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.panel h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.panel + .panel { margin-top: 1.25rem; }

.order-list { display: grid; gap: 0.75rem; }
.order-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--surface); }
.order-item.is-pending { border-inline-start: 4px solid var(--warning); }
.order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.order-head h3 { margin: 0; font-size: 1.05rem; }
.order-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--muted); margin: 0.4rem 0 0.6rem; font-size: 0.92rem; }
.order-lines { margin: 0.5rem 0; padding-inline-start: 1.1rem; color: var(--muted); }
.order-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.order-actions form { flex-direction: row; gap: 0.5rem; max-width: none; margin: 0; }
.price-drift { color: var(--warning); background: var(--warning-bg); border-radius: 8px; padding: 0.5rem 0.65rem; margin: 0.5rem 0 0; font-size: 0.9rem; }

.plugin-list { display: grid; gap: 1rem; }
.plugin-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.plugin-row.is-on { border-inline-start: 4px solid var(--success); }
.plugin-summary { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.plugin-summary h2 { margin: 0.15rem 0; font-size: 1.15rem; }
.plugin-summary p { margin: 0.25rem 0 0.75rem; color: var(--muted); max-width: 70ch; }
.plugin-contributes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.75rem; }
.plugin-contributes span { background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.82rem; }
.plugin-settings { max-width: none; border-top: 1px solid var(--border); padding-top: 1rem; }
.plugin-toggle { width: fit-content; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }

.assistant-placeholder { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.25rem; background: var(--surface-2); }
.assistant-placeholder h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }

/* Assistant */
.assistant-form { max-width: none; gap: 0.4rem; }
.assistant-input { display: flex; gap: 0.5rem; }
.assistant-input input { flex: 1; }
.assistant-input button { white-space: nowrap; }
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.suggestion {
    background: var(--surface-2); color: var(--ink); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.9rem; font-weight: 400;
}
.suggestion:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.assistant-answer { border-inline-start: 4px solid var(--accent); margin-top: 1.25rem; }
.assistant-text { font-size: 1.15rem; line-height: 1.7; margin: 0 0 1rem; }
.provenance summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.provenance table { margin-top: 0.75rem; }
.provenance td, .provenance th { font-size: 0.9rem; }
.assistant-warnings { color: var(--warning); background: var(--warning-bg); border-radius: 8px; padding: 0.65rem 1.5rem; margin: 0.85rem 0 0; font-size: 0.9rem; }
.tool-list, .history-list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.4rem; }
.tool-list li { font-size: 0.92rem; }
.tool-list code, .provenance code { background: var(--surface-2); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.85rem; }
.history-list { list-style: none; padding: 0; }
.history-list li { border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; display: grid; gap: 0.15rem; }
.history-list small { font-size: 0.82rem; }

.role-legend { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.role-legend div { display: grid; grid-template-columns: 150px 1fr; gap: 0.75rem; align-items: baseline; }
.role-legend dt code { background: var(--surface-2); border-radius: 6px; padding: 0.15rem 0.45rem; font-size: 0.88rem; }
.role-legend dd { margin: 0; color: var(--muted); }
.field-key { background: var(--surface-2); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.85rem; font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .role-legend div { grid-template-columns: 1fr; gap: 0.15rem; } }
.assistant-placeholder p { margin: 0; color: var(--muted); }

footer.site-footer { background: var(--surface-2); padding: 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    .console-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .wrap { padding: 1rem; }
    .product-card { flex-direction: column; }
    .product-thumb { width: 100%; min-height: 76px; }
    .plugin-summary { flex-direction: column; }
    .store-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-panel { transition: none; }
}

/* --- Import wizard -------------------------------------------------------- */
.wizard-steps {
    display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none;
    margin: 0 0 1.5rem; padding: 0;
}
.wizard-steps li {
    display: flex; align-items: center; gap: 0.5rem; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.92rem;
}
.wizard-steps li span {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-2); font-size: 0.8rem; font-weight: 700;
}
.wizard-steps li.is-current { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.wizard-steps li.is-current span { background: var(--accent); color: #fff; }
.wizard-steps li.is-done { color: var(--success); border-color: #a8ddbe; background: var(--success-soft); }
.wizard-steps li.is-done span { background: var(--success); color: #fff; }

/* Column mapping: the owner's header on one side, the meaning on the other. */
.column-map { display: grid; gap: 0.6rem; }
.column-row {
    display: grid; grid-template-columns: 1fr auto minmax(200px, 260px);
    gap: 0.85rem; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.75rem 1rem; background: var(--surface);
}
.column-source strong { display: block; }
.column-source p { margin: 0.2rem 0 0; word-break: break-word; }
.column-arrow { color: var(--muted); font-size: 1.2rem; }
.column-target select { width: 100%; }

.scope-options { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.scope-options label {
    display: flex; gap: 0.7rem; align-items: start; font-weight: 400;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem;
    background: var(--surface); cursor: pointer;
}
.scope-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.scope-options input { width: auto; margin-top: 0.25rem; }
.scope-options strong { display: block; }
.scope-options small { color: var(--muted); }

/* What the file will do, stated as an outcome rather than a counter name. */
.effect-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; }
.effect {
    background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 4px solid var(--border);
    border-radius: var(--radius); padding: 1rem;
}
.effect strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.effect span { color: var(--muted); font-size: 0.92rem; }
.effect-add { border-inline-start-color: var(--success); }
.effect-change { border-inline-start-color: var(--accent); }
.effect-problem { border-inline-start-color: var(--danger); }
.effect-warn { border-inline-start-color: var(--warning); }

.example-list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.35rem; }
.example-list code { background: var(--surface-2); border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.82rem; color: var(--muted); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 700px) {
    .column-row { grid-template-columns: 1fr; }
    .column-arrow { display: none; }
}

/* The customer came back through the link in their own WhatsApp message. */
.resume-banner {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 0.75rem; margin: 1rem 0;
    background: var(--accent-soft); border: 1px solid #bfd3f6;
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius); padding: 0.85rem 1.1rem;
}
.resume-banner p { margin: 0.2rem 0 0; }
.resume-banner a { white-space: nowrap; }
@media (max-width: 600px) { .resume-banner { flex-direction: column; align-items: flex-start; } }

/* --- trading hours ------------------------------------------------------- */

/* --- basket steps -------------------------------------------------------- */
/* Breathing room on both sides. It was flush against the rule above it and
   against the first field below, which read as a squeezed strip rather than
   as three steps. */
.step-trail { display: flex; gap: 0.4rem; list-style: none; margin: 1.1rem 0 1.25rem; padding: 0;
    font-size: 0.82rem; color: var(--muted); }
.step-trail li { display: flex; align-items: center; gap: 0.35rem; flex: 1; }
.step-trail span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
    border-radius: 50%; border: 1px solid var(--border); font-size: 0.78rem; }
.step-trail .is-current { color: var(--ink); font-weight: 600; }
.step-trail .is-current span { border-color: currentColor; }
.step-trail .is-done span { background: var(--ink); border-color: var(--ink); color: #fff; }
.cart-step[hidden] { display: none; }
.step-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.step-actions .whatsapp-button { flex: 1; }
.step-actions .button-quiet { background: none; border: 1px solid var(--border); border-radius: 10px;
    padding: 0 1rem; color: var(--muted); cursor: pointer; }
#cart-greeting { margin: 0 0 0.15rem; }
.cart-panel .whatsapp-preview { max-height: 40vh; overflow: auto; }

/* --- store settings ------------------------------------------------------ */
.settings-form .panel { margin-bottom: 1.25rem; }
.field-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 0.9rem; }
.price-sample { font-variant-numeric: tabular-nums; }
.weekday-picker { border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; margin: 0.9rem 0; }
.weekday-picker legend { padding: 0 0.4rem; color: var(--muted); font-size: 0.85rem; }
.weekday-picker .inline-check { display: inline-flex; margin: 0 0 0 1rem; }
.cart-step .whatsapp-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- plan meter ---------------------------------------------------------- */
.plan-meter { border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.25rem; }
.plan-meter.is-near { border-color: #f0d2a8; background: #fdf7ee; }
.plan-meter.is-over { border-color: #e8b4b4; background: #fdf1f1; }
.plan-meter-copy { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
.plan-meter-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.plan-meter-bar span { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.plan-meter.is-over .plan-meter-bar span { background: #b45252; }

/* --- owner notes on an order -------------------------------------------- */
.order-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0 0; }
.order-note textarea { flex: 1; min-height: 2.4rem; resize: vertical; }

/* --- customers ----------------------------------------------------------- */
.customer-list { display: grid; gap: 0.9rem; }
.customer-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; background: #fff; }
.customer-form { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0; flex-wrap: wrap; }
.customer-form select { flex: 0 0 auto; }
.customer-form textarea { flex: 1; min-width: 200px; min-height: 2.4rem; resize: vertical; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- paste-your-list setup ----------------------------------------------- */
.setup-columns { display: grid; gap: 1.1rem; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.35fr); align-items: start; }
@media (max-width: 900px) { .setup-columns { grid-template-columns: 1fr; } }
.setup-columns textarea { width: 100%; font-family: inherit; line-height: 1.7; resize: vertical; }
.setup-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.8rem; flex-wrap: wrap; }
.draft-table input[type="text"], .draft-table input[type="number"] { width: 100%; min-width: 5.5rem; }
.draft-table td { vertical-align: middle; }
.draft-note td { padding-top: 0; font-size: 0.82rem; color: var(--muted); border-top: 0; }

/* --- accounts, seats, and the open-console warning ----------------------- */
.auth-card { max-width: 26rem; margin: 3rem auto; background: #fff; border: 1px solid var(--border);
    border-radius: 16px; padding: 1.75rem; }
.auth-card h1 { margin-top: 0; font-size: 1.35rem; }
.auth-card label { display: block; margin: 0.9rem 0; }
.auth-card input { width: 100%; }
.auth-card button[type="submit"] { width: 100%; margin-top: 0.6rem; }
.claim-banner { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
    border: 1px solid #f0d2a8; background: #fdf7ee; border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.25rem; }
.claim-banner div { display: flex; flex-direction: column; gap: 0.2rem; }
.inline-form { display: inline; }
.seat-meter { border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1.25rem; }
.seat-meter.is-full { border-color: #f0d2a8; background: #fdf7ee; }
.seat-meter div { display: flex; flex-direction: column; gap: 0.2rem; }
.member-list { display: grid; gap: 0.9rem; }
.member-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; }
.invite-link { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.invite-link code { flex: 1; min-width: 12rem; overflow-wrap: anywhere; font-size: 0.8rem; }
.role-legend { margin: 1rem 0 0; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.role-legend dt { font-weight: 600; }
.role-legend dd { margin: 0; color: var(--muted); }

/* --- location ------------------------------------------------------------ */
.location-fields { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); width: 100%; }
.location-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.location-fields input { width: 100%; }
.location-share { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.9rem; }
.location-share button { border: 1px solid var(--border); border-radius: 10px; background: none;
    padding: 0.4rem 0.8rem; cursor: pointer; font: inherit; }

/* --- editing the catalogue in place ------------------------------------- */
.product-table { width: 100%; }
.product-table td { vertical-align: middle; padding: 0.45rem 0.5rem; }
.product-table input { width: 100%; }
.cell-name { min-width: 11rem; }
.cell-number { min-width: 5.5rem; text-align: start; font-variant-numeric: tabular-nums; }
.is-hidden-row { opacity: 0.55; }
.row-actions { white-space: nowrap; display: flex; gap: 0.4rem; align-items: center; }
.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; }
.pager a { border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem 0.6rem;
    text-decoration: none; font-size: 0.85rem; }
.pager a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- catalogue management ------------------------------------------------ */
.catalog-filters { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: end; border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.catalog-filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.catalog-filters input, .catalog-filters select { width: 100%; }
.catalog-filters .inline-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.filter-actions { display: flex; gap: 0.75rem; align-items: center; }
.bulk-bar { border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1rem;
    background: #fbfbfa; }
.bulk-scope { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.7rem; }
.bulk-scope span { color: var(--muted); font-size: 0.85rem; }
.bulk-controls { display: flex; gap: 0.7rem; align-items: end; flex-wrap: wrap; }
.bulk-controls label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.bulk-controls label[hidden] { display: none; }
.product-table td { vertical-align: middle; padding: 0.5rem; }
.product-table small { display: block; }
.cell-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-price s { margin-inline-start: 0.35rem; font-size: 0.85em; }
.is-hidden-row { opacity: 0.5; }
.row-actions { white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 1rem; }
.pager a { border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem 0.6rem;
    text-decoration: none; font-size: 0.85rem; }
.pager a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.mode-tabs a { border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.9rem;
    text-decoration: none; font-size: 0.88rem; color: var(--muted); }
.mode-tabs a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.confirm-panel { max-width: 42rem; }
.confirm-headline { font-size: 1.05rem; }
.sample-table { width: 100%; margin: 0.6rem 0 1rem; }
.sample-table td, .sample-table th { padding: 0.35rem 0.5rem; }
.change-log { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.change-log span { margin-inline-start: 0.4rem; }
.draft-table input { width: 100%; min-width: 5rem; }
.draft-note td { padding-top: 0; font-size: 0.82rem; color: var(--muted); border-top: 0; }
.setup-columns { display: grid; gap: 1.1rem; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr); align-items: start; }
@media (max-width: 950px) { .setup-columns { grid-template-columns: 1fr; } }
.filter-search { grid-column: 1 / -1; }
.filter-search input { font-size: 1rem; padding: 0.5rem 0.7rem; }
.suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.8rem; }
.stock-low, .has-low-stock { color: #a8621b; font-weight: 600; }
.field-inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0; font-size: 0.9rem; }
.settings-rule { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }
.product-table .stock-low { font-size: 0.75rem; }

/* --- the shop, browsable ------------------------------------------------- */
.category-index a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.storefront-pager { justify-content: center; margin: 1.5rem 0 0.5rem; }
.storefront-pager .pager-step { font-weight: 600; }

/* --- legal ---------------------------------------------------------------- */
.legal-page { max-width: 44rem; margin: 2rem auto; line-height: 1.9; }
.legal-page h2 { margin-top: 2rem; font-size: 1.1rem; }
.legal-page ul { padding-inline-start: 1.4rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-links { font-size: 0.8rem; opacity: 0.75; margin-top: 0.4rem; }

/* --- what the shopper owns ----------------------------------------------- */
.wish-button { border: 0; background: none; cursor: pointer; line-height: 1;
    color: var(--muted); padding: 0.1rem 0.3rem; }
.wish-button .icon { width: 1.3rem; height: 1.3rem; }
/* Filled, not swapped: the path is the same path either way. */
.wish-button.is-on { color: #c0392b; }
.wish-button.is-on .icon { fill: currentColor; }

/* --- «كن أول من يعلم» — a page, as theirs is --------------------------- */
.follow-page .follow-body { padding: 0 1rem 1.1rem; display: grid; gap: 0.9rem; }
.follow-page form { max-width: none; gap: 0.85rem; }
.follow-page label { display: grid; gap: 0.3rem; font-size: 0.9rem; }

/*
 * A phone number reads left to right in every language there is. Inside an RTL
 * page an unmarked field puts the country code on the wrong end and reorders
 * the digits on screen, so the shopper "corrects" a number that was already
 * right. `dir="ltr"` on the row fixes the order; these rules only lay it out.
 */
.phone-field { display: flex; gap: 0.4rem; }
.phone-field .phone-country { flex: 0 0 8.5rem; width: 8.5rem; text-align: start; }
.phone-field input { flex: 1; min-width: 0; text-align: left; letter-spacing: 0.02em; }

.follow-submit { width: 100%; background: var(--brand); color: var(--brand-ink); border-radius: 12px;
    padding: 0.8rem 1rem; font-size: 1rem; font-weight: 700; }
.follow-submit:hover:not(:disabled) { filter: brightness(0.9); }
.follow-message { margin: 0; font-size: 0.88rem; color: var(--success);
    background: var(--success-soft); border-radius: 10px; padding: 0.55rem 0.8rem; }
.follow-message[hidden] { display: none; }
.follow-message.is-error { color: var(--danger); background: var(--danger-bg); }

/* Their `CommunityLinks`: real link buttons under the form, not the hairline
   icons that live in the menu. */
.community-links { display: grid; }
.community-link { display: flex; align-items: center; gap: 0.75rem;
    border-top: 1px solid var(--border); padding: 0.8rem 1rem;
    text-decoration: none; color: inherit; }
.community-link:hover { background: var(--surface-2); }
.community-link > span:nth-child(2) { flex: 1; font-weight: 700; font-size: 0.92rem; }
.community-icon { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 999px;
    display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.community-go { color: var(--muted); }

.contact-line .contact-go { color: var(--muted); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.4rem; }
.card-head h3 { margin: 0; }
.cart-suggestions { display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.suggest-add { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline;
    border: 1px solid var(--border); border-radius: 10px; background: none; cursor: pointer;
    padding: 0.5rem 0.7rem; font: inherit; text-align: start; }
.suggest-add small { color: var(--muted); white-space: nowrap; }

/* --- the search page ------------------------------------------------------ */
.search-page { margin: 1rem 0; }
.search-main input { width: 100%; font-size: 1.05rem; padding: 0.7rem 0.9rem; border-radius: 12px; }
.search-controls { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.search-controls label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.search-count { margin: 0 0 0.8rem; }
.search-grid { margin-bottom: 1rem; }

/* ==========================================================================
   THE SHOP, LAID OUT LIKE THE THING IT COMES AFTER
   --------------------------------------------------------------------------
   The customer taps a link inside a WhatsApp chat and lands here. So the page
   opens the way the profile he was just looking at opens — round icon, heavy
   name, one small line, then where and when — and the shelves below it are
   lists, not grids, because that is what a shop's own menu looks like.

   The arrangement is copied deliberately, surface for surface:
     · a category menu that opens and closes, tools pinned to its foot
     · a thin top bar carrying only the menu button, the name, search, basket
     · profile · category tiles · bordered section cards · «اعرض الكل ←»
   ========================================================================== */

.shop-body { background: #f0f2f5; display: block; }
/* One column. The menu is fixed and slides over it, never beside it.
   `--brand` arrives from the shop's own settings; these are the fallbacks for
   a page rendered before any store row exists. */
.shop-shell { min-height: 100vh; --brand: #1d2433; --brand-soft: rgba(29, 36, 51, 0.10);
    --brand-ink: #fff; }

/* --------------------------------------------------------------------------
   ONE COLOUR ON THE CUSTOMER SURFACE
   --------------------------------------------------------------------------
   The storefront inherited the platform's blue for links, selected options and
   any unclassed button, while the basket's own buttons were WhatsApp green —
   so a single shop showed three unrelated colours in one session and none of
   them was the shop's.

   Rather than hunt every rule, the accent tokens are **remapped to the shop's
   colour inside the storefront only**. The console keeps its blue, because a
   working tool should look like a tool.

   Green is not decoration here: it is reserved for the one button that
   genuinely opens WhatsApp. A green «متابعة» that opens nothing spends the
   signal and leaves nothing to spend on the real thing.
   -------------------------------------------------------------------------- */
.shop-body {
    --accent: var(--brand);
    --accent-strong: var(--brand);
    --accent-soft: var(--brand-soft);
}
.shop-body button:not(.button-quiet):not(.whatsapp-button):not(.icon-button):not(.top-icon) {
    background: var(--brand); color: var(--brand-ink);
}
.shop-body .primary-button { background: var(--brand); color: var(--brand-ink); width: 100%;
    border-radius: 12px; padding: 0.8rem 1rem; font-size: 1rem; font-weight: 700; }
.shop-body .primary-button:hover:not(:disabled) { filter: brightness(0.92); }
.shop-body .primary-button:disabled { background: var(--surface-2); color: var(--muted); }
/* The exception, and the only one: this button opens WhatsApp. */
.shop-body .whatsapp-button { display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; width: 100%; border-radius: 12px; padding: 0.8rem 1rem; font-weight: 700; }
.shop-body a { color: var(--brand); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: 0.5rem; top: 0.5rem; z-index: 90; background: #fff;
    padding: 0.5rem 0.8rem; border-radius: 8px; }

/* --- icons: drawn, never emoji ------------------------------------------ */
/* See icon() in app/Helpers/helpers.php for why. Size and colour come from
   here so one class changes every glyph on the page at once. */
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block;
    vertical-align: -0.28em; }

/* --- the drawer: a menu, opened and closed ------------------------------- */
/* Their own class names say so — `navigation` gains `navigationOpened`. It is
   the right call: a standing sidebar spends a third of a laptop on a list of
   eight words the shopper reads once. */
.shop-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 45;
    width: min(19rem, 86vw); background: var(--surface);
    border-inline-end: 1px solid var(--border);
    display: flex; flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.18);
}
.shop-drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .shop-drawer { transition: none; } }

.drawer-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 0.9rem 0.75rem;
    border-bottom: 1px solid var(--border); }
.drawer-close { border: 0; background: none; cursor: pointer; color: var(--muted);
    width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center;
    padding: 0; flex: none; }
.drawer-close:hover { background: var(--surface-2); }
.drawer-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit;
    font-weight: 800; font-size: 0.98rem; min-width: 0; }
.drawer-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-avatar { width: 2rem; height: 2rem; flex: none; border-radius: 999px; display: grid;
    place-items: center; background: var(--surface-2); font-weight: 800; }

.drawer-scroll { flex: 1; overflow-y: auto; padding: 0.5rem 0.6rem 1rem; }
.drawer-nav, .drawer-pages { display: flex; flex-direction: column; gap: 0.1rem; }
.drawer-pages { border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.6rem; }
.drawer-nav a, .drawer-pages a { display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.7rem; border-radius: 10px; text-decoration: none; color: var(--ink);
    font-size: 0.92rem; }
.drawer-nav a span, .drawer-pages a span { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.drawer-nav a:hover, .drawer-pages a:hover { background: var(--surface-2); }
.drawer-nav a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.drawer-nav b { font-weight: 400; opacity: 0.55; font-size: 0.8rem; }

.drawer-foot { border-top: 1px solid var(--border); padding: 0.8rem 0.9rem 1rem; display: grid; gap: 0.8rem; }
/* Their `loginCard`, in its place — and nothing to sign into. */
.drawer-account { display: flex; align-items: center; gap: 0.65rem; text-decoration: none;
    color: var(--ink); border: 1px solid var(--border); border-radius: 12px;
    padding: 0.6rem 0.7rem; background: var(--surface); }
.drawer-account:hover { background: var(--surface-2); }
.drawer-account-icon { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 999px;
    display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.drawer-account-copy { flex: 1; min-width: 0; display: grid; }
.drawer-account-copy strong { font-size: 0.92rem; }
.drawer-account-copy em { font-style: normal; font-size: 0.76rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-account-go { color: var(--muted); }

/* Their `utilBar`: bare icons in a row, no rings around them. A circle on every
   glyph turns a quiet row of tools into a row of buttons demanding attention. */
.drawer-tools { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.drawer-tools a, .drawer-tools button { border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; text-decoration: none; color: var(--muted); padding: 0; }
.drawer-tools a:hover, .drawer-tools button:hover { color: var(--ink); }
.drawer-tools .icon { width: 1.3rem; height: 1.3rem; }
.drawer-tools button.is-done { color: var(--success); }
.drawer-lang { margin-inline-start: auto; font-size: 0.78rem; color: var(--muted);
    white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.drawer-powered { font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.drawer-powered strong { color: var(--accent); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 44; }
.drawer-backdrop[hidden] { display: none; }

/* --- the column ----------------------------------------------------------- */
.shop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-top { position: sticky; top: 0; z-index: 30; background: var(--surface);
    border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.8rem; }
.shop-top-name { font-weight: 800; font-size: 1rem; text-decoration: none; color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-top-actions { margin-inline-start: auto; display: flex; gap: 0.2rem; }
.top-icon { border: 0; background: none; cursor: pointer; width: 2.5rem; height: 2.5rem;
    border-radius: 999px; display: grid; place-items: center; line-height: 1;
    text-decoration: none; color: var(--ink); padding: 0; position: relative; }
.top-icon:hover { background: var(--surface-2); }
.top-icon .icon { width: 1.35rem; height: 1.35rem; }
.cart-badge { position: absolute; inset-block-start: 0.25rem; inset-inline-end: 0.25rem;
    background: var(--brand); color: var(--brand-ink); border-radius: 999px; font-size: 0.62rem;
    min-width: 1.05rem; height: 1.05rem; display: grid; place-items: center; font-weight: 700;
    padding: 0 0.2rem; }
.cart-badge[hidden] { display: none; }
/* Measured off their storefront: a centred column of about 43rem, and inside
   it a thumbnail near a seventh of its width. Ours was 46rem with a 4.25rem
   thumbnail — a wider column making the picture look smaller still. */
.shop-main > main { max-width: 43rem; width: 100%; margin: 0 auto; padding: 0.75rem 0.9rem 4rem; }

/* --- the profile, WhatsApp-shaped ---------------------------------------- */
/* Their `profileWrapperWithBg`: a wash of the shop's colour behind the head
   of the page, which is most of what makes a storefront look like its own. */
.shop-profile { text-align: center; padding: 1.5rem 0.9rem 0.9rem; position: relative;
    background: var(--brand-soft); border-radius: var(--radius); margin-top: 0.5rem; }
.shop-profile.is-compact { padding-bottom: 0.25rem; }
.shop-avatar { width: 5.5rem; height: 5.5rem; margin: 0 auto 0.9rem; border-radius: 999px;
    display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--brand-ink);
    background: var(--brand);
    /* Their `avatarRing` — a hairline ring around the profile picture. */
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--brand); }
.shop-avatar .icon { width: 2.6rem; height: 2.6rem; }
.shop-title { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1.25; }
.shop-tagline { margin: 0.35rem auto 0; color: var(--muted); font-size: 0.95rem; max-width: 34rem; }

.shop-about { margin: 0.6rem auto 0; max-width: 36rem; }
.shop-about-text { margin: 0; color: var(--muted); font-size: 0.92rem; }
/* Two lines and a word, exactly as theirs. The class is added by JS only when
   the text actually overflows, so a one-line note never grows a dead button. */
.shop-about-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.shop-more { border: 0; background: none; cursor: pointer; color: var(--accent); font: inherit;
    font-size: 0.88rem; padding: 0.15rem 0; }
.shop-more[hidden] { display: none; }

.shop-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.shop-pill .icon { width: 1.05rem; height: 1.05rem; }
.shop-pill { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border);
    background: var(--surface); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.85rem;
    color: var(--ink); text-decoration: none; }
.shop-pill.is-link { border-color: var(--brand); color: var(--brand); }
.shop-pill.is-link:hover { background: var(--brand-soft); }
.shop-pill.is-open { border-color: #b9e3c6; background: #f2fbf5; color: var(--success); }
.shop-pill.is-closed { border-color: #f0d2a8; background: #fdf7ee; color: var(--warning); }
.shop-notice { margin: 0.8rem auto 0; max-width: 32rem; font-size: 0.88rem; color: var(--warning);
    background: var(--warning-bg); border-radius: 10px; padding: 0.5rem 0.8rem; }
.shop-notice.is-soft { color: var(--muted); background: var(--surface-2); }

/* --- the round category tiles -------------------------------------------- */
.shop-cats { display: flex; gap: 0.9rem; overflow-x: auto; padding: 1.1rem 0.2rem 0.6rem;
    scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats a { flex: 0 0 auto; width: 4.6rem; text-align: center; text-decoration: none; color: inherit; }
/* Rounded squares, not circles — theirs are, and a squircle reads as a tile of
   merchandise where a circle reads as a person. */
.cat-tile { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 0.35rem;
    border-radius: 16px; font-size: 1.5rem; font-weight: 800; color: #fff;
    background: hsl(var(--tile-hue, 210), 42%, 44%); }
.cat-label { display: block; font-size: 0.78rem; line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.shop-back { margin: 0.4rem 0 0.8rem; }
.shop-back a { text-decoration: none; font-size: 0.92rem; display: inline-flex;
    align-items: center; gap: 0.25rem; }
.shop-back .icon { width: 1.05rem; height: 1.05rem; }

/* --- a shelf is a bordered card ------------------------------------------ */
.shop-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-top: 1.1rem; overflow: hidden; }
.shop-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.95rem 1rem 0.7rem; }
.shop-card-head h2 { margin: 0; font-size: 1.05rem; }
.shop-card.is-note { padding: 1rem; }
.shop-card.is-note h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.shop-card.is-contact { padding: 1rem; text-align: center; }
.shop-card.is-contact h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.shop-card > .empty-state { border: 0; margin: 0; }
.contact-line { margin-top: 0.8rem; width: 100%; display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: 12px; background: none; cursor: pointer;
    padding: 0.65rem 0.8rem; font: inherit; text-align: start; }
.contact-line:hover { background: var(--surface-2); }
.contact-icon { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 999px; display: grid;
    place-items: center; background: var(--brand); color: var(--brand-ink); }

/* --- and its products are rows ------------------------------------------- */
.product-rows { list-style: none; margin: 0; padding: 0; }
.product-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.product-row.is-out { opacity: 0.62; }
.row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1rem;
    padding: 0.95rem 1rem; text-decoration: none; color: inherit; }
.row-link:hover { background: var(--surface-2); }
.row-text { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.row-name { font-weight: 700; font-size: 0.97rem; line-height: 1.35; }
.row-desc { color: var(--muted); font-size: 0.85rem; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* The name is the heading; the price is a fact under it. Setting the price
   heavier and nearly as large made every row read as two competing titles —
   theirs prints «OMR 1.800» at a normal weight below a bold name. */
.row-price { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.92rem;
    margin-top: 0.1rem; }
.row-price b { font-weight: 500; }
.row-price s { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
.row-out { font-style: normal; color: var(--danger); font-size: 0.8rem; }
.row-thumb { width: 6rem; height: 6rem; flex: none; border-radius: 12px; display: grid;
    place-items: center; font-size: 2rem; font-weight: 800; color: #fff;
    background: hsl(var(--tile-hue, 210), 38%, 48%); }
.product-row .wish-button { align-self: center; padding: 0.5rem 0.75rem 0.5rem 0.25rem; }

.view-all-wrap { padding: 0.25rem 1rem 1rem; }
.view-all { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem;
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.view-all .icon { width: 1.1rem; height: 1.1rem; }
.view-all:hover { background: var(--surface-2); }

/* --- a shelf laid out as a grid ------------------------------------------ */
/* The other half of the same page: four across, the photograph doing the
   selling and the words reduced to a caption. Which shelf gets this is the
   merchant's decision — see migration 46. */
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.9rem; padding: 0 1rem 0.5rem; }
.shelf-tile { display: grid; gap: 0.35rem; text-decoration: none; color: inherit; }
.shelf-tile.is-out { opacity: 0.6; }
.tile-shot { aspect-ratio: 1 / 1; border-radius: 12px; display: grid; place-items: center;
    font-size: 2.4rem; font-weight: 800; color: #fff; overflow: hidden;
    background: hsl(var(--tile-hue, 210), 38%, 48%); }
.tile-shot.has-image { background: var(--surface-2); }
.tile-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-name { font-size: 0.88rem; font-weight: 600; line-height: 1.4; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-price { font-size: 0.88rem; }
.tile-price b { font-weight: 500; }
.view-all:hover { background: var(--surface-2); }

/* --- one product --------------------------------------------------------- */
.product-page { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; display: grid; gap: 1.2rem; padding: 1rem; }

/* --- the gallery --------------------------------------------------------- */
/* A square frame with the photograph `contain`ed inside it and a blurred copy
   of the same photograph filling the rest. Read straight off their page: the
   image carries `object-fit: contain` over a `backdrop-filter: blur(20px)`.
   The point is that nothing is ever cropped — a tall bottle and a wide box
   both sit correctly in the same square, and neither floats on empty grey. */
.product-media-main { position: relative; aspect-ratio: 1 / 1; border-radius: 12px;
    overflow: hidden; background: var(--surface-2); }
.product-shot { position: absolute; inset: 0; margin: 0; display: none; }
.product-shot.is-current { display: block; }
.product-shot::before { content: ''; position: absolute; inset: -10%;
    background-image: var(--shot); background-size: cover; background-position: center;
    filter: blur(22px); opacity: 0.55; }
.product-shot img { position: relative; width: 100%; height: 100%;
    object-fit: contain; display: block; }

.shot-control { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.9); color: var(--ink);
    display: grid; place-items: center; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,0.15); }
.shot-control:hover { background: #fff; }
.shot-control.is-prev { inset-inline-start: 0.5rem; }
.shot-control.is-next { inset-inline-end: 0.5rem; }

/* 128×128 with a 12px radius and a hairline — their numbers exactly. */
.product-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; overflow-x: auto;
    scrollbar-width: none; }
.product-thumbs::-webkit-scrollbar { display: none; }
.product-thumb-button { flex: 0 0 auto; width: 4rem; height: 4rem; padding: 0; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
    overflow: hidden; }
.product-thumb-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb-button.is-current { border-color: var(--brand); border-width: 2px; }

/* A product with no picture is not a product with a broken picture: the media
   column is absent entirely and the detail column takes the full width. */
.product-page.has-no-image { grid-template-columns: 1fr; }

/* Where a tile carries a photograph it stops being a coloured letter. */
.row-thumb.has-image, .product-tile-thumb.has-image, .alongside-thumb.has-image {
    background: var(--surface-2); overflow: hidden; padding: 0; }
.row-thumb.has-image img, .product-tile-thumb.has-image img, .alongside-thumb.has-image img {
    width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail { display: grid; gap: 0.55rem; align-content: start; }
.product-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.product-detail-head h1 { margin: 0; font-size: 1.35rem; line-height: 1.3; }
.product-detail-actions { display: flex; gap: 0.15rem; flex: none; align-items: center; }
.product-detail-actions .icon-button { border: 0; background: none; cursor: pointer;
    color: var(--muted); padding: 0.1rem 0.3rem; display: grid; place-items: center; }
.product-detail-actions .icon-button .icon { width: 1.25rem; height: 1.25rem; }
.product-price { display: flex; align-items: baseline; gap: 0.5rem; }
.product-price strong { font-size: 1.4rem; }
.product-price span { color: var(--muted); text-decoration: line-through; }
.product-detail-line { margin: 0; font-size: 0.9rem; }
.product-detail-line span { color: var(--muted); }

.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-top: 1px solid var(--border); padding-top: 0.85rem; margin-top: 0.35rem; font-weight: 700; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; }
.qty-stepper button { border: 0; background: none; cursor: pointer; width: 2.3rem; height: 2.3rem;
    line-height: 1; color: inherit; border-radius: 999px; padding: 0; display: grid;
    place-items: center; }
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper output { min-width: 2.2rem; text-align: center; font-weight: 800; }
/* One button, full width, carrying the price it will charge. */
.add-to-cart.is-primary { width: 100%; background: var(--brand); color: var(--brand-ink); border-radius: 12px;
    padding: 0.85rem 1rem; font-size: 1rem; font-weight: 700; display: flex; justify-content: center;
    gap: 0.5rem; }
.add-to-cart.is-primary:hover:not(:disabled) { filter: brightness(0.9); }
.add-to-cart.is-primary:disabled { background: var(--surface-2); color: var(--muted); }

.alongside-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.8rem; padding: 0 1rem 1rem; }
.alongside-item { text-decoration: none; color: inherit; display: grid; gap: 0.3rem; }
.alongside-thumb { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center;
    font-size: 1.8rem; font-weight: 800; color: #fff; background: hsl(var(--tile-hue, 210), 38%, 48%); }
.alongside-name { font-size: 0.85rem; line-height: 1.35; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.alongside-price { font-weight: 800; font-size: 0.88rem; }

/* --- «حسابي» ------------------------------------------------------------- */
.account-menu { list-style: none; margin: 0; padding: 0; }
.account-menu li + li { border-top: 1px solid var(--border); }
.account-menu a, .account-menu button { display: flex; align-items: center; gap: 0.8rem; width: 100%;
    padding: 0.85rem 1rem; text-decoration: none; color: inherit; background: none; border: 0;
    cursor: pointer; font: inherit; text-align: start; }
.account-menu a:hover, .account-menu button:hover { background: var(--surface-2); }
.account-icon { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 999px; display: grid;
    place-items: center; background: var(--surface-2); }
.account-label { flex: 1; font-weight: 700; }
.account-label em { display: block; font-style: normal; font-weight: 400; color: var(--muted);
    font-size: 0.82rem; }
.account-chevron { color: var(--muted); display: grid; place-items: center; }
.account-icon { color: var(--muted); }
.account-icon .icon { width: 1.2rem; height: 1.2rem; }

/* --- phone --------------------------------------------------------------- */
@media (max-width: 640px) {
    .shop-avatar { width: 4.75rem; height: 4.75rem; font-size: 2rem; }
    .shop-title { font-size: 1.45rem; }
    .row-thumb { width: 5rem; height: 5rem; font-size: 1.6rem; }
}
@media (min-width: 700px) {
    .product-page { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
    .product-page.has-no-image { grid-template-columns: 1fr; }
}

/* --- search results: square tiles, as theirs are ------------------------- */
.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.8rem; margin-bottom: 1rem; }
.search-grid .product-card { position: relative; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    display: block; min-height: 0; }
.search-grid .product-card.is-out { opacity: 0.62; }
.product-tile { display: grid; gap: 0.3rem; padding: 0.5rem; text-decoration: none; color: inherit; }
.product-tile-thumb { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center;
    font-size: 2rem; font-weight: 800; color: #fff; background: hsl(var(--tile-hue, 210), 38%, 48%); }
.product-tile-name { font-size: 0.88rem; line-height: 1.35; font-weight: 700; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-tile-price { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.88rem;
    font-weight: 500; }
.product-tile-price s { color: var(--muted); font-size: 0.78rem; }
.product-tile-out { font-size: 0.78rem; color: var(--danger); }
.product-tile-low { font-size: 0.78rem; color: var(--warning); }
.search-grid .wish-button { position: absolute; inset-block-start: 0.4rem; inset-inline-end: 0.4rem;
    background: rgba(255,255,255,0.9); border-radius: 999px; width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center; padding: 0; }
.search-page { max-width: none; }

/* --- pictures, in the console -------------------------------------------- */
.image-manager { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.9rem 0; }
.image-slot { margin: 0; width: 8rem; display: grid; gap: 0.35rem; }
.image-slot img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface-2); }
.image-slot.is-cover img { border-color: var(--accent); border-width: 2px; }
.image-slot figcaption { font-size: 0.75rem; color: var(--accent); font-weight: 700; text-align: center; }
.image-slot-actions { display: grid; gap: 0.25rem; }
.image-slot-actions form { margin: 0; max-width: none; }
.image-slot-actions button { width: 100%; font-size: 0.75rem; padding: 0.3rem 0.4rem; }

/* --- the shop's colour, chosen ------------------------------------------- */
.brand-picker { border: 0; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap;
    gap: 0.6rem; max-width: none; }
.brand-picker legend { font-weight: 700; margin-bottom: 0.5rem; }
.swatch { display: grid; justify-items: center; gap: 0.25rem; cursor: pointer; font-weight: 400; }
/*
 * Clipped, never zero-sized.
 *
 * `width: 0; height: 0` makes a control **unfocusable**, and a browser cannot
 * show a validation bubble on something it cannot focus — so a `required`
 * radio styled this way makes the submit button do **nothing at all**, with
 * only a console line to explain it. That shipped on the first onboarding
 * screen and no test could have caught it: every suite here talks to the
 * server, and HTML5 validation never reaches the server.
 *
 * 1×1 and clipped keeps it focusable, keyboard-reachable and invisible.
 */
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0; clip-path: inset(50%); }
.swatch span { width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--swatch);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--swatch); }
.swatch input:focus-visible + span { outline: 3px solid rgba(23, 92, 211, 0.28); outline-offset: 3px; }
.swatch em { font-style: normal; font-size: 0.72rem; color: var(--muted); }

/* --- the receipt, in the shop's own language ----------------------------- */
/* A mark rather than a letter: this avatar carries a state, not an initial. */
.shop-avatar.is-mark { background: var(--surface); color: var(--brand);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--brand); }
.shop-avatar.is-mark .icon { width: 2.4rem; height: 2.4rem; }
.receipt-body { padding: 0 1rem 1.1rem; display: grid; gap: 0.9rem; }
.receipt-body .whatsapp-preview { margin: 0; max-height: 22rem; overflow: auto; }

/* --- the shop's own pictures --------------------------------------------- */
/* Their `ProfileSection`: a banner with the round mark overlapping its foot.
   Both are optional and the block collapses cleanly without either. */
.shop-profile.has-banner { padding-top: 0; overflow: hidden; }
.shop-banner { margin: 0 -0.9rem; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface-2); }
.shop-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-profile.has-banner .shop-avatar { margin-top: -2.75rem; position: relative; z-index: 1; }
.shop-avatar.has-image { background: var(--surface); padding: 0; overflow: hidden; }
.shop-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 999px; }
.drawer-avatar.has-image { overflow: hidden; padding: 0; }
.drawer-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile.has-image { background: var(--surface-2); overflow: hidden; }
.cat-tile.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- and where the shop uploads them ------------------------------------- */
.branding-slots { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0.9rem 0; align-items: start; }
.branding-slot { display: grid; gap: 0.45rem; }
.branding-slot.is-wide { flex: 1; min-width: 18rem; }
.branding-label { font-weight: 700; font-size: 0.9rem; }
.branding-preview { border: 1px solid var(--border); background: var(--surface-2);
    display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.branding-preview.is-round { width: 6rem; height: 6rem; border-radius: 999px; }
.branding-preview.is-banner { aspect-ratio: 16 / 7; border-radius: 12px; }
.branding-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branding-empty .icon { width: 1.8rem; height: 1.8rem; }
.branding-slot form { margin: 0; max-width: none; flex-wrap: wrap; }
.branding-preview.is-small { width: 3rem; height: 3rem; }
.cat-picture { margin: 0; max-width: none; gap: 0.3rem; align-items: center; }
.cat-picture input[type="file"] { width: 7rem; font-size: 0.7rem; }

/* --- what the delivery rules are, before they can refuse ------------------ */
.delivery-rule { margin: 0.6rem 0 0; font-size: 0.88rem; border-radius: 10px;
    padding: 0.55rem 0.75rem; }
.delivery-rule[hidden] { display: none; }
/* Blocking: the basket cannot go forward yet, and says why. */
.delivery-rule.is-blocking { color: var(--warning); background: var(--warning-bg); font-weight: 600; }
/* A nudge, not a warning — nothing is wrong, there is just money on the table. */
.delivery-rule.is-nudge { color: var(--ink); background: var(--brand-soft); }
.delivery-rule.is-won { color: var(--success); background: var(--success-soft); font-weight: 600; }

/* --- badges: «الأكثر طلباً» و«جديد» -------------------------------------- */
/* Over the corner of the picture where there is one, beside the name where
   there is not. Both come from data we already keep — no new table. */
.badge-stack { position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0.3rem;
    display: grid; gap: 0.2rem; justify-items: start; }
.shelf-badge { font-size: 0.66rem; font-weight: 700; border-radius: 999px;
    padding: 0.16rem 0.45rem; white-space: nowrap; line-height: 1.4; }
.shelf-badge.is-best { background: var(--warning-bg); color: var(--warning); }
.shelf-badge.is-new { background: var(--brand); color: var(--brand-ink); }
.shelf-badge.is-inline { display: inline-block; vertical-align: middle;
    margin-inline-start: 0.35rem; }
.row-thumb, .tile-shot { position: relative; }

/* ==========================================================================
   ONBOARDING — two columns: the question, and what answering it buys
   ========================================================================== */
.onboard-body { background: var(--bg); display: block; }
.onboard-top { background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem; }
.onboard-brand { font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.onboard-exit { color: var(--muted); text-decoration: none; font-size: 0.9rem; }

.onboard-shell { display: grid; gap: 0; min-height: calc(100vh - 3.6rem); }
.onboard-form { background: var(--surface); padding: 2rem 1.5rem 3rem; }
.onboard-form h1 { margin: 0.35rem 0 0.5rem; font-size: 1.6rem; }
.onboard-form form { max-width: 32rem; }
.onboard-count { color: var(--muted); font-size: 0.85rem; margin: 0; }
.onboard-trail { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin: 0.6rem 0 1.5rem; padding: 0; font-size: 0.78rem; color: var(--muted); }
.onboard-trail li { display: flex; align-items: center; gap: 0.3rem; }
.onboard-trail span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
    border-radius: 999px; border: 1px solid var(--border); font-size: 0.72rem; }
.onboard-trail .is-current { color: var(--ink); font-weight: 700; }
.onboard-trail .is-current span { border-color: var(--ink); }
.onboard-trail .is-done span { background: var(--ink); border-color: var(--ink); color: #fff; }

/* The marketing column. A drawn panel, not a video — «بيكفي إنه نعمل أيقونة». */
.onboard-aside { background: var(--accent-soft); padding: 2.5rem 1.5rem; display: grid;
    align-content: center; justify-items: center; text-align: center; gap: 0.5rem; }
@media (min-width: 860px) {
    /* Follows the form down. Picking a colour beside a preview that has
       scrolled away is the same as having no preview. */
    .onboard-aside { align-content: start; position: sticky; top: 0;
        height: 100vh; overflow-y: auto; }
}
.onboard-art { width: 5rem; height: 5rem; border-radius: 20px; display: grid; place-items: center;
    background: var(--surface); color: var(--accent); margin-bottom: 0.5rem; }
.onboard-art .icon { width: 2.4rem; height: 2.4rem; }
.onboard-aside h2 { margin: 0; font-size: 1.15rem; }
.onboard-aside p { margin: 0; color: var(--muted); max-width: 26rem; }

/* Step 1: one kind only. */
.kind-picker { border: 0; padding: 0; margin: 0 0 1.2rem; max-width: none; }
.kind-picker legend { font-weight: 700; margin-bottom: 0.6rem; }
.kind-option input { position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0; clip-path: inset(50%); }
.kind-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.kind-face { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.8rem; background: var(--surface); }
.kind-icon { grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid;
    place-items: center; background: var(--surface-2); color: var(--muted); align-self: center; }
.kind-face strong { font-size: 0.95rem; }
.kind-face em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.kind-option input:checked + .kind-face { border-color: var(--ink); border-width: 2px; padding: calc(0.7rem - 1px) calc(0.8rem - 1px); }
.kind-option input:checked + .kind-face .kind-icon { background: var(--ink); color: #fff; }
.kind-option input:focus-visible + .kind-face { outline: 3px solid rgba(23,92,211,0.28); outline-offset: 2px; }

.phone-country.is-fixed { display: grid; place-items: center; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; padding: 0 0.75rem; font-weight: 600; }
.link-field { display: flex; }
.link-prefix { display: grid; place-items: center; background: var(--surface-2); color: var(--muted);
    border: 1px solid var(--border); border-inline-end: 0; border-radius: 10px 0 0 10px;
    padding: 0 0.6rem; font-size: 0.8rem; white-space: nowrap; }
.link-field input { border-radius: 0 10px 10px 0; }

/* Step 2's live preview: the real blocks, not a picture. */
/* In the aside now, where «المعاينة بجانبك» is finally true. Sticky, because
   the form beside it is longer than the preview and a merchant picking a
   colour at the bottom should still see what it does. */
.onboard-preview { margin-top: 1.25rem; width: min(20rem, 100%); border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden; background: var(--surface);
    box-shadow: 0 10px 30px rgba(23, 32, 51, 0.10); }
.preview-top { display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.85rem; }
.preview-top .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.preview-body { padding: 1.2rem 0.8rem; text-align: center; display: grid; gap: 0.4rem;
    justify-items: center; background: var(--brand-soft, transparent); }
.preview-avatar { width: 3.2rem; height: 3.2rem; border-radius: 999px; display: grid; place-items: center;
    background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 1.3rem; }
.preview-city { font-size: 0.75rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.25rem; }
.preview-city .icon { width: 0.9rem; height: 0.9rem; }
.preview-rows { display: grid; gap: 0.4rem; width: 100%; margin-top: 0.5rem; }
.preview-rows i { height: 0.7rem; border-radius: 4px; background: var(--surface-2); }
.preview-cart { background: var(--brand); color: var(--brand-ink); text-align: center;
    padding: 0.55rem; font-size: 0.85rem; font-weight: 700; }

/* Steps 3–6 */
.onboard-choices { display: grid; gap: 0.6rem; margin: 1.2rem 0; max-width: 34rem; }
.onboard-choice { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit;
    border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 0.9rem; background: var(--surface); }
.onboard-choice:hover { background: var(--surface-2); }
.onboard-choice.is-primary { border-color: var(--ink); border-width: 2px; }
.choice-icon { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 10px; display: grid;
    place-items: center; background: var(--surface-2); color: var(--muted); }
.choice-copy { flex: 1; display: grid; }
.choice-copy em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.choice-go { color: var(--muted); }
.onboard-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.onboard-actions form { margin: 0; }
.onboard-actions .primary-button { width: auto; }
.onboard-note { display: flex; gap: 0.8rem; border: 1px solid var(--border); border-radius: 12px;
    padding: 0.85rem; margin: 1.1rem 0; background: var(--surface-2); }
.onboard-note strong { display: block; }

.test-link { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0 0.5rem; }
.test-link code { background: var(--surface-2); border-radius: 8px; padding: 0.5rem 0.7rem; }
.test-state { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.5rem; max-width: 30rem; }
.test-state li { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border);
    border-radius: 10px; padding: 0.6rem 0.8rem; color: var(--muted); }
.test-state li span { display: grid; place-items: center; color: var(--muted); }
.test-state li.is-done { color: var(--success); border-color: #a8ddbe; background: var(--success-soft); }
.test-state li.is-done span { color: var(--success); }

.plan-lines { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.45rem; max-width: 32rem; }
.plan-lines li { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border);
    border-radius: 10px; padding: 0.6rem 0.8rem; }
.plan-lines li span { display: grid; place-items: center; }
.plan-lines .is-in { color: var(--ink); }
.plan-lines .is-in span { color: var(--success); }
.plan-lines .is-out { color: var(--muted); }
.plan-lines .is-out span { color: var(--muted); }

@media (min-width: 860px) {
    .onboard-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
    .onboard-form { padding: 2.5rem 3rem 4rem; }
}

/* --- the front door ------------------------------------------------------- */
/* Sign-in and sign-up live on the bar of every platform page. Their absence is
   how a visitor could read «سجّل الدخول» three times and find nowhere to. */
.platform-access { display: flex; align-items: center; gap: 0.6rem; }
.platform-access a, .platform-access button { color: #dfe7f3; text-decoration: none;
    font-size: 0.9rem; background: none; border: 0; cursor: pointer; padding: 0.35rem 0.2rem; }
.platform-access a:hover, .platform-access button:hover { color: #fff; }
.platform-access .is-primary { background: #fff; color: var(--ink); border-radius: 8px;
    padding: 0.4rem 0.8rem; font-weight: 700; }
.platform-access form { margin: 0; display: inline; }

.access-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   THE CONSOLE — a standing sidebar, arranged the way take.app's is
   --------------------------------------------------------------------------
   It was twelve links in a row across the top, which is too many to scan
   sideways and gave nothing a hierarchy: «سجل النشاط» sat at the same level as
   «الطلبات». Three groups now, in the order a shopkeeper's day runs — what
   needs answering, what he sells, how the shop is set up — and sales channels
   apart, because they are where the shop *appears* rather than what it manages.

   No new tokens and no new colour: everything here is the palette that was
   already defined. The console keeps its blue on purpose — a working tool
   should look like a tool, and the shop's own colour belongs to the shop.
   ========================================================================== */
.console-body { background: var(--bg); display: block; }
.console-shell { display: flex; min-height: 100vh; align-items: stretch; }

.console-side { width: 16.5rem; flex: 0 0 16.5rem; background: var(--surface);
    border-inline-end: 1px solid var(--border); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; z-index: 40; }
.side-head { display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1rem 0.75rem; }
.side-brand { font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.side-close { display: none; border: 0; background: none; cursor: pointer; color: var(--muted);
    padding: 0; width: 2rem; height: 2rem; place-items: center; }

.store-switch { display: flex; align-items: center; gap: 0.6rem; margin: 0 0.75rem 0.75rem;
    padding: 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: 12px;
    text-decoration: none; color: inherit; }
.store-switch:hover { background: var(--surface-2); }
.store-switch-mark { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 10px;
    display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; }
.store-switch-copy { flex: 1; min-width: 0; display: grid; }
.store-switch-copy strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-switch-copy em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.store-switch-go { color: var(--muted); }

.side-nav { flex: 1; overflow-y: auto; padding: 0 0.6rem 1rem; display: flex; flex-direction: column; gap: 0.1rem; }
.side-group { margin: 0.9rem 0 0.3rem; padding-inline-start: 0.7rem; font-size: 0.72rem;
    font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.side-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem;
    border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.side-nav a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav a:hover { background: var(--surface-2); }
.side-nav a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 700; }
.side-nav .icon { color: var(--muted); }
.side-nav a[aria-current="page"] .icon { color: #fff; }
.side-badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 0.68rem;
    min-width: 1.2rem; height: 1.2rem; display: grid; place-items: center; padding: 0 0.3rem; }
.side-out { width: 0.95rem; height: 0.95rem; opacity: 0.5; }

.side-foot { border-top: 1px solid var(--border); padding: 0.8rem 0.75rem 1rem; display: grid; gap: 0.7rem; }
/* The ceiling, met while working rather than when an order is refused. */
.plan-box { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.8rem; display: grid; gap: 0.4rem; }
.plan-box strong { font-size: 0.85rem; }
.plan-line { display: flex; justify-content: space-between; margin: 0; font-size: 0.8rem; color: var(--muted); }
.plan-full { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.6; color: #ffd7a8; }
.plan-line b { color: var(--ink); }
.plan-bar { display: block; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.plan-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.plan-upgrade { font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.side-who { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-size: 0.8rem; color: var(--muted); }
.side-who form { margin: 0; max-width: none; }
.side-who button { background: none; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; padding: 0; text-decoration: underline; }
.side-backdrop { display: none; }

.console-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.console-top { position: sticky; top: 0; z-index: 30; background: var(--surface);
    border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 1.25rem; }
.console-top-title { font-size: 1rem; }
.console-top-shop { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.console-top-shop:hover { color: var(--ink); }
#side-open { display: none; }
.console-content { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

@media (max-width: 960px) {
    .console-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 17rem;
        transform: translateX(105%); transition: transform 0.18s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); }
    .console-side.is-open { transform: none; }
    .side-close, #side-open { display: grid; }
    .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 35; }
    .side-backdrop[hidden] { display: none; }
}

/* --- the dashboard head --------------------------------------------------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; }
.dash-head h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
.plan-chip { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px;
    padding: 0.2rem 0.6rem; background: var(--surface-2); color: var(--muted); }
.back-link { margin: 0 0 0.4rem; font-size: 0.9rem; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-actions .button-link, .dash-actions button { display: inline-flex; align-items: center;
    gap: 0.35rem; font-size: 0.88rem; }
.dash-actions .icon { width: 1.05rem; height: 1.05rem; }

/* Three numbers, before anything that needs reading. */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.9rem; margin-bottom: 1.25rem; }
.dash-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; display: grid; gap: 0.3rem; }
.dash-stat span { color: var(--muted); font-size: 0.85rem; }
.dash-stat strong { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* Denser stat row for list pages: counters to scan, not headline figures. */
.dash-stats.is-tight { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
.dash-stats.is-tight .dash-stat { padding: 0.7rem 0.8rem; }
.dash-stats.is-tight .dash-stat strong { font-size: 1.25rem; }
.dash-stat.is-warn strong { color: var(--warning); }
.dash-stat.is-good strong { color: var(--success); }
.dash-stat.is-mute strong { color: var(--muted); }

/* ===========================================================================
   The public site — the pages a visitor sees before he has an account.
   ---------------------------------------------------------------------------
   A different job from the console: nothing here is a tool. It is read once,
   top to bottom, usually on a phone, usually in the two minutes after a
   WhatsApp message. So: one column of large type, one accent, one action
   repeated, and no ornament that does not carry a sentence.

   Built from the tokens already at the top of this file — no second palette.
   =========================================================================== */

.site-body { background: var(--surface); }

.site-wrap { width: min(1120px, 92vw); margin-inline: auto; }

/* --- bar ------------------------------------------------------------------ */
.site-bar { position: sticky; top: 0; z-index: 40; background: var(--surface);
            border-bottom: 1px solid var(--border); }
.site-bar .site-wrap { display: flex; align-items: center; gap: 1rem;
                       min-height: 4.25rem; flex-wrap: wrap; }
.site-logo { display: inline-flex; align-items: center; gap: 0.5rem;
             font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.site-logo-mark { width: 2.2rem; height: 2.2rem; color: var(--accent); flex: none; }
.foot-mark { width: 2.2rem; height: 2.2rem; display: block; margin-bottom: 0.7rem; }

.site-nav { display: flex; align-items: center; gap: 1.35rem; margin-inline-start: auto; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* The menu opens and closes with no script, because this page must render
   before anything else loads. */
.site-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.site-menu-button { display: none; margin-inline-start: auto; padding: 0.45rem;
                    border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--ink); }

.site-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            background: var(--accent); color: #fff !important; border: 0; cursor: pointer;
            padding: 0.7rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
            text-decoration: none; }
.site-cta:hover { background: var(--accent-strong); }
.site-cta .icon { width: 1.15rem; height: 1.15rem; }
.site-cta.is-large { padding: 0.95rem 2rem; font-size: 1.08rem; }
.site-cta.is-block { display: flex; width: 100%; }
.site-ghost { display: inline-flex; align-items: center; justify-content: center;
              padding: 0.9rem 1.6rem; border-radius: 999px; font-weight: 700;
              border: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.site-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --- hero ----------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--accent-soft), var(--surface));
        padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
             align-items: center; }
.hero { overflow: hidden; }
.hero-eyebrow { color: var(--accent); font-weight: 700; margin: 0 0 0.6rem; letter-spacing: 0.02em; }
.hero-eyebrow.is-light { color: #8ab4ff; }
.hero-copy h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); line-height: 1.18; margin: 0 0 1rem;
                letter-spacing: -0.01em; }
.hero-lead { font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.85; color: var(--muted);
             margin: 0 0 1.6rem; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.5rem; }
.hero-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.hero-marks li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted);
                 font-size: 0.93rem; font-weight: 600; }
.hero-marks .icon { width: 1.05rem; height: 1.05rem; color: var(--success); }

/* --- the WhatsApp frame ----------------------------------------------------
   WhatsApp's own surface, rebuilt rather than screenshotted: its colours, its
   bubble radius and tails, its tick marks, its wallpaper. Mirrored for RTL the
   way WhatsApp mirrors itself — outgoing on the left, incoming on the right —
   because that is what an Arabic phone actually shows.
   Every glyph inside is a drawn SVG; see docs/planning/16_UI_RULES §1.        */
.wa-phone { width: min(23rem, 100%); margin-inline: auto; background: #111b21;
            border-radius: 2.4rem; padding: 0.55rem; overflow: hidden;
            box-shadow: 0 30px 60px -25px rgba(17, 27, 33, 0.6), 0 0 0 1px rgba(17, 27, 33, 0.12); }

.wa-top { display: flex; align-items: center; gap: 0.55rem; background: #008069; color: #fff;
          padding: 0.75rem 0.7rem; border-radius: 1.95rem 1.95rem 0 0; }
.wa-back { display: inline-flex; }
.wa-back .icon { width: 1.2rem; height: 1.2rem; }
.wa-avatar { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
             border-radius: 50%; background: rgba(255, 255, 255, 0.22); flex: none; }
.wa-avatar .icon { width: 1.25rem; height: 1.25rem; }
.wa-who { display: grid; line-height: 1.25; margin-inline-end: auto; }
.wa-who strong { font-size: 0.95rem; font-weight: 600; }
.wa-who em { font-style: normal; font-size: 0.73rem; opacity: 0.85; }
.wa-tools { display: inline-flex; gap: 0.65rem; opacity: 0.95; }
.wa-tools .icon { width: 1.15rem; height: 1.15rem; }

/* The doodle wallpaper, drawn faintly so the bubbles keep the contrast. */
.wa-thread { background-color: #efeae2; padding: 0.85rem 0.7rem 0.6rem;
             display: flex; flex-direction: column; gap: 0.3rem;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='rgba(17,27,33,0.045)' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='22' cy='20' r='7'/%3E%3Cpath d='M60 14h14M60 20h9'/%3E%3Cpath d='M104 26c-4-5-11-2-11 3 0 4 6 8 11 12 5-4 11-8 11-12 0-5-7-8-11-3z'/%3E%3Cpath d='M18 62h16l-3 12H21z'/%3E%3Cpath d='M56 58l4 8 9 1-6 6 1 9-8-4-8 4 1-9-6-6 9-1z'/%3E%3Ccircle cx='112' cy='66' r='8'/%3E%3Cpath d='M108 66h8'/%3E%3Cpath d='M20 106c6-6 14-6 20 0'/%3E%3Ccircle cx='30' cy='114' r='3'/%3E%3Cpath d='M64 100h18v14H64z'/%3E%3Cpath d='M68 100v-4h10v4'/%3E%3Cpath d='M104 104l6 6-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E"); }

.wa-day { align-self: center; margin: 0.35rem 0 0.5rem; background: #fff; color: #54656f;
          font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 8px;
          box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }

.wa-msg { position: relative; margin: 0; max-width: 82%; padding: 0.4rem 0.6rem 0.95rem;
          border-radius: 8px; font-size: 0.88rem; line-height: 1.5; color: #111b21;
          box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
          /* The timestamp is absolutely placed, so a two-letter message like
             «لتر» would otherwise be narrower than its own clock. */
          min-width: 5.4rem; }
.wa-msg.is-out { min-width: 6.4rem; }
/* Incoming sits at the reading edge, outgoing opposite — WhatsApp's own mirror. */
.wa-msg.is-in { background: #fff; align-self: flex-start; border-start-start-radius: 0; }
.wa-msg.is-out { background: #d9fdd3; align-self: flex-end; border-start-end-radius: 0; }
/* The tail: a triangle mitred from two borders, flat along the top and
   tapering back into the bubble — the shape WhatsApp puts on the first
   message of a group. Bottom border transparent, side border coloured. */
.wa-msg.is-in::before, .wa-msg.is-out::before { content: ""; position: absolute; top: 0;
                                                width: 0; height: 0;
                                                border-block-end: 9px solid transparent; }
.wa-msg.is-in::before { inset-inline-start: -8px; border-inline-end: 9px solid #fff; }
.wa-msg.is-out::before { inset-inline-end: -8px; border-inline-start: 9px solid #d9fdd3; }

.wa-time { position: absolute; inset-block-end: 0.25rem; inset-inline-end: 0.6rem;
           display: inline-flex; align-items: center; gap: 0.15rem;
           font-size: 0.63rem; color: #667781; }
.wa-tick { width: 0.85rem; height: 0.85rem; color: #53bdeb; }

.wa-note { align-self: center; margin: 0.5rem 0; background: rgba(17, 27, 33, 0.72); color: #fff;
           font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.85rem; border-radius: 8px; }

.wa-msg.is-order { display: grid; gap: 0.28rem; max-width: 92%; padding-bottom: 1.15rem; }
.wa-order-head { font-weight: 700; font-size: 0.85rem; }
.wa-order-row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; }
.wa-order-row.is-total { border-top: 1px solid rgba(17, 27, 33, 0.12); padding-top: 0.3rem;
                         margin-top: 0.15rem; font-weight: 700; }
.wa-order-foot { font-size: 0.75rem; color: #667781; line-height: 1.6; }

.wa-compose { display: flex; align-items: center; gap: 0.45rem; background: #f0f2f5;
              padding: 0.5rem 0.55rem 0.75rem; border-radius: 0 0 1.95rem 1.95rem; }
.wa-field { display: flex; align-items: center; gap: 0.5rem; flex: 1; background: #fff;
            border-radius: 999px; padding: 0.45rem 0.7rem; color: #8696a0; }
.wa-field em { font-style: normal; font-size: 0.82rem; margin-inline-end: auto; }
.wa-field .icon { width: 1.15rem; height: 1.15rem; }
.wa-send { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
           border-radius: 50%; background: #00a884; color: #fff; }
.wa-send .icon { width: 1.2rem; height: 1.2rem; }

/* --- sections ------------------------------------------------------------- */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section.narrow { max-width: 40rem; }
.band { background: var(--surface-2); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band.is-dark { background: var(--ink); color: #fff; }
.band.is-dark h2 { color: #fff; }
.band.is-dark p { color: #d7deea; }
/*
 * The phone is its own world.
 *
 * `.band.is-dark p` outranks `.wa-msg` on specificity, so the dark band was
 * painting WhatsApp's text light — light grey on a white bubble, which is the
 * one thing a chat screenshot must never be. Nothing outside the frame paints
 * inside it.
 */
.band.is-dark .wa-phone p { color: #111b21; }
.band.is-dark .wa-phone .wa-day { color: #54656f; }
.band.is-dark .wa-phone .wa-note { color: #fff; }
.band.is-dark .wa-phone .wa-order-foot { color: #667781; }
.band-title { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin: 0 0 0.6rem; text-align: center; }
.band-sub { text-align: center; color: var(--muted); margin: 0 0 2rem; }

.page-hero { background: var(--accent-soft); padding: clamp(2.2rem, 5vw, 3.5rem) 0; }
.page-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); margin: 0 0 0.7rem; }

.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid;
         grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: step; }
.steps li { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; }
.steps h3 { margin: 0.8rem 0 0.5rem; font-size: 1.12rem; }
.steps p { margin: 0; color: var(--muted); line-height: 1.85; }
.step-num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
            border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius-lg); padding: 1.5rem 1.35rem; }
.feature h3 { margin: 0.85rem 0 0.5rem; font-size: 1.08rem; }
.feature p { margin: 0; color: var(--muted); line-height: 1.85; font-size: 0.96rem; }
.feature-mark { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
                border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.feature-mark .icon { width: 1.35rem; height: 1.35rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
         align-items: center; }
.split h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0 0 0.8rem; }
.split p { line-height: 1.9; margin: 0 0 0.6rem; }
.split-note { font-size: 0.9rem; opacity: 0.85; }
.split-action { display: flex; justify-content: flex-start; }

/* A claim list inside a dark band: the ticks carry the weight, so they stay
   green where every other colour has been flattened to white. */
.check-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.check-list li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.97rem; }
.check-list .icon { width: 1.1rem; height: 1.1rem; color: #4ade9f; flex: none; }

.demo-card { background: #0e1626; border: 1px solid #2b3651; border-radius: var(--radius-lg);
             padding: 1.1rem 1.2rem; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8); }
.demo-head { margin: 0 0 0.8rem; font-size: 0.78rem; font-weight: 700; color: #8ea3c4; }
.demo-ask, .demo-answer { margin: 0 0 0.45rem; padding: 0.45rem 0.7rem; border-radius: 12px;
                          font-size: 0.9rem; line-height: 1.6; max-width: 88%; }
.demo-ask { background: #1d3a6b; color: #fff; margin-inline-start: auto; }
.demo-answer { background: #1b2740; color: #e6ecf7; }

/* --- plans ---------------------------------------------------------------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
.plan-card { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-lg); padding: 1.7rem 1.5rem; position: relative; }
.plan-card.is-featured { border-color: var(--accent); border-width: 2px;
                         box-shadow: 0 24px 50px -34px rgba(23, 92, 211, 0.8); }
.plan-flag { position: absolute; top: -0.85rem; inset-inline-start: 1.4rem; margin: 0;
             background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 700;
             padding: 0.25rem 0.8rem; border-radius: 999px; }
.plan-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.plan-price { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
/* The top plan is a conversation, not a number. Set smaller so it does not
   pretend to be a price and does not read as expensive beside $15. */
.plan-price.is-quoted { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5; }
.plan-orders { margin: 0.2rem 0 1.2rem; color: var(--muted); font-weight: 600; }
.plan-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
.plan-list li { display: flex; align-items: start; gap: 0.5rem; font-size: 0.95rem; line-height: 1.6; }
.plan-list .icon { width: 1.05rem; height: 1.05rem; color: var(--success); flex: none; margin-top: 0.15rem; }
.plan-note { margin: 0.6rem 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

.compare { width: 100%; border-collapse: collapse; background: var(--surface); }
.compare th, .compare td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); text-align: start; }
.compare thead th { background: var(--surface-2); font-size: 0.95rem; }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare .yes { color: var(--success); }
.compare .yes .icon { width: 1.1rem; height: 1.1rem; }
.compare .no { color: var(--muted); }

/* --- services ------------------------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
.service { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; }
.service h3 { margin: 0.9rem 0 0.5rem; font-size: 1.1rem; }
.service p { margin: 0 0 0.8rem; color: var(--muted); line-height: 1.85; font-size: 0.96rem; }
.service-price { font-weight: 800; color: var(--ink) !important; }

/* --- faq, forms, closing -------------------------------------------------- */
.faq { display: grid; gap: 0.7rem; max-width: 46rem; margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius); padding: 0.95rem 1.15rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 0.7rem 0 0; color: var(--muted); line-height: 1.85; }

.contact-form { display: grid; gap: 0.9rem; }
.contact-form label { display: grid; gap: 0.35rem; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

.site-close { background: var(--accent); color: #fff; text-align: center;
              padding: clamp(2.5rem, 6vw, 4rem) 0; }
.site-close h2 { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.site-close p { margin: 0 0 1.5rem; color: #dbe7ff; }
.site-close .site-cta { background: #fff; color: var(--accent) !important; }
.site-close .site-cta:hover { background: #eaf1ff; }

.site-foot { background: var(--ink); color: #c8d2e2; padding: 2.6rem 0 1.4rem; }
.site-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1.6rem; }
.site-foot strong { color: #fff; display: block; margin-bottom: 0.5rem; }
.site-foot p { margin: 0; font-size: 0.9rem; line-height: 1.8; }
.site-foot nav { display: grid; gap: 0.45rem; align-content: start; }
.site-foot nav span { color: #fff; font-weight: 700; font-size: 0.92rem; }
.site-foot nav a { color: #c8d2e2; text-decoration: none; font-size: 0.9rem; }
.site-foot nav a:hover { color: #fff; }
.site-foot-line { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid #2b3651;
                  font-size: 0.85rem; }

@media (max-width: 900px) {
    .hero-grid, .split, .site-foot-grid { grid-template-columns: 1fr; }
    .steps, .feature-grid, .plan-grid, .service-grid { grid-template-columns: 1fr; }
    .site-menu-button { display: inline-grid; place-items: center; }
    .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch;
                gap: 0.2rem; padding-bottom: 0.9rem; }
    .site-menu-toggle:checked ~ .site-nav { display: flex; }
    .site-nav a { padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--border); }
    .site-nav .site-cta { margin-top: 0.6rem; border-bottom: 0; }
}

/* --- two screens, one feature ---------------------------------------------
   Loyalty is seen by two people, so it is shown twice: the customer's phone
   and the shopkeeper's console. The console mock is drawn from the same tokens
   as the real console, not a picture of it — a screenshot would go stale the
   next time that page changes, and this one cannot.                          */
.two-screens { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.2rem, 3vw, 2.5rem);
               align-items: start; margin: 2rem 0 0; }
.screen { margin: 0; }
.screen figcaption { color: #8ea3c4; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.8rem; }
.screen-note { margin: 0.9rem 0 0; font-size: 0.88rem; color: #b9c6da; line-height: 1.7; }
.wa-phone.is-slim { width: min(19rem, 100%); margin-inline: 0; }

.plan-tag { font-weight: 600; font-size: 0.82rem; color: #d7deea; }
.band-title.is-start { text-align: start; }
.band-lead { max-width: 40rem; line-height: 1.9; margin: 0; }
.check-list.is-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; }

.admin-shot { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
              box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75); }
.admin-bar { display: flex; align-items: center; gap: 0.4rem; background: #e9eef5; padding: 0.6rem 0.8rem; }
.admin-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #c3cddb; }
.admin-bar em { font-style: normal; margin-inline-start: 0.6rem; font-size: 0.78rem; color: #5b6a80; }
.admin-body { padding: 0.5rem 0.9rem 0.9rem; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.admin-row:last-child { border-bottom: 0; }
.admin-row strong { display: block; color: var(--ink); font-size: 0.97rem; }
.admin-meta { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.admin-points { display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
                background: #f1ecff; color: #563a96; font-weight: 700; font-size: 0.85rem;
                padding: 0.35rem 0.7rem; border-radius: 999px; }
.admin-points .icon { width: 1rem; height: 1rem; }
.admin-row.is-order { background: var(--accent-soft); margin: 0.4rem -0.9rem -0.9rem;
                      padding-inline: 0.9rem; border-bottom: 0; }
.admin-action { display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
                background: var(--whatsapp); color: #fff; font-weight: 700; font-size: 0.83rem;
                padding: 0.4rem 0.8rem; border-radius: 999px; }
.admin-action .icon { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
    .two-screens { grid-template-columns: 1fr; }
    .wa-phone.is-slim { margin-inline: auto; }
}

/* --- «you have a website» --------------------------------------------------
   A mock search result, because that is the thing being claimed and a
   shopkeeper has never seen his own shop in one.                            */
.muted-lead { color: var(--muted); line-height: 1.9; margin: 0 0 0.4rem; }
.check-list.is-dark-check .icon { color: var(--success); }
.serp { background: var(--surface-2); border-radius: var(--radius-lg); padding: 1.4rem; }
.serp-head { margin: 0 0 0.9rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.serp-card { display: grid; gap: 0.35rem; background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius); padding: 1rem 1.1rem; }
.serp-url { font-size: 0.8rem; color: #4d6b3f; direction: ltr; text-align: start; }
.serp-title { font-size: 1.12rem; color: #1a0dab; font-weight: 600; }
.serp-desc { font-size: 0.9rem; color: #4d5156; line-height: 1.7; }
.serp-rich { font-size: 0.85rem; color: #1f7a45; font-weight: 700; }

/* What he does not need, said once and crossed off. The strike marks are the
   same drawn `close` icon as everywhere else, in the muted ink — a red list
   would read as an attack on shops he may already like. */
.not-needed { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.5rem; }
.not-needed li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted);
                 font-size: 0.97rem; }
.not-needed .icon { width: 1rem; height: 1rem; color: #9aa7ba; flex: none; }

/* --- الحالات ---------------------------------------------------------------
   Six trades, each a before and an after side by side. Two columns rather
   than prose because the merchant is looking for himself on the page, and the
   thing he recognises is his own Tuesday — not a feature list.              */
.trade-list { display: grid; gap: 1.4rem; }
.trade { background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; }
.trade-head { display: flex; align-items: start; gap: 0.9rem; margin-bottom: 1.2rem; }
.trade-head h2 { margin: 0 0 0.2rem; font-size: 1.25rem; }
.trade-who { margin: 0; color: var(--muted); font-size: 0.94rem; }

.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.trade-col { border-radius: var(--radius); padding: 1rem 1.1rem; }
.trade-col h3 { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.02em; }
.trade-col p { margin: 0; line-height: 1.85; font-size: 0.95rem; }
.trade-col.is-before { background: var(--surface-2); }
.trade-col.is-before h3 { color: var(--muted); }
.trade-col.is-before p { color: var(--muted); }
.trade-col.is-after { background: var(--accent-soft); }
.trade-col.is-after h3 { color: var(--accent); }

.trade-gains { list-style: none; margin: 1.2rem 0 0; padding: 0;
               display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.trade-gains li { display: flex; align-items: start; gap: 0.45rem;
                  font-size: 0.92rem; line-height: 1.6; }
.trade-gains .icon { width: 1rem; height: 1rem; color: var(--success); flex: none; margin-top: 0.2rem; }

.trade-demo { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.2rem;
              font-weight: 700; color: var(--accent); text-decoration: none; font-size: 0.95rem; }
.trade-demo .icon { width: 1.1rem; height: 1.1rem; }
.trade-demo:hover { text-decoration: underline; }

.trade-note { margin: 2rem 0; padding: 1rem 1.2rem; border-radius: var(--radius);
              background: var(--surface-2); color: var(--muted); font-size: 0.93rem;
              line-height: 1.8; }

@media (max-width: 760px) {
    .trade-cols, .trade-gains { grid-template-columns: 1fr; }
}

/* --- الباب: التسجيل والدخول ------------------------------------------------
   The form on one side, what he is walking into on the other. It used to be a
   bare card on unbranded chrome — a merchant could not tell he was still in
   the same product, and nothing said what happens after the button.        */
.auth { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.auth-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
             align-items: start; }
.auth-grid.is-narrow { grid-template-columns: 1fr 0.8fr; max-width: 60rem; }

.auth-form-side h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 0.4rem; }
.auth-step { display: inline-block; margin: 0 0 0.7rem; padding: 0.25rem 0.75rem;
             border-radius: 999px; background: var(--accent-soft); color: var(--accent);
             font-size: 0.8rem; font-weight: 700; }
.auth-lead { color: var(--muted); margin: 0 0 1.6rem; font-size: 1.02rem; }

.auth-form { display: grid; gap: 1rem; }
.auth-form label { display: grid; gap: 0.35rem; font-weight: 600; }
.auth-form input { width: 100%; }
.field-note { font-weight: 400; font-size: 0.83rem; color: var(--muted); }
.auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-terms { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.7; text-align: center; }
.auth-alt { margin: 1.4rem 0 0; color: var(--muted); }

.auth-side { background: var(--surface-2); border-radius: var(--radius-lg);
             padding: clamp(1.4rem, 3vw, 2rem); }
.auth-side h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.auth-side.is-quiet h2 { font-size: 1.05rem; }
.auth-side p { color: var(--muted); line-height: 1.85; margin: 0 0 1rem; }
.auth-side-lead { font-size: 1rem; }
.auth-rule { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.auth-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.8rem; }
.auth-steps li { display: flex; align-items: center; gap: 0.75rem; opacity: 0.55; }
.auth-steps li.is-now { opacity: 1; }
.auth-steps strong { display: block; font-size: 0.98rem; }
.auth-steps span { color: var(--muted); font-size: 0.87rem; }
.auth-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
            border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
            font-weight: 800; font-size: 0.9rem; }
.auth-steps li.is-now .auth-num { background: var(--accent); border-color: var(--accent); color: #fff; }

.auth-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.auth-marks li { display: flex; align-items: start; gap: 0.5rem; font-size: 0.94rem; line-height: 1.65; }
.auth-marks .icon { width: 1.05rem; height: 1.05rem; color: var(--success); flex: none; margin-top: 0.15rem; }
.auth-side.is-quiet .auth-marks .icon { color: var(--accent); }

.auth-privacy { display: flex; align-items: start; gap: 0.55rem; margin: 1.5rem 0 0;
                padding-top: 1.2rem; border-top: 1px solid var(--border);
                font-size: 0.88rem; line-height: 1.75; }
.auth-privacy .icon { width: 1.15rem; height: 1.15rem; color: var(--muted); flex: none; margin-top: 0.15rem; }

@media (max-width: 860px) {
    .auth-grid, .auth-grid.is-narrow { grid-template-columns: 1fr; }
    .auth-pair { grid-template-columns: 1fr; }
}