.booking-page { background: var(--shop-bg, var(--ba-ivory)); color: var(--shop-text, var(--ba-ink)); }
.booking-page .container { width: min(1180px, calc(100% - 28px)); margin-inline: auto; }
.booking-page .py-5 { padding-block: 28px; }
.booking-page .mx-auto { margin-inline: auto; }
.booking-page .page-shell {
    border: 1px solid var(--ba-border); border-radius: 20px;
    background: var(--ba-surface); box-shadow: var(--ba-shadow);
}
.booking-page .hero-panel {
    padding: clamp(26px, 5vw, 58px); border-color: var(--ba-border);
    background: var(--shop-header, var(--ba-charcoal)); color: var(--shop-header-text, #fff);
}
.booking-page .hero-staff-access {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 16px clamp(18px, 4vw, 40px) 0;
    background: var(--ba-surface);
}
.booking-page .staff-login-button {
    text-decoration: none;
    gap: 8px;
}
.booking-page .hero-brand-logo { max-width: 230px; max-height: 100px; object-fit: contain; margin-bottom: 18px; }
.booking-page .hero-title { color: var(--shop-header-text, #fff); font-size: clamp(42px, 7vw, 76px); line-height: .94; }
.booking-page .hero-panel p { color: color-mix(in srgb, var(--shop-header-text, #fff) 78%, transparent); max-width: 660px; }
.booking-page .hero-badge, .booking-page .badge {
    display: inline-flex; align-items: center; border-radius: 999px;
    background: rgba(255,255,255,.09) !important; color: var(--shop-header-text, #f8f1e8) !important;
    padding: 7px 11px; font-size: 13px; font-weight: 700;
}
.booking-page .step-card .badge, .booking-page .highlight-panel .badge {
    background: var(--ba-surface-muted) !important;
    color: var(--ba-ink) !important;
}
.booking-page .row { display: flex; flex-wrap: wrap; margin: -8px; }
.booking-page .row > * { padding: 8px; min-width: 0; }
.booking-page .col-xl-7 { width: 60%; }
.booking-page .col-xl-5 { width: 40%; }
.booking-page .col-lg-8 { width: 66.666%; }
.booking-page .col-md-8 { width: 66.666%; }
.booking-page .col-md-6 { width: 50%; }
.booking-page .col-md-4 { width: 33.333%; }
.booking-page .col-12 { width: 100%; }
.booking-page .g-4 { margin: -12px; }
.booking-page .g-4 > * { padding: 12px; }
.booking-page .p-4 { padding: 24px !important; }
.booking-page .p-3 { padding: 16px !important; }
.booking-page .step-card, .booking-page .highlight-panel {
    border-color: var(--ba-border); border-radius: 16px; background: var(--ba-surface);
    box-shadow: 0 7px 22px rgba(44,35,27,.045);
}
.booking-page h4, .booking-page h5 { font-family: var(--ba-serif); color: var(--shop-text, var(--ba-ink)); }
.booking-page h4 { font-size: 30px; }
.booking-page h5 { font-size: 22px; }
.booking-page .step { color: var(--ba-muted); }
.booking-page .step-circle { background: var(--ba-surface-muted); color: var(--ba-ink); }
.booking-page .step.active .step-circle {
    background: var(--shop-accent); color: var(--shop-accent-text, #171614);
}
.booking-page .step.active .step-text { color: var(--shop-text, var(--ba-ink)); }
.booking-page .step-line { background: var(--ba-border); }
.booking-page .service-card, .booking-page .barber-card, .booking-page .time-slot {
    border-color: var(--ba-border); border-radius: 13px; background: #fffaf3;
}
.booking-page .service-card:hover, .booking-page .barber-card:hover, .booking-page .time-slot:hover {
    border-color: var(--shop-accent); box-shadow: 0 12px 28px rgba(44,35,27,.08);
}
.booking-page .service-card.selected, .booking-page .barber-card.selected,
.booking-page .time-slot.selected {
    background: var(--shop-accent); border-color: var(--shop-accent);
    color: var(--shop-accent-text, #171614);
}
.booking-page .service-card.selected h5, .booking-page .barber-card.selected h5 {
    color: var(--shop-accent-text, #171614);
}
.booking-page .form-control, .booking-page .form-select {
    width: 100%; min-height: 48px; border: 1px solid var(--ba-border);
    border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--ba-ink);
}
.booking-page .form-control:focus, .booking-page .form-select:focus {
    border-color: var(--shop-accent); background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 20%, transparent); outline: 0;
}
.booking-page .form-label { display: block; margin-bottom: 6px; font-weight: 750; }
.booking-page .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    border: 1px solid transparent; border-radius: 10px; padding: 10px 16px;
    background: var(--shop-button, var(--ba-charcoal)); color: var(--shop-button-text, #fff); font-weight: 750; cursor: pointer;
}
.booking-page .btn-primary, .booking-page .btn-success { background: var(--shop-button, var(--ba-charcoal)); border-color: var(--shop-button, var(--ba-charcoal)); color: var(--shop-button-text, #fff); }
.booking-page .btn-outline-primary { background: transparent; color: var(--shop-button, var(--ba-charcoal)); border-color: var(--shop-button, var(--ba-charcoal)); }
.booking-page .btn-secondary { background: var(--ba-surface-muted); border-color: var(--ba-border); color: var(--ba-ink); }
.booking-page .btn-danger { background: var(--ba-danger); color: #fff; }
.booking-page .btn-sm { min-height: 38px; padding: 7px 11px; }
.booking-page .btn-lg, .booking-page .form-control-lg { min-height: 52px; }
.booking-page .w-100 { width: 100%; }
.booking-page .d-none { display: none !important; }
.booking-page .d-flex { display: flex; }
.booking-page .flex-wrap { flex-wrap: wrap; }
.booking-page .align-items-center { align-items: center; }
.booking-page .align-items-start { align-items: flex-start; }
.booking-page .align-items-end { align-items: flex-end; }
.booking-page .justify-content-between { justify-content: space-between; }
.booking-page .text-end { text-align: right; }
.booking-page .text-center { text-align: center; }
.booking-page .fw-bold { font-weight: 750; }
.booking-page .fs-4 { font-family: var(--ba-serif); font-size: 28px !important; }
.booking-page .gap-2 { gap: 8px; }
.booking-page .gap-3 { gap: 12px; }
.booking-page .mb-0 { margin-bottom: 0 !important; }
.booking-page .mb-1 { margin-bottom: 4px !important; }
.booking-page .mb-2 { margin-bottom: 8px !important; }
.booking-page .mb-3 { margin-bottom: 16px !important; }
.booking-page .mb-4 { margin-bottom: 24px !important; }
.booking-page .mt-2 { margin-top: 8px !important; }
.booking-page .mt-3 { margin-top: 16px !important; }
.booking-page .mt-4 { margin-top: 24px !important; }
.booking-page .me-2 { margin-right: 8px !important; }
.booking-page .ms-2 { margin-left: 8px !important; }
.booking-page .py-2 { padding-block: 8px !important; }
.booking-page .py-3 { padding-block: 14px !important; }
.booking-page .px-3 { padding-inline: 12px !important; }
.booking-page .rounded-circle { border-radius: 50%; }
.booking-page .text-slate-300, .booking-page .text-slate-400 { color: var(--ba-muted) !important; }
.booking-page .text-cyan-300 { color: var(--shop-accent) !important; }
.booking-page .service-deposit {
    display: inline-flex;
    margin-top: 12px;
    border-radius: 999px;
    padding: 6px 9px;
    background: color-mix(in srgb, var(--shop-accent) 15%, #fff);
    color: var(--ba-ink);
    font-size: 13px;
    font-weight: 750;
}
.booking-page .fas { display: none; }
.booking-page .alert, .booking-page .booking-notice, .booking-page .reservation-confirmation {
    border-color: var(--ba-border); border-radius: 11px; background: #fffaf3; color: var(--ba-ink);
}
.booking-page .card {
    border: 1px solid var(--ba-border);
    border-radius: 13px;
    background: #fffaf3;
    color: var(--ba-ink);
}
.booking-page .card-body { padding: 16px; }
.booking-page #my-turnos .client-turn-card {
    box-shadow: 0 6px 18px rgba(44,35,27,.055);
}
.booking-page .modal { display: none; }
.booking-page .modal.manual-show { display: block; }
.booking-page .modal-content { border-radius: 16px; border: 1px solid var(--ba-border); }
.booking-page .modal-header, .booking-page .modal-footer, .booking-page .modal-body { padding: 18px; }
.booking-page .modal-header, .booking-page .modal-footer { display: flex; justify-content: space-between; align-items: center; }
.booking-page .btn-close {
    width: 40px; min-height: 40px; padding: 0; background: var(--ba-surface-muted);
}
.booking-page .btn-close::before { content: "×"; color: var(--ba-ink); font-size: 25px; }
@media (max-width: 900px) {
    .booking-page .col-xl-7, .booking-page .col-xl-5 { width: 100%; }
}
@media (max-width: 640px) {
    .booking-page .container { width: 100%; }
    .booking-page .py-5 { padding-block: 0; }
    .booking-page .page-shell { border: 0; border-radius: 0; box-shadow: none; }
    .booking-page .hero-panel { padding: 32px 20px; }
    .booking-page .hero-staff-access { justify-content: stretch; padding: 12px; }
    .booking-page .staff-login-button { width: 100%; }
    .booking-page .row.g-4.p-4 { padding: 10px !important; margin: 0; gap: 10px; }
    .booking-page .booking-flow-column { order: 2; }
    .booking-page .client-column { order: -1; }
    .booking-page .col-md-8, .booking-page .col-md-6, .booking-page .col-md-4,
    .booking-page .col-lg-8 { width: 100%; }
    .booking-page .step-card, .booking-page .highlight-panel { padding: 16px !important; }
    .booking-page .step-card > .d-flex:first-child {
        display: block;
    }
    .booking-page .step-card > .d-flex:first-child .text-end {
        margin-top: 10px;
        text-align: left;
    }
    .booking-page .step { width: 54px; font-size: 11px; }
    .booking-page .step-circle { width: 34px; height: 34px; }
    .booking-page .step-line { margin-inline: 3px; }
    .booking-page .service-card,
    .booking-page .barber-card {
        min-height: 0;
        padding: 16px !important;
    }
    .booking-page .service-card .d-flex {
        gap: 10px;
    }
    .booking-page .service-card .fs-4 {
        font-size: 22px !important;
        white-space: nowrap;
    }
    .booking-page .time-slot {
        flex: 1 1 calc(50% - 12px);
        min-width: 0;
        margin: 6px;
        padding: 14px 10px;
    }
    .booking-page .auth-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .booking-page .auth-switch .btn {
        width: 100%;
        min-height: 44px;
    }
    .booking-page .client-session-panel > .d-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .booking-page .client-session-panel #logout-button {
        width: 100%;
    }
    .booking-page #my-turnos .client-turn-card {
        margin-bottom: 10px !important;
    }
    .booking-page #my-turnos .client-turn-card .d-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .booking-page #my-turnos .client-turn-card .btn {
        width: 100%;
    }
    .booking-page .hours-panel {
        padding: 14px !important;
    }
    .booking-page .hours-panel .badge {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
    .booking-page .text-end { text-align: stretch; }
    .booking-page .text-end .btn { width: 100%; margin: 5px 0 !important; }
}