/* ============================================================
   QuickRid Valuation Plugin v3.4.5
   Fully responsive — mobile / tablet / laptop / desktop
   All selectors scoped to .quickrid-wrap
   ============================================================ */

/* ============================================================
   CHARLES WRIGHT FONT — UK Number Plate
   Local font files from MyFonts kit
   ============================================================ */
@font-face {
    font-family: 'CharlesWrightRegular';
    src: url('fonts/QuickShare_2604031022/font.woff2') format('woff2'),
         url('fonts/QuickShare_2604031022/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   BASE WRAPPER
   ============================================================ */
.quickrid-wrap {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #1E293B;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.quickrid-wrap *,
.quickrid-wrap *::before,
.quickrid-wrap *::after { box-sizing: border-box; }
.quickrid-wrap .qr-step  { padding: 0; margin: 0; width: 100% !important; box-sizing: border-box !important; }
.quickrid-wrap .qr-hidden { display: none !important; }
.qr-hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ============================================================
   LOGO — Step 1 (top of form) + Step 4
   ============================================================ */
.quickrid-wrap .qr-step1-logo-wrap {
    text-align: center !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
.quickrid-wrap .qr-logo-wrap { margin-bottom: 18px !important; }
.quickrid-wrap .qr-logo {
    height: 44px !important;
    width: auto !important;
    display: inline-block !important;
    max-width: 180px !important;
}

/* ============================================================
   PAGE HEADLINE + SUB
   ============================================================ */
.quickrid-wrap .qr-page-headline {
    font-size: 1.7em !important;
    font-weight: 900 !important;
    color: #1E293B !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
}
.quickrid-wrap .qr-page-sub {
    font-size: 0.95em !important;
    color: #475569 !important;
    margin: 0 0 14px !important;
    line-height: 1.5 !important;
}

/* ============================================================
   UK PLATE REGISTRATION INPUT
   ============================================================ */
.quickrid-wrap .qr-reg-plate-wrap {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08) !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
    border: 1px solid #E8EAED !important;
}
.quickrid-wrap .qr-reg-search-icon {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    color: #9CA3AF !important;
    display: block !important;
}
.quickrid-wrap .qr-reg-plate {
    display: flex !important;
    flex: 1 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    border: 2.5px solid #B0B0B0 !important;
    min-height: 56px !important;
    min-width: 0 !important;
}
.quickrid-wrap .qr-plate-badge {
    background: #003399 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 9px !important;
    min-width: 42px !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}
.quickrid-wrap .qr-plate-flag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
}
.quickrid-wrap .qr-plate-uk {
    color: #ffffff !important;
    font-size: 0.6em !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
}
.quickrid-wrap .qr-reg-plate input.qr-reg-input {
    display: block !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    background: #F5D000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    font-size: 1.55em !important;
    font-weight: 900 !important;
    padding: 10px 12px !important;
    color: #111111 !important;
    outline: none !important;
    font-family: 'CharlesWrightRegular', 'CharlesWright', 'FE-Schrift', 'Highway Gothic', 'Arial Black', 'Arial', sans-serif !important;
    line-height: 1.2 !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap .qr-reg-plate input.qr-reg-input::placeholder {
    color: rgba(0,0,0,0.35) !important;
    letter-spacing: 4px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    opacity: 1 !important;
    font-family: 'CharlesWrightRegular', 'CharlesWright', 'FE-Schrift', 'Highway Gothic', 'Arial Black', 'Arial', sans-serif !important;
    font-weight: bold !important;
}
.quickrid-wrap .qr-reg-plate input.qr-reg-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #F5D000 !important;
}

/* ============================================================
   PRIMARY CTA BUTTON (full-width, prominent)
   ============================================================ */
.quickrid-wrap button.qr-btn-red {
    background: #CC1414 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.18s ease !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap button.qr-btn-red:hover { background: #aa0f0f !important; }

/* ============================================================
   "or" DIVIDER — between CTA and WhatsApp
   ============================================================ */
.quickrid-wrap .qr-or-divider {
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    margin: 2px 0 !important;
    gap: 10px !important;
}
.quickrid-wrap .qr-or-divider::before,
.quickrid-wrap .qr-or-divider::after {
    content: '' !important;
    flex: 1 !important;
    border-top: 1px solid #E2E8F0 !important;
    display: block !important;
}
.quickrid-wrap .qr-or-divider span {
    font-size: 0.82em !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
}

/* ============================================================
   WHATSAPP BUTTON — outline style, secondary
   ============================================================ */
.quickrid-wrap a.qr-btn-whatsapp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    color: #25D366 !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    border: 1.5px solid #25D366 !important;
    padding: 10px 18px !important;
    font-family: inherit !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    width: 100% !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap a.qr-btn-whatsapp:hover {
    background: #25D366 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.quickrid-wrap .qr-wa-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ============================================================
   TRUST LIST (primary bullets — step 1)
   Google reviews bar + bullets sit directly below WhatsApp
   ============================================================ */
.quickrid-wrap .qr-google-reviews { margin-top: 10px !important; }
.quickrid-wrap .qr-trust-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}
.quickrid-wrap .qr-trust-list li {
    font-size: 0.93em !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    line-height: 1.45 !important;
}

/* ============================================================
   TICK LIST (smaller secondary bullets)
   ============================================================ */
.quickrid-wrap .qr-tick-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}
.quickrid-wrap .qr-tick-list li {
    font-size: 0.9em !important;
    color: #475569 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    line-height: 1.45 !important;
}
.quickrid-wrap .qr-tick {
    color: #22C55E !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    font-size: 1em !important;
}

/* ============================================================
    GOOGLE REVIEWS BAR
    ============================================================ */
.quickrid-wrap .qr-google-reviews {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.quickrid-wrap .qr-google-reviews-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.quickrid-wrap .qr-stars { display: flex !important; gap: 1px !important; flex-shrink: 0 !important; }
.quickrid-wrap .qr-stars span { color: #F59E0B !important; font-size: 1.1em !important; line-height: 1 !important; }
.quickrid-wrap .qr-review-score { font-size: 0.95em !important; font-weight: 800 !important; color: #1E293B !important; flex-shrink: 0 !important; }
.quickrid-wrap .qr-review-dot  { color: #CBD5E1 !important; font-size: 1em !important; flex-shrink: 0 !important; }
.quickrid-wrap .qr-review-count { font-size: 0.88em !important; color: #475569 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.quickrid-wrap .qr-google-icon { flex-shrink: 0 !important; display: block !important; margin-left: 6px !important; }

/* ============================================================
   TEST MODE BAR
   ============================================================ */
.quickrid-wrap .qr-test-bar {
    background: #FFFBEB !important;
    border: 1px solid #FCD34D !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-size: 0.8em !important;
    color: #92400E !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}
.quickrid-wrap .qr-test-bar a {
    color: #1D4ED8 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* ============================================================
   ERROR
   ============================================================ */
.quickrid-wrap .qr-error {
    color: #DC2626 !important;
    font-size: 0.84em !important;
    min-height: 14px !important;
    margin: 2px 0 8px !important;
    padding: 0 !important;
}

/* ============================================================
   SECTION TITLE (steps 3 + 4)
   ============================================================ */
.quickrid-wrap .qr-section-title {
    font-size: 1.15em !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    margin: 0 0 14px !important;
    line-height: 1.3 !important;
}

/* ============================================================
   STEP 2 — Valuation card
   ============================================================ */
.quickrid-wrap .qr-val-card {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #F0F0F0 !important;
    margin-bottom: 16px !important;
}
.quickrid-wrap .qr-card-heading  { font-size: 1.05em !important; font-weight: 800 !important; color: #1E293B !important; margin: 0 0 8px !important; }
.quickrid-wrap .qr-start-label   { font-size: 0.78em !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; margin: 0 0 2px !important; }
.quickrid-wrap .qr-val-amount    { font-size: 2.4em !important; font-weight: 900 !important; color: #1E293B !important; margin: 0 0 4px !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
.quickrid-wrap .qr-buyers-more   { color: #CC1414 !important; font-size: 0.88em !important; font-weight: 700 !important; margin: 0 0 6px !important; }
.quickrid-wrap .qr-buyers-active { font-size: 0.83em !important; color: #475569 !important; margin: 0 0 14px !important; }
.quickrid-wrap .qr-scrap-note    { font-size: 0.78em !important; color: #94A3B8 !important; margin: 0 0 10px !important; line-height: 1.5 !important; font-style: italic !important; }

/* Step 2 postcode input */
.quickrid-wrap input.qr-postcode-input {
    display: block !important;
    width: 100% !important;
    text-transform: uppercase !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
    margin-bottom: 10px !important;
    min-height: 52px !important;
    color: #1E293B !important;
    outline: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    height: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap input.qr-postcode-input::placeholder { color: #94A3B8 !important; text-transform: none !important; font-weight: 400 !important; }
.quickrid-wrap input.qr-postcode-input:focus { border-color: #3B82F6 !important; outline: none !important; }

/* "We found your car" banner */
.quickrid-wrap .qr-found-banner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #F0FDF4 !important;
    border: 1.5px solid #86EFAC !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 14px !important;
}
.quickrid-wrap .qr-found-icon  { font-size: 1.3em !important; color: #16A34A !important; font-weight: 900 !important; flex-shrink: 0 !important; line-height: 1 !important; }
.quickrid-wrap .qr-found-text  { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.quickrid-wrap .qr-found-label { font-size: 0.78em !important; color: #16A34A !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.quickrid-wrap .qr-found-vehicle { font-size: 1em !important; font-weight: 800 !important; color: #1E293B !important; line-height: 1.25 !important; word-break: break-word !important; }

/* ============================================================
   STEP 3 — Sub labels
   ============================================================ */
.quickrid-wrap .qr-sub-label {
    font-size: 0.95em !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin: 18px 0 10px !important;
}

/* ============================================================
   STEP 3 — Condition grid
   ============================================================ */
.quickrid-wrap .qr-cond-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
}
.quickrid-wrap .qr-cond-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    text-align: left !important;
    min-height: 60px !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    font-family: inherit !important;
    line-height: 1.35 !important;
    -webkit-tap-highlight-color: transparent !important;
}
.quickrid-wrap .qr-cond-btn:hover  { border-color: #93C5FD !important; background: #EFF6FF !important; }
.quickrid-wrap .qr-cond-btn.qr-selected { border-color: #1E3A8A !important; background: #EFF6FF !important; }
.quickrid-wrap .qr-cond-icon-wrap {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.1em !important; flex-shrink: 0 !important;
}
.quickrid-wrap .qr-icon-navy       { background: #1E3A8A !important; color: #fff !important; }
.quickrid-wrap .qr-icon-outline-red { background: transparent !important; border: 2px solid #EF4444 !important; color: #EF4444 !important; }

/* ============================================================
   STEP 3 — Pill groups
   ============================================================ */
.quickrid-wrap .qr-pill-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 6px !important; }
.quickrid-wrap .qr-pill {
    padding: 10px 18px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    font-size: 0.88em !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap .qr-pill:hover    { border-color: #93C5FD !important; }
.quickrid-wrap .qr-pill.qr-selected { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #fff !important; }

/* ============================================================
   STEP 3 — Phone input
   ============================================================ */
.quickrid-wrap .qr-phone-wrap {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    min-height: 52px !important;
}
.quickrid-wrap .qr-phone-prefix { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 10px 0 14px !important; flex-shrink: 0 !important; }
.quickrid-wrap .qr-flag-emoji   { font-size: 1.2em !important; line-height: 1 !important; }
.quickrid-wrap .qr-dial-code    { font-size: 0.95em !important; font-weight: 700 !important; color: #1E293B !important; white-space: nowrap !important; }
.quickrid-wrap .qr-vdivider     { width: 1px !important; height: 24px !important; background: #CBD5E1 !important; margin-left: 6px !important; flex-shrink: 0 !important; }
.quickrid-wrap input.qr-phone-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 14px 14px !important;
    font-size: 0.92em !important;
    color: #1E293B !important;
    background: transparent !important;
    min-height: 50px !important;
    font-family: inherit !important;
    width: 10px !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap input.qr-phone-input::placeholder { color: #94A3B8 !important; font-weight: 400 !important; }
.quickrid-wrap input.qr-phone-input:focus { outline: none !important; box-shadow: none !important; }
.quickrid-wrap .qr-phone-note { font-size: 0.83em !important; color: #64748B !important; margin: 0 0 14px !important; }

/* Shared text input */
.quickrid-wrap input.qr-text-input {
    display: block !important;
    width: 100% !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1E293B !important;
    outline: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    min-height: 50px !important;
    margin-bottom: 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap input.qr-text-input::placeholder { color: #94A3B8 !important; font-weight: 400 !important; }
.quickrid-wrap input.qr-text-input:focus { border-color: #3B82F6 !important; outline: none !important; }

/* Bottom notes (step 3) */
.quickrid-wrap .qr-bottom-note { font-size: 0.85em !important; color: #475569 !important; margin: 8px 0 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; }

/* ============================================================
   STEP 4 — Buyers review card (dark navy)
   ============================================================ */
.quickrid-wrap .qr-buyers-review-card {
    background: #1E3A8A !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 12px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.quickrid-wrap .qr-review-heading { color: #fff !important; font-size: 1em !important; font-weight: 800 !important; margin: 0 0 14px !important; }
.quickrid-wrap .qr-tick-list-white li { color: #fff !important; }
.quickrid-wrap .qr-tick-list-white .qr-tick { color: #4ADE80 !important; }
.quickrid-wrap .qr-review-sub { color: rgba(255,255,255,0.8) !important; font-size: 0.88em !important; margin: 12px 0 0 !important; }

/* Step 4 benefits card */
.quickrid-wrap .qr-benefits-card {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Step 4 email capture */
.quickrid-wrap .qr-email-capture-card {
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.quickrid-wrap .qr-email-capture-label { font-size: 0.92em !important; font-weight: 700 !important; color: #1E293B !important; margin: 0 0 12px !important; }
.quickrid-wrap .qr-email-input-row { display: flex !important; gap: 8px !important; align-items: flex-start !important; }
.quickrid-wrap .qr-email-input-row .qr-text-input { flex: 1 !important; min-width: 0 !important; margin-bottom: 0 !important; }
.quickrid-wrap button.qr-btn-email-save {
    background: #CC1414 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 18px !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-height: 50px !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
    transition: background 0.18s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.quickrid-wrap button.qr-btn-email-save:hover    { background: #aa0f0f !important; }
.quickrid-wrap button.qr-btn-email-save:disabled { background: #94A3B8 !important; cursor: default !important; }
.quickrid-wrap .qr-email-sent-msg { font-size: 0.88em !important; color: #16A34A !important; font-weight: 600 !important; margin: 10px 0 0 !important; }

/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */
.quickrid-wrap .qr-progress-wrap    { margin-bottom: 12px !important; }
.quickrid-wrap .qr-progress-label   { font-size: 0.78em !important; font-weight: 700 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; margin-bottom: 6px !important; }
.quickrid-wrap .qr-progress-current { color: #CC1414 !important; }
.quickrid-wrap .qr-progress-total   { color: #94A3B8 !important; }
.quickrid-wrap .qr-progress-track   { width: 100% !important; height: 4px !important; background: #E2E8F0 !important; border-radius: 99px !important; overflow: hidden !important; }
.quickrid-wrap .qr-progress-fill    { height: 100% !important; background: #CC1414 !important; border-radius: 99px !important; transition: width 0.3s ease !important; }

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.quickrid-wrap .qr-loading {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0.94) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    font-size: 0.92em !important;
    z-index: 99 !important;
}
.quickrid-wrap .qr-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #E2E8F0 !important;
    border-top-color: #CC1414 !important;
    border-radius: 50% !important;
    animation: qr-spin 0.7s linear infinite !important;
}
@keyframes qr-spin { to { transform: rotate(360deg); } }
.quickrid-wrap .qr-loading.qr-hidden,
.quickrid-wrap .qr-step.qr-hidden { display: none !important; }

/* ============================================================
   RESPONSIVE — Tablet (max 768px)
   ============================================================ */
@media (max-width: 768px) {
    .quickrid-wrap { font-size: 15px; }
    .quickrid-wrap .qr-logo { height: 38px !important; }
    .quickrid-wrap .qr-page-headline { font-size: 1.5em !important; }
    .quickrid-wrap .qr-val-amount { font-size: 2.1em !important; }
    .quickrid-wrap .qr-found-vehicle { font-size: 0.95em !important; }
}

/* ============================================================
   RESPONSIVE — Mobile (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    .quickrid-wrap { font-size: 15px; }
    .quickrid-wrap .qr-logo { height: 34px !important; }
    .quickrid-wrap .qr-logo-wrap { margin-bottom: 14px !important; }
    .quickrid-wrap .qr-page-headline { font-size: 1.4em !important; }
    .quickrid-wrap .qr-val-amount { font-size: 1.8em !important; }
    .quickrid-wrap .qr-cond-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .quickrid-wrap .qr-cond-btn { font-size: 0.8em !important; padding: 10px 8px !important; min-height: 56px !important; }
    .quickrid-wrap .qr-cond-icon-wrap { width: 30px !important; height: 30px !important; font-size: 1em !important; }
    .quickrid-wrap .qr-pill-group { flex-wrap: wrap !important; }
    .quickrid-wrap .qr-pill { padding: 9px 14px !important; font-size: 0.85em !important; }
    .quickrid-wrap .qr-section-title { font-size: 1.05em !important; }
    .quickrid-wrap .qr-found-banner { padding: 10px 12px !important; gap: 10px !important; }
    .quickrid-wrap .qr-found-vehicle { font-size: 0.9em !important; }
    .quickrid-wrap .qr-email-input-row { flex-direction: column !important; }
    .quickrid-wrap button.qr-btn-email-save { width: 100% !important; padding: 14px !important; }
    .quickrid-wrap .qr-email-input-row .qr-text-input { margin-bottom: 8px !important; }
    .quickrid-wrap .qr-progress-label { font-size: 0.72em !important; }
    .quickrid-wrap .qr-reg-plate-wrap { padding: 8px 10px !important; gap: 8px !important; }
    .quickrid-wrap .qr-reg-plate input.qr-reg-input { font-size: 1.3em !important; letter-spacing: 3px !important; }
    .quickrid-wrap .qr-plate-badge { min-width: 34px !important; padding: 4px 6px !important; }
    /* WhatsApp button stays same smaller proportions on mobile */
    .quickrid-wrap a.qr-btn-whatsapp { font-size: 0.82em !important; padding: 8px 14px !important; }
}

/* ============================================================
   RESPONSIVE — Small mobile (max 360px)
   ============================================================ */
@media (max-width: 360px) {
    .quickrid-wrap .qr-val-amount { font-size: 1.6em !important; }
    .quickrid-wrap .qr-page-headline { font-size: 1.2em !important; }
    .quickrid-wrap .qr-val-card { padding: 14px !important; }
    .quickrid-wrap .qr-cond-btn { font-size: 0.76em !important; }
    .quickrid-wrap .qr-found-banner { padding: 8px 10px !important; }
    .quickrid-wrap .qr-found-vehicle { font-size: 0.85em !important; }
    .quickrid-wrap .qr-google-reviews { padding: 9px 12px !important; gap: 5px !important; }
    .quickrid-wrap .qr-review-count { font-size: 0.82em !important; }
    .quickrid-wrap .qr-reg-plate input.qr-reg-input { font-size: 1.1em !important; letter-spacing: 2px !important; }
}

/* ============================================================
   RESPONSIVE — Desktop (min 769px)
   ============================================================ */
@media (min-width: 769px) {
    .quickrid-wrap .qr-buyers-review-card { padding: 26px !important; }
    .quickrid-wrap .qr-email-capture-card { padding: 20px !important; }
    .quickrid-wrap .qr-benefits-card { padding: 22px !important; }
    .quickrid-wrap .qr-review-heading { font-size: 1.1em !important; }
    .quickrid-wrap .qr-tick-list-white li,
    .quickrid-wrap .qr-benefits-card .qr-tick-list li { font-size: 0.95em !important; padding: 6px 0 !important; }
    .quickrid-wrap .qr-email-input-row { flex-direction: row !important; }
    .quickrid-wrap .qr-email-input-row .qr-text-input { margin-bottom: 0 !important; }
    .quickrid-wrap button.qr-btn-email-save { width: auto !important; padding: 0 24px !important; }
}

/* ============================================================
   STEP 4 — Email skip link
   ============================================================ */
.quickrid-wrap .qr-skip-wrap {
    text-align: center !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}
.quickrid-wrap a.qr-skip-link {
    font-size: 0.8em !important;
    color: #94A3B8 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    transition: color 0.15s ease !important;
}
.quickrid-wrap a.qr-skip-link:hover {
    color: #64748B !important;
    text-decoration: none !important;
}