@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700;900&family=Barlow:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   RIDE FARE CALCULATOR — PUBLIC STYLES
   Six color themes, all WCAG AA contrast compliant.
   Theme is set via a class on .fc-calc:
     .fc-theme-midnight   Dark navy/gold  (default)
     .fc-theme-charcoal   Dark grey/cyan
     .fc-theme-forest     Dark green/lime
     .fc-theme-cloud      Light white/blue
     .fc-theme-slate-blue Light slate/indigo
     .fc-theme-sunrise    Light warm cream/orange
═══════════════════════════════════════════════════════════ */

/* ── SHARED STRUCTURAL RESET ── */
.fc-calc *, .fc-calc *::before, .fc-calc *::after { box-sizing: border-box; }

.fc-calc {
    font-family: 'Barlow', sans-serif;
    border-radius: 16px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    /* Theme tokens — overridden per theme below */
    --fc-bg:          #1e2d3d;
    --fc-header-bg:   #0d1b2a;
    --fc-header-bg2:  #162030;
    --fc-border:      rgba(200,151,58,.3);
    --fc-accent:      #c8973a;
    --fc-accent2:     #e8b84b;
    --fc-accent-text: #0d1b2a;
    --fc-text:        #ffffff;
    --fc-text-muted:  rgba(255,255,255,.7);
    --fc-text-faint:  rgba(255,255,255,.45);
    --fc-input-bg:    #2c3e52;
    --fc-input-border:#4a6080;
    --fc-input-text:  #ffffff;
    --fc-btn-bg:      #253547;
    --fc-btn-border:  #3d5570;
    --fc-btn-text:    #d0dae5;
    --fc-btn-hover-border: var(--fc-accent);
    --fc-btn-hover-text:   #ffffff;
    --fc-active-bg:   rgba(200,151,58,.2);
    --fc-chauf-bg:    rgba(200,151,58,.1);
    --fc-chauf-border:rgba(200,151,58,.3);
    --fc-result-bg:   rgba(40,110,70,.2);
    --fc-result-border:rgba(40,110,70,.5);
    --fc-result-text: #ffffff;
    --fc-result-muted:rgba(255,255,255,.65);
    --fc-disclaimer:  rgba(255,255,255,.35);
    --fc-label-color: var(--fc-accent);
    --fc-radius:      10px;
    --fc-select-arrow-color: %23c8973a;
    background: var(--fc-bg);
    color: var(--fc-text);
    border: 1px solid var(--fc-border);
}

/* ═══════════════════════════════════════════════════════════
   THEME 1 — MIDNIGHT (dark navy / gold)  DEFAULT
═══════════════════════════════════════════════════════════ */
.fc-calc,
.fc-calc.fc-theme-midnight {
    --fc-bg:           #1e2d3d;
    --fc-header-bg:    #0d1b2a;
    --fc-header-bg2:   #162030;
    --fc-border:       rgba(200,151,58,.3);
    --fc-accent:       #c8973a;
    --fc-accent2:      #e8b84b;
    --fc-accent-text:  #0d1b2a;
    --fc-text:         #ffffff;
    --fc-text-muted:   rgba(255,255,255,.75);
    --fc-text-faint:   rgba(255,255,255,.5);
    --fc-input-bg:     #2c3e52;
    --fc-input-border: #4a6080;
    --fc-input-text:   #ffffff;
    --fc-btn-bg:       #253547;
    --fc-btn-border:   #3d5570;
    --fc-btn-text:     #d0dae5;
    --fc-active-bg:    rgba(200,151,58,.22);
    --fc-chauf-bg:     rgba(200,151,58,.1);
    --fc-chauf-border: rgba(200,151,58,.3);
    --fc-result-bg:    rgba(40,110,70,.2);
    --fc-result-border:rgba(40,110,70,.55);
    --fc-result-text:  #ffffff;
    --fc-result-muted: rgba(255,255,255,.68);
    --fc-disclaimer:   rgba(255,255,255,.38);
    --fc-select-arrow-color: %23c8973a;
}

/* ═══════════════════════════════════════════════════════════
   THEME 2 — CHARCOAL (dark grey / cyan)
═══════════════════════════════════════════════════════════ */
.fc-calc.fc-theme-charcoal {
    --fc-bg:           #2a2a2e;
    --fc-header-bg:    #18181b;
    --fc-header-bg2:   #1f1f23;
    --fc-border:       rgba(0,200,200,.25);
    --fc-accent:       #00c8c8;
    --fc-accent2:      #33dddd;
    --fc-accent-text:  #18181b;
    --fc-text:         #f0f0f0;
    --fc-text-muted:   rgba(240,240,240,.78);
    --fc-text-faint:   rgba(240,240,240,.52);
    --fc-input-bg:     #3a3a3e;
    --fc-input-border: #5a5a62;
    --fc-input-text:   #f0f0f0;
    --fc-btn-bg:       #323236;
    --fc-btn-border:   #505058;
    --fc-btn-text:     #d8d8d8;
    --fc-active-bg:    rgba(0,200,200,.18);
    --fc-chauf-bg:     rgba(0,200,200,.08);
    --fc-chauf-border: rgba(0,200,200,.28);
    --fc-result-bg:    rgba(0,150,150,.18);
    --fc-result-border:rgba(0,180,180,.45);
    --fc-result-text:  #f0f0f0;
    --fc-result-muted: rgba(240,240,240,.68);
    --fc-disclaimer:   rgba(240,240,240,.38);
    --fc-select-arrow-color: %2300c8c8;
}

/* ═══════════════════════════════════════════════════════════
   THEME 3 — FOREST (dark green / lime)
═══════════════════════════════════════════════════════════ */
.fc-calc.fc-theme-forest {
    --fc-bg:           #1a2b1a;
    --fc-header-bg:    #0f1f0f;
    --fc-header-bg2:   #152515;
    --fc-border:       rgba(100,220,80,.25);
    --fc-accent:       #6adc50;
    --fc-accent2:      #88ee66;
    --fc-accent-text:  #0f1f0f;
    --fc-text:         #e8f5e8;
    --fc-text-muted:   rgba(232,245,232,.78);
    --fc-text-faint:   rgba(232,245,232,.52);
    --fc-input-bg:     #223322;
    --fc-input-border: #3a5e3a;
    --fc-input-text:   #e8f5e8;
    --fc-btn-bg:       #1e2e1e;
    --fc-btn-border:   #345534;
    --fc-btn-text:     #c8e8c8;
    --fc-active-bg:    rgba(106,220,80,.18);
    --fc-chauf-bg:     rgba(106,220,80,.08);
    --fc-chauf-border: rgba(106,220,80,.28);
    --fc-result-bg:    rgba(60,140,40,.2);
    --fc-result-border:rgba(80,180,60,.5);
    --fc-result-text:  #e8f5e8;
    --fc-result-muted: rgba(232,245,232,.68);
    --fc-disclaimer:   rgba(232,245,232,.38);
    --fc-select-arrow-color: %236adc50;
}

/* ═══════════════════════════════════════════════════════════
   THEME 4 — CLOUD (light white / blue)
═══════════════════════════════════════════════════════════ */
.fc-calc.fc-theme-cloud {
    --fc-bg:           #f5f8ff;
    --fc-header-bg:    #1a56db;
    --fc-header-bg2:   #1447c0;
    --fc-border:       #c5d5f5;
    --fc-accent:       #1a56db;
    --fc-accent2:      #2563eb;
    --fc-accent-text:  #ffffff;
    --fc-text:         #111827;
    --fc-text-muted:   #374151;
    --fc-text-faint:   #6b7280;
    --fc-input-bg:     #ffffff;
    --fc-input-border: #9ca3af;
    --fc-input-text:   #111827;
    --fc-btn-bg:       #eef2ff;
    --fc-btn-border:   #c7d2fe;
    --fc-btn-text:     #374151;
    --fc-btn-hover-border: #1a56db;
    --fc-btn-hover-text:   #1a56db;
    --fc-active-bg:    #dbeafe;
    --fc-chauf-bg:     #eff6ff;
    --fc-chauf-border: #93c5fd;
    --fc-result-bg:    #ecfdf5;
    --fc-result-border:#6ee7b7;
    --fc-result-text:  #064e3b;
    --fc-result-muted: #374151;
    --fc-disclaimer:   #9ca3af;
    --fc-label-color:  #1a56db;
    --fc-select-arrow-color: %231a56db;
}

/* ═══════════════════════════════════════════════════════════
   THEME 5 — SLATE BLUE (light / indigo)
═══════════════════════════════════════════════════════════ */
.fc-calc.fc-theme-slate-blue {
    --fc-bg:           #f1f2f9;
    --fc-header-bg:    #312e81;
    --fc-header-bg2:   #3730a3;
    --fc-border:       #c7c3f0;
    --fc-accent:       #4f46e5;
    --fc-accent2:      #6366f1;
    --fc-accent-text:  #ffffff;
    --fc-text:         #1e1b4b;
    --fc-text-muted:   #3730a3;
    --fc-text-faint:   #6b7280;
    --fc-input-bg:     #ffffff;
    --fc-input-border: #a5b4fc;
    --fc-input-text:   #1e1b4b;
    --fc-btn-bg:       #ede9fe;
    --fc-btn-border:   #c4b5fd;
    --fc-btn-text:     #4c1d95;
    --fc-btn-hover-border: #4f46e5;
    --fc-btn-hover-text:   #4f46e5;
    --fc-active-bg:    #ddd6fe;
    --fc-chauf-bg:     #ede9fe;
    --fc-chauf-border: #a5b4fc;
    --fc-result-bg:    #f0fdf4;
    --fc-result-border:#86efac;
    --fc-result-text:  #14532d;
    --fc-result-muted: #374151;
    --fc-disclaimer:   #9ca3af;
    --fc-label-color:  #4f46e5;
    --fc-select-arrow-color: %234f46e5;
}

/* ═══════════════════════════════════════════════════════════
   THEME 6 — SUNRISE (light warm cream / orange)
═══════════════════════════════════════════════════════════ */
.fc-calc.fc-theme-sunrise {
    --fc-bg:           #fffbf5;
    --fc-header-bg:    #c2410c;
    --fc-header-bg2:   #9a3412;
    --fc-border:       #fed7aa;
    --fc-accent:       #ea580c;
    --fc-accent2:      #f97316;
    --fc-accent-text:  #ffffff;
    --fc-text:         #1c0a00;
    --fc-text-muted:   #431407;
    --fc-text-faint:   #7c3b1a;
    --fc-input-bg:     #ffffff;
    --fc-input-border: #fdba74;
    --fc-input-text:   #1c0a00;
    --fc-btn-bg:       #fff7ed;
    --fc-btn-border:   #fed7aa;
    --fc-btn-text:     #7c2d12;
    --fc-btn-hover-border: #ea580c;
    --fc-btn-hover-text:   #ea580c;
    --fc-active-bg:    #ffedd5;
    --fc-chauf-bg:     #fff7ed;
    --fc-chauf-border: #fdba74;
    --fc-result-bg:    #fefce8;
    --fc-result-border:#fde047;
    --fc-result-text:  #713f12;
    --fc-result-muted: #92400e;
    --fc-disclaimer:   #a16207;
    --fc-label-color:  #c2410c;
    --fc-select-arrow-color: %23ea580c;
}

/* ═══════════════════════════════════════════════════════════
   STRUCTURE — uses tokens, works for all themes
═══════════════════════════════════════════════════════════ */

/* HEADER */
.fc-header {
    background: linear-gradient(135deg, var(--fc-header-bg) 0%, var(--fc-header-bg2) 100%);
    padding: 26px 28px 20px;
    border-bottom: 2px solid var(--fc-accent);
}
.fc-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--fc-accent2);
    margin-bottom: 6px;
    /* Always visible on dark header */
    opacity: 1;
}
/* Light themes: header is always dark so text always white */
.fc-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px; font-weight: 900; line-height: 1.1;
    color: #ffffff; margin: 0;
}
.fc-title span { color: var(--fc-accent2); }
.fc-subtitle { margin-top: 7px; font-size: 13px; color: rgba(255,255,255,.7); font-weight: 300; }

/* BODY */
.fc-body { padding: 24px 28px; }

.fc-field { margin-bottom: 20px; }

.fc-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--fc-label-color);
    margin-bottom: 7px; font-weight: 700;
}

.fc-field-note {
    font-size: 12px; color: var(--fc-text-faint);
    font-style: italic; margin-top: 8px;
}

/* INPUTS & SELECTS */
.fc-select, .fc-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--fc-input-bg);
    border: 1.5px solid var(--fc-input-border);
    border-radius: var(--fc-radius);
    color: var(--fc-input-text);
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.fc-select {
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
    cursor: pointer;
}

/* ── PER-THEME SELECT: explicit color + bg with !important to beat browser defaults ── */

/* Midnight (default) */
.fc-calc .fc-select,
.fc-calc.fc-theme-midnight .fc-select {
    background-color: #2c3e52 !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8973a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Charcoal */
.fc-calc.fc-theme-charcoal .fc-select {
    background-color: #3a3a3e !important;
    color: #f0f0f0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300c8c8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Forest */
.fc-calc.fc-theme-forest .fc-select {
    background-color: #223322 !important;
    color: #e8f5e8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236adc50' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Cloud */
.fc-calc.fc-theme-cloud .fc-select {
    background-color: #ffffff !important;
    color: #111827 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a56db' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Slate Blue */
.fc-calc.fc-theme-slate-blue .fc-select {
    background-color: #ffffff !important;
    color: #1e1b4b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f46e5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Sunrise */
.fc-calc.fc-theme-sunrise .fc-select {
    background-color: #ffffff !important;
    color: #1c0a00 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ea580c' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── OPTION ELEMENTS: force readable colors in native dropdown list ── */
.fc-calc .fc-select option,
.fc-calc.fc-theme-midnight .fc-select option,
.fc-calc.fc-theme-charcoal .fc-select option,
.fc-calc.fc-theme-forest .fc-select option {
    background-color: #1e1e1e !important;
    color: #f0f0f0 !important;
}
.fc-calc.fc-theme-cloud .fc-select option,
.fc-calc.fc-theme-slate-blue .fc-select option,
.fc-calc.fc-theme-sunrise .fc-select option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.fc-select:focus, .fc-input:focus {
    outline: none;
    border-color: var(--fc-accent);
    box-shadow: 0 0 0 3px rgba(128,128,128,.15);
}

/* RIDER GRID */
.fc-rider-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.fc-rider-btn {
    padding: 10px 0;
    background: var(--fc-btn-bg);
    border: 1.5px solid var(--fc-btn-border);
    border-radius: 8px;
    color: var(--fc-btn-text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all .15s; text-align: center;
}
.fc-rider-btn:hover {
    border-color: var(--fc-btn-hover-border);
    color: var(--fc-btn-hover-text);
}
.fc-rider-btn.active {
    background: var(--fc-accent);
    border-color: var(--fc-accent2);
    color: var(--fc-accent-text);
    font-weight: 900;
}

/* SERVICE GRID */
.fc-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.fc-svc-btn {
    padding: 14px 10px;
    background: var(--fc-btn-bg);
    border: 1.5px solid var(--fc-btn-border);
    border-radius: var(--fc-radius);
    color: var(--fc-btn-text);
    font-family: 'Barlow Condensed', sans-serif;
    cursor: pointer; transition: all .15s; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fc-svc-btn:hover {
    border-color: var(--fc-btn-hover-border);
    color: var(--fc-btn-hover-text);
}
.fc-svc-btn.active {
    background: var(--fc-active-bg);
    border-color: var(--fc-accent);
    color: var(--fc-accent);
}
.fc-svc-name { font-size: 16px; font-weight: 700; }
.fc-svc-sub  { font-size: 11px; color: var(--fc-text-faint); line-height: 1.3; }
.fc-svc-btn.active .fc-svc-sub { color: var(--fc-text-muted); }

/* CHAUFFEUR */
.fc-chauffeur-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px;
    background: var(--fc-chauf-bg);
    border: 1.5px solid var(--fc-chauf-border);
    border-radius: var(--fc-radius);
    cursor: pointer; user-select: none;
}
.fc-chauffeur-row input[type="checkbox"] { display: none; }
.fc-check-box {
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--fc-accent);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; margin-top: 2px;
}
#fc-chauffeur:checked ~ .fc-check-box {
    background: var(--fc-accent); border-color: var(--fc-accent);
}
.fc-check-icon { display: none; font-size: 13px; color: var(--fc-accent-text); font-weight: 900; }
#fc-chauffeur:checked ~ .fc-check-box .fc-check-icon { display: block; }
.fc-chauf-name {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; letter-spacing: .5px; font-weight: 700;
    color: var(--fc-text);
}
.fc-chauf-sub { display: block; font-size: 11px; color: var(--fc-text-faint); margin-top: 3px; }

/* HOURS */
.fc-hours-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fc-hours-btn {
    padding: 9px 14px;
    background: var(--fc-btn-bg);
    border: 1.5px solid var(--fc-btn-border);
    border-radius: 8px;
    color: var(--fc-btn-text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.fc-hours-btn:hover { border-color: var(--fc-btn-hover-border); color: var(--fc-btn-hover-text); }
.fc-hours-btn.active { background: var(--fc-accent); border-color: var(--fc-accent2); color: var(--fc-accent-text); }

/* CALCULATE BUTTON */
.fc-calc-btn {
    width: 100%; padding: 15px; margin-top: 10px;
    background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent2) 100%);
    border: none; border-radius: var(--fc-radius);
    color: var(--fc-accent-text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: opacity .2s, transform .1s;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.fc-calc-btn:hover    { opacity: .88; transform: translateY(-1px); }
.fc-calc-btn:disabled { opacity: .5; cursor: wait; transform: none; }

/* ERROR */
.fc-error {
    margin-top: 14px; padding: 12px 16px;
    background: rgba(220,50,50,.12); border: 1.5px solid rgba(220,50,50,.35);
    border-radius: 8px; font-size: 13px; color: #e05252;
}

/* RESULT */
.fc-result {
    margin-top: 20px; padding: 20px 22px;
    background: var(--fc-result-bg);
    border: 1.5px solid var(--fc-result-border);
    border-radius: var(--fc-radius);
    animation: fc-up .3s ease;
}
@keyframes fc-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.fc-result-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--fc-result-muted); margin-bottom: 4px;
}
.fc-result-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 52px; font-weight: 900;
    color: var(--fc-result-text); line-height: 1;
}
.fc-dollar { font-size: 28px; color: var(--fc-accent); }
.fc-result-breakdown {
    margin-top: 12px; font-size: 13px;
    color: var(--fc-result-muted); line-height: 1.85;
}
.fc-result-breakdown strong { color: var(--fc-result-text); }

/* CTA BUTTONS */
.fc-cta-row { display: flex; gap: 10px; margin-top: 16px; }
.fc-btn-book, .fc-btn-call {
    flex: 1; padding: 13px 10px; border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-align: center; text-decoration: none;
    transition: opacity .15s, transform .1s; display: block;
}
.fc-btn-book {
    background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent2) 100%);
    color: var(--fc-accent-text);
}
.fc-btn-call {
    background: transparent;
    border: 1.5px solid var(--fc-btn-border);
    color: var(--fc-text);
}
.fc-btn-book:hover, .fc-btn-call:hover { opacity: .85; transform: translateY(-1px); }

/* DISCLAIMER */
.fc-disclaimer {
    margin-top: 14px; font-size: 11px;
    color: var(--fc-disclaimer);
    text-align: center; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — full redesign for small screens
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .fc-calc { border-radius: 12px; }

    .fc-header { padding: 20px 18px 16px; }
    .fc-title  { font-size: 22px; }

    .fc-body { padding: 18px 16px; }
    .fc-field { margin-bottom: 16px; }

    /* Riders: 5 per row on mobile */
    .fc-rider-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .fc-rider-btn  { padding: 8px 0; font-size: 14px; }

    /* Services: always 2 columns on mobile */
    .fc-service-grid { grid-template-columns: 1fr 1fr; }
    .fc-svc-btn { padding: 12px 8px; }
    .fc-svc-name { font-size: 14px; }

    /* Hours: wrap tighter */
    .fc-hours-btn { padding: 8px 11px; font-size: 13px; }

    /* Result: smaller price on mobile */
    .fc-result-price { font-size: 40px; }
    .fc-dollar       { font-size: 24px; }

    /* CTA: stack vertically */
    .fc-cta-row { flex-direction: column; }
    .fc-btn-book, .fc-btn-call { padding: 14px; font-size: 16px; }

    /* Calc button */
    .fc-calc-btn { font-size: 16px; padding: 14px; }

    /* Chauffeur row */
    .fc-chauffeur-row { padding: 12px 14px; }
}

@media (max-width: 380px) {
    .fc-rider-grid { grid-template-columns: repeat(4, 1fr); }
    .fc-result-price { font-size: 36px; }
}
