/* ─── Contenedor general ─────────────────────────── */
.bankame-widget-wrapper {
    margin: 12px 0;
    width: 100%;
    box-sizing: border-box;
}

.bankame-product-widget { margin-bottom: 16px; }
.bankame-cart-widget     { margin: 16px 0 24px; }
.bankame-checkout-widget { margin: 0 0 24px; }

/* ─── Hacer el iframe de Bankame responsivo ──────── */
.bankame-widget-wrapper iframe,
.bankame-widget-wrapper > div {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ─── Overlay/modal del widget ───────────────────── */
body > div[class*="bankame"],
body > div[id*="bankame"] {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

body > div[class*="bankame"] > div,
body > div[id*="bankame"] > div {
    width: 90% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    max-height: 90vh !important;
}

/* ─── Inputs y selects dentro del widget ─────────── */
body > div[class*="bankame"] input,
body > div[class*="bankame"] select,
body > div[id*="bankame"] input,
body > div[id*="bankame"] select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* evita zoom en iOS */
}

/* ─── Mobile ─────────────────────────────────────── */
@media (max-width: 480px) {
    body > div[class*="bankame"] > div,
    body > div[id*="bankame"] > div {
        width: 95% !important;
        padding: 16px !important;
        border-radius: 8px !important;
    }

    body > div[class*="bankame"] input,
    body > div[class*="bankame"] select,
    body > div[id*="bankame"] input,
    body > div[id*="bankame"] select {
        font-size: 16px !important;
        padding: 10px !important;
    }
}

/* ─── Woodmart: evitar conflictos ────────────────── */
.wd-minicart-holder .bankame-widget-wrapper,
.wd-sticky-header .bankame-widget-wrapper {
    display: none !important;
}
/* ─── Intercepción de compra incompleta (Nicx) ───── */
/* El botón se ve SIEMPRE normal. El overlay transparente solo atrapa el
   click cuando falta seleccionar algo, y el aviso rojo aparece recién
   cuando el usuario intenta comprar. */
.bankame-product-block { position: relative; }

.bankame-product-shield { position: relative; }

.bankame-block-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background: transparent;
    cursor: pointer; /* mismo cursor que un botón normal */
}
.bankame-block-overlay[hidden] { display: none; }

/* Aviso en rojo con lo que falta para poder comprar */
.bankame-widget-notice {
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #d63638;
}
.bankame-widget-notice[hidden] { display: none; }


/* ─── Widget dentro de los bloques nativos de WooCommerce ───── */
/* Carrito: dentro de .wc-proceed-to-checkout, debajo de "Finalizar compra" */
.wc-proceed-to-checkout .bankame-cart-widget { margin-top: 10px; }
/* Checkout: dentro de #payment, arriba de "Realizar pedido" */
#payment .bankame-checkout-widget,
.woocommerce-checkout-payment .bankame-checkout-widget { margin: 12px 0; }