/* ========================================================
   Clean Booking – Frontend Styles
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

#cb-booking-wrap {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px 60px;
    color: #1a1a2e;
}

/* ── Progress Bar ── */
.cb-progress {
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    margin-bottom: 10px;
    overflow: hidden;
}
.cb-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.cb-steps-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}
.cb-step-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    transition: color 0.3s;
}
.cb-step-label.active {
    color: #2563eb;
    font-weight: 700;
}

/* ── Layout ── */
.cb-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 768px) {
    .cb-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* Sidebar goes BELOW the form on mobile — no sticky */
    .cb-sidebar {
        order: 2 !important;
        position: static !important;
    }
    .cb-form-area {
        order: 1;
    }
}

/* ── Steps ── */
.cb-step { display: none; animation: cbFadeIn 0.3s ease; }
.cb-step.active { display: block; }
@keyframes cbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cb-step-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 24px;
    color: #111827;
}
.cb-optional {
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
}

/* ── Service Cards ── */
.cb-service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 768px) { .cb-service-cards { grid-template-columns: 1fr; } }

.cb-service-card {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    position: relative;
    background: #fff;
}
.cb-service-card:hover { border-color: #2563eb; transform: translateY(-2px); }
.cb-service-card.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cb-service-card input { display: none; }
.cb-svc-icon { font-size: 32px; margin-bottom: 8px; }
.cb-svc-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.cb-svc-desc { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.cb-svc-price { font-size: 13px; font-weight: 700; color: #2563eb; }

/* ── Frequency ── */
.cb-frequency-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}
.cb-freq-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cb-freq-option {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    transition: all 0.2s;
    background: #fff;
}
.cb-freq-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}
.cb-freq-option input { display: none; }
.cb-discount-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
}

/* ── Counters ── */
.cb-counter-row {
    display: -webkit-flex;
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cb-counter-group {
    display: block;
}
.cb-counter-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: #374151;
}
.cb-counter {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    border: 2px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    width: 148px;
    height: 48px;
    background: #fff;
    box-sizing: border-box;
}
/* Hard reset for theme button styles */
#cb-booking-wrap .cb-counter-btn,
#cb-booking-wrap .cb-counter-btn:focus,
#cb-booking-wrap .cb-counter-btn:active {
    display: block !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f3f4f6 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    cursor: pointer !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
}
#cb-booking-wrap .cb-counter-btn:hover {
    background: #dbeafe !important;
    color: #2563eb !important;
}
#cb-booking-wrap .cb-counter input[type="number"] {
    display: block !important;
    -webkit-flex: 1 !important;
    flex: 1 !important;
    width: 52px !important;
    height: 44px !important;
    border: none !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: #111827 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Hide number input arrows */
    -moz-appearance: textfield !important;
}
#cb-booking-wrap .cb-counter input[type="number"]::-webkit-inner-spin-button,
#cb-booking-wrap .cb-counter input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Fields ── */
.cb-field { margin-bottom: 18px; }
.cb-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cb-field input,
.cb-field select,
.cb-field textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    box-sizing: border-box;
    color: #111827;
}
.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.cb-field.cb-error input,
.cb-field.cb-error select,
.cb-field.cb-error textarea {
    border-color: #ef4444;
}
.cb-error-msg {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}
.cb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 768px) { .cb-form-row { grid-template-columns: 1fr; } }

/* ── Schedule ── */
.cb-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 4px;
}
@media (max-width: 768px) { .cb-schedule-grid { grid-template-columns: repeat(2,1fr); } }

/* ── Extras ── */
.cb-extras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 768px) { .cb-extras-grid { grid-template-columns: repeat(2,1fr); } }

/* ── Extras Grid — icon card style ── */
#cb-booking-wrap .cb-extras-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 14px !important;
}

/* ─── Checkbox Extra Card ─── */
#cb-booking-wrap label.cb-extra-card {
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 18px 12px 14px !important;
    cursor: pointer !important;
    display: -webkit-flex !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-flex-direction: column !important;
    align-items: center !important;
    -webkit-align-items: center !important;
    gap: 8px !important;
    transition: border-color .2s, background .2s, box-shadow .2s !important;
    position: relative !important;
    background: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    text-align: center !important;
}
#cb-booking-wrap label.cb-extra-card:hover {
    border-color: #2563eb !important;
    box-shadow: 0 2px 12px rgba(37,99,235,.08) !important;
}
#cb-booking-wrap label.cb-extra-card.cb-checked {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}
/* Hide native checkbox — extra aggressive to override any theme */
#cb-booking-wrap label.cb-extra-card input[type="checkbox"],
#cb-booking-wrap label.cb-extra-card input[type="checkbox"]:before,
#cb-booking-wrap label.cb-extra-card input[type="checkbox"]:after {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
/* Checkmark badge top-right */
#cb-booking-wrap .cb-extra-check-box {
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #d1d5db !important;
    background: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-weight: 800 !important;
    color: transparent !important;
    transition: all .2s !important;
}
#cb-booking-wrap label.cb-extra-card.cb-checked .cb-extra-check-box {
    background: #2563eb !important; border-color: #2563eb !important; color: #fff !important;
}

/* ─── Quantity Extra Card ─── */
#cb-booking-wrap .cb-extra-qty-card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    cursor: pointer;
    position: relative;
}
#cb-booking-wrap .cb-extra-qty-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 12px rgba(37,99,235,.08);
}
#cb-booking-wrap .cb-extra-qty-card.cb-active {
    border-color: #2563eb;
    background: #eff6ff;
    cursor: default;
}
/* Counter hidden by default — !important to override any theme */
#cb-booking-wrap .cb-extra-qty-card .cb-qty-controls {
    display: none !important;
}
#cb-booking-wrap .cb-extra-qty-card.cb-active .cb-qty-controls {
    display: flex !important;
}



/* ─── Shared elements ─── */
#cb-booking-wrap .cb-extra-icon {
    font-size: 36px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    display: block !important;
}
#cb-booking-wrap .cb-extra-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.3 !important;
}
#cb-booking-wrap .cb-extra-price-tag {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
}

/* ─── Qty controls ─── */
#cb-booking-wrap .cb-qty-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    margin-top: 2px !important;
}
#cb-booking-wrap .cb-extra-qty-card.cb-active .cb-qty-controls {
    border-color: #2563eb !important;
}
#cb-booking-wrap .cb-qty-btn {
    width: 32px !important; height: 32px !important;
    border: none !important; background: #f9fafb !important;
    font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important;
    color: #374151 !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
#cb-booking-wrap .cb-qty-btn:hover { background: #e5e7eb !important; }
#cb-booking-wrap .cb-extra-qty-card.cb-active .cb-qty-btn { background: #dbeafe !important; color: #1d4ed8 !important; }
#cb-booking-wrap .cb-qty-display {
    min-width: 28px !important; text-align: center !important;
    font-size: 14px !important; font-weight: 700 !important;
    color: #374151 !important; line-height: 32px !important;
    padding: 0 2px !important;
}

/* ── Navigation Buttons ── */
.cb-nav-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.cb-btn {
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.cb-btn-outline {
    background: transparent;
    border-color: #e5e7eb;
    color: #374151;
}
.cb-btn-outline:hover { border-color: #9ca3af; }
.cb-btn-primary {
    background: #2563eb;
    color: #fff;
}
.cb-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); }
.cb-btn-pay {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    padding: 14px 36px;
    font-size: 16px;
}
.cb-btn-pay:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(22,163,74,.35); }

/* ── Stripe Payment ── */
.cb-payment-summary {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 15px;
}
.cb-stripe-wrap {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    background: #fff;
}
#cb-payment-element { min-height: 60px; }
.cb-payment-message {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
.cb-payment-message.error { background: #fef2f2; color: #dc2626; }
.cb-payment-message.success { background: #f0fdf4; color: #16a34a; }

/* ── Sidebar / Price Card ── */
.cb-sidebar { position: sticky; top: 80px; }
@media (max-width: 768px) {
    .cb-sidebar { position: static !important; top: auto !important; }
}
.cb-price-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 24px;
}
.cb-price-card h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 18px;
    color: #111827;
}
.cb-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #6b7280;
    padding: 6px 0;
}
.cb-price-divider { border-top: 1px solid #f0f0f0; margin: 10px 0; }
.cb-total-row {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    padding-top: 10px;
}
.cb-discount-row { color: #16a34a; }

.cb-trust-badges { margin-top: 18px; border-top: 1px solid #f0f0f0; padding-top: 16px; }
.cb-trust-item { font-size: 13px; color: #374151; font-weight: 500; padding: 4px 0; }

/* ── Success Screen ── */
.cb-success {
    text-align: center;
    padding: 60px 20px;
    animation: cbFadeIn 0.5s ease;
}
.cb-success-icon { font-size: 64px; margin-bottom: 20px; }
.cb-success h2 { font-size: 32px; font-weight: 800; color: #111827; margin: 0 0 12px; }
.cb-success p { font-size: 16px; color: #6b7280; margin: 8px 0; }
.cb-success strong { color: #111827; }
.cb-success-sub { font-size: 14px; margin-top: 20px; }

/* ── Booked Slots ── */
#cb-time option:disabled,
#cb-time option.cb-slot-booked {
    color: #9ca3af !important;
    font-style: italic;
}

/* ── Recurring Badge ── */
.cb-recurring-badge {
    margin-top: 8px;
    padding: 8px 12px;
    background: #eff6ff;
    border-radius: 8px;
    font-size: 12px;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    line-height: 1.5;
}

/* ── Service Dropdown ── */
#cb-booking-wrap .cb-service-dropdown {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #111827 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 44px !important;
    box-sizing: border-box !important;
}
#cb-booking-wrap .cb-service-dropdown:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* ── Field Group Title ── */
.cb-field-group-title {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Frequency Buttons ── */
#cb-freq-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
#cb-booking-wrap .cb-freq-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #374151 !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1.4 !important;
}
#cb-booking-wrap .cb-freq-btn:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
}
#cb-booking-wrap .cb-freq-btn.active {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #fff !important;
}
#cb-booking-wrap .cb-freq-btn .cb-discount-badge {
    position: absolute !important;
    top: -8px !important;
    right: -6px !important;
    background: #16a34a !important;
    color: #fff !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
}

/* ── Dynamic sections fade-in ── */
#cb-frequency-section,
#cb-sqft-section,
#cb-rooms-section,
#cb-condition-section {
    animation: cbFadeIn 0.25s ease;
    margin-bottom: 20px;
}

/* ── Section visibility control (JS driven, theme-proof) ── */
.cb-section-hidden {
    display: none !important;
}

/* ── Service Dropdown ── */
#cb-booking-wrap select,
#cb-booking-wrap .cb-service-dropdown {
    width: 100% !important;
    padding: 14px 44px 14px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #111827 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    box-sizing: border-box !important;
    transition: border-color .2s !important;
}
#cb-booking-wrap select:focus,
#cb-booking-wrap .cb-service-dropdown:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* ── Frequency Buttons ── */
.cb-field-group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 12px;
}
#cb-freq-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
#cb-booking-wrap .cb-freq-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #374151 !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    line-height: 1.4 !important;
}
#cb-booking-wrap .cb-freq-btn:hover  { border-color: #2563eb !important; color: #2563eb !important; }
#cb-booking-wrap .cb-freq-btn.active { border-color: #2563eb !important; background: #2563eb !important; color: #fff !important; }
#cb-booking-wrap .cb-freq-btn .cb-discount-badge {
    position: absolute !important;
    top: -8px !important; right: -6px !important;
    background: #16a34a !important; color: #fff !important;
    font-size: 10px !important; font-style: normal !important; font-weight: 700 !important;
    padding: 2px 6px !important; border-radius: 99px !important; white-space: nowrap !important;
}

/* ── Partial home checkbox ── */
.cb-partial-home-wrap {
    margin-bottom: 8px;
}
.cb-partial-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    user-select: none !important;
}
.cb-partial-checkbox-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
/* Checkbox box — default unchecked state */
.cb-partial-checkbox-box {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    transition: all .2s !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}
/* Checked state — toggled via JS class */
.cb-partial-checkbox-box.cb-box-checked {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

#cb-exclude-rooms-section {
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 20px 20px;
    background: #fafafa;
}
.cb-exclude-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 14px;
}
.cb-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.cb-room-tile {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 8px 12px;
    cursor: pointer;
    text-align: center;
    background: #fff;
    transition: all .2s;
    user-select: none;
}
.cb-room-tile:hover        { border-color: #2563eb; }
.cb-room-tile.cb-checked   { border-color: #2563eb; background: #eff6ff; }
.cb-room-tile input        { position: absolute; opacity: 0; width: 0; height: 0; }
.cb-room-tile-icon         { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.cb-room-tile-label        { font-size: 12px; font-weight: 600; color: #374151; }

/* ── Schedule grid ── */
.cb-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ── Step divider (between merged sections) ── */
.cb-step-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 24px 0 0;
}

/* ── Qty card: same circle as checkbox card ── */
#cb-booking-wrap .cb-extra-qty-card .cb-extra-check-box {
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #d1d5db !important;
    background: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-weight: 800 !important;
    color: transparent !important;
    transition: all .2s !important;
    pointer-events: none !important;
}
#cb-booking-wrap .cb-extra-qty-card.cb-active .cb-extra-check-box {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* ── Info tooltip button ── */
#cb-booking-wrap .cb-extra-info {
    position: absolute !important;
    top: 7px !important; left: 7px !important;
    width: 18px !important; height: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid #9ca3af !important;
    background: transparent !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: default !important;
    z-index: 2 !important;
    line-height: 1 !important;
    transition: all .2s !important;
}
#cb-booking-wrap .cb-extra-info:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
}
/* Tooltip bubble */
#cb-booking-wrap .cb-extra-info::after {
    content: attr(data-tooltip) !important;
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1f2937 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    white-space: normal !important;
    width: 180px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
    pointer-events: none !important;
    z-index: 100 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
    text-align: left !important;
}
#cb-booking-wrap .cb-extra-info:hover::after {
    display: block !important;
}

/* ── Soonest Available Button — compact ── */
#cb-booking-wrap #cb-pick-soonest {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border: 1.5px solid #2563eb !important;
    border-radius: 99px !important;
    background: #fff !important;
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all .2s !important;
    margin-bottom: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}
#cb-booking-wrap #cb-pick-soonest:hover {
    background: #eff6ff !important;
}
#cb-booking-wrap #cb-pick-soonest:disabled {
    opacity: .6 !important;
    cursor: wait !important;
}
#cb-booking-wrap #cb-pick-soonest.cb-soonest-selected {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
    color: #15803d !important;
}
#cb-booking-wrap #cb-soonest-label {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ── OR divider ── */
#cb-booking-wrap .cb-schedule-or {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
#cb-booking-wrap .cb-schedule-or::before,
#cb-booking-wrap .cb-schedule-or::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #e5e7eb !important;
}

/* ── Payment Method Tabs ── */
#cb-booking-wrap .cb-pay-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
#cb-booking-wrap .cb-pay-tab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all .18s !important;
    font-family: inherit !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
#cb-booking-wrap .cb-pay-tab:hover {
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
#cb-booking-wrap .cb-pay-tab.cb-pay-tab-active {
    border-color: #2563eb !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* ── Cash/Check Info Panel ── */
#cb-booking-wrap .cb-offline-info {
    text-align: center !important;
    padding: 30px 20px !important;
    background: #f9fafb !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 14px !important;
}
#cb-booking-wrap .cb-offline-icon {
    font-size: 40px !important;
    margin-bottom: 12px !important;
}
#cb-booking-wrap .cb-offline-info h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 8px !important;
}
#cb-booking-wrap .cb-offline-info p {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
}
#cb-booking-wrap .cb-offline-info ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: left !important;
}
#cb-booking-wrap .cb-offline-info ul li {
    font-size: 14px !important;
    color: #374151 !important;
}

/* ── Stripe Card Element ── */
#cb-booking-wrap .StripeElement {
    padding: 12px 14px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: border-color .15s !important;
}
#cb-booking-wrap .StripeElement--focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
#cb-booking-wrap .StripeElement--invalid {
    border-color: #dc2626 !important;
}

/* ══════════════════════════════════════════
   MOBILE — full rewrite for screens ≤ 768px
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Base: prevent any horizontal overflow ── */
    #cb-booking-wrap {
        padding: 0 12px 40px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    #cb-booking-wrap * {
        box-sizing: border-box !important;
    }
    /* max-width only on block-level elements, not on absolutely positioned badges/icons */
    #cb-booking-wrap *:not([style*="position:absolute"]):not([style*="position: absolute"]) {
        max-width: 100% !important;
    }

    /* ── Progress labels: smaller font ── */
    #cb-booking-wrap .cb-step-label {
        font-size: 10px !important;
    }

    /* ── Step title ── */
    #cb-booking-wrap .cb-step-title {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    /* ── Service cards: 1 column ── */
    .cb-service-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── Form rows: always 1 column ── */
    .cb-form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Schedule: date & time stacked ── */
    #cb-booking-wrap .cb-schedule-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Extras: 2 compact columns ── */
    #cb-booking-wrap .cb-extras-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #cb-booking-wrap label.cb-extra-card {
        padding: 14px 8px 12px !important;
    }
    #cb-booking-wrap .cb-extra-icon {
        font-size: 28px !important;
    }
    #cb-booking-wrap .cb-extra-label {
        font-size: 12px !important;
    }
    #cb-booking-wrap .cb-extra-price {
        font-size: 12px !important;
    }

    /* ── Qty cards same compact sizing ── */
    #cb-booking-wrap .cb-extra-qty-card {
        padding: 14px 8px 12px !important;
    }

    /* Protect fixed-size elements from max-width override */
    #cb-booking-wrap .cb-extra-check-box,
    #cb-booking-wrap .cb-extra-info {
        max-width: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    #cb-booking-wrap .cb-partial-checkbox-box {
        max-width: none !important;
        min-width: 22px !important;
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    /* ── Price card ── */
    #cb-booking-wrap .cb-price-card {
        border-radius: 12px !important;
        padding: 16px !important;
    }

    /* ── Nav buttons: 2-column grid, full width ── */
    #cb-booking-wrap .cb-nav-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 14px 0 6px !important;
        margin-top: 16px !important;
        width: 100% !important;
    }
    #cb-booking-wrap .cb-nav-buttons > button:only-child {
        grid-column: 1 / -1 !important;
    }
    #cb-booking-wrap .cb-btn {
        width: 100% !important;
        padding: 13px 8px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── Book soonest button ── */
    #cb-booking-wrap #cb-pick-soonest {
        width: 100% !important;
        font-size: 13px !important;
        padding: 12px 16px !important;
    }

    /* ── Payment tabs ── */
    #cb-booking-wrap .cb-pay-tabs {
        gap: 8px !important;
    }
    #cb-booking-wrap .cb-pay-tab {
        padding: 11px 8px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }

    /* ── Inputs & selects ── */
    #cb-booking-wrap input,
    #cb-booking-wrap select,
    #cb-booking-wrap textarea {
        font-size: 16px !important; /* prevents iOS zoom-in on focus */
    }
}