/* ==========================================================================
   Divine Body Wellness — Booking Page Theme
   Loads LAST after Easy!Appointments defaults; all overrides win.
   Brand palette:  teal #192b32  |  gold #c9a96e  |  purple #782f9a  |  cream #f8f6f3
   Fonts: DM Serif Display (headings) + Nunito Sans (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS custom properties
   -------------------------------------------------------------------------- */
:root {
    --dbw-purple:       #782f9a;
    --dbw-purple-deep:  #5a1f7a;
    --dbw-purple-light: rgba(120, 47, 154, 0.12);
    --dbw-gold:         #c9a96e;
    --dbw-gold-deep:    #a8883f;
    --dbw-teal:         #192b32;
    --dbw-teal-mid:     #243f4a;
    --dbw-cream:        #f8f6f3;
    --dbw-cream-dark:   #f0ede7;
    --dbw-border:       #e5e2dc;
    --dbw-text:         #1a1208;
    --dbw-text-muted:   #6b6558;
    --dbw-white:        #ffffff;
    --dbw-radius-pill:  50px;
    --dbw-radius-card:  14px;
    --dbw-shadow:       0 4px 24px rgba(25, 43, 50, 0.10);
    --dbw-shadow-sm:    0 2px 8px  rgba(25, 43, 50, 0.07);
}

/* --------------------------------------------------------------------------
   1. Base — body, typography, link defaults
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--dbw-cream) !important;
    font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--dbw-text) !important;
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.fs-4, .fs-5, .fw-bold,
#company-name,
.wizard-frame h3,
.wizard-frame h4,
.wizard-frame .form-label.fw-bold,
.card-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

a { color: var(--dbw-purple); text-decoration: none; }
a:hover { color: var(--dbw-purple-deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. Branded site header (.dbw-header)
   -------------------------------------------------------------------------- */
.dbw-header {
    background: var(--dbw-teal);
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.dbw-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Wordmark */
.dbw-brand {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.18rem;
    color: #ffffff !important;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}
.dbw-brand:hover { color: var(--dbw-gold) !important; text-decoration: none; }
.dbw-brand-wellness { color: var(--dbw-gold); }

/* Nav links */
.dbw-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.dbw-nav a {
    font-size: 0.83rem;
    font-weight: 600;
    color: rgba(255,255,255,0.82) !important;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.dbw-nav a:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.10);
    text-decoration: none;
}

.dbw-nav-phone {
    color: rgba(255,255,255,0.70) !important;
    font-weight: 400 !important;
}
.dbw-nav-phone:hover { color: #ffffff !important; }

.dbw-nav-back {
    color: var(--dbw-gold) !important;
    border: 1px solid rgba(201,169,110,0.40);
    margin-left: 6px;
}
.dbw-nav-back:hover {
    color: #ffffff !important;
    background: var(--dbw-gold) !important;
    border-color: var(--dbw-gold);
}

/* Hamburger toggle — hidden on desktop */
.dbw-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
}
.dbw-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* --------------------------------------------------------------------------
   3. Main container — remove the min-vh-100 empty-space trap
   -------------------------------------------------------------------------- */
.dbw-main-container { padding-top: 28px !important; padding-bottom: 28px !important; }
#main.min-vh-100, .row.wrapper.min-vh-100 { min-height: 0 !important; }
#main, .row.wrapper                        { padding-top: 0 !important; padding-bottom: 0 !important; }
.row.wrapper                               { align-items: flex-start !important; }

/* --------------------------------------------------------------------------
   4. Wizard card — white card, soft shadow, rounded corners
   -------------------------------------------------------------------------- */
#book-appointment-wizard {
    background: var(--dbw-white) !important;
    border-radius: var(--dbw-radius-card) !important;
    box-shadow: var(--dbw-shadow) !important;
    border: 1px solid var(--dbw-border) !important;
    overflow: hidden !important;
}

/* Wizard frame panels — generous padding */
.wizard-frame { padding: 28px 32px !important; }
@media (max-width: 575px) { .wizard-frame { padding: 20px 18px !important; } }

/* --------------------------------------------------------------------------
   5. EA's #header — neutralize the brand area; keep the step-progress row
   -------------------------------------------------------------------------- */

/* Suppress EA's purple gradient header background entirely */
#header,
#header.bg-primary {
    background: var(--dbw-white) !important;
    border-bottom: 2px solid var(--dbw-cream-dark) !important;
    padding: 18px 24px 12px !important;
}

/* Hide EA's company name — we already have it in our branded header */
#company-name { display: none !important; }

/* Hide EA's logo image (we don't use it) */
#company-logo { display: none !important; }

/* Hide any EA "Book an Appointment" / page-title text sitting inside #header
   (it's an <h3> or <p> that duplicates the wizard panel headings) */
#header > h3,
#header > p,
#header > .text-white,
#header .header-title { display: none !important; }

/* --------------------------------------------------------------------------
   6. Step-progress indicator — restyle as clean numbered circles
   -------------------------------------------------------------------------- */

/* Container of steps: horizontal row */
#header .d-flex,
.book-steps-container,
#step-1, #step-2, #step-3, #step-4 { /* target the row via parent if needed */ }

/* Individual step pill */
.book-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif !important;
    color: var(--dbw-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    padding: 2px 6px;
    text-decoration: none !important;
    transition: color 0.2s;
}

/* The circle number badge — generated before the label */
.book-step::before {
    content: attr(data-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.80rem;
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif;
    border: 2px solid var(--dbw-border);
    background: var(--dbw-white);
    color: var(--dbw-text-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Step 1-4 data attributes for the generated counter */
#step-1 .book-step { counter-reset: none; }
#step-1 .book-step::before { content: "1"; }
#step-2 .book-step::before { content: "2"; }
#step-3 .book-step::before { content: "3"; }
#step-4 .book-step::before { content: "4"; }

/* Active step */
.book-step.active-step {
    color: var(--dbw-purple) !important;
}
.book-step.active-step::before {
    background: var(--dbw-purple) !important;
    border-color: var(--dbw-purple) !important;
    color: var(--dbw-white) !important;
    box-shadow: 0 0 0 3px rgba(120,47,154,0.18);
}

/* Completed step */
.book-step.done-step,
.book-step.visited-step {
    color: var(--dbw-gold-deep) !important;
}
.book-step.done-step::before,
.book-step.visited-step::before {
    content: "✓";
    background: var(--dbw-gold) !important;
    border-color: var(--dbw-gold) !important;
    color: var(--dbw-white) !important;
}

/* Connector line between steps (EA typically renders these) */
.step-connector,
.progress-bar-line { background: var(--dbw-border) !important; }

/* --------------------------------------------------------------------------
   7. Form controls — labels, inputs, selects
   -------------------------------------------------------------------------- */
.form-label {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--dbw-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 5px !important;
}

.form-control,
.form-select {
    border-color: var(--dbw-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 0.92rem !important;
    color: var(--dbw-text) !important;
    background-color: var(--dbw-white) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dbw-purple) !important;
    box-shadow: 0 0 0 3px rgba(120,47,154,0.15) !important;
    outline: none !important;
}

.form-control::placeholder { color: #b5b0a8 !important; }

/* Select chevron stays visible */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23782f9a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

/* Section headings inside wizard panels */
.wizard-frame .fs-4,
.wizard-frame h3,
.wizard-frame h4,
.wizard-frame .col-12 > strong {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: 1.35rem !important;
    color: var(--dbw-teal) !important;
    font-weight: 400 !important;
    margin-bottom: 18px !important;
}

/* --------------------------------------------------------------------------
   8. Flatpickr date-picker — full override of material_green theme
   -------------------------------------------------------------------------- */

/* Calendar wrapper */
.flatpickr-calendar {
    border-radius: 10px !important;
    box-shadow: var(--dbw-shadow) !important;
    border: 1px solid var(--dbw-border) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    overflow: hidden;
}

/* Month/year header bar */
.flatpickr-months,
.flatpickr-month {
    background: var(--dbw-teal) !important;
    color: var(--dbw-white) !important;
    border-radius: 0 !important;
}

.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    font-family: 'DM Serif Display', Georgia, serif !important;
    color: var(--dbw-white) !important;
    font-size: 1rem !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--dbw-white) !important;
    fill: var(--dbw-white) !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: var(--dbw-gold) !important;
    fill: var(--dbw-gold) !important;
    background: rgba(255,255,255,0.12) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: inherit !important; }

/* Weekday row */
.flatpickr-weekdays { background: var(--dbw-teal-mid) !important; }
span.flatpickr-weekday {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: transparent !important;
}

/* Day cells */
.flatpickr-day {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 0.85rem !important;
    color: var(--dbw-text) !important;
    border-radius: 50% !important;
    border: none !important;
}
.flatpickr-day:hover {
    background: var(--dbw-purple-light) !important;
    color: var(--dbw-purple) !important;
}
.flatpickr-day.today {
    background: transparent !important;
    border: 2px solid var(--dbw-gold) !important;
    color: var(--dbw-gold-deep) !important;
    font-weight: 700 !important;
}
.flatpickr-day.today:hover {
    background: rgba(201,169,110,0.15) !important;
    color: var(--dbw-gold-deep) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--dbw-purple) !important;
    border-color: var(--dbw-purple) !important;
    color: var(--dbw-white) !important;
    box-shadow: 0 2px 8px rgba(120,47,154,0.35) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #cac6be !important;
    background: transparent !important;
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   9. Time-slot buttons
   -------------------------------------------------------------------------- */
.available-hour {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border: 1.5px solid var(--dbw-purple) !important;
    border-radius: var(--dbw-radius-pill) !important;
    background: var(--dbw-white) !important;
    color: var(--dbw-purple) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    margin: 4px !important;
}
.available-hour:hover {
    background: var(--dbw-purple-light) !important;
    color: var(--dbw-purple-deep) !important;
    box-shadow: 0 0 0 2px rgba(120,47,154,0.18) !important;
}
.available-hour.selected-hour,
.available-hour.selected,
.available-hour.active {
    background: var(--dbw-purple) !important;
    color: var(--dbw-white) !important;
    box-shadow: 0 2px 8px rgba(120,47,154,0.35) !important;
    border-color: var(--dbw-purple) !important;
}

/* --------------------------------------------------------------------------
   10. Navigation buttons — Next, Back, Confirm/Book
   -------------------------------------------------------------------------- */

/* Base pill style for all buttons */
.btn {
    border-radius: var(--dbw-radius-pill) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.04em !important;
    padding: 10px 26px !important;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.18s !important;
    cursor: pointer !important;
}

/* Primary / Next button — purple pill */
.btn-primary,
button[id*="next"],
a[id*="next"],
#button-next,
.book-appointment-btn {
    background-color: var(--dbw-purple) !important;
    border-color:     var(--dbw-purple) !important;
    color:            var(--dbw-white)  !important;
}
.btn-primary:hover,
.btn-primary:focus,
button[id*="next"]:hover,
#button-next:hover {
    background-color: var(--dbw-purple-deep) !important;
    border-color:     var(--dbw-purple-deep) !important;
    color:            var(--dbw-white) !important;
    box-shadow: 0 4px 14px rgba(120,47,154,0.35) !important;
}

/* Outline / Back button */
.btn-outline-secondary,
.btn-outline-primary,
button[id*="back"],
a[id*="back"],
#button-back {
    background-color: transparent !important;
    border-color:     var(--dbw-purple) !important;
    color:            var(--dbw-purple) !important;
}
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
button[id*="back"]:hover,
#button-back:hover {
    background-color: var(--dbw-purple-light) !important;
    color:            var(--dbw-purple-deep) !important;
}

/* Confirm / Book appointment button — gold */
#button-appointment,
button[id*="appointment"],
a[id*="confirm"],
.btn-success {
    background-color: var(--dbw-gold)      !important;
    border-color:     var(--dbw-gold)      !important;
    color:            var(--dbw-teal)      !important;
    font-weight:      700                  !important;
}
#button-appointment:hover,
button[id*="appointment"]:hover,
.btn-success:hover {
    background-color: var(--dbw-gold-deep) !important;
    border-color:     var(--dbw-gold-deep) !important;
    color:            var(--dbw-white)     !important;
    box-shadow: 0 4px 14px rgba(168,136,63,0.35) !important;
}

/* --------------------------------------------------------------------------
   11. EA booking footer (small "Powered by" bar inside the wizard)
   -------------------------------------------------------------------------- */
.booking-footer,
#footer,
.wizard-footer {
    background: var(--dbw-cream-dark) !important;
    border-top: 1px solid var(--dbw-border) !important;
    padding: 10px 24px !important;
    font-size: 0.76rem !important;
    color: var(--dbw-text-muted) !important;
    text-align: center !important;
}
.booking-footer a,
#footer a { color: var(--dbw-purple) !important; }

/* --------------------------------------------------------------------------
   12. Branded site footer (.dbw-footer)
   -------------------------------------------------------------------------- */
.dbw-footer {
    background: var(--dbw-teal);
    color: rgba(255,255,255,0.80);
    padding: 36px 24px;
    margin-top: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.88rem;
}

.dbw-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.dbw-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
}
.dbw-footer-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.20rem;
    color: var(--dbw-white);
    letter-spacing: 0.01em;
}
.dbw-footer-tagline {
    font-size: 0.76rem;
    color: var(--dbw-gold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
}

.dbw-footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
}
.dbw-footer-contact a {
    color: rgba(255,255,255,0.82) !important;
    text-decoration: none;
    transition: color 0.15s;
}
.dbw-footer-contact a:hover { color: var(--dbw-gold) !important; text-decoration: underline; }
.dbw-footer-sep { color: rgba(255,255,255,0.30); }

.dbw-footer-links a {
    color: var(--dbw-gold) !important;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.15s;
}
.dbw-footer-links a:hover { color: #e0c9a0 !important; }

.dbw-footer-copy {
    color: rgba(255,255,255,0.40);
    font-size: 0.74rem;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   13. Miscellaneous polish
   -------------------------------------------------------------------------- */

/* Alert / error banners — brand-consistent */
.alert-danger  { border-left: 4px solid #c0392b !important; }
.alert-success { border-left: 4px solid var(--dbw-gold) !important; }
.alert-info    { border-left: 4px solid var(--dbw-purple) !important; }

/* Tooltip (tippy) on-brand */
.tippy-box { background: var(--dbw-teal) !important; border-radius: 6px !important; }
.tippy-arrow { color: var(--dbw-teal) !important; }

/* Loading spinner — override green */
.spinner-border { color: var(--dbw-purple) !important; }

/* Confirmation / success screen */
#success-frame .text-success,
#success-frame i.fa-check { color: var(--dbw-gold) !important; }
#success-frame h3          { color: var(--dbw-teal) !important; }

/* --------------------------------------------------------------------------
   14. Responsive — mobile breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dbw-header-inner { flex-wrap: wrap; height: auto; padding: 12px 18px; gap: 8px; }

    .dbw-nav-toggle { display: flex; }

    .dbw-nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 8px 0 12px;
        gap: 2px;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .dbw-nav.dbw-nav-open { display: flex; }

    .dbw-nav a { font-size: 0.92rem; padding: 8px 12px; width: 100%; }
    .dbw-nav-back { margin-left: 0; }

    #book-appointment-wizard { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
    .dbw-main-container { padding-top: 0 !important; padding-bottom: 0 !important; }

    .book-step span.d-none { display: none !important; }
    .book-step { font-size: 0 !important; }        /* hide text label on tiny screens */
    .book-step::before { font-size: 0.80rem !important; }

    .dbw-footer { padding: 28px 18px; }
}

@media (max-width: 480px) {
    .wizard-frame { padding: 16px 14px !important; }
    .dbw-footer-contact { flex-direction: column; gap: 5px; }
    .dbw-footer-sep { display: none; }
}