/* =========================================================
   Easy My Storage – Booking flow styles
   Brand palette: warm brown logo theme
   ========================================================= */

:root {
    --bg:           #FBF8F5;          /* warm off-white page bg */
    --sidebar:      #2B1810;          /* deep brown sidebar */
    --sidebar-2:    #3A2418;          /* slightly lighter brown */
    --card:         #ffffff;
    --text:         #1F1208;          /* near-black warm */
    --muted:        #6B5A4A;          /* warm muted */
    --muted-light:  #A99987;
    --border:       #EADFD2;          /* warm border */
    --orange:       #8B4513;          /* PRIMARY brand brown */
    --orange-hover: #6F3610;
    --orange-soft:  #FBF1E6;          /* cream tint */
    --green:        #10b981;
    --green-soft:   #d1fae5;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Layout shell ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.booking-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    max-width: 100%;
    box-sizing: border-box;
}

.booking-card {
    width: 100%;
    max-width: 1180px;
    background: var(--card);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 640px;
    box-sizing: border-box;
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--sidebar);
    color: #fff;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand-logo svg { display: block; }

.brand-logo-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}

.brand-tagline {
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #D4A574;
    margin-top: 3px;
    font-weight: 500;
}
.brand-tagline strong { color: #E8B981; font-weight: 700; }

.brand-tag {
    font-size: 13px;
    color: #D4C4B5;
    line-height: 1.5;
    margin: 0 0 28px 0;
}

.progress-label,
.almost-done-title {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #A99987;
    margin-bottom: 18px;
    font-weight: 600;
}

.almost-done { margin-bottom: 18px; }
.almost-done p {
    font-size: 14px;
    color: #D4C4B5;
    line-height: 1.55;
    margin: 0;
}

.progress {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    position: relative;
    min-height: 56px;
}

.progress-item + .progress-item::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 19px;
    width: 2px;
    height: 16px;
    background: #8B4513;
    opacity: 0.6;
}

.progress-item.progress-todo + .progress-item.progress-todo::before,
.progress-item.progress-todo::before { display: none; }

.progress-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3A2418;
    color: #A99987;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.progress-active .progress-dot {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.progress-done .progress-dot {
    background: var(--orange);
    color: #fff;
}

.progress-text { display: flex; flex-direction: column; line-height: 1.3; }
.progress-text strong { font-size: 14px; font-weight: 600; }
.progress-text span { font-size: 12px; color: #A99987; margin-top: 2px; }
.progress-todo .progress-text strong { color: #D4C4B5; }

.sidebar-divider {
    border-top: 1px solid #3A2418;
    margin: 28px 0 22px;
}

.features {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: auto;
}

.features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.features li div { display: flex; flex-direction: column; line-height: 1.3; }
.features li strong { font-size: 14px; font-weight: 600; }
.features li span { font-size: 12px; color: #A99987; margin-top: 2px; }

/* Mobile-only features strip rendered AFTER .main (hidden on desktop) */
.features-bar { display: none; }

/* ---------- Marketing sidebar (confirmation page) ---------- */
.why-label {
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #D4A574;
    font-weight: 600;
    margin: 0 0 14px;
}
.why-list { margin-top: 0 !important; }
.why-list li { align-items: flex-start; gap: 12px; padding: 8px 0; }
.why-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3A2418;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-block { text-align: center; padding: 4px 0 2px; }
.stars { display: flex; justify-content: center; gap: 3px; margin-bottom: 8px; }
.trust-text { font-size: 13px; color: #F7EDE2; margin: 0; font-weight: 500; }
.testimonial {
    margin: 18px 0 0;
    padding: 16px 16px 14px;
    background: #3A2418;
    border-radius: 10px;
    color: #F7EDE2;
    font-style: italic;
    position: relative;
}
.testimonial-quote {
    position: absolute;
    top: -4px;
    left: 10px;
    font-size: 36px;
    color: #D4A574;
    font-style: normal;
    line-height: 1;
}
.testimonial p { margin: 8px 0 10px; font-size: 13px; line-height: 1.5; }
.testimonial cite { color: #D4A574; font-size: 12px; font-style: normal; font-weight: 600; }

/* Mobile-only marketing block placed below the booking-card (.booking-page).
   Hidden by default; shown only on phones (see @media max-width:768px). */
.mobile-marketing-bottom { display: none; }

/* ---------- Main content ---------- */
.main {
    padding: 36px 44px 32px;
    display: flex;
    flex-direction: column;
}

.main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.main-title { font-size: 20px; font-weight: 700; margin: 0; }

.step-pill {
    background: #FBF1E6;
    color: #5C4438;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.main-body { padding-top: 26px; flex: 1; }

.section-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.section-sub   { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 10px;
}

.field-label .optional { color: var(--muted); font-weight: 400; }

/* ---------- Service tiles (Step 1) ---------- */
.services {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.service-tile {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 96px;
}

.service-tile svg { stroke: #5C4438; }
.service-tile span { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.2; }
.service-tile:hover { border-color: #D4C4B5; }
.service-tile.selected {
    border-color: var(--orange);
    background: var(--orange-soft);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
}
.service-tile.selected svg { stroke: var(--orange); }
.service-tile.selected span { color: var(--orange); }

/* ---------- Inputs ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row.single { grid-template-columns: 1fr; }

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.input-wrap:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
}
.input-wrap svg { color: #A99987; margin: 0 12px; flex-shrink: 0; transition: color 0.15s; pointer-events: none; }
.input-wrap:focus-within svg { color: var(--orange); }
.input-wrap.is-valid { border-color: #16a34a; }
.input-wrap.is-valid svg { color: #16a34a; }
.input-wrap.is-error { border-color: #dc2626; }
.input-wrap.is-error svg { color: #dc2626; }
/* Buttons inside .input-wrap (e.g. pin clear) must remain clickable */
.input-wrap button { pointer-events: auto; }
.input-wrap input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 13px 12px 13px 0;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}
.input-wrap input::placeholder { color: #A99987; }

.input-wrap .prefix {
    padding: 13px 14px;
    border-right: 1.5px solid var(--border);
    background: #FBF1E6;
    color: var(--muted);
    font-size: 14px;
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.input-wrap .prefix svg { margin: 0; pointer-events: none; flex-shrink: 0; }
.input-wrap.with-prefix input { padding-left: 12px; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: var(--orange);
    color: #fff;
    width: 100%;
}
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:disabled { background: #E8D5C0; cursor: not-allowed; }
.btn-primary.is-disabled {
    background: #E8D5C0;
    color: #A0866F;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-primary.is-disabled:hover { background: #E8D5C0; }

/* Step 3: inline warning shown when user tries to continue without selection */
.schedule-warning {
    display: none;
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #FDECEA;
    border: 1px solid #F5C6C0;
    color: #B12C20;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
}
.schedule-warning.show { display: block; }

.btn-secondary {
    background: #fff;
    color: var(--text);
    border: 1.5px solid var(--border);
    min-width: 110px;
}
.btn-secondary:hover { background: #FBF1E6; }

.actions {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 24px;
}
.actions.single { justify-content: stretch; }
.actions.split  .btn-primary { flex: 1; }

/* ---------- Step 2: addresses ---------- */
.section-sublabel {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted-light);
    font-weight: 600;
    margin: 0 0 12px;
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.address-card {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    transition: all 0.15s;
}
.address-card:hover { border-color: #C9A989; }
.address-card.selected {
    border-color: var(--orange);
    background: var(--orange-soft);
}
.address-card .address-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F5EADC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.address-card.selected .address-icon { background: #fff; }
.address-card.selected .address-icon svg { stroke: var(--orange); }
.address-info { flex: 1; min-width: 0; }
.address-info strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.address-card.selected .address-info strong { color: var(--orange); }
.address-info span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.address-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange);
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.address-card.selected .address-check { display: flex; }

.add-address {
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    transition: all 0.15s;
}
.add-address:hover { border-color: var(--orange); background: var(--orange-soft); }
.add-address .plus {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.add-address strong { display: block; font-size: 15px; font-weight: 600; }
.add-address span  { display: block; font-size: 13px; color: var(--muted); }

/* manual-entry form (hidden until "Add New Address" clicked) */
.manual-address { margin-top: 14px; display: none; }
.manual-address.open { display: block; }
.manual-address textarea {
    width: 100%;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 90px;
    outline: 0;
}
.manual-address textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15); }

/* ---------- Step 3: schedule ---------- */
.schedule-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 22px 0 14px;
}
.schedule-label:first-child { margin-top: 0; }
.schedule-label svg { color: var(--orange); }

.date-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.date-tile, .slot-tile {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: all 0.15s;
    font-family: inherit;
}
.date-tile span { display: block; font-size: 12px; color: var(--muted); }
.date-tile strong { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.date-tile.other {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    gap: 6px;
    font-size: 14px;
}
.date-tile:hover, .slot-tile:hover { border-color: #C9A989; }
.date-tile.selected, .slot-tile.selected {
    border-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange);
}
.date-tile.selected span { color: var(--orange); }

/* Slots that have already passed for same-day pickup */
.slot-tile.is-disabled,
.slot-tile:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #f4f1ed;
    border-color: var(--line, #e6ddd2);
    color: var(--muted, #9a8c7c);
    pointer-events: none;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.slot-tile { font-size: 14px; font-weight: 500; padding: 14px 6px; }

/* ---------- Step 4: review ---------- */
.review-card {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}
.review-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.review-row:last-child { border-bottom: 0; }
.review-icon {
    width: 38px;
    height: 38px;
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.review-text { flex: 1; }
.review-text small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.review-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); }

/* Long address truncation \u2014 clamp to 2 lines on phones, leave intact on desktop.
   Full address is exposed via the strong[title] tooltip on hover/long-press. */
.review-address { word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .review-address {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.35;
        max-height: calc(1.35em * 2);
    }
}
.review-edit {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}
.review-edit:hover { background: #FBF1E6; color: var(--text); }

.review-trust {
    display: flex;
    justify-content: center;
    gap: 28px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
}
.review-trust span { display: inline-flex; align-items: center; gap: 6px; }
.review-trust .check { color: var(--green); font-weight: 700; }

.secure-note {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ---------- Step 5: confirmation + payment ---------- */
.confirm-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.confirm-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--green-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.confirm-icon svg { color: var(--green); }

.confirm-title { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.confirm-message { color: var(--muted); font-size: 14px; margin: 0 0 28px; max-width: 440px; line-height: 1.5; }

.payment-box {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    width: 100%;
    max-width: 480px;
}
.payment-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    text-align: left;
}
.payment-head .pay-icon {
    width: 42px;
    height: 42px;
    color: var(--orange);
    flex-shrink: 0;
}
.payment-head strong { display: block; font-size: 15px; font-weight: 700; }
.payment-head span  { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.payment-divider {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin: 16px 0 6px;
    font-weight: 500;
}

.later-link {
    display: block;
    text-align: center;
    color: var(--muted-light);
    font-size: 12px;
    margin-top: 4px;
    text-decoration: none;
}

.sms-pill {
    margin-top: 26px;
    padding: 10px 18px;
    background: #FBF1E6;
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Post-payment success page ---------- */
.confetti {
    position: relative;
    width: 0;
    height: 0;
    margin: 6px auto 14px;
}
.confetti .c {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    opacity: 0.85;
}
.confetti .c1 { left: -70px; top: 8px;  background: #F59E0B; transform: rotate(20deg); }
.confetti .c2 { left: -56px; top: -18px; background: #8B4513; width: 5px; height: 5px; border-radius: 50%; }
.confetti .c3 { left: -34px; top: 26px;  background: #D4A574; transform: rotate(-25deg); }
.confetti .c4 { left: -10px; top: -28px; background: #10B981; width: 6px; height: 6px; border-radius: 50%; }
.confetti .c5 { left:  18px; top: -6px;  background: #F97316; transform: rotate(40deg); }
.confetti .c6 { left:  40px; top: 22px;  background: #8B4513; }
.confetti .c7 { left:  60px; top: -20px; background: #D4A574; width: 5px; height: 5px; border-radius: 50%; }
.confetti .c8 { left:  78px; top: 10px;  background: #F59E0B; transform: rotate(-15deg); }
.confetti .c9 { left: -90px; top: 30px;  background: #10B981; transform: rotate(10deg); width: 5px; height: 5px; }

.success-tick {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 10px 22px rgba(16,185,129,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.booking-id-card {
    width: 100%;
    max-width: 380px;
    background: #FBF1E6;
    border: 1px solid #EADFD2;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 6px 0 24px;
    text-align: center;
}
.booking-id-label {
    display: block;
    font-size: 12px;
    color: #6B5A4A;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.booking-id-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.booking-id-value {
    font-size: 20px;
    font-weight: 700;
    color: #1F1208;
    letter-spacing: 1px;
    font-feature-settings: "tnum";
}
.booking-id-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #EADFD2;
    background: #fff;
    color: #8B4513;
    cursor: pointer;
    transition: all .15s ease;
}
.booking-id-copy:hover { background: #8B4513; color: #fff; border-color: #8B4513; }
.booking-id-copy.copied { background: #10B981; color: #fff; border-color: #10B981; }

.summary-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.summary-cell {
    border: 1px solid #EADFD2;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #FBF1E6;
    color: #8B4513;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.summary-text { display: flex; flex-direction: column; }
.summary-label {
    font-size: 11px;
    color: #6B5A4A;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.summary-text strong { font-size: 14px; font-weight: 600; color: #1F1208; line-height: 1.35; }

.next-strip {
    width: 100%;
    background: #FBF8F5;
    border: 1px solid #EADFD2;
    border-radius: 12px;
    padding: 14px 14px 16px;
    margin-bottom: 20px;
}
.next-title {
    font-size: 13px;
    font-weight: 700;
    color: #1F1208;
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: 0.2px;
}
.next-flow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}
.next-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.next-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #8B4513;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EADFD2;
}
.next-icon svg { width: 18px; height: 18px; }
.next-step span {
    font-size: 12px;
    color: #1F1208;
    line-height: 1.35;
    text-align: center;
    font-weight: 500;
}
.next-arrow {
    color: #D4A574;
    font-size: 18px;
    align-self: center;
    margin-top: 14px;
    flex-shrink: 0;
}

.confirm-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
    max-width: 360px;
}
.confirm-actions .btn-primary,
.confirm-actions .btn-secondary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    font-size: 14px;
}

.support-line {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B5A4A;
}
.support-line a {
    color: #8B4513;
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}
.support-line a:hover { text-decoration: underline; }

/* ---------- Promise strip (3 quick assurances) ---------- */
.promise-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0 24px;
}
.promise-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 10px;
    color: #065F46;
    text-align: left;
}
.promise-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.promise-text { display: flex; flex-direction: column; line-height: 1.25; }
.promise-text strong { font-size: 13px; color: #065F46; font-weight: 700; }
.promise-text span { font-size: 12px; color: #047857; }

/* ---------- Next-step numbered badges + titles ---------- */
.next-step { position: relative; flex-direction: column; gap: 6px; }
.next-icon { position: relative; }
.next-step .next-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #8B4513;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.next-step-title {
    font-size: 12.5px;
    color: #1F1208;
    font-weight: 700;
    margin-top: 2px;
}
.next-step-sub {
    font-size: 11px;
    color: #6B5544;
    line-height: 1.35;
    max-width: 140px;
}

/* ---------- KYC CTA with subtext ---------- */
.cta-kyc {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    padding: 14px 22px !important;
}
.cta-kyc .cta-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
}
.cta-kyc .cta-sub {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
}

/* ---------- Support card ---------- */
.support-card {
    margin-top: 24px;
    padding: 18px 20px;
    background: #FBF1E6;
    border: 1px solid #EADFD2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.support-card-left { display: flex; align-items: center; gap: 12px; }
.support-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #8B4513;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EADFD2;
}
.support-card-left strong { display: block; color: #1F1208; font-size: 14px; font-weight: 700; }
.support-card-left span { display: block; color: #6B5544; font-size: 13px; }
.support-card-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8B4513;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.support-link:hover { text-decoration: underline; }
.support-link-wa { color: #6F3610; }

/* ---------- Trust strip ---------- */
.trust-strip {
    margin-top: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #EADFD2;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 8px;
}
.trust-item strong { display: block; color: #1F1208; font-size: 13px; font-weight: 700; }
.trust-item span { display: block; color: #6B5544; font-size: 11px; }

/* ---------- Thank-you pill ---------- */
.thanks-pill {
    margin: 22px auto 0;
    padding: 12px 22px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 999px;
    color: #065F46;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    line-height: 1.4;
}
@media (max-width: 560px) {
    .thanks-pill {
        border-radius: 14px;
        padding: 12px 18px;
        font-size: 13px;
        width: auto;
    }
}
.thanks-emoji { font-size: 16px; }

/* ---------- Desktop: lock the card to the viewport, scroll only the form ---------- */
/* On desktop the booking card stays as a fixed-size rectangle on screen and
   the white form area scrolls internally. This prevents very long forms
   (step 2, KYC vehicle entries, etc.) from making the whole page taller
   than the viewport. KYC pages don't use .booking-card so they're unaffected. */
@media (min-width: 961px) {
    .booking-page {
        height: 100vh;
        max-height: 100vh;
        padding: 24px;
        overflow: hidden;
    }
    .booking-card {
        height: 100%;
        max-height: 100%;
        min-height: 0;
    }
    .sidebar {
        overflow-y: auto;
    }
    .main {
        overflow-y: auto;
        min-height: 0;
        padding: 0 44px 32px;     /* top padding moved into .main-head */
    }
    /* Step header stays pinned at the top while the form scrolls below.
       Fully opaque background + soft shadow keep scrolling form content
       from showing through. */
    .main-head {
        position: sticky;
        top: 0;
        background: var(--card);
        z-index: 5;
        margin: 0 -44px;
        padding: 28px 44px 18px;
        box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.18);
    }
    .main-body { padding-top: 22px; }
    /* Slim, neutral scrollbars */
    .main::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar { width: 8px; }
    .main::-webkit-scrollbar-thumb,
    .sidebar::-webkit-scrollbar-thumb { background: rgba(91, 68, 56, 0.25); border-radius: 4px; }
    .main::-webkit-scrollbar-thumb:hover,
    .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(91, 68, 56, 0.45); }
    .main, .sidebar { scrollbar-width: thin; scrollbar-color: rgba(91,68,56,.25) transparent; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .booking-card { grid-template-columns: 1fr; }
    .sidebar { padding: 24px; }
    .main { padding: 28px 24px; }
    .services { grid-template-columns: repeat(3, 1fr); }
    .slot-grid { grid-template-columns: repeat(2, 1fr); }
    .date-grid { grid-template-columns: repeat(2, 1fr); }
    .address-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* Tablet portrait / large phone landscape */
@media (max-width: 768px) {
    body { padding: 12px; }
    .booking-card { border-radius: 14px; }
    .sidebar { padding: 20px; }
    .main { padding: 24px 20px; }
    .main-title { font-size: 20px; }
    .section-title { font-size: 18px; }
    .services { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .service-tile { padding: 14px 8px; }
    .service-tile strong { font-size: 12.5px; }
    .summary-cell { padding: 12px; }
    .summary-text strong { font-size: 13px; }
    .next-step span { font-size: 11.5px; }
    .promise-strip { grid-template-columns: 1fr; gap: 8px; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .next-step-sub { max-width: 110px; font-size: 10.5px; }

    /* Confirmation page: stack the "what happens next" flow vertically from
       tablet down — 4 columns + 3 arrows was getting too cramped. */
    .confirm-wrap { padding: 24px 4px 6px; }
    .confirm-title { font-size: 22px; }
    .summary-grid { grid-template-columns: 1fr; gap: 10px; }
    .summary-cell { flex-direction: row; align-items: center; gap: 12px; }
    .next-flow { flex-direction: column; align-items: stretch; gap: 10px; }
    .next-flow > .next-step {
        flex-direction: row;
        gap: 12px;
        text-align: left;
        justify-content: flex-start;
        align-items: center;
    }
    .next-flow > .next-step .next-icon { width: 38px; height: 38px; flex-shrink: 0; }
    .next-flow > .next-step .next-step-title { font-size: 13px; margin-top: 0; }
    .next-flow > .next-step .next-step-sub { max-width: none; font-size: 12px; }
    .next-flow > .next-arrow { display: none; }
    .cta-kyc .cta-main { font-size: 14px; gap: 8px; flex-wrap: wrap; }

    /* ----- Mobile reorder: form first (features bar hidden on mobile) ----- */
    .features-bar { display: none; }
    /* Hide the in-sidebar features (and its divider) on mobile, BUT keep
       marketing-mode why-list + testimonial visible. */
    .sidebar:not(.sidebar-marketing) .features,
    .sidebar:not(.sidebar-marketing) .sidebar-divider { display: none; }
    /* On mobile, hide the WHY CHOOSE US block on the confirmation page */
    .sidebar-marketing .why-label,
    .sidebar-marketing .why-list,
    .sidebar-marketing .sidebar-divider { display: none; }
    /* Mobile: also pull trust-block + testimonial out of the sidebar header
       (handled by the .mobile-marketing-bottom section below the card). */
    .sidebar-marketing .trust-block,
    .sidebar-marketing .testimonial { display: none; }
    /* Show the moved-to-bottom marketing block on phones only. Uses the same
       dark-brown palette as the sidebar so it visually feels like a continuation. */
    .mobile-marketing-bottom {
        display: block;
        margin-top: 14px;
        padding: 22px 22px 20px;
        background: #2E1B0F;
        color: #F7EDE2;
        border-radius: 14px;
    }
    .mobile-marketing-bottom .stars { justify-content: center; margin-bottom: 8px; }
    .mobile-marketing-bottom .trust-text { text-align: center; font-size: 13px; color: #F7EDE2; margin: 0; font-weight: 500; }
    .mobile-marketing-bottom .testimonial { margin-top: 16px; }
    /* Tighten spacing now that the why-list is gone */
    .sidebar-marketing { padding-bottom: 18px; }
    .sidebar-marketing .brand-tag { margin-bottom: 14px; }
    .sidebar-marketing .trust-block { padding-top: 0; }
    .sidebar-marketing .testimonial { margin-top: 12px; }

    /* Compact, horizontal BOOKING PROGRESS bar on mobile */
    .sidebar { padding-bottom: 18px; }
    .sidebar .brand-tag { margin-bottom: 14px; }
    .progress-label { margin-bottom: 10px; font-size: 11px; letter-spacing: 1.5px; }
    .progress {
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
        align-items: flex-start;
    }
    .progress-item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 0;
        margin: 0;
        min-height: 0;
        position: relative;
    }
    /* Kill the desktop vertical connector */
    .progress-item + .progress-item::before { display: none; }
    /* Horizontal connector line between dots */
    .progress-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 13px;
        left: calc(50% + 18px);
        right: calc(-50% + 18px);
        height: 2px;
        background: #3A2418;
        z-index: 0;
    }
    .progress-item.progress-done:not(:last-child)::after {
        background: var(--orange, #D4A574);
    }
    .progress-dot {
        width: 28px;
        height: 28px;
        font-size: 13px;
        z-index: 1;
        position: relative;
    }
    .progress-text { align-items: center; }
    .progress-text strong { font-size: 12px; line-height: 1.1; }
    .progress-text span { display: none; }
}

/* Typical phone */
@media (max-width: 560px) {
    body { padding: 0; }
    .booking-page { padding: 12px; }
    .booking-card {
        border-radius: 14px;
        min-height: auto;
    }
    .sidebar { padding: 18px 18px 22px; }
    .main { padding: 22px 16px 28px; }

    .brand-logo, .brand-logo-img { width: 48px; height: 48px; }
    .brand-name { font-size: 15px; }
    .brand-tagline { font-size: 12px; }

    .main-head { flex-wrap: wrap; gap: 8px; }
    .main-title { font-size: 19px; }
    .step-pill { font-size: 11px; padding: 5px 10px; }

    .section-title { font-size: 17px; }
    .section-sub { font-size: 13px; }

    .services { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .service-tile { padding: 16px 10px; min-height: 76px; }
    .service-tile svg { width: 26px; height: 26px; }
    .service-tile strong { font-size: 13px; }

    .slot-grid { grid-template-columns: repeat(2, 1fr); }
    .date-grid  { grid-template-columns: repeat(2, 1fr); }

    .input-wrap { padding: 2px 12px; }
    .input-wrap input,
    .input-wrap select,
    .select-wrap select { font-size: 16px; padding: 13px 0; }
    /* font-size 16px on inputs prevents iOS Safari from zooming on focus */

    .btn-primary { padding: 14px 18px; font-size: 15px; min-height: 48px; }

    .address-card { padding: 14px; }
    .type-segmented { gap: 10px; }
    .type-card { padding: 12px 10px; font-size: 13.5px; }

    .lift-segmented { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    .lift-options { align-self: stretch; justify-content: space-between; width: 100%; padding: 2px; }
    .lift-opt { flex: 1; text-align: center; }
    .lift-opt span { display: block; padding: 7px 10px; font-size: 13px; }

    .form-section-label { font-size: 10.5px; }

    .confirm-icon svg { width: 44px; height: 44px; }
    .confirm-title { font-size: 22px; }
    .confirm-message { font-size: 14px; }
    .payment-box { padding: 18px 16px; }

    /* Post-payment success — stack on phone */
    .success-tick { width: 68px; height: 68px; }
    .success-tick svg { width: 36px; height: 36px; }
    .summary-grid { grid-template-columns: 1fr; gap: 10px; }
    .summary-cell { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
    .summary-icon { width: 38px; height: 38px; flex-shrink: 0; }
    .next-flow { flex-direction: column; align-items: stretch; gap: 8px; }
    .next-flow > .next-step { flex-direction: row; gap: 12px; text-align: left; justify-content: flex-start; }
    .next-flow > .next-step span { text-align: left; font-size: 13px; }
    .next-flow > .next-step .next-step-sub { max-width: none; font-size: 12px; }
    .next-flow > .next-step .next-step-title { font-size: 13px; margin-top: 0; }
    .next-flow > .next-step .next-icon { width: 36px; height: 36px; flex-shrink: 0; }
    .next-flow > .next-arrow { display: none; }
    .confirm-actions { grid-template-columns: 1fr; }
    .booking-id-card { max-width: 100%; }
    .booking-id-value { font-size: 18px; }

    .promise-strip { grid-template-columns: 1fr; gap: 10px; }
    .trust-strip { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
    .support-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .support-card-right { justify-content: space-between; gap: 10px; }
    .thanks-pill { font-size: 13px; padding: 10px 16px; text-align: center; }

    .features-list li { font-size: 13px; }
    .progress-step .step-text strong { font-size: 13px; }
    .progress-step .step-text span { font-size: 11.5px; }
}

/* Small phones (iPhone SE, older Androids) */
@media (max-width: 380px) {
    .sidebar { padding: 16px 14px 18px; }
    .main { padding: 18px 14px 24px; }

    .brand { gap: 10px; }
    .brand-logo, .brand-logo-img { width: 42px; height: 42px; }
    .brand-name { font-size: 14px; }

    .main-title { font-size: 17px; }
    .section-title { font-size: 16px; }

    /* Confirmation page: ultra-compact on tiny screens */
    .confirm-wrap { padding: 18px 0 4px; }
    .confirm-title { font-size: 19px; line-height: 1.25; }
    .success-tick { width: 60px; height: 60px; margin-bottom: 14px; }
    .success-tick svg { width: 30px; height: 30px; }
    .booking-id-card { padding: 12px 14px; margin-bottom: 18px; }
    .booking-id-value { font-size: 16px; letter-spacing: 0.5px; }
    .summary-cell { padding: 10px 12px; gap: 10px; }
    .summary-icon { width: 32px; height: 32px; }
    .summary-icon svg { width: 16px; height: 16px; }
    .summary-text strong { font-size: 12.5px; }
    .next-strip { padding: 12px 12px 14px; }
    .next-title { font-size: 12.5px; }
    .next-step-title { font-size: 12.5px; }
    .next-step-sub { font-size: 11px; }
    .cta-kyc { padding: 12px 14px !important; }
    .cta-kyc .cta-main { font-size: 13px; gap: 6px; }
    .cta-kyc .cta-sub { font-size: 11px; }
    .trust-strip { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
    .trust-item { padding: 8px 10px; }
    .thanks-pill { font-size: 12px; padding: 9px 12px; }
    .support-line { font-size: 12.5px; }

    .services { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .service-tile { padding: 12px 8px; }
    .service-tile strong { font-size: 12px; }

    .slot-grid { grid-template-columns: 1fr; }
    .date-grid  { grid-template-columns: repeat(2, 1fr); }

    .btn-primary { padding: 13px 14px; font-size: 14px; }
}

/* --- Step 2 additions: select wrap, lift toggle, divider, hints --- */
.select-wrap { padding: 0; }
.select-wrap select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 16px;
    font: inherit;
    color: #1F1208;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A99987' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

.lift-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
    padding: 12px 14px;
    background: #FBF1E6;
    border: 1px solid #EADFD2;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #3A2418;
    font-weight: 500;
}
.lift-toggle input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #8B4513;
    cursor: pointer;
}

.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 22px 0 18px;
    color: #A99987;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #EADFD2;
}
.or-divider span { padding: 0 14px; }

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: #6B5A4A;
    min-height: 16px;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ---------- Step 2: manual-entry card (improved UX) ---------- */
.manual-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: 0 1px 2px rgba(43, 24, 16, 0.04);
}

/* ---------- Step 2: collapsible "Add a new address" wrapper ---------- */
.manual-collapse { padding: 0; overflow: hidden; }
.manual-collapse-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.manual-collapse-head::-webkit-details-marker { display: none; }
.manual-collapse-head::marker { content: ''; }
.manual-collapse-text { flex: 1 1 auto; min-width: 0; }
.manual-collapse-text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.manual-collapse-text span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}
.manual-collapse-chevron {
    flex: 0 0 auto;
    color: #8B4513;
    display: flex;
    align-items: center;
    transition: transform .2s ease;
}
.manual-collapse[open] .manual-collapse-chevron { transform: rotate(90deg); }
.manual-collapse[open] .manual-collapse-head { border-bottom: 1px solid var(--border); }
.manual-collapse-body { padding: 18px 22px 20px; }

/* ---------- Step 2: Self-drop option card (skip pickup) ---------- */
.selfdrop-card { margin: 4px 0 14px; }
.selfdrop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff8ef 0%, #f7e9d5 100%);
    border: 1.5px solid #D4A574;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    color: #2B1810;
    font-family: inherit;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    box-shadow: 0 1px 2px rgba(43, 24, 16, 0.04);
}
.selfdrop-btn:hover {
    border-color: #8B4513;
    background: linear-gradient(135deg, #fff3e1 0%, #f2dcbb 100%);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.12);
    transform: translateY(-1px);
}
.selfdrop-btn:active { transform: translateY(0); }
.selfdrop-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8B4513;
    color: #fff;
    border-radius: 12px;
}
.selfdrop-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.selfdrop-text strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #2B1810;
    letter-spacing: -0.005em;
}
.selfdrop-text span {
    font-size: 12.5px;
    color: #6B5A4A;
    line-height: 1.4;
}
.selfdrop-arrow {
    flex: 0 0 auto;
    color: #8B4513;
    display: flex;
    align-items: center;
}
@media (max-width: 480px) {
    .selfdrop-btn { padding: 14px 14px; gap: 12px; }
    .selfdrop-icon { width: 40px; height: 40px; border-radius: 10px; }
    .selfdrop-text strong { font-size: 13.5px; }
    .selfdrop-text span { font-size: 11.5px; }
}

.manual-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.manual-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--orange-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.manual-card-head strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.manual-card-head span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.form-section-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted-light);
    font-weight: 700;
    margin: 6px 0 12px;
    text-transform: uppercase;
}
.form-section-label:not(:first-of-type) { margin-top: 18px; }

.field-label .optional {
    color: var(--muted-light);
    font-weight: 400;
    font-size: 12.5px;
    margin-left: 4px;
}

/* Pincode inline status badge */
.pin-badge {
    display: none;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.pin-badge.show { display: inline-flex; }
.pin-badge.loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: pinspin 0.7s linear infinite;
}
.pin-badge.success::before {
    content: "";
    width: 18px;
    height: 18px;
    background: #16a34a;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.pin-badge.error::before {
    content: "";
    width: 18px;
    height: 18px;
    background: #dc2626;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
@keyframes pinspin { to { transform: rotate(360deg); } }

/* Lift available – segmented toggle */
.lift-segmented {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--orange-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 4px;
}
.lift-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.lift-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.lift-label span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.lift-options {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    flex-shrink: 0;
}
.lift-opt {
    position: relative;
    cursor: pointer;
}
.lift-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.lift-opt span {
    display: inline-block;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 999px;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
    text-align: center;
}
.lift-opt input:checked + span {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 1px 3px rgba(43, 24, 16, 0.15);
}
.lift-opt:hover input:not(:checked) + span { color: var(--text); }

@media (max-width: 520px) {
    .lift-segmented { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    .lift-options { align-self: stretch; justify-content: space-between; width: 100%; padding: 2px; }
    .lift-opt { flex: 1; text-align: center; }
    .lift-opt span { display: block; padding: 7px 10px; font-size: 13px; }
}

/* Home/Office type picker — two big selectable cards */
.type-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.type-opt { position: relative; cursor: pointer; }
.type-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.type-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-weight: 600;
    transition: all 0.15s;
}
.type-card svg { color: var(--muted-light); transition: color 0.15s; }
.type-card strong { font-size: 14px; font-weight: 600; }
.type-opt:hover .type-card { border-color: #D4C4B5; }
.type-opt input:checked + .type-card {
    border-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.10);
}
.type-opt input:checked + .type-card svg { color: var(--orange); }
.type-opt input:focus-visible + .type-card { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Saved address card without a label — vertically center the address line */
.address-card.no-label .address-info {
    display: flex;
    align-items: center;
}
.address-card.no-label .address-info span {
    white-space: normal;
    font-size: 13.5px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   UNIVERSAL RESPONSIVE SAFETY (additive — does not change design)
   Catches edge cases on any screen size without overriding
   existing breakpoints / layouts.
   ========================================================= */

/* Prevent any element from causing horizontal page scroll.
   Use overflow-x: clip on html so mobile browsers' pull-to-refresh
   gesture (which relies on the document scroller) keeps working. */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }

/* Media never exceeds its container */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
svg { height: auto; }

/* Long unbroken strings (emails, URLs, tokens) wrap instead of overflowing */
p, span, strong, em, a, li, td, th, label, div { word-wrap: break-word; overflow-wrap: anywhere; }
/* Restore normal wrapping where breaking inside words is undesirable */
.main-title, .section-title, .confirm-title, .btn-primary, .step-pill,
.brand-name, .brand-tagline,
.progress-text strong, .progress-text span, .next-step-title { overflow-wrap: normal; word-break: normal; }

/* Flex/grid items: allow shrinking below content size when needed */
.main, .sidebar, .summary-cell, .next-step, .trust-item, .promise-row,
.address-info, .field-input, .input-wrap, .select-wrap { min-width: 0; }

/* Form controls never exceed their wrapper width */
input, select, textarea, button { max-width: 100%; }
textarea { resize: vertical; }

/* Tap-friendly minimum height on interactive controls (phones) */
@media (max-width: 560px) {
    button, .btn-primary, .btn-secondary, .type-card, .service-tile,
    .address-card, input[type="checkbox"] + label { min-height: 44px; }
    /* Lift toggle: label fills the pill so there's no empty space below the text */
    .lift-opt { display: flex; }
    .lift-opt span { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 38px; }
}

/* Landscape phones (short height) — reduce vertical padding so content fits */
@media (max-height: 500px) and (orientation: landscape) {
    .booking-page { padding: 12px; align-items: flex-start; }
    .booking-card { min-height: auto; }
    .sidebar { padding: 14px 18px; }
    .main { padding: 18px 20px; }
}

/* Extra-large desktops (1600px+) — page already centers the 1180px card; ensure body bg stays full-width and no stretching artifacts */
@media (min-width: 1600px) {
    .booking-page { padding: 60px 32px; }
}

/* Very small phones (<= 340px, e.g. iPhone 5/SE 1st gen) — tighten further */
@media (max-width: 340px) {
    .main-title { font-size: 16px; }
    .section-title { font-size: 15px; }
    .services { grid-template-columns: 1fr 1fr; gap: 6px; }
    .service-tile { padding: 10px 6px; }
    .service-tile strong { font-size: 11.5px; }
    .btn-primary { font-size: 13.5px; padding: 12px 12px; }
    .step-pill { font-size: 10.5px; padding: 4px 8px; }
}


/* =========================================================
   Inline field validation
   ========================================================= */
.req-star { color: #dc2626; margin-left: 2px; font-weight: 700; }

.field-error {
    color: #dc2626;
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 6px;
    min-height: 0;
    display: none;
}
.field-error.show, .field-error:not(:empty) { display: block; }

.services.is-error {
    border: 1px solid #dc2626;
    border-radius: 12px;
    padding: 8px;
    margin: -8px 0 8px;
}
@media (max-width: 560px) {
    .services.is-error { padding: 6px; }
}


/* Trust icons: uniform 28x28 square so all 4 visually match regardless of glyph */
.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.trust-icon svg { display: block; }

/* Full pickup address wraps cleanly */
.summary-text .summary-address {
    display: block;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* "What happens next?" — make sure all 4 columns are exactly equal width and text wraps cleanly */
.next-flow > .next-step {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
}
.next-step-title, .next-step-sub {
    display: block;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.next-step-sub { max-width: 100%; }


/* Pin badge — clickable to clear */
button.pin-badge {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
button.pin-badge:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 50%; }
button.pin-badge:hover::before { filter: brightness(0.9); }
button.pin-badge.error,
button.pin-badge.success { cursor: pointer; }
/* When in error state, hint that this is a CLEAR action via title tooltip */
button.pin-badge.error::after { content: ""; position: absolute; inset: -6px; }

/* ---------- Saved-address selectable radio indicator ---------- */
.address-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #C9A989;
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: all 0.15s;
}
.address-card.selected .address-radio {
    border-color: var(--orange);
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(139, 69, 19, 0.10);
}
.address-card.selected .address-radio::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}
.address-card:hover .address-radio { border-color: var(--orange); }
/* Hide the redundant green check pill — the radio carries the selected state now */
.address-card .address-check { display: none !important; }

/* ---------- Step 3: "Other" date — position picker over the button ---------- */
.date-other-wrap {
    position: relative;
    display: block;
    height: 100%;          /* fill the grid cell so it matches sibling tiles */
    min-height: 100%;
}
.date-tile.other {
    position: relative;
    width: 100%;
    height: 100%;          /* match preset tiles' height exactly */
    min-height: 100%;
    overflow: visible;
    /* Match preset tiles' two-line internal layout so heights agree */
    flex-direction: column;
    gap: 4px;
    padding: 14px 8px;
}
.date-other-wrap .date-other-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}
/* The native calendar-icon indicator is invisible but still occupies area;
   hide it to avoid an empty rectangle catching clicks weirdly. */
.date-other-wrap .date-other-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.date-tile.other.selected {
    border-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange);
}
.date-tile.other #date-other-label { display: inline-block; }

/* ---------- Custom calendar popup (replaces native date picker) ---------- */
.ems-cal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 9998;
}
.ems-cal-backdrop.show { display: block; }
.ems-cal-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    display: none;
    z-index: 9999;
    font-family: inherit;
}
.ems-cal-popup.show { display: block; }
.ems-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.ems-cal-head button {
    background: none; border: 0;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    font-family: inherit;
}
.ems-cal-head button:hover:not(:disabled) { background: var(--orange-soft); color: var(--orange); }
.ems-cal-head button:disabled { opacity: 0.3; cursor: not-allowed; }
.ems-cal-title { font-weight: 600; font-size: 14px; color: var(--text); }
.ems-cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; margin-bottom: 4px;
}
.ems-cal-dow span {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    padding: 4px 0;
    font-weight: 600;
    text-transform: uppercase;
}
.ems-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.ems-cal-day {
    background: none; border: 0;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    min-height: 34px;
    color: var(--text);
}
.ems-cal-day.other-month { color: transparent; cursor: default; }
.ems-cal-day:hover:not(:disabled):not(.other-month) {
    background: var(--orange-soft); color: var(--orange);
}
.ems-cal-day:disabled, .ems-cal-day.disabled {
    color: #ddd; cursor: not-allowed;
}
.ems-cal-day.today { font-weight: 700; }
.ems-cal-day.selected {
    background: var(--orange); color: #fff;
}
.ems-cal-day.selected:hover { background: var(--orange); color: #fff; }

@media (max-width: 640px) {
    .ems-cal-popup {
        position: fixed;
        top: 50%; left: 50%; right: auto;
        transform: translate(-50%, -50%);
        width: 320px;
        max-width: calc(100vw - 32px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    }
    .ems-cal-day { min-height: 38px; font-size: 14px; }
}

/* ---------- Trust-icon bump for visual parity ---------- */
.trust-icon {
    width: 32px;
    height: 32px;
}

/* ---------- "What happens next?" — equalise per-step heights so titles & subs line up ---------- */
.next-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px;
    align-items: stretch;
}
.next-flow > .next-arrow { display: none; } /* arrows hidden when laid out as grid */
.next-flow > .next-step {
    flex: unset;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    padding: 2px;
    gap: 6px;
}
.next-flow .next-step-title {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    font-size: 12.5px;
}
.next-flow .next-step-sub {
    display: block;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    min-height: 2.6em;
    line-height: 1.35;
    width: 100%;
    font-size: 11px;
}
/* Phones only — stack as a vertical list with side-by-side icon + text */
@media (max-width: 520px) {
    .next-flow { grid-template-columns: 1fr !important; gap: 10px; }
    .next-flow > .next-step { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 4px 2px; }
    .next-flow .next-step-title { min-height: 0; justify-content: flex-start; text-align: left; font-size: 13px; }
    .next-flow .next-step-sub { min-height: 0; text-align: left; font-size: 12px; max-width: none; }
}

/* ---------- Saved-address delete button ---------- */
.address-card { position: relative; }
.address-card .address-remove {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.9);
    color: #6B5544;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background .15s, color .15s, transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.address-card .address-remove:hover { background: #dc2626; color: #fff; transform: scale(1.05); }
.address-card .address-remove svg { display: block; }

/* ---------- Booking confirmed popup overlay ---------- */
.confirm-popup-backdrop {
    position: fixed; inset: 0;
    background: rgba(31,18,8,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.confirm-popup-backdrop.show { opacity: 1; pointer-events: auto; }
.confirm-popup {
    background: #fff;
    border-radius: 18px;
    max-width: 420px; width: 100%;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    transform: translateY(12px) scale(.97);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.confirm-popup-backdrop.show .confirm-popup { transform: translateY(0) scale(1); }
.confirm-popup-tick {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(16,185,129,.3);
    animation: cpop .45s cubic-bezier(.2,1.5,.4,1) .1s both;
}
@keyframes cpop { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.confirm-popup h2 { font-size: 22px; font-weight: 800; color: #1F1208; margin: 0 0 8px; letter-spacing: -.01em; }
.confirm-popup p  { font-size: 14px; color: #6B5A4A; margin: 0; line-height: 1.5; }
@media (max-width: 480px) {
    .confirm-popup { padding: 24px 18px 20px; }
    .confirm-popup h2 { font-size: 19px; }
}

/* ---------- Universal responsive safety ---------- */
@media (max-width: 480px) {
    .input-wrap .prefix { padding: 11px 12px; font-size: 13.5px; }
    .input-wrap .prefix svg { width: 14px; height: 14px; }
    .form-row { grid-template-columns: 1fr; gap: 14px; }
    .booking-card { border-radius: 16px; }
    .summary-grid { grid-template-columns: 1fr !important; }
    .promise-strip { grid-template-columns: 1fr !important; }
    .trust-strip { grid-template-columns: 1fr 1fr !important; }
}