/* ===== Tokens & Base =====
   Palette is the site's own: navy #001635 and teal #1fc1d0 (the two colours
   the child theme uses throughout) over the pale mint #E9F9FA that backs the
   tick-lists, review blocks and step sections. The widget used to sit on
   cream/amber, which read as a different theme next to those sections. */
.booking-widget {
    --bw-teal: #1fc1d0;
    --bw-teal-dark: #17a5b2;
    --bw-navy: #001635;
    --bw-ink: #001635;
    --bw-muted: #5b6b7a;
    --bw-mint: #E9F9FA;          /* soft fill: chips, tags, hovers */
    --bw-mint-selected: #CFEFF3; /* the chosen date / time / tab */
    --bw-field: #F2F8F9;         /* inputs and unselected chips */
    --bw-line: #D5EDF0;
    padding: 24px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
    /* Fill the column: the card should be exactly as wide as the rows above
       and below it at every breakpoint. Only the popup constrains it. */
    max-width: none;
}

.booking-widget,
.booking-widget * {
    font-family: 'Montserrat', 'Outfit', 'Mundial', sans-serif;
    box-sizing: border-box;
}

/* The auto-inserted row stays collapsed until the widget has confirmed it
   has slots to offer. Without this the section's own vertical padding would
   leave a blank gap above the FAQs on every page that ends up hiding the
   widget, and would shift the page when it does appear. */
.bw-booking-row {
    display: none;
}

.bw-booking-row.bw-booking-row--visible {
    display: block;
}

/* Hide the legacy teal consultation section while a booking widget
   is active on the page (AC-1: the widget replaces it). */
body.bw-booking-active .custom_form_wrapper.new--style--consultation {
    display: none !important;
}

/* Inside the consultation popup: center the card and undo the
   theme's popup-section overrides (light-teal background, input
   min-height) that target `.w-popup-wrap section`. */
.w-popup .booking-widget,
.w-popup-wrap section.booking-widget {
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    background: #fff !important;
    padding: 24px !important;
}

.w-popup-wrap .booking-widget .bw-form-group input {
    min-height: 48px !important;
    height: 48px !important;
    padding: 12px 14px !important;
    line-height: normal !important;
}

.w-popup-wrap .booking-widget .bw-location-select,
.w-popup-wrap .booking-widget .bw-treatment-select {
    height: 56px !important;
    padding: 0 44px 0 16px !important;
}

/* ===== Back Button (above header, only shown on step 2) ===== */
.bw-back-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bw-mint);
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bw-ink);
    cursor: pointer;
    margin-bottom: 14px;
    transition: background 0.2s ease;
}

.bw-back-btn.visible { display: inline-flex; }
.bw-back-btn:hover { background: var(--bw-mint-selected); }

.bw-back-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--bw-ink);
    stroke-width: 2.5;
    fill: none;
}

/* ===== Header ===== */
.booking-widget__header { margin-bottom: 18px; }

.booking-widget__title {
    font-size: 26px;
    font-weight: 600 !important;
    color: var(--bw-navy) !important;
    margin: 0 0 14px 0;
    line-height: 1.25;
    font-family: 'Montserrat', 'Outfit', 'Mundial', sans-serif !important;
}

.booking-widget__title .bw-title-service {
    color: var(--bw-teal) !important;
}

/* ===== Progress slider (2 dots + gradient fill) ===== */
.booking-widget__progress {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.bw-progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e0e0;
    flex-shrink: 0;
    transition: background 0.4s ease;
}

.bw-progress-dot.active { background: var(--bw-teal); }

.bw-progress-track {
    flex: 1;
    height: 3px;
    background: #e6e6e6;
    border-radius: 3px;
    overflow: hidden;
}

.bw-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bw-teal), rgba(31, 193, 208, 0.35));
    transition: width 0.45s ease;
}

/* ===== Loading skeleton ===== */
.bw-skeleton { display: none; }
.bw-skeleton.visible { display: block; }

.bw-skeleton-line,
.bw-skeleton-block {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bw-shimmer 1.3s ease-in-out infinite;
}

.bw-skeleton-line { height: 14px; margin-bottom: 12px; }

.bw-skeleton-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.bw-skeleton-block { height: 48px; flex: 1; }

@keyframes bw-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Labels ===== */
.booking-widget__label {
    font-size: 15px;
    color: var(--bw-ink);
    margin-bottom: 10px;
    display: block;
    font-weight: 400;
}

.booking-widget__label--summary {
    font-weight: 700;
}

/* ===== Steps ===== */
.bw-step { display: none; }
.bw-step.active { display: block; }

/* ===== Picker step (treatment first — consultation modal) ===== */
.bw-picker-step { display: none; }
.bw-picker-step.active { display: block; }

.bw-picker-error {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 7px;
    padding: 12px 16px;
    margin-bottom: 14px;
    color: #f57c00;
    font-size: 13px;
    display: none;
}

/* ===== Test-mode note (non-production hosts only) ===== */
.bw-test-note {
    margin: 0 0 14px 0;
    padding: 8px 12px;
    background: #fff8e1;
    border-radius: 7px;
    color: #b26a00;
    font-size: 12px;
    text-align: center;
}

/* ===== Step 1 layout =====
   Single column by default (mobile); the desktop breakpoint below turns
   .bw-step-1__cols into two columns — dates left, times right. */
.bw-step-1__cols { display: block; }

/* Only ever shown in the desktop two-column layout, where the right column
   would otherwise be blank until a date is picked. */
.bw-slots-placeholder { display: none; }

/* ===== Step 1: Clinic Location ===== */
.bw-location-section { margin-bottom: 18px; }

.bw-location-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--bw-ink);
    margin-bottom: 8px;
}

.bw-location-label .required { color: #c62828; }

.bw-select-wrapper { position: relative; }

.bw-select-wrapper::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bw-ink);
    border-bottom: 2px solid var(--bw-ink);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.bw-location-select,
.bw-treatment-select {
    width: 100%;
    padding: 0 44px 0 16px;
    height: 56px;
    border: 0 !important;
    border-radius: 7px;
    background: var(--bw-field) !important;
    background-image: none !important;
    font-size: 15px;
    color: var(--bw-ink);
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.bw-location-select:focus,
.bw-treatment-select:focus {
    outline: none;
    background: var(--bw-mint) !important;
    box-shadow: 0 0 0 2px var(--bw-teal);
}

.bw-location-select:invalid,
.bw-location-select option[value=""],
.bw-treatment-select:invalid,
.bw-treatment-select option[value=""] {
    color: #777;
}

/* ===== Step 1: Dates ===== */
.bw-date-selection { margin-bottom: 18px; }

.bw-date-btn {
    border: 0;
    border-radius: 7px;
    background: var(--bw-field);
    font-size: 14px;
    font-weight: 500;
    color: var(--bw-muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 15px 10px;
}

/* Today / Tomorrow: full-width stacked rows */
.bw-date-btn--wide {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-align: left;
    padding-left: 16px;
}

/* Remaining dates: 3-across grid */
.bw-date-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.bw-date-btn:hover:not(:disabled) { background: var(--bw-mint); }

.bw-date-btn.selected {
    background: var(--bw-mint-selected);
    color: var(--bw-navy);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--bw-teal);
}

.bw-date-btn.dimmed { opacity: 0.4; }
.bw-date-btn.dimmed:hover:not(:disabled) { opacity: 0.7; }

.bw-date-btn--closed,
.bw-date-btn--closed:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bw-field);
}

.bw-date-btn--closed .bw-closed-caption {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #999;
    margin-top: 2px;
    text-transform: uppercase;
}

.bw-no-dates-message {
    color: #666;
    text-align: center;
    padding: 20px;
}

/* ===== Period Tabs ===== */
.bw-timeslot-section { margin-bottom: 18px; }

.bw-period-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border: 1.5px solid var(--bw-line);
    border-radius: 7px;
    overflow: hidden;
}

.bw-period-tab {
    flex: 1;
    padding: 12px 8px;
    border: 0;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bw-period-tab:hover:not(.selected) { background: var(--bw-mint); }

.bw-period-tab.selected {
    background: var(--bw-mint-selected);
    color: var(--bw-navy);
}

/* ===== Time Slots ===== */
.bw-time-slots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.bw-time-slot-btn {
    padding: 12px 6px;
    border: 0;
    border-radius: 7px;
    background: var(--bw-field);
    font-size: 14px;
    font-weight: 600;
    color: var(--bw-ink);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bw-time-slot-btn:hover:not(:disabled):not(.selected) { background: var(--bw-mint); }

.bw-time-slot-btn.selected {
    background: var(--bw-mint-selected);
    color: var(--bw-navy);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--bw-teal);
}

.bw-time-slot-btn.dimmed { opacity: 0.5; }
.bw-time-slot-btn.dimmed:hover:not(:disabled) { opacity: 0.8; }

.bw-time-slot-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bw-no-slots-message {
    color: #999;
    font-size: 13px;
    padding: 10px 0;
    display: none;
}

/* ===== Step 2: Summary Tags ===== */
.bw-booking-summary { margin-bottom: 10px; }

.bw-summary-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bw-summary-tag {
    flex: 1;
    min-width: 120px;
    padding: 14px 16px;
    background: var(--bw-mint);
    border: 0;
    border-radius: 7px;
    font-size: 14px;
    color: var(--bw-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-summary-tag svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--bw-teal);
    stroke-width: 2;
    fill: none;
}

/* ===== Contact Form ===== */
.bw-contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bw-form-row {
    display: flex;
    gap: 12px;
}

.bw-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bw-form-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bw-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bw-ink);
}

.bw-form-group label .required { color: #c62828; }

.bw-form-group input {
    padding: 12px 14px;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 14px;
    color: var(--bw-ink) !important;
    background: var(--bw-field) !important;
    transition: all 0.2s ease;
    min-height: 48px !important;
    height: 48px !important;
}

.bw-form-group input:focus {
    outline: none;
    background: var(--bw-mint) !important;
    box-shadow: 0 0 0 2px var(--bw-teal);
}

.bw-form-group input.error {
    box-shadow: 0 0 0 1.5px #c62828;
}

.bw-form-group .error-message {
    font-size: 11px;
    color: #c62828;
    display: none;
}

.bw-form-group.has-error .error-message { display: block; }

/* ===== Help Icon + Tooltip ===== */
.bw-help-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bw-help-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bw-ink);
    color: #fff;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.bw-help-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #2d3748;
    color: #fff;
    padding: 12px 30px 12px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    width: 240px;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bw-help-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2d3748;
}

.bw-help-tooltip.open { display: block; }

.bw-help-tooltip__close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

@media (hover: hover) {
    .bw-help-wrapper:hover .bw-help-tooltip { display: block; }
}

/* ===== Phone Mask ===== */
.bw-phone-wrapper { position: relative; }

.bw-phone-wrapper input {
    letter-spacing: 2px;
    font-size: 15px;
    caret-color: var(--bw-teal);
}

.bw-phone-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    font-size: 15px;
    letter-spacing: 2px;
    pointer-events: none;
    white-space: pre;
    color: transparent;
    display: flex;
    align-items: center;
}

.bw-phone-mask .typed { color: transparent; }
.bw-phone-mask .dash { color: #c0c0c0; transition: opacity 0.15s ease; }
.bw-phone-mask .cursor-dash { color: var(--bw-teal); }

.bw-phone-wrapper input:focus + .bw-phone-mask .cursor-dash {
    animation: bw-dash-pulse 1s ease-in-out infinite;
}

@keyframes bw-dash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== Buttons ===== */
.bw-button-section { margin-top: 20px; }

.bw-btn {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bw-btn-primary {
    background: #e9e9e9;
    color: #9b9b9b;
    cursor: not-allowed;
}

.bw-btn-primary.active {
    background: var(--bw-navy);
    color: #fff;
    cursor: pointer;
}

.bw-btn-primary.active:hover { background: #0a2a55; }
.bw-btn-primary.loading { background: var(--bw-navy); color: #fff; cursor: wait; }

.bw-btn-arrow {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: none;
}

.bw-btn-primary.active .bw-btn-arrow.visible,
.bw-btn-primary.loading .bw-btn-arrow.visible { display: inline-block; }

/* ===== Step 3: Success ===== */
.bw-success__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 34px 24px;
    background: var(--bw-mint);
    border-radius: 12px;
    margin: 26px 0 22px;
}

.bw-success__check svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--bw-teal);
    stroke-width: 1.8;
}

.bw-success__word {
    font-size: 26px;
    font-weight: 700;
    color: var(--bw-ink);
}

.bw-success__thanks {
    font-size: 15px;
    font-weight: 700;
    color: var(--bw-ink);
    margin: 0 0 10px 0;
}

.bw-success__copy {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bw-ink);
    margin: 0 0 24px 0;
}

.bw-btn-calendar {
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1.5px solid var(--bw-teal);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bw-teal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.bw-btn-calendar:hover { background: var(--bw-teal); color: #fff; }
.bw-btn-calendar:hover svg { stroke: #fff; }

.bw-btn-calendar svg {
    width: 16px;
    height: 16px;
    stroke: var(--bw-teal);
    stroke-width: 2;
    fill: none;
    transition: stroke 0.2s ease;
}

/* ===== Error/Info Messages ===== */
.bw-error {
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 7px;
    padding: 12px 16px;
    margin-top: 14px;
    color: #c62828;
    font-size: 13px;
    display: none;
}

.bw-slot-error {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 7px;
    padding: 12px 16px;
    margin-bottom: 14px;
    color: #f57c00;
    font-size: 13px;
    display: none;
}

/* ===== Responsive ===== */

/* --- Desktop / laptop -----------------------------------------------------
   Up to here the card is a 500px mobile column, which on a wide screen sat in
   the left third of the row with the rest empty. From 992px it becomes a
   centred, full-width card: dates on the left, times on the right, and the
   form and confirmation kept at a readable measure rather than stretched. */
@media (min-width: 992px) {
    /* No cap: the card fills its WPBakery column so it lines up with every
       other row on the page (1280px of content at a 1440px viewport). The
       theme's own container is what limits it. */
    .booking-widget {
        max-width: none;
        margin: 28px 0;
        padding: 36px 40px;
        border-radius: 12px;
    }

    .booking-widget__title { font-size: 30px; }
    .booking-widget__header { margin-bottom: 24px; }

    .bw-step-1__cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 40px;
        align-items: start;
    }

    /* The right column is the taller of the two once slots load, so give the
       left one a little breathing room rather than letting it end abruptly. */
    .bw-step-1__col--left { padding-right: 4px; }

    .bw-date-grid { grid-template-columns: repeat(3, 1fr); }
    .bw-time-slots-grid { grid-template-columns: repeat(4, 1fr); }
    .bw-timeslot-section { margin-bottom: 0; }

    .bw-slots-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 232px;
        padding: 28px;
        background: var(--bw-mint);
        border-radius: 7px;
        color: var(--bw-muted);
        font-size: 14px;
        text-align: center;
    }

    .bw-slots-placeholder svg {
        width: 28px;
        height: 28px;
        stroke: var(--bw-teal);
        stroke-width: 1.6;
        fill: none;
    }

    /* Real slots replace the placeholder (class set in booking.js). */
    .booking-widget.bw-slots-open .bw-slots-placeholder { display: none; }

    /* A CTA the full width of a 1040px card looks like a banner. */
    .bw-step-1 .bw-button-section {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Step 2 fills the card too: name / name on one row, email / phone on the
       next, so the form lines up under the heading instead of leaving the
       right half of a 1040px card empty. `display: contents` lets the paired
       name fields drop straight into the same grid as the single ones. */
    .bw-contact-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px 20px;
    }

    .bw-form-row { display: contents; }

    /* Phone and email get a row to themselves; the two name fields pair up. */
    .bw-form-group--full { grid-column: 1 / -1; }

    .bw-step-2 .bw-button-section {
        max-width: 420px;
        margin: 24px auto 0;
    }

    .bw-step-3 {
        max-width: 640px;
        margin: 0 auto;
    }
}

/* The consultation popup keeps the narrow card — the modal is not 1040px
   wide, and its flow starts on the treatment picker. */
@media (min-width: 992px) {
    .w-popup .booking-widget,
    .w-popup-wrap section.booking-widget {
        max-width: 520px;
        padding: 28px !important;
    }

    .w-popup-wrap .bw-step-1__cols { display: block; }
    .w-popup-wrap .bw-slots-placeholder { display: none; }
    .w-popup-wrap .bw-time-slots-grid { grid-template-columns: repeat(5, 1fr); }
    .w-popup-wrap .bw-step-1 .bw-button-section { max-width: none; }
}

@media (max-width: 480px) {
    .booking-widget { padding: 18px; }
    .booking-widget__title { font-size: 22px; }
    .bw-date-btn { padding: 13px 8px; font-size: 13px; }
    .bw-period-tab { padding: 10px 6px; font-size: 12px; }
    .bw-time-slots-grid { grid-template-columns: repeat(4, 1fr); }
    .bw-time-slot-btn { padding: 10px 4px; font-size: 13px; }
    .bw-summary-tags { flex-direction: row; }
    .bw-summary-tag { min-width: 0; font-size: 13px; padding: 12px 14px; }
    .bw-success__card { padding: 26px 20px; }
    .bw-success__word { font-size: 22px; }
    .bw-help-tooltip { width: 220px; }
}