/* ================================================================
   Ms Broom Quote Calculator — v2.3.3
   Premium design matching React component reference.
   Colours driven by inline CSS variables set from admin settings.
   Background is transparent — the theme/page-builder controls it.
   All component selectors scoped under .msb-quote for specificity.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.msb-quote {
    --msb-navy:       #152850;
    --msb-navy-dk:    #0d1a35;
    --msb-green:      #2d7a3e;
    --msb-green-dk:   #1f5a2d;
    --msb-green-lt:   #edf7ef;
    --msb-green-lt2:  #d6ecd9;
    --msb-yellow:     #f4c430;
    --msb-wa:         #25D366;
    --msb-wa-dk:      #1da851;
    --msb-wa-text:    #ffffff;
    --msb-email-bg:   #152850;
    --msb-email-text: #ffffff;
    --msb-white:      #ffffff;
    --msb-border:     rgba(21,40,80,.13);
    --msb-font:       'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --msb-radius-card: 2rem;
    --msb-radius-xl:   0.75rem;
    --msb-shadow-card: 0 20px 60px rgba(21,40,80,.14), 0 4px 12px rgba(21,40,80,.06);
}

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

/* ── WordPress / Elementor theme nuclear reset ───────────────── */
/* Neutralise Hello Elementor, Astra, GeneratePress, OceanWP etc.
   Specificity 0,2,1 (.msb-quote button) beats most theme selectors. */
.msb-quote button,
.msb-quote input,
.msb-quote select,
.msb-quote textarea,
.msb-quote a {
    font-family: var(--msb-font) !important;
    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: inherit !important;
}
.msb-quote button {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    cursor: pointer !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* ── Section ─────────────────────────────────────────────────── */
.msb-quote {
    position: relative;
    padding: 4rem 1.25rem;
    background: transparent;
    font-family: var(--msb-font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--msb-navy);
}

/* Hide legacy blobs if still in markup */
.msb-blob { display: none !important; }

/* ── Layout ──────────────────────────────────────────────────── */
.msb-container { max-width: 1350px; margin: 0 auto; }
.msb-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) {
    .msb-grid { grid-template-columns: 5fr 7fr; gap: 3rem; }
}

/* ── Left copy ───────────────────────────────────────────────── */
.msb-left   { padding-top: 1rem; }
.msb-eyebrow { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; }
.msb-eyebrow__line { width: 2.5rem; height: 2.5px; background: var(--msb-green); border-radius: 3px; }
.msb-eyebrow__text {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--msb-green);
}
.msb-headline {
    font-size: clamp(2rem, 5vw, 3.125rem);
    font-weight: 900; letter-spacing: -.035em;
    line-height: 1.08; color: var(--msb-navy);
    margin: 0 0 1.125rem;
}
.msb-headline em { color: var(--msb-green); font-style: italic; }
.msb-subline {
    font-size: .92rem; color: rgba(21,40,80,.55);
    line-height: 1.75; max-width: 420px;
    margin: 0 0 2rem;
}

/* ── Trust items ─────────────────────────────────────────────── */
.msb-trust { display: flex; flex-direction: column; gap: .75rem; }
.msb-trust__item {
    display: flex; align-items: flex-start; gap: .65rem;
    background: #ffffff;
    border-radius: var(--msb-radius-xl);
    padding: 1rem 1.125rem;
}
.msb-trust__icon {
    width: 1.35rem; height: 1.35rem; flex-shrink: 0;
    color: var(--msb-green); margin-top: .1rem;
}
.msb-trust__item strong { display: block; font-size: .82rem; font-weight: 700; color: var(--msb-navy); }
.msb-trust__item span   { display: block; font-size: .78rem; color: rgba(21,40,80,.5); margin-top: .15rem; }

/* ── Card ────────────────────────────────────────────────────── */
.msb-card {
    background: var(--msb-white);
    border-radius: var(--msb-radius-card);
    box-shadow: var(--msb-shadow-card);
    border: 1px solid rgba(21,40,80,.05);
    overflow: hidden;
}

/* Card header — navy dark strip */
.msb-card__header {
    display: flex; align-items: center; gap: .875rem;
    padding: 1.25rem 1.75rem;
    background: var(--msb-navy);
    color: var(--msb-white);
}
.msb-card__icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: .625rem;
    background: var(--msb-green);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.msb-card__icon svg { width: 1.2rem; height: 1.2rem; color: #fff; }
.msb-card__title { font-size: .95rem; font-weight: 700; }
.msb-card__sub   { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .15rem; }
.msb-card__body  { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Form elements ───────────────────────────────────────────── */
.msb-field  { display: flex; flex-direction: column; gap: .4rem; }
.msb-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.msb-label  {
    font-size: .67rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--msb-navy);
    margin-bottom: .15rem;
}
.msb-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(21,40,80,.4); }

/* ── Service chips (ID scoped = 1,1,0 specificity — beats all themes) ── */
.msb-service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;
}
#msb-quote .msb-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: .45rem .875rem !important;
    border-radius: 2rem !important;
    border: 1.5px solid var(--msb-border) !important;
    background: var(--msb-white) !important;
    background-image: none !important;
    color: var(--msb-navy) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
    user-select: none;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}
#msb-quote .msb-chip.msb-chip--hidden {
    display: none !important;
}
#msb-quote .msb-chip:hover {
    border-color: var(--msb-green) !important;
    background: var(--msb-green-lt) !important;
    color: var(--msb-navy) !important;
}
#msb-quote .msb-chip.msb-chip--active {
    border-color: var(--msb-green) !important;
    background: var(--msb-green) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(45,122,62,.25) !important;
}

/* Select */
#msb-quote .msb-select {
    width: 100% !important; height: 3rem !important; padding: 0 2.5rem 0 1rem !important;
    border-radius: var(--msb-radius-xl) !important;
    border: 2px solid var(--msb-border) !important;
    background: var(--msb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23152850' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
    color: var(--msb-navy) !important; font-size: .9rem !important; font-weight: 500 !important;
    appearance: none !important; -webkit-appearance: none !important;
    cursor: pointer; transition: border-color .2s;
    box-shadow: none !important;
    text-decoration: none !important;
}
#msb-quote .msb-select:focus { outline: none; border-color: var(--msb-green) !important; }

/* ── Steppers ────────────────────────────────────────────────── */
.msb-stepper {
    display: flex; align-items: center;
    height: 3rem;
    border-radius: var(--msb-radius-xl);
    border: 2px solid var(--msb-border);
    overflow: hidden;
    background: var(--msb-white);
}
#msb-quote .msb-stepper__btn {
    width: 3rem !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    background: var(--msb-green-lt) !important;
    background-image: none !important;
    color: var(--msb-green) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}
#msb-quote .msb-stepper__btn:hover  { background: var(--msb-green-lt2) !important; }
#msb-quote .msb-stepper__btn:active { background: var(--msb-green-lt2) !important; }
.msb-stepper__val {
    flex: 1; text-align: center;
    font-size: 1.05rem; font-weight: 700;
    color: var(--msb-navy); user-select: none;
}

/* ── Product toggle ──────────────────────────────────────────── */
.msb-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

#msb-quote .msb-toggle__btn {
    padding: 1rem 1.125rem !important;
    border-radius: var(--msb-radius-xl) !important;
    border: 2px solid var(--msb-border) !important;
    background: var(--msb-white) !important;
    background-image: none !important;
    color: var(--msb-navy) !important;
    text-align: left !important;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
    display: flex !important;
    flex-direction: column !important;
    gap: .35rem !important;
    min-height: 80px !important;
    width: 100% !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: inherit !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.msb-toggle__header {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .1rem;
}
.msb-toggle__btn svg    { width: 1.15rem; height: 1.15rem; flex-shrink: 0; transition: color .2s; }
.msb-toggle__btn strong { font-size: .9rem; font-weight: 700; line-height: 1; }
.msb-toggle__btn span   { font-size: .73rem; color: rgba(21,40,80,.5); line-height: 1.4; }

/* Hover */
#msb-quote .msb-toggle__btn--std:not(.msb-toggle__btn--active):hover { border-color: var(--msb-navy) !important; box-shadow: 0 2px 12px rgba(21,40,80,.08) !important; }
#msb-quote .msb-toggle__btn--eco:not(.msb-toggle__btn--active):hover { border-color: var(--msb-green) !important; box-shadow: 0 2px 12px rgba(45,122,62,.10) !important; }

/* Standard active — navy */
#msb-quote .msb-toggle__btn--std.msb-toggle__btn--active {
    border-color: var(--msb-navy) !important;
    background: var(--msb-navy) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(21,40,80,.22) !important;
}
#msb-quote .msb-toggle__btn--std.msb-toggle__btn--active svg  { color: var(--msb-yellow) !important; }
#msb-quote .msb-toggle__btn--std.msb-toggle__btn--active span { color: rgba(255,255,255,.65) !important; }

/* Eco active — green */
#msb-quote .msb-toggle__btn--eco.msb-toggle__btn--active {
    border-color: var(--msb-green) !important;
    background: var(--msb-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(45,122,62,.25) !important;
}
#msb-quote .msb-toggle__btn--eco.msb-toggle__btn--active svg  { color: var(--msb-yellow) !important; }
#msb-quote .msb-toggle__btn--eco.msb-toggle__btn--active span { color: rgba(255,255,255,.75) !important; }

/* Inputs */
#msb-quote .msb-input {
    width: 100% !important; height: 3rem !important; padding: 0 1rem !important;
    border-radius: var(--msb-radius-xl) !important;
    border: 2px solid var(--msb-border) !important;
    background: var(--msb-white) !important; color: var(--msb-navy) !important;
    font-size: max(.9rem, 16px) !important;
    transition: border-color .2s;
    box-shadow: none !important;
}
#msb-quote .msb-input:focus { outline: none; border-color: var(--msb-green) !important; }
#msb-quote .msb-input::placeholder { color: rgba(21,40,80,.3); }

/* ── Estimate ────────────────────────────────────────────────── */
.msb-estimate {
    position: relative;
    border-radius: 1.125rem;
    background: linear-gradient(135deg, var(--msb-navy) 0%, var(--msb-navy-dk, #0d1a35) 100%);
    color: #fff;
    padding: 1.5rem 1.75rem;
    overflow: hidden;
}
.msb-estimate__glow {
    position: absolute; top: -1rem; right: -1rem;
    width: 8rem; height: 8rem;
    border-radius: 50%;
    background: rgba(45,122,62,.3);
    filter: blur(1.75rem);
    pointer-events: none;
}
.msb-estimate__label {
    position: relative;
    font-size: .67rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--msb-yellow);
    margin-bottom: .35rem;
}
.msb-estimate__price {
    position: relative;
    display: flex; align-items: baseline;
    gap: .5rem; flex-wrap: wrap;
    margin-bottom: .4rem;
}
.msb-estimate__price span { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.msb-estimate__dash  { color: rgba(255,255,255,.4)!important; font-size: 1.75rem!important; font-weight: 400!important; }
.msb-estimate__meta  { position: relative; font-size: .79rem; color: rgba(255,255,255,.6); line-height: 1.5; }

/* ── CTA Buttons ─────────────────────────────────────────────── */
.msb-cta { display: flex; gap: .75rem; flex-wrap: wrap; padding-top: .35rem; }
#msb-quote .msb-btn {
    flex: 1 !important; min-width: 145px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .5rem !important;
    height: 3.5rem !important; padding: 0 1.5rem !important;
    border-radius: 3rem !important;
    font-size: .88rem !important; font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important; cursor: pointer;
    transition: transform .15s, filter .2s, box-shadow .2s;
    min-height: 48px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    line-height: 1 !important;
}
#msb-quote .msb-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
#msb-quote .msb-btn:hover  { transform: translateY(-2px); text-decoration: none !important; }
#msb-quote .msb-btn:active { transform: translateY(0); }

#msb-quote .msb-btn--book {
    flex-basis: 100% !important;
    background: var(--msb-green) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(45,122,62,.28) !important;
}
#msb-quote .msb-btn--book:hover {
    filter: brightness(.95);
    box-shadow: 0 6px 24px rgba(45,122,62,.34) !important;
}

#msb-quote .msb-btn--wa {
    background: var(--msb-wa) !important;
    color: var(--msb-wa-text) !important;
    box-shadow: 0 4px 20px rgba(37,211,102,.3) !important;
}
#msb-quote .msb-btn--wa:hover { background: var(--msb-wa-dk) !important; box-shadow: 0 6px 24px rgba(37,211,102,.35) !important; }

#msb-quote .msb-btn--email {
    background: var(--msb-email-bg) !important;
    color: var(--msb-email-text) !important;
    box-shadow: 0 4px 16px rgba(21,40,80,.2) !important;
}
#msb-quote .msb-btn--email:hover { filter: brightness(1.12); }

/* ── Disclaimer ──────────────────────────────────────────────── */
.msb-disclaimer {
    font-size: .72rem; color: rgba(21,40,80,.4);
    text-align: center; margin: 0; line-height: 1.6;
}

/* ── Mobile ≤ 600px ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .msb-quote      { padding: 2.5rem 1rem; }
    .msb-card__body { padding: 1.25rem; gap: 1.125rem; }

    /* Card first, trust below on mobile */
    .msb-right { order: 1; }
    .msb-left  { order: 2; margin-top: .5rem; }

    /* Stack grids */
    .msb-row { grid-template-columns: 1fr; gap: .875rem; }

    /* Buttons full-width */
    .msb-cta { flex-direction: column; }
    #msb-quote .msb-btn { min-width: 100% !important; flex: none !important; }

    /* Price display */
    .msb-estimate__price span { font-size: 2.1rem; }
    .msb-estimate { padding: 1.25rem 1.375rem; }

    /* Steppers */
    .msb-stepper { height: 3.25rem; }
    #msb-quote .msb-stepper__btn { width: 3rem !important; }

    /* Headline */
    .msb-headline { font-size: clamp(1.75rem, 7vw, 2.4rem); }

    /* Chips wrap nicely */
    .msb-service-chips { gap: .4rem; }
    #msb-quote .msb-chip { font-size: .73rem !important; padding: .4rem .75rem !important; }
}

/* ── Extra-small ≤ 380px ─────────────────────────────────────── */
@media (max-width: 380px) {
    .msb-card__body { padding: 1rem; }
    #msb-quote .msb-toggle__btn { padding: .75rem .75rem !important; }
    .msb-toggle__btn strong { font-size: .82rem; }
}

/* Booking shortcode */
#msb-booking {
    padding-top: 2.5rem;
}
#msb-booking .msb-container {
    max-width: 1120px;
}
#msb-booking .msb-booking-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#msb-booking .msb-booking-card__header {
    padding: 0 0 1.25rem !important;
    border: 0 !important;
    background: transparent !important;
}
#msb-booking .msb-card__title {
    font-size: clamp(1.7rem, 2.4vw, 2.3rem) !important;
}
#msb-booking .msb-card__sub {
    max-width: 620px;
}
.msb-booking__steps-bar {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: .25rem 0 1.125rem;
    flex-wrap: wrap;
}
.msb-booking__step-pill {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1rem;
    border: 1px solid var(--msb-border);
    border-radius: 999px;
    background: #fff;
    color: rgba(21,40,80,.62);
    font-size: .86rem;
    font-weight: 800;
}
.msb-booking__step-pill span {
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--msb-green-lt);
    color: rgba(21,40,80,.62);
    font-size: .78rem;
}
.msb-booking__step-pill--active {
    border-color: var(--msb-green);
    color: var(--msb-green);
}
.msb-booking__step-pill--active span,
.msb-booking__step-pill--done span {
    background: var(--msb-green);
    color: #fff;
}
.msb-booking__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
    gap: 1.625rem;
    align-items: start;
}
#msb-booking .msb-booking__form-card {
    padding: 1.75rem !important;
    background: #fff !important;
    border: 1px solid var(--msb-border) !important;
    border-radius: 1.4rem !important;
    box-shadow: var(--msb-shadow-card) !important;
}
.msb-booking__step {
    display: none;
}
.msb-booking__step--show {
    display: block;
    animation: msbBookingFade .3s ease;
}
@keyframes msbBookingFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.msb-booking__step h2 {
    margin: 0 0 .25rem;
    color: var(--msb-navy);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.15;
}
.msb-booking__sub {
    margin: 0 0 1.375rem;
    color: rgba(21,40,80,.62);
    font-size: .95rem;
}
.msb-booking__review-list {
    margin: .25rem 0 1rem;
    border-top: 1px solid var(--msb-border);
}
.msb-booking__review-list .msb-booking__line {
    border-bottom: 1px solid var(--msb-border);
    color: rgba(21,40,80,.62);
}
.msb-booking__review-list .msb-booking__line strong {
    color: var(--msb-navy);
}
.msb-booking__step-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
}
.msb-booking__step-actions--end {
    justify-content: flex-end;
}
#msb-booking .msb-booking__step-actions .msb-btn {
    flex: 0 1 auto !important;
    min-width: 9.5rem !important;
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
}
#msb-booking .msb-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
#msb-booking .msb-field {
    margin: 0 0 1.125rem !important;
}
#msb-booking .msb-label {
    display: block;
    margin-bottom: .5rem;
    color: var(--msb-navy);
    font-size: .88rem;
    font-weight: 800;
}
#msb-booking .msb-input,
#msb-booking .msb-select {
    width: 100% !important;
    height: 3.35rem !important;
    padding: 0 1rem !important;
    border: 1px solid var(--msb-border) !important;
    border-radius: .9rem !important;
    background: #fff !important;
    color: var(--msb-navy) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(21,40,80,.03) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}
#msb-booking .msb-select {
    padding-right: 2.5rem !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--msb-navy) 50%), linear-gradient(135deg, var(--msb-navy) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}
#msb-booking .msb-input:focus,
#msb-booking .msb-select:focus {
    border-color: var(--msb-green) !important;
    box-shadow: 0 0 0 4px rgba(45,122,62,.12) !important;
}
#msb-booking .msb-input::placeholder {
    color: rgba(21,40,80,.33);
}
#msb-booking .msb-textarea {
    height: auto !important;
    min-height: 6.5rem !important;
    padding-top: .9rem !important;
    line-height: 1.5 !important;
    resize: vertical;
}
#msb-booking .msb-toggle {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
#msb-booking .msb-toggle__btn {
    position: relative;
    width: 100% !important;
    min-height: 4.45rem;
    padding: 1rem 1rem 1rem 3.05rem !important;
    border: 1.5px solid var(--msb-border) !important;
    border-radius: .9rem !important;
    background: #fbfcfb !important;
    color: var(--msb-navy) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
#msb-booking .msb-toggle__btn::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 50%;
    border: 2px solid rgba(21,40,80,.22);
    background: #fff;
}
#msb-booking .msb-toggle__btn::after {
    content: "";
    position: absolute;
    left: 1.31rem;
    top: 1.41rem;
    width: .56rem;
    height: .56rem;
    border-radius: 50%;
    background: transparent;
}
#msb-booking .msb-toggle__btn--active {
    border-color: var(--msb-green) !important;
    background: var(--msb-green-lt) !important;
    box-shadow: 0 10px 24px rgba(45,122,62,.08) !important;
}
#msb-booking .msb-toggle__btn--active::before {
    border-color: var(--msb-green);
}
#msb-booking .msb-toggle__btn--active::after {
    background: var(--msb-green);
}
#msb-booking .msb-toggle__header strong {
    display: block;
    font-size: .98rem;
    line-height: 1.25;
}
#msb-booking .msb-toggle__btn span {
    display: block;
    margin-top: .25rem;
    color: rgba(21,40,80,.58) !important;
    font-size: .86rem;
    line-height: 1.45;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}
.msb-payment-title {
    margin: .35rem 0 .9rem;
    color: var(--msb-navy);
    font-size: 1.25rem;
    line-height: 1.25;
}
#msb-booking .msb-payment-options .msb-toggle__btn {
    min-height: auto;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}
.msb-payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}
.msb-payment-badges em {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .2rem .55rem;
    border: 1px solid var(--msb-border);
    border-radius: .35rem;
    background: #fff;
    color: var(--msb-navy);
    font-size: .72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}
.msb-payment-security {
    position: relative;
    margin: 1rem 0 0;
    padding-left: 1.8rem;
    color: rgba(21,40,80,.72);
    font-size: .92rem;
    line-height: 1.5;
}
.msb-payment-security::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .28rem;
    width: .7rem;
    height: .55rem;
    border: 2px solid var(--msb-green);
    border-radius: .12rem;
}
.msb-payment-security::after {
    content: "";
    position: absolute;
    left: .33rem;
    top: .05rem;
    width: .34rem;
    height: .34rem;
    border: 2px solid var(--msb-green);
    border-bottom: 0;
    border-radius: .35rem .35rem 0 0;
}
.msb-terms {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: .25rem 0 1.25rem;
    font-size: .88rem;
    color: rgba(21,40,80,.68);
    cursor: pointer;
}
#msb-booking .msb-terms input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    min-height: 1.15rem !important;
    margin: .18rem 0 0 !important;
    flex: 0 0 auto;
    accent-color: var(--msb-green);
    cursor: pointer;
}
.msb-terms span {
    display: block;
    min-width: 0;
    line-height: 1.45;
}
#msb-booking .msb-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
#msb-booking .msb-btn {
    min-width: 0 !important;
    min-height: 3.15rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .9rem !important;
    font-size: .93rem !important;
    font-weight: 800 !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#msb-booking .msb-btn--book {
    grid-column: 1 / -1;
    background: var(--msb-green) !important;
    color: #fff !important;
    box-shadow: 0 12px 25px rgba(45,122,62,.22) !important;
}
#msb-booking .msb-btn--book:disabled {
    opacity: .55;
    cursor: not-allowed !important;
}
#msb-booking .msb-btn--wa {
    background: var(--msb-wa) !important;
    color: var(--msb-wa-text) !important;
}
#msb-booking .msb-btn--email {
    background: var(--msb-email-bg) !important;
    color: var(--msb-email-text) !important;
}
#msb-booking .msb-btn:not(:disabled):hover {
    transform: translateY(-2px);
}
.msb-booking__summary {
    position: sticky;
    top: 88px;
}
.msb-booking__sum-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: 1.4rem;
    background: radial-gradient(circle at 82% 14%, rgba(45,122,62,.42), transparent 32%), linear-gradient(135deg, var(--msb-navy), var(--msb-navy-dk));
    color: #fff;
    box-shadow: 0 22px 48px rgba(21,40,80,.24);
}
.msb-booking__sum-card .msb-estimate__label {
    position: relative;
    color: var(--msb-yellow);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.msb-booking__summary-lines {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: .75rem;
}
.msb-booking__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.72);
    font-size: .9rem;
}
.msb-booking__line strong {
    color: #fff;
    text-align: right;
    font-weight: 800;
}
.msb-booking__review-list .msb-booking__line {
    border-bottom-color: var(--msb-border);
    color: rgba(21,40,80,.62);
}
.msb-booking__review-list .msb-booking__line strong {
    color: var(--msb-navy);
}
.msb-booking__total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(255,255,255,.2);
}
.msb-booking__total #msb-book-estimate {
    color: #7fe0a6;
    font-size: 1.95rem;
    font-weight: 900;
    line-height: 1;
}
.msb-booking__sum-card .msb-estimate__meta {
    margin-top: .4rem;
    color: rgba(255,255,255,.68);
    font-size: .82rem;
}
.msb-booking__trust-card {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--msb-border);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(21,40,80,.08);
}
.msb-booking__trust-card ul {
    margin: 0;
    padding: 0;
}
.msb-booking__trust-card li {
    position: relative;
    list-style: none;
    padding: .42rem 0 .42rem 1.55rem;
    color: var(--msb-navy);
    font-size: .9rem;
    font-weight: 650;
}
.msb-booking__trust-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65rem;
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: var(--msb-green);
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px rgba(45,122,62,.28);
}
#msb-booking .msb-service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
#msb-booking .msb-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.35rem;
    padding: .45rem .875rem !important;
    border: 1px solid var(--msb-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--msb-navy) !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#msb-booking .msb-chip:hover,
#msb-booking .msb-chip--active {
    border-color: var(--msb-green) !important;
    background: var(--msb-green) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(45,122,62,.25) !important;
}
#msb-booking .msb-chip--hidden {
    display: none !important;
}
#msb-booking .msb-stepper__btn {
    width: 3rem !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    background: var(--msb-green-lt) !important;
    color: var(--msb-green) !important;
    border: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}
#msb-booking .msb-stepper__btn:hover {
    background: var(--msb-green-lt2) !important;
}
#msb-booking .msb-required {
    color: var(--msb-green);
    font-weight: 900;
}
.msb-booking__notice {
    display: none;
    margin-top: 1rem;
    border: 1px solid rgba(45,122,62,.35);
    background: var(--msb-green-lt);
    color: var(--msb-navy);
    border-radius: .95rem;
    padding: 1rem;
    font-size: .9rem;
    font-weight: 600;
}
.msb-booking__notice--show {
    display: block;
}
.msb-booking__notice--error {
    border-color: rgba(190,18,60,.35);
    background: #fff1f2;
    color: #9f1239;
}
.msb-paypal-box {
    margin-top: 1rem;
    border: 1px solid var(--msb-border);
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
}
#msb-paypal-buttons {
    margin-top: .75rem;
}
.msb-thankyou-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.msb-thankyou-modal--show {
    display: flex;
}
.msb-thankyou-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8,20,45,.52);
}
.msb-thankyou-modal__card {
    position: relative;
    width: min(100%, 30rem);
    border-radius: 1.15rem;
    border: 1px solid rgba(255,255,255,.45);
    background: #fff;
    box-shadow: 0 28px 80px rgba(8,20,45,.28);
    padding: 1.65rem;
    text-align: center;
}
.msb-thankyou-modal__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--msb-green-lt);
    color: var(--msb-navy);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.msb-thankyou-modal__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .85rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--msb-green);
    color: #fff;
    font-size: 1.65rem;
    font-weight: 900;
}
.msb-thankyou-modal__card h3 {
    margin: 0 0 .5rem;
    color: var(--msb-navy);
    font-size: 1.35rem;
    line-height: 1.25;
}
.msb-thankyou-modal__card p {
    margin: 0 auto 1.15rem;
    color: rgba(21,40,80,.7);
    line-height: 1.55;
}
.msb-thankyou-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
#msb-booking .msb-thankyou-modal__actions .msb-btn {
    min-height: 3rem !important;
}

@media (max-width: 900px) {
    .msb-booking__layout {
        grid-template-columns: 1fr;
    }
    .msb-booking__summary {
        position: static;
    }
}
@media (max-width: 560px) {
    #msb-booking {
        padding: 1.5rem .75rem;
    }
    #msb-booking .msb-booking__form-card {
        padding: 1.25rem !important;
        border-radius: 1.1rem !important;
    }
    #msb-booking .msb-row,
    #msb-booking .msb-cta {
        grid-template-columns: 1fr;
    }
    #msb-booking .msb-card__title {
        font-size: 1.55rem !important;
    }
    .msb-booking__sum-card {
        padding: 1.25rem;
        border-radius: 1.1rem;
    }
}