.amelia-v2-booking.am-cleaning-redesign #amelia-container {
    --am-clean-blue: #0d6efd;
    --am-clean-blue-dark: #0b4fb6;
    --am-clean-black: #101827;
    --am-clean-border: #d8e4ff;
    --am-clean-bg: #f4f8ff;
    --am-clean-text: #172033;
    --am-clean-muted: #7787a3;
    --am-clean-summary-w: 320px;

    /* Amelia derives every input/select text colour from these. We force the
       input background to white above, so leaving them at the theme's values
       risks white-on-white — the placeholder and the selected option both
       vanish. Pinned with !important because the Vue app writes some of these
       as INLINE styles on this same element (see --am-mw-main below).

       `--am-color-input-placeholder` has no default in Amelia's stylesheet; it
       is written from the Customize settings, so an unset install leaves
       --am-c-select-placeholder invalid and the placeholder inherits whatever
       colour happens to be in scope. */
    --am-c-inp-text: var(--am-clean-text) !important;
    --am-c-input-text: var(--am-clean-text) !important;
    --am-c-select-text: var(--am-clean-text) !important;
    --am-color-input-placeholder: var(--am-clean-muted) !important;
    --am-c-inp-placeholder: var(--am-clean-muted) !important;
    --am-c-input-placeholder: var(--am-clean-muted) !important;
    --am-c-select-placeholder: var(--am-clean-muted) !important;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main {
    border: 1px solid var(--am-clean-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(16, 24, 39, 0.1);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-footer {
    background: var(--am-clean-bg);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading {
    border-bottom: 1px solid var(--am-clean-border);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading-inner-title,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading * {
    color: var(--am-clean-text);
}

/* Amelia's progress bar is a 2px hairline (see v3 style.css), not a card.
   Only recolour it — padding/border here would inflate it. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar {
    gap: 4px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-step,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-current-step,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-passed-step {
    border-radius: 8px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-step {
    background: #e6eeff;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-current-step {
    background: var(--am-clean-blue);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-progress-bar .am-passed-step {
    background: var(--am-clean-black);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-button,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main button {
    border-radius: 8px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-button--primary {
    background: var(--am-clean-blue);
    border-color: var(--am-clean-blue);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-button--primary:hover {
    background: var(--am-clean-blue-dark);
    border-color: var(--am-clean-blue-dark);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-button--secondary {
    background: #fff;
    color: var(--am-clean-black);
    border-color: #9db4e8;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__info-form,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__init-form {
    color: var(--am-clean-text);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__info-form .el-input__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__init-form .el-input__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__info-form .el-textarea__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__init-form .el-textarea__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__info-form .el-select .el-input__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__init-form .el-select .el-input__inner,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content select,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content input,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content textarea {
    border-radius: 8px;
    border-color: #c8d6f5;
    background: #ffffff;
}

/* Element Plus 2.6 renders the select's value and its placeholder as a
   `<span class="el-select__selected-item">`, NOT as `.el-input__inner`, and
   Amelia's own rule for the placeholder span carries `!important`. The var
   pins above cover the normal path; these are the belt-and-braces fallback for
   an install whose Customize settings write a conflicting inline colour. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__selected-item,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__selected-item span,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__input {
    color: var(--am-clean-text) !important;
}

/* Must stay after the rule above — the placeholder span carries both classes.

   `z-index` is the other half of the fix. Element Plus ships
   `.el-select__placeholder { position:absolute; z-index:-1 }` and Amelia does
   not override it, so the placeholder paints behind the opaque background of
   whichever ancestor owns the stacking context. Our grid wrapper and
   `.am-fs__main-content` are both opaque, which is enough to swallow it.
   `z-index:0` gives the span its own stacking context so it paints in front of
   the select's own background instead. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__placeholder {
    z-index: 0;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__placeholder.is-transparent,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-select .el-select__placeholder.is-transparent span {
    color: var(--am-clean-muted) !important;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content input::placeholder,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content textarea::placeholder {
    color: var(--am-clean-muted);
    opacity: 1;
}

/* Relocated custom fields (Gate code and anything else with a renderStep) */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-cf-external-host {
    margin-top: 12px;
    border: 1px solid var(--am-clean-border);
    border-radius: 10px;
    background: #ffffff;
    padding: 12px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-cf-external {
    border: 1px solid #d6e2fb;
    border-radius: 10px;
    padding: 10px;
    background: #f9fbff;
}

/* ---------------------------------------------------------------------------
   Step 1 add-on controls — Area Size select + Bedrooms/Bathrooms counters.
   These are native Amelia Extras rendered as a friendlier surface; see
   amelia-native-cleaning-redesign.js.
   --------------------------------------------------------------------------- */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-addons {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--am-clean-text);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-area {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c8d6f5;
    border-radius: 8px;
    background: #ffffff;
    color: var(--am-clean-text);
    font-size: 14px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #bfd0f5;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter[hidden] {
    display: none;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--am-clean-black);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #dbe8ff;
    color: var(--am-clean-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #9ab2e5;
    background: #fff;
    color: #172033;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__btn:hover:not(:disabled) {
    background: #edf3ff;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-counter__value {
    min-width: 24px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-clean-black);
}

/* Bedroom / bathroom / area extras already have controls on step 1 */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-hidden-extra {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Booking Summary panel
   --------------------------------------------------------------------------- */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--am-clean-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--am-font-family), sans-serif;
    font-size: 14px;
    color: var(--am-clean-text);
}

/* Same blue as the stepper strip above it, so the card reads as part of the
   same surface instead of a black box bolted on. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background: var(--am-clean-blue);
    color: #ffffff;
}

/* Mirrors .am-fs-sb__step-heading in Amelia's style.css. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__title {
    font-family: var(--am-font-family), sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-height: 0;
    overflow-y: auto;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--collapsed .am-clean-summary__body {
    display: none;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Shown instead of the rows + total until the customer picks something, so an
   untouched card is a short block of guidance rather than a column of dashes.
   Visibility is driven entirely by the `--empty` class (not the `hidden`
   attribute) because `.am-clean-summary__rows` sets `display:flex`, which
   outranks the UA stylesheet's `[hidden] { display: none }`. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__empty {
    display: none;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--am-clean-muted);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--empty .am-clean-summary__empty {
    display: block;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--empty .am-clean-summary__rows,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--empty .am-clean-summary__rule,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--empty .am-clean-summary__total {
    display: none;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__row-label {
    color: #5b6b86;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__row-value {
    font-weight: 600;
    text-align: right;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__row-price {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--am-clean-blue);
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__rule {
    height: 1px;
    background: var(--am-clean-border);
}

/* Subtotal and tax. Hidden unless a tax actually matched — with no tax the
   subtotal is the total, and printing the same figure twice reads as a bug. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__money {
    display: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--taxed .am-clean-summary__money {
    display: flex;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary--empty .am-clean-summary__money {
    display: none;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__money-label {
    color: #5b6b86;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__money-value {
    font-weight: 600;
    text-align: right;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__total-label {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary__total-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--am-clean-blue);
}

/* ---------------------------------------------------------------------------
   Stepper strip — the sidebar reads as a horizontal band at every width
   ---------------------------------------------------------------------------
   Deliberately outside a media query. The bundle only renders `.am-fs-sb` when
   the container measures more than 560px (`l(u)>560` in stepForm-*.js), so on a
   phone there is no element to match and these rules are inert. What they cover
   is the ~560-767px band, where the sidebar DOES render and would otherwise be
   the stock 240px vertical column inside a stacked card.

   Placement only (`grid-column` / `grid-row`) stays in the >=768px block below,
   because that is the only place the wrapper is a grid.
   --------------------------------------------------------------------------- */

/* Height must be content-sized: in the stock row layout it was stretched to the
   wrapper's height. Width is `!important` because the bundle writes the 240px
   (72px collapsed) as an INLINE style. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    border-radius: 0 !important;
    background: var(--am-clean-blue);
    padding: 14px 20px;
}

/* Steps sit side by side and share the width evenly. `height` is `!important`
   because Amelia ships `calc(var(--am-dvh, 100vh) - 182px)` here. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: auto !important;
    padding: 0;
    overflow: visible;
    counter-reset: am-clean-step;
}

.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step {
    flex: 1 1 0;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 10px 12px;
}

/* Bookly-style "1. Service" numbering, generated in CSS */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-heading::before {
    counter-increment: am-clean-step;
    content: counter(am-clean-step) ". ";
    font-weight: 700;
}

/* The per-step summary of what was picked would make the strip tall.
   Delete this rule to bring it back. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-selection,
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-selection__wrapper {
    display: none !important;
}

/* "Collapse menu" is meaningless once the sidebar is a top strip. It is
   `position:absolute; bottom:16px`, so it has to be removed, not re-placed. */
.amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__footer {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Horizontal layout — stepper strip across the top and the
   summary panel takes a fixed right-hand column.
   ---------------------------------------------------------------------------
   Amelia renders the form as a flex ROW of `.am-fs-sb` (a fixed 240px sidebar)
   and `.am-fs__main`. A 2x2 grid gives the wide card with a Bookly-style stepper
   on top, the form on the left and our summary on the right, without touching
   the compiled Vue bundle.

   IMPORTANT: `#amelia-container` IS `.am-fs__wrapper` — the same element, not a
   parent. Amelia's own stylesheet writes `#amelia-container.am-fs__wrapper`
   (compound, no space). A descendant selector matches nothing here, which
   silently leaves the wrapper as a row while the sidebar overrides still apply
   — the sidebar then stretches over the whole card and clips the main panel.

   `!important` is needed on width and border-radius because the Vue app writes
   `--am-mw-main`, `--am-mw-fsm` and `--am-brad-main` as INLINE styles, which
   otherwise outrank this stylesheet.

   Height is `min-height`, never `height`: the summary card grows with the row
   count, and a fixed height clips it (that was the `ss.png` failure).

   Scoped to >=768px only because a two-column card needs the room. Everything
   below that stacks — see the `max-width: 767px` block near the end of the file.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .amelia-v2-booking.am-cleaning-redesign #amelia-container.am-fs__wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--am-clean-summary-w);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
        /* Do NOT use `width:auto` here: this box is shrink-to-fit in its parent,
           so `auto` collapses it to the content's max-content width (~520px). */
        width: 1208px;
        max-width: 100%;
        height: auto !important;
        min-height: 560px;
        max-height: none;
        margin: 16px auto 48px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(16, 24, 39, 0.16);
        background: #ffffff;
    }

    /* Strip styling is unconditional (above); only the grid placement is
       specific to this layout. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Main panel owns the left cell; the wrapper now owns the frame.
       `min-height:0` lets it actually shrink so the content can scroll. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        max-width: none !important;
        width: 100%;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }

    /* `.am-fs__main-inner` is `height:100%`. Making it a flex column lets the
       heading keep its natural height while the content box absorbs the rest,
       whatever the stepper strip ends up costing. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading {
        flex: 0 0 auto;
    }

    /* Amelia pins the content box to 444px; it has to flex here instead and
       scroll when a step is taller (e.g. the date picker). */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-content {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
        overflow-y: auto;
        /* wider gutters to match the card; the bottom value also reserves room
           for the absolutely positioned footer */
        padding: 20px clamp(20px, 2.4vw, 40px) 72px;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-heading,
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-footer {
        padding-left: clamp(20px, 2.4vw, 40px);
        padding-right: clamp(20px, 2.4vw, 40px);
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary {
        grid-column: 2;
        grid-row: 2;
        /* `align-self: start` (not the grid's default `stretch`) keeps the card
           at its content height. Stretching made it run the full length of the
           form column, leaving a tall empty white area under TOTAL. */
        align-self: start;
        min-height: 0;
        max-height: calc(100% - 32px);
        margin: 16px 16px 16px 0;
    }
}

/* Narrow desktop / tablet: the 320px column no longer fits next to the form, so
   the summary drops below it and spans the full width. */
@media (min-width: 768px) and (max-width: 1099px) {
    .amelia-v2-booking.am-cleaning-redesign #amelia-container.am-fs__wrapper {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb {
        grid-column: 1;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary {
        grid-column: 1;
        grid-row: 3;
        margin: 0 16px 16px;
    }
}

/* ---------------------------------------------------------------------------
   Date & Time step — calendar left, time slots right
   ---------------------------------------------------------------------------
   Stock Amelia stacks these: the month grid takes the full content width and the
   slots run underneath it, which made the step roughly twice as tall as every
   other one and pushed Continue below the fold (see date-time.png).

   `.am-advsc` (the FullCalendar root) and `.am-advsc__slots-wrapper` are already
   SIBLINGS inside `.am-advsc__wrapper`, so this needs no bundle patch — the
   wrapper just becomes a wrapping flex row.

   Why flex and not grid: the wrapper's children are conditional. Time zone,
   period pricing and the "no slots" status line each render only for some
   configurations, so any `nth-child` or fixed `grid-row` placement would slide
   out of alignment the moment one of them appears. Wrapping flex only cares
   about document order, which is stable.

   Height needs no fixing. FullCalendar derives its own height from
   `aspectRatio: 1.45` (`stepForm-6e3e84d3.js`), i.e. width / 1.45 — so narrowing
   the column shortens the calendar on its own. Nothing here sets a pixel height.

   The `am-mobile` / `am-mobile-s` variants are driven by the injected
   `containerWidth` (the form's width, not the calendar's), so shrinking this
   column does not flip the calendar into its mobile rendering.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 24px;
    }

    /* Everything that is not the calendar or the slot list stays a full-width
       band: header, duration, time zone, period pricing, status line. Declared
       as the default so a child we have not seen yet lands somewhere sane
       instead of squeezing into the calendar row. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__wrapper > * {
        flex: 0 0 100%;
        min-width: 0;
    }

    /* Rendered even when there is a single duration, and then it is an empty div
       that still costs a row gap. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__duration:empty {
        display: none;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__wrapper > .am-advsc {
        flex: 0 0 clamp(280px, 52%, 440px);
        margin-bottom: 0;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__wrapper > .am-advsc__slots-wrapper,
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__wrapper > .am-clean-dt-hint {
        flex: 1 1 240px;
    }

    /* The selected-date line is this column's heading now, so it gets the
       weight the stacked layout did not need. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__slots-heading {
        font-weight: 600;
        color: var(--am-clean-text);
        margin-bottom: 12px;
        padding: 0;
    }

    /* One slot per line: at ~40% of the content width, Amelia's shipped
       `width: calc(50% - 6px)` leaves about 130px, which is not enough for
       "9:00 AM - 10:00 AM" and wraps every label. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__slots {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        max-height: var(--am-clean-dt-slots-h, 320px);
        overflow-y: auto;
        /* room for the scrollbar so it never sits on top of a slot's border */
        padding-right: 4px;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-dt__calendar .am-advsc__slots-item {
        width: 100%;
    }

    /* Filler for the right-hand column before a date is picked. Amelia only
       renders `.am-advsc__slots-wrapper` once a date is selected (`v-if`), which
       would otherwise leave that half of the row blank and unexplained.

       The calendar's `flex-basis` is fixed, so its width does not depend on this
       node being present — FullCalendar is measured once and never has to
       re-layout. Inserted by amelia-native-cleaning-redesign.js. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-dt-hint {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
        padding: 20px;
        border: 1px dashed #c3d4f7;
        border-radius: 10px;
        background: #fbfdff;
        color: var(--am-clean-muted);
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-dt-hint[hidden] {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Phones and small tablets (< 768px) — the card becomes one column
   ---------------------------------------------------------------------------
   This block corrects an assumption that used to live here, namely that Amelia
   ships its own mobile layout below 768px and should be left alone. It does not.
   The bundle's ONLY media query is `@media only screen and (max-width: 767px)`
   and it contains no `am-fs` rule at all — it is almost entirely Element Plus
   `.el-col-xs-*` classes. Amelia's narrow-form variants (`am-fs__main-mobile`,
   `am-rw-480`, `am-fs__info-form-mobile`) are classes the bundle assigns from the
   CONTAINER's measured `offsetWidth`, and they only adjust inner padding and
   corner radii — never the shell.

   So below 768px the shell fell back to its own defaults:
   `.am-fs__wrapper { display: flex; height: 560px }` with `.am-fs-sb` pinned at
   240px. Our 320px summary card then became a third item in that fixed-height
   row, which is the breakage this fixes. A column is all it needs — the summary
   is already the wrapper's last child, so document order puts it below the form
   without any `order` juggling.

   The stepper strip needs nothing here; its rules are unconditional further up.
   Below a 560px container the bundle does not render `.am-fs-sb` at all, so on a
   phone the card is just form + summary.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .amelia-v2-booking.am-cleaning-redesign #amelia-container.am-fs__wrapper {
        display: flex;
        flex-direction: column;
        /* `--am-mw-main` is written inline (760px with the sidebar on, 520px
           without), and it feeds Amelia's own `max-width` declaration — so this
           has to win on specificity rather than by changing the variable. */
        width: 100%;
        max-width: 100%;
        /* The 560px is a hard `height`, not a min: without this the column is
           clipped the moment the summary has more than a couple of rows. */
        height: auto !important;
        min-height: 0;
        max-height: none;
        margin: 12px auto 32px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 12px 28px rgba(16, 24, 39, 0.14);
        background: #ffffff;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main {
        width: 100%;
        /* `--am-mw-fsm` is inline too, same reason as above. */
        max-width: none !important;
        min-height: 0;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }

    /* Amelia pins the content box to 444px (and to `calc(100% - 72px)` /
       `calc(100% - 136px)` on the `am-cap*` step variants), which is what made
       the fixed 560px shell work. Sizing it to its content is what lets the
       column collapse.

       Deliberately NO `max-height` + `overflow-y: auto` here, unlike the >=768px
       block. A capped box would be a scroll container inside a page that already
       scrolls, and on touch that means scroll-chaining and a hidden Continue
       button. Letting it grow gives one page scroll for the whole card.

       Three selectors, not one, purely for specificity. On a narrow container
       the bundle adds `am-fs__main-mobile` / `am-rw-480` to `.am-fs__main` and
       ships `#amelia-container .am-fs__main.am-rw-480 .am-fs__main-content
       { padding: 16px }` — 1 id + 4 classes, which outranks a plain
       `#amelia-container .am-fs__main-content` and would drop the bottom
       padding. Those are precisely the classes a phone gets, so the padding has
       to be reasserted at matching weight or the absolutely positioned footer
       lands on top of the last control. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main .am-fs__main-content,
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main-mobile .am-fs__main-content,
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs__main.am-rw-480 .am-fs__main-content {
        height: auto !important;
        min-height: 240px;
        max-height: none;
        /* Both axes, not just `overflow-y`. Amelia ships `overflow-x: hidden`
           here, and per spec a `visible` on one axis computes to `auto` when the
           other is not `visible` — so `overflow-y: visible` alone would quietly
           leave the scroll container in place. Releasing horizontal overflow is
           safe because the parent `.am-fs__main` is `overflow: hidden` and clips
           it anyway. */
        overflow: visible;
        /* the bottom value clears `.am-fs__main-footer`, which Amelia positions
           absolutely at the bottom of `.am-fs__main-inner` */
        padding: 16px 16px 72px;
    }

    /* Full width minus the card's gutter — `align-items: stretch` handles the
       width, so only the margins are set here. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-summary {
        margin: 0 12px 12px;
    }

    /* 560-767px only: the strip renders here (the bundle drops `.am-fs-sb`
       entirely below a 560px container), and five steps sharing ~520px leaves
       about 95px each, which wraps "Date & Time" onto three lines. Give each
       step a floor and let the strip scroll sideways instead. `flex-shrink: 0`
       is what makes the floor hold — without it `flex: 1 1 0` from the base rule
       still shrinks past `min-width`'s intent on some engines. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step-wrapper::-webkit-scrollbar {
        display: none;
    }

    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-fs-sb__step {
        flex: 0 0 auto;
        min-width: 116px;
        padding: 8px 10px;
    }

    /* The hint only makes sense next to the calendar; stacked, the slot list
       appears directly under the month grid and needs no stand-in. */
    .amelia-v2-booking.am-cleaning-redesign #amelia-container .am-clean-dt-hint {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   GOOGLE PLACES SUGGESTION DROPDOWN

   The address field's row widths need no rules here: Amelia's own stylesheet
   already ships `.am-fs__info-form .el-form-item { width: calc(50% - 12px) }`,
   `.am-cf-width-100 { width: 100% }` and, for the narrow container variant,
   `.am-fs__info-form-mobile .el-form-item { width: 100% }`. The field widths
   set in admin (Address 100, the rest 50) are what drive the layout.

   The dropdown is the part that does need styling. Google appends `.pac-container`
   to `document.body`, outside `#amelia-container`, so it cannot be scoped to the
   form and instead inherits the host theme's fonts and borders. Amelia already
   styles it globally for the same reason (`.pac-container { z-index: ... }` in
   the bundle), so this follows suit — deliberately cosmetic and low specificity,
   in case another plugin on the site also uses Places.
   --------------------------------------------------------------------------- */
.pac-container {
    border: 1px solid var(--am-clean-border, #d7e0f2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(23, 42, 84, 0.12);
    margin-top: 4px;
    padding: 4px 0;
    font-family: inherit;
    background: #ffffff;
}

.pac-container .pac-item {
    border-top: 0;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--am-clean-muted, #62759b);
    cursor: pointer;
}

.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
    background: #f2f6ff;
}

.pac-container .pac-item-query,
.pac-container .pac-matched {
    color: var(--am-clean-text, #1a2b4d);
    font-size: 14px;
}

/* Google's own attribution row. Removing it violates the Places terms, so it is
   only nudged to match the padding above it. */
.pac-container:after {
    margin-right: 10px;
}