/* ==========================================================================
   Booking page V2 skin — applies the salon-page-V2 design tokens
   (design_handoff_salon_booking, screens 3–4) over bookAppointment-index.css.
   Loaded ONLY in V2 mode (?design=v2 or PROVIDER_PAGE_V2_ENABLED); pure
   restyling of the existing DOM — no structural or JS-contract changes.
   ========================================================================== */

:root {
    /* Activates every existing var(--theme-color) hook in the base CSS. */
    --theme-color: #E50050;
    --bk2-pink: #E50050;
    --bk2-pink-dark: #C10045;
    --bk2-text: #1A1A1A;
    --bk2-muted: #8A8580;
    --bk2-surface-warm: #FBF5F1;
    --bk2-border-warm: #F1E7DF;
    --bk2-border: #ECE7E1;
    --bk2-shadow-btn: 0 6px 18px rgba(229, 0, 80, 0.4);
    --bk2-shadow-chip: 0 5px 14px rgba(229, 0, 80, 0.3);
    --bk2-font: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
}

#booking-app,
#booking-app button,
#booking-app input,
#booking-app label {
    font-family: var(--bk2-font);
}

#booking-app .form-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--bk2-text);
    letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   Service summary card
   -------------------------------------------------------------------------- */
#booking-app .service-summary-card {
    background: var(--bk2-surface-warm);
    border: 1px solid var(--bk2-border-warm);
    border-radius: 18px;
    box-shadow: none;
}

#booking-app .service-summary-card h1,
#booking-app .service-summary-card h2,
#booking-app .service-summary-card h3 {
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* --------------------------------------------------------------------------
   Radio option cards: variants, staff, add-on options
   -------------------------------------------------------------------------- */
#booking-app .variant-option,
#booking-app .agent-option,
#booking-app .add-service-option {
    border: 1px solid var(--bk2-border);
    border-radius: 13px;
    background: #fff;
}

#booking-app .variant-option.active,
#booking-app .agent-option.active,
#booking-app .add-service-option.active {
    border: 2px solid var(--bk2-pink);
    background: var(--bk2-surface-warm);
    box-shadow: none;
}

#booking-app .variant-option.active .variant-option-name,
#booking-app .variant-option.active .variant-option-meta,
#booking-app .agent-option.active .agent-option-label,
#booking-app .agent-option.active .agent-name {
    color: var(--bk2-pink-dark);
}

#booking-app .variant-option-radio,
#booking-app .agent-option-radio,
#booking-app .add-service-option-radio {
    border-color: #D0CAC3;
}

#booking-app .variant-option.active .variant-option-radio,
#booking-app .agent-option.active .agent-option-radio,
#booking-app .add-service-option.active .add-service-option-radio {
    border-color: var(--bk2-pink);
    background-color: var(--bk2-pink);
    box-shadow: inset 0 0 0 3px #fff;
}

#booking-app .agent-avatar.active {
    border-color: var(--bk2-pink);
}

/* --------------------------------------------------------------------------
   Date chips
   -------------------------------------------------------------------------- */
#booking-app .day-column {
    border: 1.5px solid var(--bk2-border);
    border-radius: 16px;
    background: #fff;
    background-image: none;
    color: var(--bk2-text);
    box-shadow: none;
}

#booking-app .day-column.active {
    background: var(--bk2-pink);
    background-image: none;
    border-color: var(--bk2-pink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(229, 0, 80, 0.35);
}

#booking-app .day-column.active .day-name,
#booking-app .day-column.active .day-date {
    color: #fff;
}

#booking-app .day-column.disabled,
#booking-app .day-column.closed {
    background: #F7F4F1;
    border-color: transparent;
    color: #C8C2BB;
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Time slots (mobile grid + desktop grouped)
   -------------------------------------------------------------------------- */
#booking-app .mobile-time-slot,
#booking-app .slots-grouped-container .time-slot,
#booking-app .slots-grouped-container button {
    border: 1.5px solid var(--bk2-border);
    border-radius: 12px;
    background: #fff;
    color: var(--bk2-text);
    font-weight: 700;
}

#booking-app .mobile-time-slot.selected,
#booking-app .mobile-time-slot.active,
#booking-app .slots-grouped-container .time-slot.selected,
#booking-app .slots-grouped-container .time-slot.active,
#booking-app .slots-grouped-container button.selected,
#booking-app .slots-grouped-container button.active {
    background: var(--bk2-pink);
    border-color: var(--bk2-pink);
    color: #fff;
    box-shadow: var(--bk2-shadow-chip);
}

#booking-app .mobile-time-slot.disabled,
#booking-app .mobile-time-slot.taken {
    background: #F7F4F1;
    color: #CFC9C2;
    text-decoration: line-through;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Payment options + summary
   -------------------------------------------------------------------------- */
#booking-app input[type="radio"],
#booking-app input[type="checkbox"] {
    accent-color: var(--bk2-pink);
}

#booking-app .pay-option {
    border: 1px solid #EFEAE4;
    border-radius: 14px;
    background: #fff;
}

#booking-app .pay-option:has(input:checked) {
    border: 2px solid var(--bk2-pink);
    background: var(--bk2-surface-warm);
}

#booking-app .pay-section-card {
    border: 1px solid #EFEAE4;
    border-radius: 18px;
    box-shadow: none;
}

#booking-app .payment-summary {
    background: var(--bk2-surface-warm);
    border: 1px solid var(--bk2-border-warm);
    border-radius: 16px;
    padding: 16px;
}

#booking-app .payment-summary-total {
    font-weight: 800;
    color: var(--bk2-text);
}

/* --------------------------------------------------------------------------
   Primary CTA
   -------------------------------------------------------------------------- */
#booking-app button.btn-default,
#booking-app .btn-default {
    background: var(--bk2-pink);
    border-color: var(--bk2-pink);
    border-radius: 100px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: var(--bk2-shadow-btn);
}

#booking-app button.btn-default:hover,
#booking-app button.btn-default:active,
#booking-app .btn-default:hover {
    background: var(--bk2-pink-dark);
    border-color: var(--bk2-pink-dark);
}

#booking-app button.btn-default:disabled {
    background: #EDE8E2;
    border-color: #EDE8E2;
    color: #B4ADA5;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Accent remaps — old magenta (#E50050 family) to the V2 dusty pink
   -------------------------------------------------------------------------- */
#booking-app .variant-selection-hint,
#booking-app .add-another-service-btn {
    color: var(--bk2-pink-dark);
}

#booking-app .add-another-service-btn {
    border-color: var(--bk2-pink);
}