/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 05 2025 | 22:09:44 */
/* ========================================================================== 
   ESTILOS PERSONALIZADOS PARA MEDIOS DE PAGO - VERSIÓN 2 MEJORADA
   ========================================================================== */

/* 1. Contenedor de pago - Agregar título con estilo del "Total" */
#payment::before {
    content: "Selecciona medio de pago";
    display: block;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    margin-bottom: 16px;
    margin-top: 0;
    padding: 0;
}

/* 2. Contenedor principal de métodos de pago */
.wc_payment_methods {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 3. Cada método de pago como un botón/tarjeta */
.wc_payment_method {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 160px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    list-style: none !important;
    border: none !important;
    background: none !important;
}

/* 4. Input radio - ocultar pero mantener funcional */
.wc_payment_method .input-radio {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
}

/* 5. Label del método de pago - Estilo de botón/tarjeta */
.wc_payment_method label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 13px !important;
    height: 56px !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 6. Hover en el label */
.wc_payment_method label:hover {
    border-color: #0F7AA8 !important;
    background-color: #f5f9fc !important;
    box-shadow: 0 2px 8px rgba(15, 122, 168, 0.1) !important;
}

/* 7. Estado seleccionado - cuando el radio está checked */
.wc_payment_method .input-radio:checked + label {
    border-color: #0F7AA8 !important;
    background-color: #f5f9fc !important;
    box-shadow: 0 2px 12px rgba(15, 122, 168, 0.2) !important;
}

/* 8. Imagen del logo dentro del label */
.wc_payment_method label img {
    max-height: 28px !important;
    max-width: 80px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border: none !important;
}

/* 9. Ocultar COMPLETAMENTE el contenido del payment_box - MUY IMPORTANTE */
.payment_box {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* 10. Asegurar que el payment_box de ambos métodos no se muestre */
.payment_method_woo-mercado-pago-basic.payment_box,
.payment_method_transbank_webpay_plus_rest.payment_box {
    display: none !important;
}

.wc_payment_method > .payment_box {
    display: none !important;
}

/* 11. Forzar ocultar con !important en caso de inline styles */
div[style*="display: block"] .payment_box,
.payment_box[style*="display: block"] {
    display: none !important;
}

/* 12. Responsive - En móviles, los botones ocupan todo el ancho */
@media (max-width: 768px) {
    .wc_payment_methods {
        gap: 12px !important;
    }
    
    .wc_payment_method {
    flex: 0 1 90% !important;
    min-width: auto !important;
    margin: 0 auto !important;
}
    
    .wc_payment_method label {
        padding: 12px 14px !important;
        font-size: 13px !important;
        height: 56px !important;
        gap: 8px !important;
    }
    
    .wc_payment_method label img {
        max-height: 26px !important;
        max-width: 75px !important;
    }
}

/* 13. Responsive - En pantallas muy pequeñas */
@media (max-width: 480px) {
    .wc_payment_method label {
        padding: 10px 12px !important;
        font-size: 12px !important;
        height: 52px !important;
        gap: 6px !important;
    }
    
    .wc_payment_method label img {
        max-height: 24px !important;
        max-width: 70px !important;
    }
}

/* 14. Asegurar que el contenedor de métodos de pago tenga espacio */
.woocommerce-checkout-review-order .woocommerce-checkout-payment {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* 15. Eliminar cualquier borde residual */
#payment {
    border: none !important;
}

.wc_payment_methods,
.wc_payment_methods li {
    border: none !important;
}