/* The configurator form is fixed UI. Its Contao content-element wrapper must
   not reserve any space in the article flow, including after confirmation. */
body.b2sme-theme main .mod_article > :has(> form.b2sme-configurator),
body.b2sme-theme main .mod_article > :has(> form.b2sme-configurator-success) {
    margin-bottom: 0 !important;
    min-height: 0;
    padding: 0;
    background: transparent;
}

body.b2sme-theme form.b2sme-configurator {
    position: fixed;
    z-index: 950;
    right: clamp(.75rem, 2vw, 1.5rem);
    bottom: clamp(.75rem, 2vw, 1.5rem);
    width: min(calc(100vw - 1.5rem), 30rem);
    max-height: min(44rem, calc(100dvh - 1.5rem));
    margin: 0;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: var(--b2sme-radius);
    background: var(--b2sme-secondary);
    color: #fff;
    box-shadow: 0 1.25rem 3rem rgb(10 15 26 / .24);
    transform-origin: bottom right;
    transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}

body.b2sme-theme form.b2sme-configurator.is-closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(1rem) scale(.98);
    transition: opacity .2s ease, transform .26s ease, visibility 0s linear .26s;
}

body.b2sme-theme form.b2sme-configurator fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close {
    position: sticky;
    z-index: 3;
    top: 0;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 -2.75rem auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--b2sme-primary);
    color: #fff;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 .4rem 1rem rgb(0 0 0 / .16);
    transition: transform .2s ease, box-shadow .2s ease;
}

body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close::before,
body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close::after {
    content: "";
    position: absolute;
    width: 1.15rem;
    height: .14rem;
    border-radius: 999px;
    background: currentColor;
}

body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close::before { transform: rotate(45deg); }
body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close::after { transform: rotate(-45deg); }
body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close:hover { transform: rotate(90deg); }

body.b2sme-theme .b2sme-configurator-launcher {
    position: fixed;
    z-index: 949;
    right: clamp(.75rem, 2vw, 1.5rem);
    bottom: clamp(.75rem, 2vw, 1.5rem);
    min-height: 3rem;
    padding: .7rem 1rem;
    border: 0;
    border-radius: var(--b2sme-radius);
    background: var(--b2sme-primary);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 .65rem 1.6rem rgb(10 15 26 / .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem) scale(.98);
    transition: opacity .2s ease, transform .24s ease, visibility 0s linear .24s;
}

body.b2sme-theme .b2sme-configurator-launcher.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress {
    display: flex;
    width: auto;
    margin: 0 3.5rem 1.5rem 0;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    list-style: none;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li {
    position: relative;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 50%;
    background: rgb(255 255 255 / .08);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    font-weight: 800;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li::before,
body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li::after {
    content: none;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li.is-active {
    border-color: var(--b2sme-primary);
    background: var(--b2sme-primary);
    color: #fff;
    transform: scale(1.04);
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li.is-complete {
    border-color: rgb(255 255 255 / .8);
    background: #fff;
    color: var(--b2sme-primary);
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-step {
    animation: b2sme-configurator-step-in .28s cubic-bezier(.22, 1, .36, 1);
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-step > legend {
    width: 100%;
    margin: 0 0 1rem;
    padding: 0 3rem 0 0;
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

body.b2sme-theme form.b2sme-configurator .widget-radio,
body.b2sme-theme form.b2sme-configurator .widget-checkbox,
body.b2sme-theme form.b2sme-configurator .b2sme-choice-group,
body.b2sme-theme form.b2sme-configurator .widget-radio > fieldset,
body.b2sme-theme form.b2sme-configurator .widget-checkbox > fieldset {
    display: grid;
    gap: .5rem;
}

body.b2sme-theme form.b2sme-configurator .widget-radio .b2sme-choice + .b2sme-choice,
body.b2sme-theme form.b2sme-configurator .widget-checkbox .b2sme-choice + .b2sme-choice,
body.b2sme-theme form.b2sme-configurator .b2sme-choice-group .b2sme-choice + .b2sme-choice {
    margin-top: 0;
}

body.b2sme-theme form.b2sme-configurator .widget-radio > label,
body.b2sme-theme form.b2sme-configurator .widget-checkbox > label,
body.b2sme-theme form.b2sme-configurator .widget-radio > legend,
body.b2sme-theme form.b2sme-configurator .widget-checkbox > legend {
    margin-bottom: .25rem;
    color: #fff;
    font-weight: 700;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-step-nav {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-step-nav button[hidden] {
    display: none !important;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-step-nav .b2sme-button,
body.b2sme-theme form.b2sme-configurator .widget-submit button,
body.b2sme-theme form.b2sme-configurator .widget-submit input[type="submit"] {
    min-height: 3.2rem;
    flex: 1;
    border-radius: var(--b2sme-radius);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}

body.b2sme-theme form.b2sme-configurator .b2sme-button--secondary {
    border: 1px solid rgb(255 255 255 / .28);
    background: transparent;
    color: #fff;
}

@keyframes b2sme-configurator-step-in {
    from { opacity: 0; transform: translateX(.5rem); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 36rem) {
    body.b2sme-theme form.b2sme-configurator {
        inset: auto .5rem .5rem;
        width: auto;
        max-height: calc(100dvh - 1rem);
        padding: 1.1rem;
    }

    body.b2sme-theme form.b2sme-configurator .b2sme-form-step-nav {
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.b2sme-theme form.b2sme-configurator,
    body.b2sme-theme .b2sme-configurator-launcher,
    body.b2sme-theme form.b2sme-configurator .b2sme-configurator__close,
    body.b2sme-theme form.b2sme-configurator .b2sme-form-step,
    body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li {
        animation: none;
        transition: none;
    }
}


/* Keep the final submit action visually separated from the preceding
   privacy checkbox in configurator forms. */
body.b2sme-theme form.b2sme-configurator .widget-submit {
    margin-top: 20px;
}


/* Completed progress steps are clickable for backward navigation only.
   Future steps stay plain markers and cannot be selected. */
body.b2sme-theme form.b2sme-configurator .b2sme-form-progress__button {
    display: grid;
    width: 100%;
    height: 100%;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress__button:hover,
body.b2sme-theme form.b2sme-configurator .b2sme-form-progress__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

body.b2sme-theme form.b2sme-configurator .b2sme-form-progress li > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

/* AJAX confirmation lives inside the configurator panel. Do not render the
   generic green success box inside the dark configurator surface. */
body.b2sme-theme .b2sme-configurator-success .b2sme-form-message--success,
body.b2sme-theme form.b2sme-configurator .b2sme-form-message--success {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

body.b2sme-theme .b2sme-configurator-success .b2sme-form-message--success :is(h1, h2, h3, p),
body.b2sme-theme form.b2sme-configurator .b2sme-form-message--success :is(h1, h2, h3, p) {
    max-width: none;
    color: #fff;
}

body.b2sme-theme .b2sme-configurator-success .b2sme-form-message--success :is(h1, h2, h3),
body.b2sme-theme form.b2sme-configurator .b2sme-form-message--success :is(h1, h2, h3) {
    margin: 0 0 .85rem;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    line-height: 1.08;
}

body.b2sme-theme .b2sme-configurator-success .b2sme-form-message--success p,
body.b2sme-theme form.b2sme-configurator .b2sme-form-message--success p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    opacity: .9;
}