/* ==========================================================================
   Edy London: BookingPress form inside the front page Booking section
   Matches the original HTML preview (steps row, light service cards, dark
   buttons). Every rule is scoped to "#book .el-booking__form" so the plugin
   keeps its own styling everywhere else. The ID in the scope outranks the
   plugin's class-based !important rules without relying on load order.
   Check class names against the live form after each BookingPress update.
   ========================================================================== */

/* ---------- Brand colours for the plugin's CSS variables */
#book .el-booking__form .bpa-frontend-vue3 {
    --bp-v3-primary: var(--el-ink);
    --bp-v3-primary-bg: var(--el-cream);
    --bp-v3-bg: #fff;
    --bp-v3-footer-bg: #fff;
    --bp-v3-content: var(--el-text);
    --bp-v3-label: var(--el-ink);
    --bp-v3-sub-title: var(--el-text);
    --bp-v3-button-text: #fff;
    --bp-v3-border: var(--el-line);
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs {
    --bpa-pt-main-green: var(--el-ink) !important;
    --bpa-pt-main-green-darker: var(--el-sage) !important;
    --bpa-pt-main-green-alpha-12: rgba(64, 55, 44, .08) !important;
    --bpa-pt-border-color: var(--el-line) !important;
    --bpa-pt-background-color: #fff !important;
    --bpa-pt-price-button-text-color: #fff !important;
    --bpa-gt-gray-400: var(--el-line);
    --bpa-primary-font: var(--el-sans);
    --bpa-secondary-font: var(--el-sans);
}

/* ---------- Container: fill the right column, no plugin chrome */
#book .el-booking__form .bpa-frontend-main-container {
    max-width: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#book .el-booking__form .bpa-frontend-vue3,
#book .el-booking__form .bpa-frontend-vue3 * {
    font-family: var(--el-sans) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-default-card {
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-dc--body {
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
}

/* ---------- Steps row (the plugin's left sidebar, shown on top) */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs--vertical-left {
    flex-direction: column;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: auto;
    gap: 8px 16px;
    min-width: 0;
    margin: 0 0 28px;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
    overflow: visible;
    justify-content: flex-start !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.4;
    color: var(--el-text) !important;
    text-decoration: none;
    animation: none;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item::before {
    display: none;
}

/* Step icons: the plugin renders its own inline SVG per step (service cards,
   calendar, details form, checklist). Show them in a rounded box instead of
   step numbers. Mint marks the active step, as in the reference screenshot. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu {
    --el-step-active-bg: #66715F;
    --el-step-idle-bg: var(--el-cream);
    --el-step-idle-icon: #A89D90;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-icon {
    display: grid;
    place-items: center;
    width: 40px;
    min-width: 32px;
    height: 40px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--el-line) !important;
    border-radius: 8px;
    background: var(--el-step-idle-bg) !important;
    box-shadow: none !important;
    font-size: 0;
    color: var(--el-step-idle-icon) !important;
    transition: background .2s, border-color .2s, color .2s;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-icon svg {
    display: block;
    width: 30px;
    height: 25px;
    fill: currentColor !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-icon svg [fill="none"] {
    fill: none !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item.__bpa-is-active {
    font-weight: 500;
    color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-icon {
    border-color: var(--el-step-active-bg) !important;
    background: var(--el-blush) !important;
    color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-label {
    max-width: none;
    min-width: 0;
}

/* ---------- Headings ("Choose a service", "Date and time", ...) */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module-heading {
    margin: 0 0 12px;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    color: var(--el-ink) !important;
}

/* ---------- Service cards */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-items-row {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin: 0 0 28px;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-fm--si--col {
    width: 100%;
    max-width: none;
    flex-basis: 100%;
    padding: 0;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card {
    position: relative;
    display: block;
    min-height: 0;
    padding: 18px 110px 18px 20px;
    border: 1px solid var(--el-line) !important;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card:hover {
    border-color: var(--el-sage) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item.__bpa-is-selected .bpa-front-si-card {
    border-color: var(--el-ink) !important;
    background: var(--el-cream) !important;
    box-shadow: inset 3px 0 0 var(--el-ink) !important;
}

/* The preview design shows no service photos or checkmarks. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si-card__left,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si-card--checkmark-icon,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si-card--checkmark-icon-multiservice {
    display: none !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si__card-body {
    padding: 0;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si__card-body--heading {
    margin: 0;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.5;
    color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .--bpa-is-desc {
    margin: 4px 0 0;
    font-size: 14px !important;
    color: var(--el-text) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-si-cb__specs {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}

/* Hide the plugin's "Duration:" / "Price:" labels, keep the values. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si-cb__specs-item p {
    margin: 0;
    font-size: 0 !important;
    line-height: 1.5;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si-cb__specs-item p strong {
    font-size: 14px !important;
    font-weight: 400;
    color: var(--el-text) !important;
}

/* Price on the right, in the serif face, as in the preview. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si-cb__specs-item:has(.--is-service-price) {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card .bpa-front-si__card-body strong.--is-service-price {
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    font-family: var(--el-serif) !important;
    font-size: 26px !important;
    line-height: 1;
    color: var(--el-ink) !important;
}

/* ---------- Footer and buttons */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-dc--footer,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs--foot {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs--foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 50px;
    padding: 0 30px;
    border: 1px solid var(--el-ink) !important;
    border-radius: var(--el-radius) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn strong,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn span {
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn svg {
    fill: currentColor !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn--primary {
    background: var(--el-ink) !important;
    color: #fff !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn--primary:hover {
    border-color: var(--el-sage) !important;
    background: var(--el-sage) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn--borderless {
    background: transparent !important;
    color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-btn--borderless:hover {
    background: var(--el-ink) !important;
    color: #fff !important;
}

/* ---------- Date, time and form fields: replace the plugin accent colour */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details .bpa-front-module--bs-ad--price,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-form-control--checkbox .bp-checkbox__input.is-checked + .bp-checkbox__label,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-form-control--checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--el-ink) !important;
}

/* Calendar "today". V-Calendar marks it with .vc-day.is-today; a selected day
   gets a .vc-highlights layer (dark fill) before .vc-day-content, which then
   carries .vc-highlight-content-solid. Unavailable days (.is-disabled /
   .vc-disabled) keep the plugin styling. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__calendar .vc-day.is-today .vc-day-content:not(.is-disabled):not(.vc-disabled) {
    background-color: #fff !important;
    box-shadow: inset 0 0 0 2px var(--el-ink);
    color: var(--el-ink) !important;
}

/* Today selected: dark fill from the highlight layer, white number,
   mint ring kept so it still reads as today. */
#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__calendar .vc-day.is-today .vc-highlights + .vc-day-content:not(.is-disabled):not(.vc-disabled),
#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__calendar .vc-day.is-today .vc-day-content.vc-highlight-content-solid:not(.is-disabled):not(.vc-disabled) {
    background-color: transparent !important;
    color: #fff !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__ts-body--item:hover,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__ts-body--item.__bpa-is-selected,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--pm-body__item.__bpa-is-selected,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--pm-body__item.__is-selected {
    border-color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front--dt__ts-body--item.__bpa-is-selected {
    background-color: var(--el-cream) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-form-control--checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
#book .el-booking__form .bpa-frontend-vue3 .el-radio__input.is-checked .el-radio__inner {
    border-color: var(--el-ink) !important;
    background-color: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-front-form-control input:focus,
#book .el-booking__form .bpa-frontend-vue3 .bpa-front-form-control .el-textarea__inner:focus,
#book .el-booking__form .bpa-frontend-vue3 input.bpa-front-form-control:focus,
#book .el-booking__form .bpa-frontend-vue3 textarea.bpa-front-form-control:focus {
    border-color: var(--el-ink) !important;
    box-shadow: 0 0 0 3px rgba(64, 55, 44, .12) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bpa-head__vector-item {
    fill: var(--el-ink) !important;
}

#book .el-booking__form .bpa-frontend-vue3 .bp-input__wrapper,
#book .el-booking__form .bpa-frontend-vue3 .bp-select__wrapper,
#book .el-booking__form .bpa-frontend-vue3 .bp-ui-tel-input__surface,
#book .el-booking__form .bpa-frontend-vue3 input,
#book .el-booking__form .bpa-frontend-vue3 textarea {
    border-radius: var(--el-radius) !important;
}

/* ---------- Desktop: space between the date/time picker and the buttons.
   .bpa-front-dc--body (holding the date-and-time module) is directly
   followed by .bpa-front-dc--footer, with no gap between them. */
@media (min-width: 577px) {
    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--date-and-time {
        margin-bottom: 30px !important;
    }
}

/* ---------- Mobile: icon-only steps in one evenly spaced row */
@media (max-width: 576px) {
    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu {
        flex-wrap: nowrap;
        justify-content: space-around !important;
        gap: 0;
        overflow: hidden;
    }

    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item {
        flex: 0 0 auto;
        padding: 0;
    }

    /* Visually hidden; each step link keeps its aria-label for screen readers. */
    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-tab-menu .bpa-front-tab-menu--item .bpa-front-tm--item-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-module--service-item .bpa-front-si-card {
        padding-right: 90px;
    }

    /* Buttons stacked and centred. BookingPress gives the second button a
       16px left margin (.bpa-front-btn + .bpa-front-btn), which made NEXT
       16px narrower than GO BACK. Both now use that NEXT width. */
    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs--foot {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #book .el-booking__form .bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn {
        flex: 0 0 auto;
        width: calc(100% - 16px);
        margin: 0 !important;
        justify-content: center;
    }

    /* No connector line under / between the steps on mobile. */
    #book .el-booking__form .bpa-front-tab-menu--item::after,
    #book .el-booking__form .bpa-front-tab-menu-item::after {
        display: none !important;
        content: none !important;
    }
}