/**
 * Offerte Switcher - Stili
 * Design basato su energy-toggle: switch centrale con knob scorrevole
 */

.reset-offerte-switcher-widget {
    width: 100%;
}

.reset-offerte-switcher-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* ===== CONTAINER (energy-toggle) ===== */
.reset-offerte-switcher {
    width: 300px;
    height: 52px;
    padding: 8px 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(70, 63, 180, 0.55);
    backdrop-filter: blur(12px);
    transition: 0.3s;
}

/* ===== OPZIONI (testi) ===== */
.reset-switch-option {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: 0.3s;
    cursor: pointer;
}

.reset-switch-option.left {
    color: rgba(255, 255, 255, 0.45);
}

.reset-switch-option.right {
    color: white;
}

/* stato SOLO LUCE (left-active) */
.reset-offerte-switcher.left-active .reset-switch-option.left {
    color: #eef0d6;
}

.reset-offerte-switcher.left-active .reset-switch-option.right {
    color: rgba(255, 255, 255, 0.35);
}

/* stato LUCE+GAS (tab-2-active) - inverti i colori testo */
.reset-offerte-switcher.tab-2-active .reset-switch-option.left {
    color: rgba(255, 255, 255, 0.35);
}

.reset-offerte-switcher.tab-2-active .reset-switch-option.right {
    color: #eef0d6;
}

/* ===== SWITCH (track centrale) ===== */
.reset-switch-track {
    width: 60px;
    height: 36px;
    border-radius: 999px;
    position: relative;
    transition: 0.35s;
    background: #19bfc2; /* LUCE+GAS default */
    cursor: pointer;
}

/* stato SOLO LUCE */
.reset-offerte-switcher.left-active .reset-switch-track {
    background: #f5ab3b;
}

/* ===== KNOB (cerchio con icona) ===== */
.reset-switch-knob {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dfe2c9;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* i click passano al track per il toggle */
}

/* posizione destra (LUCE+GAS) */
.reset-offerte-switcher.tab-2-active .reset-switch-knob {
    left: 24px;
}

/* ===== ICONE ===== */
.reset-switch-knob .reset-switch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-switch-knob .reset-switch-icon svg {
    width: 18px;
    height: 18px;
    stroke: #5b4fe9;
    stroke-width: 2.5;
    fill: none;
}

/* Fallback per icone FontAwesome */
.reset-switch-knob .reset-switch-icon i {
    color: inherit;
}

.reset-switch-knob .reset-cursor-icon-1 {
    color: #5b4fe9;
}

.reset-switch-knob .reset-cursor-icon-1 svg {
    stroke: #5b4fe9;
    fill: none;
}

.reset-switch-knob .reset-cursor-icon-2 {
    color: #19bfc2;
}

.reset-switch-knob .reset-cursor-icon-2 svg {
    stroke: #19bfc2;
    fill: none;
}

/* Mostra icona tab 1 quando SOLO LUCE, icona tab 2 quando LUCE+GAS */
.reset-switch-knob .reset-cursor-icon-2 {
    display: none;
}

.reset-offerte-switcher.tab-2-active .reset-switch-knob .reset-cursor-icon-1 {
    display: none;
}

.reset-offerte-switcher.tab-2-active .reset-switch-knob .reset-cursor-icon-2 {
    display: flex;
}

/* Contenuto tab */
.reset-offerte-switcher-content {
    position: relative;
    min-height: 100px;
}

.reset-switch-content {
    display: none;
    animation: reset-switcher-fade-in 0.3s ease;
}

.reset-switch-content.active {
    display: block;
}

@keyframes reset-switcher-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== Animazione ingresso card al cambio tab (da basso verso alto) ===== */
.reset-switch-content .animate-target {
    opacity: 0;
    transform: translateY(20px);
}

.reset-switch-content .animate-target.show {
    animation: reset-card-fade-up 500ms cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

@keyframes reset-card-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Placeholder in editor */
.reset-switcher-placeholder {
    padding: 2rem;
    text-align: center;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: 8px;
    color: #666;
}

.reset-switcher-placeholder p {
    margin: 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 480px) {
    .reset-offerte-switcher {
        width: 100%;
        max-width: 300px;
        padding: 8px 22px;
    }

    .reset-switch-option {
        font-size: 14px;
    }

    .reset-switch-track {
        width: 52px;
        height: 32px;
    }

    .reset-switch-knob {
        width: 32px;
        height: 32px;
    }

    .reset-offerte-switcher.tab-2-active .reset-switch-knob {
        left: 20px;
    }
}