/* ----------------------------------------------------------------------------
 * Bloom Nails & Spa — Easy!Appointments theme
 *
 * Loaded in place of a Bootswatch theme (Settings → General → Theme → "bloom").
 * Builds on the stock Bootstrap theme and re-skins it with the site's tokens
 * (src/styles/*.css). `html.is-embedded` is set by bloom-embed.js when the page
 * runs inside the iframe on /book/, and strips the standalone chrome.
 * ---------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Manrope:wght@400;500;600&display=swap");
@import url("default.min.css");

:root,
[data-bs-theme="light"] {
    --bloom-canvas: #fefae0;
    --bloom-surface: #e9edc9;
    --bloom-surface-warm: #faedcd;
    --bloom-sage: #ccd5ae;
    --bloom-bronze: #d4a373;
    --bloom-bronze-text: #946339; /* bronze darkened for small text contrast */
    --bloom-ink: #4a5240;
    --bloom-ink-soft: rgba(74, 82, 64, 0.68);
    --bloom-line: rgba(74, 82, 64, 0.16);

    --bloom-font-body: 'Manrope', system-ui, sans-serif;
    --bloom-font-elegant: 'Cormorant Garamond', Georgia, serif;

    --bs-primary: var(--bloom-ink);
    --bs-primary-rgb: 74, 82, 64;
    --bs-secondary: var(--bloom-ink-soft);
    --bs-success: var(--bloom-ink);
    --bs-success-rgb: 74, 82, 64;
    --bs-body-font-family: var(--bloom-font-body);
    --bs-body-font-size: 0.95rem;
    --bs-body-color: var(--bloom-ink);
    --bs-body-color-rgb: 74, 82, 64;
    --bs-body-bg: var(--bloom-canvas);
    --bs-secondary-color: var(--bloom-ink-soft);
    --bs-tertiary-bg: var(--bloom-surface);
    --bs-border-color: var(--bloom-line);
    --bs-border-radius: 4px;
    --bs-link-color: var(--bloom-ink);
    --bs-link-color-rgb: 74, 82, 64;
    --bs-link-hover-color: var(--bloom-bronze-text);
    --bs-link-hover-color-rgb: 148, 99, 57;
    --bs-focus-ring-color: rgba(212, 163, 115, 0.35);
}

body {
    background: var(--bloom-canvas);
    color: var(--bloom-ink);
    font-family: var(--bloom-font-body);
    -webkit-font-smoothing: antialiased;
}

.text-muted { color: var(--bloom-ink-soft) !important; }
.text-success,
.text-primary { color: var(--bloom-ink) !important; }
.bg-success.bg-opacity-10 { background: var(--bloom-surface) !important; }

/* ---- Headings --------------------------------------------------------- */
.frame-title,
#message-frame h3 {
    font-family: var(--bloom-font-elegant);
    font-weight: 500 !important;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.01em;
    color: var(--bloom-ink) !important;
}

/* ---- Wizard card ------------------------------------------------------ */
#book-appointment-wizard,
#message-frame {
    background: var(--bloom-canvas) !important;
    border: 1px solid var(--bloom-line);
}

@media (min-width: 768px) {
    #book-appointment-wizard {
        border-radius: 4px !important;
        box-shadow: 0 30px 80px rgba(74, 82, 64, 0.08) !important;
    }
}

/* ---- Header + step indicator ----------------------------------------- */
#book-appointment-wizard #header {
    background:
        radial-gradient(circle at 82% 10%, rgba(212, 163, 115, 0.28), transparent 40%),
        linear-gradient(135deg, #3f4938 0%, var(--bloom-ink) 58%, #303827 100%) !important;
}

#company-name > span:first-of-type {
    font-family: var(--bloom-font-elegant);
    font-size: 1.6rem;
    color: var(--bloom-canvas);
}

#company-name .display-booking-selection {
    font-size: 0.66rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(254, 250, 224, 0.6) !important;
}

/* `html` prefix: frontend.css loads after the theme with equal specificity. */
html #book-appointment-wizard .book-step.active-step {
    background: var(--bloom-bronze) !important;
    border-radius: 999px !important;
}

html #book-appointment-wizard .book-step.active-step strong {
    color: var(--bloom-ink) !important;
}

html #book-appointment-wizard .book-step strong { font-weight: 600; }

html #book-appointment-wizard .book-step:not(.active-step) {
    background: rgba(254, 250, 224, 0.12) !important;
    border-radius: 999px !important;
}

html #book-appointment-wizard .book-step:not(.active-step) strong {
    color: rgba(254, 250, 224, 0.6) !important;
}

/* ---- Form fields (mirrors .waitlist-field on /book/) ------------------ */
.form-label,
label[for="select-service"],
label[for="select-provider"] {
    font-size: 0.66rem !important;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bloom-bronze-text);
    font-weight: 600;
    margin-bottom: 6px !important;
}

label[for="select-service"] strong,
label[for="select-provider"] strong { font-weight: 600; }

.form-control,
.form-select {
    font-family: var(--bloom-font-body);
    font-size: 0.95rem;
    padding: 12px 14px;
    border: 1px solid rgba(74, 82, 64, 0.18);
    border-radius: 4px;
    background-color: #fffdf0;
    color: var(--bloom-ink);
    box-shadow: none !important;
}

.form-select { padding-right: 40px; }

.form-control:focus,
.form-select:focus {
    border-color: var(--bloom-bronze);
    background-color: #fffdf0;
    box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.25) !important;
}

.form-control.is-invalid,
.is-invalid { border-color: #b4553b !important; }
.text-danger { color: #b4553b !important; }

.form-check-input:checked {
    background-color: var(--bloom-ink);
    border-color: var(--bloom-ink);
}

/* Step 1 column: stock markup is `col col-lg-8 offset-md-2`, which sits
   off-center between md and lg. */
#wizard-frame-1 .frame-content > .col {
    flex: 0 1 560px;
    margin-left: auto !important;
    margin-right: auto;
}

/* ---- Service description --------------------------------------------- */
#service-description {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--bloom-ink-soft);
    padding: 16px 18px !important;
    background: var(--bloom-surface-warm);
    border-radius: 4px;
}

#service-description:empty { display: none; }
#service-description strong { color: var(--bloom-ink); }

/* ---- Buttons (mirrors .waitlist-submit) ------------------------------- */
.btn {
    font-family: var(--bloom-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 13px 26px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-dark,
.btn-primary,
.button-next,
#book-appointment-submit {
    background: var(--bloom-ink) !important;
    border-color: var(--bloom-ink) !important;
    color: var(--bloom-canvas) !important;
}

.btn-dark:hover,
.btn-primary:hover,
.button-next:hover,
#book-appointment-submit:hover {
    background: var(--bloom-bronze) !important;
    border-color: var(--bloom-bronze) !important;
    color: var(--bloom-ink) !important;
}

.btn-outline-secondary,
.btn-outline-primary,
.button-back {
    background: transparent !important;
    border: 1px solid rgba(74, 82, 64, 0.28) !important;
    color: var(--bloom-ink) !important;
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.button-back:hover {
    border-color: var(--bloom-ink) !important;
    background: rgba(74, 82, 64, 0.05) !important;
}

.btn .fas { font-size: 0.7em; }

/* ---- Time slots ------------------------------------------------------- */
#book-appointment-wizard #available-hours .available-hour {
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-transform: none;
    padding: 10px 12px;
    border-radius: 4px;
    background: #fffdf0 !important;
}

#book-appointment-wizard #available-hours .available-hour:hover {
    border-color: var(--bloom-bronze) !important;
}

#book-appointment-wizard #available-hours .selected-hour {
    background: var(--bloom-ink) !important;
    border-color: var(--bloom-ink) !important;
    color: var(--bloom-canvas) !important;
}

#available-hours::-webkit-scrollbar { width: 6px; }
#available-hours::-webkit-scrollbar-thumb { background: var(--bloom-sage); border-radius: 3px; }

/* ---- Calendar (flatpickr) -------------------------------------------- */
.flatpickr-calendar {
    font-family: var(--bloom-font-body);
    background: #fffdf0;
    border: 1px solid var(--bloom-line);
    border-radius: 4px;
    box-shadow: none !important;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent !important;
    color: var(--bloom-ink) !important;
    fill: var(--bloom-ink) !important;
}

.flatpickr-current-month {
    font-family: var(--bloom-font-elegant);
    font-size: 1.25rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 500;
    background: transparent !important;
    color: var(--bloom-ink) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #fffdf0;
    color: var(--bloom-ink);
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer { border: 0 !important; }

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--bloom-ink) !important; }

span.flatpickr-weekday {
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bloom-bronze-text) !important;
}

.flatpickr-day {
    color: var(--bloom-ink);
    border-radius: 999px;
}

.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--bloom-surface); border-color: var(--bloom-surface); }

.flatpickr-day.today { border-color: var(--bloom-bronze); }

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--bloom-ink) !important;
    border-color: var(--bloom-ink) !important;
    color: var(--bloom-canvas) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(74, 82, 64, 0.28) !important; }

/* Fluid calendar: flatpickr is fixed at 307px, which overflows narrow iframes. */
#book-appointment-wizard .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 340px;
}

#book-appointment-wizard .flatpickr-rContainer,
#book-appointment-wizard .flatpickr-days,
#book-appointment-wizard .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
}

#book-appointment-wizard .flatpickr-day {
    flex-basis: calc(100% / 7);
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#select-date { max-width: 340px; }

/* ---- Confirmation summary (step 4) ----------------------------------- */
#appointment-details,
#customer-details {
    font-size: 0.9rem;
    line-height: 1.75;
}

#wizard-frame-4 .fw-bold.fs-3 {
    font-family: var(--bloom-font-elegant);
    font-weight: 500 !important;
    font-size: 1.7rem !important;
    letter-spacing: -0.01em;
}

#wizard-frame-4 .fw-bold.text-muted {
    font-size: 0.66rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bloom-bronze-text) !important;
}

#wizard-frame-4 svg,
#wizard-frame-4 .fas { color: var(--bloom-bronze); }

/* ---- Timezone ---------------------------------------------------------
 * Bookings are always in studio time; bloom-embed.js locks the value. */
#select-time > .mb-3:has(#select-timezone) { display: none !important; }
#appointment-details .mb-2:has(.fa-globe) { display: none !important; }

/* ---- Confirmation ------------------------------------------------------
 * Clients aren't emailed (customer notifications off), so drop the
 * "email sent / check spam" lines and point them to the phone instead. */
#message-frame:has(.fa-calendar-check) p.text-muted { display: none; }
#message-frame:has(.fa-calendar-check) h3::after {
    content: "Need to change it? Just give us a call.";
    display: block;
    margin-top: 14px;
    font-family: var(--bloom-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--bloom-ink-soft);
}

/* ---- Footer ----------------------------------------------------------- */
#frame-footer {
    border-color: var(--bloom-line) !important;
    font-size: 0.78rem;
    color: var(--bloom-ink-soft);
}

#frame-footer a,
#message-frame small a { color: var(--bloom-ink-soft); }

#frame-footer .badge {
    font-weight: 500;
    letter-spacing: 0.4px;
    border-radius: 999px;
    background: var(--bloom-surface) !important;
    color: var(--bloom-ink) !important;
}

/* ---- Popovers / tooltips --------------------------------------------- */
.tippy-box {
    background: var(--bloom-ink);
    color: var(--bloom-canvas);
    font-family: var(--bloom-font-body);
    font-size: 0.75rem;
}

/* ======================================================================
 * Embedded mode (inside the iframe on /book/)
 * The site page already provides branding, so drop the standalone card,
 * full-height layout and company header; keep a light step indicator.
 * ==================================================================== */
html.is-embedded,
html.is-embedded body {
    background: transparent !important;
    min-height: 0 !important;
}

html.is-embedded #main {
    max-width: none;
    padding: 0;
}

html.is-embedded .min-vh-100 { min-height: 0 !important; }

html.is-embedded #main > .wrapper {
    margin: 0;
    padding: 0 !important;
}

html.is-embedded #book-appointment-wizard,
html.is-embedded #message-frame {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html.is-embedded #book-appointment-wizard #header {
    background: transparent !important;
    justify-content: center;
    padding: 28px 16px 0 !important;
}

html.is-embedded #company-name { display: none !important; }

html.is-embedded #steps { margin: 0 auto !important; }

html.is-embedded #book-appointment-wizard .book-step:not(.active-step) {
    background: transparent !important;
    border: 1px solid rgba(74, 82, 64, 0.22);
}

html.is-embedded #book-appointment-wizard .book-step:not(.active-step) strong {
    color: var(--bloom-ink-soft) !important;
}

html.is-embedded .wizard-frame .frame-container { min-height: 0 !important; }

html.is-embedded .frame-title { margin-top: 8px !important; }

/* The site page shows the privacy + "powered by" line below the frame. */
html.is-embedded #frame-footer,
html.is-embedded #message-frame > div:has(> small > a[href*="easyappointments.org"]) { display: none !important; }

html.is-embedded #message-frame .backend-link { display: none !important; }

/* ---- Wider layouts in the embed (iframe is narrower than Bootstrap's lg) */
@media (min-width: 640px) {
    /* Fixed card size: every step (and the confirmation) is as tall as the
       tallest one, step 2, so the card doesn't jump between steps. */
    html.is-embedded .wizard-frame .frame-container { min-height: 500px !important; }
    html.is-embedded #message-frame {
        min-height: 698px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Step 2: calendar | time slots */
    html.is-embedded #wizard-frame-2 .frame-content > .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    html.is-embedded #wizard-frame-2 #select-date { margin-top: 0 !important; margin-bottom: 0 !important; }
    html.is-embedded #wizard-frame-2 #select-time { padding-top: 0 !important; max-width: none !important; }
    html.is-embedded #wizard-frame-2 #available-hours {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        gap: 10px;
        margin-top: 0 !important;
        max-height: 390px !important;
    }
    html.is-embedded #wizard-frame-2 #available-hours .available-hour { margin: 0 !important; }

    /* Step 3: name | name, email | phone, notes across */
    html.is-embedded #wizard-frame-3 .frame-content > .field-col {
        flex: 0 0 100%;
        max-width: 560px;
    }
    html.is-embedded #wizard-frame-3 .frame-content > .field-col:first-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }
    html.is-embedded #wizard-frame-3 .field-col > .mb-3:has(#notes),
    html.is-embedded #wizard-frame-3 .field-col:not(:has(#email)) > .mb-3:has(#phone-number) { grid-column: 1 / -1; }
}