/*
 * Forger Blocks — Estilos del checkout clásico + bloques desplegables (gz-*).
 * Encolado por auxiliares/wf-fb-checkout-styles.php en checkout y ficha de
 * producto, solo cuando el master "blocksmod" está activo.
 *
 * NOTA: este archivo es la capa visual del checkout. Mantener verbatim salvo
 * pedido explícito. Hay un selector hiper-específico (#post-1137) que solo
 * aplica al sitio origen — inocuo en otros (no matchea), candidato a generalizar.
 */

/* MOD CHECKOUT */

/* --- 4. CAMPOS DE FORMULARIO (INPUTS) --- */
/* Estilo moderno para todos los campos */
.woocommerce form .form-row {
    padding: 0;
    margin-bottom: 18px;
}
.woocommerce form .form-row label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block; /* Asegura que esté sobre el input */
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
    width: 100%;
    padding: 14px 18px !important; /* Padding consistente */
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 10px; /* Bordes más suaves */
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: auto !important; /* Importante para select2 */
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.select2-container.select2-container--open .select2-selection {
    border-color: #555555; /* Tu color oscuro */
    box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.1);
    outline: none;
}
/* Ajuste para flecha de Select2 */
.select2-container .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}
.select2-container .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

/* --- 6. TABLA DE RESUMEN --- */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fcfcfc;
    border: 1px solid #f0f0f0;
    margin-bottom: 30px;
}
.woocommerce-checkout-review-order-table thead th {
    background: #f5f5f5;
    border: none;
    padding: 15px 20px;
    font-weight: 600;
    color: #444;
}
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
}
.woocommerce-checkout-review-order-table .product-name {
    font-weight: 600;
    color: #222;
}
.woocommerce-checkout-review-order-table .product-name img {
    width: 45px;
    height: 45px;
    margin-right: 15px;
    border-radius: 8px;
    float: left;
}
.woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 500;
    color: #555;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 1.4em;
    font-weight: 700;
    color: #000;
    border-top: 2px solid #ddd;
}
.woocommerce-checkout-review-order-table tfoot .order-total small {
    font-size: 0.6em;
    font-weight: 400;
    color: #666;
    display: block; /* Mejor visualización */
}
/* Estilo para las filas de fee/shipping */
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .shipping th,
.woocommerce-checkout-review-order-table .shipping td,
.woocommerce-checkout-review-order-table .fee th,
.woocommerce-checkout-review-order-table .fee td {
    color: #333;
}
.woocommerce-checkout-review-order-table .shipping td {
    padding-bottom: 0; /* Para que los radios queden bien */
}

/* --- 5. SECCIÓN CUPÓN --- */
.woocommerce-form-coupon-toggle .woocommerce-info {
    border-top: 3px solid #555555;
    background: #fdfdfd;
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 1.1em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
form.checkout_coupon {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    margin: 20px 0 30px 0;
    border: 1px solid #eee;
}

/* --- 7. MÉTODOS DE ENVÍO (Radios) --- */
#shipping_method {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
}
#shipping_method li {
    margin-bottom: 15px;
}
#shipping_method li label {
    display: block;
    padding: 18px 20px;
    border: 2px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}
#shipping_method li input[type="radio"] {
    display: none; /* Ocultamos el radio original */
}
#shipping_method li input[type="radio"]:checked + label {
    border-color: #555555;
    background: #f8f9fa;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#shipping_method li label small {
    display: block;
    color: #666;
    font-weight: 400;
    font-size: 0.9em;
    margin-top: 4px;
}
#shipping_method li .woocommerce-Price-amount {
    font-weight: 700;
}

.cartelcheckout-mayoristas {
    padding: 15px !important; /* Corregido: minúscula */
    margin-top: 25px !important;
    margin-bottom: 0px !important;
    background-color: whitesmoke !important;
    border-radius: 15px;
    box-shadow: 0px 2px 4px 1px grey; /* Corregido: agregado punto y coma */
}
.cartelcheckout-mayoristas ul {
    margin-top: -25px !important;
    font-size: small;
}
.advertenciapreventas {
    padding: 15px !important; /* Corregido: minúscula */
    margin-top: 25px !important;
    margin-bottom: 0px !important;
    background-color: whitesmoke !important;
    border-radius: 15px;
    box-shadow: 0px 2px 4px 1px grey; /* Corregido: agregado punto y coma */
}

.payment-group p {
    margin: 0px 10px 5px 10px !important;
    padding: 10px !important; /* Corregido: removido punto y coma extra */
    border: 1px solid lightgrey !important;
    border-radius: 10px;
}

/*Check terminos y cond*/
#payment > div > div > p > label > span {
    font-size: small;
}

/* Cartel presente pedido sujeto a disponibilidad etc*/
#payment > div > div > div.woocommerce-privacy-policy-text > p {
    border: 1px solid grey;
    padding: 20px;
    border-radius: 20px;
    margin: 0px;
    zoom: 80%;
}

/* cartel forma de pago */
#payment > div:nth-child(1) {
    font-size: large;
    margin: 20px 0px 10px 0px;
    background-color: #555555;
    color: white;
    padding: 15px 0px 15px 20px;
    border-radius: 20px;
    font-weight: bold;
}

/* boton realizar pedido*/
#place_order {
    border-radius: 20px !important;
}
#post-1137 > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-73cabf67.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div.woocommerce-form-coupon-toggle > div {
    border-radius: 20px !important;
    border: 5px solid lightgrey;
}
#order_review {
    border: 10px solid lightgrey !important;
    padding: 20px;
    border-radius: 30px;
}

.checkout input {
    border-radius: 10px !important;
    padding: 0px 5px;
    margin: 0px 5px 0px 0px !important;
}
#order_review_heading {
    margin-top: 15px;
}
.woocommerce-form__label span {
    font-size: medium;
}
#customer_details > div.col-1 > div > h3 {
    font-size: medium;
}
#order_review_heading {
    margin-top: 20px !important;
    font-size: medium;
}
#payment > div:nth-child(2) > details > ul > li.wc_payment_method > label {
    padding: 0px 0px 0px 10px !important;
    border-radius: 10px;
    border: 2px solid lightgrey;
}
#payment > div:nth-child(2) > details > ul > li.wc_payment_method > label > img {
    max-width: 30px !important;
    display: none !important;
}
#payment > div:nth-child(2) > details > ul > li.wc_payment_method > label:hover {
    box-shadow: 0px 1px 0px 1px #222e3d;
}
#payment > div:nth-child(3) > details > ul > li.wc_payment_method > label {
    padding: 0px 0px 0px 10px !important;
    border-radius: 10px;
    border: 2px solid lightgrey;
}
#payment > div:nth-child(3) > details > ul > li.wc_payment_method > label > img {
    max-width: 30px !important;
    display: none !important;
}
#payment > div:nth-child(3) > details > ul > li.wc_payment_method > label:hover {
    box-shadow: 0px 1px 0px 1px #222e3d;
}
#payment > div:nth-child(4) > details > ul > li.wc_payment_method > label {
    padding: 0px 0px 0px 10px !important;
    border-radius: 10px;
    border: 2px solid lightgrey;
}
#payment > div:nth-child(4) > details > ul > li.wc_payment_method > label > img {
    max-width: 30px !important;
    display: none !important;
}
#payment > div:nth-child(4) > details > ul > li.wc_payment_method > label:hover {
    box-shadow: 0px 1px 0px 1px #222e3d;
}
#payment > div:nth-child(5) > details > ul > li.wc_payment_method > label {
    padding: 0px 0px 0px 10px !important;
    border-radius: 10px;
    border: 2px solid lightgrey;
}
#payment > div:nth-child(5) > details > ul > li.wc_payment_method > label > img {
    max-width: 30px !important;
    display: none !important;
}
#payment > div:nth-child(5) > details > ul > li.wc_payment_method > label:hover {
    box-shadow: 0px 1px 0px 1px #222e3d;
}
#payment > div > details {
    border: 2px solid darkgrey;
    border-radius: 15px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 10px 0px;
    box-shadow: 2px 2px 2px 2px lightgrey;
}
#payment > div > details:hover {
    border: 2px solid #444444;
}
#payment > div > details > summary {
    margin-bottom: 5px;
    font-weight: bold;
}
#payment > div > details > summary:hover {
    color: #444444;
}
.payment_box > div:nth-child(1) {
    border: 0px solid white !important;
}

/* === FIX BLOQUES CHECKOUT GZ === */

/* Ocultar los “basura” que solo envuelven comentarios dentro del wrapper */
#gz_checkout_blocks_wrapper > p {
    display: none;
}

/* Los generados alrededor del status dentro del heading no deben tener margen extra */
.gz-block-heading-row p {
    margin: 0;
}

/* Aseguramos que el pill se vea prolijo aunque esté dentro de un  */
.gz-block-heading-left p .gz-block-status {
    display: inline-flex;
}

/* Sacar los que WP mete al principio/fin del subtítulo del header */
.gz-header-subtitle > br:first-child,
.gz-header-subtitle > br:last-child {
    display: none;
}

/* Sacar los  que WP mete alrededor del texto del pill */
.gz-block-status > br {
    display: none;
}

/* Un pelín menos espacio debajo del título principal del bloque */
.gz-block-heading-row {
    margin-bottom: 4px;
}

@media (min-width: 1050px) {

    /* En modo 100% las tarjetas se distribuyen en fila dentro del bloque Método de envío */
    body.gz-layout-incomplete .gz-method-shipping-wrapper #shipping_method {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

    body.gz-layout-incomplete .gz-method-shipping-wrapper #shipping_method li {
        flex: 1 1 320px;
        margin: 0;
    }

    /* Mantener diseño de card del tema, pero sin que nada se estire raro */
    .gz-method-shipping-wrapper #shipping_method li label {
        width: 100% !important; /* pisa cualquier width raro heredado */
        box-sizing: border-box;
    }

    /* Nota amarilla a todo el ancho dentro del bloque Método de Envío */
    body.gz-layout-incomplete .gz-method-shipping-wrapper .gz-shipping-note {
        width: 100%;
        margin-top: 12px;
    }
}

/* === FLECHITAS BLOQUES CHECKOUT GZ === */

/* El header sigue siendo flex, pero nos aseguramos que la flecha vaya bien a la derecha */
.gz-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Contenedor de la flecha pegado al borde derecho */
.gz-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Botón redondo con la flecha */
.gz-toggle-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: 14px;
    line-height: 1;
    color: #4b5563;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .16);
    transform: rotate(0deg); /* Cerrado = flecha hacia abajo (▾) */
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


/* Abierto -> rotamos 180° (ahora se ve como flecha hacia arriba) */
.gz-collapsible-wrapper[data-open='1'] .gz-toggle-arrow {
    transform: rotate(180deg);
}

/* Un poco de feedback al pasar el mouse */
.gz-collapsible-header:hover .gz-toggle-arrow {
    background-color: #f9fafb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .22);
}

/* bloque plan canje*/

#gz-pc-box > div {
    margin-top: 30px !Important;
    border-radius: 20px !Important;
    border: 3px solid lightgrey !Important;
    background: linear-gradient(135deg,#f9fafb 0%,#abb7ff 100%) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !Important;
    overflow: hidden !Important;
    color: black !Important;
}
#gz_pc_marca {
    border-radius: 20px;
}
#gz_pc_equipo {
    border-radius: 20px !Important;
    padding: 4px;
}
#gz-pc-form > div.field.field-inline > div:nth-child(2) {
    margin-top: -4px !important;
}
#gz_pc_estado {
    border-radius: 20px;
}
#gz-pc-form > div:nth-child(5) {
    margin-top: 30px;
}

/*banner producto plan canje*/

.gz-pc-mini-banner {
    margin-bottom: 15px !important;
    max-width: 80%;
    border-radius: 20px !Important;
    border: 2px solid lightgrey !Important;
    background: linear-gradient(135deg,#f9fafb 0%,#abb7ff 100%) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !Important;
    color: black !Important;
}

@media (max-width: 1050px) {
    .gz-pc-mini-banner {
            max-width: 100%;
    }
}
@media (min-width: 1050px) {
/*weight warning product*/
#gz-product-badges-wrapper > div.gz-weight-warning {
    scale: 1;
    border-radius: 10px;
}

#gz-product-badges-wrapper > div.gz-badges-container {
        scale: 1;
    }
}
/*whatsapp plan canje*/
#gz-pc-wa-help-wrapper {
    background: none !important;
    margin-top: 20px !important;
}
#gz-pc-wa-help-wrapper > a > span.gz-pc-wa-text {
    font-size: small;
}

/* margenes form canje*/
#gz-pc-form > div.field.field-inline > div:nth-child(1) > label {
    margin-right: 15px;
}

#gz-pc-form > div.field.field-inline > div:nth-child(2) > label {
    margin-right: 15px;
}
#gz-pc-form > div:nth-child(5) > label {
    margin-right: 15px;
}
#gz-pc-form > div.field.field-inline > div:nth-child(2) {
    display: block;
    margin-top: 25px !important;
}
#gz-pc-form > div.field.field-inline > div:nth-child(1) {
    display: inline- !important;
}
#gz-pc-note {
    margin-bottom: 20px !important;
}
#gz-pc-form > div:nth-child(6) > label {
    margin-right: 10px;
}