/* ═══════════════════════════════════════════════════════════════
   AWDS Bundle Wizard v6 — Enterprise Configurator 2026
   Prefix: fl-wz-
   WCAG AA | Responsive | Dark mode (.dark) | Print-safe
   Optimized: zero decorative animations, theme-aligned tokens
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens (theme-aligned, minimal overrides) ── */
:root {
    /* --fl-primary/secondary-* hold HSL channels — must be wrapped in hsl() */
    --fl-wz-accent: hsl(var(--fl-primary-500, 239 84% 67%));
    --fl-wz-accent-light: hsl(var(--fl-primary-100, 214 95% 93%));
    --fl-wz-gradient: linear-gradient(135deg, var(--fl-wz-accent), hsl(var(--fl-secondary-500, 271 91% 65%)));
    --fl-wz-gradient-subtle: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.06));
    --fl-wz-radius: var(--theme-radius, 12px);
    --fl-wz-radius-lg: var(--radius-2xl, 16px);
    --fl-wz-glass: rgba(248, 250, 252, 0.85);
    --fl-wz-glass-border: rgba(226, 232, 240, 0.5);
    --fl-wz-tr: 0.2s ease;
    /* WCAG 1.4.11: boundary of a control the outline alone identifies (radio, checkbox,
       outline button, empty field, segmented toggle) — ≥3:1 on card and panel.
       --theme-border / --fl-border are divider tokens (~1.1–1.35:1 measured) and left
       those controls near-invisible. Option cards keep the divider: their text identifies them. */
    --fl-wz-control-border: var(--fl-text-tertiary, #6B7280);
}
.dark {
    --fl-wz-control-border: var(--dark-border-input, oklch(58% 0.025 270));
    --fl-wz-glass: rgba(30, 41, 59, 0.75);
    --fl-wz-glass-border: rgba(148, 163, 184, 0.12);
    --fl-wz-accent-light: rgba(99, 102, 241, 0.15);
    --fl-wz-gradient-subtle: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.10));
}

/* ── Layout ── */
.fl-wz { padding: 2rem 0; }
.fl-wz .fl-wz-header { text-align: center; margin-bottom: 1.25rem; }
.fl-wz .fl-wz-title {
    font-family: var(--theme-font-heading, 'Montserrat', sans-serif);
    font-weight: 900; font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--theme-foreground); margin-bottom: 0.25rem; letter-spacing: -0.02em;
}

/* ── Progress Bar ── */
.fl-wz .fl-wz-progress { display: flex; gap: 4px; margin-bottom: 1.25rem; }
/* Segment = the button (hit area ≥ 24px, WCAG 2.5.8); the coloured bar and the step name live inside it. */
.fl-wz .fl-wz-progress__segment {
    flex: 1 1 0; min-width: 0; min-height: 24px;
    display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
    background: none; border: none; cursor: pointer; padding: 5px 0;
    border-radius: var(--radius-md); text-align: left;
}
.fl-wz .fl-wz-progress__bar {
    display: block; height: 14px; border-radius: var(--radius-md);
    background: var(--theme-border);
    position: relative; overflow: hidden; transition: background var(--fl-wz-tr), box-shadow var(--fl-wz-tr);
}
.fl-wz .fl-wz-progress__segment:hover .fl-wz-progress__bar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fl-wz-accent) 25%, transparent); }
.fl-wz .fl-wz-progress__segment:focus-visible { outline: 2px solid var(--fl-wz-accent); outline-offset: 2px; }
.fl-wz .fl-wz-progress__segment.active .fl-wz-progress__bar { background: hsl(var(--fl-primary-500)); }
.fl-wz .fl-wz-progress__segment.done .fl-wz-progress__bar { background: var(--fl-success, #10b981); }
/* Step names: only where six names fit side by side; phones keep the "Step 2 of 6" counter. */
.fl-wz .fl-wz-progress__label { display: none; }
@media (min-width: 1024px) {
    .fl-wz .fl-wz-progress__label {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 0.75rem; line-height: 1.2; font-weight: 500; color: var(--theme-muted-foreground);
    }
    .fl-wz .fl-wz-progress__segment.active .fl-wz-progress__label { color: var(--theme-foreground); font-weight: 700; }
}
.fl-wz .fl-wz-progress__check {
    position: absolute; inset: 0; margin: auto; color: #fff;
    width: 10px; height: 10px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
}

/* ── Main Card ── */
.fl-wz .fl-wz-main {
    background: var(--fl-wz-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--fl-wz-glass-border); border-radius: var(--fl-wz-radius-lg);
    padding: 1.25rem 1.5rem; box-shadow: 0 1px 8px rgba(0,0,0,0.03);
}
.dark .fl-wz .fl-wz-main { box-shadow: 0 4px 24px rgba(0,0,0,0.25); }

/* ── Step Header ── */
.fl-wz .fl-wz-step-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.fl-wz .fl-wz-step-icon {
    width: 44px; height: 44px; border-radius: var(--fl-wz-radius);
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
    background: hsl(var(--fl-primary-600) / 0.15); color: hsl(var(--fl-primary-600)); flex-shrink: 0;
}
/* primary-400 on the light tint read ~2:1; each theme gets its own shade (≥3:1 on the tint). */
.dark .fl-wz .fl-wz-step-icon { color: hsl(var(--fl-primary-400)); }
.fl-wz .fl-wz-step-counter {
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--fl-text-primary);
}
.fl-wz .fl-wz-step-title { font-weight: 700; font-size: 1.15rem; color: var(--theme-foreground); margin: 0; }
.fl-wz .fl-wz-step-desc { color: var(--theme-muted-foreground); font-size: 0.85rem; margin-bottom: 0.75rem; line-height: 1.5; }

/* ── Grid Layouts ──
   Smart balanced grid (owner request 2026-08-10): explicit column count per breakpoint,
   computed in PHP from the real option-count so rows fill evenly instead of auto-fit's
   ragged "as many as fit" (which seated 3 cards and dropped a lonely 4th below).
   The formula balance(N,max)=ceil(N/ceil(N/max)) picks the fewest, most even rows —
   4→2+2, 6→3+3, 5→3+2 — capped at desktop 4 / tablet 2 / mobile 1.
   PHP emits .fl-wz-grid--d{1..4} (≥1024px) and --t{1,2} (≥640px); mobile falls
   through to the var() fallback of 1. minmax(0,1fr) lets cards shrink to fill the row. */
.fl-wz .fl-wz-grid {
    display: grid;
    grid-template-columns: repeat(var(--fl-wz-cols, 1), minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible;
}
/* The wrap is a column: card first, tooltip (when it drops into the flow on touch widths)
   under it. The card TAKES THE REMAINDER instead of `height: 100%` — a percentage measured
   the whole grid row, which already counts the open tooltip, so the pair overflowed the row
   and covered the next option. `flex: 1` keeps the equal-height look inside a row. */
.fl-wz .fl-wz-grid .fl-wz-card-wrap { min-width: 0; max-width: none; display: flex; flex-direction: column; }
.fl-wz .fl-wz-grid .fl-wz-card { flex: 1 1 auto; }
@media (min-width: 640px) {
    .fl-wz .fl-wz-grid--t2 { --fl-wz-cols: 2; }
}
@media (min-width: 1024px) {
    .fl-wz .fl-wz-grid--d2 { --fl-wz-cols: 2; }
    .fl-wz .fl-wz-grid--d3 { --fl-wz-cols: 3; }
    .fl-wz .fl-wz-grid--d4 { --fl-wz-cols: 4; }
}
@media (max-width: 480px) {
    .fl-wz .fl-wz-main { padding: 1rem; }
}

/* ── Selection Card ── */
.fl-wz .fl-wz-card {
    position: relative; background: var(--theme-card, #f8fafc);
    border: 1.5px solid var(--theme-border, #e2e8f0); border-radius: var(--fl-wz-radius);
    padding: 0.5rem 0.7rem; cursor: pointer; display: flex; flex-direction: column;
    outline: none; overflow: visible;
    transition: border-color var(--fl-wz-tr), box-shadow var(--fl-wz-tr), background var(--fl-wz-tr);
}
.fl-wz .fl-wz-card:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    border-color: color-mix(in srgb, var(--fl-wz-accent) 35%, var(--theme-border));
}
.dark .fl-wz .fl-wz-card:hover {
    border-color: var(--theme-ring);
}
.dark .fl-wz .fl-wz-card {
    border-color: var(--fl-border, #334155);
}
.fl-wz .fl-wz-card:focus-visible { outline: 2px solid var(--fl-wz-accent); outline-offset: 2px; }
.fl-wz .fl-wz-card.fl-wz-card--selected {
    background: var(--fl-wz-accent-light);
    border-color: var(--fl-wz-accent);
}
.dark .fl-wz .fl-wz-card.fl-wz-card--selected {
    border-color: var(--theme-ring);
}

/* Card with image */
.fl-wz .fl-wz-card.fl-wz-card--image { padding: 0; overflow: hidden; }
.fl-wz .fl-wz-card--image .fl-wz-card__content { overflow: visible; position: relative; }
/* Swatches are authored at 16:9 to match this box's ratio exactly. No max-height
   cap — a cap would make wide 2-up cards shorter than 16:9 and re-introduce the
   top/bottom crop (chrome + speed gauge). With a true 16:9 box, `cover` fills
   edge-to-edge with zero crop and zero letterbox at any card width. */
.fl-wz .fl-wz-card__image {
    aspect-ratio: 16/9; overflow: hidden;
    border-radius: calc(var(--fl-wz-radius) - 2px) calc(var(--fl-wz-radius) - 2px) 0 0;
    background: var(--fl-wz-accent-light);
}
.fl-wz .fl-wz-card__image img { width: 100%; height: 100%; object-fit: cover; }
.fl-wz .fl-wz-card--image .fl-wz-card__content { padding: 0.75rem 1rem; }

/* Card body (checkbox cards) */
.fl-wz .fl-wz-card__body { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.fl-wz .fl-wz-card__info { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.fl-wz .fl-wz-card__name { }
/* Значок варианта (атрибут wizard_icon): та же плитка, что у иконки шага, мельче — метка у названия. */
.fl-wz .fl-wz-card__icon {
    width: 2rem; height: 2rem; border-radius: var(--radius-lg); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: hsl(var(--fl-primary-600) / 0.12); color: hsl(var(--fl-primary-600));
}
.dark .fl-wz .fl-wz-card__icon { color: hsl(var(--fl-primary-400)); }
.fl-wz .fl-wz-card--image .fl-wz-card__icon { align-self: center; }
.fl-wz .fl-wz-card__price { font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: var(--theme-muted-foreground); }
.fl-wz .fl-wz-card.fl-wz-card--selected .fl-wz-card__price { color: var(--fl-wz-accent); font-weight: 700; }
/* Бесплатный ценник — единственная подпись у такой позиции; вид пилюли задан
   ниже одним правилом с .fl-wz-badge--free, чтобы бейдж был один на весь мастер. */

/* Card content (radio cards — text only) */
.fl-wz .fl-wz-card__content {
    display: flex; align-items: center; gap: 0.75rem; text-align: left;
}
.fl-wz .fl-wz-card__content-text { flex: 1; min-width: 0; }
.fl-wz .fl-wz-card__price-tag { font-weight: 800; font-size: 1rem; color: var(--fl-text-primary); white-space: nowrap; }

/* Card content (image cards — centered) */
.fl-wz .fl-wz-card--image .fl-wz-card__content {
    flex-direction: column; text-align: center; align-items: stretch;
}
.fl-wz .fl-wz-card--image .fl-wz-card__price-tag { margin-top: 0.35rem; }

/* Radio indicator */
.fl-wz .fl-wz-radio {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--fl-wz-control-border);
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--fl-wz-tr), background var(--fl-wz-tr);
}
.fl-wz .fl-wz-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: transparent; transition: background var(--fl-wz-tr);
}
.fl-wz .fl-wz-card--selected .fl-wz-radio {
    border-color: var(--theme-ring);
}
.fl-wz .fl-wz-card--selected .fl-wz-radio::after {
    background: var(--theme-ring);
}

/* Checkbox indicator */
.fl-wz .fl-wz-check {
    width: 24px; height: 24px; border-radius: var(--radius-lg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--fl-wz-control-border); color: var(--theme-ring);
    transition: background var(--fl-wz-tr), border-color var(--fl-wz-tr), box-shadow var(--fl-wz-tr);
}
.fl-wz .fl-wz-check.fl-wz-check--on {
    background: var(--fl-wz-accent); border-color: var(--fl-wz-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
    /* WCAG 1.4.11: галочка рисуется currentColor — на залитой рамке она обязана
       быть белой, иначе синее по синему (акцент = цвет кольца) и крыжика не видно. */
    color: #fff;
}

/* ── Badges ── */
.fl-wz .fl-wz-badge--free,
.fl-wz .fl-wz-card__price--free,
.fl-wz .fl-wz-card.fl-wz-card--selected .fl-wz-card__price--free {
    display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 9999px;
    background: rgba(16,185,129,0.12); color: var(--fl-success-text, #047857);
    text-transform: uppercase; letter-spacing: 0.04em;
    /* Колонка карточки с картинкой тянет содержимое по ширине — пилюля держит свой размер. */
    align-self: center;
}
.dark .fl-wz .fl-wz-badge--free,
.dark .fl-wz .fl-wz-card__price--free { background: rgba(16,185,129,0.18); }
.fl-wz .fl-wz-badge--popular {
    display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 9999px;
    /* WCAG 1.4.3: deepened stops — white on #8b5cf6 was 4.3:1 */
    background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.fl-wz .fl-wz-card-badge { position: absolute; top: -8px; right: 12px; z-index: 5; }
/* The badge hangs ~9px into the card; a one-line text card starts its row at
   ~10px, so the badge sat on the right-aligned price pill («Popular» over «Free»,
   2.1:1 where they met). Badged text cards reserve the overlap; image cards keep
   the badge over the picture. */
.fl-wz .fl-wz-card-wrap:has(> .fl-wz-card-badge) > .fl-wz-card:not(.fl-wz-card--image) { padding-top: 0.9rem; }
.fl-wz .fl-wz-card-wrap { position: relative; }

/* ── Tooltip ── */
.fl-wz .fl-wz-tooltip-trigger {
    background: none; border: none; cursor: pointer;
    /* 24×24 — WCAG 2.5.8 target size (22 px failed Lighthouse `target-size`, E1050) */
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    /* WCAG 1.4.11: the icon is the control's only visible cue, so it needs ≥3:1 on the card.
       The old accent-500 at opacity 0.4 measured 1.8:1 (dark) — an opaque shade per theme
       measures 5.2 / 4.3:1 light (plain / selected card) and 7.0 / 5.5:1 dark. */
    color: hsl(var(--fl-primary-600));
    transition: color 0.15s;
}
.fl-wz .fl-wz-tooltip-trigger:hover,
.fl-wz .fl-wz-tooltip-trigger:focus-visible { color: hsl(var(--fl-primary-700)); }
.fl-wz .fl-wz-tooltip-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 9999px; }
.dark .fl-wz .fl-wz-tooltip-trigger { color: hsl(var(--fl-primary-400)); }
.dark .fl-wz .fl-wz-tooltip-trigger:hover,
.dark .fl-wz .fl-wz-tooltip-trigger:focus-visible { color: hsl(var(--fl-primary-300)); }
.fl-wz .fl-wz-card-wrap:has(.fl-wz-tooltip[style*="display"]:not([style*="display: none"])),
.fl-wz .fl-wz-card-wrap:has(.fl-wz-tooltip:not([style])) { z-index: 100; }
.fl-wz .fl-wz-tooltip {
    position: absolute; z-index: 9999;
    /* The panel must read as a layer ABOVE the wizard: the divider border (~1.2:1) let it melt
       into the same-tone panel in dark theme. Control-border outline (≥3:1) + a caret anchored
       over the "i" (the trigger sits at the card's right edge, so the panel does too). */
    --fl-wz-tip-caret: calc(0.7rem + 6px);
    background: var(--theme-card, #fff); border: 1px solid var(--fl-wz-control-border);
    border-radius: var(--fl-wz-radius); padding: 0.75rem 1rem;
    font-size: 0.82rem; line-height: 1.5; color: var(--theme-foreground, #1e293b);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-width: 300px; width: max-content;
    right: 0; bottom: calc(100% + 8px);
}
.fl-wz .fl-wz-card-wrap:has(.fl-wz-card--image) .fl-wz-tooltip { --fl-wz-tip-caret: calc(1rem + 6px); }
.fl-wz .fl-wz-tooltip::after {
    content: ''; position: absolute; top: 100%; right: var(--fl-wz-tip-caret);
    width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg);
    background: inherit; border-right: inherit; border-bottom: inherit;
}
.dark .fl-wz .fl-wz-tooltip {
    background: var(--fl-paper-alt, #1e293b);
    color: var(--fl-text-primary, #f1f5f9); box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
/* Touch widths: the tooltip opens by TAP, so a floating layer would cover the very option
   the reader is choosing. Below the two-column breakpoint it drops into the flow under its
   card. `position: static` (not relative) is what kills the inherited `left`/`bottom`
   offsets — on a relative box `bottom: calc(100% + 6px)` stays live and yanks the panel up
   over the card by the full wrap height, leaving an empty band where it used to sit. */
@media (max-width: 767px) {
    .fl-wz .fl-wz-tooltip { position: static; max-width: 100%; margin-top: 0.5rem; }
    .fl-wz .fl-wz-tooltip::after { content: none; }
}

/* ── Brief Fields ── */
.fl-wz .fl-wz-brief { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
    .fl-wz .fl-wz-brief { grid-template-columns: repeat(2, 1fr); }
    .fl-wz .fl-wz-brief-group--wide { grid-column: span 2; }
}
.fl-wz .fl-wz-brief-group { display: flex; flex-direction: column; gap: 0.25rem; }
.fl-wz .fl-wz-brief-label { font-size: 0.875rem; font-weight: 600; color: var(--theme-foreground); }
.fl-wz .fl-wz-required { color: var(--fl-error-text, #b91c1c); margin-left: 2px; }
.fl-wz .fl-wz-brief-input {
    width: 100%; padding: 0.7rem 0.875rem;
    background: var(--theme-card); color: var(--theme-foreground);
    border: 1.5px solid var(--fl-wz-control-border); border-radius: var(--radius-xl);
    font-size: 0.875rem; font-family: inherit;
    transition: border-color var(--fl-wz-tr), box-shadow var(--fl-wz-tr);
}
.fl-wz .fl-wz-brief-input:focus { outline: none; border-color: var(--fl-wz-accent); box-shadow: 0 0 0 3px var(--fl-wz-accent-light); }
.fl-wz .fl-wz-brief-input.fl-wz-brief-input--error,
.fl-wz .fl-wz-brief-input[aria-invalid="true"] { border-color: var(--fl-error, #ef4444); box-shadow: 0 0 0 3px rgba(239,68,68,0.08); }
.fl-wz .fl-wz-brief-textarea { resize: vertical; min-height: 80px; }
.fl-wz .fl-wz-brief-select { appearance: none; cursor: pointer; }
.fl-wz .fl-wz-brief-error { font-size: 0.75rem; color: var(--fl-error, #ef4444); min-height: 1rem; }
/* Dark theme: the theme's global input hook (html.dark input:not(...)... in styles/theme css)
   outranks the component rule above and paints wizard fields with a primary-tinted
   background and a light primary border — clashing with the wizard card palette.
   Mirror its specificity (no !important) and use the SYSTEM surface tokens:
   paper-alt = one step lighter than the card (fields stand out, same hue),
   --fl-wz-control-border = the ≥3:1 control boundary shared with radio/checkbox. */
html.dark .fl-wz input.fl-wz-brief-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
html.dark .fl-wz textarea.fl-wz-brief-input,
html.dark .fl-wz select.fl-wz-brief-input {
    background-color: var(--fl-paper-alt, oklch(28% 0.02 270));
    border-color: var(--fl-wz-control-border);
    color: var(--theme-foreground);
    box-shadow: none;
}
html.dark .fl-wz input.fl-wz-brief-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):focus,
html.dark .fl-wz textarea.fl-wz-brief-input:focus,
html.dark .fl-wz select.fl-wz-brief-input:focus {
    border-color: var(--fl-wz-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-wz-accent) 25%, transparent);
}
html.dark .fl-wz input.fl-wz-brief-input[aria-invalid="true"]:not([type="hidden"]),
html.dark .fl-wz textarea.fl-wz-brief-input[aria-invalid="true"],
html.dark .fl-wz select.fl-wz-brief-input[aria-invalid="true"],
html.dark .fl-wz .fl-wz-brief-input.fl-wz-brief-input--error {
    border-color: var(--fl-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

/* Shake — validation error (functional, kept) */
.fl-wz .fl-wz-shake { animation: fl-wz-shake 0.4s ease; }
@keyframes fl-wz-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ── Bottom Area (subtotal + price + nav) ── */
.fl-wz .fl-wz-bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px dashed var(--fl-border, var(--theme-border));
}

/* ── Price Display ── */
.fl-wz .fl-wz-price-box {
    display: flex; align-items: baseline; gap: 0.5rem;
    flex: 1 1 auto; justify-content: center;
}
.fl-wz .fl-wz-price-label {
    font-size: 0.75rem; font-weight: 600; color: var(--theme-muted-foreground);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.fl-wz .fl-wz-price-hint { font-size: 0.85rem; font-weight: 600; color: var(--theme-muted-foreground); text-align: center; }
.fl-wz .fl-wz-price-value { font-size: 1.5rem; font-weight: 900; color: var(--theme-foreground); letter-spacing: -0.02em; }
/* Billing-type chip: states what the total actually is (one-time vs subscription) */
.fl-wz .fl-wz-paytype {
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    color: var(--theme-muted-foreground);
    border: 1px solid var(--fl-border, var(--theme-border));
}

/* ── Step Subtotal ── */
.fl-wz .fl-wz-step-subtotal {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.75rem; font-size: 0.8rem;
}
.fl-wz .fl-wz-step-subtotal__label { color: var(--theme-muted-foreground); font-weight: 500; }
/* WCAG 1.4.3: accent (primary-500) fails 4.5:1 on the light card (#f9fbfc→3.5) and
   dark card (#182130→4.44). Foreground token flips with theme and is contrast-safe;
   emphasis is carried by weight. */
.fl-wz .fl-wz-step-subtotal__value { font-weight: 700; color: var(--theme-foreground); }

/* Total breakdown chips — the running total, itemized on every step */
.fl-wz .fl-wz-breakdown {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.35rem 1rem; margin-top: 0.65rem; font-size: 0.8rem;
    color: var(--theme-muted-foreground);
}
.fl-wz .fl-wz-breakdown__item { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.fl-wz .fl-wz-breakdown__price { font-weight: 700; color: var(--theme-foreground); white-space: nowrap; }
/* «Бесплатно» в разбивке итога — та же пилюля, что и в карточке (класс бейджа идёт ниже). */
.fl-wz .fl-wz-breakdown__price.fl-wz-badge--free { color: var(--fl-success-text, #047857); }

/* Preset banner — explains what a tariff card just pre-selected */
.fl-wz .fl-wz-preset-banner {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 0.65rem;
    margin: 0 0 1.1rem; padding: 0.8rem 1rem;
    border-radius: var(--fl-wz-radius);
    border: 1px solid var(--fl-wz-accent);
    background: var(--fl-wz-gradient-subtle);
    font-size: 0.85rem; color: var(--theme-foreground);
}
.fl-wz .fl-wz-preset-banner__icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--theme-foreground); }
.fl-wz .fl-wz-preset-banner__body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fl-wz .fl-wz-preset-banner__title { font-weight: 700; }
/* The total is what the visitor came for — it reads first after the title. */
.fl-wz .fl-wz-preset-banner__price { color: var(--theme-muted-foreground); }
.fl-wz .fl-wz-preset-banner__price strong { display: inline-block; font-size: 1rem; font-weight: 800; color: var(--theme-foreground); }
.fl-wz .fl-wz-preset-banner__line { color: var(--theme-muted-foreground); }
.fl-wz .fl-wz-preset-banner__remaining { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.fl-wz .fl-wz-preset-banner__chip {
    font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--theme-foreground);
    padding: 0.1rem 0.5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--theme-foreground) 7%, transparent);
}
/* Separator between steps: real text for screen readers (chips alone read as one run-on word),
   hidden on wide screens where the chips separate visually, shown as " · " on a phone. */
.fl-wz .fl-wz-preset-banner__sep {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fl-wz .fl-wz-preset-banner__line strong { color: var(--theme-foreground); font-weight: 600; }
.fl-wz .fl-wz-preset-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.fl-wz .fl-wz-preset-banner__reset {
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    padding: 0.35rem 0.7rem; border-radius: 8px;
    border: 1px solid var(--fl-wz-control-border);
    background: transparent; color: var(--theme-foreground); cursor: pointer;
}
.fl-wz .fl-wz-preset-banner__reset:hover { border-color: var(--fl-wz-accent); }
.fl-wz .fl-wz-preset-banner__close {
    background: none; border: 0; cursor: pointer; line-height: 1;
    font-size: 1.15rem; color: var(--theme-muted-foreground); padding: 0.1rem 0.3rem;
}
.fl-wz .fl-wz-preset-banner__close:hover { color: var(--theme-foreground); }
/* Folded after the first move: title and total on one line, controls stay. */
.fl-wz .fl-wz-preset-banner--compact { padding-top: 0.55rem; padding-bottom: 0.55rem; align-items: center; }
.fl-wz .fl-wz-preset-banner--compact .fl-wz-preset-banner__icon { margin-top: 0; }
.fl-wz .fl-wz-preset-banner--compact .fl-wz-preset-banner__body { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; }
.fl-wz .fl-wz-preset-banner--compact .fl-wz-preset-banner__price strong { font-size: 0.9rem; }
/* Phone: the tick stays beside the text (it used to take a row of its own), "×" sits in the corner
   and "Start from scratch" goes under the text — no extra rows for controls. */
@media (max-width: 640px) {
    .fl-wz .fl-wz-preset-banner { grid-template-columns: auto minmax(0, 1fr); position: relative; padding-right: 2.25rem; }
    .fl-wz .fl-wz-preset-banner__actions { grid-column: 2; justify-content: flex-start; margin-top: 0.5rem; }
    .fl-wz .fl-wz-preset-banner__close { position: absolute; top: 0.45rem; right: 0.45rem; min-width: 24px; min-height: 24px; }
    /* Steps left read as one sentence on a phone: a chip per row tripled the height. */
    .fl-wz .fl-wz-preset-banner__remaining { display: block; }
    .fl-wz .fl-wz-preset-banner__chip { display: inline; padding: 0; background: none; font-size: inherit; font-weight: 400; color: inherit; }
    .fl-wz .fl-wz-preset-banner__sep { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}

/* Progress segment dot — a future step already holding a (preset) selection */
.fl-wz .fl-wz-progress__segment { position: relative; }
.fl-wz .fl-wz-progress__dot {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fl-wz-accent);
}

/* ── Navigation ── */
.fl-wz .fl-wz-btn {
    padding: 0.6rem 1.5rem; border-radius: var(--fl-wz-radius);
    font-weight: 700; font-size: 0.85rem; text-align: center; cursor: pointer; border: none;
    transition: box-shadow var(--fl-wz-tr), background var(--fl-wz-tr), filter var(--fl-wz-tr);
}
.fl-wz .fl-wz-btn:focus-visible { outline: 2px solid var(--fl-wz-accent); outline-offset: 2px; }
.fl-wz .fl-wz-btn.fl-wz-btn--primary {
    background: hsl(var(--fl-primary-600)); color: #fff; -webkit-text-fill-color: #fff;
}
.fl-wz .fl-wz-btn.fl-wz-btn--primary:hover {
    background: hsl(var(--fl-primary-700));
}
.fl-wz .fl-wz-btn.fl-wz-btn--secondary {
    background: var(--theme-card, #fff); color: var(--theme-foreground, #1e293b);
    -webkit-text-fill-color: var(--theme-foreground, #1e293b); border: 1px solid var(--fl-wz-control-border);
}
.fl-wz .fl-wz-btn.fl-wz-btn--secondary:hover { background: var(--theme-muted, #f1f5f9); }
.dark .fl-wz .fl-wz-btn.fl-wz-btn--secondary {
    background: var(--fl-paper-alt, #1e293b);
    color: var(--fl-text-primary, #f1f5f9); -webkit-text-fill-color: var(--fl-text-primary, #f1f5f9);
}
.dark .fl-wz .fl-wz-btn.fl-wz-btn--secondary:hover { background: var(--fl-paper, #0f172a); }



/* ── Summary Step ── */
.fl-wz .fl-wz-summary { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; }
.fl-wz .fl-wz-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 60%, transparent);
}
.fl-wz .fl-wz-summary-row:last-child { border-bottom: none; }
.fl-wz .fl-wz-summary-label { font-size: 0.85rem; color: var(--theme-muted-foreground); }
.fl-wz .fl-wz-summary-value { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--theme-foreground); }
.fl-wz .fl-wz-summary-edit {
    background: none; border: none; cursor: pointer; padding: 4px;
    /* WCAG 1.4.11: opaque shade per theme, same pair as .fl-wz-tooltip-trigger (accent at 0.5 fell under 3:1). */
    color: hsl(var(--fl-primary-600)); border-radius: var(--radius-md); transition: color 0.15s;
}
.fl-wz .fl-wz-summary-edit:hover, .fl-wz .fl-wz-summary-edit:focus-visible { color: hsl(var(--fl-primary-700)); }
.fl-wz .fl-wz-summary-edit:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.dark .fl-wz .fl-wz-summary-edit { color: hsl(var(--fl-primary-400)); }
.dark .fl-wz .fl-wz-summary-edit:hover,
.dark .fl-wz .fl-wz-summary-edit:focus-visible { color: hsl(var(--fl-primary-300)); }

/* ── Step Transition (functional, direction-aware) ── */
.fl-wz .fl-wz-slide-enter { animation: fl-wz-slideR 0.2s ease; }
.fl-wz .fl-wz-slide-enter.fl-wz-slide-back { animation: fl-wz-slideL 0.2s ease; }
@keyframes fl-wz-slideR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fl-wz-slideL { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .fl-wz *, .fl-wz *::before, .fl-wz *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
    }
}

/* ── Hide Magento native price ── */

/* ── Print ── */
@media print {
    .fl-wz .fl-wz-bottom, .fl-wz .fl-wz-progress,
    .fl-wz .fl-wz-tooltip, .fl-wz .fl-wz-summary-edit { display: none; }
    .fl-wz .fl-wz-main { border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
    .fl-wz .fl-wz-card { break-inside: avoid; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
    /* Two rows, as on the summary step: the total on its own line, Back/Next under it. One row
       squeezed "+ ₽/month" under the buttons and the pay-type chip into a circle (subscription brief). */
    .fl-wz .fl-wz-bottom { flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    .fl-wz .fl-wz-price-box { justify-content: center; min-width: 0; }
    .fl-wz .fl-wz-bottom > .fl-wz-price-box { order: -1; flex: 1 1 100%; }
    .fl-wz .fl-wz-bottom > .fl-wz-btn--primary { margin-left: auto; }
    .fl-wz .fl-wz-btn { white-space: nowrap; padding: 0.5rem 1rem; font-size: 0.8rem; }
    .fl-wz .fl-wz-card__body { flex-wrap: wrap; }
    .fl-wz .fl-wz-step-icon { width: 36px; height: 36px; font-size: 1.1rem; }
    .fl-wz .fl-wz-step-title { font-size: 1rem; }
    .fl-wz .fl-wz-progress__bar { height: 10px; border-radius: var(--radius-sm); }
}

/* ── Billing axis: one-time vs monthly radio cards on the summary step ── */
.fl-wz .fl-wz-billing {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
    margin: 1.25rem 0 0; padding: 0; border: 0; position: relative;
}
.fl-wz .fl-wz-billing__q {
    grid-column: 1 / -1; margin-bottom: 0.25rem;
    font-size: 0.95rem; font-weight: 700;
    color: var(--fl-text-primary, var(--theme-foreground));
}
.fl-wz .fl-wz-billing__card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.9rem 1rem; border-radius: 14px; cursor: pointer;
    background: var(--fl-paper, var(--theme-card));
    border: 2px solid var(--fl-border, var(--theme-border));
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fl-wz .fl-wz-billing__card:hover { border-color: var(--theme-primary); }
.fl-wz .fl-wz-billing__card--active {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}
.fl-wz .fl-wz-billing__radio { position: absolute; opacity: 0; pointer-events: none; }
/* Keyboard focus only: the summary step focuses its first radio on entry, and :focus-within drew the
   ring on "One payment" next to the selected "Monthly" — two cards looked chosen. */
.fl-wz .fl-wz-billing__card:has(:focus-visible) {
    outline: 2px solid var(--theme-primary); outline-offset: 2px;
}
.fl-wz .fl-wz-billing__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
}
.fl-wz .fl-wz-billing__title {
    font-size: 0.85rem; font-weight: 700;
    color: var(--fl-text-primary, var(--theme-foreground));
}
/* Contrast-safe like the step subtotal: foreground token, emphasis via weight */
.fl-wz .fl-wz-billing__price {
    font-size: 1rem; font-weight: 800; color: var(--theme-foreground); white-space: nowrap;
}
.fl-wz .fl-wz-billing__desc {
    font-size: 0.78rem; line-height: 1.45;
    color: var(--theme-muted-foreground);
}
@media (max-width: 560px) {
    .fl-wz .fl-wz-billing { grid-template-columns: 1fr; }
}
/* 390px: the subscription total ("$49/month + $99 one-time setup") plus the pay-type
   chip is wider than the viewport — let the price box wrap instead of overflowing. */
@media (max-width: 560px) {
    .fl-wz .fl-wz-price-box { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    /* the chip text itself must be allowed to break, nowrap makes it the widest child */
    .fl-wz .fl-wz-paytype { white-space: normal; text-align: center; }
}

/* ── Per-Option Billing (mixed one-time build + monthly services) ── */
/* Monthly price tag on a service card: same size as a normal tag, foreground token
   keeps it contrast-safe in both themes; the "/month" suffix is part of the text. */
.fl-wz .fl-wz-card__price-tag--monthly { color: var(--theme-foreground); }
/* Second line in the price box: "+ $25/month" next to the one-time total */
.fl-wz .fl-wz-price-monthly {
    font-size: 0.95rem; font-weight: 700; white-space: nowrap;
    color: var(--theme-foreground);
}
/* Tiny segmented toggle inside a service card: "Pay once | Monthly" */
.fl-wz .fl-wz-bill-toggle {
    display: inline-flex; margin-top: 0.4rem; border-radius: 999px;
    border: 1px solid var(--fl-wz-control-border);
    background: var(--fl-paper, var(--theme-card));
    overflow: hidden; width: fit-content;
}
.fl-wz .fl-wz-bill-toggle__btn {
    font-size: 0.72rem; font-weight: 600; line-height: 1;
    padding: 0.35rem 0.65rem; cursor: pointer;
    color: var(--theme-muted-foreground);
    background: transparent; border: 0;
}
.fl-wz .fl-wz-bill-toggle__btn--on {
    color: var(--theme-primary-foreground, #fff);
    background: var(--theme-primary);
}
.fl-wz .fl-wz-bill-toggle__btn:focus-visible {
    outline: 2px solid var(--theme-primary); outline-offset: -2px;
}
/* Unselected service card: plain "one-time or monthly" hint where the toggle
   will appear — the toggle itself only renders on the selected card, so it can
   never read as order state on a card that is not in the order. */
.fl-wz .fl-wz-bill-hint {
    display: inline-block; margin-top: 0.4rem;
    font-size: 0.72rem; font-weight: 500;
    color: var(--theme-muted-foreground);
}
/* Preset banner: the monthly-service line names the subscription the package
   just picked — the combined "+ $Y/month" total alone went unnoticed. */
.fl-wz .fl-wz-preset-banner__line--monthly {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem;
    color: var(--theme-foreground); font-weight: 600;
}
.fl-wz .fl-wz-preset-banner__line--monthly svg { flex-shrink: 0; }
/* Required-selection error. Layout lives in CSS (not inline) so Alpine x-show —
   which toggles the element's inline `display` — cannot strip `display:flex` and
   drop the icon onto its own line. Colour via --fl-error-text auto-adapts:
   #B91C1C on light (5.89:1), #F87171 on dark (6.8:1) — both pass WCAG AA. */
.fl-wz .fl-wz-error {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600;
    color: var(--fl-error-text, #b91c1c);
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
}
.fl-wz .fl-wz-error svg { flex-shrink: 0; }

/* One-subscription-per-order notice: friendly gate shown instead of a checkout
   exception when the cart already holds a monthly service. Amber pair is
   contrast-safe on both themes (amber-800 on light, amber-300 on dark). */
.fl-wz .fl-wz-subnote {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
    margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600;
    color: #92400e; background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.4);
}
.dark .fl-wz .fl-wz-subnote {
    color: #fcd34d; border-color: rgba(252, 211, 77, 0.35);
}
.fl-wz .fl-wz-subnote__icon { flex-shrink: 0; }
.fl-wz .fl-wz-subnote__text { flex: 1; min-width: 200px; }
.fl-wz .fl-wz-subnote a { text-decoration: none; }