/* =========================
   WIZARD (root / variables)
========================= */
.donation-wizard,
#donationWizard {
    --wizard-bg: #fff;
    --wizard-track-bg: #d9d9d9;
    --wizard-fill-bg: #111;

    --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;
}

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

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

:is(.donation-wizard, #donationWizard) .wizard-step {
    position: relative;
    height: var(--wizard-step-height);
    border-radius: 999px;
    background: var(--wizard-track-bg);
    overflow: hidden;

    /* Oculta el texto visualmente pero lo mantiene en el DOM */
    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%;
}

/* Sticky (solo en #donationWizard) */
#donationWizard .wizard-progress {
    position: sticky;
    top: var(--wizard-sticky-top, 0px);
    z-index: var(--wizard-z-progress);
    width: 100%;
    background: var(--wizard-bg);
    padding: 25px 0;
    margin: 0 0 12px;
}

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

/* =========================
   Título encima del progreso
========================= */
.wizard-progress-title {
    text-align: center;
    margin: 0 0 10px;
}

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

/* Mostrar SOLO el título del paso actual */
#donationWizard[data-step="1"] #step1Title,
#donationWizard[data-step="2"] #step2Title,
#donationWizard[data-step="3"] #step3Title,
#donationWizard[data-step="4"] #step4Title {
    display: block;
}

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

: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 {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /* “margen” visual sin romper el carrusel */
    padding: 0 var(--wizard-slide-padding-x);
    margin: 0;

    /* Evita interacciones en slides no activos */
    pointer-events: none;

    /* Mantén el comportamiento que tenías */
    overflow: visible;
}

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

/* =========================
   Navegación (Siguiente / Atrás)
========================= */
:is(.donation-wizard, #donationWizard) .wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;

    position: relative;
    z-index: var(--wizard-z-nav);
}

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

/* Mejora respuesta táctil */
:is(.donation-wizard, #donationWizard) button,
:is(.donation-wizard, #donationWizard) [data-next],
:is(.donation-wizard, #donationWizard) [data-prev] {
    touch-action: manipulation;
    padding: 0 0;
}

/* =========================
   Utilidades
========================= */
: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%;
}

/* Slide 1: “Siguiente” alineado a la derecha */
#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;
} 
}