/**
 * Modern configurator layout.
 *
 * Scope: everything lives under `.ao-configurator--modern` so it cannot leak
 * into Classic or the client's own theme. Modern keeps its own
 * `ao-modern-*` classes and avoids global selectors. Customer CSS is loaded
 * inline afterwards and intentionally remains free to override this baseline.
 *
 * No @import, no web fonts, no images and no extra requests: the layout uses
 * inherited typography and system colours only.
 */

.ao-configurator--modern {
    --ao-modern-gap: 1rem;
    --ao-modern-surface: #ffffff;
    --ao-modern-border: #e2e8f0;
    --ao-modern-ink: #1f2937;
    --ao-modern-muted: #64748b;
    /* Follows the configured main colour (Style > Colours); teal only as a fallback. */
    --ao-modern-accent: var(--ao-primary-color, #0f766e);
    --ao-modern-accent-ink: #ffffff;
    --ao-modern-danger: #b91c1c;
    /* Follows the configured corner radius (Style > Layout); 12px only as a fallback. */
    --ao-modern-radius: var(--ao-border-radius, 12px);
    --ao-modern-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ao-modern-touch: 44px;
    --ao-modern-sticky-header-offset: 112px;

    display: block;
    color: var(--ao-modern-ink);
}

.ao-configurator--modern .ao-modern {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--ao-modern-gap);
    align-items: start;
}

.ao-configurator--modern .ao-modern__panels {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: var(--ao-modern-gap);
    min-width: 0;
}

/* Panels ---------------------------------------------------------------- */

.ao-configurator--modern .ao-modern-panel {
    min-width: 0;
    padding: var(--ao-modern-gap);
    background: var(--ao-modern-surface);
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    box-shadow: var(--ao-modern-shadow);
}

.ao-configurator--modern .ao-modern-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-bottom: 0.75rem;
}

.ao-configurator--modern .ao-modern-panel__step {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid var(--ao-modern-accent);
    background: var(--ao-modern-accent);
    color: var(--ao-modern-accent-ink);
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-modern-panel__icon,
.ao-configurator--modern .ao-modern-offer__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ao-modern-accent);
}

.ao-configurator--modern .ao-modern-panel__icon svg,
.ao-configurator--modern .ao-modern-offer__icon svg {
    width: 100%;
    height: 100%;
}

.ao-configurator--modern .ao-modern-panel__title {
    margin: 0;
    min-width: 0;
    font-size: 1.125rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ao-configurator--modern .ao-modern-panel__empty {
    margin: 0;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-panel__error {
    margin: 0.5rem 0 0;
    color: var(--ao-modern-danger);
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-modern-panel.is-loading {
    opacity: 0.7;
}

.ao-configurator--modern .ao-modern-panel[data-available="false"] {
    opacity: 0.6;
}

/* Offer grid ------------------------------------------------------------ */

.ao-configurator--modern .ao-modern-panel__offers {
    display: grid;
    /* --ao-modern-cols is set per panel by PHP (balanced rows, max 3). */
    grid-template-columns: repeat(var(--ao-modern-cols, 3), minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.ao-configurator--modern .ao-modern-offer {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    background: var(--ao-modern-surface);
}

.ao-configurator--modern .ao-modern-offer.is-selected {
    border-color: var(--ao-modern-accent);
    background: color-mix(in srgb, var(--ao-modern-accent) 6%, transparent);
}

.ao-configurator--modern .ao-modern-offer__choice {
    display: flex;
    flex-wrap: wrap; /* price/check drop below the title instead of squeezing it */
    align-items: center;
    gap: 0.25rem 0.625rem;
    width: 100%;
    min-height: var(--ao-modern-touch);
    padding: 0.75rem;
    margin: 0;
    border: 0;
    border-radius: var(--ao-modern-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ao-configurator--modern .ao-modern-offer__choice[disabled] {
    cursor: not-allowed;
}

.ao-configurator--modern .ao-modern-offer__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* Never narrower than the longest word, so titles wrap between words. */
    min-width: min-content;
    max-width: 100%;
    flex: 1 1 8rem;
}

.ao-configurator--modern .ao-modern-offer__supertitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ao-modern-muted);
    overflow-wrap: anywhere;
}

.ao-configurator--modern .ao-modern-offer__title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word; /* break inside a word only as a last resort */
}

.ao-configurator--modern .ao-modern-offer__subtitle {
    font-size: 0.875rem;
    color: var(--ao-modern-muted);
    overflow-wrap: anywhere;
}

.ao-configurator--modern .ao-modern-offer__price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 700;
    white-space: nowrap;
}

.ao-configurator--modern .ao-modern-offer__unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-offer__selected-flag {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--ao-modern-accent);
}

/* Radio/check indicator: unselected = outline, selected = filled + check. */
.ao-configurator--modern .ao-modern-offer__check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ao-modern-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.ao-configurator--modern .ao-modern-offer.is-selected .ao-modern-offer__check {
    border-color: var(--ao-modern-accent);
    background: var(--ao-modern-accent);
}

.ao-configurator--modern .ao-modern-offer.is-selected .ao-modern-offer__check::after {
    content: "\2713";
    font-weight: 700;
}

/* A little extra specificity protects the layout baseline from broad theme
   selectors, while inline customer CSS still wins whenever it opts in. */
#ao-configurator.ao-configurator--modern .ao-modern-offer__choice {
    background: transparent;
    color: var(--ao-modern-ink);
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__title,
#ao-configurator.ao-configurator--modern .ao-modern-offer__price {
    color: var(--ao-modern-ink);
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__supertitle,
#ao-configurator.ao-configurator--modern .ao-modern-offer__subtitle {
    color: var(--ao-modern-muted);
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__icon,
#ao-configurator.ao-configurator--modern .ao-modern-offer__selected-flag {
    color: var(--ao-modern-accent);
}

/* The chosen offer must clearly stand out and be the focus of its section. */
#ao-configurator.ao-configurator--modern .ao-modern-offer.is-selected {
    border: 2px solid var(--ao-modern-accent);
    background: #ecfdf5;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--ao-modern-accent) 22%, transparent);
}

/* Hard isolation of the offers grid/tiles: the client theme styles
   .ao-offer-card very aggressively (fixed widths, floats, negative margins),
   which collapsed Modern tiles into 1-character columns once the Classic
   class names were reused. Keep the Modern grid intact regardless. */
#ao-configurator.ao-configurator--modern .ao-modern-panel__offers {
    display: grid;
    /* --ao-modern-cols is set per panel by PHP (balanced rows, max 3). */
    grid-template-columns: repeat(var(--ao-modern-cols, 3), minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

#ao-configurator.ao-configurator--modern .ao-modern-offer {
    width: auto;
    min-width: 0;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
    border-radius: var(--ao-modern-radius);
    display: flex;
    flex-direction: column;
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__choice {
    width: 100%;
}

/* Customer bestseller badges are commonly positioned absolutely over the
   tile. Reserve their footprint so they never cover the compact offer name. */
#ao-configurator.ao-configurator--modern .ao-modern-offer.ao-bestseller .ao-modern-offer__choice {
    padding-top: 2.75rem;
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__title,
#ao-configurator.ao-configurator--modern .ao-offer-current-total,
#ao-configurator.ao-configurator--modern .ao-offer-supertitle,
#ao-configurator.ao-configurator--modern .ao-offer-subtitle {
    margin: 0;
    white-space: normal;
    position: static;
    float: none;
}

/* Keep broad Classic typography defaults from shrinking the Modern text
   column to zero width. Customer overrides remain authoritative. */
#ao-configurator.ao-configurator--modern .ao-modern-offer__title {
    font-size: 1rem;
    text-align: left;
}

#ao-configurator.ao-configurator--modern .ao-modern-offer__price {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

#ao-configurator.ao-configurator--modern .ao-modern-offer:not(.is-selected) {
    border-color: #eef2f6;
}

/* Selected offer workspace ------------------------------------------------ */

.ao-configurator--modern .ao-modern-selection {
    min-width: 0;
}

.ao-configurator--modern .ao-modern-selection__pane[hidden] {
    display: none;
}

.ao-configurator--modern .ao-modern-selection__pane.is-selected {
    display: grid;
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 2.3fr);
    gap: 0.75rem;
    align-items: start;
    min-width: 0;
    margin-top: 0.75rem;
}

/* Keep the addons heading above the workspace. The selected offer and the
   actual addon islands then share the second grid row and start together. */
.ao-configurator--modern .ao-modern-selection__pane--with-addons.is-selected {
    grid-template-rows: auto auto;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__overview {
    grid-column: 1;
    grid-row: 2;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__addons {
    display: contents;
}

.ao-configurator--modern .ao-modern-selection__pane--without-addons.is-selected {
    grid-template-columns: minmax(210px, 380px);
}

.ao-configurator--modern .ao-modern-selection__overview {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    background: #f8fafc;
}

.ao-configurator--modern .ao-modern-selection__overview {
    display: grid;
    gap: 0.25rem;
}

.ao-configurator--modern .ao-modern-selection__addons {
    min-width: 0;
}

.ao-configurator--modern .ao-modern-selection__eyebrow,
.ao-configurator--modern .ao-modern-selection__supertitle {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-selection__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ao-modern-ink);
}

.ao-configurator--modern .ao-modern-selection__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 700;
    color: var(--ao-modern-accent);
}

.ao-configurator--modern .ao-modern-selection__unit {
    font-size: 0.75rem;
    font-weight: 400;
}

.ao-configurator--modern .ao-modern-selection__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ao-modern-muted);
    overflow-wrap: anywhere;
}

/* Collapsible extra info: arrow only, collapsed by default. */
.ao-configurator--modern .ao-modern-selection__overview {
    position: relative;
}

.ao-configurator--modern .ao-modern-selection__overview:not(.is-expanded) .ao-modern-selection__more {
    display: none;
}

.ao-configurator--modern .ao-modern-selection__overview:not(.is-expanded) .ao-modern-selection__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ao-configurator--modern .ao-modern-selection__more {
    flex: 0 0 100%;
    min-width: 0;
}

.ao-configurator--modern .ao-modern-selection__toggle {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.ao-configurator--modern .ao-modern-selection__toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ao-configurator--modern .ao-modern-selection__toggle span {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ao-modern-muted);
    border-bottom: 2px solid var(--ao-modern-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.ao-configurator--modern .ao-modern-selection__overview.is-expanded .ao-modern-selection__toggle span {
    transform: translateY(2px) rotate(-135deg);
}

.ao-configurator--modern .ao-modern-selection__description,
.ao-configurator--modern .ao-modern-selection__content,
.ao-configurator--modern .ao-modern-selection__secondary {
    flex: 0 0 100%;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ao-modern-muted);
    overflow-wrap: break-word;
}

.ao-configurator--modern .ao-modern-selection__description > :first-child,
.ao-configurator--modern .ao-modern-selection__content > :first-child,
.ao-configurator--modern .ao-modern-selection__secondary > :first-child {
    margin-top: 0;
}

.ao-configurator--modern .ao-modern-selection__description > :last-child,
.ao-configurator--modern .ao-modern-selection__content > :last-child,
.ao-configurator--modern .ao-modern-selection__secondary > :last-child {
    margin-bottom: 0;
}

.ao-configurator--modern .ao-modern-selection__points {
    flex: 0 0 100%;
    margin: 0.375rem 0 0;
    padding: 0;
    list-style: none;
    columns: 2 220px; /* two columns when there is room, one when not */
    column-gap: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ao-modern-ink);
}

.ao-configurator--modern .ao-modern-selection__point {
    position: relative;
    padding-left: 1.125rem;
    margin: 0 0 0.25rem;
    break-inside: avoid;
    overflow-wrap: break-word;
}

.ao-configurator--modern .ao-modern-selection__point::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ao-modern-accent);
    font-weight: 700;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-offer__details-heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addons {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem;
    align-items: flex-start;
    min-width: 0;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-group {
    box-sizing: border-box;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    background: #f8fafc;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-group-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-group-icon,
.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--ao-modern-accent);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-group-icon svg,
.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-icon svg {
    width: 100%;
    height: 100%;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-chips {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.6rem;
    margin: 0;
    border: 1px solid var(--ao-modern-border);
    border-radius: min(8px, var(--ao-modern-radius));
    background: var(--ao-modern-surface);
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    /* Margin, not padding: a custom stylesheet may zero .ao-option-label padding with !important. */
    margin-left: var(--ao-modern-addon-text-gap, 8px);
}

/* Addon indicator (square = checkbox, round = radio, see below); unselected addons are greyed. */
.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ao-modern-border);
    border-radius: min(4px, var(--ao-modern-radius));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:has(input:checked) .ao-modern-addon-check {
    border-color: var(--ao-modern-accent);
    background: var(--ao-modern-accent);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:has(input:checked) .ao-modern-addon-check::after {
    content: "\2713";
    font-weight: 700;
}

/* Radio groups (single choice) get a round indicator; checkboxes keep the square. */
.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:has(input[type="radio"]) .ao-modern-addon-check {
    border-radius: 50%;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:not(:has(input:checked)) .ao-modern-addon-name {
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon > input[type="checkbox"],
.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:has(input:checked) {
    border-color: var(--ao-modern-accent);
    box-shadow: inset 0 0 0 1px var(--ao-modern-accent);
    background: color-mix(in srgb, var(--ao-modern-accent) 7%, transparent);
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon:has(input:focus-visible) {
    outline: 2px solid var(--ao-modern-accent);
    outline-offset: 2px;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-price {
    margin-right: var(--ao-modern-addon-text-gap, 8px);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: var(--ao-modern-muted);
    white-space: nowrap;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-onetime {
    display: block;
}

.ao-configurator--modern .ao-modern-selection__addons .ao-modern-addon-select {
    width: 100%;
    min-height: 32px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    font: inherit;
    background: var(--ao-modern-surface);
}

/* Skip ------------------------------------------------------------------ */

.ao-configurator--modern .ao-modern-skip {
    margin-top: 0.75rem;
    min-height: var(--ao-modern-touch);
    padding: 0.625rem 1rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    background: #f3f4f6; /* soft grey so it stands out from the white panel */
    color: var(--ao-modern-ink);
    font: inherit;
    cursor: pointer;
}

.ao-configurator--modern .ao-modern-skip:hover {
    background: #e9ebee;
}

/* Summary --------------------------------------------------------------- */

.ao-configurator--modern .ao-modern-summary {
    /* Right column spans panels + form, so the form sits beside it, not under it. */
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--ao-modern-gap);
    background: var(--ao-modern-surface);
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    box-shadow: var(--ao-modern-shadow);
    position: sticky;
    top: calc(var(--ao-modern-sticky-header-offset) + var(--ao-modern-gap));
    align-self: start;
    /* Never clipped: JS adds .is-tall (static position) when it is taller than the
       window, so the whole summary is reachable instead of being cut off. */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 2;
}

.ao-configurator--modern .ao-modern-summary.is-tall {
    position: static;
}

.ao-configurator--modern .ao-modern-summary__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.ao-configurator--modern .ao-modern-summary__empty {
    margin: 0;
    color: var(--ao-modern-muted);
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-modern-summary__items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.ao-configurator--modern .ao-modern-summary__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-modern-summary__order-info {
    min-width: 0;
}

.ao-configurator--modern .ao-modern-summary__order-info:empty {
    display: none;
}

.ao-configurator--modern .ao-modern-summary__order-info .ao-order-info {
    box-sizing: border-box;
    margin-top: 0.75rem;
}

.ao-configurator--modern .ao-modern-summary__item-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ao-configurator--modern .ao-modern-summary__total {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ao-modern-border);
    font-weight: 700;
}

/* Discount lines start hidden and are toggled by the shared promo core
   (.show()/.hide() set inline display), so no inline style is needed. The
   first-month total is NOT hidden - it is always shown (recurring vs first
   month, like the reference designs). */
.ao-configurator--modern .ao-promo-subtotal,
.ao-configurator--modern .ao-promo-discount-line {
    display: none;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-first-month-total-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-first-month-total-line.is-hidden,
.ao-configurator--modern .ao-modern-summary__line.is-hidden,
.ao-configurator--modern .ao-modern-summary__one-time-group.is-hidden,
.ao-configurator--modern .ao-modern-summary__breakdown-line.is-hidden {
    display: none;
}

/* Breakdown under "Jednorazowo": small, muted, indented. */
.ao-configurator--modern .ao-modern-summary__breakdown {
    margin: 0.125rem 0 0.25rem;
    padding-left: 0.75rem;
}

.ao-configurator--modern .ao-modern-summary__breakdown-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-summary__line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-summary__item-options {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0.25rem 0 0;
    padding: 0 0 0 1rem;
    list-style: disc;
    font-size: 0.8125rem;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-promo-discount-amount {
    color: var(--ao-modern-accent);
}

/* Promo-code input, reusing the shared .ao-promo-code-section markup. */
.ao-configurator--modern .ao-promo-code-section {
    margin-top: 0.75rem;
    min-width: 0;
}

.ao-configurator--modern .ao-promo-input-wrapper {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.ao-configurator--modern .ao-promo-code-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ao-modern-touch);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    font: inherit;
}

.ao-configurator--modern .ao-promo-apply-btn {
    flex: 0 0 auto;
    min-height: var(--ao-modern-touch);
    padding: 0.5rem 1rem;
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    background: transparent;
    color: var(--ao-modern-ink);
    font: inherit;
    cursor: pointer;
}

.ao-configurator--modern .ao-promo-applied-state {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.ao-configurator--modern .ao-promo-message:empty {
    display: none;
}

.ao-configurator--modern .ao-modern-summary__checkout {
    width: 100%;
    min-height: var(--ao-modern-touch);
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: var(--ao-button-radius-custom, var(--ao-modern-radius));
    background: var(--ao-button-bg-custom, var(--ao-modern-accent));
    color: var(--ao-button-text-custom, var(--ao-modern-accent-ink));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Checkout / form ------------------------------------------------------- */

.ao-configurator--modern .ao-modern-checkout {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    padding: var(--ao-modern-gap);
    background: var(--ao-modern-surface);
    border: 1px solid var(--ao-modern-border);
    border-radius: var(--ao-modern-radius);
    box-shadow: var(--ao-modern-shadow);
    /* Like Classic: the form stays hidden until the visitor clicks the CTA. */
    display: none;
}

.ao-configurator--modern .ao-modern-checkout.is-open {
    display: block;
    margin-top: var(--ao-modern-gap);
}

.ao-configurator--modern .ao-modern-checkout__title,
.ao-configurator--modern .ao-modern-checkout__subtitle {
    font-weight: 400;
}

.ao-configurator--modern .ao-modern-checkout__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1.3;
}

.ao-configurator--modern .ao-modern-checkout__subtitle {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--ao-modern-muted);
}

.ao-configurator--modern .ao-modern-checkout__body {
    min-width: 0;
}

/* Inline links (regulamin/RODO) in the shared form must be distinguishable
   from surrounding text, not colour-only. */
.ao-configurator--modern .ao-modern-checkout__body a {
    text-decoration: underline;
}

/* ponytail: When form opens on narrow screens, sidebar moves below (grid becomes 1-column).
   On wide screens (2-column grid), sidebar stays visible next to panels. */

/* Focus ----------------------------------------------------------------- */

.ao-configurator--modern :focus-visible {
    outline: 2px solid var(--ao-modern-accent);
    outline-offset: 2px;
}

/* Form variant decides composition once the form is open:
   Simple   -> one column, summary stacked above the form (like Classic Simple)
   Advanced -> summary stays in the right column beside the form */
.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) {
    grid-template-columns: minmax(0, 1fr);
}

.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) .ao-modern__panels,
.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) .ao-modern-summary,
.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) .ao-modern-checkout {
    grid-column: 1;
    grid-row: auto;
}

.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) .ao-modern-summary {
    position: static;
    max-height: none;
    overflow: visible;
}

/* Once the form is open the CTA has done its job. */
.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open) .ao-modern-summary__checkout {
    display: none;
}

/* Stacked (Simple): keep the summary readable instead of full-width. */
.ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-simple) .ao-modern-summary {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

/* Keep scroll targets clear of a sticky site header. */
.ao-configurator--modern .ao-modern-summary,
.ao-configurator--modern .ao-modern-checkout {
    scroll-margin-top: var(--ao-modern-sticky-header-offset);
}

/* Offers with addons: the chosen offer becomes a compact strip above the addon
   panels, so the panels use the full width (long addon names no longer get squeezed
   into 3/4 of the row). */
.ao-configurator--modern .ao-modern-selection__pane--with-addons.is-selected {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__overview {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__subtitle {
    flex: 0 0 100%;
    margin: 0;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__addons .ao-modern-offer__details-heading {
    grid-column: 1;
    grid-row: 2;
}

.ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__addons .ao-modern-addons {
    grid-column: 1;
    grid-row: 3;
}

/* One frame for the whole form section: the shared form wrapper must not add
   its own box (like Classic does inside its summary step). */
.ao-configurator--modern .ao-modern-checkout #ao-order-summary-form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Advanced: the shared wrapper centres itself (max-width, margin: 50px auto) and the
   layout adds its own margin. Inside the Modern frame the form card takes the full
   width, so the title/subtitle above line up with the card edges. */
.ao-configurator--modern .ao-modern-checkout #ao-order-summary-form.ao-form-advanced {
    max-width: none;
    margin: 0;
}

.ao-configurator--modern .ao-modern-checkout .ao-form-advanced .ao-form-advanced__layout {
    margin: 0;
}

/* Advanced + wide screens: form and summary share ONE frame (.ao-modern-checkout).
   The frame spans both columns; the summary sits in the same grid cell, inside
   the frame's reserved right padding, and keeps its sticky behaviour. */
@media (min-width: 1024px) {
    .ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-advanced) .ao-modern__panels {
        grid-column: 1 / -1;
    }

    .ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-advanced) .ao-modern-checkout {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-right: calc(320px + 2 * var(--ao-modern-gap));
    }

    .ao-configurator--modern .ao-modern:has(.ao-modern-checkout.is-open .ao-form-advanced) .ao-modern-summary {
        grid-column: 2;
        grid-row: 2;
        /* The open frame has margin-top: gap, so its grid row starts that much higher. */
        margin: calc(var(--ao-modern-gap) + 10px) var(--ao-modern-gap) var(--ao-modern-gap) 0;
        box-shadow: none;
        z-index: 3;
    }
}

/* Scroll targets (smooth scroll after choosing an offer) must clear a sticky site
   header. Tune --ao-modern-sticky-header-offset in Style > CSS to your header height. */
.ao-configurator--modern .ao-modern-selection__pane,
.ao-configurator--modern .ao-modern-panel {
    scroll-margin-top: var(--ao-modern-sticky-header-offset);
}

/* Mobile bar + accordion hooks (activated below 768px) --------------------- */

.ao-configurator--modern .ao-modern-bar,
.ao-configurator--modern .ao-modern-panel__picked {
    display: none;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {
    .ao-configurator--modern .ao-modern {
        grid-template-columns: minmax(0, 1fr);
    }

    /* No sticky summary once it would sit above the panels/form. */
    .ao-configurator--modern .ao-modern__panels,
    .ao-configurator--modern .ao-modern-summary,
    .ao-configurator--modern .ao-modern-checkout {
        grid-column: 1;
        grid-row: auto;
    }

    .ao-configurator--modern .ao-modern-summary {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    #ao-configurator.ao-configurator--modern .ao-modern-panel__offers {
        grid-template-columns: minmax(0, 1fr);
    }

    .ao-configurator--modern .ao-modern-selection__pane.is-selected,
    .ao-configurator--modern .ao-modern-selection__pane--without-addons.is-selected {
        grid-template-columns: minmax(0, 1fr);
    }

    .ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-selection__overview,
    .ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-offer__details-heading,
    .ao-configurator--modern .ao-modern-selection__pane--with-addons .ao-modern-addons {
        grid-column: auto;
        grid-row: auto;
    }

    .ao-configurator--modern .ao-modern-selection__addons .ao-modern-addons {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Accordion: one category open at a time (class set by JS, so no-JS shows all). */
    .ao-configurator--modern .ao-modern.ao-modern--accordion {
        padding-bottom: 5.5rem; /* room for the bottom bar */
    }

    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel__header {
        cursor: pointer;
        margin-bottom: 0;
        scroll-margin-top: var(--ao-modern-sticky-header-offset);
    }

    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel.is-open-mobile .ao-modern-panel__header {
        margin-bottom: 0.75rem;
    }


    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel__header::after {
        content: "";
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        margin-left: auto;
        border-right: 2px solid var(--ao-modern-muted);
        border-bottom: 2px solid var(--ao-modern-muted);
        transform: rotate(45deg);
        transition: transform 0.15s ease;
    }

    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel.is-open-mobile .ao-modern-panel__header::after {
        transform: rotate(-135deg);
    }

    /* #ao-configurator: some Modern rules (e.g. .ao-modern-panel__offers) are id-qualified. */
    #ao-configurator.ao-configurator--modern .ao-modern--accordion .ao-modern-panel:not(.is-open-mobile) > :not(.ao-modern-panel__header) {
        display: none;
    }

    /* Collapsed + resolved: show what was picked in the header. */
    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel.is-resolved:not(.is-open-mobile) .ao-modern-panel__picked {
        display: block;
        min-width: 0;
        margin-left: 0.25rem;
        font-size: 0.8125rem;
        color: var(--ao-modern-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ao-configurator--modern .ao-modern--accordion .ao-modern-panel.is-resolved:not(.is-open-mobile) .ao-modern-panel__title {
        flex: 0 0 auto;
    }

    /* Bottom bar: monthly total + next step. */
    .ao-configurator--modern .ao-modern--accordion:not(.ao-modern--checkout-open) .ao-modern-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        box-sizing: border-box;
        padding: 0.625rem var(--ao-modern-gap) calc(0.625rem + env(safe-area-inset-bottom, 0px));
        background: var(--ao-modern-surface);
        border-top: 1px solid var(--ao-modern-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .ao-configurator--modern .ao-modern-bar__total {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

    .ao-configurator--modern .ao-modern-bar__label {
        font-size: 0.75rem;
        color: var(--ao-modern-muted);
    }

    .ao-configurator--modern .ao-modern-bar__amount {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--ao-modern-accent);
    }

    .ao-configurator--modern .ao-modern-bar__action {
        flex: 0 0 auto;
        padding: 0.65rem 1.25rem;
        border: 0;
        border-radius: var(--ao-button-radius-custom, var(--ao-modern-radius));
        background: var(--ao-button-bg-custom, var(--ao-modern-accent));
        color: var(--ao-button-text-custom, var(--ao-modern-accent-ink));
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .ao-configurator--modern .ao-modern-bar__action[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

@media (max-width: 360px) {
    .ao-configurator--modern {
        --ao-modern-gap: 0.75rem;
    }

}

/* Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ao-configurator--modern * {
        transition: none;
        animation: none;
    }
}