/* ================================================================
   WIZARD DE DONACIÓN
   Variables globales: variables.css
   Variables locales: bloque raíz del componente
   ================================================================ */

/* ================================================================
   01. VARIABLES LOCALES
   ================================================================ */
.donation-wizard,
#donationWizard {
    --wizard-bg: var(--color-bg);
    --wizard-track-bg: #d9d9d9;
    --wizard-fill-bg: var(--color-text-main);

    --wizard-steps: 4;
    --wizard-progress-width: 80%;
    --wizard-step-height: 4px;
    --wizard-gap: 10px;
    --wizard-slide-padding-x: 15px;

    --wizard-transition-fill: 250ms ease;
    --wizard-transition-slide: 350ms ease;

    --wizard-z-progress: 5;
    --wizard-z-nav: 10;
}

/* ================================================================
   02. PROGRESO
   ================================================================ */
:is(.donation-wizard, #donationWizard) .wizard-progress {
    width: var(--wizard-progress-width);
    margin: 0 auto 16px;
}

:is(.donation-wizard, #donationWizard) .wizard-progress > ol {
    display: grid;
    grid-template-columns: repeat(var(--wizard-steps), 1fr);
    gap: var(--wizard-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.donation-wizard, #donationWizard) .wizard-step {
    position: relative;
    height: var(--wizard-step-height);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--wizard-track-bg);
    text-indent: -9999px;
    white-space: nowrap;
}

:is(.donation-wizard, #donationWizard) .wizard-step::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--wizard-fill-bg);
    transition: width var(--wizard-transition-fill);
}

:is(.donation-wizard, #donationWizard) .wizard-step.is-active::after,
:is(.donation-wizard, #donationWizard) .wizard-step.is-done::after {
    width: 100%;
}

/* Barra sticky empleada por el formulario principal */
#donationWizard .wizard-progress {
    position: sticky;
    top: var(--nav-height);
    z-index: var(--wizard-z-progress);
    width: 100%;
    margin: 0 0 12px;
    padding-bottom: 25px;
    background: var(--wizard-bg);
}

#donationWizard .wizard-progress > ol {
    width: var(--wizard-progress-width);
    margin: 0 auto;
}

/* ================================================================
   03. TÍTULO DEL PASO ACTIVO
   ================================================================ */
.wizard-progress-title {
    margin: 0 0 10px;
    text-align: center;
}

.wizard-step-title {
    display: none;
    margin: 0;
}

#donationWizard[data-step="1"] #step1Title,
#donationWizard[data-step="2"] #step2Title,
#donationWizard[data-step="3"] #step3Title,
#donationWizard[data-step="4"] #step4Title {
    display: block;
}

/* ================================================================
   04. CARRUSEL
   ================================================================ */
:is(.donation-wizard, #donationWizard) .wizard-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

:is(.donation-wizard, #donationWizard) .wizard-track {
    display: flex;
    width: 100%;
    transform: translateX(0%);
    transition: transform var(--wizard-transition-slide);
    will-change: transform;
}

:is(.donation-wizard, #donationWizard) .wizard-slide {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 var(--wizard-slide-padding-x);
    overflow: visible;
    pointer-events: none;
    visibility: hidden;
}

:is(.donation-wizard, #donationWizard) .wizard-slide.is-active {
    pointer-events: auto;
    visibility: visible;
}

/* ================================================================
   05. NAVEGACIÓN
   ================================================================ */
:is(.donation-wizard, #donationWizard) .wizard-nav {
    position: relative;
    z-index: var(--wizard-z-nav);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

:is(.donation-wizard, #donationWizard) .wizard-nav button {
    cursor: pointer;
}

:is(.donation-wizard, #donationWizard) button,
:is(.donation-wizard, #donationWizard) [data-next],
:is(.donation-wizard, #donationWizard) [data-prev] {
    padding: 0;
    touch-action: manipulation;
}

/* ================================================================
   06. REGLAS ESPECÍFICAS POR PASO
   ================================================================ */
:is(.donation-wizard, #donationWizard) .hide {
    display: none !important;
}

#donationWizard .wizard-slide.is-active[data-step="3"] > .radio-group.radio-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#donationWizard .wizard-slide[data-step="3"] .radio-wrapper {
    width: 100%;
}

#donationWizard .wizard-slide[data-step="1"] .wizard-nav {
    justify-content: flex-end;
}

@media (max-width: 556px) {
    #donationWizard .wizard-slide.is-active[data-step="1"] > .radio-group {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}