/* Reset básico */
#payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

/* Franjas blancas para cada método */
.wc_payment_method {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: border-color 0.3s ease !important;
    list-style: none !important;
}

.wc_payment_method:hover {
    border-color: #ccc !important;
}

.wc_payment_method.selected {
    border-color: #ccc !important;
    box-shadow: 0 2px 6px rgba(204,204,204,0.2) !important;
}

/* Estilo del label (franja) */
.wc_payment_method label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Área del texto */
.wc_payment_method label > span:first-child,
.wc_payment_method label::before {
    flex: 1 !important;
    text-align: left !important;
}

/* Logo pequeño a la derecha */
.wc_payment_method label img {
    max-height: 24px !important;
    max-width: 60px !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
}

/* Radio button oculto (excepto para métodos internos) */
.wc_payment_method input[type="radio"] {
    display: none !important;
}

/* EXCEPCIÓN: Mostrar radio buttons internos de métodos de pago */
.payment_box input[type="radio"] {
    display: inline-block !important;
    margin-right: 8px !important;
    width: auto !important;
}

/* Contenido del método con padding adecuado */
.payment_box {
    display: none !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 20px !important;
    background: #f9f9f9 !important;
}

.wc_payment_method.selected .payment_box {
    display: block !important;
}

/* Reset específico para elementos p dentro de payment_box */
.payment_box p {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.payment_box p:last-child {
    margin-bottom: 0 !important;
}

/* Mejoras para los formularios internos */
.payment_box .form-row,
.payment_box .form-row-wide,
.payment_box .form-row-first,
.payment_box .form-row-last {
    margin-bottom: 12px !important;
}

.payment_box .form-row:last-child,
.payment_box .form-row-wide:last-child,
.payment_box .form-row-first:last-child,
.payment_box .form-row-last:last-child {
    margin-bottom: 0 !important;
}

/* Estilos específicos para form-row-first y form-row-last */
.payment_box .form-row-first,
.payment_box .form-row-last {
    width: 48% !important;
    display: inline-block !important;
    vertical-align: top !important;
}

.payment_box .form-row-first {
    margin-right: 4% !important;
}

.payment_box .form-row-last {
    margin-left: 0 !important;
}

.payment_box input,
.payment_box select,
.payment_box textarea {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Excepción para radio buttons internos */
.payment_box input[type="radio"] {
    width: auto !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
}

.payment_box label {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Estilos específicos para el método de efectivo PayU - ACTUALIZADOS */
.payment_box .efectivo-payment-methods {
    margin: 0 !important;
}

.payment_box .payment-method-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 15px 0 !important;
}

.payment_box .payment-method-option {
    display: block !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.payment_box .payment-method-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.payment_box .payment-method-card {
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px 10px !important;
    text-align: center !important;
    background: white !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 80px !important;
    cursor: pointer !important;
}

.payment_box .payment-method-card:hover {
    border-color: #ccc !important;
    box-shadow: 0 2px 8px rgba(204,204,204,0.15) !important;
}

.payment_box .payment-method-option input[type="radio"]:checked + .payment-method-card,
.payment_box .payment-method-card.selected {
    border-color: #1e3439 !important;
    background-color: #f8f8f8 !important;
    box-shadow: 0 2px 8px rgba(204,204,204,0.2) !important;
}

.payment_box .payment-method-option input[type="radio"]:checked + .payment-method-card .payment-name,
.payment_box .payment-method-card.selected .payment-name {
    color: #888 !important;
    font-weight: 600 !important;
}

/* Logo de pago */
.payment_box .payment-logo {
    max-width: 50px !important;
    max-height: 30px !important;
    margin-bottom: 8px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

/* Nombre del método de pago */
.payment_box .payment-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Espaciado para fieldsets */
.payment_box fieldset {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Mejoras específicas para diferentes métodos */
.payment_box .datpayment-form,
.payment_box .bank-transfer-form,
.payment_box .cash-form {
    padding: 0 !important;
    margin: 0 !important;
}

/* Contenedor especial para campos de tarjeta */
.payment_box .card-field {
    margin: 6px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

.payment_box .card-field input {
    border: none !important;
    margin: 0 !important;
    flex: 1 !important;
}

.payment_box .card-icon {
    padding: 10px !important;
    width: 30px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Mejorar espaciado de Addi */
.payment_box .addi_description_container {
    margin: 0 !important;
    padding: 15px !important;
    border-radius: 6px !important;
}

/* Estilos específicos para Sistecredito */
.payment_box #wcsistecredito-cc-form {
    margin: 15px 0 !important;
}

.payment_box #wcsistecredito-cc-form .form-row-first,
.payment_box #wcsistecredito-cc-form .form-row-last {
    width: 100% !important;
    margin-bottom: 15px !important;
}

.payment_box #wcsistecredito-cc-form select,
.payment_box #wcsistecredito-cc-form input {
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: white !important;
    margin: 0 !important;
}

.payment_box #wcsistecredito-cc-form select:focus,
.payment_box #wcsistecredito-cc-form input:focus {
    border-color: #ccc !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(204,204,204,0.2) !important;
}

/* HR específico para Sistecredito */
.payment_box hr {
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .wc_payment_method label {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .wc_payment_method label img {
        max-height: 20px !important;
        max-width: 50px !important;
    }
    
    .payment_box {
        padding: 15px !important;
    }
    
    /* Labels dentro de payment_box en móviles */
    .payment_box label {
        margin: 0 0 4px 0 !important;
        font-size: 14px !important;
    }
    
    .payment_box input,
    .payment_box select,
    .payment_box textarea {
        padding: 8px 10px !important;
        margin: 4px 0 0 0 !important;
    }
    
    /* En móviles, hacer que los campos ocupen el 100% del ancho */
    .payment_box .form-row-first,
    .payment_box .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* Grid de métodos de efectivo en móviles */
    .payment_box .payment-method-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .payment_box .payment-method-card {
        padding: 12px 8px !important;
        min-height: 70px !important;
    }
    
    .payment_box .payment-logo {
        max-width: 40px !important;
        max-height: 25px !important;
        margin-bottom: 6px !important;
    }
    
    .payment_box .payment-name {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .wc_payment_method label {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    
    .payment_box {
        padding: 12px !important;
    }
    
    /* Labels más compactos en móviles pequeños */
    .payment_box label {
        margin: 0 0 3px 0 !important;
        font-size: 13px !important;
    }
    
    .payment_box input,
    .payment_box select,
    .payment_box textarea {
        padding: 6px 8px !important;
        margin: 3px 0 0 0 !important;
    }
    
    .payment_box .form-row,
    .payment_box .form-row-wide,
    .payment_box .form-row-first,
    .payment_box .form-row-last {
        margin-bottom: 2px !important;
    }

    .payment_box .form-row label,
    .payment_box .form-row-wide label,
    .payment_box .form-row-first label,
    .payment_box .form-row-last label {
        padding: 10px 0px !important;
    }
    
    .payment_box .payment-method-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .payment_box .payment-method-card {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 15px !important;
        min-height: 50px !important;
    }
    
    .payment_box .payment-logo {
        margin-right: 15px !important;
        margin-bottom: 0 !important;
        max-width: 50px !important;
        max-height: 30px !important;
    }
    
    .payment_box .payment-name {
        align-self: center !important;
        font-size: 14px !important;
    }
}