/* ═══════════════════════════════════════════════════════════════════════════
   FACTO — Estilos modernos para checkout y carrito  (Bootstrap 5 companion)
   v4.5.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    --facto-radius:   .625rem;
    --facto-border:   #e2e5ea;
    --facto-focus:    #4f46e5;
    --facto-focus-sh: rgba(79,70,229,.15);
    --facto-label:    #374151;
    --facto-text:     #111827;
    --facto-muted:    #6b7280;
    --facto-bg:       #f3f4f6;
    --facto-white:    #ffffff;
    --facto-shadow:   0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA CHECKOUT — fondo y layout
   ═══════════════════════════════════════════════════════════════════════════ */

body.woocommerce-checkout {
    background-color: var(--facto-bg);
    overflow-x: clip; /* Previene scroll horizontal sin romper position:sticky */
}

form.woocommerce-checkout {
    width: 100%;
    max-width: 100%;
}

/* ── Títulos de sección (Detalles de facturación, Información adicional) ─── */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--facto-text) !important;
    margin: 0 0 1.1rem !important;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--facto-border);
    letter-spacing: -.01em;
}

/* ── Card blanca que envuelve cada sección del checkout ─────────────────── */
.woocommerce-billing-fields,
.woocommerce-additional-fields {
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: var(--facto-shadow);
}

/* Shipping fields: solo si contiene hijos visibles */
.woocommerce-shipping-fields:has(> *) {
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: var(--facto-shadow);
}
/* Fallback para navegadores sin :has() — ocultar si está vacío */
.woocommerce-shipping-fields:not(:has(*)) {
    display: none !important;
}

/* ── Campos de formulario WooCommerce ───────────────────────────────────── */
.woocommerce-checkout form .form-row,
.woocommerce form .form-row {
    margin-bottom: .85rem !important;
    padding: 0 !important;
}

.woocommerce-checkout form .form-row label,
.woocommerce form .form-row label {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--facto-label) !important;
    margin-bottom: .3rem !important;
    display: block;
    letter-spacing: .01em;
}

.woocommerce form .form-row .required {
    color: #ef4444 !important;
    text-decoration: none !important;
}

.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    border: 1.5px solid var(--facto-border) !important;
    border-radius: var(--facto-radius) !important;
    padding: .55rem .85rem !important;
    font-size: .925rem !important;
    color: var(--facto-text) !important;
    background-color: var(--facto-white) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
    border-color: var(--facto-focus) !important;
    box-shadow: 0 0 0 3px var(--facto-focus-sh) !important;
    outline: 0 !important;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout form .form-row input.input-text::placeholder {
    color: #9ca3af !important;
    font-size: .875rem !important;
}

/* Flecha custom en selectores */
.woocommerce-checkout form select,
.woocommerce form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 14px !important;
    padding-right: 2.25rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: formulario izquierda / resumen derecha / pago full-width
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid principal: formulario + resumen ───────────────────────────────── */
#facto-co-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* ── Columna izquierda: una sola columna, sin floats de WC ──────────────── */
#facto-co-left {
    min-width: 0;
}

/* Anular el layout col-1/col-2 flotado de WooCommerce */
#facto-co-left .col2-set,
#facto-co-left #customer_details {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

#facto-co-left .col-1,
#facto-co-left .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Columna derecha: sticky + card contenedor ──────────────────────────── */
#facto-co-right {
    position: sticky;
    top: 3rem;
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    box-shadow: var(--facto-shadow);
    overflow: hidden;
}

/* ── Título "Resumen del pedido" — igual que los demás headings de card ──── */
#order_review_heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--facto-text) !important;
    letter-spacing: -.01em;
    background: transparent;
    border: none !important;
    border-bottom: 2px solid var(--facto-border) !important;
    border-radius: 0;
    margin-left: 1.1rem !important;
    margin-right: 1.1rem !important;
    margin-bottom: 0.2rem !important;
    padding-bottom: .6rem;
}

/* ── Pago full-width debajo del grid ────────────────────────────────────── */
#facto-co-payment {
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    box-shadow: var(--facto-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#facto-co-payment #payment {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 1.25rem !important;
}

/* ── Título de la sección de pago — igual que los demás headings de card ── */
.facto-payment-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--facto-text) !important;
    letter-spacing: -.01em;
    background: transparent;
    border: none !important;
    border-bottom: 2px solid var(--facto-border) !important;
    border-radius: 0;
    margin-left: 1.1rem !important;
    margin-right: 1.1rem !important;
    margin-bottom: 0.2rem !important;
    padding-bottom: .6rem;
}

/* ── Botones PayPal dentro de la sección de pago ────────────────────────── */
#facto-co-payment .ppc-button-wrapper {
    margin-top: .75rem;
    padding: 0 1.25rem 1.25rem !important;
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #facto-co-layout {
        grid-template-columns: 1fr;
    }
    #facto-co-right {
        position: static;
    }
}

/* Sin borde ni sombra propio — los provee #facto-co-right */
.woocommerce-checkout-review-order {
    background: transparent;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 0;
}

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: .92rem;
    margin: 0 !important;
    border: 2px solid transparent !important;
}

/* Ocultar encabezados de columna (PRODUCTO / SUBTOTAL) */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* Quitar el borde superior solo a la primera fila del tbody */
.woocommerce-checkout-review-order-table tbody tr:first-child td,
.woocommerce-checkout-review-order-table tbody tr:first-child th {
    border-top: none !important;
}

/* Filas de producto: sin bordes internos entre ellas */
.woocommerce-checkout-review-order-table tbody tr td,
.woocommerce-checkout-review-order-table tbody tr th {
    padding: .7rem 1.1rem;
    border-bottom: none;
    color: var(--facto-text);
    vertical-align: middle;
}

/* Separador tbody → tfoot + fondo gris en toda la sección de totales */
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
    background: var(--facto-bg);
}
.woocommerce-checkout-review-order-table tfoot tr:first-child th,
.woocommerce-checkout-review-order-table tfoot tr:first-child td {
    border-top: 1.5px solid var(--facto-border);
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td {
    padding: .55rem 1.1rem;
    font-size: .875rem;
    color: var(--facto-muted);
}

.woocommerce-checkout-review-order-table tr.tax-rate th,
.woocommerce-checkout-review-order-table tr.tax-rate td {
    font-size: .8rem;
    color: var(--facto-muted);
    padding: .28rem 1.1rem;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
    font-size: 1rem;
    font-weight: 700;
    color: var(--facto-text);
    padding: .85rem 1.1rem;
    border-top: none;
    border-bottom: none;
}

/* ── Sección de pago (dentro de #facto-co-payment) ──────────────────────── */
#payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#payment ul.payment_methods {
    padding: 0 !important;
    border-bottom: 1px solid var(--facto-border) !important;
    margin-bottom: 1rem !important;
    list-style: none !important;
}

#payment ul.payment_methods li {
    padding: .55rem .35rem !important;
    font-size: .92rem !important;
    border-radius: .4rem;
}

#payment ul.payment_methods li label {
    font-weight: 600 !important;
    color: var(--facto-text) !important;
    cursor: pointer;
}

#payment div.payment_box {
    background: #fff !important;
    border-radius: .5rem !important;
    font-size: .875rem !important;
    color: var(--facto-muted) !important;
    margin: .4rem 0 .6rem !important;
    padding: .7rem 1rem !important;
    border: 1px solid var(--facto-border) !important;
}

/* ── Botón "Realizar el pedido" ──────────────────────────────────────────── */
#place_order {
    border-radius: var(--facto-radius) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: .8rem 1.5rem !important;
    width: 100% !important;
    letter-spacing: .01em;
    transition: opacity .15s ease, transform .1s ease !important;
}

#place_order:hover {
    opacity: .9 !important;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN FACTO — integrada en el formulario (sin card anidado)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Separador + título de la subsección Facto */
.facto-section-divider {
    border: none;
    border-top: 1.5px solid var(--facto-border);
    margin: 1.1rem 0 1rem;
}

.facto-section-title {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: var(--facto-muted) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .85rem !important;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Labels Facto */
.facto-checkout-fields .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--facto-label);
    margin-bottom: .3rem;
    display: block;
    letter-spacing: .01em;
}

/* Inputs y selects Facto */
.facto-checkout-fields .form-control,
.facto-checkout-fields .form-select {
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    padding: .55rem .85rem;
    font-size: .925rem;
    color: var(--facto-text);
    background-color: var(--facto-white);
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    line-height: 1.5;
}

.facto-checkout-fields .form-control:focus,
.facto-checkout-fields .form-select:focus {
    border-color: var(--facto-focus);
    box-shadow: 0 0 0 3px var(--facto-focus-sh);
    outline: 0;
}

.facto-checkout-fields .form-control::placeholder {
    color: #9ca3af;
    font-size: .875rem;
}

.facto-checkout-fields .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px;
    padding-right: 2.25rem;
}

.facto-checkout-fields .mb-3 { margin-bottom: .9rem !important; }
.facto-checkout-fields .mb-0 { margin-bottom: 0 !important; }

/* ── Página "Pedido recibido": mensaje + botón de documento ─────────────── */
.facto-thankyou-doc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: var(--facto-radius);
    font-size: .9rem;
    color: #166534;
    font-weight: 500;
}

.facto-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem 1rem;
    background: #16a34a;
    color: #fff !important;
    border-radius: var(--facto-radius);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease, transform .1s ease;
    white-space: nowrap;
}

.facto-doc-btn::before {
    content: '↗';
    font-size: .8rem;
}

.facto-doc-btn:hover {
    background: #15803d;
    transform: translateY(-1px);
    color: #fff !important;
}

/* ── Aviso de simulación ─────────────────────────────────────────────────── */
#facto-simulation-notice {
    border-radius: var(--facto-radius);
    font-size: .85rem;
    margin-bottom: 1rem;
    border: 1.5px solid #fbbf24 !important;
    background-color: #fffbeb !important;
    color: #92400e !important;
    padding: .7rem 1rem !important;
}

/* ── Nota de país bloqueado ──────────────────────────────────────────────── */
#facto-country-note {
    font-size: .78rem;
    color: var(--facto-muted);
    margin-top: .25rem;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARRITO — página completa
   ═══════════════════════════════════════════════════════════════════════════ */

body.woocommerce-cart {
    background-color: var(--facto-bg);
}

/* ── Anular max-width:1000px que WooCommerce impone al título y al contenedor ─
   Se reemplaza por el ancho "wide" del tema para que ambos queden alineados    */
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce {
    max-width: var(--wp--style--global--wide-size) !important;
}



/* ── Card de la tabla del carrito ────────────────────────────────────────── */
.woocommerce-cart-form {
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    box-shadow: var(--facto-shadow);
    overflow: hidden;
    padding: 0;
    width: 100% !important;
    box-sizing: border-box;
}

/* ── Tabla principal ─────────────────────────────────────────────────────── */
table.shop_table.cart {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    font-size: .92rem;
    margin: 0 !important;
}

/* Encabezado */
table.shop_table.cart thead th {
    background: var(--facto-bg);
    color: var(--facto-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .85rem 1rem;
    border-bottom: 1.5px solid var(--facto-border);
    border-top: none;
}

/* Filas de producto */
table.shop_table.cart tbody tr.cart_item {
    border-bottom: 1.5px solid var(--facto-border);
    transition: background .1s ease;
}
table.shop_table.cart tbody tr.cart_item:last-child {
    border-bottom: none;
}
table.shop_table.cart tbody tr.cart_item:hover {
    background: #fafafa;
}

table.shop_table.cart td {
    padding: 1rem !important;
    vertical-align: middle !important;
    border: none !important;
    color: var(--facto-text);
}

/* Botón eliminar × */
.product-remove a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s ease, transform .1s ease !important;
    border: none !important;
}
.product-remove a.remove:hover {
    background: #fca5a5 !important;
    transform: scale(1.1);
}

/* Imagen del producto */
.product-thumbnail img {
    width: 58px !important;
    height: 58px !important;
    object-fit: cover;
    border-radius: .5rem;
    border: 1.5px solid var(--facto-border);
}

/* Nombre del producto */
.product-name a {
    font-weight: 600 !important;
    color: var(--facto-text) !important;
    text-decoration: none !important;
    font-size: .93rem;
}
.product-name a:hover {
    color: var(--facto-focus) !important;
}

/* Precio y subtotal */
.product-price,
.product-subtotal {
    font-size: .93rem;
    color: var(--facto-text);
}
.product-subtotal {
    font-weight: 600;
}

/* Input de cantidad */
.product-quantity .qty {
    width: 64px !important;
    text-align: center !important;
    border: 1.5px solid var(--facto-border) !important;
    border-radius: var(--facto-radius) !important;
    padding: .4rem .5rem !important;
    font-size: .9rem !important;
    background: var(--facto-white) !important;
    color: var(--facto-text) !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
}
.product-quantity .qty:focus {
    border-color: var(--facto-focus) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--facto-focus-sh) !important;
}

/* Fila de acciones (cupón + actualizar) */
table.shop_table.cart tr.actions td {
    background: var(--facto-bg);
    border-top: 1.5px solid var(--facto-border) !important;
    padding: .85rem 1rem !important;
}

.coupon {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.coupon label {
    display: none; /* el placeholder lo reemplaza */
}

.coupon #coupon_code {
    border: 1.5px solid var(--facto-border) !important;
    border-radius: var(--facto-radius) !important;
    padding: .45rem .85rem !important;
    font-size: .875rem !important;
    color: var(--facto-text) !important;
    background: var(--facto-white) !important;
    box-shadow: none !important;
    width: 180px !important;
    transition: border-color .15s ease !important;
}
.coupon #coupon_code:focus {
    border-color: var(--facto-focus) !important;
    box-shadow: 0 0 0 3px var(--facto-focus-sh) !important;
    outline: 0 !important;
}

.coupon .button,
input[name="update_cart"] {
    border-radius: var(--facto-radius) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    padding: .45rem 1rem !important;
    cursor: pointer;
    transition: opacity .15s ease !important;
}

input[name="update_cart"] {
    float: right;
}

input[name="update_cart"]:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* ── Contenedor de totales: separación respecto a la tabla ──────────────── */
.cart-collaterals {
    margin-top: 1.5rem !important;
}

/* ── Card de totales ─────────────────────────────────────────────────────── */
.cart_totals {
    background: var(--facto-white);
    border: 1.5px solid var(--facto-border);
    border-radius: var(--facto-radius);
    box-shadow: var(--facto-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.cart_totals h2 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--facto-text) !important;
    letter-spacing: -.01em;
    margin: 0 !important;
    padding: 1rem 1.25rem .75rem !important;
    border-bottom: 2px solid var(--facto-border);
}

.cart_totals .shop_table {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: .9rem;
    margin: 0 !important;
}

.cart_totals .shop_table th,
.cart_totals .shop_table td {
    padding: .65rem 1.25rem !important;
    border: none !important;
    border-bottom: 1px solid var(--facto-border) !important;
    vertical-align: middle;
    color: var(--facto-text);
}

.cart_totals .shop_table tr:last-child th,
.cart_totals .shop_table tr:last-child td {
    border-bottom: none !important;
}

.cart_totals .shop_table th {
    font-weight: 600;
    font-size: .82rem;
    color: var(--facto-muted);
    width: 40%;
}

.cart_totals tr.tax-rate th,
.cart_totals tr.tax-rate td {
    font-size: .8rem;
    color: var(--facto-muted);
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
    font-size: 1rem;
    font-weight: 700;
    color: var(--facto-text);
    background: var(--facto-bg);
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
    border-top: 1.5px solid var(--facto-border) !important;
}

/* ── Botón "Finalizar compra" ────────────────────────────────────────────── */
.wc-proceed-to-checkout {
    padding: 1rem 1.25rem !important;
    box-sizing: border-box;
}

.woocommerce-cart .cart_totals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    border-radius: var(--facto-radius) !important;
    font-weight: 700 !important;
    padding: .8rem 1.5rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: opacity .15s ease, transform .1s ease !important;
    letter-spacing: .01em;
}
.woocommerce-cart .cart_totals .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    opacity: .9 !important;
    transform: translateY(-1px);
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    table.shop_table.cart thead {
        display: none;
    }
    table.shop_table.cart td {
        display: block !important;
        padding: .5rem 1rem !important;
    }
    table.shop_table.cart td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        font-size: .78rem;
        color: var(--facto-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-right: .25rem;
    }
    .product-remove,
    .product-thumbnail {
        display: none !important;
    }
}