/* Ocultar medios de pago por defecto hasta validación JS */
#payment {
    display: none;
}

/* CLS prevention: smooth min-height release after payment method reload */
#order_review {
    transition: min-height 0.3s ease-out;
}

/* ── BlockUI Spinner ─────────────────────────────────────────────
 * Flatsome theme already provides a scoped 30px spinner via ::before
 * for cart, checkout review, and mini-cart overlays (flatsome-shop.css).
 *
 * We ONLY add the big custom spinner + "Procesando tu pedido..." text
 * during checkout FORM SUBMISSION (Place Order button).
 * WC blocks `form.checkout` directly on submit (checkout.js:blockOnSubmit).
 * update_checkout blocks CHILD elements (.woocommerce-checkout-payment etc.)
 * so `form.checkout >` does NOT match during country/email changes.
 * ────────────────────────────────────────────────────────────────── */
form.checkout > .blockUI.blockOverlay {
    background-color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    background-image: none !important;
}

form.checkout > .blockUI.blockOverlay::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

form.checkout > .blockUI.blockOverlay::before {
    content: "Procesando tu pedido...";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 40px);
    font-family: "Lato", sans-serif;
    font-size: 16px;
    color: #555;
    font-weight: normal;
    z-index: 10000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Forzar ocultamiento de Stripe Express si JS lo requiere */
.dix-force-hidden {
    display: none !important;
}

/* ======================================
   Trust Badges — Pill style (Alt C)
   Positioned below #order_review box
   ====================================== */
.dg-trust-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.dg-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 4px 12px 4px 4px;
    font-size: .75em;
    color: #555;
}
.dg-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
}
.dg-trust-icon svg {
    width: 13px;
    height: 13px;
}

/* ======================================
   Checkout Product Thumbnails (portrait)
   Source: woocommerce_thumbnail 245x300 → display 50px width (5x retina)
   Flex layout: image column + text column
   ====================================== */
.dg-checkout-product {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.dg-checkout-thumb {
    width: 50px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    background: #f5f5f5;
    flex-shrink: 0;
}
.dg-checkout-pname {
    flex: 1;
    min-width: 0;
}

/* Collapse the stray   text node that WC review-order.php appends
   after the filtered product name div. Without this, the   creates
   a ~20px line box below .dg-checkout-product, preventing true vertical
   centering of the flex container within the td. */
.woocommerce-checkout-review-order-table .cart_item td.product-name {
    vertical-align: middle;
    line-height: 0;
}
.woocommerce-checkout-review-order-table .cart_item td.product-name dl.variation {
    line-height: 1.5;
}
.woocommerce-checkout-review-order-table .product-total {
    vertical-align: middle;
}

/* ======================================
   Order Details Product Thumbnails (order-received)
   Same flex layout as checkout review table above.
   ====================================== */
.woocommerce-table--order-details .order_item td.product-name {
    vertical-align: middle;
    line-height: 0;
    text-align: left;
}
.woocommerce-table--order-details .order_item td.product-name dl {
    line-height: 1.5;
}
.woocommerce-table--order-details .order_item td.product-total {
    vertical-align: middle;
}

/* ======================================
   Mobile Progress Bar — Icon steps (Alt C)
   Hidden on desktop, shown <550px
   ====================================== */
.dg-mobile-progress {
    display: none;
}
@media (max-width: 549px) {
    .dg-mobile-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px 16px;
        margin-bottom: 10px;
    }
    .woocommerce-cart .dg-mobile-progress {
        border-bottom: 2px solid #ddd;
        padding-bottom: 24px;
        margin-bottom: 16px;
    }
}
.dg-mobile-progress .dg-step-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.dg-mobile-progress .dg-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dg-mobile-progress .dg-icon-circle.done { background: #7a9c59; }
.dg-mobile-progress .dg-icon-circle.active { background: #446084; }
.dg-mobile-progress .dg-icon-circle.pending { background: #eee; }
/* Order-received: "Listo" step turns green (success) instead of blue (in-progress) */
.woocommerce-order-received .dg-mobile-progress .dg-icon-circle.active { background: #7a9c59; }
.dg-mobile-progress .dg-icon-circle svg { width: 16px; height: 16px; }
.dg-mobile-progress .dg-step-label {
    font-size: .58em;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #888;
    font-weight: 600;
}
.dg-mobile-progress .dg-step-label.active-label { color: #000c1b; }
.dg-mobile-progress .dg-step-line {
    flex: 0 0 40px;
    height: 2px;
    background: #ddd;
    margin: 0 -4px;
    margin-bottom: 16px;
}
.dg-mobile-progress .dg-step-line.done-line { background: #7a9c59; }

/* ======================================
   Cart Page — Hide totals heading & WOOCS price
   ====================================== */
.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .cart_totals > table > thead {
    display: none;
}
.woocommerce-cart .woocs_cart_item_price {
    display: none;
}

/* ======================================
   Order-Received: Table styles
   Inherits Flatsome .shop_table defaults (3px border on thead/total,
   15px cell padding, 85% tfoot th). Only overrides: title + mobile hide.
   ====================================== */

/* Card wrapper: border + padding */
.woocommerce-order-received .woocommerce-order-details {
    border: 2px solid #333;
    border-radius: 0;
    padding: 20px 24px;
}
/* Title: match checkout h3, with bottom border as divider */
.woocommerce-order-received .woocommerce-order-details__title {
    font-size: 1.1em;
    font-weight: bolder;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ececec;
    margin-bottom: 16px;
}
/* Product name spans full row via colspan in template */
/* Mobile adjustments */
@media (max-width: 549px) {
    /* Hide mobile progress steps on thank-you page */
    .woocommerce-order-received .dg-mobile-progress {
        display: none;
    }
}

/* ======================================
   Order-Received: Email confirmation icon + centered text
   ====================================== */
.dg-ty-email-notice {
    text-align: center;
    padding: 12px 0 36px;
}
.dg-ty-email-notice .dg-ty-email-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #edf5e6;
    margin-bottom: 10px;
}
.dg-ty-email-notice .dg-ty-email-icon svg {
    width: 24px;
    height: 24px;
}
.dg-ty-email-notice p {
    font-size: 1em;
    color: #4a7a2e;
    margin: 0;
    line-height: 1.5;
}

/* ======================================
   Order-Received: Desktop 3-column layout (centered content)
   ====================================== */
@media (min-width: 850px) {
    .woocommerce-order-received .woocommerce-order .dg-ty-content-col {
        width: 66.66%;
        margin: 0 auto;
        float: none;
    }
}

/* ======================================
   Order-Received: Zenrise bank data — match order-details card style
   ====================================== */
.woocommerce-order-received #zenrise-transfer-bank-data {
    background: #fff;
    border: 2px solid #333;
    border-radius: 0;
    padding: 20px 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.woocommerce-order-received #zenrise-transfer-bank-data h2 {
    font-size: 1.1em;
    font-weight: bolder;
    text-transform: uppercase;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ececec;
    margin-bottom: 16px;
}
.woocommerce-order-received #zenrise-transfer-bank-data p {
    font-size: .9em;
    color: #555;
    margin: 0 0 12px;
}
.woocommerce-order-received #zenrise-transfer-bank-data h4 {
    font-size: .9em;
    font-weight: 500;
    color: #444;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dg-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: .7em;
    color: #555;
    cursor: pointer;
    transition: background .2s;
    font-weight: 400;
}
.dg-copy-btn:hover {
    background: #e0e0e0;
}
.dg-copy-btn.copied {
    background: #edf5e6;
    border-color: #c5ddb3;
    color: #4a7a2e;
}
.dg-copy-btn svg {
    width: 12px;
    height: 12px;
}

/* ======================================
   Order-Received: Hide billing address section
   ====================================== */
.woocommerce-order-received .woocommerce-customer-details {
    display: none;
}

/* ======================================
   Order-Received: Zenrise "Enviar/Cargar Comprobante" sections
   Match card style with consistent h2 sizing.
   ====================================== */
.woocommerce-order-received .dg-ty-content-col > h2 {
    font-size: 1.1em;
    font-weight: bolder;
    text-transform: uppercase;
    padding-bottom: 12px;
    border-bottom: 3px solid #ececec;
    margin-bottom: 16px;
}
/* "Enviar Comprobante": more top separation from bank data */
.woocommerce-order-received .dg-ty-content-col > h2:first-of-type {
    margin-top: 28px;
}
/* "Cargar Comprobante": closer to enviar section */
.woocommerce-order-received .dg-ty-content-col > h2:last-of-type {
    margin-top: 10px;
}