:root {
    /* Accent unic brand (verde). Consolidat: butoanele/stepper-ul referă --color-primary,
       deci toate stările de acțiune/progres pică pe acest accent dintr-un singur loc. */
    --sbc-accent: #2D6E4E;
    --sbc-accent-dark: #235A3F;
    --color-primary: var(--sbc-accent);
    --color-primary-dark: var(--sbc-accent-dark);
    --color-primary-light: #3f8a63;

    /* Auriu accent — sursă unică. RESKIN 2: aliniat la #D49400 (flip intenționat).
       O singură linie aici → se propagă în TOATE utilizările --sbc-gold/--lemet-gold/
       --color-accent (carduri active, accente text, tooltip, measure-help, gold-bar etc.). */
    --sbc-gold: #D49400;
    --color-accent: var(--sbc-gold);

    --color-black: #1a1a1a;
    --color-dark: #222222;
    --color-gray-900: #333333;
    --color-gray-700: #555555;
    --color-gray-500: #888888;
    --color-gray-300: #cccccc;
    --color-gray-100: #f4f4f4;
    --color-white: #ffffff;

    /* Tipografie. --font-display/--font-body = skin actual (Playfair/Lato), neatins.
       --sbc-font-sans/--sbc-font-mono = re-skin țintă (Inter + IBM Plex Mono): DEFINITE
       aici + enqueue în PHP, dar ÎNCĂ neaplicate pe componente — aplicarea vine în
       commit-urile de componente. */
    /* RESKIN A1: --font-display repointat la stack-ul Inter (tokenii Inter/mono erau
       definiți dar nereconectați la componente). --font-body rămâne Lato (neatins). */
    --font-display: var(--sbc-font-sans);
    --font-body: 'Lato', 'Helvetica Neue', sans-serif;
    --sbc-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --sbc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --lemet-gold: var(--color-accent);
    --lemet-black: var(--color-black);
    --lemet-white: var(--color-white);
    --lemet-gray: var(--color-gray-100);
    --lemet-border: var(--color-gray-300);
    --lemet-font: var(--sbc-font-sans); /* RESKIN A1: Lato → Inter (era nereconectat) */
    --lemet-primary: var(--color-primary);
    --lemet-primary-dark: var(--color-primary-dark);

    /* Carduri-opțiune. RESKIN 5 (skin B): bordura gold-tint → hairline blueprint
       --sbc-line (#eee), iar fundalul-activ #fffdf9 (warm/auriu) → tentă verde subtilă
       (#f3f8f5). Selecția devine VERDE, consistent cu segmente/laturi/headers active.
       Sursă unică: o linie aici propagă în toate cele ~10 familii de carduri. */
    --sbc-card-border: var(--sbc-line);
    --sbc-card-border-strong: var(--sbc-line);
    --sbc-card-active-bg: #f3f8f5;

    --sbc-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    --sbc-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Neutrali spec-sheet (RESKIN 2) — sursă unică pt. linii / panouri / text-muted.
       Valorile = EXACT hex-urile hardcodate anterior în zona recap → relocare pură
       (operația A, zero schimbare vizuală). Skin-ul spec-sheet (B) le repune intenționat.
       Excepție: --sbc-line-strong e NOU (folosit doar în B — bordura blueprint). */
    --sbc-line: #eee;            /* hairline: container, separator antet, notă, accesorii */
    --sbc-line-soft: #f5f5f5;    /* separator fin rânduri tabel */
    --sbc-line-strong: #d8d8d8;  /* (B) bordură blueprint container — NOU */
    --sbc-panel: #f9f9f9;        /* fundal antet tabel */
    --sbc-panel-alt: #fafafa;    /* fundal rânduri accesorii */
    --sbc-muted: #6a6a6a;        /* etichete/keys, text secundar. A3/F4: #888 (≈3.5:1) → #6a6a6a
                                    = 5.40:1 pe alb (WCAG AA). Decuplat de --color-gray-500 (scara
                                    neutrală rămâne #888, dar textul auxiliar are nevoie de AA). */
    --sbc-muted-soft: #767676;   /* notă subsol. A3/F4: #999 (≈2.85:1) → #767676 = 4.55:1 pe alb;
                                    rămâne mai deschis decât --sbc-muted (ierarhia păstrată). */
    --sbc-muted-deep: #666666;   /* text rânduri accesorii. A3/F4: #777 (4.22:1 pe --sbc-panel-alt
                                    #fafafa, bg-ul real al rândurilor) → #666 = 5.50:1 pe #fafafa,
                                    5.74:1 pe alb. #767676 ar da doar 4.35:1 pe #fafafa (sub AA),
                                    de aceea mai închis. Rămâne mai închis ca --sbc-muted („deep"). */
    --sbc-ink: var(--color-black);      /* #1a1a1a — ink primar / suprafețe închise */
    --sbc-title: var(--sbc-ink); /* (B) culoare valori k/v */

    /* Neutrali accordion + mini-rail (RESKIN 4) — sursă unică, valori = EXACT hex-urile
       hardcodate anterior în zona headers/rail (operația A: relocare pură, zero schimbare
       vizuală). PER STARE/ROL: fiecare are token-ul propriu — NU se colapsează (un
       completed/valid nu trebuie să cadă pe disabled/pending etc.). Skin-ul (B) repune
       intenționat alte valori acolo unde prototipul cere (border secțiune & conector
       rail → --sbc-line, rail pending → --sbc-muted) — acelea NU sunt în lista de mai jos. */
    --sbc-acc-surface: #faf8f4;        /* fundal header (collapsed/expanded) */
    --sbc-acc-surface-hover: #f3efe7;  /* fundal header :hover */
    --sbc-acc-chevron: #8a8a8a;        /* chevron */
    --sbc-acc-dash: #e8e8e8;           /* separator dashed între pași din aceeași secțiune */
    --sbc-rail-label: #666666;         /* etichetă rail (non-current) */
    --sbc-state-pending: #b9a37a;      /* STARE pending: status-glyph fallback (header) */
    --sbc-state-warn: #b9942f;         /* STARE warn/invalid: rail invalid + focus outline header */
    --sbc-state-neutral: #9a8c70;      /* STARE neutral: rail neutral + step-error text */
}

/* Scoped box-sizing — does not affect WordPress theme */
#sbc-app *, #sbc-app *::before, #sbc-app *::after { box-sizing: border-box; }

.sbc-wrapper {
    max-width: 1200px;
    width: 95%;
    margin: 20px auto;
    background: var(--lemet-white);
    font-family: var(--lemet-font);
    color: var(--color-gray-900);
    min-height: auto;
    border-radius: 20px;
    box-shadow: var(--sbc-shadow);
    padding: 30px;
    border: 1px solid var(--lemet-border);
    display: flex;
    flex-direction: column;
}

.sbc-main-header {
    text-align: center;
    margin-bottom: 50px;
}

.sbc-main-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.6rem;
    margin: 0 0 10px;
}

.gold-text { color: var(--lemet-gold); font-weight: 700; }

.sbc-gold-bar {
    width: 60px;
    height: 3px;
    background: var(--lemet-gold);
    margin: 0 auto;
}

.sbc-loader {
    font-size: 0.85rem;
    color: #9a9489;
    letter-spacing: 0.5px;
}

/* A7 — previzualizarea goală, cât timp nu există o formă aleasă. Ocupă tot containerul, ca
   trecerea gol → desen să nu producă un salt de înălțime în coloana din dreapta. */
.sbc-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    padding: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: #9a9489;
    letter-spacing: 0.5px;
}

/* Layout premium 60/40 */
.sbc-calculator-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 44px;
    align-items: start;
}

.sbc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 30px;
    align-items: start;
    flex: 1;
    width: 100%;
}

#sbc-inputs-side {
    padding: 8px 6px;
    min-width: 0;
}

#sbc-visual-side {
    position: -webkit-sticky;
    position: sticky;
    /* --sbc-sticky-top e setată runtime din accordion-ui.js (setupStickyTop) = înălțimea
       chrome-ului pinned-sus care acoperă efectiv (headerul WoodMart pe produs, care face
       shrink la scroll). Fallback 30px pe standalone / legacy wizard / la scroll 0. */
    top: var(--sbc-sticky-top, 30px);
    align-self: start;
    height: fit-content;
    z-index: 10;
}

.sbc-main-grid.sbc-full-width-mode {
    grid-template-columns: 1fr;
}

.sbc-main-grid.sbc-full-width-mode #sbc-visual-side {
    display: none;
}

.sbc-visual-container {
    background: #fff;
    border: 1px solid var(--lemet-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--sbc-shadow);
    overflow: visible;
}

.sbc-visual-surface {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f2 100%);
    border: 1px solid var(--lemet-border);
    box-shadow: var(--sbc-shadow-soft);
    border-radius: 12px;
    padding: 14px;
}

/* Premium input fields */
.sbc-input-field {
    margin-bottom: 25px;
}

.sbc-input-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8c877e;
    margin-bottom: 8px;
    letter-spacing: 1.2px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    padding: 16px 46px 16px 16px;
    border: 1px solid var(--lemet-border);
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--lemet-font);
    transition: border-color 0.25s, box-shadow 0.25s;
    background: #fff;
}

.input-wrapper input:focus {
    border-color: var(--lemet-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(74, 124, 63, 0.12);
}

.input-wrapper .unit {
    position: absolute;
    right: 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #b2ab9f;
}

@media (max-width: 1100px) {
    .sbc-main-grid {
        grid-template-columns: 1fr 350px;
        gap: 20px;
    }
}

@media (max-width: 980px) {
    .sbc-wrapper {
        margin: 20px;
        padding: 32px 28px 44px;
    }

    .sbc-calculator-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sbc-wrapper {
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 20px;
    }

    .sbc-main-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    #sbc-visual-side {
        order: -1;
        position: relative;
        top: 0;
        width: 100%;
        margin-bottom: 30px;
    }

    #sbc-canvas-area {
        height: 300px;
    }

    .sbc-navbar-inner {
        justify-content: flex-start;
        gap: 20px;
    }

    .sbc-main-header h1 {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }

    .sbc-shape-grid {
        grid-template-columns: 1fr;
    }
}

.sbc-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
    border-right: 1px solid #eee;
}

.sbc-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
}

.sbc-nav-item.active {
    opacity: 1;
    color: var(--lemet-gold);
}

.sbc-nav-item.locked {
    cursor: not-allowed;
    opacity: 0.2;
}

.nav-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.sbc-nav-item.active .nav-dot {
    border-color: var(--lemet-gold);
    background: var(--lemet-gold);
    color: white;
}

.sbc-nav-item.locked .nav-dot {
    border-style: dashed;
}

/* Navbar Orizontal */
.sbc-navbar {
    width: 100%;
    padding: 0 0 25px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    padding-bottom: 25px;
    -webkit-overflow-scrolling: touch;
}

.sbc-navbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 800px;
    gap: 5px;
}

.sbc-nav-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    cursor: pointer;
    transition: all 0.3s;
}

.sbc-nav-step.locked {
    cursor: not-allowed;
    opacity: 0.3;
}

.step-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ddd;
    display: grid;
    place-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    z-index: 2;
    transition: all 0.3s;
}

.sbc-nav-step.active .step-circle {
    border-color: var(--sbc-accent);
    color: var(--sbc-accent);
    box-shadow: 0 0 10px rgba(45, 110, 78, 0.3);
}

.sbc-nav-step.completed .step-circle {
    background: var(--sbc-accent);
    border-color: var(--sbc-accent);
    color: white;
}

.step-label {
    margin-top: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    text-align: center;
    white-space: nowrap;
}

.sbc-nav-step.active .step-label {
    color: var(--lemet-black);
}

.step-connector {
    position: absolute;
    height: 2px;
    background: #eee;
    width: 100%;
    top: 11px;
    left: 50%;
    z-index: 1;
}

.sbc-nav-step.completed .step-connector {
    background: var(--sbc-accent);
    opacity: 0.5;
}

@media (max-width: 980px) {
    .sbc-navbar-inner {
        flex-wrap: wrap;
        gap: 20px 0;
    }

    .sbc-nav-step {
        min-width: 80px;
    }
}

.sbc-module-selector-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
}

.sbc-button-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

/* B (skin): pastilă module = limbaj blueprint. radius 18→4, Lato→Inter (--sbc-font-sans),
   weight 500→700, uppercase + tracking, 1.3rem→1rem, flat (shadow scos, fără translateY).
   A: --lemet-primary → --sbc-accent / --lemet-primary-dark → --sbc-accent-dark (alias identic). */
#sbc-app .sbc-main-btn {
    background-color: var(--sbc-accent) !important;
    color: white !important;
    border: none !important;
    padding: 22px 50px !important;
    font-size: 1rem !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
    min-width: 200px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: normal !important;
}

#sbc-app .sbc-main-btn:hover {
    background-color: var(--sbc-accent-dark) !important;
    box-shadow: none !important;
    color: white !important;
}

#sbc-app .sbc-main-btn:active {
    background-color: var(--sbc-accent-dark) !important;
}

/* A2 — categoria ALEASĂ. Cele patru butoane erau identice cât timp secțiunea 01 e deschisă,
   deci nimic nu spunea pe care ești. `:active` de mai sus e apăsarea, nu selecția — de aceea
   starea are nevoie de o clasă proprie, emisă din stare la randare (components.js). */
#sbc-app .sbc-main-btn.active {
    background-color: var(--sbc-accent-dark) !important;
    box-shadow: inset 0 0 0 2px var(--sbc-text, #1d1d1d) !important;
}

/* Cardurile sunt de acum focusabile (role=button + tabindex=0). Fără un contur vizibil,
   navigarea din tastatură ar fi posibilă dar oarbă. */
.sbc-subtype-card:focus-visible,
.sbc-shape-card:focus-visible,
.sbc-edge-card:focus-visible {
    outline: 2px solid var(--sbc-accent);
    outline-offset: 2px;
}

/* B (skin): secundar = ghost blueprint (fundal transparent, text + border accent).
   radius 6→4, border 2px gri→1px accent, Lato→Inter, flat (fără translateY/shadow).
   Hover: fundal accent subtil. A: --lemet-primary → --sbc-accent (alias identic). */
#sbc-app .sbc-btn-secondary {
    width: 100%;
    background: transparent !important;
    color: var(--sbc-accent) !important;
    border: 1px solid var(--sbc-accent) !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

#sbc-app .sbc-btn-secondary:hover {
    background: rgba(45, 110, 78, 0.08) !important;
    border-color: var(--sbc-accent-dark) !important;
    color: var(--sbc-accent-dark) !important;
}

#sbc-app .sbc-btn-secondary:active {
    background: rgba(45, 110, 78, 0.14) !important;
}

/* B (skin): primar = blueprint plin flat. radius 6→4, border 2px→1px, Lato→Inter,
   fără translateY/shadow. A: --lemet-primary → --sbc-accent, --lemet-primary-dark →
   --sbc-accent-dark (alias identic). */
#sbc-app .sbc-btn-primary {
    background-color: var(--sbc-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--sbc-accent) !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    width: 100%;
}

#sbc-app .sbc-btn-primary:hover {
    background-color: var(--sbc-accent-dark) !important;
    border-color: var(--sbc-accent-dark) !important;
}

#sbc-app .sbc-btn-primary:active {
    background-color: var(--sbc-accent-dark) !important;
}

/* T1 — stare disabled clară pe CTA-urile primare: distinct instant de enabled,
   fără hover/elevation, cursor not-allowed. */
#sbc-app .sbc-btn-primary:disabled,
#sbc-app .sbc-btn-primary[disabled],
#sbc-app .sbc-btn-next-premium:disabled,
#sbc-app .sbc-btn-next-premium[disabled],
#sbc-app .sbc-btn-whatsapp-v5:disabled,
#sbc-app .sbc-btn-whatsapp-v5[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4) !important;
    box-shadow: none !important;
}

#sbc-app .sbc-btn-primary:disabled:hover,
#sbc-app .sbc-btn-primary[disabled]:hover,
#sbc-app .sbc-btn-next-premium:disabled:hover,
#sbc-app .sbc-btn-next-premium[disabled]:hover,
#sbc-app .sbc-btn-whatsapp-v5:disabled:hover,
#sbc-app .sbc-btn-whatsapp-v5[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--sbc-accent) !important;
    background-color: var(--sbc-accent) !important;
}

#sbc-app .sbc-decision-box {
    background: #f9f9f9;
    border: 1px solid var(--color-gray-300);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    margin: 20px 0;
}

#sbc-app .sbc-decision-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 24px;
}

#sbc-app .sbc-decision-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    max-width: 360px;
    margin: 0 auto;
}

.sbc-step-title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    color: var(--lemet-black);
}

.sbc-subtype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.sbc-subtype-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    padding: 30px 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    min-height: 180px;
}

.sbc-subtype-card i {
    font-size: 2rem;
    color: var(--sbc-accent);
}

.sbc-subtype-card span {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.sbc-subtype-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-subtype-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-subtype-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sbc-btn-link {
    display: block;
    margin: 40px auto;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-family: var(--lemet-font);
    text-decoration: underline;
}

.sbc-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    padding: 20px;
}

.sbc-shape-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    overflow: hidden;
    min-height: 200px;
}

.sbc-shape-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-shape-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-shape-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sbc-shape-svg {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.sbc-shape-svg-premium {
    width: 100%;
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
}

.sbc-shape-svg-v5 {
    width: 100%;
    max-width: 160px;
    height: 100px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto;
}

.shape-stone-fill {
    fill: #f4f4f4;
    stroke: #ddd;
    stroke-width: 0.5;
}

.shape-edge-gold {
    stroke: var(--lemet-gold);
    stroke-width: 3.5;
    stroke-linecap: round;
    fill: none;
}

.sbc-shape-card span {
    font-family: var(--lemet-font);
    font-size: 0.85rem;
    color: #1a1a1a;
    letter-spacing: 0.3px;
    text-align: center;
    max-width: 80%;
    line-height: 1.3;
}

.sbc-shape-card:hover .sbc-shape-svg-v5 {
    transform: scale(1.05) translateY(-2px);
}

@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sbc-step-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sbc-title-main {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.6px;
    margin: 0;
    color: var(--lemet-black);
}

.sbc-notice-box {
    display: flex;
    gap: 15px;
    background: #f4f6f2;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.sbc-notice-box i { color: #888; margin-top: 3px; }

.sbc-dimensions-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sbc-dimensions-control-box {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.sbc-inputs-grid-l {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.sbc-static-ghid {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
}

.sbc-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.sbc-input-group-premium label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.sbc-input-group-premium input {
    width: 100%;
    padding: 15px 20px;
    /* B (skin blueprint, input-pill COMPLET): border #ccc → --sbc-line (hairline, ca .sbc-main-input;
       #ccc era gri generic, fără rol/nuanță distinctă), pill 30px → radius 4 (afordanță tehnică,
       ca steppere/main-input), font --lemet-font (Lato) → --sbc-font-sans (Inter). */
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--sbc-font-sans);
    background: #fff;
    transition: border-color 0.3s;
}

.sbc-input-group-premium input:focus {
    /* B: focus gold → verde --sbc-accent (auriul scos de pe interacțiune). */
    border-color: var(--sbc-accent);
    outline: none;
}

.sbc-input-group-premium span {
    display: block;
    margin-top: 10px;
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
}

.sbc-dimensions-layout-v5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #f2f2f2;
}

.sbc-static-ghid-box {
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

.sbc-ghid-svg-container {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbc-label-mini {
    margin: 0 0 15px 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #8c877e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sbc-dimensions-inputs {
    display: flex;
    flex-direction: column;
}

.sbc-inputs-grid-v5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sbc-input-field-v5 {
    margin-bottom: 8px;
}


.sbc-ghid-svg-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sbc-ghid-svg {
    max-width: 500px;
    width: 100%;
    height: auto;
}

.sbc-dimensions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

/* Layout Step4: ghid full-width sus + input-uri dedesubt */
.sbc-static-ghid-box-v5 {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 60px 40px;
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sbc-dimensions-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.sbc-input-wrapper-v5 {
    width: 100%;
}


/* Containerul de Navigare (Footer) */
.sbc-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

.sbc-nav-left,
.sbc-nav-right {
    display: flex;
    align-items: center;
}

/* BUTONUL PREMIUM (Cel auriu din imagine) */
/* B (skin): wizard „înainte" = CTA primar blueprint. radius 50px(pill)→4, Lato→Inter,
   +uppercase/tracking, flat (shadow + translateY scoase), hover accent-dark unificat,
   +min-height 44 (touch). Nudge-ul săgeții (i translateX) păstrat — micro-interacțiune pe
   icon, nu elevație buton. A: --lemet-primary → --sbc-accent / dark → accent-dark (alias identic). */
#sbc-app .sbc-btn-next-premium {
    background-color: var(--sbc-accent) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 35px !important;
    min-height: 44px !important;
    border-radius: 4px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
}

#sbc-app .sbc-btn-next-premium i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

#sbc-app .sbc-btn-next-premium:hover {
    background-color: var(--sbc-accent-dark) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

#sbc-app .sbc-btn-next-premium:hover i {
    transform: translateX(5px);
}

/* BUTONUL INAPOI (Minimalist) — perechea „înapoi" a lui next-premium. Link terțiar (fără
   formă/elevație), deci doar font + hover: Lato→Inter, hover --lemet-primary → --sbc-accent
   (alias identic) pentru pereche consistentă cu next-ul blueprint. */
#sbc-app .sbc-btn-back {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #888 !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s !important;
    text-transform: none !important;
    padding: 0 !important;
}

#sbc-app .sbc-btn-back:hover {
    color: var(--sbc-accent) !important;
    background: transparent !important;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .sbc-wizard-footer {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .sbc-btn-next-premium {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 980px) {
    .sbc-inputs-row {
        grid-template-columns: 1fr;
    }

    .sbc-static-ghid {
        padding: 24px;
    }

    .sbc-dimensions-layout-v5 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sbc-static-ghid-box {
        padding: 20px;
    }

    .sbc-dimensions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sbc-dimensions-inputs-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

.sbc-edge-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.sbc-edge-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 280px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sbc-edge-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-edge-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

/* Selector vizual premium pentru laturi (linear) */
.sbc-visual-selector-container {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* `margin-inline: auto` anulează `stretch` pe un element flex, deci cutia asta se
       dimensiona după CONȚINUT, nu după coloană — de aceea SVG-ul din ea se randa pe
       dimensiunea lui intrinsecă și deborda. Lățimea vine acum de la coloană, explicit.
       Fără asta, izolarea de container de mai jos o colapsează la lățimea bordurii. */
    width: 100%;
    box-sizing: border-box;
    /* T4 — pragul de rupere NU e lățimea ferestrei, ci lățimea COLOANEI accordionului.
       Măsurat: la 900px viewport coloana are 250px, mai puțin decât la 768px (640px), fiindcă
       acolo intră grila pe două coloane. Orice `@media` ar fi clasificat greșit exact cazul
       raportat („apare și pe viewport mai lat"). Interogăm containerul, nu ecranul.
       Containerul e ĂSTA, nu `.sbc-edge-stage`: stage-ul își schimbă padding-ul în funcție de
       rezultatul interogării, deci ar fi o dependență circulară. */
    container-type: inline-size;
    container-name: sbc-edge;
}

.sbc-visual-selector-box {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: auto;
    min-height: 380px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
}

.sbc-visual-guide-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* T4 — scena selectorului de laturi.
   Toggle-urile sunt `position:absolute`, ancorate procentual pe muchiile piesei, iar cele
   aliniate 'l'/'r' sunt trase COMPLET în afara cutiei SVG cu translate(-100%). Cutia SVG
   ocupa însă toată lățimea disponibilă, deci eticheta nu avea unde să iasă: se tăia (stânga)
   sau producea scroll orizontal (dreapta). Nu era o problemă de viewport — spațiul pentru
   etichete pur și simplu nu era rezervat niciodată, la nicio lățime.
   Soluția: două cutii. `.sbc-edge-stage` ține lățimea totală și rezervă gutter-ul lateral;
   `.sbc-edge-stage-inner` e blocul-container al toggle-urilor și cutia SVG-ului, deci
   procentele de ancorare rămân EXACT cele de dinainte — nicio schimbare în aritmetica din JS.
   Scalarea diagramei a fost respinsă deliberat (ar coborî pătratul sub 44px — vezi 1a25903). */
.sbc-edge-stage {
    /* Implicit e varianta pentru coloană ÎNGUSTĂ, nu cea largă. Inversarea e deliberată:
       un browser fără `@container` (pre-2023) ignoră blocul de mai jos și rămâne pe valorile
       de aici — care sunt corecte la ORICE lățime, doar mai puțin aerisite pe desktop.
       Invers, ar fi rezervat 104px de fiecare parte pe o coloană de 272px și ar fi lăsat
       diagramei 64px. Degradarea trebuie să fie urâtă, nu ruptă. */
    --sbc-edge-gutter: 48px;
    --sbc-edge-label-max: 78px;
    /* eticheta de jos iese sub cutia SVG; fără asta se suprapune peste nota de dedesubt */
    padding-bottom: 28px;
    /* Părintele (`.sbc-visual-selector-container`) e flex. Pe un element flex `width:100%` NU
       e suficient: flex-basis rămâne `auto`, deci lățimea se calculează din conținut — iar
       conținutul e un copil cu `width:100%`, adică o referință circulară care se rezolvă la 0.
       Cutia se colapsa, iar SVG-ul se randa pe dimensiunea lui intrinsecă, DEBORDÂND părintele.
       Era așa dinainte de T4; se vedea doar ca „diagrama nu respectă containerul".
       `flex-basis: 100%` + `min-width: 0` fixează lățimea pe container, nu pe conținut. */
    flex: 1 1 100%;
    min-width: 0;
    max-width: 900px;
    margin: 0 auto;
    padding-inline: var(--sbc-edge-gutter);
    box-sizing: border-box;
}

.sbc-edge-stage-inner {
    position: relative;
    width: 100%;
}

/* T4 — alinierea toggle-urilor, mutată din `transform` inline (JS) în CSS.
   Inline-ul nu putea fi suprascris de nicio regulă, deci pe coloane înguste eticheta
   aliniată 'l'/'r' rămânea complet în afara cutiei, orice gutter am fi rezervat. */
.sbc-edge-toggle[data-align] { transform: translate(-50%, -50%); }
.sbc-edge-toggle[data-align="h"] { transform: translateX(-50%); }

/* `:hover { transform: scale() }` de mai jos ar rescrie poziționarea. Cât timp transformul
   era inline, regula de hover nu se aplica niciodată acestor toggle-uri; păstrăm exact
   comportamentul de dinainte, acum explicit. */
.sbc-edge-toggle[data-align]:hover { transform: translate(-50%, -50%); }
.sbc-edge-toggle[data-align="h"]:hover { transform: translateX(-50%); }

.sbc-edge-toggle {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 5;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sbc-edge-toggle:hover {
    transform: scale(1.1);
}

.toggle-square {
    width: 40px;
    height: 40px;
    /* A (migrare neutrali): #ffffff → --color-white, #1a1a1a → --color-black (identic). */
    background: var(--color-white);
    border: 2px solid var(--color-black);
    position: relative;
    transition: all 0.3s ease;
}

.toggle-square.active {
    /* B (skin): latură selectată = verde --sbc-accent-dark (era auriu --lemet-gold). */
    background: var(--sbc-accent-dark);
    border-color: var(--sbc-accent-dark);
}

.toggle-square.active::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-white); /* A: white → --color-white (identic) */
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sbc-edge-toggle span {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-black); /* A: #1a1a1a → --color-black (identic) */
    margin-top: 4px;
    white-space: nowrap;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.9);
    padding: 2px 4px;
}

.sbc-edge-toggle.left {
    left: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sbc-edge-toggle.right {
    right: 10px;
    top: 50%;
    transform: translate(50%, -50%);
}

.sbc-edge-toggle.bottom {
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, 100%);
}

.sbc-edge-toggle-l {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 6;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sbc-edge-toggle-l:hover {
    transform: scale(1.08);
}

.sbc-edge-toggle-l span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gray-900); /* A: #333 → --color-gray-900 (identic) */
    margin-top: 8px;
    /* T4: `nowrap` făcea eticheta lată cât textul („FAȚĂ ORIZONTALĂ" ≈ 105px), iar toggle-ul
       e ancorat pe muchia piesei — deci depășea cutia. Se rupe pe două rânduri în locul
       micșorării fontului, ca gutter-ul rezervat de `.sbc-edge-stage` să fie suficient. */
    white-space: normal;
    max-width: var(--sbc-edge-label-max, 84px);
    text-align: center;
    overflow-wrap: normal;
    line-height: 1.25;
    letter-spacing: 0.4px;
    /* implicit eticheta poate cădea peste diagramă (ancorare centrată) — fundalul o ține
       lizibilă. Pe coloană largă nu deranjează: acolo stă oricum în afara cutiei. */
    background: rgba(255, 255, 255, 0.92);
    padding: 1px 3px;
    border-radius: 3px;
}
/* L-left: Piesa1(x=50-300,y=40-110) Piesa2(x=50-120,y=110-250) viewBox=400x300 */
.l-left-layout .t-p1-right { top: 20%; right: 22%; }
.l-left-layout .t-p1-bottom { top: 33%; left: 40%; }
.l-left-layout .t-p2-right { top: 57%; left: 26%; }
.l-left-layout .t-p2-bottom { bottom: 14%; left: 15%; }

/* L-right: Piesa1(x=100-350,y=40-110) Piesa2(x=280-350,y=110-250) viewBox=400x300 */
.l-right-layout .t-p1-left { top: 20%; left: 18%; }
.l-right-layout .t-p1-bottom { top: 33%; left: 52%; }
.l-right-layout .t-p2-left { top: 57%; right: 24%; }
.l-right-layout .t-p2-bottom { bottom: 14%; right: 16%; }

.sbc-edge-toggle-u {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    z-index: 6;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sbc-edge-toggle-u span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gray-900); /* A: #333 → --color-gray-900 (identic) */
    margin-top: 8px;
    /* T4 — vezi nota de la `.sbc-edge-toggle-l span`. */
    white-space: normal;
    max-width: var(--sbc-edge-label-max, 84px);
    text-align: center;
    overflow-wrap: normal;
    line-height: 1.25;
    letter-spacing: 0.4px;
    /* implicit eticheta poate cădea peste diagramă (ancorare centrată) — fundalul o ține
       lizibilă. Pe coloană largă nu deranjează: acolo stă oricum în afara cutiei. */
    background: rgba(255, 255, 255, 0.92);
    padding: 1px 3px;
    border-radius: 3px;
}

/* T4 — coloană LARGĂ: avem loc să scoatem etichetele complet în afara diagramei.
   E o îmbunătățire peste varianta implicită (îngustă), nu invers — vezi nota de la
   `.sbc-edge-stage`. Pragul e pe CONTAINER, nu pe viewport: la 900px lățime de fereastră
   coloana accordionului are 250px, mai puțin decât la 768px, fiindcă acolo intră grila pe
   două coloane. Un `@media` ar fi clasificat greșit exact cazul raportat de client. */
@container sbc-edge (min-width: 521px) {
    .sbc-edge-stage {
        --sbc-edge-gutter: 104px;
        --sbc-edge-label-max: 84px;
        padding-bottom: 0;
    }

    .sbc-edge-toggle[data-align="r"],
    .sbc-edge-toggle[data-align="r"]:hover {
        transform: translateY(-50%);
    }

    .sbc-edge-toggle[data-align="l"],
    .sbc-edge-toggle[data-align="l"]:hover {
        transform: translate(-100%, -50%);
    }
}

/* U-shape: P1(x=50-130,y=40-260) P2(x=130-270,y=40-120) P3(x=270-350,y=40-260) viewBox=400x250 */
.u-layout .t-p1-bottom { bottom: 2%; left: 15%; }
.u-layout .t-p1-right { top: 57%; left: 28%; }
.u-layout .t-p2-bottom { top: 44%; left: 50%; transform: translateX(-50%); }
.u-layout .t-p3-left { top: 57%; right: 28%; }
.u-layout .t-p3-bottom { bottom: 2%; right: 15%; }

.sbc-dimensions-grid-v5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.sbc-piece-selector-v5 {
    margin: 12px 0 24px;
}

.sbc-piece-tabs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.sbc-piece-tab {
    flex: 1 1 180px;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: var(--lemet-font);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sbc-piece-tab.active {
    background: #1a1a1a;
    color: var(--lemet-gold);
    border-color: #1a1a1a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.svg-piece-editing {
    stroke: var(--lemet-gold);
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(184, 157, 104, 0.4));
    pointer-events: none;
}

.edge-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.edge-image-container img {
    /* `max-width: 180px` fix depășea cardul sub ~480px, unde cardul e mai îngust de 180px:
       imaginea ieșea din grilă și producea scroll orizontal în corpul secțiunii 04.
       Plafonul rămâne 180px pe ecran larg, dar nu mai trece niciodată de lățimea cardului. */
    max-width: min(180px, 100%);
    height: auto;
}

.sbc-profile-svg {
    width: 100%;
    max-width: 160px;
    height: 100px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

.edge-label-bottom {
    margin-top: 15px;
    font-weight: 500;
    color: #333;
}

.edge-price-tag {
    font-size: 0.75rem;
    /* A3/F4: --lemet-gold (#D49400 ≈2.62:1) pică sub AA ca text. Auriu închis dedicat pentru
       preț, #8f6000 = 5.47:1 pe alb — NU tokenul global (acela rămâne accentul de brand pe
       borduri/carduri active). */
    color: #8f6000;
    font-weight: 700;
    margin-top: 5px;
}

.sbc-visual-checkbox-area {
    position: relative;
    max-width: 500px;
    margin: 40px auto;
    background: white;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px;
}

.sbc-edge-check-pos {
    position: absolute;
    transform: translate(-50%, -50%);
}

.sbc-edge-check-pos input[type="checkbox"] {
    display: none;
}

.sbc-edge-check-pos label {
    display: block;
    width: 35px;
    height: 35px;
    background: white;
    border: 2px solid var(--lemet-black);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.sbc-edge-check-pos label::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    transition: transform 0.2s ease;
}

.sbc-edge-check-pos input:checked + label {
    background: var(--lemet-gold);
    border-color: var(--lemet-gold);
}

.sbc-edge-check-pos input:checked + label::after {
    transform: translate(-50%, -50%) scale(1);
}

.sbc-edge-check-pos.left {
    left: 20%;
    top: 50%;
}

.sbc-edge-check-pos.right {
    right: 13%;
    top: 50%;
}

.sbc-edge-check-pos.bottom {
    left: 50%;
    bottom: 25%;
}

.sbc-sink-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sbc-sink-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-sink-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-sink-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-sink-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sink-image-container {
    width: 100%;
    height: 130px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.sink-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sbc-sink-svg {
    width: 100%;
    max-width: 180px;
    height: 120px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
}

.sink-label-bottom {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.sbc-details-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 30px;
    margin-top: 20px;
    animation: slideDown 0.3s ease-out;
}

.sbc-input-group-premium.small label {
    font-size: 0.9rem;
}

.sbc-input-group-premium.small input {
    padding: 15px 20px;
    font-size: 1.1rem;
}

.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

.hidden { display: none; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sbc-input-hint {
    font-size: 0.75rem;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

.sbc-channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.sbc-channel-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-channel-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-channel-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-channel-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sbc-channel-card span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
}

.channel-icon {
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.sbc-drain-svg {
    width: 100%;
    max-width: 180px;
    height: 120px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

.sbc-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.sbc-model-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-model-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-model-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-model-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sbc-model-card span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
}

.sbc-illust-svg {
    width: 100%;
    max-width: 160px;
    height: 100px;
    display: block;
    margin: 0 auto;
}

.sbc-accessory-card .accessory-image-container,
.sbc-model-card .model-image {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbc-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.sbc-model-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    min-height: 140px;
}

.sbc-model-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-model-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-model-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.model-image {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-image.icon-only i {
    font-size: 2rem;
    color: #e74c3c;
}

.sbc-model-card span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333;
}

.sbc-hob-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sbc-hob-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-hob-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-hob-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-hob-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hob-image-container {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
}

.hob-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hob-label-bottom {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* Feedback vizual pentru laturile selectate */
.sbc-svg-base .edge-selected-highlight {
    stroke: #f39c12;
    stroke-width: 8px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(243, 156, 18, 0.4));
}

.sbc-svg-base .edge-highlight {
    stroke: transparent;
    stroke-width: 18px;
    stroke-linecap: round;
    pointer-events: stroke;
}

.sbc-socket-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sbc-socket-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-socket-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-socket-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-socket-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.socket-image-container {
    height: 180px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
}

.socket-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.socket-label-bottom {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.sbc-select-premium {
    width: 100%;
    padding: 15px;
    border-radius: 50px;
    border: 1px solid #ccc;
    font-family: var(--lemet-font);
    font-size: 1.1rem;
    font-weight: 600;
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 20px center;
    background-color: #fff;
}

/* Box-ul Premium pentru Fusta */
.sbc-premium-box-skirt {
    background: white;
    border-top: 3px solid var(--lemet-gold);
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    margin: 20px 0;
}

.skirt-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.skirt-header i {
    font-size: 1.2rem;
    color: var(--lemet-black);
}

.skirt-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: var(--lemet-black);
}

.label-muted {
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 15px;
    display: block;
}

.sbc-select-minimal,
#sbc-app select.sbc-select-minimal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: var(--lemet-font) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    -webkit-appearance: menulist !important;
    appearance: auto !important;
    color: var(--color-gray-900) !important;
}

.skirt-hint {
    font-size: 0.8rem;
    color: #999;
    margin-top: 10px;
    font-weight: 400;
}

.sbc-checkbox-card-simple {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
}

.tego-label {
    font-weight: 700;
    font-size: 1.1rem;
}

.sbc-checkbox-card-simple input {
    width: 25px;
    height: 25px;
    accent-color: var(--lemet-gold);
}

/* Tabel Recapitulare Tehnica — skin spec-sheet (RESKIN 2, operația B).
   Estetică blueprint: bordură 1px line-strong (fără umbră), antet verde, valori mono. */
.sbc-technical-recap,
.sbc-recap-container {
    margin: 30px 0;
    border: 1px solid var(--sbc-line-strong);
    border-radius: 8px;
    overflow: hidden;
}

/* Antet spec-sheet: verde accent-dark + text alb uppercase, id config în mono pe alb-transparent. */
.recap-header {
    background: var(--sbc-accent-dark);
    color: var(--color-white);
    padding: 10px 15px;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* A1: recap tehnic colapsabil — <summary> preia rolul de antet (display:flex via
   .recap-header). Ascundem markerul nativ și adăugăm un chevron care se rotește la open. */
.sbc-recap-details > summary.recap-header {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sbc-recap-details > summary.recap-header::-webkit-details-marker { display: none; }
.sbc-recap-details > summary.recap-header::after {
    content: '\f078'; /* chevron-down (Font Awesome) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.sbc-recap-details[open] > summary.recap-header::after { transform: rotate(180deg); }

.recap-config-id {
    font-family: var(--sbc-font-mono);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.14);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.recap-table {
    width: 100%;
    border-collapse: collapse;
}

/* Chei (antet coloane): muted, sans, uppercase spec-sheet. */
.recap-table th {
    background: var(--sbc-panel);
    text-align: left;
    font-size: 0.62rem;
    color: var(--sbc-muted);
    padding: 8px 15px;
    border-bottom: 1px solid var(--sbc-line);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Valori k/v: mono + ink, separator 1px vizibil între rânduri. */
.recap-table td {
    padding: 8px 15px;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--sbc-line);
    font-family: var(--sbc-font-mono);
    color: var(--sbc-title);
}

/* Prima coloană (eticheta elementului) rămâne sans (e un nume, nu o valoare numerică). */
.recap-table td:first-child { font-family: var(--sbc-font-sans); }

/* Numeric → aliniat dreapta (lectură spec-sheet). */
.recap-table th:not(:first-child),
.recap-table td:not(:first-child) { text-align: right; }

.bold-cell { font-weight: 700; color: var(--sbc-ink); }

.recap-footer {
    padding: 10px 15px;
    background: var(--color-white);
    display: flex;
    gap: 40px;
    font-size: 0.75rem;
}

/* Stiluri specifice pentru Tabelul de Recapitulare v5 */
.pl-30 { padding-left: 30px !important; color: var(--sbc-muted); font-style: italic; }

.accessory-row {
    background-color: var(--sbc-panel-alt);
}

.accessory-row td {
    font-size: 0.75rem !important;
    color: var(--sbc-muted-deep);
    border-bottom: 1px dashed var(--sbc-line) !important;
}

.highlight-skirt {
    border-left: 3px solid var(--lemet-gold);
}

/* Rândul total spec-sheet (B): bară deschisă, separator blueprint, valoare suprafață verde. */
.recap-footer-premium {
    background: var(--color-white);
    color: var(--sbc-title);
    padding: 15px 25px;
    display: flex;
    justify-content: flex-end;
    gap: 50px;
    border-top: 1px solid var(--sbc-line-strong);
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-item .label {
    font-size: 0.6rem;
    color: var(--sbc-muted);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-item .value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--sbc-font-mono);
    color: var(--sbc-title);
}

/* Suprafața/Totalul facturat (primul item) — evidențiat în verde accent. */
.recap-footer-premium .footer-item:first-child .value {
    color: var(--sbc-accent);
}

.recap-notice {
    padding: 10px 20px;
    font-size: 0.7rem;
    color: var(--sbc-muted-soft);
    background: var(--color-white);
    border-top: 1px solid var(--sbc-line);
    font-style: italic;
}

/* Butoane Adaugare Element Perete */
.sbc-wall-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.btn-add-extra {
    border: none;
    padding: 10px 15px;
    font-family: var(--lemet-font);
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.btn-add-extra.plinth {
    background: #444;
    color: white;
}

.btn-add-extra.backsplash {
    background: #008a8a;
    color: white;
}

.btn-add-extra:hover { opacity: 0.9; }

.sbc-wall-item-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 40px;
    gap: 15px;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.wall-type-badge {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 3px;
    text-align: center;
}

.wall-type-badge.plinth { background: #e0e0e0; color: #444; }
.wall-type-badge.backsplash { background: #008a8a; color: white; }

.wall-input-group label {
    display: block;
    font-size: 0.65rem;
    color: #999;
    margin-bottom: 3px;
}

.wall-input-group input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    font-weight: 700;
    font-family: var(--lemet-font);
}

.btn-remove-wall {
    background: none;
    border: none;
    color: #ff5252;
    font-size: 1.5rem;
    cursor: pointer;
}

.btn-quick-add {
    border: none;
    padding: 8px 12px;
    font-family: var(--lemet-font);
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.btn-quick-add.plinth {
    background: #444;
    color: white;
}

.btn-quick-add.backsplash {
    background: #008a8a;
    color: white;
}

.btn-quick-add:hover { opacity: 0.9; }

.sbc-legend-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding: 10px;
    border-top: 1px solid #eee;
}

.legend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-chip .swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ─── Tooltip ─────────────────────────────────────────────── */
.sbc-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--sbc-gold);
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 800;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
    user-select: none;
}

.sbc-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 220px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.sbc-tip:hover::after { opacity: 1; }

/* ─── Measurement Help Block ──────────────────────────────── */
.sbc-measure-help {
    margin-top: 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: #666;
    background: #fafafa;
}
.sbc-measure-help summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--sbc-gold);
    padding: 6px 0;
    user-select: none;
    list-style: none;
}
.sbc-measure-help summary::-webkit-details-marker { display: none; }
.sbc-measure-help summary::before { content: '▶  '; font-size: 0.6rem; }
details[open].sbc-measure-help summary::before { content: '▼  '; }
.sbc-measure-help ul { margin: 4px 0 8px; padding-left: 18px; line-height: 1.8; }
.sbc-measure-help li strong { color: var(--sbc-gold); }

/* ─── Sink Position Guide ─────────────────────────────────── */
.sbc-sink-pos-guide {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 12px 8px;
    margin-bottom: 16px;
}

.sbc-legend-area {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fdfdfd;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
}

.legend-item .swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.svg-cutout {
    stroke-dasharray: 4;
    animation: flow 1s linear infinite;
}

@keyframes flow {
    from { stroke-dashoffset: 8; }
    to { stroke-dashoffset: 0; }
}

.svg-wall-element {
    animation: fadeInWall 0.5s ease-out;
}

@keyframes fadeInWall {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.wall-type-badge.plinth { background: #27ae60; color: white; }
.wall-type-badge.backsplash { background: #008a8a; color: white; }

.sbc-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.sbc-transparency-card {
    background: #fff8e7;
    border: 1px solid #e6c84a;
    border-radius: 15px;
    padding: 30px;
}

.sbc-transparency-card h3 {
    font-size: 0.9rem;
    margin-top: 0;
    color: #856404;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.transparency-row {
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
    font-size: 0.95rem;
}

.transparency-row.waste {
    color: #cc0000;
    font-size: 0.8rem;
    font-weight: 600;
}

.transparency-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 15px 0;
}

.sbc-hint-small {
    font-size: 0.75rem;
    color: #777;
    margin: 10px 0 0;
}

.sbc-summary-layout-premium {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin-top: 30px;
}

.summary-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 15px;
    color: #8c877e;
}

.sbc-breakdown-list {
    background: white;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #f9f9f9;
}

.breakdown-item:last-child {
    border-bottom: none;
}

.item-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.item-qty {
    font-size: 0.75rem;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
}

.item-amount {
    font-weight: 700;
    color: var(--lemet-black);
}

.sbc-bbox-info-card {
    background: #fff8e7;
    border: 1px solid #e6c84a;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.bbox-header {
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #856404;
    margin-bottom: 15px;
}

.bbox-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.bbox-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 15px 0;
}

.bbox-row.waste {
    color: #cc0000;
    font-weight: 700;
}

.sbc-final-total-box {
    background: var(--lemet-black);
    color: white;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.final-price-label {
    font-size: 0.7rem;
    color: var(--lemet-gold);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.final-price-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--sbc-font-mono); /* RESKIN A1: preț pe mono (consistent footer/recap; intenția RESKIN 7) */
}

.sbc-final-actions {
    display: flex;
    gap: 12px;
}

#sbc-app .sbc-btn-checkout-v5 {
    width: auto;
    flex: 1;
    background: var(--lemet-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 6px 18px rgba(74, 124, 63, 0.22) !important;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
    margin-bottom: 12px;
}

#sbc-app .sbc-btn-checkout-v5:hover {
    background: var(--lemet-primary-dark) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px);
}

#sbc-app .sbc-btn-pdf-v5 {
    width: auto;
    flex: 1;
    background: transparent !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white) !important;
    padding: 12px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    transition: background 0.2s, transform 0.2s !important;
}

#sbc-app .sbc-btn-pdf-v5:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .sbc-final-actions {
        flex-direction: column;
    }
}

.sbc-loop-section {
    margin-top: 40px;
    padding: 30px;
    background: #fdfdfd;
    border: 2px dashed var(--lemet-gold);
    border-radius: 15px;
    text-align: center;
}

.sbc-question {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 20px;
    color: var(--lemet-black);
}

.sbc-loop-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-loop-yes {
    background: white;
    color: var(--lemet-gold);
    border: 2px solid var(--lemet-gold);
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-loop-yes:hover {
    background: var(--lemet-gold);
    color: white;
}

.btn-loop-no {
    background: var(--lemet-black);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
}

.sbc-agent-box {
    background: #f4f7f9;
    border: 1px solid #d1d9e0;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
}

.agent-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #2c3e50;
}

.agent-notice i { font-size: 2rem; color: var(--lemet-gold); }

.agent-notice small {
    color: #7d8a96;
    font-size: 0.75rem;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-wa {
    background-color: #25D366;
    color: white !important;
    text-decoration: none;
    padding: 15px;
    border-radius: 50px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-wa:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.btn-contact-form {
    background: transparent;
    border: 2px solid var(--lemet-black);
    color: var(--lemet-black);
    padding: 15px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
}

.sbc-accessory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.sbc-accessory-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.sbc-accessory-card:hover {
    border-color: var(--sbc-accent);
}

.sbc-accessory-card.active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-accessory-card.active::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--sbc-accent);
    font-size: 1.2rem;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.accessory-image-container {
    height: 140px;
    margin-bottom: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accessory-label-bottom {
    font-size: 0.85rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .sbc-summary-layout-premium {
        grid-template-columns: 1fr;
    }
}

.sbc-price-card-premium {
    background: var(--lemet-black);
    color: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.price-header {
    color: var(--lemet-gold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.price-total-main {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.total-label {
    font-size: 0.7rem;
    color: var(--lemet-gold);
    font-weight: 700;
}

.total-value {
    font-size: 2.2rem;
    font-weight: 700;
}

.btn-checkout-primary {
    width: 100%;
    background: var(--lemet-primary);
    color: var(--color-white);
    border: none;
    padding: 16px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 30px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-checkout-primary:hover {
    background: var(--lemet-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74, 124, 63, 0.22);
}

.btn-download-pdf {
    width: 100%;
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: 12px 18px;
    border-radius: 6px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: background 0.2s, transform 0.2s;
}

.btn-download-pdf:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

@media (max-width: 980px) {
    .sbc-summary-grid {
        grid-template-columns: 1fr;
    }
}

.sbc-leg-toggle {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
}

.sbc-leg-toggle span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    background: rgba(255, 255, 255, 0.92);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.island-layout .pos-top { top: 2%; left: 50%; transform: translateX(-50%); }
.island-layout .pos-bottom { bottom: 2%; left: 50%; transform: translateX(-50%); }
.island-layout .pos-left { left: 6%; top: 50%; transform: translateY(-50%); }
.island-layout .pos-right { right: 6%; top: 50%; transform: translateY(-50%); }
.island-layout .pos-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.sbc-lead-layout-v5 {
    display: grid;
    /* Layout istoric pe 2 coloane (420px 1fr) unde a doua era .sbc-lead-summary-card.
       Coloana-sumar nu mai e randată (mutată în .sbc-lead-inputs ca .sbc-mini-recap),
       deci fixarea la 420px lăsa tot conținutul îngust stânga + gol în dreapta.
       O singură coloană pe toată lățimea — consistent cu ceilalți pași (.sbc-step-container). */
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 40px;
}

.sbc-lead-inputs,
.sbc-lead-summary-card {
    /* A (migrare neutrali): #ffffff → --color-white (identic).
       B (skin blueprint): #e7e4dd (border cald) → --sbc-line hairline, radius 20→4,
       umbra 45px scoasă (suprafață plată, ca toate containerele blueprint). */
    background: var(--color-white);
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
    padding: 40px;
    box-shadow: none;
}

.sbc-lead-inputs {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sbc-lead-summary-card {
    /* Duplicat istoric al regulii partajate de mai sus — aliniat la blueprint identic. */
    background: var(--color-white);
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
    padding: 40px;
    box-shadow: none;
}

.sbc-input-field-v5 label {
    display: block;
    font-family: var(--sbc-font-sans); /* B: etichetă (Lățime/Adâncime) pe sans (Inter) */
    font-weight: 700;
    font-size: 13px;
    color: var(--color-black);
    margin-bottom: 8px;
}

/* B: linia de unitate/limită (ex. „*maxim 320 cm") — mono uppercase muted (blueprint). */
.sbc-input-field-v5 > span {
    display: block;
    margin-top: 8px;
    font-family: var(--sbc-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sbc-muted);
}

.sbc-main-input {
    width: 100%;
    /* A (migrare neutrali): #eeeeee → --sbc-line (identic), #ffffff → --color-white.
       B (skin blueprint): 1.5px→1px, fără pill (30px→4px), fără umbră,
       valoarea numerică pe --sbc-font-mono (consistent cu spec-sheet RESKIN 2),
       min-height 48px → touch target ≥44px garantat (box-sizing: border-box scoped). */
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
    padding: 12px 16px;
    min-height: 48px;
    text-align: center; /* B: valoarea centrată (limbaj tehnic/blueprint, ca în prototip) */
    font-family: var(--sbc-font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    background: var(--color-white);
    transition: border-color 0.2s ease;
}

/* B: spinnerul nativ vizibil permanent — afordanță ± fără markup/JS nou. */
.sbc-main-input::-webkit-inner-spin-button,
.sbc-main-input::-webkit-outer-spin-button {
    opacity: 1;
    height: 48px;
}

.sbc-main-input:focus {
    /* B: focus blueprint = outline --sbc-accent (înlocuiește umbra verde pill). */
    outline: 2px solid var(--sbc-accent);
    outline-offset: 1px;
    border-color: var(--sbc-accent);
    box-shadow: none;
}

.sbc-textarea-premium {
    width: 100%;
    height: 120px;
    padding: 15px 20px;
    /* A (migrare neutrali): #fafafa → --sbc-panel-alt (identic).
       B (skin blueprint): border --lemet-border → --sbc-line, radius 15→4,
       font --lemet-font (Lato) → --sbc-font-sans (Inter). */
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
    font-family: var(--sbc-font-sans);
    resize: none;
    background: var(--sbc-panel-alt);
}

/* B: focus blueprint = outline verde --sbc-accent (auriul scos de pe interacțiune). */
.sbc-textarea-premium:focus {
    outline: 2px solid var(--sbc-accent);
    outline-offset: 1px;
    border-color: var(--sbc-accent);
}

.sbc-upload-zone {
    /* A (migrare neutrali): #fff → --color-white (identic).
       B (skin blueprint): border --lemet-border → --sbc-line, radius 8→4. */
    border: 1px solid var(--sbc-line);
    padding: 12px 25px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    background: var(--color-white);
    color: #8c877e;
    font-weight: 600;
    transition: all 0.3s;
}

/* B: hover gold → verde --sbc-accent (auriul scos de pe interacțiune, ca pe carduri/butoane). */
.sbc-upload-zone:hover {
    border-color: var(--sbc-accent);
    color: var(--sbc-accent);
}

/* ─── Compare Materials (RESKIN 9) ─────────────────────────────────────────────
   Stilurile au fost mutate din inline ad-hoc (material-comparison.js) în clase aici
   (inline→class, ZERO logică atinsă). Skin blueprint, idiom spec-sheet:
   antet verde accent-dark + alb uppercase, prețuri mono, label muted, linii --sbc-line,
   rândul materialului curent evidențiat cu tenta verde subtilă. */
.sbc-cmp-table-wrap {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--sbc-line);
    border-radius: 4px;
}

.sbc-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Antet sticky — accent-dark + alb uppercase (ca .recap-header), NU #1a1a1a. */
.sbc-cmp-table thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sbc-cmp-table th {
    background: var(--sbc-accent-dark);
    color: var(--color-white);
    font-family: var(--sbc-font-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 10px;
}

.sbc-cmp-table th:first-child { text-align: left; }
.sbc-cmp-table th:last-child  { text-align: right; }

/* Rânduri: separator 1px --sbc-line; label material muted (cheie spec-sheet). */
.sbc-cmp-table td {
    padding: 8px 10px;
    border-top: 1px solid var(--sbc-line);
    color: var(--sbc-muted);
}

/* Prețul: mono + ink (valoare spec-sheet, consistent cu footer/carduri/recap).
   Calificat cu td. ca să bată specificitatea lui `.sbc-cmp-table td` (altfel preț rămâne muted). */
.sbc-cmp-table td.sbc-cmp-total {
    text-align: right;
    white-space: nowrap;
    font-family: var(--sbc-font-mono);
    font-weight: 600;
    color: var(--sbc-title);
}

/* Materialul curent: tentă verde subtilă (--sbc-card-active-bg), label scos în accent-dark. */
.sbc-cmp-row.is-current { background: var(--sbc-card-active-bg); }
.sbc-cmp-row.is-current td:first-child {
    color: var(--sbc-accent-dark);
    font-weight: 600;
}

.sbc-cmp-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--sbc-accent);
    color: var(--color-white);
    font-family: var(--sbc-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sbc-radio-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #444;
}

.sbc-radio-premium input {
    display: none;
}

.sbc-mini-recap h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.sbc-mini-recap p {
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 5px;
}

.sbc-visual-final-box {
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Step 13: ascunde preview-ul SVG din sumar */
.sbc-lead-summary-card .sbc-visual-final-box {
    display: none;
}

/* T5 — în accordion preview-ul sticky global e deja vizibil (dreapta), deci SVG-ul
   clonat din cardul Sumar (stânga) e redundant. Ascuns doar în accordion; în wizard
   legacy (fără preview sticky) rămâne. */
body.sbc-accordion-active .sbc-visual-final-box {
    display: none;
}

.sbc-lead-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
}

.data-item {
    display: flex;
    flex-direction: column;
}

.data-item label {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-weight: 700;
}

.data-item span {
    font-size: 16px;
    color: var(--color-black);
    font-weight: 600;
}

.btn-action-outline {
    width: 100%;
    background: transparent;
    border: 1.5px solid #eeeeee;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--sbc-font-sans); /* RESKIN A1: Lato → Inter (buton omis la reskin) */
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}

.btn-action-outline:hover {
    background: #fcfcfc;
    border-color: var(--color-accent);
}

.sbc-final-footer-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.sbc-basket-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbc-basket-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-gray-700);
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 6px;
}

.sbc-basket-total {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
    color: var(--color-gray-900);
}

@media (max-width: 992px) {
    .sbc-lead-layout-v5 {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.radio-mark {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.sbc-radio-premium input:checked + .radio-mark {
    border-color: var(--lemet-gold);
}

.sbc-radio-premium input:checked + .radio-mark::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--lemet-gold);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sbc-mini-recap p {
    margin: 0 0 8px;
}

.sbc-gdpr-area {
    margin-top: 20px;
}

/* B (skin): WhatsApp-v5 = CTA primar blueprint (fundal accent, NU verde brand — folosea deja
   --lemet-primary). radius 8→4, +Inter, flat (translateY+shadow scoase), hover accent-dark,
   +min-height 44. A: --lemet-primary → --sbc-accent / dark → accent-dark (alias identic). */
#sbc-app .sbc-btn-whatsapp-v5 {
    width: 100%;
    background: var(--sbc-accent) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: 18px !important;
    min-height: 44px !important;
    border-radius: 4px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: background-color 0.2s !important;
    margin-top: 30px;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

#sbc-app .sbc-btn-whatsapp-v5:hover {
    background: var(--sbc-accent-dark) !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

/* Add-to-cart button */
/* A2b-4: ierarhie CTA în pasul final — „Adaugă în coș" e SECUNDAR (ghost/outline),
   ca să nu concureze cu primarul „Solicită ofertă" (WhatsApp, verde solid dominant).
   Era verde plin (concura vizual); acum transparent + bordură/text accent, hover tentă subtilă.
   DOAR stilizare — handler/comportament neatinse. */
#sbc-app .sbc-btn-add-to-cart {
    width: 100%;
    background: transparent;
    color: var(--sbc-accent);
    border: 1px solid var(--sbc-accent);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: var(--sbc-font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
}

/* A2b-4: hover = tentă verde subtilă (rămâne secundar, NU se umple ca primarul). */
#sbc-app .sbc-btn-add-to-cart:hover {
    background: var(--sbc-card-active-bg);
    color: var(--sbc-accent-dark);
    border-color: var(--sbc-accent-dark);
}

/* ── Product CTA (inlocuieste butonul Add to Cart WooCommerce) ── */
/* Prefixam cu #sbc-product-cta (specificitate ID) pentru a bate stilurile temei/WooCommerce */
#sbc-product-cta {
    margin-top: 8px;
}

#sbc-product-cta .sbc-cta-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* B (skin): selector module = toggle blueprint (ink + border/text accent → fill accent
   pe hover). radius 8→4, border 2px→1px, Lato→Inter, flat (fără translateY).
   A: #1a1a1a → --sbc-ink (identic). */
#sbc-product-cta .sbc-cta-module-btn {
    background: var(--sbc-ink) !important;
    color: var(--sbc-accent) !important;
    border: 1px solid var(--sbc-accent) !important;
    border-radius: 4px !important;
    padding: 13px 10px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.2s, color 0.2s !important;
    line-height: 1 !important;
    box-shadow: none !important;
    min-height: 44px !important;
    width: 100% !important;
    display: block !important;
}

#sbc-product-cta .sbc-cta-module-btn:hover {
    background: var(--sbc-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#sbc-product-cta .sbc-cta-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* B (skin): WhatsApp = formă blueprint (radius 8→4, Inter, flat). Verdele brand
   WhatsApp #25d366/#1db954 PĂSTRAT (excepție brand, ca .sbc-wa-float — NU paleta noastră). */
#sbc-product-cta .sbc-cta-btn-whatsapp {
    flex: 1 1 auto;
    background: #25d366 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

#sbc-product-cta .sbc-cta-btn-whatsapp:hover {
    background: #1db954 !important;
}

/* B (skin): cart = blueprint plin flat. radius 8→4, Lato→Inter, fără translateY.
   bg accent / hover accent-dark (deja corect). */
#sbc-product-cta .sbc-cta-btn-cart {
    flex: 0 0 auto;
    background: var(--sbc-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-family: var(--sbc-font-sans) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    min-height: 44px !important;
    box-shadow: none !important;
    transition: background-color 0.2s;
}

#sbc-product-cta .sbc-cta-btn-cart:hover {
    background: var(--sbc-accent-dark) !important;
}

/* B (skin): PDF = ghost terțiar, formă blueprint (radius 8→4, border 2px→1px).
   Culorile #555/#ddd lăsate (terțiar, fără token exact); hover deja accent. */
#sbc-product-cta .sbc-cta-btn-pdf {
    flex: 0 0 auto;
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    box-shadow: none !important;
    transition: border-color 0.2s, color 0.2s;
}

#sbc-product-cta .sbc-cta-btn-pdf:hover {
    border-color: var(--sbc-accent) !important;
    color: var(--sbc-accent) !important;
}

/* (păstrăm pentru backward compat dacă mai există undeva) */
.sbc-scroll-btn.button,
a.sbc-scroll-btn.button {
    display: none;
}

@media (max-width: 900px) {
    .sbc-lead-layout-v5 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .sbc-wrapper {
        padding: 18px 16px;
    }

    .sbc-main-header h1 {
        font-size: 1.35rem;
        letter-spacing: 0.8px;
    }

    .sbc-title-main {
        font-size: 1.3rem;
    }

    .sbc-step-title {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-bottom: 28px;
    }

    .sbc-lead-inputs,
    .sbc-lead-summary-card {
        padding: 16px;
    }

    .sbc-main-input {
        padding: 14px 18px;
        font-size: 0.98rem;
    }

    .sbc-shape-grid,
    .sbc-subtype-grid,
    .sbc-sink-grid-premium,
    .sbc-hob-grid-premium,
    .sbc-socket-grid-premium,
    .sbc-accessory-grid,
    .sbc-models-grid,
    .sbc-edge-grid-premium {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sbc-channel-card {
        padding: 16px 12px;
    }

    .sbc-shape-card,
    .sbc-subtype-card,
    .sbc-sink-card,
    .sbc-hob-card,
    .sbc-socket-card,
    .sbc-accessory-card,
    .sbc-model-card {
        min-height: auto;
        padding: 16px;
    }

    .sbc-visual-selector-container {
        padding: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* Admin Panel (WP Admin) — styled to match calculator frontend */
/* ------------------------------------------------------------------ */
#sbc-admin-app-container .sbc-admin-wrapper {
    max-width: 1200px;
    margin: 24px auto;
}

#sbc-admin-app-container .sbc-admin-card {
    background: #fff;
    border: 1px solid var(--lemet-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--sbc-shadow);
}

#sbc-admin-app-container .sbc-admin-card-head {
    margin-bottom: 18px;
}

#sbc-admin-app-container .sbc-admin-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

#sbc-admin-app-container .sbc-admin-tab-btn {
    border: 1px solid var(--lemet-border);
    background: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

#sbc-admin-app-container .sbc-admin-tab-btn.active {
    background: var(--lemet-gold);
    color: #1a1a1a;
    border-color: var(--lemet-gold);
    box-shadow: var(--sbc-shadow-soft);
}

#sbc-admin-app-container .sbc-admin-panel {
    display: none;
}

#sbc-admin-app-container .sbc-admin-panel.active {
    display: block;
}

#sbc-admin-app-container .sbc-admin-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

#sbc-admin-app-container .adm-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8c877e;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

#sbc-admin-app-container .adm-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lemet-border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--lemet-font);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#sbc-admin-app-container .adm-input:focus {
    border-color: var(--lemet-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(74, 124, 63, 0.12);
}

/* FIX kill-switch on/off (ex. „Accordion pe pagina produs"): checkbox-ul primește și
   clasa .adm-input, deci moștenea stilul de input TEXT (width:100%, padding 12/14,
   border, background:#fff). Un checkbox întins pe toată celula și cu background pictat
   se randează ca o casetă albă GOALĂ, fără bifa nativă vizibilă => părea „toggle gol
   care nu prinde click" (starea se comuta, dar fără niciun feedback vizual).
   Aici anulăm moștenirea și îi redăm randarea nativă + stare vizibilă.
   Regulile vin DUPĂ .adm-input, deci câștigă la specificitate egală. */
#sbc-admin-app-container .adm-field-bool {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#sbc-admin-app-container .adm-field-bool label {
    margin-bottom: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

#sbc-admin-app-container .adm-input-checkbox {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    flex: 0 0 auto;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    accent-color: var(--lemet-primary, #4a7c3f);
    cursor: pointer;
}

#sbc-admin-app-container .sbc-admin-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
}

#sbc-admin-app-container .sbc-admin-actions-wide {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--lemet-border);
}

#sbc-admin-app-container .sbc-admin-msg {
    height: 24px;
    color: var(--lemet-primary);
    font-weight: 700;
    margin-top: 8px;
}

@media (max-width: 900px) {
    #sbc-admin-app-container .sbc-admin-fields-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Faza A.1 — Accordion configurator (SUB-TASK 5)
   Vizibil doar în accordion mode (window.SBC_ACCORDION_MODE). Clasele sunt noi,
   nu afectează wizard-ul legacy. accordion-ui.js injectează un fallback identic
   doar dacă acest fișier nu s-a încărcat.
   ============================================================================ */
/* Feature sentinel — bumped whenever accordion CSS gains a feature the injected mirror
   (accordion-ui.js injectStyles) must also carry. stylesheetLoaded() reads it to decide
   whether the mirror fallback is needed; a STALE calculator.css still sets display:flex here
   but lacks this token, so the fallback correctly re-injects the drawer-toggle rules. */
.sbc-accordion { display: flex; flex-direction: column; gap: 12px; max-width: 100%; counter-reset: sbc-sec; --sbc-accordion-css: 5; }
.sbc-accordion-h { margin: 0; font: inherit; }
/* A: #fff → --color-white (identic). B: bordură secțiune 1px --sbc-line (blueprint). */
.sbc-accordion-item { border: 1px solid var(--sbc-line); border-radius: 8px; overflow: hidden; background: var(--color-white); }
/* B (expanded/active): indicator verde --sbc-accent pe muchia stângă (inset, fără reflow).
   Distinct de completed (glyph ✓ verde, JS-owned) și de collapsed (fără indicator). */
.sbc-accordion-item.is-open { box-shadow: inset 3px 0 0 0 var(--sbc-accent); }
.sbc-accordion-header { display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 16px 18px; background: var(--sbc-acc-surface); border: 0; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 700; text-align: left; color: inherit; }
/* B: numărul secțiunii (01, 02…) sintetizat din CSS counter — mono + auriu, zero JS/markup. */
.sbc-accordion-header::before {
    counter-increment: sbc-sec;
    content: counter(sbc-sec, decimal-leading-zero);
    font-family: var(--sbc-font-mono); font-size: 13px; font-weight: 700;
    color: var(--sbc-gold); min-width: 22px; text-align: center; flex: 0 0 auto;
}
.sbc-accordion-header:hover { background: var(--sbc-acc-surface-hover); }
.sbc-accordion-header:focus-visible { outline: 2px solid var(--sbc-state-warn); outline-offset: -2px; }
.sbc-accordion-status { font-size: 14px; color: var(--sbc-state-pending); min-width: 16px; text-align: center; }
.sbc-accordion-status-hidden { display: none; }
/* B: titlu secțiune uppercase + letter-spacing, culoare --sbc-title, sans (Inter). */
.sbc-accordion-title { flex: 1; font-size: 16px; font-family: var(--sbc-font-sans);
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--sbc-title); }
/* D: valoarea aleasă, arătată în headerul COLAPSAT (categoria, pe traseul CTA). `flex: 1` stă
   pe titlu, deci chip-ul nu împinge chevronul; se ascunde singur când textul e gol (attr hidden).
   Pe .is-open dispare — secțiunea deschisă își arată deja conținutul. */
.sbc-accordion-summary { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-family: var(--sbc-font-mono); font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--sbc-gold); }
.sbc-accordion-item.is-open .sbc-accordion-summary { display: none; }
/* D: categoria curentă, marcată pe butonul din selectorul de module (scopat la accordion —
   wizard-ul legacy folosește aceeași componentă și rămâne neatins). */
.sbc-accordion .sbc-main-btn.is-selected { border-color: var(--sbc-accent); box-shadow: inset 0 0 0 2px var(--sbc-accent); }
/* Buton explicit de avans la finalul secțiunii Dimensiuni, pe TOATE viewporturile. A înlocuit
   avansul pe focusout, care era ambiguu pe mobil (închiderea tastaturii = tap în secțiune) și
   prematur pe desktop (un simplu Tab avansa). */
/* 04 „Profil & margini": buton explicit + linie de sumar. Butonul nu are gate (zero laturi =
   „fără prelucrare", alegere validă), deci sumarul e cel care face alegerea declarată. */
/* Poarta secțiunii 05: întrebarea înlocuiește formularul până când userul declară ce vrea. */
.sbc-cutouts-gate { padding: 8px 0 4px; text-align: center; }
.sbc-cutouts-gate-q { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #3d3018; }
.sbc-cutouts-gate-hint { margin: 0 0 16px; font-size: 13px; color: #9a8c70; }
.sbc-cutouts-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sbc-cutouts-gate-actions button { flex: 1 1 180px; min-height: 48px; padding: 12px 18px;
    border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.sbc-cutouts-yes { border: 0; background: #2D6E4E; color: #fff; }
.sbc-cutouts-no { border: 1px solid #cfc4ad; background: #fff; color: #6b5b3a; }
.sbc-step-continue-wrap { margin-top: 20px; }
.sbc-step-continue { width: 100%; min-height: 48px; padding: 12px 18px;
    border: 0; border-radius: 8px; background: var(--sbc-accent); color: var(--color-white);
    font-family: var(--sbc-font-sans); font-size: 16px; font-weight: 700; cursor: pointer; }
.sbc-step-continue[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.sbc-profil-summary { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
    background: #f6f3ec; color: #6b5b3a; font-size: 14px; font-weight: 600; text-align: center; }
.sbc-dims-continue-hint { margin: 8px 0 0; font-size: 13px; color: var(--sbc-state-neutral);
    font-family: var(--sbc-font-sans); text-align: center; }
/* E: avertisment de reset, în capul secțiunii unde userul aterizează. */
.sbc-acc-reset-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 14px 14px;
    padding: 12px 14px; border: 1px solid var(--sbc-state-warn); border-left-width: 4px;
    border-radius: 6px; background: #fff8ec; color: #6b4b00;
    font-family: var(--sbc-font-sans); font-size: 14px; line-height: 1.45; }
.sbc-acc-reset-notice i { margin-top: 2px; color: var(--sbc-state-warn); flex: 0 0 auto; }
.sbc-acc-reset-notice-text { flex: 1; }
.sbc-acc-reset-notice-x { flex: 0 0 auto; min-width: 32px; min-height: 32px; padding: 0;
    background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: inherit; }
.sbc-accordion-chevron { transition: transform .2s ease; color: var(--sbc-acc-chevron); }
.sbc-accordion-item.is-open .sbc-accordion-chevron { transform: rotate(180deg); }
.sbc-accordion-body { max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .28s ease-out, opacity .28s ease-out; }
.sbc-accordion-item.is-open .sbc-accordion-body { max-height: 6000px; opacity: 1; }
.sbc-accordion-body-inner { padding: 18px; overflow-x: auto; }
.sbc-accordion-step + .sbc-accordion-step { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--sbc-acc-dash); } /* A: #e8e8e8 → token (identic) */
.sbc-accordion-step-error { color: var(--sbc-state-neutral); font-style: italic; font-size: 14px; } /* A: #9a8c70 → token (identic) */
.sbc-accordion-item.is-removing { opacity: 0; transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.sbc-accordion-item.is-entering { animation: sbcAccFadeIn .25s ease; }
.sbc-accordion-item.is-new { animation: sbcAccHighlight 2.4s ease; }
@keyframes sbcAccFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sbcAccHighlight {
    0% { box-shadow: 0 0 0 0 rgba(185,148,47,0.0); border-color: #b9942f; }
    15% { box-shadow: 0 0 0 4px rgba(185,148,47,0.25); border-color: #b9942f; }
    100% { box-shadow: 0 0 0 0 rgba(185,148,47,0.0); border-color: #e2e2e2; }
}
.sbc-cta-disabled { opacity: 0.5 !important; cursor: not-allowed !important; filter: grayscale(0.4); }
.sbc-acc-cta-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px;
    background: #fdf3e3; border: 1px solid #f0d9a8; color: #8a5a00; }
.sbc-acc-cta-msg .sbc-acc-cta-jump { background: none; border: 0; padding: 0; cursor: pointer;
    color: #8a5a00; font-weight: 700; text-decoration: underline; font-size: 14px; }

@media (max-width: 768px) {
    .sbc-accordion-header { padding: 14px 14px; }
    .sbc-accordion-body-inner { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .sbc-accordion-body,
    .sbc-accordion-chevron,
    .sbc-accordion-item.is-removing { transition: none !important; }
    .sbc-accordion-item.is-entering,
    .sbc-accordion-item.is-new { animation: none !important; }
}

/* Accordion mode — pin the input column to its track width so wide step content
   scrolls inside its section (overflow-x on .sbc-accordion-body-inner) instead of
   forcing page-level horizontal overflow. Scoped to body.sbc-accordion-active so
   the legacy wizard layout is untouched. Full mobile-first responsive (column
   collapse, sticky preview) is Faza A.4. */
body.sbc-accordion-active #sbc-inputs-side { min-width: 0; width: 100%; max-width: 100%; }
.sbc-accordion, .sbc-accordion-item { min-width: 0; width: 100%; max-width: 100%; }
.sbc-accordion-body, .sbc-accordion-body-inner { max-width: 100%; }

/* ============================================================================
   Faza A.2 — Sticky SVG preview (mobile card + desktop polish)
   Scoped to body.sbc-accordion-active so the legacy wizard is untouched.
   Desktop sticky (#sbc-visual-side top:30px) already exists above — unchanged.
   ============================================================================ */
/* Subtle fade when the SVG content changes (shape/module switch). */
#sbc-canvas-area.sbc-preview-updating svg { animation: sbcPreviewFade .2s ease-out; }
@keyframes sbcPreviewFade { from { opacity: .35; } to { opacity: 1; } }

/* Piece-count badge — only shown inside the compact mobile card. */
.sbc-preview-count { display: none; font-size: 12px; font-weight: 700; color: #8a8a8a; white-space: nowrap; }

/* Toggle bar for the mobile preview drawer — desktop never shows it (preview always open). */
.sbc-preview-toggle { display: none; }

/* Un-stick the preview once the lead-form (contact) section scrolls into view
   (toggled by IntersectionObserver in accordion-ui.js). */
.sbc-preview-unsticky { position: static !important; }

@media (max-width: 768px) {
    /* Collapsed by default: #sbc-visual-side is a thin sticky bar (just the toggle button). */
    body.sbc-accordion-active #sbc-visual-side {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
        background: #fff;
        border-bottom: 1px solid var(--lemet-border, #e2e2e2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    body.sbc-accordion-active #sbc-visual-side.sbc-preview-unsticky {
        box-shadow: none;
        border-bottom: 0;
        margin-bottom: 30px;
    }
    /* The toggle bar (44px). Fixed height so the open overlay can anchor under it (top:44px). */
    body.sbc-accordion-active .sbc-preview-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 11px 14px;
        background: transparent;
        border: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: inherit;
        text-align: left;
    }
    body.sbc-accordion-active .sbc-preview-toggle:focus-visible { outline: 2px solid #b9942f; outline-offset: -2px; }
    /* Task 3c — piece count on the collapsed bar (informative without opening). Sits after the
       label; the chevron's margin-left:auto pushes it to the right of these two. Muted via the
       shared token (raised to AA in Task 5). Hidden (attribute) while there are no pieces. */
    body.sbc-accordion-active .sbc-preview-count-bar { font-size: 12px; font-weight: 600; color: var(--sbc-muted); white-space: nowrap; }
    /* Separator between label and count. In ::before (not the DOM text) so it stays out of the
       toggle's accessible name; the flex gap:8px above already spaces label↔bar, this adds the dot. */
    body.sbc-accordion-active .sbc-preview-count-bar::before { content: "· "; }
    body.sbc-accordion-active .sbc-preview-chevron { margin-left: auto; transition: transform .2s ease; }
    body.sbc-accordion-active #sbc-visual-side.sbc-preview-open .sbc-preview-chevron { transform: rotate(180deg); }

    /* Collapsed: container clipped to 0 — but NOT display:none, so #sbc-canvas-area keeps its
       130px layout and engine.js still reads a valid clientHeight while collapsed. */
    body.sbc-accordion-active #sbc-visual-side .sbc-visual-container {
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 0;
    }
    /* Open: fixed overlay under the bar. Out of flow => document height unchanged => no scroll
       jump when toggling. */
    body.sbc-accordion-active #sbc-visual-side.sbc-preview-open .sbc-visual-container {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        top: 44px;
        z-index: 49;
        max-height: none;
        overflow: visible;
        background: #fff;
        padding: 8px 12px;
        border-bottom: 1px solid var(--lemet-border, #e2e2e2);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
        animation: sbcPreviewDrawer .2s ease-out;
    }
    body.sbc-accordion-active #sbc-canvas-area {
        /* 130px: compact card, but above the SVG renderer's ~100px floor below which
           engine.js (reads clientHeight) computes negative rect geometry. */
        height: 130px !important; /* overrides the inline style="height:500px" from PHP */
        flex: 1;
        min-width: 0;
    }
    body.sbc-accordion-active #sbc-legend-area { display: none; } /* keep the card compact (~140px) */
    body.sbc-accordion-active .sbc-preview-count { display: block; align-self: center; }
}

@keyframes sbcPreviewDrawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    #sbc-visual-side.sbc-preview-open .sbc-visual-container { animation: none; }
    .sbc-preview-chevron { transition: none; }
    #sbc-canvas-area.sbc-preview-updating svg { animation: none; }
}

/* ============================================================================
   Faza A.3 — Sticky price footer (live total + primary CTA)
   Fixed bottom, accordion mode only (body.sbc-accordion-active); hidden once the
   lead-form (contact) section is in view (IntersectionObserver). Legacy wizard
   never gets the footer.
   ============================================================================ */
.sbc-price-footer { display: none; }
/* Hardening (b): spațiul rezervat sub footer-ul fixed derivă din înălțimea LUI
   măsurată, publicată de syncFooterHeight() în --sbc-footer-h. Valorile din
   fallback (90/84px) se aplică doar până la prima măsurătoare sau dacă JS-ul nu
   rulează — nu mai sunt sursa de adevăr. */
body.sbc-accordion-active { padding-bottom: var(--sbc-footer-h, 90px); }
body.sbc-accordion-active .sbc-price-footer {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid var(--sbc-line-strong);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.12);
    transition: transform .2s ease-out, opacity .2s ease-out;
}
.sbc-price-footer.sbc-footer-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
/* `:not([hidden])` e obligatoriu: regula vine din author stylesheet și ar bate
   `[hidden] { display: none }` din UA stylesheet indiferent de specificitate.
   Fără el, `info.hidden = true` (standalone, A2b-1) nu ascunde nimic. */
.sbc-footer-info:not([hidden]) { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* B (skin): preț footer = mono (consistent spec-sheet RESKIN 2 + footer-total +
   carduri), culoare ink --sbc-title — NU verde (prea mult pe sticky). Scara
   26px/800 păstrată — schimbă DOAR familia. A: #1a1a1a → --sbc-title (identic). */
.sbc-footer-price {
    font-size: 26px; font-weight: 800; white-space: nowrap;
    font-family: var(--sbc-font-mono);
    color: var(--sbc-title);
}
.sbc-footer-price.is-changed { animation: sbcFooterPulse .25s ease; }
@keyframes sbcFooterPulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* B (skin): eticheta = label spec-sheet (uppercase + tracking, muted, sans).
   A: #888 → --sbc-muted (identic). */
.sbc-footer-vat { font-size: 12px; color: var(--sbc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sbc-footer-basket { font-size: 11px; color: var(--sbc-accent); font-weight: 700; }
/* A2b-1/2: footer „notice" pe standalone (fără preț) — text explicativ + buton „Salvează". */
.sbc-price-footer.sbc-footer-notice-mode { justify-content: center; }
/* `:not([hidden])` — vezi nota de la .sbc-footer-info. Fără el, notice-ul se randa
   pe pagina de produs (unde e `hidden`), lua flex:1 din rândul nowrap, se rupea pe
   10 rânduri și ducea footer-ul la 196px, strângând CTA-ul la lățimea padding-ului. */
.sbc-footer-notice:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 14px;
    flex: 1; max-width: 860px; padding: 2px 12px; flex-wrap: wrap;
    font-family: var(--sbc-font-sans); font-size: 13px; line-height: 1.35; color: var(--sbc-muted-deep); }
.sbc-footer-notice-text { text-align: center; }

/* A9 — explicația trece sub un icon, ca footerul standalone să nu mai fie trei elemente de
   aceeași greutate. `flex: 1` cade de pe notice: fără paragraf n-are ce să întindă, iar
   spațiul eliberat rămâne butoanelor. */
.sbc-price-footer.sbc-footer-notice-mode .sbc-footer-notice:not([hidden]) {
    flex: 0 0 auto;
    position: relative;
    max-width: none;
}
.sbc-footer-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: transparent; border: 1px solid var(--sbc-border, #e2e2e2); border-radius: 50%;
    color: var(--sbc-muted-deep); font-size: 16px; line-height: 1; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.sbc-footer-info-btn:hover { border-color: var(--sbc-accent); color: var(--sbc-accent); }
.sbc-footer-info-btn:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }

/* Bula. `position: absolute` peste footer, deschisă în SUS: footerul e fixat jos, deci în jos
   ar ieși din ecran. `pointer-events: none` — tooltipul e informativ, iar dacă ar prinde
   pointerul ar putea acoperi butonul de sub el pe ecrane mici. */
.sbc-footer-tip:not([hidden]) {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 60; display: block; width: max-content; max-width: min(360px, calc(100vw - 32px));
    padding: 10px 12px; border-radius: 6px;
    background: var(--sbc-ink, #1d1d1d); color: #fff;
    font-family: var(--sbc-font-sans); font-size: 12.5px; line-height: 1.45; text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    pointer-events: none;
}
/* Vârful bulei, ancorat de icon. */
.sbc-footer-tip:not([hidden])::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--sbc-ink, #1d1d1d);
}
/* A2b-2: buton „Salvează configurația" = blueprint plin flat (consecvent cu .sbc-footer-cta). */
.sbc-footer-notice-cta {
    background: var(--sbc-accent); color: #fff; border: 0; border-radius: 4px;
    font-family: var(--sbc-font-sans); font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
    padding: 10px 18px; min-height: 40px; cursor: pointer; transition: background .15s ease;
}
.sbc-footer-notice-cta:hover { background: var(--sbc-accent-dark); }
.sbc-footer-notice-cta:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }
/* A2b-2: toast scurt de confirmare (status), centrat deasupra footer-ului. */
.sbc-toast {
    position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(8px);
    background: var(--sbc-ink); color: #fff; font-family: var(--sbc-font-sans); font-size: 13px;
    font-weight: 600; padding: 10px 18px; border-radius: 6px; box-shadow: var(--sbc-shadow);
    opacity: 0; pointer-events: none; z-index: 99995; transition: opacity .2s ease, transform .2s ease;
}
.sbc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* A2b-3: banner restaurare config salvată (pagină produs) — non-intruziv, în capul calculatorului. */
.sbc-restore-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--sbc-line-strong); border-radius: 6px;
    background: var(--sbc-acc-surface); font-family: var(--sbc-font-sans);
}
.sbc-restore-text { font-size: 13px; color: var(--sbc-ink); line-height: 1.35; }
.sbc-restore-text i { color: var(--sbc-accent); margin-right: 6px; }
.sbc-restore-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sbc-restore-apply {
    background: var(--sbc-accent); color: #fff; border: 0; border-radius: 4px;
    font-family: var(--sbc-font-sans); font-weight: 700; font-size: 13px; text-transform: uppercase;
    letter-spacing: .5px; padding: 9px 16px; cursor: pointer; transition: background .15s ease; white-space: nowrap;
}
.sbc-restore-apply:hover { background: var(--sbc-accent-dark); }
.sbc-restore-dismiss {
    background: transparent; color: var(--sbc-muted-deep); border: 1px solid var(--sbc-line-strong);
    border-radius: 4px; font-family: var(--sbc-font-sans); font-weight: 600; font-size: 13px;
    padding: 9px 14px; cursor: pointer; transition: background .15s ease; white-space: nowrap;
}
.sbc-restore-dismiss:hover { background: var(--sbc-acc-surface-hover); }
.sbc-restore-apply:focus-visible, .sbc-restore-dismiss:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }
/* B (skin): footer CTA = blueprint. radius 8→4, Inter uppercase + tracking, flat.
   hover #255c41 → --sbc-accent-dark (UNIFICAT — schimbă nuanța la verdele comun);
   focus #1a3d2b → --sbc-accent (schimbă nuanța). Poziționarea footer-ului NEATINSĂ. */
.sbc-footer-cta {
    background: var(--sbc-accent); color: #fff; border: 0; border-radius: 4px;
    font: inherit; font-family: var(--sbc-font-sans); font-weight: 700; font-size: 15px;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 12px 22px; min-width: 180px; min-height: 44px; cursor: pointer; white-space: nowrap;
    transition: background .15s ease;
}
.sbc-footer-cta:hover { background: var(--sbc-accent-dark); }
.sbc-footer-cta:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }
.sbc-footer-cta.sbc-cta-disabled,
.sbc-footer-cta:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
/* Tema (WoodMart base.min.css) stilează butoanele prin
   `:is(.btn,.button,button,[type="submit"],[type="button"])` — specificitate 0,1,0,
   EGALĂ cu a lui `.sbc-footer-cta` (CTA-ul nostru are `type="button"`, deci prinde
   `[type="button"]`). La specificitate egală decide ordinea surselor, iar tema se
   încarcă DUPĂ calculator.css ⇒ câștiga ea: CTA gri #F3F3F3 cu text #3E3E3E în loc
   de verde cu alb. Același tipar pe `:hover` (ambele 0,2,0).
   Scopăm în `.sbc-price-footer` ⇒ 0,2,0 normal și 0,3,0 pe :hover, deci câștigăm
   natural în cascadă, fără !important.
   DOAR culorile: `padding` rămâne deliberat cel al temei (12px 35px) — `min-width:
   max-content` îl acomodează deja, iar preluarea lui ar muta layout-ul degeaba. */
.sbc-price-footer .sbc-footer-cta { background-color: var(--sbc-accent); color: #fff; }
.sbc-price-footer .sbc-footer-cta:hover { background-color: var(--sbc-accent-dark); color: #fff; }

@media (max-width: 768px) {
    body.sbc-accordion-active { padding-bottom: var(--sbc-footer-h, 84px); }
    body.sbc-accordion-active .sbc-price-footer { padding: 8px 12px; gap: 10px; }
    .sbc-footer-info { flex: 0 1 56%; min-width: 0; }
    .sbc-footer-price { font-size: 22px; }
    /* Hardening (a): `min-width: max-content` în loc de `0`. Butonul nu mai poate
       fi strâns sub lățimea propriului text, oricât ar cere vecinii — și pentru că
       max-content include padding-ul, ține chiar dacă tema (WoodMart) impune alt
       padding decât al nostru. Înlocuiește `min-width: 180px` de pe desktop, care
       la ≤768px era anulat de `min-width: 0`. */
    .sbc-footer-cta { flex: 0 1 auto; min-width: max-content; padding: 12px 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    body.sbc-accordion-active .sbc-price-footer { transition: none; }
    .sbc-footer-price.is-changed { animation: none; }
}

/* ============================================================================
   Faza B.3 — Buton WhatsApp asistență (float).
   Verde brand WhatsApp #25D366 (NU accentul nostru). z-index 55: sub footer-ul
   de preț (60, CTA-ul câștigă mereu) + sub modaluri/tooltip, peste conținut.
   Legacy (footer display:none): stă jos la 24px, fără gap ciudat.
   ============================================================================ */
.sbc-wa-float {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sbc-wa-float:hover,
.sbc-wa-float:focus {
    background: #1ebe57;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.sbc-wa-float:focus-visible {
    outline: 3px solid #0d8a3e;
    outline-offset: 2px;
}
/* În accordion footer-ul de preț e fix pe bottom:0 (≈90px desktop) → ridicăm
   butonul deasupra ca să nu acopere prețul/CTA-ul. */
body.sbc-accordion-active .sbc-wa-float { bottom: 102px; }

@media (max-width: 768px) {
    .sbc-wa-float { right: 16px; width: 52px; height: 52px; }
    /* Footer mobil ≈84px → 96px lasă ~12px clearance peste el. */
    body.sbc-accordion-active .sbc-wa-float { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .sbc-wa-float { transition: none; }
    .sbc-wa-float:hover,
    .sbc-wa-float:focus { transform: none; }
}

/* ============================================================================
   Faza A.4 — Mobile-first responsive for the accordion content.
   All rules scoped to body.sbc-accordion-active → legacy wizard untouched.
   ============================================================================ */
/* #1 — #sbc-app itself wasn't border-box (only its descendants were), so
   width:100% + padding overflowed the viewport by ~26px. */
body.sbc-accordion-active #sbc-app { box-sizing: border-box; max-width: 100%; }

@media (max-width: 768px) {
    body.sbc-accordion-active { margin: 0; }
    body.sbc-accordion-active #sbc-app { max-width: 100vw; }

    /* #3 — 16px form fields to stop iOS auto-zoom */
    body.sbc-accordion-active .sbc-accordion-body-inner input,
    body.sbc-accordion-active .sbc-accordion-body-inner select,
    body.sbc-accordion-active .sbc-accordion-body-inner textarea { font-size: 16px; }

    /* #7 — option-card grids wrap 2-up (auto-fit), degrade to 1 on tiny screens */
    body.sbc-accordion-active .sbc-edge-grid-premium,
    body.sbc-accordion-active .sbc-shape-grid,
    body.sbc-accordion-active .sbc-subtype-grid,
    body.sbc-accordion-active .sbc-sink-grid-premium,
    body.sbc-accordion-active .sbc-hob-grid-premium,
    body.sbc-accordion-active .sbc-socket-grid-premium,
    body.sbc-accordion-active .sbc-accessory-grid,
    body.sbc-accordion-active .sbc-channels-grid,
    body.sbc-accordion-active .sbc-models-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 12px;
    }

    /* #4 — touch target ≥44px on edge toggles */
    body.sbc-accordion-active .toggle-square { width: 44px; height: 44px; }

    /* #5 — hide inert "back" links (the selectors stay visible in Categorie/Formă) */
    body.sbc-accordion-active #btn-back-to-modules,
    body.sbc-accordion-active #btn-back-to-subtypes { display: none; }

    /* #6 — larger touch area on the CTA-message jump links */
    body.sbc-accordion-active .sbc-acc-cta-jump { display: inline-block; min-height: 24px; padding: 4px 2px; }

    /* #2 — edge/Laturi selector: side padding gives the absolute toggle labels
       room inside the card; smaller labels keep the diagram within the viewport. */
    body.sbc-accordion-active .sbc-visual-selector-container { max-width: 100%; padding: 8px 26px; }
    body.sbc-accordion-active .sbc-visual-selector-box { min-height: 280px; }
    body.sbc-accordion-active .sbc-edge-toggle span { font-size: 9px; padding: 1px 2px; letter-spacing: 0; }
}

/* ============================================================================
   Faza A.5 — Mini-rail progress indicator (accordion mode only).
   Horizontal, top of the input column; reuses the per-section status. Desktop
   sticky (hides at contact via footer boundary); mobile non-sticky, numbers only.
   ============================================================================ */
.sbc-mini-rail { display: none; }
body.sbc-accordion-active .sbc-mini-rail {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 4px;
    margin-bottom: 12px;
    animation: sbcRailIn .2s ease;
}
@keyframes sbcRailIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sbc-rail-node {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: 0; cursor: pointer; padding: 2px 4px; min-width: 44px; font: inherit;
}
.sbc-rail-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* A: #fff → --color-white (identic). B: număr pas pe --sbc-font-mono; default dot pe
       --sbc-muted (= pending, vezi mai jos). */
    font-size: 12px; font-weight: 700; font-family: var(--sbc-font-mono);
    color: var(--color-white); background: var(--sbc-muted);
    transition: background .2s ease, box-shadow .2s ease;
}
/* Cele 4 stări rail rămân DISTINCTE: valid/completed=verde, pending=muted gri,
   neutral=taupe-gri, invalid=auriu-warn, current=ring verde (mai jos). */
.sbc-rail-node[data-status="valid"] .sbc-rail-dot { background: var(--sbc-accent); }       /* completed/valid — verde discret */
.sbc-rail-node[data-status="invalid"] .sbc-rail-dot { background: var(--sbc-state-warn); }  /* A: #b9942f → token (identic) */
.sbc-rail-node[data-status="pending"] .sbc-rail-dot { background: var(--sbc-muted); }       /* B: #b9a37a → --sbc-muted (pending) */
.sbc-rail-node[data-status="neutral"] .sbc-rail-dot { background: var(--sbc-state-neutral); } /* A: #9a8c70 → token (identic) */
.sbc-rail-node.is-current .sbc-rail-dot { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--sbc-accent); } /* A: #fff → token */
.sbc-rail-label {
    font-size: 11px; color: var(--sbc-rail-label); white-space: nowrap; max-width: 68px; /* A: #666 → token (identic) */
    overflow: hidden; text-overflow: ellipsis;
}
.sbc-rail-node.is-current .sbc-rail-label { color: var(--sbc-accent); font-weight: 700; }
.sbc-rail-node:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; border-radius: 6px; }
.sbc-rail-conn { flex: 1 1 auto; height: 2px; background: var(--sbc-line); min-width: 6px; transition: background .2s ease; } /* B: #e2e2e2 → --sbc-line (conector) */
.sbc-rail-conn.is-done { background: var(--sbc-accent); }

@media (min-width: 769px) {
    body.sbc-accordion-active .sbc-mini-rail {
        position: sticky; top: 12px; z-index: 40; background: #fff;
        transition: opacity .2s ease, transform .2s ease;
    }
    body.sbc-accordion-active .sbc-mini-rail.sbc-rail-hidden {
        opacity: 0; transform: translateY(-8px); pointer-events: none;
    }
}
@media (max-width: 768px) {
    body.sbc-accordion-active .sbc-mini-rail { padding: 8px 2px; }
    body.sbc-accordion-active .sbc-rail-label { display: none; }
    body.sbc-accordion-active .sbc-rail-node { min-width: 0; flex: 0 0 auto; padding: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    body.sbc-accordion-active .sbc-mini-rail { animation: none; }
    .sbc-rail-dot, .sbc-rail-conn { transition: none; }
}

/* ============================================================================
   FAZA-B COMMIT 3 — Accordion pe pagina PRODUS: scope CSS izolat (WoodMart).
   Reguli STRICT sub body.sbc-accordion-product (marker pus de accordion-ui.js doar
   când !SBC_STANDALONE). Selectorul lipsește pe standalone => standalone byte-identic;
   NU modificăm nicio regulă sbc-accordion-active existentă, DOAR adăugăm produs-only.
     - footer preț: z-index ridicat peste straturile temei (header/bare sticky WoodMart).
     - preview + rail: STATIC (renunță la sticky) ca să NU intre sub header-ul sticky al
       temei (a cărui înălțime nu o știm din cod) — zero dependență externă, fără overlap.
     - padding-bottom: păstrat (footer-ul fixed are nevoie de spațiu rezervat).
   Plafonul exact z-index vs modaluri WoodMart + bara add-to-cart a temei = tur vizual.
   ============================================================================ */
body.sbc-accordion-product .sbc-price-footer { z-index: 99990; }

/* Preview: sticky ȘI pe produs. Top-ul e dat de --sbc-sticky-top (setupStickyTop în JS),
   care măsoară runtime înălțimea headerului WoodMart (shrink 160→110) — motivul original
   al dezactivării ("nu știm înălțimea headerului") nu mai e valabil.
   Rail-ul rămâne static pe produs (rail-ul nu e randat; SHOW_MINI_RAIL=false). */
body.sbc-accordion-product .sbc-mini-rail {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* ============================================================
   B.1 — Material selector (grid în secțiunea accordion "Material")
   ============================================================ */
.sbc-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

#sbc-app .sbc-material-card {
    background: var(--color-white);
    border: 1px solid var(--sbc-card-border-strong);
    border-radius: 4px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#sbc-app .sbc-material-card:hover {
    border-color: var(--sbc-accent);
}

#sbc-app .sbc-material-card.is-active {
    border: 2px solid var(--sbc-accent);
    background: var(--sbc-card-active-bg);
}

.sbc-material-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* B: preț pe card = mono (consistent spec-sheet + footer), culoare ink — nu auriu. */
.sbc-material-price {
    font-family: var(--sbc-font-mono);
    font-weight: 700;
    color: var(--sbc-title);
    font-size: 0.9rem;
}

.sbc-material-thickness {
    font-size: 0.78rem;
    color: var(--sbc-muted);
}

.sbc-material-empty {
    color: var(--sbc-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================================
   B.2 — Pagină standalone /calculator/ (shortcode standalone="true")
   Calculatorul nu mai e încastrat într-o pagină produs => centrat,
   cu puțin aer sus/jos. Header-ul (titlul) e util aici (pe produs e ascuns).
   ============================================================ */
#sbc-app.sbc-standalone {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

#sbc-app.sbc-standalone .sbc-main-header {
    text-align: center;
}

/* ============================================================================
   Recap „Sumar Proiect" (step 13) — tabel → carduri stivuite pe container îngust
   Container query, NU media query: recap-ul are lățimi disponibile foarte
   diferite la același viewport (coloană 1fr lângă 420px pe desktop, full-width
   sub 992px, iar în accordion e în .sbc-accordion-body-inner cu padding 18/12px).
   overflow-x:auto de pe .sbc-summary-table-wrap (inline, step13-lead-form.js)
   rămâne plasă de siguranță. .sbc-accordion-body-inner NU e atins.
   ============================================================================ */
.sbc-mini-recap { container-type: inline-size; }

@container (max-width: 560px) {
    .sbc-summary-table,
    .sbc-summary-table thead,
    .sbc-summary-table tbody,
    .sbc-summary-table tfoot,
    .sbc-summary-table tr,
    .sbc-summary-table th,
    .sbc-summary-table td { display: block; width: auto !important; }

    .sbc-summary-table thead { display: none; }

    .sbc-summary-table tbody tr.sbc-summary-row {
        border: 1px solid #e5e7eb; border-radius: 8px;
        padding: 12px; margin-bottom: 12px; background: #fff;
    }
    .sbc-summary-table tbody tr.sbc-summary-row--current { border-color: #c8a24a; }

    .sbc-summary-table tbody td {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 12px; padding: 4px 0 !important; text-align: right;
        white-space: normal !important; border: none !important;
    }
    .sbc-summary-table tbody td::before {
        content: attr(data-label); font-weight: 600; color: #6b7280;
        text-align: left; flex: 0 0 auto;
    }

    /* Celulele „date" (Dimensiuni/Suprafață/Preț) pot avea 1..n copii (ex. valoarea +
       „Profil: bizot"). space-between i-ar împrăștia, lăsând valoarea la mijloc. În schimb:
       tot conținutul real e împins într-un bloc la dreapta, adiacent, indiferent de câți copii.
       Ancora e ::before (margin-right:auto), NU primul copil: celula Preț conține un TEXT NODE
       gol de elemente (`${price} RON`), pe care `> :first-child` nu l-ar prinde — l-ar lăsa
       lipit de label. Aici și textul anonim e împins la dreapta. */
    .sbc-summary-table tbody td:not(.sbc-summary-prod):not(.sbc-summary-actions) {
        justify-content: flex-end;
    }
    .sbc-summary-table tbody td:not(.sbc-summary-prod):not(.sbc-summary-actions)::before {
        margin-right: auto;
    }

    .sbc-summary-table tbody td.sbc-summary-idx { display: none; }

    .sbc-summary-table tbody td.sbc-summary-prod {
        display: block; font-weight: 600; text-align: left;
        margin-bottom: 8px; padding-bottom: 8px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .sbc-summary-table tbody td.sbc-summary-prod::before { content: none; }

    .sbc-summary-table tbody td.sbc-summary-actions {
        justify-content: flex-start; flex-wrap: wrap; gap: 8px;
        margin-top: 8px; padding-top: 8px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    .sbc-summary-table tbody td.sbc-summary-actions::before { content: none; }

    .sbc-summary-table tbody tr.sbc-cmp-host-row td { display: block; text-align: left; }
    .sbc-summary-table tbody tr.sbc-cmp-host-row td::before { content: none; }

    .sbc-summary-table tfoot tr {
        display: flex; justify-content: space-between;
        padding: 12px 4px 0; border-top: 2px solid #e5e7eb; font-weight: 700;
    }
    .sbc-summary-table tfoot td { display: inline; padding: 0 !important; }
    .sbc-summary-table tfoot td::before { content: none; }
}