/* ============================================================
   PASO 2 — DATOS DE USUARIO
   Funciona para cualquier formulario con clase .formulariodona
   ============================================================ */

/* ── Grid dos columnas en el contenedor del paso 2 ── */
.formulariodona [id^="gform_fields_"][id$="_2"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 24px !important;
    align-items: start !important;
}

/* ── Campos a ancho completo ── */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_11"],   /* radio particular/empresa */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_15"],   /* código postal */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_5"],    /* total (oculto) */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_22"],   /* html */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_23"],   /* método pago */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_24"],   /* stripe */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_7"],    /* consent */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_8"] {   /* comunicaciones */
    grid-column: 1 / -1 !important;
}

/* ── Campos de media columna ── */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_20"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_21"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_13"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_14"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_16"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_17"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_18"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_19"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_25"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_27"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_28"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_29"],
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_30"] {
    grid-column: auto !important;
    width: 100% !important;
}

/* ── Ocultar campo Total ── */
.formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_5"] {
    display: none !important;
}

/* ── Anular layout propio del tema orbital en los campos ── */
.formulariodona [id^="gform_fields_"][id$="_2"] .gfield {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Inputs de texto en paso 2 ── */
.formulariodona [id^="gform_page_"][id$="_2"] input[type="text"],
.formulariodona [id^="gform_page_"][id$="_2"] input[type="tel"],
.formulariodona [id^="gform_page_"][id$="_2"] input[type="email"] {
    width: 100% !important;
    border: 1.5px solid #17A8D5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #333 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.formulariodona [id^="gform_page_"][id$="_2"] input[type="text"]:focus,
.formulariodona [id^="gform_page_"][id$="_2"] input[type="tel"]:focus {
    border-color: #0F8DB5 !important;
    box-shadow: 0 0 0 3px rgba(23, 168, 213, 0.15) !important;
}

/* ── Labels de los campos en paso 2 ── */
.formulariodona [id^="gform_page_"][id$="_2"] .gfield_label {
    color: #17A8D5 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}


/* ============================================================
   RADIO PARTICULAR / EMPRESA — field _11
   ============================================================ */
.formulariodona fieldset[id^="field_"][id$="_11"] > legend {
    display: none !important;
}

.formulariodona [id^="input_"][id$="_11"].gfield_radio {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 80px !important;
    padding: 16px 0 8px !important;
    margin: 0 !important;
}

.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    grid-template-columns: unset !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 0 !important;
}

/* Icono SVG */
.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice .radio-icon {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    fill: #17A8D5 !important;
    opacity: 0.45 !important;
    transition: opacity 0.2s !important;
}

.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice.don-checked .radio-icon {
    opacity: 1 !important;
}

/* Fila radio + label */
.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice .radio-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Radio nativo */
.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #17A8D5 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Label */
.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice label {
    font-size: 15px !important;
    color: #333 !important;
    cursor: pointer !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background: none !important;
    padding: 0 !important;
    display: inline !important;
    width: auto !important;
}

.formulariodona [id^="input_"][id$="_11"].gfield_radio .gchoice label strong {
    color: #17A8D5 !important;
    font-weight: 700 !important;
}


/* ============================================================
   MÉTODO DE PAGO — field _23 (tabs estilo importes)
   ============================================================ */
.formulariodona fieldset[id^="field_"][id$="_23"] > legend {
    color: #17A8D5 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice {
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    min-height: 52px !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 8px !important;
    background: #1976C4 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    user-select: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(255,255,255,0.25) !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice input[type="radio"]:checked + label {
    background: #E63268 !important;
    border-left-color: transparent !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice input[type="radio"]:not(:checked) + label:hover {
    background: #1565A8 !important;
}

.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice:first-child label {
    border-radius: 50px 0 0 50px !important;
    border-left: none !important;
}
.formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice:last-child label {
    border-radius: 0 50px 50px 0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .formulariodona [id^="gform_fields_"][id$="_2"] {
        grid-template-columns: 1fr !important;
    }

    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_20"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_21"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_13"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_14"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_16"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_17"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_18"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_19"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_25"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_27"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_28"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_29"],
    .formulariodona [id^="gform_fields_"][id$="_2"] [id^="field_"][id$="_30"] {
        grid-column: 1 / -1 !important;
    }

    .formulariodona [id^="input_"][id$="_11"].gfield_radio {
        gap: 40px !important;
    }

    .formulariodona [id^="input_"][id$="_23"].gfield_radio {
        flex-direction: column !important;
        border-radius: 16px !important;
    }
    .formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice label {
        border-radius: 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.25) !important;
    }
    .formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice:first-child label {
        border-radius: 16px 16px 0 0 !important;
        border-top: none !important;
    }
    .formulariodona [id^="input_"][id$="_23"].gfield_radio .gchoice:last-child label {
        border-radius: 0 0 16px 16px !important;
    }
}