/* ==========================================
   WooCommerce Dynamic Payments - Frontend Styles
   
   IMPORTANT: Per-card font-size and color are 
   applied via dynamic CSS in wp_head() with 
   !important to override Woodmart/Elementor.
   This file only handles layout and structure.
   ========================================== */

/* Container */
.wcdp-payment-options {
    margin: 15px 0 20px 0;
    padding: 15px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    clear: both;
    /* Prevent Woodmart/Elementor from overriding base display */
    display: block !important;
    visibility: visible !important;
}

/* Single product context */
body.single-product .wcdp-payment-options.wcdp-context-single {
    margin: 10px 0 20px 0;
}

/* Loop/shop context */
.wcdp-payment-options.wcdp-context-loop {
    margin: 10px 0 5px 0;
    padding: 10px 0;
    border-top: 1px dashed #ddd;
    border-bottom: none;
}

/* Transferencia */
.wcdp-transferencia {
    margin: 10px 0;
    padding: 8px 12px;
    background: rgba(39, 174, 96, 0.08);
    border-radius: 6px;
    font-weight: 600;
    border-left: 4px solid currentColor;
    line-height: 1.4;
}

.wcdp-transferencia .woocommerce-Price-amount {
    font-weight: 700;
}

.wcdp-transferencia-texto {
    font-weight: normal;
    font-size: 0.9em;
    opacity: 0.9;
}

/* Tarjeta option */
.wcdp-tarjeta-opcion {
    margin: 8px 0;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid currentColor;
    line-height: 1.4;
}

.wcdp-tarjeta-opcion .woocommerce-Price-amount {
    font-weight: 700;
}

/* ==========================================
   Responsive base layout adjustments
   (colors and font-sizes come from dynamic CSS)
   ========================================== */
@media (max-width: 768px) {
    .wcdp-payment-options {
        margin: 10px 0;
        padding: 10px 0;
    }
    
    .wcdp-transferencia,
    .wcdp-tarjeta-opcion {
        padding: 6px 10px;
        margin: 6px 0;
    }
}

/* ==========================================
   Woodmart compatibility
   DO NOT hardcode font-size/color here -
   they come from dynamic CSS in wp_head()
   ========================================== */

/* Woodmart carousel/slider - layout only */
.woodmart-product-slider .wcdp-payment-options,
.wd-products-element .wcdp-payment-options,
.woodmart-hover-base .wcdp-payment-options {
    padding: 8px 0;
    margin: 8px 0 4px 0;
}

.woodmart-product-slider .wcdp-transferencia,
.woodmart-hover-base .wcdp-transferencia,
.wd-products-element .wcdp-transferencia {
    padding: 5px 8px;
    margin: 5px 0;
}

.woodmart-product-slider .wcdp-tarjeta-opcion,
.woodmart-hover-base .wcdp-tarjeta-opcion,
.wd-products-element .wcdp-tarjeta-opcion {
    padding: 4px 8px;
    margin: 4px 0;
}

/* ==========================================
   Elementor compatibility
   ========================================== */
.elementor-widget-woocommerce-products .wcdp-payment-options,
.elementor-widget-wc-products .wcdp-payment-options,
.elementor-element .wcdp-payment-options {
    padding: 8px 0;
}

/* Prevent Elementor global font/color overrides on our elements */
.elementor-widget-woocommerce-products .wcdp-transferencia,
.elementor-widget-woocommerce-products .wcdp-tarjeta-opcion,
.elementor-widget-wc-products .wcdp-transferencia,
.elementor-widget-wc-products .wcdp-tarjeta-opcion,
.elementor-element .wcdp-transferencia,
.elementor-element .wcdp-tarjeta-opcion {
    /* Reset Elementor typography overrides */
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-style: normal !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* ==========================================
   Quick view modal support (Woodmart)
   ========================================== */
.mfp-content .wcdp-payment-options,
.wd-quick-view .wcdp-payment-options {
    margin: 10px 0;
    padding: 10px 0;
}