:root {
    --scout-red: #e0001b;
    --scout-red-dark: #ba0016;
    --scout-red-soft: #ffe5e8;
    --ink: #17202a;
    --muted: #5e6975;
    --line: #dfe4ea;
    --paper: #ffffff;
    --soft: #f5f7f9;
    --green: #007a53;
    --mdb-primary: var(--scout-red);
    --mdb-primary-rgb: 224, 0, 27;
    --mdb-link-color: var(--scout-red);
    --mdb-link-color-rgb: 224, 0, 27;
    --mdb-link-hover-color: var(--scout-red-dark);
    --mdb-link-hover-color-rgb: 186, 0, 22;
    --mdb-focus-ring-color: rgba(224, 0, 27, .25);
}

body {
    color: var(--ink);
    background: var(--paper);
    font-family: Arial, Helvetica, sans-serif;
}

.brand-lockup {
    display: inline-flex;
    gap: .65rem;
    align-items: center;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-logo {
    width: auto;
    height: 3rem;
    max-width: 7rem;
    object-fit: contain;
}

.navbar .nav-link.active {
    color: var(--scout-red);
    font-weight: 700;
}

.btn-primary {
    --mdb-btn-bg: var(--scout-red);
    --mdb-btn-border-color: var(--scout-red);
    --mdb-btn-hover-bg: var(--scout-red-dark);
    --mdb-btn-hover-border-color: var(--scout-red-dark);
}

.form-outline {
    --mdb-form-outline-select-notch-border-color: var(--scout-red);
}

.form-outline .form-control:focus ~ .form-label,
.form-outline .form-control.focused ~ .form-label {
    color: var(--scout-red);
}

.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control.focused ~ .form-notch .form-notch-leading {
    border-color: var(--scout-red);
    box-shadow: -1px 0 0 0 var(--scout-red), 0 1px 0 0 var(--scout-red), 0 -1px 0 0 var(--scout-red);
}

.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control.focused ~ .form-notch .form-notch-middle {
    border-color: var(--scout-red);
    box-shadow: 0 1px 0 0 var(--scout-red);
}

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing {
    border-color: var(--scout-red);
    box-shadow: 1px 0 0 0 var(--scout-red), 0 -1px 0 0 var(--scout-red), 0 1px 0 0 var(--scout-red);
}

.booking-picker .datepicker-toggle-button,
.booking-picker .timepicker-toggle-button {
    color: var(--scout-red);
}

.datepicker,
.timepicker {
    --mdb-datepicker-header-background-color: var(--scout-red);
    --mdb-datepicker-date-controls-color: var(--scout-red);
    --mdb-datepicker-view-change-button-color: var(--scout-red);
    --mdb-datepicker-view-change-button-hover-background-color: var(--scout-red-soft);
    --mdb-datepicker-view-change-button-state-background-color: var(--scout-red-soft);
    --mdb-datepicker-previous-button-color: var(--scout-red);
    --mdb-datepicker-previous-button-state-background-color: var(--scout-red-soft);
    --mdb-datepicker-next-button-color: var(--scout-red);
    --mdb-datepicker-next-button-state-background-color: var(--scout-red-soft);
    --mdb-datepicker-cell-selected-background-color: var(--scout-red);
    --mdb-datepicker-cell-focused-selected-background-color: var(--scout-red-dark);
    --mdb-datepicker-cell-current-color: var(--scout-red);
    --mdb-datepicker-cell-focused-background-color: var(--scout-red-soft);
    --mdb-datepicker-footer-btn-color: var(--scout-red);
    --mdb-datepicker-footer-btn-state-background-color: var(--scout-red-soft);
    --mdb-datepicker-toggle-focus-color: var(--scout-red);
    --mdb-timepicker-head-bg: var(--scout-red);
    --mdb-timepicker-button-color: var(--scout-red);
    --mdb-timepicker-button-hover-bg: var(--scout-red-soft);
    --mdb-timepicker-button-focus-bg: var(--scout-red-soft);
    --mdb-timepicker-btn-icon-hover-color: var(--scout-red);
    --mdb-timepicker-btn-icon-focus-color: var(--scout-red);
    --mdb-timepicker-hand-pointer-bg: var(--scout-red);
    --mdb-timepicker-circle-active-background-color: var(--scout-red);
    --mdb-timepicker-item-middle-dot-bg: var(--scout-red);
    --mdb-timepicker-time-tips-inner-active-bg: var(--scout-red);
    --mdb-timepicker-time-tips-inner-active-color: #fff;
    --mdb-timepicker-hour-mode-active-color: #fff;
    --mdb-timepicker-submit-inline-color: #fff;
}

.datepicker-modal-container,
.datepicker-dropdown-container,
.timepicker-wrapper {
    --mdb-datepicker-header-background-color: var(--scout-red);
    --mdb-datepicker-date-controls-color: var(--scout-red);
    --mdb-datepicker-cell-selected-background-color: var(--scout-red);
    --mdb-datepicker-cell-focused-selected-background-color: var(--scout-red-dark);
    --mdb-datepicker-cell-current-color: var(--scout-red);
    --mdb-datepicker-footer-btn-color: var(--scout-red);
    --mdb-datepicker-footer-btn-state-background-color: var(--scout-red-soft);
    --mdb-datepicker-toggle-focus-color: var(--scout-red);
    --mdb-timepicker-head-bg: var(--scout-red);
    --mdb-timepicker-button-color: var(--scout-red);
    --mdb-timepicker-button-hover-bg: var(--scout-red-soft);
    --mdb-timepicker-button-focus-bg: var(--scout-red-soft);
    --mdb-timepicker-hand-pointer-bg: var(--scout-red);
    --mdb-timepicker-circle-active-background-color: var(--scout-red);
    --mdb-timepicker-item-middle-dot-bg: var(--scout-red);
    --mdb-timepicker-time-tips-inner-active-bg: var(--scout-red);
    --mdb-timepicker-time-tips-inner-active-color: #fff;
}

.datepicker-header,
.datepicker-date-controls,
.timepicker-head {
    background-color: var(--scout-red) !important;
}

.datepicker-header,
.datepicker-header *,
.datepicker-date-controls,
.datepicker-date-controls *,
.datepicker-view-change-button,
.datepicker-previous-button,
.datepicker-next-button {
    color: #fff !important;
}

.datepicker-view-change-button::after,
.datepicker-previous-button::after,
.datepicker-next-button::after {
    border-color: #fff !important;
}

.datepicker-view-change-button:hover,
.datepicker-view-change-button:focus {
    background-color: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

.datepicker-view-change-button:hover::after,
.datepicker-view-change-button:focus::after {
    border-color: #fff !important;
}

.datepicker-previous-button:hover,
.datepicker-previous-button:focus,
.datepicker-next-button:hover,
.datepicker-next-button:focus {
    background-color: rgba(255, 255, 255, .18) !important;
}

.datepicker-previous-button:hover::after,
.datepicker-previous-button:focus::after,
.datepicker-next-button:hover::after,
.datepicker-next-button:focus::after {
    border-color: #fff !important;
}

.datepicker-footer-btn,
.datepicker-button-toggle,
.timepicker-button,
.timepicker-button-toggle,
.timepicker-toggle-button,
.datepicker-toggle-button {
    color: var(--scout-red) !important;
}

.datepicker-cell.selected .datepicker-cell-content,
.datepicker-cell.focused .datepicker-cell-content,
.timepicker-clock .active,
.timepicker-clock .timepicker-tips-element:hover {
    background-color: var(--scout-red) !important;
    color: #fff !important;
}

.timepicker-hand-pointer,
.timepicker-middle-dot,
.timepicker-circle {
    background-color: var(--scout-red) !important;
}

.hero {
    background: linear-gradient(120deg, #fff 0%, #fff 55%, #f0f2f4 55%, #f0f2f4 100%);
    border-bottom: 1px solid var(--line);
}

.hero-grid {
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
    gap: 2rem;
    align-items: center;
    padding-block: 4rem;
}

.hero h1 {
    max-width: 850px;
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    line-height: 1.03;
    font-weight: 900;
    margin-bottom: 1.25rem;
}

.hero p {
    max-width: 640px;
    color: var(--muted);
    font-size: 1.15rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

.hero-panel,
.payment-panel,
.login-panel,
.install-panel,
.admin-panel,
.terms-box,
.quote-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.hero-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.hero-panel > div {
    min-height: 150px;
    padding: 1.35rem;
    background: var(--soft);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-panel strong {
    font-size: 2rem;
    line-height: 1;
}

.panel-kicker,
.eyebrow {
    color: var(--scout-red);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.content-band {
    background: var(--soft);
    padding: 2rem 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.info-grid article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.3rem;
}

.info-grid i {
    color: var(--scout-red);
    font-size: 1.5rem;
    margin-bottom: .8rem;
}

.info-grid h2,
.section-heading h2,
.admin-title h1 {
    font-weight: 850;
}

.notice-strip {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-left: 6px solid var(--scout-red);
    background: #fff4f5;
    padding: 1rem;
}

.booking-section,
.calendar-page,
.payment-page,
.login-page {
    padding-block: 3rem;
}

.section-heading {
    margin-bottom: 1rem;
}

.booking-form,
.settings-form {
    display: grid;
    gap: 1.1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.full {
    grid-column: 1 / -1;
}

.time-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.quote-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--soft);
}

.quote-box strong {
    font-size: 1.4rem;
}

.terms-box {
    padding: 1rem;
}

.terms-box h3,
.admin-panel h2 {
    font-size: 1.15rem;
    font-weight: 800;
}

.site-footer {
    background: var(--ink);
    color: #fff;
    padding: 1.3rem 0;
    margin-top: 2rem;
}

.calendar-toolbar,
.admin-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
}

.calendar-head,
.calendar-cell {
    min-height: 112px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: .65rem;
}

.calendar-head {
    min-height: auto;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
}

.calendar-cell.muted {
    background: #f8f9fa;
    color: #9099a3;
}

.day-number {
    font-weight: 800;
}

.booked-pill {
    margin-top: .45rem;
    padding: .35rem .45rem;
    border-radius: 4px;
    background: #ffe5e8;
    color: #8d0011;
    font-size: .82rem;
    font-weight: 700;
}

.payment-panel,
.login-panel,
.install-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
}

.payment-panel dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: .5rem 1rem;
}

.success-icon {
    color: var(--green);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.admin-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 70vh;
}

.admin-sidebar {
    border-right: 1px solid var(--line);
    background: var(--soft);
    padding: 1rem;
}

.admin-sidebar a {
    display: flex;
    gap: .7rem;
    align-items: center;
    color: var(--ink);
    padding: .8rem;
    border-radius: 6px;
    font-weight: 700;
}

.admin-sidebar a.active,
.admin-sidebar a:hover {
    background: #fff;
    color: var(--scout-red);
}

.admin-main {
    padding: 1.5rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
}

.stat-card span {
    color: var(--muted);
}

.stat-card strong {
    display: block;
    font-size: 2rem;
}

.admin-panel {
    padding: 1rem;
    margin-bottom: 1rem;
}

.booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 900px) {
    .hero-grid,
    .info-grid,
    .form-grid,
    .admin-shell,
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        background: #fff;
    }

    .hero-grid {
        min-height: auto;
        padding-block: 2.5rem;
    }

    .admin-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        display: flex;
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    .calendar-grid {
        display: block;
        border: 0;
    }

    .calendar-head {
        display: none;
    }

    .calendar-cell {
        min-height: auto;
        border: 1px solid var(--line);
        margin-bottom: .6rem;
    }

    .quote-box,
    .calendar-toolbar,
    .admin-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-panel,
    .login-panel,
    .install-panel {
        padding: 1rem;
    }
}