/* ==========================================================
   THE DIVINE SPARKS — APPOINTMENT BOOKING
   Premium navy, cream, white and gold treatment
   ========================================================== */

.appointment_booking_page {
    --ab-navy: #054D71;
    --ab-navy-deep: #03364F;
    --ab-cream: #F6F3EB;
    --ab-ivory: #FFFDF8;
    --ab-gold: #C99A3E;
    --ab-gold-light: #E8C779;
    --ab-text: #64727B;
    --ab-line: rgba(201,154,62,.28);

    padding: 42px 0 76px !important;
    min-height: 70vh;
    background: var(--ab-cream) !important;
}

.booking_shell {
    max-width: 1100px;
}

.booking_header {
    position: relative;
    overflow: hidden;
    margin: 0 0 26px !important;
    padding: 42px 25px 38px;
    background:
        radial-gradient(circle at 88% 14%, rgba(232,199,121,.15), transparent 30%),
        radial-gradient(circle at 10% 94%, rgba(232,199,121,.10), transparent 34%),
        linear-gradient(135deg, var(--ab-navy-deep), var(--ab-navy));
}

.booking_header::before,
.booking_header::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(232,199,121,.28);
    border-radius: 50%;
    pointer-events: none;
}

.booking_header::before {
    width: 200px;
    height: 200px;
    top: -136px;
    right: -62px;
}

.booking_header::after {
    width: 145px;
    height: 145px;
    left: -82px;
    bottom: -103px;
}

.booking_header h1.heading {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 40px) !important;
    font-weight: 400;
    line-height: 1.18;
}

.booking_header p {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    color: rgba(255,255,255,.82) !important;
    font-size: 15px;
}

.booking_progress {
    max-width: 700px;
    margin: 0 auto 24px !important;
}

.progress_step {
    color: #7a858c;
}

.progress_step span {
    border-color: rgba(5,77,113,.25);
    background: var(--ab-ivory);
    color: var(--ab-navy);
}

.progress_step.active {
    color: var(--ab-navy);
}

.progress_step.active span {
    border-color: var(--ab-navy);
    background: var(--ab-navy);
    color: var(--ab-gold-light);
}

.progress_line {
    background: rgba(5,77,113,.20);
}

.booking_card {
    border: 1px solid var(--ab-line) !important;
    border-radius: 0 !important;
    background: var(--ab-ivory) !important;
    box-shadow: 0 12px 28px rgba(3,54,79,.08) !important;
    padding: 34px !important;
}

.booking_step h2 {
    color: var(--ab-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.3vw, 31px) !important;
    font-weight: 400;
}

.booking_subtext {
    color: var(--ab-text) !important;
}

.booking_back_button {
    color: var(--ab-navy) !important;
    font-weight: 600;
}

.service_option_button,
.mode_button {
    border: 1px solid var(--ab-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--ab-navy) !important;
    box-shadow: none !important;
}

.service_option_button:hover,
.mode_button:hover {
    border-color: var(--ab-gold) !important;
    background: var(--ab-cream) !important;
    color: var(--ab-navy) !important;
    box-shadow: 0 12px 24px rgba(3,54,79,.08) !important;
    transform: translateY(-3px);
}

.service_option_title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px !important;
    font-weight: 400 !important;
}

.service_option_meta,
.service_option_description {
    color: var(--ab-text) !important;
}

.mode_button i {
    color: var(--ab-gold);
}

.calendar_box,
.slots_box {
    border: 1px solid var(--ab-line) !important;
    border-radius: 0 !important;
    background: var(--ab-cream) !important;
}

.calendar_header h3,
.slots_box h4 {
    color: var(--ab-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.calendar_nav {
    border-color: var(--ab-line) !important;
    border-radius: 0 !important;
    background: var(--ab-ivory) !important;
    color: var(--ab-navy);
}

.calendar_day {
    border-color: rgba(5,77,113,.18) !important;
    border-radius: 0 !important;
    background: var(--ab-ivory) !important;
    color: var(--ab-navy);
}

.calendar_day:hover,
.calendar_day.available:hover {
    border-color: var(--ab-gold) !important;
    background: var(--ab-cream) !important;
}

.calendar_day.selected {
    border-color: var(--ab-navy) !important;
    background: var(--ab-navy) !important;
    color: var(--ab-gold-light) !important;
}

.calendar_day.workshop {
    border-color: var(--ab-gold) !important;
    background: #fff7e7 !important;
    color: var(--ab-navy) !important;
}

.slot_button {
    border-color: var(--ab-navy) !important;
    border-radius: 0 !important;
    background: var(--ab-ivory) !important;
    color: var(--ab-navy);
}

.slot_button:hover,
.slot_button.selected {
    background: var(--ab-navy) !important;
    color: var(--ab-gold-light) !important;
}

.booking_summary {
    border: 1px solid var(--ab-line);
    border-radius: 0 !important;
    background: var(--ab-cream) !important;
    color: var(--ab-text);
}

.booking_summary strong {
    color: var(--ab-navy);
}

.booking_label {
    color: var(--ab-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.booking_input {
    height: 48px !important;
    border: 1px solid rgba(5,77,113,.20) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.booking_input:focus {
    border-color: var(--ab-gold) !important;
}

.confirm_appointment_button {
    min-height: 44px;
    border: 1px solid var(--ab-gold) !important;
    border-radius: 2px !important;
    background: var(--ab-navy) !important;
    color: #fff !important;
}

.confirm_appointment_button:hover {
    background: var(--ab-gold) !important;
    color: var(--ab-navy) !important;
}

.success_centre_box {
    border-color: var(--ab-line) !important;
    border-radius: 0 !important;
    background: var(--ab-cream) !important;
}

.success_centre_box h4,
.success_centre_box a {
    color: var(--ab-navy) !important;
}

@media (max-width: 767px) {
    .appointment_booking_page {
        padding: 25px 0 50px !important;
    }

    .booking_header {
        margin-bottom: 22px !important;
        padding: 31px 18px 28px;
    }

    .booking_header h1.heading {
        font-size: 29px !important;
    }

    .booking_progress {
        overflow-x: auto;
        justify-content: flex-start !important;
        padding: 0 5px 7px;
    }

    .progress_step {
        min-width: 64px;
    }

    .progress_step small {
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .progress_line {
        min-width: 22px;
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    .booking_card {
        padding: 23px 16px !important;
    }

    .service_option_button {
        min-height: 0 !important;
        padding: 17px !important;
    }

    .mode_option_grid {
        grid-template-columns: 1fr !important;
    }

    .calendar_shell {
        gap: 17px !important;
    }

    .calendar_box,
    .slots_box {
        padding: 16px !important;
    }

    .calendar_weekdays,
    .calendar_grid {
        gap: 5px !important;
    }

    .calendar_day {
        min-height: 43px !important;
    }

    .slot_button {
        width: 100%;
    }
}