/* Battlefield Arena: charcoal #171b1c, lime #9ccb2c, silver #f2f4f3.
   Primary, secondary and background colors come from the facility theme settings. */
:root {
    --ink: var(--field);
    --muted: #59635e;
    --surface: #ffffff;
    --line: #d5dbd7;
    --theme-border: var(--line);
    --field-soft: #f6f7f4;
    --accent-contrast: var(--field);
}

.public-booking-body,
.public-booking-body .site-shell {
    background: var(--soft);
    color: var(--ink);
}

.public-booking-body :is(.hero-title, .hero-phone-number) {
    color: var(--field);
}

.public-booking-body .hero-address {
    color: var(--muted);
}

.public-booking-body .turf-hero-logo {
    background: var(--field);
    box-shadow: 0 0 0 1px var(--line);
    object-fit: contain;
}

.public-booking-body :is(.public-booking-guide-button, .public-hero-language-switcher a.active) {
    background: var(--field);
    border-color: var(--field);
    color: #ffffff;
    box-shadow: none;
}

.public-booking-body .public-booking-guide-button:is(:hover, :focus-visible) {
    background: var(--field-dark);
    border-color: var(--accent);
    color: #ffffff;
}

.public-booking-body :is(.public-booking-guide-icon, .hero-map-link) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.public-booking-body :is(.hero-phone-link, .public-hero-language-switcher) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--field);
    box-shadow: none;
}

.public-booking-body .hero-phone-icon {
    background: var(--accent-light);
    color: var(--field);
}

.public-booking-body :is(.booking-panel, .public-booking-tabs-section) {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: none;
}

.public-booking-body .booking-panel {
    border-top: 3px solid var(--accent);
}

.public-booking-body :is(.public-booking-main-tab, .public-resource-tab) {
    background: var(--field-soft);
    border-color: var(--line);
    color: var(--field);
}

.public-booking-body .public-booking-main-tab.active {
    background: var(--field);
    border-color: var(--field);
    color: #ffffff;
    box-shadow: none;
}

.public-booking-body :is(.public-resource-tab.active, .public-booking-main-tab strong) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    box-shadow: none;
}

.public-booking-body .public-booking-main-tab.active::after,
.public-booking-body .public-booking-resource-row::before {
    background: var(--accent);
}

.public-booking-body :is(.public-booking-resource-row, .booking-date-area):not(.needs-selection) {
    background: var(--field-soft);
    border-color: var(--line);
}

.public-booking-body :is(.slot-card, .public-package-card, .public-program-card, .public-tournament-card) {
    --package-card-line: var(--line);
    --package-card-soft: var(--field-soft);
    --package-card-title: var(--field);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: none;
}

.public-booking-body :is(.slot-card, .public-package-card, .public-program-card, .public-tournament-card):not(:disabled):is(:hover, .active) {
    background: var(--accent-light);
    border-color: var(--field);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.public-booking-body .slot-state-available {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--field);
}

.public-booking-body :is(.slot-card, .public-package-card, .public-program-card, .public-tournament-card):focus-visible {
    outline: 2px solid var(--field);
    outline-offset: 3px;
}

.public-booking-body :is(.booking-sidebar, .summary-box, .payment-instruction-box, .public-sidebar-payment-card, .package-payment-panel, .package-payment-summary) {
    background: var(--field-soft);
    border-color: var(--line);
    box-shadow: none;
}

.public-booking-body .booking-selection-summary:is(.has-date, .is-selected):not(.needs-selection) {
    background: var(--accent-light);
    border-color: var(--accent);
    box-shadow: inset 4px 0 0 var(--accent);
}

.public-booking-body :is(.booking-package-public, .public-program-summary, .capacity-stage, #packageCapacityStage, #trainingProgramStage):not(.needs-selection) {
    background: var(--field-soft);
    border-color: var(--line);
    color: var(--field);
    box-shadow: none;
}

.public-booking-body :is(.form-stage, .booking-selected-row, .booking-selected-cost-row, .customer-stage.is-ready) {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: none;
}

.public-booking-body :is(.booking-selected-total, .package-summary-chips span, .next-step-hint, .stage-confirmation) {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--field);
    box-shadow: none;
}

.public-booking-body :is(.form-control, .form-select):focus {
    border-color: var(--field);
    box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .3);
}

.public-booking-body .form-check-input:checked {
    background-color: var(--field);
    border-color: var(--field);
}

.public-booking-body :is(.btn-primary, .btn-outline-primary) {
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--field-dark);
    --bs-btn-hover-border-color: var(--field-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--field-dark);
    --bs-btn-active-border-color: var(--field-dark);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

.public-booking-body .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--field);
    --bs-btn-disabled-border-color: var(--field);
}

.public-booking-body .btn-outline-primary {
    --bs-btn-color: var(--field);
    --bs-btn-border-color: var(--field);
}

.public-booking-body .btn-warning {
    --bs-btn-color: var(--field);
    --bs-btn-hover-color: var(--field);
    --bs-btn-hover-bg: var(--accent-light);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--field);
    --bs-btn-active-bg: var(--accent-light);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--field);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

.public-booking-body .booking-toast {
    background: var(--field);
    border-color: var(--accent);
    color: #ffffff;
}

.public-booking-body .slot-price {
    align-items: baseline;
    /* Override the shared price markup's Bootstrap d-block utility. */
    display: flex !important;
    flex-wrap: wrap;
}

.public-booking-body .slot-price :is(del, strong) {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .public-booking-body .hero-identity-row {
        flex-direction: column;
    }

    .public-booking-body .hero-identity-row .hero-identity {
        flex: 0 1 auto;
        width: 100%;
    }

    .public-booking-body :is(.hero-actions, .hero-phone-list) {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        max-width: 100%;
    }

    .public-booking-body .hero-actions {
        gap: 8px;
        width: 100%;
    }

    .public-booking-body .hero-address {
        font-size: .95rem;
    }
}

@media (max-width: 575.98px) {
    .public-booking-body .date-stepper {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .public-booking-body .date-picker-shell {
        min-width: 0;
    }

    .public-booking-body .date-display-text {
        font-size: .875rem;
        line-height: 1.25;
        white-space: normal;
    }
}