/*

 * BookingPress — Vue 3 frontend booking form styles.

 *

 * Step 2 only provides the minimum needed to support mounting.

 * Legacy parity styles migrate in a later step.

 */



.bpa-frontend-main-container.bpa-frontend-vue3 {

    position: relative;



    /* ------------------------------------------------------------

     * Legacy CSS variables (copied from css/bookingpress_variables.css).

     *

     * The Vue 3 shortcode does NOT enqueue bookingpress_variables.css,

     * so every `var(--bpa-*)` reference in booking-form.css would

     * otherwise fall back to a hard-coded default (and diverge from

     * legacy tints). Declare the full legacy token set here, scoped

     * to our container so it does not bleed onto other plugins.

     * Values are byte-for-byte from the legacy :root block.

     * ------------------------------------------------------------ */

    --bpa-pt-main-green:                 #12D488;

    --bpa-pt-main-green-darker:          #0DC37C;

    --bpa-pt-navy-blue:                  #2C33AE;

    --bpa-pt-fuchsia-purple:             #D436C4;

    --bpa-pt-royal-blue:                 #2167F1;

    --bpa-pt-blue:                       #1F63E7;

    --bpa-pt-brown:                      #834E1E;

    --bpa-pt-secondary-orange:           #F5AE41;

    --bpa-pt-secondary-orange-darker:    #ECA335;

    --bpa-sc-success:                    #01CB62;

    --bpa-sc-success-darker:             #0BAC58;

    --bpa-sc-warning:                    #F4B125;

    --bpa-sc-danger:                     #EE2445;

    --bpa-sc-danger-darker:              #CB1936;

    --bpa-dt-black-400:                  #202C45;

    --bpa-dt-black-400-darker:           #121B2C;

    --bpa-dt-black-300:                  #535D71;

    --bpa-dt-black-200:                  #727E95;

    --bpa-dt-black-100:                  #B8C1D3;

    --bpa-gt-gray-400:                   #CFD6E5;

    --bpa-gt-gray-300:                   #DCE4F5;

    --bpa-gt-gray-200:                   #E9EDF5;

    --bpa-gt-gray-100:                   #F4F7FB;

    --bpa-gt-gray-50:                    #FAFCFF;

    --bpa-cl-white:                      #ffffff;

    --bpa-primary-font:                  'Poppins', sans-serif;

    --bpa-secondary-font:                'Inter', sans-serif;

    --bpa-radius-12px:                   12px;

    --bpa-radius-16px:                   16px;

    --bpa-radius-8px:                    8px;

    --bpa-radius-6px:                    6px;

    --bpa-radius-4px:                    4px;

    --bpa-radius-2px:                    2px;

    --bpa-radius-circle:                 50%;

}



.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-frontend-vue3-root {

    position: relative;

    width: 100%;

}



.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-frontend-vue3-loader {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 120px;

}



/* ---------- Tab panel body — neutralise default focus outline ----------

 *

 * The Vue 3 step panels carry `tabindex="1"` (mirrored from the legacy

 * Vue 2 template). Browsers paint a default ~3px black `outline` on

 * focusable elements, which renders as a heavy black border around the

 * entire `.bpa-front-tabs--panel-body` whenever any inner field gets

 * focus — most visible on Chromium-based browsers. Legacy Vue 2 didn't

 * show this because its custom CSS removed the outline globally.

 *

 * We mirror that by suppressing the outline only when the panel itself

 * is focused (default state OR keyboard focus), without touching focus

 * styling on inner controls. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body:focus,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body:focus-visible {

    outline: none !important;

}



/* ---------- Step 3C: service tab parity anchors ---------- */



/*

 * Scope the anchors under our root so they do not bleed onto legacy

 * `[bookingpress_form]` markup rendered on the same page.

 * Visual styling (colors, spacing, borders) is inherited from the

 * legacy `bookingpress_front.css` because the class names match.

 */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-cat-items-wrapper {

    width: 100%;

}



/* Service grid: defer to legacy `.bpa-front-module--service-items-row`

 * grid rules in bookingpress_front.css — do NOT override with flex here.

 * Legacy applies display:grid + auto-fit minmax(380px,1fr) and collapses

 * to 1-col at ≤991px via its own media queries. */



/* Category pills: legacy rules are keyed on `.bpa-front-ci-pill.el-tag`,

 * which never matches BpUi's `.bp-tag`. Replicate the outlined look here,

 * scoped to the service panel so we don't bleed onto other BpUi tags.

 *

 * Specificity note: BpUi ships `.bpa-tag.bp-tag { padding:4px 10px;

 * border-radius:6px; font-size:12px; font-weight:600 }` and an

 * `.bpa-tag.bp-tag.is-clickable:hover { border-color: black-100 }` rule

 * at (0,2,0) / (0,3,1). Our selector chain below sits at (0,4,0) / (0,5,0),

 * so every override here wins without `!important`. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill {

    display: inline-flex;

    align-items: center;

    height: auto;

    min-height: 0;

    padding: 6px 12px;

    line-height: 20px;

    margin: 0 12px 12px 0;

    font-weight: 500;

    font-size: 16px;

    color: var(--bpa-dt-black-300);

    background-color: transparent;

    border: 1px solid var(--bpa-gt-gray-400);

    border-radius: var(--bpa-radius-4px);

    cursor: pointer;

    font-family: var(--bpa-primary-font);

    min-width: 0;

    max-width: fit-content;

    vertical-align: middle;

    transition: border-color .2s ease, color .2s ease;

    box-sizing: border-box;

}

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill:hover {

    background-color: transparent;

    border-color: var(--bpa-pt-main-green);

    color: var(--bpa-dt-black-400);

}

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill.__bpa-is-active {

    background-color: transparent;

    color: var(--bpa-dt-black-400);

    border-color: var(--bpa-pt-main-green);

}



/* BpUi wraps every slotted child in `<span class="bp-tag__content">`

 * with no explicit `display`, so a block-level `<div>` child (our

 * `.bpa-front-ci-item-title`) forces its own line and the active-state

 * <svg> ends up stacked below the label. Forcing the wrapper to

 * inline-flex puts label + icon on the same row, matching legacy.

 *

 * Legacy puts the svg as a direct child of the pill with

 * `margin-left: 6px`. BpUi's extra `.bp-tag__content` wrapper means we

 * cannot use that directly — the svg's margin-left is applied inside

 * the wrapper instead, keeping the same visual offset from the title. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill .bp-tag__content {

    display: inline-flex;

    align-items: center;

    white-space: pre-wrap;

    overflow: visible;

    text-overflow: clip;

    line-height: inherit;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill .bpa-front-ci-item-title {

    display: inline;

    max-width: 200px;

    white-space: pre-wrap;

    line-height: inherit;

}



/* Active-state checkmark: only rendered when active. Size + spacing are

 * byte-for-byte matches of legacy `.bpa-front-ci-pill.el-tag svg`

 * (width:20px; margin-left:6px; green fill on active). */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-ci-pill svg {

    width: 20px;

    height: 20px;

    margin: 0 0 0 6px;

    flex: 0 0 auto;

    fill: var(--bpa-pt-main-green);

}



/* Responsive parity with legacy @media breakpoints. Values mirror

 * `bookingpress_front.css` — pill metrics change at 1367/1024/576 and

 * svg shrinks at 1024/576 (legacy does NOT shrink svg at 1367). */

@media (min-width: 1200px) and (max-width: 1367px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-tabs--panel-body__service .bpa-front-ci-pill {

        padding: 8px 12px;

        line-height: 18px;

        margin: 0 20px 20px 0;

        font-size: 15px;

    }

}

@media (max-width: 1024px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-tabs--panel-body__service .bpa-front-ci-pill {

        padding: 8px 12px;

        line-height: 18px;

        margin: 0 16px 16px 0;

        font-size: 14px;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-tabs--panel-body__service .bpa-front-ci-pill svg {

        width: 16px;

        height: 16px;

        margin-left: 4px;

    }

}

@media (max-width: 576px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-tabs--panel-body__service .bpa-front-ci-pill {

        padding: 6px;

        line-height: 18px;

        margin: 0 12px 12px 0;

        font-size: 14px;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-tabs--panel-body__service .bpa-front-ci-pill svg {

        width: 14px;

        height: 14px;

        margin-left: 4px;

    }

}



/* ---------- Next button: trailing arrow icon (legacy parity) ----------

 *

 * Legacy renders `<svg>` directly after the `<strong>` next-step label

 * and relies on `.bpa-front-btn svg { width:20px }` +

 * `.bpa-front-btn.bpa-front-btn--primary > span svg { margin-left:4px }`.

 * BpUi wraps the button slot in its own element and the BpUi base

 * stylesheet also resets svg sizing, so those legacy rules do not

 * always reach the DOM. Re-declare the arrow sizing scoped to our root

 * and to `.bpa-front-btn--primary` only so we don't bleed onto the

 * Go Back secondary button (which has no inline svg today anyway). */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--foot .bpa-front-btn--primary svg {

    width: 20px;

    height: 20px;

    margin-left: 6px;

    fill: var(--bpa-cl-white);

    vertical-align: middle;

    flex: 0 0 auto;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--foot .bpa-front-btn--borderless svg {

    width: 20px;

    height: 20px;

    margin-right: 6px;

    fill: currentColor;

    vertical-align: middle;

    flex: 0 0 auto;

}



/* Correction #5: no-services placeholder + preselected-service block */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-no-service-placeholder,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-tabs--panel-body__service .bpa-front-module--preselected {

    width: 100%;

    padding: 16px 0;

    text-align: center;

}



/* ---------- Step 3E: basic-details 1-column layout ----------

 *

 * Every field in the Basic Details form renders in its own full-width

 * row on every breakpoint. The template already sets xs..xl = 24 on

 * each <bp-ui-col>, so per-field width is handled by BpUi's own

 * `.bp-col-xs-24` rule. These styles only cover (a) vertical rhythm

 * between fields, (b) the legacy entrance animation, and (c) ensuring

 * no stale grid rule from elsewhere can pull the column off 100%.

 *

 * Scope is confined to .bpa-front-module--bd-form to avoid bleed

 * onto other BpUi grids on the page.

 */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row [class*="bp-col-"] {

    flex: 0 0 100%;

    max-width: 100%;

    margin-bottom: 20px;

    -webkit-animation-name: bpaFadeInUp;

            animation-name: bpaFadeInUp;

    animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);

    -webkit-animation-duration: .3s;

            animation-duration: .3s;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row [class*="bp-col-"].bpa-active-col {

    z-index: 99;

    position: relative;

}



/* Form-item children fill the column; inputs/textarea stretch to the full

 * available width so the 1-column layout reads consistently. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row .bp-form-item,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row .bpa-front-form-control,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row .bp-input,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row .bp-textarea {

    width: 100%;

}



/* ============================================================

 * Basic Details — form-item label + input parity with legacy

 *

 * Legacy (Vue 2 / Element UI) renders labels ABOVE inputs via

 * CSS (`float:none; display:inline-block`) layered on its

 * float-based form layout. Element Plus (Vue 3) uses flex layout

 * and defaults to `label-position="right"` (labels on the LEFT

 * of the input). We set `label-position="top"` +

 * `require-asterisk-position="right"` on <bp-ui-form> (see

 * booking-form.js) and mirror the legacy label typography,

 * required-asterisk positioning, and input chrome here.

 *

 * Reference legacy rules (css/bookingpress_front.css):

 *   .el-form-item { margin-bottom: 22px; }

 *   .el-form-item__label { font-size:14px; line-height:18px;

 *                          font-weight:500; color:var(--bpa-dt-black-300);

 *                          display:inline-block; margin-bottom:6px;

 *                          float:none; padding:0; position:relative; }

 *   .bpa-front-form-control input { padding:10px 16px; height:auto;

 *                          border:1px solid var(--bpa-gt-gray-400);

 *                          border-radius:var(--bpa-radius-4px); }

 *   .bpa-front-form-control input:focus { box-shadow:0 0 0 3px

 *                          rgba(207,214,229,.24); }

 *

 * In Vue 3 the legacy input rules leak onto `.bp-input__inner`

 * AND Element Plus ships its own `.bp-input__wrapper` border

 * (inset box-shadow), which together renders a double border.

 * We neutralize the wrapper's shadow so only the legacy

 * single-border input chrome remains visible.

 * ============================================================ */



/* Form-item margin + block layout.

 *

 * Legacy sets `.el-form-item { margin-bottom: 0 }` (zero) and puts the

 * inter-field spacing on the COLUMN (`.el-col { margin-bottom: 20px }`

 * in the narrow/stacked layout). We must do the same — otherwise the

 * column margin (20px) and the form-item margin (default 18-22px)

 * stack, doubling the gap between fields. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item {

    display: block;

    margin-bottom: 0 !important;

}



/* Label: block, no Element Plus 32px height, legacy typography.

 * Legacy label has `margin-bottom: 6px` from the label text to the

 * input, no additional padding. We mirror that — a single 6px gap. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item__label-wrap,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item__label {

    display: inline-block;

    float: none;

    width: auto !important;

    max-width: 100%;

    height: auto !important;

    padding: 0 !important;

    margin: 0 0 6px 0 !important;

    line-height: 18px !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: var(--bpa-dt-black-300, #1f2937) !important;

    font-family: var(--bpa-primary-font, inherit) !important;

    text-align: left !important;

    position: relative;

}



.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--bd-form .bp-form-item__content {

    display: block;

    margin-left: 0 !important;

    line-height: 40px !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--bd-form .bp-form-item__content .bp-checkbox-group{

    line-height: 40px !important;

}



/* Required asterisk: tint + spacing. Position (right:-14px; top:0) is

 * already handled by bookingpress-ui.min.css for .asterisk-right. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-required:not(.is-no-asterisk)

    > .bp-form-item__label-wrap > .bp-form-item__label:after,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-required:not(.is-no-asterisk)

    > .bp-form-item__label:after {

    color: var(--bpa-sc-danger, #ef4444);

    margin-left: 4px;

}



/* ---- Input chrome ------------------------------------------------

 *

 * The Vue 3 shortcode does NOT enqueue `bookingpress_front.css`, so

 * the legacy rule `.bpa-front-form-control input { border:1px solid

 * var(--bpa-gt-gray-400); ... }` is not available. We re-create

 * the legacy input look directly on the Vue 3 `.bp-input__wrapper`,

 * which is the DOM element that owns the visual border. The inner

 * `.bp-input__inner` is kept fully chrome-less (no border, no

 * outline, no box-shadow) so there is exactly one visible frame.

 *

 * Border-color is sourced from `--bp-v3-border` (emitted by

 * CustomizeCssGenerator from the customize-panel `border_color`

 * setting) so text / email inputs track the same color as the

 * `.bpa-front-form-control` rule used by `<textarea>` and the

 * `.bpa-front-form-control.--bpa-country-dropdown` override used

 * by the phone field. Without this, the wrapper here pinned the

 * legacy `--bpa-gt-gray-400` constant and text inputs visibly

 * drifted from the other field types as soon as the admin picked

 * a non-default border color.

 *

 * Legacy values (bookingpress_front.css):

 *   padding:10px 16px; font-size:14px; line-height:18px;

 *   font-weight:400; color:var(--bpa-dt-black-400);

 *   background:transparent; border:1px solid <border-color>;

 *   border-radius:var(--bpa-radius-4px);

 *   focus: border-color unchanged, box-shadow:0 0 0 3px rgba(207,214,229,.24).

 * ---------------------------------------------------------------- */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-textarea {

    --bp-input-bg-color: transparent;

    line-height: normal;

    width: 100%;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__wrapper {

    display: flex;

    align-items: center;

    padding: 10px 16px !important;

    background-color: transparent !important;

    border: 1px solid var(--bp-v3-border, #CFD6E5) !important;

    border-radius: var(--bpa-radius-4px, 4px) !important;

    box-shadow: none !important;

    transition: box-shadow .2s ease;

    width: 100%;

    box-sizing: border-box;

}



.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-module--bd-form .bpa-front-form-control.bp-select .bp-select__wrapper{

    box-shadow: none !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__wrapper:hover {

    box-shadow: none !important;

    border-color: var(--bp-v3-border, #CFD6E5) !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input.is-focus .bp-input__wrapper,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__wrapper.is-focus,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__wrapper:focus-within {

    border-color: var(--bp-v3-border, #CFD6E5) !important;

    box-shadow: 0 0 0 3px rgba(207, 214, 229, .24) !important;

    outline: 0 !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-front-form-control--date-picker .bp-input__wrapper.is-focus{

        box-shadow:none !important;

    }



/* Chrome-less inner input — text + caret only.

 * `color` + `font-family` are intentionally OMITTED here so the customize

 * generator (form-v3-custom.css) can set them from the `label_title_color`

 * and `title_font_family` keys without being beaten by this higher-specificity

 * selector. Without that omission the typed text doesn't track customize

 * (regression Issue 1 in batch-7 manual QA). */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__inner {

    width: 100%;

    height: auto !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: 0 !important;

    font-size: 14px !important;

    line-height: 18px !important;

    font-weight: 400 !important;

    box-sizing: border-box;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__inner::placeholder {

    /* Color + font-family are set by the customize generator (form-v3-custom.css)

     * — see CustomizeCssGenerator::compile_legacy_booking_form_parity(). Leaving

     * those declarations OUT of this rule prevents this higher-specificity

     * selector from undercutting the customize layer (Issue 8 in batch-5 QA). */

    font-weight: 400;

    font-size: 14px;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input.is-disabled .bp-input__wrapper {

    background-color: var(--bpa-gt-gray-100, #f3f4f6) !important;

    border-color: var(--bpa-gt-gray-400, #cfd6e5) !important;

    box-shadow: none !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input.is-disabled .bp-input__inner {

    color: var(--bpa-dt-black-200, #6b7280) !important;

    -webkit-text-fill-color: var(--bpa-dt-black-200, #6b7280) !important;

}



/* Textarea: legacy resizes off, fixed 92px min height. `.bp-textarea__inner`

 * in the Vue 3 bundle sits where legacy `.el-textarea__inner` did.

 * Textarea is wrapped in `.bp-input__wrapper.bp-input__wrapper--textarea`

 * — wrapper owns the border / focus shadow (mirrors the input pattern

 * so :focus styling can't fall through to the customize generator's

 * primary-coloured `textarea.bpa-front-form-control:focus` rule). The

 * <textarea> itself stays chrome-less; only height/resize/font here. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-textarea__inner {

    padding: 10px 16px !important;

    font-size: 14px !important;

    line-height: 18px !important;

    font-weight: 400 !important;

    background-color: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    width: 100%;

    max-width: 100% !important;

    height: 92px !important;

    resize: none !important;

    box-shadow: none !important;

    outline: 0 !important;

    /* `color` + `font-family` are emitted by the customize generator (see

     * the bp-input__inner rule above for the same reasoning — Issue 1

     * batch-7 manual QA). */

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-textarea__inner:focus {

    border: 0 !important;

    background-color: transparent !important;

    box-shadow: none !important;

    outline: 0 !important;

}



/* Wrapper variant for textarea: block layout (no flex centering — the

 * <textarea> sets its own height) and zero padding (the <textarea>'s

 * own padding paints the inset). Border + focus shadow still come from

 * the shared `.bp-input__wrapper` rules above. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-input__wrapper.bp-input__wrapper--textarea {

    display: block;

    padding: 0 !important;

}



/* ============================================================

 * Phone field — merge dropdown + input into a single bordered row

 *

 * Legacy `.bpa-front-form-control.--bpa-country-dropdown` (now

 * also applied to the Vue 3 <bp-ui-tel-input>) scopes the border

 * to the OUTER container and flattens inner borders so the flag

 * dropdown and phone input read as one field.

 *

 * The Vue 3 tel wrapper adds its own `.bp-ui-tel-input` root

 * (plus `.vue-tel-input` inside). The border should live on

 * `.vue-tel-input`, not on the outer `.bp-ui-tel-input` — otherwise

 * we get another double border.

 * ============================================================ */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input {

    border: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    width: 100%;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vue-tel-input {

    display: flex;

    align-items: stretch;

    border: 1px solid var(--bpa-gt-gray-400, #cfd6e5) !important;

    border-radius: var(--bpa-radius-4px, 4px);

    background: transparent;

    width: 100%;

    box-shadow: none !important;

    /* Issue 2 — strip the upstream `bp-ui-tel-input__surface` padding

     * (`0 16px`) on every viewport so the country dropdown sits flush

     * against the left wrapper edge. With the padding present, the

     * BpUi error-state inset/outset red box-shadow paints a ring 16px

     * away from the actual dropdown, and the dropdown's own

     * `border-right` separator visually breaks the field into two

     * boxes (https://prnt.sc/IXhkw1z7ytVb). Removing the padding

     * collapses everything into a single bordered row that matches

     * the legacy Vue 2 visual. */

    padding: 0 !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vue-tel-input:focus-within {

    box-shadow: 0 0 0 3px rgba(207, 214, 229, .24);

    outline: 0;

}



/* Country dropdown pill on the left — no outer border, only a

 * right-hand divider separating it from the number input.

 *

 * Width-sizing: with `showDialCodeInSelection: false` (passed from

 * booking-form.js) the pill shows only flag + caret, so it can be

 * narrower than the stock vue-tel-input default. `width: auto;

 * flex: 0 0 auto; min-width: 0` collapses the pill to its content

 * width plus padding (≈ 60px), matching the legacy shortcode. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown {

    padding: 10px 12px;

    background-color: transparent;

    border: 0 !important;

    border-right: 1px solid var(--bpa-gt-gray-400) !important;

    border-radius: var(--bpa-radius-4px) 0 0 var(--bpa-radius-4px);

    box-shadow: none !important;

    width: auto !important;

    min-width: 0 !important;

    flex: 0 0 auto;

    margin:0 !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__selection {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    line-height: 1;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__country-code {

    display: none !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-arrow {

    margin-left: 2px;

    font-size: 10px;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown:focus,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown.open {

    background-color: var(--bpa-gt-gray-100, #f3f4f6);

}



/* Hover state — keep the country pill background flush with the

 * surrounding field on hover. Vue 3 ships an upstream

 * `.vti__dropdown:hover { background-color: #f3f3f3 }` rule from

 * `bookingpress-ui.min.css` (the bundled vue-tel-input library

 * default) which legacy Vue 2 did not have visible because legacy

 * custom CSS overrode it. We mirror that override here. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown:hover {

    background-color: transparent !important;

}



/* The phone number <input> on the right side — no border, flush

 * with the dropdown, rounded only on the right corners.

 * `color` is intentionally OMITTED so the customize generator's

 * `label_title_color` rule (form-v3-custom.css) can paint the typed

 * phone number text — without that omission this 4-class selector

 * beats the customize layer and the phone number renders in the

 * hardcoded grey while every other text field tracks customize

 * (Issue 1 follow-up in batch-7 manual QA). */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__input,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input input.vti__phone {

    border: 0 !important;

    border-radius: 0 var(--bpa-radius-4px, 4px) var(--bpa-radius-4px, 4px) 0 !important;

    box-shadow: none !important;

    padding: 10px 16px !important;

    height: auto !important;

    font-size: 14px !important;

    line-height: 18px !important;

    background: transparent !important;

    width: 100%;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__input:focus {

    box-shadow: none !important;

    outline: 0;

}



/* Dropdown menu typography parity.

 *

 * The list is `position: absolute` inside the 63px-wide `.vti__dropdown`

 * trigger, so by default it shares the trigger's stacking context with

 * only `z-index: 2`. With the 1-column basic-details layout, sibling

 * form-rows below the phone field would render in document order ON TOP

 * of the dropdown popup. We lift the list out of the local stack with a

 * high z-index and add an opaque background + a stronger drop shadow so

 * it visually elevates above the form. The col-level lift is handled

 * separately below via `:has()`. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-list {

    background-color: var(--bpa-cl-white, #fff);

    border: 1px solid var(--bpa-gt-gray-400, #cfd6e5);

    padding: 0 !important;

    margin: 0 !important;

    list-style: none !important;

    line-height: normal !important;

    z-index: 9999 !important;

    box-shadow: 0 8px 24px rgba(32, 44, 69, .18) !important;

}



/* Lift the column owning the open phone dropdown above its siblings so

 * the popup is not painted under the next form row. Mirrors the legacy

 * `.bpa-active-col { z-index: 99; position: relative }` behaviour

 * (which legacy toggled imperatively from the @open / @close handlers

 * on `<vue-tel-input>`). The Vue 3 template doesn't currently emit

 * those handlers, so we use `:has()` to detect the open state from CSS

 * — supported in all evergreen browsers since 2023. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form

    .bpa-bd-fields-row

    [class*="bp-col-"]:has(.vti__dropdown-list) {

    z-index: 99;

    position: relative;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-item {

    padding: 6px 16px;

    line-height: 24px;

    margin: 0 !important;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-item.highlighted {

    background-color: var(--bpa-gt-gray-100, #f3f4f6);

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-item span,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-item strong {

    font-size: 13px;

    font-weight: 500;

    color: var(--bpa-dt-black-300, #1f2937);

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__flag-wrapper span {

    margin-left: 0;

    margin-right: 0;

}



.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown .vti__selection svg {

    width: 16px;

    fill: var(--bpa-dt-black-200, #6b7280);

}



/* Stagger field entrance exactly like legacy (0.1s → 1.1s). */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(1)  { animation-delay: .1s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(2)  { animation-delay: .2s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(3)  { animation-delay: .3s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(4)  { animation-delay: .4s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(5)  { animation-delay: .5s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(6)  { animation-delay: .6s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(7)  { animation-delay: .7s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(8)  { animation-delay: .8s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(9)  { animation-delay: .8s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(10) { animation-delay: .9s; }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(11) { animation-delay: 1s;  }

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"]:nth-child(12) { animation-delay: 1.1s; }



/* ============================================================

 * Empty view (Service Step) — legacy parity port of

 * bookingpress_front.css rules for `.bpa-front-data-empty-view`.

 *

 * The Vue 3 shortcode does NOT enqueue the legacy

 * `bookingpress_front.css`; the legacy file also has a default

 * rule `#bpa-front-data-empty-view { display: none }` so we

 * mirror only the visible-state rules scoped under the Vue 3

 * container. Values are byte-for-byte identical to the legacy

 * rules so the illustrated empty state looks the same as in

 * the legacy shortcode.

 * ============================================================ */

/* Specificity note: legacy `bookingpress_front.css` ships

 * `#bpa-front-data-empty-view { display: none }` at ID specificity

 * (0,1,0,0), which beats a pure-class selector. We bump our rules

 * by including the ID so they reliably override the legacy hide. */

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view.__bpa-is-guest-view {

    background: var(--bpa-cl-white);

    border-radius: var(--bpa-radius-6px);

    padding: 24px 0;

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view svg {

    width: 120px;

    height: 120px;

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view .bpa-front-dev__form-bg {

    fill: var(--bpa-cl-white);

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view .bpa-front-dev__primary-bg {

    fill: var(--bpa-pt-main-green);

    stroke: var(--bpa-pt-main-green);

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view .bpa-front-dev__panel-bg {

    fill: var(--bpa-gt-gray-100);

}

.bpa-frontend-main-container.bpa-frontend-vue3 #bpa-front-data-empty-view.bpa-front-data-empty-view .bpa-front-dev__title {

    font-size: 16px;

    font-weight: 600;

    font-family: var(--bpa-primary-font);

    color: var(--bpa-dt-black-200);

    margin-top: 12px;

    text-transform: none;

    text-align: center;

    padding: 0 8px;

}



/* ============================================================

 * Date & Time calendar — legacy parity overrides on VCalendar v3.

 *

 * Issue 3: legacy (VCalendar v2) renders a large centered month

 * title and 3-letter weekday row, which matches the height of the

 * time-slot column on the right. VCalendar v3 ships a smaller

 * header and narrow weekday row by default, compressing the

 * calendar column. We bump the header and weekday typography to

 * match legacy proportions and keep the two columns even.

 *

 * Issue 4: legacy renders disabled / out-of-range dates with a

 * muted grey numeral, no hover affordance, default cursor.

 * VCalendar v3 keeps the default numeral color and exposes

 * `.vc-disabled` / `.vc-day-content` with its own styling. We

 * port the legacy muted style here.

 * ============================================================ */

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-title {

    font-size: 16px;

    font-weight: 600;

    color: var(--bpa-dt-black-200);

    font-family: var(--bpa-primary-font);

    text-transform: none;

    background: transparent;

}


.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-header {

    padding: 8px 8px 4px;

    margin-bottom: 0;

}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-weekday {

    font-size: 13px;

    font-weight: 600;

    color: var(--bpa-dt-black-300, #6b7280);

    font-family: var(--bpa-primary-font);

    text-transform: none;

    padding: 6px 0;

}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-weeks {

    padding: 0;

}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day-content {

    font-size: 14px;

    font-weight: 500;

    font-family: var(--bpa-primary-font);

}

/* Disabled date parity — match legacy bookingpress_front.css darker

 * shade. Legacy paints `.vc-day .vc-day-content.is-disabled` with

 * `background-color: rgba(207,214,229,.1)` plus a `::after` overlay

 * with `background:gray; opacity:.1` that together create the muted

 * blue-grey "unavailable" cell visual. The Vue3 port via

 * `normalizeDisabledDayMarkers()` stamps `.is-disabled` on each

 * disabled `.vc-day-content`, so we re-use the exact legacy rule

 * here scoped to the Vue3 calendar host so blocked / unavailable /

 * out-of-range dates read darker than VCalendar v3's default. */

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day .vc-day-content.is-disabled {

    /* background-color: rgba(207, 214, 229, 0.45) !important;

    color: var(--bpa-dt-black-200, #4f5d75) !important; */

    cursor: not-allowed !important;

    opacity: 1 !important;

    position: relative;

    border-radius: 6px;

    opacity:0.5 !important;

}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day.is-today .vc-day-content.is-disabled {

    background-color: rgba(207, 214, 229, 0.45) !important;

    color: var(--bpa-dt-black-200, #4f5d75) !important;

}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day-content.is-disabled::after {

    content: '';

    position: absolute;

    inset: 0;

    background: gray;

    opacity: 0.1;

    pointer-events: none;

    border-radius: inherit;

}

/* .bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day .vc-day-content.is-disabled:hover {

    background-color: rgba(207, 214, 229, 0.45) !important;

    color: var(--bpa-dt-black-200, #4f5d75) !important;

} */

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day.is-not-in-month .vc-day-content.is-disabled {

    opacity: 0.5 !important;

}



/* ==========================================================================

 * Date & Time step — layout + mobile fix (legacy parity, single-module)

 *

 * Problem: the globally-enqueued legacy `bookingpress_front.css` has these

 * rules inside `@media (max-width: 576px)` and `@media (768–991px)`:

 *

 *   .bpa-front-module--date-and-time        { display: none }

 *   .bpa-front-module--date-and-time.__sm   { display: block }

 *

 * The legacy template ships TWO markup variants (desktop + `.__sm`) and

 * relies on the breakpoint to swap between them. The Vue 3 shortcode only

 * renders the desktop variant, so on tablet (768–991) and phone (≤576) the

 * legacy rule hides the only module we have — leaving a blank panel.

 *

 * Additionally, `.bpa-front--dt__wrapper` / `.bpa-front--dt__col` never had

 * any base layout rules shipped in the Vue 3 stylesheet, so even on larger

 * viewports the 2-column flex/grid relied on the legacy file alone.

 *

 * Fix: re-declare the legacy desktop grid values here, then override the

 * mobile `display:none` so the single Vue 3 module stays visible and its

 * wrapper stacks to a single column. All rules are scoped to

 * `.bpa-frontend-main-container.bpa-frontend-vue3` so the legacy shortcode

 * on the same page (if any) is unaffected.

 *

 * Values mirror `css/bookingpress_front.css` verbatim so desktop visuals

 * remain byte-identical to legacy.

 * ========================================================================== */



/* Base (all viewports): 2-column responsive grid. Same values as legacy. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--date-and-time .bpa-front--dt__wrapper {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));

    margin: 0 -12px;

}

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--date-and-time .bpa-front--dt__wrapper .bpa-front--dt__col {

    padding: 0 12px;

}

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--date-and-time .bpa-front--dt__wrapper

    .bpa-front--dt__col.bpa-front-dt-col__is-visible {

    -webkit-animation-name: bpaFadeInUp;

            animation-name: bpaFadeInUp;

    animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);

    -webkit-animation-duration: .3s;

            animation-duration: .3s;

    -webkit-animation-fill-mode: both;

            animation-fill-mode: both;

}



/* ---------------------------------------------------------------------

 * Responsive `.__sm` Date & Time flow — legacy parity.

 * ---------------------------------------------------------------------

 * Legacy ships TWO templates for Date & Time:

 *   (1) `.bpa-front-module--date-and-time`        — desktop (2-column)

 *   (2) `.bpa-front-module--date-and-time.__sm`   — mobile/tablet variant

 *       which uses a date-trigger button atop a single column and toggles

 *       between calendar + slots via `displayResponsiveCalendar`.

 *

 * Legacy visibility rules (from `bookingpress_front.css`):

 *   default                                          desktop: shown, __sm: none

 *   @media (min-width:768px) and (max-width:991px)   desktop: none, __sm: block

 *   @media (max-width:576px)                         desktop: none, __sm: block

 *   gap 577–767                                      desktop: shown, __sm: none

 *

 * Vue 3 renders only ONE module. We replicate the `.__sm` flow purely via

 * CSS on the same DOM: the wrapper toggles `.bpa-sm-show-slots` /

 * `.bpa-sm-show-calendar` (driven by `state.displayResponsiveCalendar`)

 * and `.bpa-front--dt__ts-sm-back-btn` is hidden everywhere EXCEPT the

 * two legacy `.__sm` breakpoints.

 *

 * Flow (mobile/tablet only):

 *   default       → `.bpa-sm-show-slots`   → calendar col hidden,

 *                                            slots col visible with the

 *                                            date-trigger button on top

 *   trigger click → `.bpa-sm-show-calendar`→ calendar col visible,

 *                                            slots col hidden

 *   day click     → back to `.bpa-sm-show-slots` (dayClicked resets state)

 *

 * The VCalendar mini-app host stays in the DOM in both states; only CSS

 * visibility toggles, so no remount cost and no scroll reset.

 */



/* Default (desktop + 577–767 gap): date-trigger is a `.__sm` artifact,

 * never visible at these sizes. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn {

    display: none;

}



/* Tablet (768–991px) — legacy `.__sm` flow, `.bpa-front-btn` padding

 * 8px 12px, container margin-bottom 12px, NO horizontal container

 * padding. (legacy @media (min-width:768px) and (max-width:991px)) */

@media (min-width: 768px) and (max-width: 991px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time {

        display: block;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper {

        display: block;

        grid-template-columns: 1fr;

        margin: 0;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper

        .bpa-front--dt__col {

        padding: 0;

    }

    /* View toggle: default (slots view). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper.bpa-sm-show-slots

        .bpa-front--dt__col--calendar {

        display: none;

    }

    /* View toggle: calendar open — hide slots column. */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper.bpa-sm-show-calendar

        .bpa-front--dt__col--slots {

        display: none;

    }



    /* Date-trigger button (tablet sizing). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn {

        display: block;

        width: 100%;

        margin-bottom: 12px;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn {

        display: block;

        width: 100%;

        padding: 8px 12px;

        background-color: var(--bpa-cl-white, #fff);

        border: 1px solid var(--bpa-gt-gray-400, #cfd6e5);

        border-radius: var(--bpa-radius-4px, 4px);

        cursor: pointer;

        font: inherit;

        text-align: left;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn > span {

        display: flex;

        align-items: center;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn span svg {

        width: 18px;

        height: 18px;

        margin-right: 4px;

        fill: var(--bpa-dt-black-300, #535D71);

        flex: 0 0 auto;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn label {

        font-size: 14px;

        line-height: 18px;

        color: var(--bpa-dt-black-300, #535D71);

        display: initial;

        font-weight: 400;

        cursor: pointer;

    }

}



/* Phone (≤576px) — legacy `.__sm` flow, `.bpa-front-btn` padding 8px 12px,

 * container margin-bottom 20px + horizontal padding 0 20px, explicit

 * `border-color` on the button. (legacy @media (max-width:576px)) */

@media (max-width: 576px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time {

        display: block;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper {

        display: block;

        grid-template-columns: 1fr;

        margin: 0;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper

        .bpa-front--dt__col {

        padding: 0;

    }

    /* View toggle: default (slots view). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper.bpa-sm-show-slots

        .bpa-front--dt__col--calendar {

        display: none;

    }

    /* View toggle: calendar open — hide slots column. */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__wrapper.bpa-sm-show-calendar

        .bpa-front--dt__col--slots {

        display: none;

    }



    /* Legacy parity: calendar spacing + time-slots padding reset on phone

     * (values copied from `bookingpress_front.css` @media max-width:576px). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__calendar {

        margin-bottom: 24px;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__time-slots {

        padding: 0;

        border: none;

        height: auto;

        min-height: 400px;

    }

    /* Legacy parity: module heading + note indent on phone. */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front-module-heading,

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front-module--note-desc {

        padding-left: 20px;

    }



    /* Date-trigger button (phone sizing). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn {

        display: block;

        width: 100%;

        margin-top: 10px;

        margin-bottom: 20px;

        box-sizing: border-box;

        padding: 0 20px;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn {

        display: block;

        width: 100%;

        padding: 8px 12px;

        background-color: var(--bpa-cl-white, #fff);

        border: 1px solid var(--bpa-gt-gray-400, #cfd6e5);

        border-radius: var(--bpa-radius-4px, 4px);

        cursor: pointer;

        font: inherit;

        text-align: left;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn > span {

        display: flex;

        align-items: center;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn span svg {

        width: 18px;

        height: 18px;

        margin-right: 4px;

        fill: var(--bpa-dt-black-300, #535D71);

        flex: 0 0 auto;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn label {

        font-size: 14px;

        line-height: 18px;

        color: var(--bpa-dt-black-300, #535D71);

        display: initial;

        font-weight: 400;

        cursor: pointer;

    }

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn:hover,

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--date-and-time .bpa-front--dt__ts-sm-back-btn

        .bpa-front-btn:focus {

        border-color: var(--bpa-pt-main-green, #19b681);

        outline: none;

    }

}



/* -----------------------------------------------------------------------

 * Accessibility: keyboard focus-visible styling

 * Adds a clearly visible focus ring for keyboard users on the Date & Time

 * step. Uses :focus-visible so mouse-clicks do not produce the ring.

 * Color uses the theme primary-green token (--bpa-pt-main-green) with a

 * solid fallback for environments without CSS variables.

 * -------------------------------------------------------------------- */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front--dt__ts-body--item.bpa_focusable:focus-visible,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front--dt__ts-sm-back-btn .bpa-front-btn:focus-visible,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front--dt__calendar:focus-visible {

    outline: 2px solid var(--bpa-pt-main-green, #19b681);

    outline-offset: 2px;

    box-shadow: 0 0 0 2px rgba(25, 182, 129, 0.2);

}



/* Disabled time-slot semantics: keep the visual cue and ensure the

 * (forced) cursor reflects the aria-disabled state. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front--dt__ts-body--item[aria-disabled="true"] {

    cursor: not-allowed;

}



/* Issue 1 — per-field validation error message styling. Mirrors the

 * legacy `.el-form-item__error` typography & spacing AND its leading

 * info-circle icon, painted via a `::before` mask so the icon picks

 * up the danger color via CSS without an inline <svg>. Legacy

 * source: `.el-form-item__error::before` rule in

 * `bookingpress_front.css`. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-front-form-control--error,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item__error {

    position: relative;

    color: var(--bpa-sc-danger, #ef4444);

    font-size: 12px;

    line-height: 16px;

    margin-top: 4px;

    padding-left: 20px;

    font-weight: 400;

    min-height: 16px;

}

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bpa-front-form-control--error::before,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item__error::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 16px;

    height: 16px;

    background-color: var(--bpa-sc-danger, #ef4444);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-3h-2v-2h2v2z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-3h-2v-2h2v2z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-size: 16px 16px;

    mask-size: 16px 16px;

}



/* Issue 2 — phone field error state parity. When the bp-form-item is

 * `.is-error`, the upstream BpUi rule paints a red inset box-shadow on

 * `.bp-ui-tel-input__surface` (the `.vue-tel-input` wrapper). Because

 * the country `.vti__dropdown` carries its own static grey

 * `border-right` separator, the field reads as TWO bordered boxes

 * with a grey divider — the dropdown visually overlaps / breaks the

 * red box-shadow. We retint the separator to the danger colour and

 * also strip the dropdown's outer outline so it merges into the

 * single red error frame painted on the wrapper. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-error .bp-ui-tel-input .vti__dropdown {

    /* border-right-color: var(--bpa-sc-danger, #ef4444) !important; */

    box-shadow: none !important;

    outline: 0 !important;

}



/* Also reset the open/focus/hover background overrides we set above

 * to a transparent value when in error state, so the dropdown pill

 * does not paint a grey fill on top of the red error box-shadow. */

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-error .bp-ui-tel-input .vti__dropdown,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-error .bp-ui-tel-input .vti__dropdown:hover,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-error .bp-ui-tel-input .vti__dropdown:focus,

.bpa-frontend-main-container.bpa-frontend-vue3

    .bpa-front-module--bd-form .bp-form-item.is-error .bp-ui-tel-input .vti__dropdown.open {

    background-color: transparent !important;

}



/* ============================================================

 * Mobile (≤576px) Basic Details parity

 *

 * Legacy mobile rules at @media (max-width:576px) gave the basic

 * details module 0 20px side padding and let each field span the

 * row's full width. The Vue 3 grid still applies the desktop

 * `:gutter="24"` (12px L/R col padding) on mobile, which leaves

 * each field 24px narrower than the visible card width. Zero out

 * the gutter on small screens so fields go edge-to-edge with the

 * 20px module gutter, matching the legacy visual.

 *

 * Phone field on mobile: in flex layout, Element Plus' input only

 * has `width:100%` which doesn't grow inside the row. Add

 * `flex: 1 1 0` and `min-width: 0` so the <input> consumes all

 * remaining space next to the country dropdown pill instead of

 * leaving the placeholder truncated ("Enter your phone n…").

 *

 * Country dropdown LIST: the upstream vue-tel-input ships a

 * default 390px width which overflows narrow viewports and visually

 * overlaps adjacent form fields when opened. Legacy capped it at

 * 280px; on viewports narrower than that, lock to 100% of the

 * field row so it stays inside the form bounds.

 * ============================================================ */

@media (max-width: 576px) {

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--basic-details {

        padding: 0 20px;

        box-sizing: border-box;

    }



    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bpa-bd-fields-row {

        margin-left: 0 !important;

        margin-right: 0 !important;

    }



    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bpa-bd-fields-row > [class*="bp-col-"] {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }



    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input .vti__input,

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input input.vti__phone {

        flex: 1 1 0 !important;

        min-width: 0 !important;

        width: auto !important;

    }



    /* The Vue 3 bp-ui-tel-input__surface ships with `padding: 0 16px`

     * which the legacy vue-tel-input did not have. On mobile the

     * resulting 32px lost width pushes the placeholder text out of

     * view. Zero the surface padding so the dropdown pill sits flush

     * against the left border (legacy parity). */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input .vue-tel-input,

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input.bp-ui-tel-input__surface,

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input .bp-ui-tel-input__surface {

        padding: 0 !important;

    }



    /* Dropdown LIST is `position: absolute` inside the 63px-wide

     * `.vti__dropdown` trigger, so `width: 100%` would collapse it.

     * Lock to the legacy 280px width and cap at the viewport so it

     * never spills off-screen on narrow devices. */

    .bpa-frontend-main-container.bpa-frontend-vue3

        .bpa-front-module--bd-form .bp-ui-tel-input .vti__dropdown-list {

        width: 280px !important;

        max-width: calc(100vw - 40px) !important;

        box-sizing: border-box;

    }

}