/* ═════════════════════════════════════════════════════════════════════════════
   v1.0.89 · BUSMA AI · Product Preview stylesheet
   Purpose  : Render the REAL V3 dashboard cards on public marketing pages
              (Landing / Pricing / Login / Register) without polluting the
              dark public identity.
   Scope    : Everything sits inside `.busma-preview` — the wrapper is a
              light data-first surface exactly like /v3/executive.
   Fidelity : Class names, layout math and colour tokens mirror
              Views/Executive/Index.cshtml (v1.0.87.x). Kept in sync
              manually — see mandate §"OPTION C · STATIC PRODUCT PREVIEW".
   Data     : Populated from BusmaAI.Application.Landing.LandingProductDemoData
              (server-side, deterministic, NO tenant data).
   ═════════════════════════════════════════════════════════════════════════════ */

.busma-preview {
    /* Local design tokens — matches V3 layout so the visual is identical. */
    --bx-ink: #14161f;
    --bx-muted: #64748b;
    --bx-mut2: #94a3b8;
    --bx-line: rgba(15,23,42,.06);
    --bx-surface: #ffffff;
    --bx-page: #f8fafc;

    background: var(--bx-page);
    color: var(--bx-ink);
    padding: 22px;
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 30px 80px -30px rgba(15,23,42,.35),
        inset 0 0 0 1px rgba(15,23,42,.04);
    font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.55;
    direction: rtl;
    text-align: right;
    position: relative;
}

/* Subtle "demo data" watermark chip at top-inline-start of the preview */
.busma-preview__demo-chip {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(15,23,42,.06);
    color: var(--bx-muted);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    z-index: 2;
}
.busma-preview__demo-chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

/* Section header — mirrors bx-kpi-hdr in Executive/Index.cshtml */
.busma-preview .bx-kpi-hdr {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin: 6px 0 14px;
    padding-inline-start: 130px; /* leave room for demo chip */
}
.busma-preview .bx-kpi-hdr__title {
    font-size: 15px; font-weight: 800;
    color: var(--bx-ink); letter-spacing: -0.005em;
    margin: 0;
}
.busma-preview .bx-kpi-hdr__sub {
    font-size: 12px; color: var(--bx-muted);
    margin-top: 3px;
}

/* KPI grid — same math as V3 executive
   Auto-fits below 1280px, 5 across at desktop, 1 column on mobile. */
.busma-preview .bx-kpi-premium {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width: 1180px) {
    .busma-preview .bx-kpi-premium { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .busma-preview .bx-kpi-premium { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

/* KPI card — matches V3 .bx-ekpi structure exactly */
.busma-preview .bx-ekpi {
    position: relative; overflow: hidden;
    background: var(--bx-surface);
    border: 1px solid var(--bx-line);
    border-radius: 16px;
    padding: 14px 16px 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,.022), 0 8px 22px -20px rgba(15,23,42,.14);
    min-height: 158px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    grid-template-rows: minmax(52px, auto) auto auto 1fr 44px;
    grid-template-areas:
        "head  head"
        "body  body"
        "delta delta"
        ".     ."
        "foot  spark";
    column-gap: 10px;
    row-gap: 6px;
}
.busma-preview .bx-ekpi__head {
    grid-area: head;
    display: flex; align-items: center; gap: 11px;
}
.busma-preview .bx-ekpi__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--bx-ekpi-tint, #64748b) 12%, #ffffff);
    color: var(--bx-ekpi-tint, #64748b);
    font-size: 20px; line-height: 1;
}
.busma-preview .bx-ekpi__title {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; flex: 1;
}
.busma-preview .bx-ekpi__title-ar {
    font-weight: 700; font-size: 13px; line-height: 1.3;
    color: var(--bx-ink); letter-spacing: -0.005em;
    text-align: start;
}
.busma-preview .bx-ekpi__abbr {
    display: block; margin: 0;
    font-family: 'Manrope', 'Cairo', system-ui, sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: .03em;
    color: var(--bx-mut2);
    text-transform: uppercase;
    text-align: start;
    unicode-bidi: isolate;
}
.busma-preview .bx-ekpi__body   { grid-area: body; text-align: start; }
.busma-preview .bx-ekpi__value  {
    font-family: 'Manrope', 'Cairo', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 1.6vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bx-ink);
    font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: isolate;
    text-align: right;
}
.busma-preview .bx-ekpi__delta-row {
    grid-area: delta;
    display: flex; align-items: center; gap: 8px;
    min-height: 22px;
}
.busma-preview .bx-ekpi__delta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.busma-preview .bx-ekpi__delta--up   { background: rgba(16,185,129,.13); color: #047857; }
.busma-preview .bx-ekpi__delta--down { background: rgba(239, 68, 68,.13); color: #b91c1c; }
.busma-preview .bx-ekpi__delta--flat { background: rgba(100,116,139,.11); color: #475569; }
.busma-preview .bx-ekpi__cmp    { font-size: 11px; color: var(--bx-muted); font-weight: 500; }
.busma-preview .bx-ekpi__foot   {
    grid-area: foot;
    align-self: end;
    font-size: 10.5px; font-weight: 500;
    color: var(--bx-mut2);
    opacity: .85;
}
.busma-preview .bx-ekpi__spark {
    grid-area: spark;
    align-self: end; justify-self: end;
    width: 118px; height: 44px;
    direction: ltr;
    pointer-events: none;
}
.busma-preview .bx-ekpi__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.busma-preview .bx-ekpi__spark svg path { stroke-linecap: round; stroke-linejoin: round; }

/* Chart panel matching V3 style (used for trend + channel bars) */
.busma-preview__panel {
    background: var(--bx-surface);
    border: 1px solid var(--bx-line);
    border-radius: 16px;
    padding: 16px 18px 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.022);
    margin-top: 14px;
}
.busma-preview__panel h3 {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 800;
    color: var(--bx-ink); letter-spacing: -0.005em;
}
.busma-preview__panel .subtle { font-size: 11px; color: var(--bx-mut2); margin-bottom: 12px; }

/* SVG trend styling — matches V3 SalesTrend area chart look */
.busma-preview__trend svg { display: block; width: 100%; height: 220px; }
.busma-preview__trend .grid line { stroke: rgba(15,23,42,.07); stroke-width: 1; }
.busma-preview__trend .area  { fill: url(#preview-grad); }
.busma-preview__trend .line  { fill: none; stroke: #2563eb; stroke-width: 2.2; }
.busma-preview__trend .pt    { fill: #2563eb; }
.busma-preview__trend .lbl   {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 10px; fill: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* Marketing channel table — matches V3 Marketing structure */
.busma-preview__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.busma-preview__table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    font-size: 12.5px;
    background: var(--bx-surface);
}
.busma-preview__table thead th.mkt-grouprow {
    background: #f1f5f9; color: var(--bx-muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    padding: 6px 10px; text-align: center;
    border-bottom: 1px solid var(--bx-line);
}
.busma-preview__table thead .mkt-headrow th {
    background: #f8fafc; color: var(--bx-ink);
    font-weight: 700; font-size: 11px; letter-spacing: .01em;
    padding: 10px 10px;
    border-bottom: 2px solid var(--bx-line);
    text-align: end;
    white-space: nowrap;
}
.busma-preview__table thead .mkt-headrow th.mkt-chan { text-align: start; }
.busma-preview__table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--bx-line);
    color: var(--bx-ink);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}
.busma-preview__table tbody td.mkt-chan { text-align: start; }
.busma-preview__table tbody tr:last-child td { border-bottom: none; }
.busma-preview__table .chan {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700;
}
.busma-preview__table .chan svg { flex: 0 0 20px; }
.busma-preview__table .num-strong { font-weight: 700; }
.busma-preview__table .num-muted  { color: var(--bx-muted); }

/* Sub-heading strip inside the preview */
.busma-preview__section-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 22px; margin-bottom: 10px;
}
.busma-preview__section-title h3 {
    margin: 0; font-size: 14px; font-weight: 800; color: var(--bx-ink);
}
.busma-preview__section-title .hint {
    font-size: 11px; color: var(--bx-mut2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   Phase 2 · Funnel · Products table · Customer donut
   Kept in sync manually with:
     Views/V3/Funnel/Index.cshtml       (.bx-fn2)
     Views/V3/Products/Index.cshtml     (top-products table)
     Views/V3/Customers/Index.cshtml    (segments)
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── V3 Funnel palette · matches Funnel/Index.cshtml ──────────────────── */
.busma-preview .bx-fn2 {
    --fn-stage-1: #7c3aed;
    --fn-stage-2: #6d5cff;
    --fn-stage-3: #4b6bff;
    --fn-stage-4: #2e8ce6;
    --fn-stage-5: #0e9fbe;
    --fn-stage-6: #12ab8f;
    --fn-stage-7: #10b981;
    --fn-edge: rgba(15,23,42,.08);
    --fn-ink: #14161f;
    --fn-ink-2: #64748b;
    background: transparent;
    padding: 6px 0;
}

/* Group heading (Advertising vs Store) */
.busma-preview .bx-fn2__group {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 8px;
}
.busma-preview .bx-fn2__group-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 26px;
    background: #eef2ff; color: #4f46e5;
    border-radius: 8px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800; font-size: 11px;
}
.busma-preview .bx-fn2__group-ttl {
    font-weight: 800; font-size: 13px; color: var(--fn-ink);
}
.busma-preview .bx-fn2__group-rule {
    flex: 1; height: 1px; background: rgba(15,23,42,.08);
}

.busma-preview .bx-fn2__list { display: grid; gap: 10px; }

/* Row layout — icon · trapezoid stage · ratios column */
.busma-preview .bx-fn2__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 160px;
    align-items: center; gap: 12px;
    padding: 8px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--fn-edge);
    box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.busma-preview .bx-fn2__stage-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--fn-stage-color, #94a3b8) 12%, #fff);
    color: var(--fn-stage-color, #94a3b8);
    font-size: 18px;
}
/* Trapezoid stage bar — gradient background, narrowing across stages */
.busma-preview .bx-fn2__stage {
    height: 40px;
    width: var(--fn-stage-w, 100%);
    background: linear-gradient(135deg, var(--fn-stage-color, #64748b), var(--fn-stage-color-2, var(--fn-stage-color, #64748b)));
    border-radius: 10px;
    display: flex; align-items: center;
    padding: 0 14px;
    color: #fff;
    font-weight: 800;
    font-family: 'Manrope', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    box-shadow: 0 12px 24px -14px color-mix(in oklab, var(--fn-stage-color) 60%, transparent);
    transition: transform .15s ease;
}
.busma-preview .bx-fn2__row:hover .bx-fn2__stage { transform: translateY(-1px); }

/* Stage tints — match V3 fn2 s1..s7 widths */
.busma-preview .bx-fn2__s1  { --fn-stage-color: var(--fn-stage-1); --fn-stage-color-2: #8f4bf6; --fn-stage-w: 100%; }
.busma-preview .bx-fn2__s2  { --fn-stage-color: var(--fn-stage-2); --fn-stage-color-2: #7d70ff; --fn-stage-w: 94%; }
.busma-preview .bx-fn2__s3  { --fn-stage-color: var(--fn-stage-3); --fn-stage-color-2: #607dff; --fn-stage-w: 88%; }
.busma-preview .bx-fn2__s3b { --fn-stage-color: var(--fn-stage-4); --fn-stage-color-2: #4c86ff; --fn-stage-w: 86%; }
.busma-preview .bx-fn2__s4  { --fn-stage-color: var(--fn-stage-4); --fn-stage-color-2: #4aa0ee; --fn-stage-w: 80%; }
.busma-preview .bx-fn2__s5  { --fn-stage-color: var(--fn-stage-5); --fn-stage-color-2: #17b7d1; --fn-stage-w: 72%; }
.busma-preview .bx-fn2__s6  { --fn-stage-color: var(--fn-stage-6); --fn-stage-color-2: #1cc3a4; --fn-stage-w: 64%; }
.busma-preview .bx-fn2__s7  { --fn-stage-color: var(--fn-stage-7); --fn-stage-color-2: #24ce93; --fn-stage-w: 56%; }
/* Row-scoped icon tint (matches V3 .bx-fn2__row-sN .bx-fn2__out-ico) */
.busma-preview .bx-fn2__row-s1  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-1); }
.busma-preview .bx-fn2__row-s2  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-2); }
.busma-preview .bx-fn2__row-s3  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-3); }
.busma-preview .bx-fn2__row-s3b .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-4); }
.busma-preview .bx-fn2__row-s4  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-4); }
.busma-preview .bx-fn2__row-s5  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-5); }
.busma-preview .bx-fn2__row-s6  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-6); }
.busma-preview .bx-fn2__row-s7  .bx-fn2__stage-icon { --fn-stage-color: var(--fn-stage-7); }

.busma-preview .bx-fn2__ratios {
    display: grid; gap: 2px;
    text-align: end;
}
.busma-preview .bx-fn2__ratios-lbl {
    font-size: 11px; color: var(--fn-ink-2); font-weight: 600;
}
.busma-preview .bx-fn2__ratios-pct {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800; font-size: 15px;
    color: var(--fn-ink);
    font-variant-numeric: tabular-nums;
}

/* Domain break between Advertising and Store */
.busma-preview .bx-fn2__domain-break {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px dashed rgba(15,23,42,.15);
    border-radius: 12px;
    font-size: 11.5px; color: var(--fn-ink-2); line-height: 1.55;
}
.busma-preview .bx-fn2__domain-break__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    background: #eef2ff; color: #4f46e5;
    border-radius: 8px; font-size: 15px;
}

/* Summary strip */
.busma-preview .bx-fn2__summary {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;
    margin-top: 14px;
}
.busma-preview .bx-fn2__sum-cell {
    background: #fff;
    border: 1px solid var(--fn-edge);
    border-radius: 12px;
    padding: 10px 14px;
}
.busma-preview .bx-fn2__sum-lbl { font-size: 11px; color: var(--fn-ink-2); font-weight: 600; display:block; }
.busma-preview .bx-fn2__sum-val {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800; font-size: 22px;
    color: var(--fn-ink);
    display:block; margin: 3px 0;
    font-variant-numeric: tabular-nums;
}
.busma-preview .bx-fn2__sum-val--txt { font-size: 15px; }
.busma-preview .bx-fn2__sum-note,
.busma-preview .bx-fn2__sum-mini { font-size: 10.5px; color: var(--fn-ink-2); display:block; }

/* ── Products top table (matches V3 top-products layout) ─────────────── */
.busma-preview__products-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 12.5px;
    background: var(--bx-surface);
}
.busma-preview__products-table thead th {
    background: #f8fafc; color: var(--bx-ink);
    font-weight: 700; font-size: 11px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--bx-line);
    text-align: end; white-space: nowrap;
}
.busma-preview__products-table thead th.col-name { text-align: start; }
.busma-preview__products-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--bx-line);
    color: var(--bx-ink);
    font-variant-numeric: tabular-nums;
    text-align: end; white-space: nowrap;
}
.busma-preview__products-table tbody td.col-name { text-align: start; font-weight: 700; }
.busma-preview__products-table tbody td.col-rank {
    text-align: center;
    color: var(--bx-mut2); font-weight: 700; font-size: 11px;
}
.busma-preview__products-table tbody tr:last-child td { border-bottom: none; }
.busma-preview__share-cell {
    display: inline-flex; flex-direction: column; gap: 4px;
    align-items: flex-end;
    min-width: 90px;
}
.busma-preview__share-bar {
    width: 100%; height: 6px;
    background: rgba(15,23,42,.06);
    border-radius: 999px; overflow: hidden;
}
.busma-preview__share-fill { height: 100%; background: #4f46e5; border-radius: 999px; }

/* ── Customer donut · matches V3 Customers segment card look ─────────── */
.busma-preview__donut-wrap {
    display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center;
}
@media (max-width: 640px) {
    .busma-preview__donut-wrap { grid-template-columns: 1fr; }
}
.busma-preview__donut { display: block; width: 200px; height: 200px; margin: 0 auto; }
.busma-preview__legend { display: grid; gap: 10px; }
.busma-preview__legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 12.5px;
}
.busma-preview__legend-swatch { width: 14px; height: 14px; border-radius: 4px; }
.busma-preview__legend-lbl { font-weight: 700; color: var(--bx-ink); }
.busma-preview__legend-cnt {
    color: var(--bx-muted); font-variant-numeric: tabular-nums;
}
.busma-preview__legend-pct {
    color: var(--bx-ink); font-weight: 800; font-variant-numeric: tabular-nums;
    min-width: 44px; text-align: end;
}

/* Two-panel row (KPI grid + secondary panel side-by-side on desktop) */
.busma-preview__two-col {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .busma-preview__two-col--wide { grid-template-columns: 1.4fr 1fr; }
}

/* Frame chrome (browser bar) around the preview — used on Hero */
.busma-preview-frame {
    background: #0b1220;
    border-radius: 26px;
    padding: 10px;
    box-shadow:
        0 40px 80px -30px rgba(0,0,0,.65),
        0 12px 30px -12px rgba(246,139,31,.25);
}
.busma-preview-frame__bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 10px;
}
.busma-preview-frame__dots { display: flex; gap: 6px; }
.busma-preview-frame__dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.14);
}
.busma-preview-frame__url {
    flex: 1; text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: rgba(255,255,255,.55);
    letter-spacing: .02em;
}

/* ═════════════════════════════════════════════════════════════════════════
   v1.0.89 · Phase 3 · Responsive polish for the landing product previews.
   Applies at ≤ 1024px (small tablet + narrow phones). All rules are
   additive — they only tighten spacing and stack grids that were already
   auto-fit-friendly. Nothing above 1024px is changed.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Small tablet ≤ 1024px ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .busma-preview                   { padding: 18px; border-radius: 18px; }
    .busma-preview .bx-kpi-hdr       { padding-inline-start: 118px; }
    .busma-preview__panel            { padding: 14px; }
    .busma-preview-frame             { border-radius: 20px; padding: 8px; }
    .busma-preview-frame__url        { font-size: 10.5px; }
    .busma-preview__products-table   { font-size: 12px; }
    .busma-preview__products-table th,
    .busma-preview__products-table td { padding: 8px 10px; }
}

/* ── Narrow phone ≤ 430px (iPhone 14 Pro Max width) ────────────────────── */
@media (max-width: 430px) {
    .busma-preview                   { padding: 14px; border-radius: 14px; }
    .busma-preview .bx-kpi-hdr       {
        flex-direction: column; align-items: flex-start; gap: 6px;
        padding-inline-start: 0; margin-top: 30px;
    }
    .busma-preview .bx-kpi-hdr__title { font-size: 14px; }
    .busma-preview .bx-kpi-hdr__sub   { font-size: 11.5px; }

    .busma-preview .bx-kpi-premium   { grid-template-columns: 1fr; gap: 10px; }
    .busma-preview .bx-ekpi          { min-height: unset; padding: 12px 14px 10px; }
    .busma-preview .bx-ekpi__value   { font-size: 22px; }

    .busma-preview__panel            { padding: 12px; }
    .busma-preview__donut            { width: 170px; height: 170px; }
    .busma-preview__donut-wrap       { gap: 14px; }

    .busma-preview__products-table th,
    .busma-preview__products-table td { padding: 7px 8px; font-size: 11.5px; }
    .busma-preview__products-table .col-name { max-width: 140px; }

    .busma-preview .bx-fn2__row      { grid-template-columns: 34px minmax(0,1fr); }
    .busma-preview .bx-fn2__stage    { font-size: 13.5px; }
    .busma-preview .bx-fn2__ratios-lbl { font-size: 12px; }
    .busma-preview .bx-fn2__ratios-pct { font-size: 11.5px; }

    .busma-preview-frame             { border-radius: 16px; padding: 6px; }
    .busma-preview-frame__bar        { padding: 4px 8px 6px; }
    .busma-preview-frame__url        { font-size: 9.5px; letter-spacing: 0; }
}

/* ── Ultra-narrow phone ≤ 390px (iPhone 12/13/14 mini/base width) ─────── */
@media (max-width: 390px) {
    .busma-preview                   { padding: 12px; }
    .busma-preview__demo-chip        { font-size: 9.5px; padding: 3px 8px; }
    .busma-preview .bx-ekpi__ic      { width: 38px; height: 38px; flex: 0 0 38px; font-size: 17px; }
    .busma-preview .bx-fn2__stage-icon { width: 30px; height: 30px; font-size: 15px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   v1.0.89 · Phase 4 · FINAL responsive product visual polish
   Mandate summary:
   - Desktop: real V3 previews get +15-20% visual prominence.
   - Mobile: responsive CROPS of the SAME real V3 markup — hide low-priority
     columns / rows / panels so the primary product info (KPIs + main chart
     + channel names + funnel stages) stays readable. Never shrink the whole
     dashboard into an unreadable narrow thumbnail.
   - Every rule is scoped to .busma-preview — cannot leak into /v3/*.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── §Desktop prominence (≥ 900 px) ────────────────────────────────────
   Rather than growing card internals (which starved the KPI title width),
   the mandate's +15-20% comes from the .showcase__row grid tilt in
   Views/Home/Index.cshtml (1fr 1fr → 1fr 1.3fr). Here we ONLY tighten the
   icon so title text keeps 2 lines max on the 5-column KPI grid, and add
   a touch of table breathing room. Everything else follows V3 native. */
@media (min-width: 900px) {
    .busma-preview                    { padding: 24px; border-radius: 22px; }
    .busma-preview .bx-ekpi__ic       { width: 38px; height: 38px; flex: 0 0 38px; font-size: 17px; }
    .busma-preview__panel             { padding: 18px; }
    .busma-preview__products-table th,
    .busma-preview__products-table td { padding: 10px 14px; }
}

/* ── §Mobile crops (≤ 640 px) · SAME real V3 source, focused subset ──── */
@media (max-width: 640px) {

    /* ── Executive · already crops well; nothing to hide. Just tighten the
       KPI header sub-copy which is secondary explanation. ── */
    .busma-preview .bx-kpi-hdr__sub { font-size: 11.5px; line-height: 1.45; }

    /* ── Marketing table · keep 5 columns visible on mobile:
       Channel · Spend · Purchases · Attributed Revenue · ROAS
       (matches mandate §6 priority list). Hide the rest. ── */
    .busma-preview .busma-preview__table th:nth-child(2),   /* الظهور */
    .busma-preview .busma-preview__table td:nth-child(2),
    .busma-preview .busma-preview__table th:nth-child(3),   /* النقرات */
    .busma-preview .busma-preview__table td:nth-child(3),
    .busma-preview .busma-preview__table th:nth-child(4),   /* CTR */
    .busma-preview .busma-preview__table td:nth-child(4),
    .busma-preview .busma-preview__table th:nth-child(6),   /* CPC */
    .busma-preview .busma-preview__table td:nth-child(6),
    .busma-preview .busma-preview__table th:nth-child(7),   /* CPM */
    .busma-preview .busma-preview__table td:nth-child(7),
    .busma-preview .busma-preview__table th:nth-child(9),   /* CPO */
    .busma-preview .busma-preview__table td:nth-child(9),
    .busma-preview .busma-preview__table th:nth-child(12),  /* AOV */
    .busma-preview .busma-preview__table td:nth-child(12)  { display: none; }
    /* colspan group headers become misaligned once columns disappear —
       hide the entire top group row on mobile. */
    .busma-preview .busma-preview__table .mkt-grouprow      { display: none; }
    .busma-preview .busma-preview__table .mkt-headrow       { position: static; }
    .busma-preview .busma-preview__table                    { font-size: 12px; }
    .busma-preview .busma-preview__table th,
    .busma-preview .busma-preview__table td                 { padding: 8px 8px; }

    /* Marketing aggregate strip: 4-col grid → 2-col on mobile */
    .busma-preview__panel[style*="repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Funnel · keep the stages themselves (the storytelling).
       Hide the summary strip which wraps unreadably on 390px, and
       compact the domain-break note. ── */
    .busma-preview .bx-fn2__summary       { display: none; }
    .busma-preview .bx-fn2__domain-break  { margin: 8px 0; padding: 8px 12px; font-size: 11px; line-height: 1.5; }

    /* ── Products table · keep top 3 rows + 4 real columns so each row is
       readable at 390px width. Hide ranks 4-5 and the rarely-scanned
       متوسط السعر + الطلبات columns. ── */
    .busma-preview .busma-preview__products-table tbody tr:nth-child(n+4) { display: none; }
    .busma-preview .busma-preview__products-table th:nth-child(4),  /* الطلبات */
    .busma-preview .busma-preview__products-table td:nth-child(4),
    .busma-preview .busma-preview__products-table th:nth-child(6),  /* متوسط السعر */
    .busma-preview .busma-preview__products-table td:nth-child(6)  { display: none; }

    /* Products aggregate strip: 3-col grid → 2-col on mobile */
    .busma-preview__panel[style*="repeat(3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ── Customers · donut renders. Hide the panel subtitle to save a line. ── */
    .busma-preview__donut-wrap ~ .subtle,
    .busma-preview__panel > .subtle           { display: none; }

    /* Executive/Sales trend chart · already scales down. Just cap its label
       size so axis labels stay legible against a shrunken svg. */
    .busma-preview__trend svg text            { font-size: 10.5px; }
}

/* ── §390 px extra: tighten Marketing table further ──────────────────── */
@media (max-width: 390px) {
    .busma-preview .busma-preview__table th,
    .busma-preview .busma-preview__table td   { padding: 6px 6px; font-size: 11px; }
    .busma-preview .busma-preview__table .mkt-chan .chan { gap: 4px; }
    .busma-preview .bx-fn2__domain-break      { font-size: 10.5px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.0.93 · SEO / GSC / GMC Landing Section
   Scoped to `.busma-preview--seo` inside the preview frame + the copy-side
   `.seo-capgroup / .seo-ctas / .seo-disclaimer` blocks that sit outside it.
   Mirrors the real /v3/seo-gmc chip strip, opportunity badges, status
   pills, and position-delta arrows — same class contracts so the visual
   is identical between the marketing page and the live product.
   ══════════════════════════════════════════════════════════════════════ */

/* ── COPY-SIDE (dark landing surface) ──────────────────────────────── */
.seo-capgroup {
    margin-bottom: 18px;
}
.seo-capgroup__title {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Almarai', -apple-system, sans-serif;
    font-size: 14.5px; font-weight: 800;
    color: #f5deb3; /* soft cream on the dark landing */
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.seo-capgroup__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(246,139,31,.14); color: #f68b1f;
    font-size: 15px;
}
.seo-capgroup .showcase__points { margin: 0; }

.seo-ctas {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 22px 0 12px;
    align-items: center;
}
.seo-ctas .btn { min-height: 44px; }

.seo-disclaimer {
    margin-top: 12px;
    font-size: 12.5px; line-height: 1.65;
    color: rgba(245, 222, 179, .58);
    max-width: 640px;
}

/* ── PRODUCT-SIDE (light preview surface) ──────────────────────────── */

/* Opportunity chip strip — same visual language as /v3/seo-gmc seo-opps */
.busma-preview--seo .seo-opps {
    display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
    background: #fff; border: 1px solid rgba(15,23,42,.06);
    border-radius: 12px; padding: 10px 16px;
    margin: 14px 0;
}
.busma-preview--seo .seo-opps__cell {
    flex: 1 1 180px; min-width: 180px; padding: 6px 16px;
    border-inline-end: 1px solid #eef2f7;
    display: flex; flex-direction: column; gap: 4px;
}
.busma-preview--seo .seo-opps__cell:last-child { border-inline-end: none; }
.busma-preview--seo .seo-opps__value {
    font-family: 'Manrope', 'Cairo', system-ui, sans-serif;
    font-size: 26px; font-weight: 800; line-height: 1.05;
    color: #0f172a; font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: isolate; text-align: start;
    letter-spacing: -0.02em;
}
.busma-preview--seo .seo-opps__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #334155; font-weight: 600;
}
.busma-preview--seo .seo-opps__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
}
.busma-preview--seo .seo-opps__dot--near   { background: #3b82f6; }
.busma-preview--seo .seo-opps__dot--ctr    { background: #f59e0b; }
.busma-preview--seo .seo-opps__dot--top3   { background: #10b981; }
.busma-preview--seo .seo-opps__dot--rising { background: #059669; }
.busma-preview--seo .seo-opps__sub {
    font-size: 11px; color: #94a3b8; line-height: 1.4;
}

/* SEO tables (keywords + GMC products) */
.busma-preview--seo .seo-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 12px;
    background: #fff;
    margin-top: 8px;
}
.busma-preview--seo .seo-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Almarai', -apple-system, sans-serif;
    font-size: 12.5px;
    color: #14161f;
}
.busma-preview--seo .seo-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 11.5px;
    padding: 10px 12px;
    text-align: start;
    border-bottom: 1px solid #eef2f7;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.busma-preview--seo .seo-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.busma-preview--seo .seo-table tbody tr:last-child td { border-bottom: none; }
.busma-preview--seo .seo-table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-family: 'Manrope', 'Cairo', system-ui, sans-serif;
    font-weight: 600;
    direction: ltr; unicode-bidi: isolate;
}
.busma-preview--seo .seo-table__q {
    font-weight: 700;
    color: #0f172a;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.busma-preview--seo .seo-table__sku {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 11.5px;
    color: #64748b;
    direction: ltr; unicode-bidi: isolate;
    text-align: start;
}
.busma-preview--seo .seo-table__issue {
    color: #475569;
    font-size: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Opportunity badges — same colour palette as V3 seo-opp-badge */
.busma-preview--seo .seo-opp-badge {
    display: inline-block;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    white-space: nowrap;
    font-family: 'Manrope', 'Cairo', system-ui, sans-serif;
}
.busma-preview--seo .seo-opp-badge--CtrOpportunity  { background: rgba(245,158,11,.16); color: #b45309; }
.busma-preview--seo .seo-opp-badge--Top3Opportunity { background: rgba(16,185,129,.15); color: #047857; }
.busma-preview--seo .seo-opp-badge--NearFirstPage   { background: rgba(59,130,246,.14); color: #1d4ed8; }
.busma-preview--seo .seo-opp-badge--Rising          { background: rgba(16,185,129,.14); color: #047857; }
.busma-preview--seo .seo-opp-badge--Declining       { background: rgba(239,68,68,.14);  color: #b91c1c; }
.busma-preview--seo .seo-opp-badge--Stable          { background: rgba(148,163,184,.15); color: #475569; }

/* Position-delta arrows — inverted (lower position = better) */
.busma-preview--seo .seo-pos-delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: isolate;
}
.busma-preview--seo .seo-pos-delta--up   { color: #047857; }
.busma-preview--seo .seo-pos-delta--down { color: #b91c1c; }
.busma-preview--seo .seo-pos-delta--flat { color: #64748b; }

/* GMC status pills — mirror V3 status palette (ok · warning · critical) */
.busma-preview--seo .seo-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.busma-preview--seo .seo-status--ok       { background: rgba(16,185,129,.15); color: #047857; }
.busma-preview--seo .seo-status--warning  { background: rgba(245,158,11,.16); color: #b45309; }
.busma-preview--seo .seo-status--critical { background: rgba(239,68,68,.15);  color: #b91c1c; }

/* SEO trend chart panel — matches the real product's smooth-line look */
.busma-preview--seo .seo-trend svg .grid line { stroke: #eef2f7; stroke-width: 1; }
.busma-preview--seo .seo-trend svg .lbl       { fill: #94a3b8; font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; }

/* ── Responsive · mobile crops use the SAME real V3 UI (per mandate) ── */
@media (max-width: 900px) {
    .busma-preview--seo .seo-opps__cell { flex-basis: 46%; }
    .busma-preview--seo .seo-table thead th,
    .busma-preview--seo .seo-table tbody td { padding: 8px 10px; font-size: 12px; }
    .busma-preview--seo .seo-table__q,
    .busma-preview--seo .seo-table__issue { max-width: 180px; }
}
@media (max-width: 640px) {
    /* Mobile crop rule per mandate: KEEP the real product surface, hide
       lower-priority table columns to preserve the primary story rather
       than shrinking a full dashboard uniformly. */
    .busma-preview--seo .seo-opps { padding: 8px 10px; }
    .busma-preview--seo .seo-opps__cell {
        flex-basis: 100%; padding: 6px 8px;
        border-inline-end: none;
        border-bottom: 1px solid #eef2f7;
    }
    .busma-preview--seo .seo-opps__cell:last-child { border-bottom: none; }

    /* Keyword table: hide Impressions (col 2), CTR (col 4), and Δ Position
       (col 6) on phones — keep query, Clicks, Position, and Opportunity
       so the primary "which keyword and where" story stays readable. */
    .busma-preview--seo .seo-table thead th:nth-child(2),
    .busma-preview--seo .seo-table thead th:nth-child(4),
    .busma-preview--seo .seo-table thead th:nth-child(6),
    .busma-preview--seo .seo-table tbody td:nth-child(2),
    .busma-preview--seo .seo-table tbody td:nth-child(4),
    .busma-preview--seo .seo-table tbody td:nth-child(6) { display: none; }
}
@media (max-width: 390px) {
    .busma-preview--seo .seo-table thead th,
    .busma-preview--seo .seo-table tbody td { padding: 7px 8px; font-size: 11.5px; }
    .busma-preview--seo .seo-opps__value    { font-size: 22px; }
}