/**
 * Estilos para personalizar el selector de variaciones
 * Compatibilidad con navegadores: IE11+, Chrome, Firefox, Safari, Edge
 */

/* Ocultar elementos del selector de tipo de pago - Compatible con todos los navegadores */
body.single-product .variations tr select[id="tipo-de-pago"],
body.single-product .variations tr select[name="attribute_tipo-de-pago"],
body.single-product .variations tr label[for="tipo-de-pago"],
body.single-product .form-row.form-row-wide select[name*="tipo_pago"],
body.single-product .form-row.form-row-wide select[name^="tipo_pago"] {
    display: none !important;
}

/* Ocultar contenedores de selector - Compatible con la mayoría de navegadores */
body.single-product .variations tr td.value select[id="tipo-de-pago"],
body.single-product .variations tr td.label label[for="tipo-de-pago"],
body.single-product .variations .form-row.form-row-wide:has(select[id="tipo-de-pago"]) {
    display: none !important;
}

/* Ocultar TODOS los selects de variaciones y el precio de la variación
   únicamente en productos variable-subscription */
body.single-product.product-type-variable-subscription .variations_form .variations,
body.single-product.product-type-variable-subscription .woocommerce-variation-price,
body.single-product.product-type-variable-subscription .woocommerce-variation.single_variation .price,
body.single-product.product-type-variable-subscription .woocommerce-variation-description {
    display: none !important;
}

/* El contenedor .woocommerce-variation puede dejar hueco: ocultarlo también */
body.single-product.product-type-variable-subscription .single_variation_wrap .woocommerce-variation {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Estilos para los radio buttons personalizados - Solo para la página de producto */
body.single-product .pay-radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Alinear verticalmente radios e icono */
    gap: 16px;
    margin-bottom: 24px;
    width: 100%; /* Asegurar que ocupe todo el ancho disponible */
    max-width: 100%; /* Limitar el ancho máximo */
    box-sizing: border-box; /* Incluir padding y bordes en el ancho */
}

/* Asegurar también por ID explícito */
#subscription-radio-group { align-items: center; }

/* Botón/ícono de información junto a los radios */
.pay-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-decoration: none !important;
}
.pay-info-button:hover svg circle { fill: #BF2025; stroke: #BF2025; }
.pay-info-button:hover svg text { fill: #FFFFFF; }
.pay-info-button:focus { outline: 2px solid #BF2025; outline-offset: 2px; border-radius: 50%; }

body.single-product .pay-radio-label {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #BF2025;
    border-radius: 16px;
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    min-width: 180px;
    box-sizing: border-box; /* Asegurar que el padding no afecte al ancho */
    margin: 0 0 10px 0; /* Espacio entre radio buttons */
    flex: 0 1 auto; /* Evitar estiramiento */
}

/* Estilo para radio button no seleccionado */
body.single-product .pay-radio-label:not(.selected) {
    border-color: rgba(191, 32, 37, 0.3);
}

/* Estilo para radio button seleccionado */
body.single-product .pay-radio-label.selected,
body.single-product .pay-radio-label input:checked + .pay-label {
    border-color: #BF2025;
    background: rgba(191, 32, 37, 0.05);
}

body.single-product .pay-radio-label .pay-icon {
    margin-right: 12px;
}

body.single-product .pay-radio-label .pay-label,
body.single-product .pay-radio-label .pay-info {
    color: #BF2025;
    margin-right: 12px;
}

body.single-product .pay-radio-label .pay-label {
    font-weight: 600;
}

body.single-product .pay-radio-label .pay-info {
    font-weight: 500;
}

/* Icono de verificación */
body.single-product .pay-radio-label .pay-check {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

body.single-product .pay-radio-label input[type=radio] {
    display: none;
}

/* Mostrar check cuando está seleccionado */
body.single-product .pay-radio-label.selected .pay-check,
body.single-product .pay-radio-label input:checked ~ .pay-check {
    display: inline-block;
}

/* Colores para los iconos SVG */
body.single-product .pay-radio-label .pay-icon svg rect {
    fill: rgba(191, 32, 37, 0.2);
}

/* Asegurar que el layout de WooCommerce no se rompa */
body.single-product.woocommerce div.product form.cart .variations {
    width: 100%;
    display: table;
    margin-bottom: 1em;
}

/* Hacer que el contenedor de cantidad+botón permita envoltura */
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

/* Poner cantidad y botón en la misma línea */
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button .quantity {
    order: 0;
    flex: 0 0 auto;
    margin: 0 !important;
}
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
    order: 1;
    flex: 0 0 auto; /* no ocupar todo el ancho disponible */
    width: auto !important; /* evitar 100% del tema */
    min-width: 220px; /* tamaño visual consistente */
    padding: 16px 36px;
    font-size: 18px;
}

/* Colocar el bloque de detalle en una fila completa por encima del botón y cantidad */
#payment-details-block.payment-summary-block {
    order: -1;
    flex: 1 1 100%;
    margin: 8px 0 12px !important;
}

/* Ajustes visuales compactos en el bloque */
#payment-details-block.payment-summary-block h4 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
}
#payment-details-block.payment-summary-block li {
    margin-bottom: 6px !important;
    padding-left: 22px !important;
}

/* Estilo destacado para Pago único: precio + etiqueta grandes con énfasis en rojo */
#payment-details-block #pago-unico-precio {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #BF2025;
    font-size: 48px;
    line-height: 72px; /* especificación para precio actual */
    font-weight: 600;
}

#payment-details-block #pago-unico-precio del.price-regular {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #101828 !important; /* rgb(16,24,40) */
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    margin-right: 8px;
}

/* CTA hero: alinear Matricularme y Programa */
.elementor-element-9340c15 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.elementor-element-9340c15 > .elementor-widget {
    margin: 0 !important;
    flex: 0 0 auto;
}

.elementor-element-9340c15 .elementor-button-wrapper {
    margin: 0 !important;
}

.elementor-element-9340c15 .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border: 1px solid var(--e-global-color-400715c);
    border-radius: 8px;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--e-global-color-400715c);
    background-color: var(--e-global-color-b1e20a1);
    width: auto;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-element-9340c15 .elementor-button:hover,
.elementor-element-9340c15 .elementor-button:focus {
    background-color: var(--e-global-color-400715c);
    color: #fff;
}

.elementor-element-9340c15 form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 0 !important;
}

.elementor-element-9340c15 form.cart .quantity {
    display: none;
}

.elementor-element-9340c15 .monti-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

.elementor-element-78194013 {
    display: none !important;
}

.elementor-element-fc43ea7 {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

.elementor-element-9340c15 .monti-cta-buttons ~ .elementor-button-wrapper {
    margin-left: 0;
}

.elementor-element-9340c15 .monti-cta-buttons .single_add_to_cart_button {
    min-width: 220px;
    padding: 16px 32px;
    font-size: 18px;
    margin: 0 !important;
    order: 1;
}

.elementor-element-9340c15 .monti-cta-buttons .monti-program-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border: 1px solid var(--e-global-color-400715c);
    border-radius: 8px;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--e-global-color-b1e20a1);
    color: var(--e-global-color-400715c);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    order: 2;
}

.elementor-element-9340c15 .monti-cta-buttons .monti-program-button svg {
    width: 20px;
    height: 20px;
}

body.single-product.product_cat-cursos-introductorios form.cart .quantity {
    display: inline-flex !important;
}

body.single-product.product_cat-cursos-introductorios form.cart .quantity .qty {
    min-width: 3.5rem;
    text-align: center;
}

.elementor-element-9340c15 .monti-cta-buttons .monti-program-button svg path {
    fill: currentColor;
}

.elementor-element-9340c15 .monti-cta-buttons .monti-program-button:hover,
.elementor-element-9340c15 .monti-cta-buttons .monti-program-button:focus {
    background-color: var(--e-global-color-400715c);
    color: #fff;
}

#payment-details-block #pago-unico-precio ins.price-sale {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #BF2025 !important; /* precio actual en rojo */
    font-size: 48px; /* según especificación */
    line-height: 72px;
    font-weight: 600; /* jerarquía fuerte */
    text-decoration: none; /* evitar subrayado */
    background: none;
    border: 0;
    margin-left: 6px;
}

/* Asegurar que todos los ☑ del bloque usen el mismo rojo */
#payment-details-block li > span:first-child { color: #BF2025 !important; }

/* Sin sangría para la fila de pago único (no tiene icono) */
#payment-details-block #pago-unico-detail { padding-left: 0 !important; }

/* Hacer el precio tachado un poco más pequeño - ajustado por especificación (24px) */

/* Responsive: reducir tamaño en móvil */
@media (max-width: 480px) {
  #payment-details-block #pago-unico-precio {
    font-size: 32px;
  }
  #payment-details-block.payment-summary-block { padding: 8px 10px; margin: 6px 0 10px !important; }
  #payment-details-block.payment-summary-block h4 { font-size: 14px !important; }
  #payment-details-block.payment-summary-block li { margin-bottom: 4px !important; }

  body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
    min-width: 0;
    width: 100% !important;
  }
}

body.single-product.woocommerce div.product form.cart div.quantity,
body.single-product.woocommerce div.product form.cart .button {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.pay-radio-label .pay-icon svg path {
    stroke: #BF2025;
}

.pay-radio-label .pay-check svg rect {
    fill: #BF2025;
}

/* Regla específica para navegadores modernos que soportan :has() */
@supports selector(:has(.foo)) {
    .pay-radio-label:has(:checked) {
        border-color: #BF2025 !important;
        background: rgba(191, 32, 37, 0.05) !important;
    }

    .pay-radio-label:has(:checked) .pay-check {
        display: inline-block !important;
    }
    
    .variations tr:has(select#tipo-de-pago),
    .variations tr:has(label[for="tipo-de-pago"]) {
        display: none !important;
    }

    /* Si hay radios de suscripción en la página, ocultar la tabla de variaciones */
    body.single-product:has(#subscription-radio-group) .variations_form .variations,
    body.single-product:has(.pay-radio-group) .variations_form .variations {
        display: none !important;
    }
}

/* Offset adicional para ancla de modalidades de pago */
#modalidad_pago {
    scroll-margin-top: 120px;
}