/* ═══════════════════════════════════════════════════════
   STARLIGHT BOOKING v3 – CSS
   Blur fix: use solid rgba backgrounds instead of
   backdrop-filter (Elementor kills backdrop-filter via
   overflow:hidden / isolation on parent containers).
═══════════════════════════════════════════════════════ */

/* ── CSS custom props ── */
.slb-wrap {
    --slb-accent:    #9b59ff;
    --slb-accent2:   #c678ff;
    --slb-accent3:   #5e2bff;
    --slb-card-bg:   rgba(8, 4, 20, 0.82);
    --slb-card-bg2:  rgba(12, 6, 28, 0.90);
    --slb-border:    rgba(255,255,255,0.10);
    --slb-border-hi: rgba(180,100,255,0.45);
    --slb-text:      #f0eaff;
    --slb-muted:     rgba(210,195,245,0.65);
    --slb-radius:    18px;
    --slb-radius-sm: 10px;
    --slb-shadow:    0 8px 40px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.5);
    --slb-glow:      0 0 40px rgba(155,89,255,0.22);
    --slb-font:      'Inter', 'Segoe UI', system-ui, sans-serif;

    font-family: var(--slb-font);
    color:       var(--slb-text);
    max-width:   960px;
    margin:      0 auto;
    padding:     40px 28px;
    position:    relative;
    box-sizing:  border-box;
    background:  transparent;
}

.slb-wrap *, .slb-wrap *::before, .slb-wrap *::after { box-sizing: border-box; }
.slb-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   OUTER WRAPPER
═══════════════════════════════════════════════════════ */
.slb-elementor-outer {
    position:   relative;
    background: transparent;
}

.slb-elementor-outer::before,
.slb-elementor-outer::after {
    content: none;
}

.slb-bg-overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, var(--slb-overlay, 0.55));
    pointer-events: none;
    z-index:        1;
}

.slb-elementor-outer > .slb-wrap {
    position: relative;
    z-index:  2;
}

/* ═══════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════ */
.slb-progress { margin-bottom: 36px; height: 66px; min-height: 66px; max-height: 66px; }

.slb-progress-track {
    display:         flex;
    align-items:     center;
    background:      rgba(8, 4, 20, 0.75);
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   50px;
    padding:         5px 6px;
    height:          56px;
    min-height:      56px;
    max-height:      56px;
    overflow:        hidden;
    box-sizing:      border-box;
}

.slb-step-bubble {
    display:      flex;
    align-items:  center;
    gap:          8px;
    padding:      6px 14px 6px 6px;
    border-radius: 50px;
    cursor:       default;
    transition:   background 0.35s ease, box-shadow 0.35s ease;
    white-space:  nowrap;
    flex-shrink:  0;
    min-height:   36px;
}

.slb-bubble-dot {
    width:           26px; height: 26px;
    border-radius:   50%;
    border:          1.5px solid rgba(255,255,255,0.15);
    background:      rgba(255,255,255,0.05);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      all 0.35s ease;
}

.slb-bubble-num   { font-size: 0.68rem; font-weight: 700; color: var(--slb-muted); line-height: 1; transition: color 0.3s; }
.slb-bubble-label { font-size: 0.78rem; font-weight: 500; color: var(--slb-muted); transition: color 0.3s; }

@media (max-width: 480px) {
    .slb-bubble-label { display: none; }
    .slb-step-bubble  { padding: 6px; }
}

.slb-step-bubble.active { background: var(--slb-accent); box-shadow: 0 0 20px rgba(155,89,255,0.55); }
.slb-step-bubble.active .slb-bubble-dot { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45); }
.slb-step-bubble.active .slb-bubble-num,
.slb-step-bubble.active .slb-bubble-label { color: #fff; }
.slb-step-bubble.done .slb-bubble-dot { background: rgba(155,89,255,0.25); border-color: var(--slb-accent); }
.slb-step-bubble.done .slb-bubble-num,
.slb-step-bubble.done .slb-bubble-label { color: var(--slb-accent2); }

.slb-progress-line {
    flex: 1; height: 2px;
    background: rgba(255,255,255,0.08);
    position: relative; overflow: hidden; min-width: 16px;
}
.slb-progress-line::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--slb-accent3), var(--slb-accent2));
    transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.slb-progress-line.done::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════
   STEP TITLE
═══════════════════════════════════════════════════════ */
.slb-step-title {
    font-size:      clamp(1.2rem, 3vw, 1.65rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    margin:         0 0 28px;
    color:          #fff;
    text-shadow:    0 2px 12px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════
   GLASS CARD BASE
   Uses solid dark rgba instead of backdrop-filter —
   reliable across all Elementor container configs.
═══════════════════════════════════════════════════════ */
.slb-service-card,
.slb-vehicle-card {
    position:      relative;
    background:    var(--slb-card-bg);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius);
    cursor:        pointer;
    text-align:    left;
    color:         var(--slb-text);
    font-family:   var(--slb-font);
    overflow:      hidden;
    transition:    transform 0.28s cubic-bezier(.22,.68,0,1.5),
                   border-color 0.28s ease,
                   box-shadow 0.28s ease;
    outline:       none;
    padding:       0;
}

.slb-service-card:hover,
.slb-vehicle-card:hover {
    transform:    translateY(-4px) scale(1.015);
    border-color: var(--slb-border-hi);
    box-shadow:   var(--slb-shadow), var(--slb-glow);
}

.slb-service-card.selected,
.slb-vehicle-card.selected {
    border-color: var(--slb-accent);
    box-shadow:   0 0 0 2px var(--slb-accent), var(--slb-shadow), var(--slb-glow);
    transform:    translateY(-2px);
}

/* Mouse-tracked glow */
.slb-card-glow {
    position:       absolute; inset: 0;
    border-radius:  inherit;
    background:     radial-gradient(circle 120px at var(--mx,50%) var(--my,50%), rgba(155,89,255,0.25) 0%, transparent 70%);
    opacity:        0; transition: opacity 0.3s;
    pointer-events: none; z-index: 0;
}
.slb-service-card:hover .slb-card-glow,
.slb-vehicle-card:hover .slb-card-glow { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   STEP 1 – SERVICE CARDS
═══════════════════════════════════════════════════════ */
.slb-card-grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   20px;
}
@media (max-width: 680px) { .slb-card-grid { grid-template-columns: 1fr; } }

.slb-card-image {
    height:              170px;
    background-size:     cover;
    background-position: center;
    border-radius:       calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) 0 0;
    position:            relative; overflow: hidden;
}
.slb-card-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(8,4,20,0.92) 0%, rgba(8,4,20,0.30) 60%, transparent 100%);
}

/* CSS gradient fallbacks */
.slb-img-starlight  { background: linear-gradient(135deg, #0d0618 0%, #1a0533 40%, #0d1133 100%); }
.slb-img-ambient    { background: linear-gradient(135deg, #0a0d1a 0%, #0d1a33 40%, #1a0833 100%); }
.slb-img-headlights {
    background:
        radial-gradient(circle at 30% 50%, rgba(255,255,255,0.35) 0%, rgba(155,89,255,0.2) 30%, #0d0618 70%),
        radial-gradient(circle at 70% 50%, rgba(255,255,255,0.35) 0%, rgba(155,89,255,0.2) 30%, #0d0618 70%);
}

.slb-card-body {
    padding:  18px 20px 20px;
    position: relative; z-index: 1;
}
.slb-card-body h3 {
    font-size:   1rem; font-weight: 700;
    margin:      0 0 5px;
    color:       #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.slb-card-price {
    font-size: 0.78rem; color: var(--slb-muted); margin: 0 0 8px;
}
.slb-card-price strong { color: var(--slb-accent2); font-weight: 700; }

.slb-card-desc {
    font-size:   0.82rem;
    color:       rgba(220,210,245,0.80);
    line-height: 1.55;
    margin:      0 0 14px;
}
.slb-card-btn {
    display:        inline-block;
    background:     linear-gradient(135deg, var(--slb-accent3), var(--slb-accent));
    color:          #fff;
    font-size:      0.82rem; font-weight: 600;
    padding:        8px 22px;
    border-radius:  50px;
    letter-spacing: 0.03em;
    transition:     box-shadow 0.25s;
    pointer-events: none;
}
.slb-service-card:hover .slb-card-btn { box-shadow: 0 4px 20px rgba(155,89,255,0.5); }
.slb-service-card.selected .slb-card-btn {
    background: linear-gradient(135deg, #7c3aed, #c678ff);
    box-shadow: 0 4px 20px rgba(155,89,255,0.7);
}

/* ═══════════════════════════════════════════════════════
   STEP 1B – STARLIGHT ADD-ONS
═══════════════════════════════════════════════════════ */
.slb-addons-wrap {
    background:    var(--slb-card-bg);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius);
    padding:       28px 28px 24px;
}

.slb-addon-section { margin-bottom: 26px; }
.slb-addon-section:last-child { margin-bottom: 0; }

.slb-addon-label {
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          var(--slb-accent2);
    margin:         0 0 12px;
    display:        block;
}

/* Star count image cards */
.slb-addon-pills {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
}
@media (max-width: 600px) {
    .slb-addon-pills { grid-template-columns: 1fr; }
}

.slb-addon-pill {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    background:     rgba(255,255,255,0.04);
    border:         1.5px solid var(--slb-border);
    border-radius:  12px;
    color:          var(--slb-text);
    font-family:    var(--slb-font);
    font-size:      0.95rem;
    font-weight:    500;
    padding:        0;
    cursor:         pointer;
    transition:     all 0.25s ease;
    overflow:       hidden;
    text-align:     left;
}
.slb-addon-pill:hover {
    border-color: var(--slb-border-hi);
    background:   rgba(155,89,255,0.08);
    transform:    translateY(-2px);
    box-shadow:   0 4px 20px rgba(155,89,255,0.2);
}
.slb-addon-pill.active {
    border-color: var(--slb-accent);
    background:   rgba(94,43,255,0.15);
    box-shadow:   0 0 0 2px var(--slb-accent), 0 4px 24px rgba(155,89,255,0.35);
}
.slb-pill-img-wrap {
    width:        100%;
    aspect-ratio: 4/3;
    overflow:     hidden;
    background:   rgba(0,0,0,0.4);
    position:     relative;
}
.slb-pill-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.slb-addon-pill:hover .slb-pill-img-wrap img { transform: scale(1.05); }
/* Fallback starfield if no image set */
.slb-pill-img-placeholder {
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 30% 40%, rgba(155,89,255,0.25) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(94,43,255,0.2) 0%, transparent 50%),
                rgba(8,4,24,0.9);
    display: flex; align-items: center; justify-content: center;
}
.slb-pill-img-placeholder svg { opacity: 0.35; }
.slb-pill-body {
    padding:    12px 14px 14px;
}
.slb-pill-count {
    font-size:   1.5rem;
    font-weight: 700;
    color:       #f0eaff;
    line-height: 1.1;
    margin:      0 0 2px;
}
.slb-pill-count span { font-size: 0.9rem; font-weight: 500; color: var(--slb-muted); }
.slb-addon-pill-price {
    display:     block;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--slb-accent2);
    margin-top:  4px;
}
.slb-addon-pill.active .slb-pill-count { color: #fff; }
.slb-addon-pill.active .slb-addon-pill-price { color: rgba(255,255,255,0.85); }

.slb-addon-toggle {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    rgba(255,255,255,0.04);
    border:        1.5px solid var(--slb-border);
    border-radius: var(--slb-radius-sm);
    padding:       14px 18px;
    cursor:        pointer;
    transition:    all 0.22s ease;
    font-family:   var(--slb-font);
    color:         var(--slb-text);
    font-size:     0.9rem;
    font-weight:   500;
    width:         100%;
    text-align:    left;
    margin-bottom: 10px;
}
.slb-addon-toggle:last-child { margin-bottom: 0; }
.slb-addon-toggle:hover { border-color: var(--slb-border-hi); background: rgba(155,89,255,0.07); }
.slb-addon-toggle.active {
    background:   rgba(94,43,255,0.22);
    border-color: var(--slb-accent);
    box-shadow:   0 0 14px rgba(155,89,255,0.2);
}

.slb-addon-toggle-check {
    width:           20px; height: 20px;
    border-radius:   6px;
    border:          1.5px solid var(--slb-border);
    background:      rgba(255,255,255,0.04);
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.22s;
    font-size:       0.75rem;
    color:           transparent;
}
.slb-addon-toggle.active .slb-addon-toggle-check {
    background:   var(--slb-accent);
    border-color: var(--slb-accent);
    color:        #fff;
}

.slb-addon-toggle-info { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.slb-addon-toggle-name { display: block; font-size: 0.9rem; font-weight: 600; color: var(--slb-text); }
.slb-addon-toggle-price { display: block; font-size: 0.82rem; font-weight: 700; color: var(--slb-accent2); white-space: nowrap; margin-left: 12px; }
.slb-addon-toggle.active .slb-addon-toggle-price { color: rgba(200,170,255,0.9); }

/* ═══════════════════════════════════════════════════════
   STEP 2 – VEHICLE CARDS
═══════════════════════════════════════════════════════ */
.slb-vehicle-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width: 600px) { .slb-vehicle-grid { grid-template-columns: 1fr; } }

.slb-vehicle-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         36px 20px 28px;
    gap:             16px;
    min-height:      180px;
}

.slb-vehicle-icon { width: 80px; height: 40px; color: var(--slb-accent2); transition: color 0.3s, filter 0.3s; }
.slb-vehicle-card:hover .slb-vehicle-icon,
.slb-vehicle-card.selected .slb-vehicle-icon { color: #fff; filter: drop-shadow(0 0 10px rgba(155,89,255,0.7)); }

.slb-vehicle-card.slb-vehicle-has-img { padding: 0; min-height: 220px; justify-content: flex-end; align-items: stretch; }
.slb-vehicle-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    border-radius: inherit;
    transition: transform 0.5s ease;
}
.slb-vehicle-card.slb-vehicle-has-img:hover .slb-vehicle-img { transform: scale(1.06); }
.slb-vehicle-card.slb-vehicle-has-img::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(0deg, rgba(8,4,20,0.90) 0%, rgba(8,4,20,0.15) 55%, transparent 100%);
    z-index: 1;
}
.slb-vehicle-card.slb-vehicle-has-img .slb-vehicle-label { position: relative; z-index: 2; padding: 0 16px 20px; text-align: center; }
.slb-vehicle-card.slb-vehicle-has-img .slb-card-glow { z-index: 3; }

.slb-vehicle-label { font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--slb-text); position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════
   STEP 3 – SCHEDULE
═══════════════════════════════════════════════════════ */
.slb-schedule-layout {
    display:               grid;
    grid-template-columns: 1fr 220px;
    gap:                   24px;
    align-items:           start;
    width:                 100%;
    min-width:             0;
}
@media (max-width: 640px) { .slb-schedule-layout { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
    .slb-calendar-wrap  { padding: 16px; }
    .slb-timeslots-wrap { padding: 16px 12px; }
    .slb-cal-nav        { margin-bottom: 12px; }
    .slb-cal-arrow      { width: 30px; height: 30px; font-size: 1.1rem; }
    .slb-cal-month-label { font-size: 0.85rem; }
    .slb-time-slot      { padding: 11px 12px; }
}

.slb-calendar-wrap,
.slb-timeslots-wrap {
    background:    var(--slb-card-bg);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius);
    width:         100%;
    min-width:     0;
    box-sizing:    border-box;
}

.slb-calendar-wrap { padding: 22px; }
.slb-timeslots-wrap { padding: 20px 16px; }

.slb-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; width: 100%; min-width: 0; }

.slb-cal-arrow {
    background:    rgba(255,255,255,0.06);
    border:        1px solid var(--slb-border);
    color:         var(--slb-text);
    border-radius: 8px; width: 34px; height: 34px; font-size: 1.3rem;
    display:       flex; align-items: center; justify-content: center;
    cursor:        pointer; transition: background 0.2s, border-color 0.2s;
    flex-shrink:   0;
}
.slb-cal-arrow:hover { background: rgba(155,89,255,0.15); border-color: var(--slb-border-hi); }

.slb-cal-month-label {
    font-size:     0.95rem;
    font-weight:   600;
    letter-spacing: 0.03em;
    flex:          1 1 auto;
    min-width:     0;
    text-align:    center;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.slb-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 8px; width: 100%; min-width: 0; }
.slb-cal-dow span { text-align: center; font-size: 0.68rem; color: var(--slb-muted); letter-spacing: 0.05em; padding: 4px 0; min-width: 0; overflow: hidden; }

.slb-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; width: 100%; min-width: 0; }

.slb-cal-day {
    aspect-ratio:    1;
    display:         flex; align-items: center; justify-content: center;
    border-radius:   8px; font-size: 0.82rem;
    min-width:       0;
    cursor:          pointer; color: var(--slb-text);
    border:          1px solid transparent;
    transition:      all 0.2s ease;
    background:      transparent;
    font-family:     var(--slb-font);
}
.slb-cal-day:hover:not(.slb-cal-day--disabled):not(.slb-cal-day--empty) { background: rgba(155,89,255,0.18); border-color: var(--slb-border-hi); }
.slb-cal-day.selected { background: var(--slb-accent); color: #fff; font-weight: 700; box-shadow: 0 0 16px rgba(155,89,255,0.55); border-color: var(--slb-accent2); }
.slb-cal-day--empty    { cursor: default; }
.slb-cal-day--disabled { color: rgba(255,255,255,0.18); cursor: not-allowed; }
.slb-cal-day--today    { border-color: rgba(155,89,255,0.4); color: var(--slb-accent2); font-weight: 600; }

.slb-timeslots-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slb-muted); margin: 0 0 14px; }
.slb-timeslots { display: flex; flex-direction: column; gap: 8px; }

.slb-time-slot {
    background:    rgba(255,255,255,0.05);
    border:        1px solid var(--slb-border);
    color:         #f0eaff !important;
    border-radius: var(--slb-radius-sm);
    padding:       12px 16px; font-size: 0.9rem;
    font-family:   var(--slb-font); cursor: pointer;
    text-align:    left; transition: all 0.22s ease;
    display:       flex; align-items: center; justify-content: space-between;
}
.slb-time-slot .slb-slot-label { color: #f0eaff !important; font-weight: 500; }
.slb-time-slot .slb-slot-price { font-size: 0.75rem; font-weight: 600; color: var(--slb-accent2); opacity: 0.9; }
.slb-time-slot:hover:not(.slb-time-slot--full) { background: rgba(155,89,255,0.15); border-color: var(--slb-border-hi); transform: translateX(3px); }
.slb-time-slot.selected { background: linear-gradient(135deg, var(--slb-accent3), var(--slb-accent)); border-color: var(--slb-accent2); font-weight: 700; box-shadow: 0 4px 18px rgba(155,89,255,0.45); }
.slb-time-slot.selected .slb-slot-price { color: rgba(255,255,255,0.85); }
.slb-time-slot--full { color: rgba(255,255,255,0.22) !important; cursor: not-allowed; text-decoration: line-through; border-style: dashed; }

.slb-summary-bar {
    margin-top:    20px;
    background:    var(--slb-card-bg);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius-sm);
    padding:       14px 20px;
    display:       flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.slb-summary-col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 120px; }
.slb-summary-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--slb-muted); }
.slb-summary-val   { font-size: 0.88rem; font-weight: 600; color: var(--slb-text); }

/* ═══════════════════════════════════════════════════════
   STEP 4 – DETAILS
═══════════════════════════════════════════════════════ */
.slb-details-form {
    background:    var(--slb-card-bg);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius);
    padding:       32px;
}
.slb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 600px) { .slb-field-row { grid-template-columns: 1fr; } .slb-details-form { padding: 20px; } }

.slb-field { display: flex; flex-direction: column; gap: 8px; }
.slb-field label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--slb-muted); }

.slb-field input {
    background:     rgba(255,255,255,0.12) !important;
    border:         1px solid var(--slb-border) !important;
    border-radius:  var(--slb-radius-sm) !important;
    color:          #f0eaff !important;
    font-family:    var(--slb-font); font-size: 0.9rem;
    padding:        13px 16px !important;
    transition:     border-color 0.25s, box-shadow 0.25s, background 0.25s;
    outline:        none !important; width: 100%;
    -webkit-text-fill-color: #f0eaff !important;
    caret-color:    #f0eaff !important;
}
.slb-field input::placeholder { color: rgba(200,185,240,0.45) !important; opacity: 1 !important; }
.slb-field input:focus { border-color: var(--slb-accent) !important; box-shadow: 0 0 0 3px rgba(155,89,255,0.18) !important; background: rgba(155,89,255,0.12) !important; color: #f0eaff !important; -webkit-text-fill-color: #f0eaff !important; }
.slb-field input.slb-error { border-color: #e74c3c !important; }
/* Override browser autofill — Chrome injects white/blue background on autofill */
.slb-field input:-webkit-autofill,
.slb-field input:-webkit-autofill:hover,
.slb-field input:-webkit-autofill:focus,
.slb-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #f0eaff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(30,15,60,0.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(30,15,60,0.95) inset !important;
    caret-color: #f0eaff !important;
    color: #f0eaff !important;
    background-color: rgba(30,15,60,0.95) !important;
}

.slb-contact-options { display: flex; gap: 8px; flex-wrap: wrap; }
.slb-contact-opt {
    display:       flex; align-items: center; gap: 6px;
    background:    rgba(255,255,255,0.05);
    border:        1px solid var(--slb-border); border-radius: 50px;
    color:         var(--slb-muted);
    font-family:   var(--slb-font); font-size: 0.78rem; font-weight: 600;
    padding:       8px 14px; cursor: pointer; transition: all 0.22s ease;
}
.slb-contact-opt:hover { border-color: var(--slb-border-hi); color: var(--slb-text); }
.slb-contact-opt.active { background: linear-gradient(135deg, rgba(94,43,255,0.35), rgba(155,89,255,0.35)); border-color: var(--slb-accent); color: #fff; box-shadow: 0 0 14px rgba(155,89,255,0.3); }

.slb-review-box {
    background:    rgba(155,89,255,0.08);
    border:        1px solid rgba(155,89,255,0.22);
    border-radius: var(--slb-radius-sm);
    padding:       18px 20px; margin-bottom: 24px;
}
.slb-review-box h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slb-accent2); margin: 0 0 14px; }
.slb-review-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
.slb-review-grid span:nth-child(odd)  { font-size: 0.78rem; color: var(--slb-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.slb-review-grid span:nth-child(even) { font-size: 0.88rem; font-weight: 600; color: var(--slb-text); }

.slb-form-msg { border-radius: var(--slb-radius-sm); padding: 12px 16px; font-size: 0.85rem; font-weight: 500; display: none; margin-bottom: 16px; }
.slb-form-msg.slb-error-msg { display: block; background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.35); color: #ff8f8f; }
.slb-form-msg.slb-success-msg-inline { display: block; background: rgba(39,174,96,0.12); border: 1px solid rgba(39,174,96,0.3); color: #7cfc9f; }

.slb-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.slb-next-btn,
.slb-submit-btn {
    display:        inline-flex; align-items: center; gap: 8px;
    background:     linear-gradient(135deg, var(--slb-accent3) 0%, var(--slb-accent) 60%, var(--slb-accent2) 100%);
    color:          #fff; border: none; border-radius: 50px;
    font-family:    var(--slb-font); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.04em; padding: 13px 30px; cursor: pointer;
    transition:     box-shadow 0.3s, transform 0.2s, opacity 0.25s;
    box-shadow:     0 4px 22px rgba(155,89,255,0.4);
    position:       relative; overflow: hidden;
}
.slb-next-btn::before, .slb-submit-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; }
.slb-next-btn:hover, .slb-submit-btn:hover { box-shadow: 0 6px 32px rgba(155,89,255,0.6); transform: translateY(-2px); }
.slb-next-btn:disabled, .slb-submit-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.slb-whatsapp-btn {
    display:        inline-flex; align-items: center; gap: 8px;
    background:     linear-gradient(135deg, #25D366 0%, #1DA851 100%);
    color:          #fff; border: none; border-radius: 50px;
    font-family:    var(--slb-font); font-size: 0.9rem; font-weight: 700;
    letter-spacing: 0.04em; padding: 13px 26px; cursor: pointer;
    transition:     box-shadow 0.3s, transform 0.2s, opacity 0.25s;
    box-shadow:     0 4px 22px rgba(37,211,102,0.4);
    position:       relative; overflow: hidden;
}
.slb-whatsapp-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; }
.slb-whatsapp-btn:hover { box-shadow: 0 6px 32px rgba(37,211,102,0.6); transform: translateY(-2px); }
.slb-whatsapp-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.slb-back-btn {
    background:    rgba(255,255,255,0.06);
    border:        1px solid var(--slb-border); border-radius: 50px;
    color:         var(--slb-muted);
    font-family:   var(--slb-font); font-size: 0.85rem; font-weight: 600;
    padding:       11px 22px; cursor: pointer; transition: all 0.22s;
    margin-top:    16px;
}
.slb-back-btn:hover { color: var(--slb-text); border-color: var(--slb-border-hi); background: rgba(155,89,255,0.1); }

/* ═══════════════════════════════════════════════════════
   SUCCESS
═══════════════════════════════════════════════════════ */
.slb-success { text-align: center; padding: 60px 30px; }
.slb-success-inner {
    background:    var(--slb-card-bg2);
    border:        1px solid var(--slb-border);
    border-radius: var(--slb-radius);
    padding:       60px 40px; max-width: 480px; margin: 0 auto;
}
.slb-success-icon { width: 80px; height: 80px; margin: 0 auto 24px; animation: slb-pop 0.5s cubic-bezier(.22,.68,0,1.5) forwards; }
.slb-success-msg { color: var(--slb-text); font-size: 1rem; line-height: 1.6; margin: 0 0 12px; }
.slb-success-sub { color: var(--slb-muted); font-size: 0.85rem; margin: 0 0 32px; }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes slb-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slb-pop     { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.slb-step { animation: slb-fade-in 0.4s ease both; }

@media (prefers-reduced-motion: reduce) {
    .slb-step, .slb-service-card, .slb-vehicle-card,
    .slb-next-btn, .slb-submit-btn, .slb-time-slot { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   FORCE TEXT COLORS – override theme stylesheet bleed-in
═══════════════════════════════════════════════════════ */
.slb-wrap,
.slb-wrap p,
.slb-wrap span,
.slb-wrap h2,
.slb-wrap h3,
.slb-wrap h4,
.slb-wrap li { color: inherit; }

.slb-step-title                          { color: #fff !important; }
.slb-card-body h3                        { color: #fff !important; }
.slb-card-desc                           { color: rgba(220,210,245,0.85) !important; }
.slb-card-price                          { color: rgba(210,195,245,0.65) !important; }
.slb-card-price strong                   { color: #c678ff !important; }
.slb-review-box h4                       { color: #c678ff !important; }
.slb-review-grid span                    { color: #f0eaff !important; }
.slb-review-grid span:nth-child(odd)     { color: rgba(210,195,245,0.65) !important; }
.slb-review-grid span:nth-child(even)    { color: #f0eaff !important; }
.slb-summary-val                         { color: #f0eaff !important; }
.slb-summary-label                       { color: rgba(210,195,245,0.65) !important; }
.slb-addon-label                         { color: #c678ff !important; }
.slb-addon-toggle-price                  { color: #c678ff !important; }
.slb-addon-pill-price                    { color: #c678ff !important; }
.slb-addon-pill.active .slb-addon-pill-price { color: rgba(255,255,255,0.85) !important; }
.slb-addon-toggle-name                   { color: #f0eaff !important; }
.slb-pill-count                          { color: #f0eaff !important; }
.slb-pill-count span                     { color: rgba(210,195,245,0.65) !important; }
.slb-addon-pill.active .slb-pill-count  { color: #fff !important; }
.slb-vehicle-label                       { color: #f0eaff !important; }
.slb-cal-month-label                     { color: #f0eaff !important; }
.slb-timeslots-title                     { color: rgba(210,195,245,0.65) !important; }
.slb-time-slot .slb-slot-label           { color: #f0eaff !important; }
.slb-field label                         { color: rgba(210,195,245,0.65) !important; }
.slb-field input                         { color: #f0eaff !important; }
.slb-bubble-label,
.slb-bubble-num                          { color: rgba(210,195,245,0.65); }
.slb-step-bubble.active .slb-bubble-label,
.slb-step-bubble.active .slb-bubble-num  { color: #fff; }
.slb-step-bubble.done .slb-bubble-label,
.slb-step-bubble.done .slb-bubble-num    { color: #c678ff; }

/* ── Running Total Bar ── */
.slb-running-total {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    background:     rgba(0, 30, 10, 0.55);
    border:         1px solid rgba(34, 197, 94, 0.30);
    border-radius:  var(--slb-radius-sm);
    padding:        14px 20px;
    margin-top:     20px;
}
.slb-running-total-label {
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          rgba(134, 239, 172, 0.75) !important;
}
.slb-running-total-value {
    font-size:   1.1rem;
    font-weight: 800;
    color:       #4ade80 !important;
    letter-spacing: -0.01em;
    transition:  color 0.2s;
}
.slb-total-placeholder {
    font-size:   0.85rem !important;
    font-weight: 500 !important;
    color:       rgba(134, 239, 172, 0.50) !important;
}
@keyframes slb-total-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); color: #86efac; }
    100% { transform: scale(1); }
}
.slb-total-pop { animation: slb-total-pulse 0.4s cubic-bezier(.22,.68,0,1.5) both; }
═══════════════════════════════════════════════════════ */
/* ── Quick Booking Widget ── */
.slb-quick-widget {
    --slb-accent:    #9b59ff;
    --slb-accent2:   #c678ff;
    --slb-accent3:   #5e2bff;
    --slb-font:      'Orbitron', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --slb-body-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-family:     var(--slb-body-font);
    padding:         20px 0;
    box-sizing:      border-box;
    width:           100%;
}

.slb-quick-inner {
    display:       flex;
    align-items:   center;
    gap:           0;
    position:      relative;
    background:    #1a1a2e;
    border:        1.5px solid rgba(180, 80, 255, 0.9);
    border-radius: 14px;
    box-shadow:    0 0 12px rgba(160, 60, 255, 0.8),
                   0 0 30px rgba(140, 40, 255, 0.5),
                   0 0 60px rgba(120, 20, 255, 0.25);
    padding:       14px 14px 14px 28px;
    flex-wrap:     wrap;
    width:         100%;
    max-width:     100%;
    margin:        0;
    transition:    border-color 0.35s ease, box-shadow 0.35s ease;
}

.slb-quick-inner:hover {
    border-color: rgba(220, 140, 255, 1);
    box-shadow:   0 0 16px rgba(180, 80, 255, 1),
                  0 0 45px rgba(150, 50, 255, 0.7),
                  0 0 80px rgba(130, 30, 255, 0.4);
}

.slb-quick-heading {
    font-family:    'Orbitron', sans-serif;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          #fff !important;
    white-space:    nowrap;
    margin:         0 28px 0 0;
    flex-shrink:    0;
}

.slb-quick-steps {
    display:     flex;
    align-items: stretch;
    flex:        1;
    flex-wrap:   wrap;
    gap:         0;
}

.slb-quick-divider {
    width:       1px;
    align-self:  stretch;
    background:  rgba(180, 80, 255, 0.25);
    flex-shrink: 0;
}

.slb-quick-step {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        10px 20px;
    flex:           1;
    min-width:      160px;
}

.slb-quick-step-num {
    font-family:    'Orbitron', sans-serif;
    font-size:      0.6rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          rgba(200, 140, 255, 0.85);
    white-space:    nowrap;
}

.slb-quick-select-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
}

.slb-quick-select,
.slb-quick-date {
    appearance:              none;
    -webkit-appearance:      none;
    background:              rgba(255,255,255,0.06) !important;
    border:                  1px solid rgba(160, 80, 255, 0.35);
    border-radius:           6px;
    outline:                 none;
    color:                   #ffffff !important;
    font-family:             var(--slb-body-font);
    font-size:               0.8rem;
    font-weight:             500;
    padding:                 6px 28px 6px 10px;
    cursor:                  pointer;
    width:                   100%;
    caret-color:             #fff;
    -webkit-text-fill-color: #ffffff;
    transition:              border-color 0.2s ease, background 0.2s ease;
}

.slb-quick-select:focus,
.slb-quick-date:focus {
    border-color: rgba(180, 80, 255, 0.8);
    background:   rgba(255,255,255,0.09) !important;
}

/* All option states */
.slb-quick-select option,
.slb-quick-select option:checked,
.slb-quick-select option:hover {
    background-color: #0f0820 !important;
    background:       #0f0820 !important;
    color:            #f0eaff !important;
}

/* Placeholder */
.slb-quick-select option[value=""] {
    color: rgba(200, 180, 255, 0.5) !important;
}

.slb-quick-date {
    color-scheme: dark;
}

.slb-quick-date::-webkit-calendar-picker-indicator {
    opacity:  0;
    position: absolute;
    right:    0;
    width:    100%;
    cursor:   pointer;
}

.slb-quick-select-arrow {
    position:       absolute;
    right:          0;
    color:          rgba(180, 100, 255, 0.7);
    pointer-events: none;
    flex-shrink:    0;
}

.slb-quick-btn {
    background:     linear-gradient(135deg, var(--slb-accent3), var(--slb-accent));
    color:          #fff;
    border:         none;
    border-radius:  50px;
    font-family:    'Orbitron', sans-serif;
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    padding:        13px 26px;
    cursor:         pointer;
    white-space:    nowrap;
    flex-shrink:    0;
    transition:     box-shadow 0.25s ease, transform 0.2s ease;
    box-shadow:     0 4px 20px rgba(155, 89, 255, 0.5);
    margin-left:    8px;
}

.slb-quick-btn:hover {
    box-shadow: 0 6px 30px rgba(180, 80, 255, 0.75),
                0 0 50px rgba(140, 40, 255, 0.35);
    transform:  translateY(-2px);
}

.slb-quick-msg {
    text-align:   center;
    font-size:    0.8rem;
    color:        #ff8f8f;
    margin-top:   10px;
    padding:      8px 16px;
    background:   rgba(231, 76, 60, 0.12);
    border:       1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    max-width:    900px;
    margin-left:  auto;
    margin-right: auto;
}

@media (max-width: 680px) {
    .slb-quick-inner     { padding: 16px; }
    .slb-quick-heading   { width: 100%; margin: 0 0 14px; }
    .slb-quick-steps     { width: 100%; }
    .slb-quick-step      { min-width: 100%; padding: 10px 0; }
    .slb-quick-divider   { width: 100%; height: 1px; background: rgba(180,80,255,0.2); }
    .slb-quick-btn       { width: 100%; margin: 14px 0 0; text-align: center; justify-content: center; }
}