/**
 * Microsoft Bookings Integration for Elementor - stepped booking widget.
 * Scoped to .mbw so it cannot leak into the rest of the theme.
 *
 * Palette follows the ShareCloud CVI:
 *   #004B87 accent, #3B97D3 secondary, #2C3E50 text, #F2F6FA surface.
 * Every interactive element sets its own background/colour with !important
 * so theme or Elementor button styles (e.g. red hover states) cannot bleed in.
 */

.mbw {
    --mbw-accent: #004B87;
    --mbw-accent-hover: #00365f;
    --mbw-accent-soft: #e6eef5;
    --mbw-accent-2: #3b97d3;
    --mbw-accent-contrast: #ffffff;
    --mbw-text: #2c3e50;
    --mbw-radius: 12px;
    --mbw-border: rgba(0, 75, 135, 0.18);
    --mbw-muted: rgba(44, 62, 80, 0.62);
    --mbw-surface: #f2f6fa;
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 24px;
    color: var(--mbw-text);
}

.mbw *,
.mbw *::before,
.mbw *::after {
    box-sizing: border-box;
}

/* Neutralise theme button styling inside the widget. */
.mbw button {
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none;
}

.mbw button:focus-visible {
    outline: 2px solid var(--mbw-accent-2);
    outline-offset: 2px;
}

/* ---------- progress ---------- */

.mbw-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.mbw-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: var(--mbw-muted);
}

.mbw-step + .mbw-step::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--mbw-border);
    display: block;
}

.mbw-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    border: 1px solid var(--mbw-border);
    background: transparent;
    color: inherit;
    flex: none;
}

.mbw-step.is-active {
    color: var(--mbw-accent);
    font-weight: 600;
}

.mbw-step.is-active .mbw-step-dot,
.mbw-step.is-done .mbw-step-dot {
    background: var(--mbw-accent) !important;
    border-color: var(--mbw-accent);
    color: var(--mbw-accent-contrast) !important;
}

.mbw-step.is-done {
    color: var(--mbw-text);
}

.mbw-step-button,
.mbw-step-button:hover,
.mbw-step-button:focus {
    background: none !important;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit !important;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mbw-step.is-done .mbw-step-button {
    cursor: pointer;
}

/* ---------- panel ---------- */

.mbw-panel {
    border: 1px solid var(--mbw-border);
    border-radius: var(--mbw-radius);
    padding: 20px;
    background: #ffffff;
}

.mbw-panel[hidden] {
    display: none;
}

.mbw-panel-head {
    margin: 0 0 16px;
}

.mbw-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--mbw-accent);
}

.mbw-subtitle {
    margin: 4px 0 0;
    font-size: 0.9em;
    color: var(--mbw-muted);
}

/* ---------- option cards (service / staff) ---------- */

.mbw-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.mbw-option {
    text-align: left;
    border: 1px solid var(--mbw-border);
    border-radius: var(--mbw-radius);
    background-color: #ffffff !important;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--mbw-text) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.mbw-option:hover:not(:disabled),
.mbw-option:focus:not(:disabled) {
    border-color: var(--mbw-accent);
    background-color: var(--mbw-accent-soft) !important;
    color: var(--mbw-text) !important;
}

.mbw-option.is-selected,
.mbw-option.is-selected:hover {
    border-color: var(--mbw-accent);
    background-color: var(--mbw-accent) !important;
    color: var(--mbw-accent-contrast) !important;
}

.mbw-option.is-selected .mbw-option-meta {
    color: rgba(255, 255, 255, 0.8);
}

.mbw-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mbw-option-label {
    display: block;
    font-weight: 600;
}

.mbw-option-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.85em;
    color: var(--mbw-muted);
}

/* ---------- calendar ---------- */

.mbw-cal {
    max-width: 340px;
}

.mbw-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mbw-cal-month {
    font-weight: 600;
    color: var(--mbw-accent);
}

.mbw-nav {
    border: 1px solid var(--mbw-border);
    background-color: #ffffff !important;
    color: var(--mbw-accent) !important;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.mbw-nav:hover:not(:disabled) {
    background-color: var(--mbw-accent) !important;
    border-color: var(--mbw-accent);
    color: var(--mbw-accent-contrast) !important;
}

.mbw-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mbw-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.mbw-dow {
    text-align: center;
    font-size: 0.68em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mbw-muted);
    padding-bottom: 2px;
}

.mbw-day {
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--mbw-surface) !important;
    color: var(--mbw-text) !important;
    font: inherit;
    font-size: 0.82em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.mbw-day.is-empty {
    background-color: transparent !important;
    cursor: default;
    pointer-events: none;
}

.mbw-day:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    background-color: transparent !important;
}

.mbw-day.is-available:hover,
.mbw-day.is-available:focus {
    background-color: var(--mbw-accent-soft) !important;
    border-color: var(--mbw-accent);
    color: var(--mbw-accent) !important;
}

.mbw-day.is-selected,
.mbw-day.is-selected:hover {
    background-color: var(--mbw-accent) !important;
    color: var(--mbw-accent-contrast) !important;
    border-color: var(--mbw-accent);
}

.mbw-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

/* ---------- slots ---------- */

.mbw-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.mbw-slot {
    border: 1px solid var(--mbw-border);
    border-radius: 10px;
    background-color: #ffffff !important;
    color: var(--mbw-text) !important;
    font: inherit;
    padding: 10px 6px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.mbw-slot:hover,
.mbw-slot:focus {
    border-color: var(--mbw-accent);
    background-color: var(--mbw-accent-soft) !important;
    color: var(--mbw-accent) !important;
}

.mbw-slot.is-selected,
.mbw-slot.is-selected:hover {
    background-color: var(--mbw-accent) !important;
    border-color: var(--mbw-accent);
    color: var(--mbw-accent-contrast) !important;
}


/* ---------- misc ---------- */

.mbw-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.mbw-chip {
    border: 1px solid var(--mbw-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85em;
    background: var(--mbw-accent-soft);
    color: var(--mbw-accent);
}

.mbw-notice,
.mbw-status,
.mbw-error {
    margin: 12px 0 0;
    font-size: 0.9em;
}

.mbw-error {
    color: #b3261e;
}

.mbw-status {
    color: var(--mbw-muted);
}

.mbw-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.mbw-back {
    border: 1px solid var(--mbw-border);
    background-color: #ffffff !important;
    color: var(--mbw-accent) !important;
    font: inherit;
    border-radius: 10px;
    padding: 9px 16px;
    cursor: pointer;
}

.mbw-back:hover {
    background-color: var(--mbw-accent) !important;
    border-color: var(--mbw-accent);
    color: var(--mbw-accent-contrast) !important;
}

.mbw-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--mbw-border);
    border-top-color: var(--mbw-accent);
    border-radius: 50%;
    animation: mbw-spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}

@keyframes mbw-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Elementor form integration ---------- */

.mbw-hidden-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mbw-form-pending .elementor-field-type-submit,
.mbw-form-pending .e-form__buttons {
    display: none !important;
}

/* The widget is injected next to the Elementor form, so it must always claim
   the full width of its container - otherwise it inherits an intrinsic width
   and renders around half the screen on phones/tablets. */
.mbw,
.mbw-panel,
.mbw-cal,
.mbw-grid,
.mbw-options,
.mbw-slots {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mbw-cal {
    max-width: 340px;
    margin-inline: auto;
}

/* Elementor's own mobile/tablet breakpoint is 767px; the old 600px query left
   a 601-767px band still using the narrow desktop sizing. */
@media (max-width: 767px) {
    .mbw-panel { padding: 14px; }
    .mbw-cal { max-width: 100%; margin-inline: 0; }
    .mbw-day { height: 40px; font-size: 0.9em; }
    .mbw-options { grid-template-columns: 1fr; }
    .mbw-step span:not(.mbw-step-dot) { display: none; }
}

/* ---------- calendar: guaranteed full width on phones ----------
   The date step still rendered around half-width on some Elementor layouts
   because the 340px desktop cap (and the intrinsic width of the 7-column
   grid) survived the breakpoint. These rules make the calendar strictly
   fluid: it always fills its container and the day cells stay square. */
.mbw .mbw-cal {
    width: 100%;
    box-sizing: border-box;
}

.mbw .mbw-grid {
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mbw .mbw-day,
.mbw .mbw-dow {
    min-width: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .mbw .mbw-cal {
        max-width: 100% !important;
        min-width: 100% !important;
        margin-inline: 0 !important;
    }

    .mbw .mbw-grid {
        gap: 4px;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .mbw .mbw-day {
        height: auto !important;
        aspect-ratio: 1 / 1;
        font-size: 0.95em;
    }
}


/* ---------- full-width safety net ----------
   Belt-and-braces version of the JS stretch(): even if a theme wraps the
   widget in a shrink-to-fit box, the widget itself never renders narrower
   than its container, on any step. */
.mbw {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 1 1 100%;
    align-self: stretch;
}

.mbw-panel,
.mbw-options,
.mbw-slots,
.mbw-summary {
    width: 100%;
    max-width: 100%;
}

/* minmax(220px, ...) gave the service grid a 220px intrinsic width, which is
   what shrink-to-fit parents latched onto. min() keeps it fluid. */
.mbw-options {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

@media (max-width: 767px) {
    .mbw-options {
        grid-template-columns: 1fr !important;
    }

    .mbw-cal {
        max-width: none !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }
}


/* ---------- calendar sizing on desktop ----------
   Now that the panel always claims the full container width, the old 340px cap
   made the calendar look tiny inside it. The calendar scales with the panel and
   only stops growing at a comfortable reading size; day cells stay square. */
.mbw .mbw-cal {
    max-width: 560px !important;
    margin-inline: 0 !important;
}

.mbw .mbw-grid {
    gap: 6px;
}

.mbw .mbw-day,
.mbw .mbw-dow {
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mbw .mbw-dow {
    aspect-ratio: auto;
}

@media (max-width: 767px) {
    .mbw .mbw-cal {
        max-width: none !important;
    }
}


/* ---------- calendar: compact desktop layout ----------
   Square day cells made the calendar tall enough to require scrolling on
   smaller desktop resolutions. On >=768px the cells become landscape
   rectangles with a hard height cap, so the whole calendar fits above the
   fold. Mobile sizing (<768px) is untouched. */
@media (min-width: 768px) {
    .mbw .mbw-cal {
        max-width: 520px !important;
    }

    .mbw .mbw-grid {
        gap: 4px;
    }

    .mbw .mbw-day {
        aspect-ratio: 1.7 / 1 !important;
        height: auto !important;
        max-height: 38px;
        min-height: 26px;
        border-radius: 6px;
        font-size: 0.8em;
    }

    .mbw .mbw-dow {
        aspect-ratio: auto !important;
        height: auto !important;
        max-height: none;
        min-height: 0;
        font-size: 0.64em;
        padding-bottom: 1px;
    }

    .mbw .mbw-cal-head {
        margin-bottom: 6px;
    }

    .mbw .mbw-day.is-today::after {
        bottom: 3px;
        width: 3px;
        height: 3px;
    }
}


/* ---------- time slots with mixed team members ----------
   When a day's free times come from more than one team member, each slot shows
   whose calendar it belongs to. */
.mbw-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}

.mbw-slot-time {
    font-weight: 600;
}

.mbw-slot-staff {
    display: block;
    margin-top: 2px;
    font-size: 0.72em;
    opacity: 0.75;
}