/* ================================================================
   Woosh Bikes — Mobile Configurator Overrides
   Loaded after css/configurator.css to switch from the
   orange desktop colour scheme to the mobile site's blue palette
   and Inter font, and to fit the configurator inside the mobile
   page flow rather than as a standalone full-screen widget.
   ================================================================ */

/* ── Colour + font variables ────────────────────────────────── */
#cfg {
    --acc:       #2563eb;
    --acc2:      #1d4ed8;
    --acc-light: rgba(37, 99, 235, 0.10);
    --acc-glow:  rgba(37, 99, 235, 0.18);
    --nav:       #0f172a;
    --nav2:      #1e293b;
    --bg:        #f8fafc;
    --bg2:       #ffffff;
    --bg3:       #f1f5f9;
    --border:    #e2e8f0;
    --text:      #0f172a;
    --muted:     #64748b;
    --success:   #16a34a;

    /* Offset for the mobile sticky header when scrollIntoView fires */
    scroll-margin-top: 68px;

    /* Override desktop wrapper styles */
    background: var(--bg);
    border-radius: 12px;
    margin: 20px 16px 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: none;
}

/* ── Restore mobile body styles overridden by configurator.css ── */
/* configurator.css sets background, padding, and Barlow font on body */
body {
    background: #f9fafb;
    padding: 0 0 64px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Mobile configurator header ────────────────────────────── */
.m-cfg-hdr {
    background: var(--nav);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.m-cfg-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.1px;
}

/* ── Step progress bar ──────────────────────────────────────── */
.progress-wrap {
    border-bottom-color: var(--acc);
}
.step-tab.done .num,
.step-tab.active .num {
    background: var(--acc);
    border-color:  var(--acc);
}
.step-tab.done   { border-bottom-color: rgba(37, 99, 235, 0.45); }
.step-tab.active { border-bottom-color: var(--acc); }

/* ── Accent stripe ──────────────────────────────────────────── */
.acc-stripe { background: var(--acc); }

/* ── Step title coloured word ───────────────────────────────── */
.step-title span { color: var(--acc); }

/* ── Font overrides: replace Barlow / Barlow Condensed → Inter */
.step-title,
.card-name,
.card-price,
.total-price,
.sum-price,
.motor-group-name,
.kit-result-name,
.kit-result-price,
.variant-price,
.btn,
.step-tab,
.bespoke-title,
.sent-msg h3,
.addon-price,
.total-label,
.match-count,
.logo-sub {
    font-family: 'Inter', -apple-system, sans-serif;
}

.step-title { font-size: 22px; letter-spacing: 0; }
.btn        { letter-spacing: 0; text-transform: none; font-size: 14px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary           { background: var(--acc); border-color: var(--acc); }
.btn-primary:hover     { background: var(--acc2); border-color: var(--acc2); box-shadow: 0 3px 12px var(--acc-glow); }
.btn-primary:disabled  { background: var(--bg3); border-color: var(--border); color: var(--muted); }

/* ── Pills ──────────────────────────────────────────────────── */
.sel-pill.selected { border-color: var(--acc); color: var(--acc); background: var(--acc-light); }
.sel-pill:hover    { border-color: rgba(37, 99, 235, 0.5); }

/* ── Cards ──────────────────────────────────────────────────── */
.card:hover     { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 2px 14px rgba(37, 99, 235, 0.09); }
.card.selected  { border-color: var(--acc); background: rgba(37, 99, 235, 0.04); box-shadow: 0 2px 16px var(--acc-glow); }
.card.selected::after { color: var(--acc); }

/* ── Grid layout — 2-col default, 1-col at narrow widths ────── */
.grid-3    { grid-template-columns: 1fr 1fr; }
.form-grid { grid-template-columns: 1fr; }

/* ── Content padding ────────────────────────────────────────── */
.content { padding: 18px 16px 22px; }

/* ── Total row ──────────────────────────────────────────────── */
.total-row { background: var(--nav); }

/* ── Crumbs ─────────────────────────────────────────────────── */
.crumb.current { background: var(--acc-light); border-color: rgba(37, 99, 235, 0.30); color: var(--acc); }

/* ── Motor group & variant cards ───────────────────────────── */
.motor-group-card.motor-group-selected         { border-color: var(--acc); box-shadow: 0 2px 16px var(--acc-glow); }
.variant-row.variant-preferred                 { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.05); }
.variant-row.variant-selected                  { border-color: var(--acc); background: rgba(37, 99, 235, 0.08); }
.variant-row:hover:not(.variant-disabled)      { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.03); }
.variant-price   { color: var(--acc); }
.variant-tick    { color: var(--acc); }
.variant-pref-tag { color: var(--acc); background: var(--acc-light); border-color: rgba(37, 99, 235, 0.25); }

/* ── Info / rec boxes ───────────────────────────────────────── */
.info-box a  { color: var(--acc); }
.rec-box strong { color: var(--acc); }

/* ── Addon tags & prices ────────────────────────────────────── */
.addon-tag   { background: var(--acc-light); color: var(--acc); border-color: rgba(37, 99, 235, 0.22); }
.addon-price { color: var(--acc); }

/* ── Misc accents ────────────────────────────────────────────── */
.bespoke-contact a { color: var(--acc); }
.sent-msg h3       { color: var(--acc); }
.card-price        { color: var(--acc); }
.kit-result-price  { color: var(--acc); }
.sum-price         { color: var(--acc); }
.card-note         { color: var(--acc); }
.tag               { color: var(--acc); background: var(--acc-light); border-color: rgba(37, 99, 235, 0.25); }

/* ── Brompton banner ────────────────────────────────────────── */
.brompton-note  { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.25); }
.brompton-title { color: var(--acc); }

/* ── AI lookup row — stack vertically on mobile ─────────────── */
.lookup-input-wrap { flex-direction: column; }
.lookup-btn        { width: 100%; }

/* ── AI lookup input focus ──────────────────────────────────── */
.lookup-input:focus          { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-light); }
input[type="text"]:focus,
input[type="email"]:focus    { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-light); }

/* ── AI advice button ────────────────────────────────────────── */
.btn-advice       { border-color: var(--nav); color: var(--nav); }
.btn-advice:hover { background: var(--nav); color: #fff; }
.btn-advice-retry { color: var(--acc); }

/* ── Config summary bar ─────────────────────────────────────── */
.config-summary-bar { background: var(--bg3); border-color: var(--border); }

/* ── Narrow screen overrides ────────────────────────────────── */
@media (max-width: 380px) {
    .grid-3                { grid-template-columns: 1fr; }
    .step-tab .num         { display: none; }
    .badge-compat          { display: none; }
}