:root {
    --background-primary: #f4f6f8;
    --background-secondary: #ffffff;
    --text-primary: #182230;
    --text-secondary: #667085;
    --accent-primary: #3457d5;
    --accent-primary-hover: #2746bd;
    --border-color: #dfe4ea;
    --status-unhealthy: #d92d20;
    --status-healthy: #039855;
    --surface-shadow: 0 24px 70px rgba(16, 24, 40, .1);
}

html {
    min-width: 320px;
    background: var(--background-primary);
    scroll-behavior: smooth;
}

body {
    display: block;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 8% 4%, rgba(52, 87, 213, .08), transparent 28rem),
        radial-gradient(circle at 92% 100%, rgba(17, 24, 39, .06), transparent 30rem),
        var(--background-primary);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body, button, input, select, textarea { font-family: inherit; }

.main-container {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 100vh;
    min-height: 100dvh;
}

.view {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 3vw, 40px);
    overflow: visible;
}

.view.active { display: block; }

.card {
    width: min(1180px, 100%);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 38px);
    overflow: hidden;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(223, 228, 234, .9);
    border-radius: 26px;
    box-shadow: var(--surface-shadow);
}

.card-header {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.card-header img, .admin-header img, .modal-content .logo {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    padding: 9px;
    object-fit: contain;
    background: #111827;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(17, 24, 39, .14);
}

h1, h2, h3, h4 {
    color: var(--text-primary);
    letter-spacing: -.025em;
}

h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { line-height: 1.65; }
.text-accent { color: var(--accent-primary) !important; }

input, select, textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="time"], input[type="password"] {
    min-height: 48px;
    padding: 12px 14px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: 11px;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

textarea { min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: #98a2b3; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(52, 87, 213, .12);
}

label {
    margin-bottom: 7px;
    color: #344054;
    font-size: .875rem;
    font-weight: 650;
}

.button {
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: none;
    transform: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: none; }
.button.primary {
    width: auto;
    padding: 11px 18px;
    color: #fff;
    background: var(--accent-primary);
    font-size: .9rem;
    box-shadow: 0 8px 18px rgba(52, 87, 213, .2);
}
.button.primary:hover { background: var(--accent-primary-hover); }
.button.secondary {
    color: #344054;
    background: #fff;
    border-color: #d0d5dd;
}
.button.secondary:hover { color: var(--text-primary); background: #f8fafc; border-color: #98a2b3; }
.button.danger { color: #d92d20; background: #fff; border-color: #fecdca; }
.button.danger:hover { color: #b42318; background: #fef3f2; }
.button:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid rgba(52, 87, 213, .32);
    outline-offset: 3px;
}

/* Login and admin */
#login-view { display: none; place-items: center; }
#login-view.active { display: grid; }
#login-view .login-box {
    width: min(440px, 100%);
    max-width: none;
    padding: clamp(28px, 5vw, 46px);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--surface-shadow);
}
#login-view .login-logo {
    width: 84px;
    height: 84px;
    margin-bottom: 26px;
    padding: 10px;
    object-fit: contain;
    background: #111827;
    border-radius: 20px;
}
#login-view .login-box h1 { margin-bottom: 26px; font-size: 2rem; }
#login-view .input-group { display: block; }
#login-view .button.primary { width: 100%; min-height: 50px; }
#admin-dashboard-view .card,
#admin-booking-page-view .card,
#page-bookings-view .card,
#manage-bookings-view .card,
#all-bookings-view .card,
#editor-view .card,
#analytics-view .card { overflow: visible; }
#admin-dashboard-view .card-content,
#manage-bookings-view .card-content,
#all-bookings-view .card-content,
#editor-view .card-content {
    margin: 0;
    padding: 0;
    overflow: visible;
}
#admin-dashboard-view .card-header,
#manage-bookings-view .card-header,
#all-bookings-view .card-header,
#editor-view .card-header { align-items: center; gap: 20px; }
#admin-dashboard-view .card-header > div,
#manage-bookings-view .card-header > div,
#all-bookings-view .card-header > div,
#editor-view .card-header > div { flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
.dashboard-grid { gap: 16px; }
.stat-card, .booking-page-list-item, .booking-item, .overview-section,
.analytics-section, .chart-container, .recent-booking-card {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(16, 24, 40, .04);
}
.stat-card { padding: 20px; }
.tab-button {
    min-height: 42px;
    padding: 9px 14px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: 9px;
    font-weight: 650;
}
.tab-button.active { color: var(--accent-primary); background: rgba(52, 87, 213, .08); }
.form-section, .settings-panel {
    padding: 22px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

/* Public booking */
#client-booking-view { padding: clamp(12px, 2.8vw, 38px); }
#client-booking-view .card {
    width: min(1120px, 100%);
    padding: 0;
    overflow: hidden;
}

#client-booking-view .card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 2.5vw, 26px);
    min-height: 154px;
    margin: 0;
    padding: clamp(24px, 4vw, 42px) clamp(24px, 5vw, 58px);
    overflow: hidden;
    text-align: left;
    background:
        radial-gradient(circle at 92% 30%, rgba(111, 135, 255, .26), transparent 19rem),
        linear-gradient(130deg, #101828 0%, #172554 100%);
    border: 0;
}

#client-booking-view .card-header::after {
    position: absolute;
    right: -60px;
    bottom: -105px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
}

#client-booking-view .card-header img {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: clamp(70px, 9vw, 92px);
    height: clamp(70px, 9vw, 92px);
    max-width: 92px;
    max-height: 92px;
    padding: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 22px;
    box-shadow: none;
}

#client-booking-view .card-header .header-text-content {
    position: relative;
    z-index: 1;
    flex-grow: 0;
    min-width: 0;
    text-align: left;
}
.booking-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #b8c4ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
#client-booking-view #client-page-title {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 3.2vw, 2.65rem);
    font-weight: 760;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

#client-booking-view .card-content {
    height: auto;
    margin: 0;
    padding: clamp(22px, 4vw, 48px) clamp(18px, 5vw, 58px) clamp(30px, 5vw, 58px);
    overflow: visible;
}

.client-event-summary {
    max-width: 760px;
    margin: 0 auto clamp(26px, 4vw, 42px);
    padding: 0 8px;
    text-align: center;
}
#client-page-description {
    margin: 0;
    color: #475467;
    font-size: clamp(.98rem, 2vw, 1.08rem);
    line-height: 1.7;
}
#client-page-location, #client-page-timezone {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 14px 4px 0 !important;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .78rem !important;
    font-weight: 700;
    line-height: 1.25;
}
#client-page-location:empty, #client-page-timezone:empty { display: none; }
#client-page-location { color: #344054 !important; background: #f2f4f7; border: 1px solid #e4e7ec; }
#client-page-timezone { color: #3538cd !important; background: #eef0ff; border: 1px solid #d9ddff; }
#mobile-book-now-btn { display: none !important; }
#booking-closed-message, #fully-booked-message {
    padding: 18px !important;
    color: #93370d !important;
    background: #fffaeb !important;
    border: 1px solid #fedf89;
    border-radius: 13px !important;
}
#client-booking-open, #booking-open-content { min-width: 0; }

.client-booking-layout {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(360px, 1.18fr);
    align-items: start;
    gap: clamp(20px, 4vw, 42px);
}
.calendar-container, .time-slots-container, #client-booking-form-container {
    min-width: 0;
    padding: clamp(18px, 2.5vw, 26px);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .045);
}
.time-slots-and-form { display: grid; min-width: 0; gap: 18px; }
.step-heading { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; }
.step-number {
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    margin-top: 1px;
    color: #fff;
    background: #111827;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 800;
}
.step-heading h4 { margin: 0; font-size: 1.03rem; font-weight: 760; line-height: 1.35; }
.step-help { margin: 2px 0 0; color: var(--text-secondary); font-size: .78rem; line-height: 1.4; }

#client-calendar { width: 100%; min-width: 0; }
#client-booking-view .flatpickr-calendar.inline {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 3px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#client-booking-view .flatpickr-months { margin-bottom: 8px; }
#client-booking-view .flatpickr-months .flatpickr-month { height: 42px; color: var(--text-primary); }
#client-booking-view .flatpickr-current-month { padding-top: 9px; font-size: .96rem; font-weight: 700; }
#client-booking-view .flatpickr-current-month input.cur-year,
#client-booking-view .flatpickr-current-month .flatpickr-monthDropdown-months {
    min-height: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 700;
}
#client-booking-view .flatpickr-prev-month, #client-booking-view .flatpickr-next-month {
    top: 4px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #475467;
    border-radius: 10px;
}
#client-booking-view .flatpickr-prev-month:hover,
#client-booking-view .flatpickr-next-month:hover { color: var(--accent-primary); background: #f2f4f7; }
#client-booking-view .flatpickr-innerContainer,
#client-booking-view .flatpickr-rContainer,
#client-booking-view .flatpickr-weekdays,
#client-booking-view .flatpickr-days,
#client-booking-view .dayContainer { width: 100%; min-width: 0; max-width: none; }
#client-booking-view .flatpickr-weekday {
    color: #667085;
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
}
#client-booking-view .flatpickr-day {
    display: grid;
    flex: 0 0 14.285714%;
    width: 14.285714%;
    max-width: 14.285714%;
    height: 39px;
    place-items: center;
    color: #344054;
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1;
}
#client-booking-view .flatpickr-day:hover { background: #f2f4f7; border-color: #f2f4f7; }
#client-booking-view .flatpickr-day.today { color: var(--accent-primary); border-color: #aeb9f4; }
#client-booking-view .flatpickr-day.selected,
#client-booking-view .flatpickr-day.selected:hover {
    color: #fff;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 5px 12px rgba(52, 87, 213, .24);
}
#client-booking-view .flatpickr-day.flatpickr-disabled,
#client-booking-view .flatpickr-day.prevMonthDay,
#client-booking-view .flatpickr-day.nextMonthDay { color: #c4c9d1; }

.time-slots-container { min-height: 150px; }
#time-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-height: 330px;
    padding: 2px 3px 2px 2px;
    overflow-y: auto;
    scrollbar-color: #cbd2dc transparent;
    scrollbar-width: thin;
}
.time-slot-btn {
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 8px;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #dfe4ea;
    border-radius: 11px;
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.time-slot-btn:hover { color: var(--accent-primary); background: #f1f3ff; border-color: #aeb9f4; transform: translateY(-1px); }
.time-slot-btn.selected { color: #fff; background: var(--accent-primary); border-color: var(--accent-primary); }
.time-slot-btn:disabled { color: #98a2b3; background: #f2f4f7; border-color: #eaecf0; transform: none; }
#time-slots > p { grid-column: 1 / -1; margin: 8px 0; color: var(--text-secondary); font-size: .9rem; text-align: center; }

#client-booking-form-container { margin: 0; background: #fbfcfe; }
#client-booking-form { display: grid; gap: 4px; }
#client-booking-form input, #client-booking-form select, #client-booking-form textarea { width: 100%; }
#client-booking-form .button[type="submit"] { width: 100%; min-height: 52px; margin-top: 12px; font-size: .96rem; }
#reservation-banner {
    margin-bottom: 18px !important;
    padding: 13px 15px !important;
    color: #363f72 !important;
    background: #eef0ff !important;
    border: 1px solid #d9ddff;
    border-radius: 11px !important;
}
#add-child-btn { width: 100%; margin: 2px 0 8px !important; }
.additional-child-section {
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 13px !important;
}

/* Modals and feedback */
.modal-overlay {
    padding: 16px;
    background: rgba(16, 24, 40, .64);
    backdrop-filter: blur(6px);
}
.modal-content {
    width: min(560px, 100%);
    max-height: min(88vh, 760px);
    padding: clamp(22px, 4vw, 34px);
    color: var(--text-primary);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(16, 24, 40, .25);
}
#loading-overlay { background: rgba(244, 246, 248, .84); backdrop-filter: blur(5px); }
.spinner { border-color: #d0d5dd; border-top-color: var(--accent-primary); }
.toast {
    color: #fff;
    background: #101828;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(16, 24, 40, .22);
}

@media (max-width: 900px) {
    .client-booking-layout { grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 18px; }
    #time-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #admin-dashboard-view .card-header,
    #manage-bookings-view .card-header,
    #all-bookings-view .card-header,
    #editor-view .card-header { align-items: flex-start; }
}

@media (max-width: 720px) {
    body { background: #fff; }
    .view { padding: 10px; }
    .card { padding: 20px; border-radius: 18px; box-shadow: 0 10px 32px rgba(16, 24, 40, .08); }
    #client-booking-view { min-height: 100vh; min-height: 100dvh; padding: 0; }
    #client-booking-view .card {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    #client-booking-view .card-header { min-height: 128px; gap: 14px; padding: 22px 18px; }
    #client-booking-view .card-header img {
        width: 62px;
        height: 62px;
        min-width: 62px;
        padding: 7px;
        border-radius: 16px;
    }
    .booking-eyebrow { margin-bottom: 5px; font-size: .62rem; }
    #client-booking-view #client-page-title { font-size: clamp(1.22rem, 6vw, 1.62rem); line-height: 1.12; }
    #client-booking-view .card-content { padding: 24px 15px 34px; }
    .client-event-summary { margin-bottom: 24px; padding: 0 4px; text-align: left; }
    #client-page-description { font-size: .94rem; line-height: 1.62; }
    #client-page-location, #client-page-timezone { margin: 10px 3px 0 0 !important; font-size: .72rem !important; }
    #mobile-book-now-btn {
        display: inline-flex !important;
        width: auto;
        min-height: 44px;
        margin-top: 16px;
        align-items: center;
        justify-content: center;
        padding: 10px 17px;
    }
    .client-booking-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .calendar-container, .time-slots-container, #client-booking-form-container {
        width: 100%;
        min-width: 0;
        padding: 17px 14px;
        border-radius: 15px;
        box-shadow: none;
    }
    .time-slots-and-form { gap: 14px; }
    .step-heading { margin-bottom: 14px; }
    #client-booking-view .flatpickr-day { height: 41px; font-size: .8rem; }
    #time-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; }
    .time-slot-btn { min-height: 46px; padding: 10px 5px; font-size: .78rem; }
    #admin-dashboard-view .card-header,
    #manage-bookings-view .card-header,
    #all-bookings-view .card-header,
    #editor-view .card-header { flex-direction: column; gap: 16px; }
    #admin-dashboard-view .card-header > div,
    #manage-bookings-view .card-header > div,
    #all-bookings-view .card-header > div,
    #editor-view .card-header > div,
    #admin-dashboard-view .card-header .button,
    #manage-bookings-view .card-header .button,
    #all-bookings-view .card-header .button,
    #editor-view .card-header .button { width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr !important; }
    .booking-page-list-item, .booking-item { align-items: flex-start; gap: 14px; }
    .booking-page-actions, .booking-item-actions { width: 100%; flex-wrap: wrap; }
    .booking-page-actions .button, .booking-item-actions .button { flex: 1 1 130px; }
    .modal-content { padding: 22px 18px; border-radius: 17px; }
}

@media (max-width: 380px) {
    #client-booking-view .card-header { min-height: 116px; padding: 18px 14px; }
    #client-booking-view .card-header img { width: 54px; height: 54px; min-width: 54px; }
    #client-booking-view #client-page-title { font-size: 1.16rem; }
    #client-booking-view .card-content { padding-right: 10px; padding-left: 10px; }
    #time-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}