/* ============================================================
   Solaris design system — usato dal configuratore (admin + cliente)
   e da tutte le pagine che adottano il portage Figma.
   I globals e gli override di terze parti restano in app.css.
   ============================================================ */

.mud-icon-root svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* micro allineamento baseline */
}

/* === MudButton CTA — match Figma design system (nodo 287-1388) ===
   Base = Inter Bold 16px lh 1.4 (già da Typography.Button), text-transform none, radius 10px.
   Override mirati sugli hover per matchare i colori del design (no overlay Material). */

.mud-button-root {
    border-radius: var(--radius-button);
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, color 0.15s ease-out;
}

    /* Primary filled — Avanti / Final CTA / Carica Bolletta */
    .mud-button-root.mud-button-filled-primary {
        background-color: var(--color-primary);
        color: var(--color-text-white);
    }

        .mud-button-root.mud-button-filled-primary:hover {
            background-color: var(--color-primary-dark);
            color: var(--color-text-white);
        }

    /* Tertiary = Warning filled — Ricalcola (Accent giallo) */
    .mud-button-root.mud-button-filled-warning {
        background-color: var(--color-accent);
        color: var(--color-text-white);
    }

        .mud-button-root.mud-button-filled-warning:hover {
            background-color: var(--color-accent-dark);
            color: var(--color-text-white);
        }

    /* Secondary outlined — Indietro (border grigio → border nero su hover) */
    .mud-button-root.mud-button-outlined-default,
    .mud-button-root.mud-button-outlined-inherit {
        border-color: var(--color-grey);
        color: var(--color-text-black);
        background-color: transparent;
    }

        .mud-button-root.mud-button-outlined-default:hover,
        .mud-button-root.mud-button-outlined-inherit:hover {
            border-color: var(--color-text-black);
            background-color: transparent;
            color: var(--color-text-black);
        }

/* === Solaris Fields — Input / Dropdown Chip / Checkbox Field
   (Figma node 293:879) === */

/* Reset comune per font dei field */
.solaris-input,
.solaris-chip,
.solaris-checkbox-field {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, color 0.15s ease-out;
    box-sizing: border-box;
}

/* === Input Text Field (5 stati: Default / Active / Icon Default / Icon Active / Inactive) === */
.solaris-input {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-field);
    color: var(--color-text-black);
    cursor: text;
}

.solaris-input__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inactive);
}

.solaris-input--icon {
    padding: 14px;
    gap: 10px;
}

.solaris-input__control {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    min-width: 0;
}

    .solaris-input__control::placeholder {
        color: var(--color-grey);
        opacity: 1;
    }

.solaris-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-field);
}

    .solaris-input:focus-within .solaris-input__icon {
        color: var(--color-primary);
    }

/* Stato errore di validazione (Figma — bordo danger + ring rosso). Vince sul focus-within
   così il campo resta evidenziato anche mentre l'utente lo sta correggendo. */
.solaris-input.is-invalid,
.solaris-input.is-invalid:focus-within {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgba(200, 67, 44, 0.12); /* --color-danger @ 12% */
}

    .solaris-input.is-invalid:focus-within .solaris-input__icon {
        color: var(--color-danger);
    }

.solaris-input.is-disabled,
.solaris-input[aria-disabled="true"] {
    background-color: var(--color-grey-light);
    cursor: not-allowed;
    box-shadow: none;
    border-color: var(--color-grey);
}

    .solaris-input.is-disabled .solaris-input__control {
        cursor: not-allowed;
    }

/* Variante read-only "display" (Figma 570:3788) — usata per mostrare l'indirizzo
   dell'impianto come riga statica con icona pin verde. Niente focus, niente cursore
   text: è solo un riepilogo. width: fit-content così la card si stringe sull'indirizzo
   invece di prendere tutta la riga come gli input editabili. */
.solaris-input--readonly {
    width: fit-content;
    cursor: default;
}

    .solaris-input--readonly .solaris-input__control {
        cursor: default;
        font-weight: 600;
    }
    /* Forza il colore dell'icona a primary anche fuori focus (es. pin verde Figma). */
    .solaris-input__icon--primary,
    .solaris-input--readonly .solaris-input__icon--primary {
        color: var(--color-primary);
    }

/* === Dropdown Chip (3 varianti × 3 stati) ===
   Varianti: --classic (solo testo) / --icon (icona+testo, hover/active fill verde) / --check (checkbox+testo) */
.solaris-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    padding: 14px 12px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-chip);
    color: var(--color-text-black);
    cursor: pointer;
    text-align: left;
    appearance: none;
}

    .solaris-chip:hover {
        background-color: var(--color-bg-page); /* #FAFAFA */
    }

/* Classic: solo testo, active = bg verde 15% + text verde */
.solaris-chip--classic.is-active {
    background-color: rgba(58, 139, 104, 0.15);
    color: var(--color-primary);
}

/* Icon: padding ridotto verticale per icona grande, active = bg verde pieno + testo bianco */
.solaris-chip--icon {
    padding: 8px 12px;
    gap: 12px;
}

    .solaris-chip--icon .solaris-chip__icon {
        width: 40px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-black);
    }

    .solaris-chip--icon.is-active {
        background-color: var(--color-primary);
        color: var(--color-text-white);
    }

        .solaris-chip--icon.is-active .solaris-chip__icon {
            color: var(--color-text-white);
        }

/* Check: checkbox + testo, active = bg verde 15% + text verde + checkbox riempita */
.solaris-chip--check {
    justify-content: flex-start;
    gap: 10px;
}

    .solaris-chip--check.is-active {
        background-color: rgba(58, 139, 104, 0.15);
        color: var(--color-primary);
    }

/* === Solaris Checkbox visiva (square 18x18, radius 2px) ===
   Usata internamente da chip--check e checkbox-field. */
.solaris-checkbox {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-text-black);
    border-radius: 2px;
    background-color: transparent;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

    .solaris-checkbox::after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='none'><path d='M1 4.2L3.2 6.4L7 1.6' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0;
    }

    .solaris-checkbox.is-checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

        .solaris-checkbox.is-checked::after {
            opacity: 1;
        }

/* Override Figma 293:878 per la checkbox dentro SolarisCheckboxField:
   default grigio, hover nero, mobile default = nero (≤ 768px). Lascia inalterato chip--check. */
.solaris-checkbox-field .solaris-checkbox {
    border-color: var(--color-grey);
}

.solaris-checkbox-field:hover .solaris-checkbox:not(.is-checked) {
    border-color: var(--color-text-black);
}

.solaris-checkbox-field .solaris-checkbox.is-checked {
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .solaris-checkbox-field .solaris-checkbox:not(.is-checked) {
        border-color: var(--color-text-black);
    }
}

/* === Solaris Dropdown (Figma node 287:1510 — 7 varianti riducibili a 3 pattern) ===
   - Single: trigger con placeholder/valore, menu opzioni con highlight green su selected
   - Multi-select: opzioni con checkbox; trigger può mostrare chip della selezione
   - Icon options: ogni opzione ha icona + testo, l'opzione attiva sull'header può essere "filled green"
*/

.solaris-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

.solaris-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-chip);
    color: var(--color-text-black);
    cursor: pointer;
    text-align: left;
    appearance: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-dropdown__trigger.is-empty {
        color: var(--color-grey);
    }

.solaris-dropdown.is-open > .solaris-dropdown__trigger {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-field);
}

.solaris-dropdown__trigger-content {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    text-align: left;
}

.solaris-dropdown__trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solaris-dropdown__chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-black);
    transition: transform 0.2s ease-out;
}

.solaris-dropdown.is-open .solaris-dropdown__chevron {
    transform: rotate(180deg);
}

/* Menu opzioni */
.solaris-dropdown__menu {
    /* In-flow (non absolute): il menu spinge il contenuto sottostante invece di
       sovrapporsi a CTA/altri campi (regressione segnalata sul primo step). */
    position: relative;
    z-index: 50;
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-field);
    transform-origin: top center;
    animation: solaris-dropdown-fade-in 180ms ease-out;
    max-height: 320px;
    overflow-y: auto;
}

.solaris-dropdown__option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 47px;
    padding: 14px 12px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-chip);
    color: var(--color-text-black);
    cursor: pointer;
    text-align: left;
    appearance: none;
    font: inherit;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-dropdown__option > span:last-child {
        flex: 0 1 auto;
        text-align: left;
    }

    .solaris-dropdown__option:hover {
        background-color: var(--color-bg-page);
    }

    .solaris-dropdown__option.is-selected {
        background-color: rgba(58, 139, 104, 0.15);
        color: var(--color-primary);
    }

/* Variante con icona — opzione (icona+testo) */
.solaris-dropdown__option-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

/* Variante "icon header filled green" (Dropdown Superficie Pannelli) */
.solaris-dropdown--icon-filled > .solaris-dropdown__trigger {
    padding: 4px;
    gap: 0;
}

.solaris-dropdown--icon-filled .solaris-dropdown__trigger-inner {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: var(--radius-chip);
}

.solaris-dropdown--icon-filled .solaris-dropdown__chevron {
    color: var(--color-text-white);
}

.solaris-dropdown--icon-filled .solaris-dropdown__option.is-selected {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* Variante multi-select: opzioni con checkbox */
.solaris-dropdown__option-checkbox {
    flex: 0 0 auto;
}

.solaris-dropdown__option.is-selected.is-multi {
    background-color: rgba(58, 139, 104, 0.15);
    color: var(--color-primary);
}

/* Chip nella trigger del multi-select (mostra valore selezionato compatto) */
.solaris-dropdown__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background-color: rgba(58, 139, 104, 0.15);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: 1;
    border: none;
    cursor: pointer;
    appearance: none;
}

.solaris-dropdown__chip-x {
    width: 8px;
    height: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fade-in dall'alto quando il menu si apre — micro-anim per non comparire di colpo. */
@keyframes solaris-dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay invisibile per chiudere al click esterno */
.solaris-dropdown__overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    border: none;
    cursor: default;
}

/* === Solaris Stepper (Main + Finanziamento) — Figma 272:458 / 235:285 ===
   Desktop: container full-width, step distribuiti uniformemente (flex:1), tutti con label.
   Mobile: solo step attivo mostra la label; gli altri restano stretti col solo numero.
   margin-bottom: 72px desktop / 64px mobile — spacing fisso prima del contenuto step (richiesta utente). */
.solaris-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-pill);
    filter: drop-shadow(var(--shadow-container-soft));
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 72px;
}

/* Variante senza container per Stepper Finanziamento (solo pill colorate, no border esterno).
   margin-bottom: 0 — inline vive dentro card/colonne, non ha lo spacing del Main Stepper. */
.solaris-stepper--inline {
    background-color: transparent;
    border: none;
    padding: 0;
    gap: 10px;
    filter: none;
    margin-bottom: 0;
}
    /* Inline (Finanziamento): icona+label centrate nella pill, non left-aligned. */
    .solaris-stepper--inline .solaris-stepper__step {
        justify-content: center;
        text-align: center;
    }

.solaris-stepper__step {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: var(--radius-pill);
    border: none;
    appearance: none;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.15s ease-out, box-shadow 0.15s ease-out, padding 0.2s ease-out, flex 0.2s ease-out;
}

    /* Tutti gli step non-attivi vengono trattati come "non-completed":
   stessa opacità anche dopo essere stati visitati (requisito Figma) */
    .solaris-stepper__step:not(.is-active) {
        opacity: 0.6;
    }

    .solaris-stepper__step.is-active {
        padding: 10px 14px;
        box-shadow: var(--shadow-field);
    }

.solaris-stepper__step-number {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-tight);
}

.solaris-stepper__step-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.solaris-stepper__step-label {
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: 14px;
    line-height: var(--lh-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile (≤ 768px): solo step attivo cresce e mostra label, gli altri restano stretti col solo numero */
@media (max-width: 768px) {
    .solaris-stepper {
        gap: 8px;
        justify-content: space-between;
        margin-bottom: 64px;
    }

    .solaris-stepper__step {
        flex: 0 0 auto;
    }

        .solaris-stepper__step.is-active {
            flex: 1 1 auto;
            min-width: 0;
        }

        .solaris-stepper__step:not(.is-active) .solaris-stepper__step-label {
            display: none;
        }

    .solaris-stepper__step-label {
        font-size: 13px;
    }
}

/* Variante --compact: comportamento "mobile" applicato a tutti i breakpoint
   (es. Stepper Finanziamento dentro le colonne risultato). Active = icona+label
   espanso; gli altri restano stretti col solo icona/numero. */
.solaris-stepper--compact .solaris-stepper__step {
    flex: 0 0 auto;
}

    .solaris-stepper--compact .solaris-stepper__step.is-active {
        flex: 1 1 auto;
        min-width: 0;
    }

    .solaris-stepper--compact .solaris-stepper__step:not(.is-active) .solaris-stepper__step-label {
        display: none;
    }
/* --compact inline: niente margin-bottom 72 (vive dentro una colonna, non come main stepper) */
.solaris-stepper--inline.solaris-stepper--compact,
.solaris-stepper--compact.solaris-stepper--inline {
    margin-bottom: 0;
}

/* === Solaris Segmented Switch (Consumi + Fascia) ===
   Padding uniforme tra stato non-attivo e attivo: in passato il cambio padding 10→14
   sull'.is-active veniva animato dal transition e leggeva come "scale-down" al click.
   Ora entrambi gli stati hanno lo stesso padding e nessuna transizione su `padding`. */
.solaris-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-field);
    filter: drop-shadow(var(--shadow-container-soft));
}
/* Modifier full-width: switch che riempie la riga (Figma 513:2015 "Switch step 1"). */
.solaris-switch--block {
    display: flex;
    width: 100%;
}

/* Blocco "switch + helper text" — usato in SitoInstallazione per scegliere
   tra mappa e inserimento manuale (Figma 513:2260 / 513:2225). */
.solaris-area-mode {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.solaris-area-mode__hint {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-text-s);
    line-height: var(--lh-snug);
    color: var(--color-text-inactive);
}

.solaris-area-mode__action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Wrapper "trasparente": display:contents fa restare info-box/map/area-row figli
   diretti di .solaris-section (gap 48px), senza introdurre un sotto-container.
   is-hidden lo rimuove mantenendo però il map div in DOM (vedi commento in razor). */
.solaris-area-panel {
    display: contents;
}

    .solaris-area-panel.is-hidden {
        display: none;
    }

/* Mobile: nello switcher area-mode il segmento attivo si restringe al contenuto
   (icona + label su una riga) e l'inattivo riempie lo spazio rimanente mostrando
   solo l'icona (Figma 540:15395 / 540:15440). Scoped a .solaris-area-mode per
   non influenzare gli altri SolarisSegmentedSwitch (es. Consumi). */
@media (max-width: 768px) {
    .solaris-area-mode .solaris-switch__segment.is-active {
        flex: 0 0 auto;
    }

    .solaris-area-mode .solaris-switch__segment:not(.is-active) > span:not(.solaris-switch__segment-icon) {
        display: none;
    }
}

.solaris-switch__segment {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-chip);
    color: var(--color-text-inactive);
    cursor: pointer;
    appearance: none;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: var(--fs-text-s);
    line-height: var(--lh-snug);
    transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.solaris-switch__segment-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

/* Stato attivo: default = verde primary */
.solaris-switch__segment.is-active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    filter: drop-shadow(var(--shadow-soft-primary));
}

    /* Variante "accent" = giallo (Giorno) */
    .solaris-switch__segment.is-active.is-accent {
        background-color: var(--color-accent);
        filter: drop-shadow(var(--shadow-soft-accent));
    }

    /* Variante "night" = dark teal (Notte) */
    .solaris-switch__segment.is-active.is-night {
        background-color: var(--color-dark-night);
    }

/* === Checkbox Field (chip con label + meta + checkbox a destra) === */
.solaris-checkbox-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 51px;
    padding: 16px 12px;
    background-color: transparent;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-chip);
    color: var(--color-text-black);
    cursor: pointer;
    appearance: none;
    text-align: left;
}

.solaris-checkbox-field__label {
    flex: 1 1 auto;
    color: var(--color-text-black);
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    min-width: 0;
}

.solaris-checkbox-field__meta {
    flex: 0 0 auto;
    color: var(--color-text-inactive);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.solaris-checkbox-field.is-active {
    background-color: var(--color-bg-element);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-field);
}


/* CTA "Onboard" — Figma component set 287:1541, varianti "negative" (default) / "negative hover".
   Default: nessuna shadow. Hover: shadow + scale 1.05 (Figma cresce padding/radius/font/icon di ~5%). */
.solaris-cta-onboard.mud-button-root,
.solaris-cta-onboard {
    background-color: var(--color-bg-element);
    color: var(--color-primary);
    border-radius: var(--radius-button);
    box-shadow: none;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    text-transform: none;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

    .solaris-cta-onboard.mud-button-root:hover,
    .solaris-cta-onboard:hover {
        background-color: var(--color-bg-element);
        color: var(--color-primary);
        box-shadow: 0 1.06px 2.121px 0 rgba(0, 0, 0, 0.3), 0 1.06px 3.181px 1.06px rgba(0, 0, 0, 0.15);
        transform: scale(1.05);
    }

/* Riga CTA Avanti/Indietro — entrambi i bottoni occupano metà del contenitore.
   Gap 32px desktop / 24px mobile. Anche il max-width "Indietro" è stato rimosso:
   le due CTA devono essere simmetriche (Figma 272:578). */
.solaris-cta-row {
    display: flex;
    gap: 32px;
    width: 100%;
    margin-top: 32px;
}

    .solaris-cta-row > .mud-button-root,
    .solaris-cta-row > .solaris-cta-row__placeholder {
        flex: 1 1 0;
        min-width: 0;
    }

@media (max-width: 768px) {
    .solaris-cta-row {
        gap: 24px;
    }
        /* Mobile: nascondi il placeholder che simula l'Avanti — il bottone Indietro
       prende tutta la larghezza (step 3 Fase 1 cliente). */
        .solaris-cta-row > .solaris-cta-row__placeholder {
            display: none;
        }
}

/* CTA "Primary" (Avanti) — Figma component set 287:1541, varianti "Primary Default" / "Primary Hover".
   Padding asimmetrico pl-32/pr-24 perché il testo precede l'icona (EndIcon ArrowForward). */
.solaris-cta-primary.mud-button-root,
.solaris-cta-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);
    padding: 16px 24px 16px 32px;
    gap: 16px;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    text-transform: none;
    box-shadow: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

    .solaris-cta-primary.mud-button-root:hover:not(:disabled),
    .solaris-cta-primary:hover:not(:disabled) {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        color: var(--color-text-white);
        box-shadow: none;
    }

    .solaris-cta-primary.mud-button-root:disabled,
    .solaris-cta-primary:disabled {
        opacity: 0.6;
        color: var(--color-text-white) !important;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

/* CTA "Secondary" (Indietro) — Figma component set 287:1541, varianti "Secondary default" / "Secondary Hover".
   Border #CCCCC8 default → #2E2E2E hover. Padding pl-24/pr-32 perché l'icona precede il testo (StartIcon ArrowBack). */
.solaris-cta-secondary.mud-button-root,
.solaris-cta-secondary {
    background-color: transparent;
    color: var(--color-text-black);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-button);
    padding: 16px 32px 16px 24px;
    gap: 16px;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    text-transform: none;
    box-shadow: none;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-cta-secondary.mud-button-root:hover:not(:disabled),
    .solaris-cta-secondary:hover:not(:disabled) {
        background-color: transparent;
        border-color: var(--color-text-black);
        color: var(--color-text-black);
        box-shadow: none;
    }

    .solaris-cta-secondary.mud-button-root:disabled,
    .solaris-cta-secondary:disabled {
        opacity: 0.6;
        color: var(--color-text-black) !important;
        border-color: var(--color-grey);
    }

/* === Header pubblico configuratore — Figma 362:13240 ===
   Logo a sinistra, Avatar Area Utente (pill verde) a destra. Bg #FAFAFA con drop-shadow soft. */
.solaris-public-header.mud-appbar {
    background-color: var(--color-bg-page) !important;
    color: var(--color-text-black) !important;
    padding: 32px 16px;
    height: auto;
    min-height: 106px;
    box-shadow: 0 1px 1px rgba(46, 46, 46, 0.15), 0 1px 2px rgba(46, 46, 46, 0.1);
}

.solaris-public-header__avatar.mud-typography {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    background-color: var(--color-primary);
    color: var(--color-text-white) !important;
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease-out;
}

    .solaris-public-header__avatar.mud-typography:hover,
    .solaris-public-header__avatar.mud-typography:focus-visible {
        background-color: var(--color-primary-dark);
        color: var(--color-text-white) !important;
        outline: none;
    }

.solaris-public-header__avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: currentColor;
}

    .solaris-public-header__avatar-icon svg {
        width: 100%;
        height: 100%;
    }

/* === Onboarding /onboarding — Figma 335:1022 (mobile) + 351:949 (desktop) === */
.solaris-onboarding-bg {
    background: radial-gradient(circle at top left, var(--color-primary) 0%, #2F7457 100%);
}

.solaris-text-white {
    color: var(--color-text-white) !important;
}

.solaris-onboarding-body {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lh-relaxed);
}

@media (min-width: 769px) {
    .solaris-onboarding-body {
        font-size: 18px;
        font-weight: 600;
        max-width: 684px;
        margin: 0 auto;
    }

    .solaris-onboarding-bg > .mud-stack {
        gap: 128px !important;
        padding-top: 0 !important;
        padding-bottom: 72px !important;
    }
}

/* === Section configuratore — Figma 272:472 "Disegna la superficie del tetto" === */
.solaris-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
/* Spaziatura tra sezioni adiacenti (es. ConsumiEnergetici → Marketing): non è
   coperta dal gap interno della sezione, va dichiarata come padding-top sul
   blocco successivo. */
.solaris-section--spaced-top {
    padding-top: 32px;
}

/* =====================================================================
   Configuratore ADMIN — layout unificato (solo back-office)
   Il flusso admin impila le sezioni Figma (condivise col cliente) e le
   sezioni solo-admin (Cliente, Tipo servizio, Condizioni commerciali,
   Componenti). Qui diamo a TUTTE lo stesso contenitore-card e un unico
   ritmo verticale, SENZA toccare i componenti condivisi: il cliente
   continua a renderizzarle flat, l'admin le vede come card coerenti.
   Le card riusano il linguaggio del design system (bg-element + bordo
   grey + radius 12, come .solaris-billing-card / .solaris-privacy-card). */
.solaris-admin {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Striscia meta in testa: stato configurazione + date completamento fasi. */
.solaris-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.solaris-admin-meta__item {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background-color: var(--color-grey-light);
    border-radius: var(--radius-field);
}

.solaris-admin-meta__label {
    font-family: var(--ff-body);
    font-size: var(--fs-text-s);
    color: var(--color-text-inactive);
}

.solaris-admin-meta__value {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    color: var(--color-text-black);
}

.solaris-admin-meta__chip {
    align-self: flex-start;
}

/* Flusso verticale: un unico gap tra le card = spaziatura coerente. */
.solaris-admin-flow {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Contenitore-card di sezione (stesso look di .solaris-billing-card). */
.solaris-admin-card {
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .solaris-admin-card {
        padding: 20px;
    }
}

/* Riga heading con azione/chip a destra (es. "Cliente" + chip Associato). */
.solaris-admin-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Dentro la card il divisore di chiusura e lo spacer-top delle sezioni
   condivise sono ridondanti: contenimento e ritmo li fornisce la card. */
.solaris-admin-card > .solaris-section > .solaris-section__divider:last-child {
    display: none;
}

.solaris-admin-card > .solaris-section.solaris-section--spaced-top {
    padding-top: 0;
}

/* Heading sezione con barra verticale verde a sinistra (Figma 272:474) */
.solaris-section__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Variante --risultato (Step 3): padding-bottom solo desktop, separa heading dalle 2 colonne */
@media (min-width: 769px) {
    .solaris-section__heading--risultato {
        padding-bottom: 16px;
    }
}
/* Tutti i titoli con barra verticale verde a sinistra usano la stessa tipografia
   H2 (Space Grotesk Bold 28/24 responsive). */
.solaris-section__title {
    position: relative;
    margin: 0;
    /*padding-left: 14px;*/
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}
/* Barra verticale verde a sinistra (4×20) — condivisa da tutti i titoli/heading
   con "green bar". Aggiungere qui il selettore quando serve un nuovo titolo
   con la stessa barra: si aggiorna lo stile in un solo punto. 
    COMMENTATO PERCHÉ NON PIACE 

*/
/*.solaris-section__title::before,
.solaris-section__sub-heading::before,
.solaris-componenti-card__title::before,
.solaris-consumi-futuri-card__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: var(--color-primary);
    border-radius: 2px;
}*/
.solaris-section__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

/* Sotto-titolo "Dati del contatore" (Figma 300:751) — barra verde stessa H2
   come gli altri green-bar titles (Space Grotesk Bold 28/24), bar 4×22. */
.solaris-section__sub-heading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    /*padding-left: 14px;*/
    position: relative;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}
/* Variante H3 (Figma 570:3951 — "Dimensionamento personalizzato") con stessa barra verde
   ma type-scale ridotto a Text L (18px). Scope sul tag h3 così evito di toccare
   gli H2 esistenti (es. "Dati del contatore" in ConsumiEnergetici). */
h3.solaris-section__sub-heading {
    font-size: var(--fs-text-l);
}
/* Barra verde: vedi regola consolidata su .solaris-section__title::before. */

/* Tag "FACOLTATIVO" inline accanto a un sub-heading H3 (Figma 570:3952) —
   Space Grotesk Medium 12px uppercase grigio. Stilisticamente identico a
   .solaris-field__label-optional ma con type-scale del sub-heading. */
.solaris-section__sub-heading-optional {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-text-inactive);
}

/* Divisore orizzontale a tutta larghezza tra blocchi di una sezione (Figma 300:681/300:687).
   Padding fisso 32px sopra/sotto desktop+mobile: la spaziatura attorno alla linea vive
   dentro al divider stesso, così le sezioni non devono compensare l'altezza extra.
   La linea è disegnata via ::before in centro al box (altezza 0 + padding-top 32 =
   contenuto a 32px dal top, esattamente metà di un box 64px).
   Variante --dashed: linea tratteggiata (usata attorno al blocco bolletta). */
.solaris-section__divider {
    margin: 0;
    padding: 32px 0;
    border: none;
    background: transparent;
    height: 0;
    box-sizing: content-box;
}

    .solaris-section__divider::before {
        content: "";
        display: block;
        width: 100%;
        border-top: 1px solid var(--color-grey);
    }

.solaris-section__divider--dashed::before {
    border-top-style: dashed;
}

/* Blocco "Hai a portata di mano la tua bolletta?" + CTA verde centrato (Figma 300:682). */
.solaris-bolletta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.solaris-bolletta-block__title {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 18px;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    text-align: center;
}

.solaris-bolletta-block__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
    text-align: center;
}
/* CTA verde "Carica Bolletta" — bottone primary con icona upload. Plain <button>
   (non MudButton) per evitare il padding-12 della .mud-icon-button e label inglese
   "Browse..." iniettata da Mud quando l'activator content è una MudButton vuota. */
.solaris-cta-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 48px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    transition: background-color 0.15s ease-out;
}

    .solaris-cta-upload:hover:not(:disabled) {
        background-color: var(--color-primary-dark);
        color: var(--color-text-white);
    }

.solaris-cta-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-text-white);
}

    .solaris-cta-upload__icon svg {
        width: 100%;
        height: 100%;
    }
/* InputFile nativo nascosto: il click avviene sul <label> wrapper (.solaris-cta-upload). */
.solaris-cta-upload__hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Stato iniziale upload (Figma 546:5024): CTA verde + hint formati/dimensione sotto. */
.solaris-bolletta-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.solaris-bolletta-upload__hint {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 12px;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
    text-align: center;
    letter-spacing: 0.5px;
}

/* Stato "Analisi in corso..." (transitorio): spinner + label, riempie verticalmente
   lo spazio del blocco bolletta così la transizione tra i tre stati è fluida. */
.solaris-bolletta-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 24px;
}

.solaris-bolletta-loading__text {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
    text-align: center;
}

/* Stato "Bolletta caricata" (Figma 546:5031): heading + card bordata verde con file info
   a sx (clickable per visualizzare) + actions reload/trash a dx. */
.solaris-bolletta-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.solaris-bolletta-card__heading {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 20px;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    text-align: center;
}

.solaris-bolletta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 476px;
    padding: 24px 32px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    flex-wrap: wrap;
}
/* Blocco icona file + nome + hint visualizzazione (intera area cliccabile). */
.solaris-bolletta-card__main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
    appearance: none;
}

    .solaris-bolletta-card__main:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

.solaris-bolletta-card__file-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .solaris-bolletta-card__file-icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-bolletta-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.solaris-bolletta-card__name {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solaris-bolletta-card__hint {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 12px;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
    letter-spacing: 0.5px;
}

.solaris-bolletta-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* Bottoni a icona quadrati con bordo (riusabili — usati nelle actions della card bolletta). */
.solaris-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 8px;
    background: none;
    border: 1px solid var(--color-text-inactive);
    border-radius: 6px;
    color: var(--color-text-inactive);
    cursor: pointer;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
    appearance: none;
}

    .solaris-icon-button:hover:not(:disabled) {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .solaris-icon-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .solaris-icon-button svg {
        width: 18px;
        height: 18px;
    }

/* Input numerico custom (Figma 300:706) — bg bianco, border grigio, suffix unità (kWh/Kw),
   frecce custom +/- a destra (Figma 293:871). Stato focus identico a .solaris-input.
   Padding Figma: 6px su top/right/bottom, 16px a sinistra. Il left padding allinea il valore
   alla stessa colonna del trigger del dropdown (16px), mentre il right è ridotto per ospitare
   il blocchetto delle frecce; la coerenza visiva con i dropdown nasce dall'altezza complessiva
   (~50px), non da padding identico. */
.solaris-input--numeric {
    padding: 6px 6px 6px 16px;
    gap: 12px;
}

    .solaris-input--numeric .solaris-input__control {
        appearance: textfield;
        -moz-appearance: textfield;
        font-family: var(--ff-display);
        font-weight: 500;
        color: var(--color-text-black);
    }
        /* Nasconde gli spinner nativi del browser — usiamo i nostri pulsanti custom */
        .solaris-input--numeric .solaris-input__control::-webkit-outer-spin-button,
        .solaris-input--numeric .solaris-input__control::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.solaris-input__suffix {
    flex: 0 0 auto;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    color: var(--color-grey);
}

/* Frecce ▲/▼ (Figma 293:871 "Input Arrow") — stack verticale 32×16 ciascuna,
   border 1px radius 4, padding 6/12. Default border+chevron #CCCCC8;
   hover border+chevron #3A8B68 (var(--color-primary)). */
.solaris-input__arrows {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.solaris-input__arrow {
    /* Total: 32×16 — padding 5×11 + icon 10×6 (input-up.svg / input-down.svg). */
    padding: 5px 11px;
    background-color: transparent;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    color: var(--color-grey);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-input__arrow:hover:not(:disabled),
    .solaris-input__arrow:focus-visible:not(:disabled) {
        border-color: var(--color-primary);
        color: var(--color-primary);
        outline: none;
    }

    .solaris-input__arrow:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.solaris-input__arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 6px;
}

    .solaris-input__arrow-icon svg {
        width: 100%;
        height: 100%;
    }

/* Tag "OPZIONALE" inline accanto al label di un campo facoltativo (Figma 300:705 ecc.) */
.solaris-field__label-optional {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 11px;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-grey);
    margin-left: 4px;
}

/* Card consensi privacy con bordo grigio (Figma 300:771).
   Override mud-icon-button: MudCheckBox usa .mud-icon-button con padding 12 attorno
   alla checkbox; nel design Figma il gap tra le righe è 24px puliti, quindi azzeriamo
   quel padding interno e teniamo solo il gap del container. */
.solaris-privacy-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
}

.solaris-privacy-card__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

    .solaris-privacy-card__row .mud-checkbox {
        margin: 0;
    }

.solaris-privacy-card .mud-icon-button {
    padding: 0;
    /* 12px tra la checkbox e il testo del label (richiesta utente). */
    margin-right: 12px;
}

/* Card "Indirizzo di fatturazione" (Figma 570:3884) — bg bianco, bordo grigio,
   radius 12, padding 32x24, gap 32 tra titolo H3 e griglia dei campi. */
.solaris-billing-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
}

.solaris-billing-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

/* === Dialog "Piani di manutenzione X-Green" (Figma 583:3318) ===
   Card bianca con bordo verde, ring-shadow, decorazione sole in alto a destra.
   Override del MudDialog: niente header/actions nativi — tutto il contenuto è
   strutturato dentro .solaris-piano-dialog. */
.solaris-piano-dialog-wrapper.mud-dialog,
.mud-dialog.solaris-piano-dialog-wrapper {
    background-color: transparent;
    box-shadow: none;
    max-width: 720px;
    width: min(720px, 92vw);
    overflow: visible;
}

.solaris-piano-dialog-wrapper .mud-dialog-content {
    padding: 0;
    overflow: visible;
}

.solaris-piano-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
    padding: 32px 56px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-field);
    overflow: hidden;
}

@media (max-width: 768px) {
    .solaris-piano-dialog {
        gap: 24px;
        padding: 24px 20px;
    }
}

/* Decorazione "accent-sun" in alto a destra (Figma 583:3323). L'SVG include già i propri
   colori (primary + accent con mix-blend e opacity 0.3) e va caricato con GetRaw per
   preservarli — niente "color" qui sopra. */
.solaris-piano-dialog__decoration {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 128px;
    height: 128px;
    display: inline-flex;
    pointer-events: none;
}

    .solaris-piano-dialog__decoration svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.solaris-piano-dialog__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h3); /* 24px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    text-align: center;
}

.solaris-piano-dialog__lead {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    text-align: center;
}

.solaris-piano-dialog__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: fit-content;
}

.solaris-piano-dialog__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-text-s); /* 14px */
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-piano-dialog__item-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .solaris-piano-dialog__item-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.solaris-piano-dialog__footer {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-text-s); /* 14px */
    line-height: var(--lh-snug);
    color: var(--color-text-inactive);
    text-align: center;
}

/* CTA "Ho capito" — full-width, verde primary (Figma 583:3333). */
.solaris-piano-dialog__cta {
    width: 100%;
    padding: 14px 24px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}

    .solaris-piano-dialog__cta:hover {
        background-color: var(--color-primary-dark);
    }

/* === Domanda Sì/No (Figma 570:4009 — CantiereEVincoli) ===
   Card bianca a tutta larghezza con label a sinistra (+ icona info opzionale)
   e toggle binario a destra. Gruppo di card sotto un sub-heading: gap 24. */
.solaris-domanda-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.solaris-domanda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
}

.solaris-domanda__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-domanda__info {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-inactive);
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease-out;
}

    .solaris-domanda__info:hover,
    .solaris-domanda__info:focus-visible {
        color: var(--color-primary);
        outline: none;
    }

    .solaris-domanda__info svg {
        width: 100%;
        height: 100%;
        display: block;
    }

/* Toggle binario "Sì / NO" (Figma 570:4176) — due button affiancati in un container
   con bordo grigio e radius 10. Stato attivo: bg verde + testo bianco. */
.solaris-domanda__toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-button);
    overflow: hidden;
    flex: 0 0 auto;
}

.solaris-domanda__toggle-btn {
    height: 42px;
    padding: 10px 32px;
    background: transparent;
    border: none;
    appearance: none;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

    /* Bordo verticale di separazione tra i due segmenti */
    .solaris-domanda__toggle-btn + .solaris-domanda__toggle-btn {
        border-left: 1px solid var(--color-grey);
    }

    .solaris-domanda__toggle-btn:hover:not(.is-active) {
        color: var(--color-text-black);
    }

    .solaris-domanda__toggle-btn.is-active {
        background-color: var(--color-primary);
        color: var(--color-text-white);
    }

/* Mobile: label sopra, toggle sotto allineato a sinistra. */
@media (max-width: 768px) {
    .solaris-domanda {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .solaris-domanda__toggle {
        align-self: flex-start;
    }

    .solaris-domanda__toggle-btn {
        flex: 1 1 0;
        padding: 10px 24px;
    }
}

.solaris-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solaris-field__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-label-field);
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-field__required {
    color: var(--color-danger);
}

.solaris-field__hint {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-s);
    color: var(--color-text-inactive);
}

/* Messaggio di errore sotto al campo (accoppiato a .solaris-input.is-invalid) */
.solaris-field__error {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-text-s);
    line-height: var(--lh-tight);
    color: var(--color-danger);
}

.solaris-field__label-icon {
    color: var(--color-text-inactive);
}

.solaris-field__label-icon--inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: help;
}

    .solaris-field__label-icon--inline svg {
        width: 100%;
        height: 100%;
    }

.solaris-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.solaris-field-grid--three {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 768px) {
    .solaris-field-grid,
    .solaris-field-grid--three {
        grid-template-columns: 1fr;
    }
}

/* Input "letto" (indirizzo già selezionato) con icona edit a destra */
.solaris-input--with-action .solaris-input__control {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solaris-input__edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 4px;
    color: var(--color-text-inactive);
    cursor: pointer;
    transition: color 0.15s ease-out;
}

    .solaris-input__edit:hover {
        color: var(--color-primary);
    }

/* Container Google autocomplete: applica stesso look della SolarisInputText */
.solaris-autocomplete-host {
    display: block;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-field);
}

/* Info box verde con messaggi istruzioni mappa (Figma 272:481) */
.solaris-info-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background-color: rgba(58, 139, 104, 0.2);
    border-radius: 8px;
}

.solaris-info-box__row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    color: var(--color-primary);
}

    .solaris-info-box__row .mud-icon-root {
        flex: 0 0 auto;
        color: var(--color-primary);
    }

.solaris-info-box__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

    .solaris-info-box__icon svg {
        width: 100%;
        height: 100%;
    }
/* Simbolo PNG inline accanto al testo (es. "cliccando sul simbolo [png]") */
.solaris-info-box__symbol {
    display: inline-block;
    height: 1.1em;
    width: auto;
    vertical-align: -2px;
    margin-left: 4px;
}

/* Mappa Google */
.solaris-map {
    width: 100%;
    height: 450px;
    background-color: var(--color-grey-light);
    border-radius: 8px;
    overflow: hidden;
}

/* Controlli custom di disegno/modifica (Terra Draw) sovrapposti alla mappa.
   .is-active evidenzia la modalità attualmente selezionata. */
.gm-draw-control.is-active {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Riga area stimata + CTA "Pulisci"/"Centra Indirizzo" (Figma 272:575) */
.solaris-area-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.solaris-area-stimata {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.solaris-area-stimata__label {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-area-stimata__value {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 24px;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

@media (max-width: 768px) {
    .solaris-area-stimata__label {
        font-size: 16px;
    }

    .solaris-area-stimata__value {
        font-size: 18px;
    }
}

.solaris-area-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* CTA outline con icona — varianti per "Pulisci" (verde) e "Centra Indirizzo" (nero) */
.solaris-cta-outline-primary.mud-button-root,
.solaris-cta-outline-default.mud-button-root {
    padding: 12px 16px;
    gap: 8px;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-cta);
    line-height: var(--lh-relaxed);
    text-transform: none;
    background-color: transparent;
    box-shadow: none;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-cta-outline-primary.mud-button-root .mud-button-label,
    .solaris-cta-outline-default.mud-button-root .mud-button-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
/* Modifier --sm (16×16) per i CTA del wizard (Figma 570:4326 — icona sun a destra
   di "Completa configurazione"). Il default 22×22 è troppo grande accanto al testo 16px. */
.solaris-cta-icon--sm {
    width: 16px !important;
    height: 16px !important;
}
/* MudButton wrappa il contenuto in .mud-button-label (flex con gap default 8px) — qui
   forziamo gap 16 per matchare il Figma 570:4326 (testo "Completa configurazione" + sun). */
.solaris-cta-primary .mud-button-label {
    gap: 16px;
}

.solaris-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

    .solaris-cta-icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-cta-outline-primary.mud-button-root {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

    .solaris-cta-outline-primary.mud-button-root:hover:not(:disabled) {
        background-color: transparent;
        color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

.solaris-cta-outline-default.mud-button-root {
    color: var(--color-text-black);
    border: 1px solid var(--color-text-black);
}

    .solaris-cta-outline-default.mud-button-root:hover:not(:disabled) {
        background-color: transparent;
        color: var(--color-text-black);
        border-color: var(--color-text-black);
    }

/* Selettore Tipo Superficie — 5 chip grandi con icona (Figma 300:626) */
.solaris-tipo-superficie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    filter: drop-shadow(var(--shadow-container-soft));
}

.solaris-tipo-superficie__chip {
    flex: 1 1 0;
    min-width: 0;
    height: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-grey);
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

    .solaris-tipo-superficie__chip:hover:not(.is-active) {
        background-color: var(--color-grey-light);
        color: var(--color-text-inactive);
    }

    .solaris-tipo-superficie__chip.is-active {
        background-color: var(--color-primary);
        color: var(--color-text-white);
    }

.solaris-tipo-superficie__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 40px;
    color: inherit;
}

    .solaris-tipo-superficie__chip-icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-tipo-superficie__chip-label {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    text-align: center;
    white-space: normal;
}

@media (max-width: 768px) {
    .solaris-tipo-superficie__chip {
        flex: 1 1 calc(50% - 8px);
    }
}

/* Tipo superficie — varianti desktop/mobile (Figma 204:28).
   Desktop (>768px): chip grid visibile, dropdown nascosto.
   Mobile (≤768px): chip nascoste, SolarisDropdown visibile. */
.solaris-tipo-superficie--mobile {
    display: none;
}

@media (max-width: 768px) {
    .solaris-tipo-superficie--desktop {
        display: none;
    }

    .solaris-tipo-superficie--mobile {
        display: block;
    }
}

/* ============================================================
   STEP 3 — Il tuo impianto fotovoltaico (Figma 300:858)
   ============================================================ */

/* Contenitore principale Step 3 (Figma) — sezioni stacked con gap 32px.
   Sostituisce i modifier `solaris-section--spaced-top` usati in precedenza. */
.solaris-step3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
}

    .solaris-step3 > * {
        width: 100%;
    }

/* Layout 2-colonne (senza/con accumulo). Mobile: stacked. */
.solaris-risultato-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .solaris-risultato-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Colonna risultato — bordo grigio, padding, gap interno (Figma 300:858).
   align-items: flex-start + align-self: stretch coerenti col token Figma.
   min-width: 0 essenziale: senza, i contenuti con white-space:nowrap (es. label stepper)
   forzano la colonna sopra il proprio 1fr e fanno sforare la griglia dal contenitore. */
.solaris-risultato-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 24px;
    padding: 20px 16px;
    min-width: 0;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 10px;
}
/* Variante "Consigliata" — border accent 1px + halo box-shadow (Figma "consigliato") */
.solaris-risultato-col--consigliata {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(254, 169, 13, 0.10);
}

/* I figli flex devono occupare la larghezza del contenitore: con align-items:flex-start
   senza override, gli elementi block-like (card, divider, ecc.) si auto-shrinkano al
   contenuto e i divider/righe restano larghi quanto un'icona. */
.solaris-risultato-col > * {
    width: 100%;
}

/* Heading colonna: icona + H3 */
.solaris-risultato-col__heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.solaris-risultato-col__heading-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .solaris-risultato-col__heading-icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-risultato-col__heading-title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 24px;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

/* Card risparmio — gradient verde con sole grande in sfondo (Figma 300:1530) */
.solaris-risparmio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 12px;
    border-radius: 12px;
    background-image: linear-gradient(149deg, rgb(58, 139, 104) 1%, rgba(43, 102, 76, 0.95) 98%);
    overflow: hidden;
    color: var(--color-bg-page);
}

.solaris-risparmio-card__sun {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    mix-blend-mode: lighten;
    color: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

    .solaris-risparmio-card__sun svg {
        width: 100%;
        height: 100%;
    }

.solaris-risparmio-card__row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solaris-risparmio-card__label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 12px;
    line-height: var(--lh-tight);
    color: var(--color-bg-page);
}

.solaris-risparmio-card__value {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
}

.solaris-risparmio-card__value-currency {
    font-family: var(--ff-display);
    font-weight: 500;
    color: var(--color-bg-page);
}

.solaris-risparmio-card__value-amount {
    font-family: var(--ff-display);
    font-weight: 500;
    color: var(--color-text-white);
    line-height: 1;
    white-space: nowrap;
}

.solaris-risparmio-card__value--lg .solaris-risparmio-card__value-currency {
    font-size: 18px;
    line-height: var(--lh-tight);
}

.solaris-risparmio-card__value--lg .solaris-risparmio-card__value-amount {
    font-size: 40px;
}

.solaris-risparmio-card__value--sm .solaris-risparmio-card__value-currency {
    font-size: 16px;
    line-height: var(--lh-tight);
}

.solaris-risparmio-card__value--sm .solaris-risparmio-card__value-amount {
    font-size: 20px;
}

.solaris-risparmio-card__divider {
    border: none;
    border-top: 1px dashed rgba(246, 247, 244, 0.4);
    margin: 0;
}

.solaris-risparmio-card__row-pair {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

    .solaris-risparmio-card__row-pair > .solaris-risparmio-card__row {
        flex: 0 0 auto;
    }

.solaris-risparmio-card__row-pair-divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(246, 247, 244, 0.4);
}

.solaris-risparmio-card__payback {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-white);
}

/* Field row con icona — Potenza/Produzione/Investimento/etc. */
.solaris-risultato-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
}

.solaris-risultato-field__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

.solaris-risultato-field__label-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .solaris-risultato-field__label-icon svg {
        width: 100%;
        height: 100%;
    }
/* Variante --accent: icona gialla (es. Capacità accumulo) */
.solaris-risultato-field--accent .solaris-risultato-field__label-icon {
    color: var(--color-accent);
}

.solaris-risultato-field__value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.solaris-risultato-field__value-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 16px;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-risultato-field__value-unit {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 14px;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-risultato-field__value--investimento {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-dark);
}

/* Investimento: totale pieno in evidenza + riga secondaria con l'importo agevolato.
   La riga diventa a due livelli, quindi l'allineamento verticale passa da center a
   flex-start per non far "ballare" la label rispetto al numero grande. */
.solaris-risultato-field--investimento {
    align-items: flex-start;
}

.solaris-risultato-investimento {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.solaris-risultato-investimento__detrazione {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-text-s);
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
    white-space: nowrap; /* l'importo non deve spezzarsi fra simbolo € e cifre */
}

    .solaris-risultato-investimento__detrazione b {
        font-weight: 700;
        color: var(--color-text-black);
    }

/* Divider tratteggiato interno alla colonna risultato (Figma — tutti gli hr nelle
   card senza/con accumulo sono dashed). */
.solaris-risultato-divider {
    height: 0;
    border: none;
    border-top: 1px dashed var(--color-grey);
    margin: 0;
}

/* MODALITÀ DI PAGAMENTO header centrato con icona */
.solaris-pagamento-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-primary);
}

.solaris-pagamento-head__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .solaris-pagamento-head__icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-pagamento-head__label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 14px;
    line-height: var(--lh-relaxed);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Chip "Consigliato" (Figma 300:1773 desktop / 240:13629 mobile) — accent solido + sole
   margin-left: auto la spinge a destra nel heading colonna (icona + titolo + chip). */
.solaris-consigliato-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 6px -2px rgba(254, 169, 13, 0.3);
    color: var(--color-text-white);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: auto;
    overflow: hidden;
}

.solaris-consigliato-chip__icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .solaris-consigliato-chip__icon svg {
        width: 100%;
        height: 100%;
    }

/* Card finanziamento (Figma 300:1606, 332:13679, 334:13737) — bordo grigio, padding interno */
.solaris-pagamento-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 12px 10px;
    border: 1px solid var(--color-grey);
    border-radius: 10px;
}

.solaris-pagamento-card__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solaris-pagamento-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-pagamento-card__desc {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-text-inactive);
}

/* Blocco investimento della card pagamento: riga "label + totale" e sotto, in piccolo,
   l'importo al netto della detrazione. */
.solaris-pagamento-card__investimento-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.solaris-pagamento-card__investimento-detrazione {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-text-s);
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
    white-space: nowrap;
}

    .solaris-pagamento-card__investimento-detrazione b {
        font-weight: 700;
        color: var(--color-text-black);
    }

.solaris-pagamento-card__investimento {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.solaris-pagamento-card__investimento-label {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 16px;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-pagamento-card__investimento-amount {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
}

.solaris-pagamento-card__divider {
    height: 0;
    border: none;
    border-top: 1px dashed var(--color-grey);
    margin: 0;
}

.solaris-pagamento-card__caption {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 14px;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}
/* Piano versamento — 3 quote inline (30% Alla firma | 60% Pre-installazione | 10% A fine lavori) */
.solaris-piano-versamento {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.solaris-piano-versamento__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.solaris-piano-versamento__quota {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary);
}

.solaris-piano-versamento__label {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-black);
}
/* Riga "Importo Investimento  €X" / "Rata  €N/mese" / etc. */
.solaris-pagamento-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.solaris-pagamento-card__row-label {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-black);
}

.solaris-pagamento-card__row-value {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-dark);
}

.solaris-pagamento-card__rata-aux {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-inactive);
    margin-left: 4px;
}

.solaris-pagamento-card__info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 8px;
    background-color: rgba(58, 139, 104, 0.05);
    border-radius: 6px;
    font-family: var(--ff-body);
    font-size: 14px;
}

.solaris-pagamento-card__info-row-label {
    color: var(--color-text-inactive);
}

.solaris-pagamento-card__info-row-value {
    color: var(--color-text-black);
    font-weight: 600;
}

.solaris-pagamento-card__disclaimer {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-inactive);
}

/* ===== Componenti dell'impianto (Figma 300:1785 desktop / 260:421 mobile) =====
   Card wrapper bianca con border + heading. Padding desktop 32px 16px / mobile 20px 16px.
   Mobile: stack verticale, gap 16px tra card. Desktop: 2-col, gap-y 24px. */
.solaris-componenti-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 20px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-componenti-card {
        padding: 32px 16px;
        align-items: center;
    }
}

/* Heading interno alla card: barra verde + H2 (Space Grotesk Bold 28/24).
   Allineato agli altri green-bar titles del configuratore. */
.solaris-componenti-card__title {
    margin: 0;
    position: relative;
    /*padding-left: 14px;*/
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    width: 100%;
}
/* Barra verde: vedi regola consolidata su .solaris-section__title::before. */

/* Grid: mobile stack gap 16, desktop 2-col flex-wrap justify-between gap-y 24
   (Figma usa flex-wrap+justify-between, le card hanno width fissa 538px — usiamo
   calc(50% - 16px) per replicare il comportamento con gap-x fluido). */
.solaris-componenti-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-componenti-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 24px;
        column-gap: 24px;
    }
}

/* Card singola componente — orizzontale: body (label+value) a sinistra, qty a destra. */
.solaris-componente-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-componente-card {
        width: calc(50% - 12px);
    }
}

.solaris-componente-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.solaris-componente-card__label {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-inactive);
    line-height: 1.2;
    text-transform: uppercase;
}

.solaris-componente-card__value {
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-text-black);
    line-height: 1.4;
}

.solaris-componente-card__qty {
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-text-black);
}

/* ===== "Prevedi nuovi consumi?" card (Figma 300:1860 / 262:13464) =====
   Card bianca con border grey, padding 20×16, gap 32px tra blocchi, items center.
   Heading interno (titolo + sottotitolo), tip box, lista checkbox, CTA tertiary. */
.solaris-consumi-futuri-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 20px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}

/* Heading: titolo (barra verticale 4×18 verde + Space Grotesk Medium 20→24px) + subtitle */
.solaris-consumi-futuri-card__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.solaris-consumi-futuri-card__title {
    margin: 0;
    position: relative;
    /*padding-left: 14px;*/
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    width: 100%;
}
/* Barra verde: vedi regola consolidata su .solaris-section__title::before. */
.solaris-consumi-futuri-card__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-inactive);
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-consumi-futuri-card__subtitle {
        font-size: 16px;
    }
}

/* ===== Lista checkbox consumi futuri (gap 24px tra righe) ===== */
.solaris-consumi-futuri {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Nota "valori stimati": agganciata alla lista, quindi il gap 24px della lista
   viene ridotto a 8px per tenerla visivamente legata all'ultima riga. */
.solaris-consumi-futuri__nota {
    margin: -16px 0 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-text-s);
    line-height: 1.4;
    color: var(--color-text-inactive);
    width: 100%;
    font-style: italic;
}

/* ===== Tip box (Figma 323:13149) — bg bianco, border primary + halo verde =====
   Stile coerente con la card "consigliata" (border-color + box-shadow halo 4px).
   Icona charge.svg 32×32 verde. */
.solaris-tip-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(58, 139, 104, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.solaris-tip-box__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .solaris-tip-box__icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-tip-box__text {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-black);
}

    .solaris-tip-box__text em {
        font-weight: 400;
        font-style: italic;
    }

/* ===== CTA "Tertiary" (Ricalcola) — Figma 263:13838 — bg accent giallo, label bianca =====
   Padding 14px 64px, gap 12px, icona reload.svg 14×14, Inter SemiBold 16px. */
.solaris-cta-tertiary.mud-button-root,
.solaris-cta-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 64px;
    background-color: var(--color-accent);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    text-transform: none;
}
    /* MudButton avvolge i children in `.mud-button-label`: il gap dichiarato sul button
   non si propaga ai figli interni, va replicato sul wrapper interno. */
    .solaris-cta-tertiary .mud-button-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: none;
        transition: background-color 0.15s ease-out;
    }

    .solaris-cta-tertiary.mud-button-root:hover:not(:disabled),
    .solaris-cta-tertiary:hover:not(:disabled) {
        background-color: #e69605;
        color: var(--color-text-white);
        box-shadow: none;
    }

    .solaris-cta-tertiary.mud-button-root:disabled,
    .solaris-cta-tertiary:disabled {
        opacity: 0.6;
        background-color: var(--color-accent);
        color: var(--color-text-white) !important;
    }

.solaris-cta-tertiary__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: currentColor;
}

    .solaris-cta-tertiary__icon svg {
        width: 100%;
        height: 100%;
    }

/* ===== Richiesta preventivo finale — Figma 300:2123 desktop / 349:835 mobile.
   Card bianca con border primary + halo verde (stesso pattern di tip-box e card consigliata).
   Mobile: padding 32×16. Desktop: padding 32×128 con gap 32px tra blocchi. ===== */
.solaris-richiesta-finale {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(58, 139, 104, 0.1);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .solaris-richiesta-finale {
        padding: 32px 128px;
    }
}

/* Sun accent in alto a destra (Figma — top:0 right:0) */
.solaris-richiesta-finale__sun {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    pointer-events: none;
}

/* Heading: eyebrow "Cosa succede ora?" + titolo grande */
.solaris-richiesta-finale__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.solaris-richiesta-finale__eyebrow {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.solaris-richiesta-finale__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-text-black);
}

@media (min-width: 769px) {
    .solaris-richiesta-finale__title {
        font-size: 24px;
    }
}

/* Body: paragrafo descrittivo, italic+strong inline */
.solaris-richiesta-finale__body {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-inactive);
    text-align: center;
}

    .solaris-richiesta-finale__body strong {
        font-weight: 700;
        color: var(--color-text-inactive);
    }

@media (min-width: 769px) {
    .solaris-richiesta-finale__body {
        font-size: 16px;
    }
}

/* CTA "Ottieni preventivo" — verde primary, full-width mobile, padding orizzontale alto desktop */
.solaris-richiesta-finale__cta.mud-button-root,
.solaris-richiesta-finale__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    transition: background-color 0.15s ease-out;
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-richiesta-finale__cta.mud-button-root,
    .solaris-richiesta-finale__cta {
        padding: 16px 256px;
        width: auto;
    }
}

.solaris-richiesta-finale__cta.mud-button-root:hover:not(:disabled),
.solaris-richiesta-finale__cta:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
}

/* Footer: claims (sole + testo) + divisore tratteggiato + disclaimer italic.
   Mobile: claims in colonna; Desktop: claims in riga gap 48px. */
.solaris-richiesta-finale__benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.solaris-richiesta-finale__benefits-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 8px;
}

@media (min-width: 769px) {
    .solaris-richiesta-finale__benefits-row {
        flex-direction: row;
        gap: 48px;
    }
}

.solaris-richiesta-finale__benefit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-inactive);
    text-align: center;
}

.solaris-richiesta-finale__benefit-icon {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .solaris-richiesta-finale__benefit-icon svg {
        width: 100%;
        height: 100%;
    }

.solaris-richiesta-finale__benefits-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px dashed var(--color-grey);
    margin: 0;
}

.solaris-richiesta-finale__disclaimer {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-style: italic;
    font-size: 10px;
    line-height: 1.3;
    color: var(--color-text-inactive);
    text-align: center;
    width: 100%;
}

/* ============================================================
   Dialog "Genera il tuo preventivo" — Figma 340:629 desktop / 349:896 mobile
   ============================================================ */

/* Paper del MudDialog: border primary + halo verde (la larghezza la regola
   MudDialog.MaxWidth+FullWidth — niente width fissa qui).
   max-height + overflow auto: mobile assicura scroll quando il contenuto
   supera la viewport (sostituisce l'overflow:hidden che troncava il form). */
.solaris-dialog-richiesta.mud-dialog,
.mud-dialog.solaris-dialog-richiesta {
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(58, 139, 104, 0.1);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Reset del padding di default del DialogContent — il padding lo gestiamo
   sulla card interna per avere controllo responsive. */
.solaris-dialog-richiesta .mud-dialog-content {
    padding: 0;
    overflow: visible;
}

/* Card interna: flex column gap 40px, padding 24×16 mobile / 32 desktop */
.solaris-dialog-richiesta__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 24px 16px;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__card {
        padding: 32px;
    }
}

/* Riga dedicata alla X — contenitore separato sopra il titolo, justify-end.
   Niente posizione absolute: la X resta nel flusso e il titolo non deve
   compensare con padding-right. */
.solaris-dialog-richiesta__close-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: -28px; /* compensa il gap 40 del card così il titolo non resta troppo distante dalla X */
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__close-row {
        margin-bottom: -30px;
    }
}

.solaris-dialog-richiesta__close {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__close {
        width: 22px;
        height: 22px;
    }
}

.solaris-dialog-richiesta__close .mud-icon-root {
    font-size: inherit;
    width: 100%;
    height: 100%;
}

/* Heading: titolo center + descrizione center con strong inline */
.solaris-dialog-richiesta__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__header {
        gap: 10px;
    }
}

.solaris-dialog-richiesta__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-text-black);
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__title {
        font-size: 32px;
    }
}

.solaris-dialog-richiesta__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-inactive);
}

    .solaris-dialog-richiesta__subtitle strong {
        font-weight: 700;
        color: var(--color-text-inactive);
    }

@media (min-width: 769px) {
    .solaris-dialog-richiesta__subtitle {
        font-size: 16px;
    }
}

/* Form: mobile stack gap 32, desktop 2-col wrap gap 32 (col 1fr) */
.solaris-dialog-richiesta__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__form {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .solaris-dialog-richiesta__field {
        flex: 1 1 calc(50% - 16px);
        min-width: 0;
    }
}

.solaris-dialog-richiesta__field {
    gap: 8px; /* sovrascrive il 12px di .solaris-field per matchare Figma */
}

/* Consenso: box bordato grey con checkbox + testo */
.solaris-dialog-richiesta__consent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-grey);
    border-radius: 8px;
    background-color: var(--color-bg-element);
    cursor: pointer;
    user-select: none;
}

    .solaris-dialog-richiesta__consent .solaris-checkbox {
        border-color: var(--color-grey);
        flex-shrink: 0;
    }

        .solaris-dialog-richiesta__consent .solaris-checkbox.is-checked {
            border-color: var(--color-primary);
        }

/* Consenso non spuntato al submit: box e checkbox in stato errore */
.solaris-dialog-richiesta__consent.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgba(200, 67, 44, 0.12);
}

    .solaris-dialog-richiesta__consent.is-invalid .solaris-checkbox {
        border-color: var(--color-danger);
    }

/* Riepilogo errori in cima al form del dialog */
.solaris-dialog-richiesta__alert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid var(--color-danger);
    border-left-width: 4px;
    border-radius: 8px;
    background-color: rgba(200, 67, 44, 0.06);
    font-family: var(--ff-body);
    font-size: var(--fs-text-s);
    line-height: var(--lh-tight);
    color: var(--color-danger);
}

    .solaris-dialog-richiesta__alert strong {
        font-weight: 700;
    }

.solaris-dialog-richiesta__consent-text {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-inactive);
}

@media (min-width: 769px) {
    .solaris-dialog-richiesta__consent-text {
        font-size: 16px;
    }
}

/* CTA finale — verde primary, full-width mobile (padding 16 0 — il bottone è già
   stretch nella card), fit content desktop con padding orizzontale ampio. */
.solaris-dialog-richiesta__cta.mud-button-root,
.solaris-dialog-richiesta__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 0;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}

    .solaris-dialog-richiesta__cta.mud-button-root:hover:not(:disabled),
    .solaris-dialog-richiesta__cta:hover:not(:disabled) {
        background-color: var(--color-primary-dark);
        color: var(--color-text-white);
    }

@media (min-width: 769px) {
    .solaris-dialog-richiesta__cta.mud-button-root,
    .solaris-dialog-richiesta__cta {
        padding: 16px 256px;
        width: auto;
        align-self: center;
    }
}