/**
 * cart-quote.css — Carrito de Cotización
 * Compatible con WoodMart 8.5.4 + Elementor.
 *
 * Dos bloques:
 *  1. Restyling del drawer nativo (.cart-widget-side) para que luzca
 *     como la referencia (cards color crema, stepper, total, botón
 *     "Solicitar Cotización").
 *  2. Modal "Solicitar Cotización" (overlay + card + formulario).
 *
 * @package PechTextilCatalogo
 * @since   2.0.0
 */

:root {
    --pxcat-brand-primary      : #1F232C;
    --pxcat-brand-accent       : #b0bfe6;
    --pxcat-brand-accent-hover : #9aa8ca;
    --pxcat-brand-gray         : #F5F5F5;

    --pxcat-cq-accent      : #25D366; /* verde de WhatsApp — se conserva para el botón de envío, es identidad de WhatsApp, no de marca */
    --pxcat-cq-focus       : var(--pxcat-brand-primary);
    --pxcat-cq-bg-cream    : #ffffff;
    --pxcat-cq-card-bg     : var(--pxcat-brand-gray);
    --pxcat-cq-border      : #e5e5e5;
    --pxcat-cq-text        : #1a1a1a;
    --pxcat-cq-text-muted  : #8a8a8a;
    --pxcat-cq-radius      : 10px;
    --pxcat-cq-duration    : 250ms;
    --pxcat-cq-font        : 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cart-widget-side,
.pxcat-cq-overlay {
    font-family: var(--pxcat-cq-font) !important;
}

/* ══════════════════════════════════════════════════════════════════
 * 1. DRAWER NATIVO — restyling
 * ══════════════════════════════════════════════════════════════════ */

.cart-widget-side .shopping-cart-widget-body,
.cart-widget-side .shopping-cart-widget-footer {
    background: #ffffff !important;
}

/* Tarjeta de producto */
.cart-widget-side li.woocommerce-mini-cart-item {
    background      : var(--pxcat-cq-card-bg) !important;
    border-radius   : var(--pxcat-cq-radius) !important;
    padding         : 12px !important;
    margin-bottom   : 12px !important;
    display         : flex !important;
    align-items     : center !important;
    gap             : 12px !important;
    position        : relative !important;
    border           : none !important;
}

.cart-widget-side li.woocommerce-mini-cart-item .cart-item-image {
    width         : 56px !important;
    height        : 56px !important;
    flex-shrink   : 0 !important;
    border-radius : 8px !important;
    overflow      : hidden !important;
}
.cart-widget-side li.woocommerce-mini-cart-item .cart-item-image img {
    width      : 100% !important;
    height     : 100% !important;
    object-fit : cover !important;
}

.cart-widget-side .cart-info {
    flex      : 1 1 auto !important;
    min-width : 0 !important;
}
.cart-widget-side .cart-info .wd-entities-title {
    font-weight   : 600 !important;
    font-size     : 13px !important;
    color         : var(--pxcat-cq-text) !important;
    display       : block !important;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* SKU: texto pequeño y discreto entre el nombre y el precio. */
.cart-widget-side .wd-product-detail.wd-product-sku {
    display     : block !important;
    font-size   : 11px !important;
    color       : var(--pxcat-cq-text-muted) !important;
    margin      : 1px 0 0 !important;
}
.cart-widget-side .wd-product-detail.wd-product-sku .wd-label {
    font-weight : 500 !important;
}

/* Precio del producto (se oculta por completo si el switch "Ocultar
   Precios" está activo — ver PXCat_Cart_Quote::render_qty_stepper()). */
.cart-widget-side .cart-info .pxcat-cq-price {
    display     : block !important;
    font-size   : 13px !important;
    font-weight : 700 !important;
    color       : var(--pxcat-cq-text) !important;
    margin-top  : 2px !important;
}

/* Stepper de cantidad propio (markup generado por
   render_qty_stepper(), NO depende del mini-carrito nativo de
   WoodMart — el sitio real no lo trae).
   position+z-index es NECESARIO, no cosmético: el markup real trae
   un <a class="cart-item-link wd-fill"> posicionado en absolute que
   cubre toda la tarjeta (para que sea clicable hacia el producto).
   Un elemento posicionado SIEMPRE se pinta encima de uno no
   posicionado en flujo normal, sin importar el orden en el HTML —
   por eso, sin esto, el clic caía en ese link invisible en vez de en
   los botones -/+ (mismo motivo por el que el botón de eliminar de
   más abajo también necesita position:absolute). */
.cart-widget-side .cart-info .pxcat-cq-stepper {
    display      : flex !important;
    align-items  : center !important;
    gap          : 6px !important;
    margin-top   : 8px !important;
    position     : relative !important;
    z-index      : 2 !important;
}
.cart-widget-side .cart-info .pxcat-cq-stepper.pxcat-cq-updating {
    opacity        : 0.5 !important;
    pointer-events : none !important;
}
.cart-widget-side .cart-info .pxcat-cq-qty-minus,
.cart-widget-side .cart-info .pxcat-cq-qty-plus {
    width         : 24px !important;
    height        : 24px !important;
    border        : 1px solid var(--pxcat-cq-border) !important;
    background    : #fff !important;
    color         : var(--pxcat-cq-text) !important;
    border-radius : 6px !important;
    font-size     : 14px !important;
    line-height   : 1 !important;
    cursor        : pointer !important;
    display        : inline-flex !important;
    align-items    : center !important;
    justify-content: center !important;
    transition    : background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.cart-widget-side .cart-info .pxcat-cq-qty-minus:hover:not(:disabled),
.cart-widget-side .cart-info .pxcat-cq-qty-plus:hover:not(:disabled) {
    background-color : #000000 !important;
    color             : #ffffff !important;
    border-color      : #000000 !important;
}
.cart-widget-side .cart-info .pxcat-cq-qty-minus:disabled,
.cart-widget-side .cart-info .pxcat-cq-qty-plus:disabled {
    opacity : 0.35 !important;
    cursor  : not-allowed !important;
}
.cart-widget-side .cart-info .pxcat-cq-qty-value {
    min-width   : 18px !important;
    text-align  : center !important;
    font-size   : 13px !important;
    font-weight : 600 !important;
    color       : var(--pxcat-cq-text) !important;
}

/* Botón eliminar → esquina superior derecha de la card */
.cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button {
    position       : absolute !important;
    top            : 10px !important;
    right          : 10px !important;
    width          : 26px !important;
    height         : 26px !important;
    display        : flex !important;
    align-items    : center !important;
    justify-content: center !important;
    border-radius  : 6px !important;
    color          : var(--pxcat-cq-text-muted) !important;
    background     : transparent !important;
    border         : 1px solid transparent !important;
    font-size      : 0 !important; /* oculta el × nativo, deja solo el SVG inyectado */
    transition     : border-color .15s, color .15s !important;
}
.cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button:hover,
.cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button:focus {
    border-color : var(--pxcat-cq-focus) !important;
    color        : var(--pxcat-cq-focus) !important;
}
.cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button svg {
    width  : 14px !important;
    height : 14px !important;
}
/* Quita el ícono nativo de WoodMart (woodmart-font) que se dibuja
   detrás/junto con el SVG que inyectamos por JS. Selectores reforzados
   con mayor especificidad que la regla original de WoodMart
   (.woocommerce-mini-cart .remove:after) para ganar el cascade pase lo
   que pase con el orden de carga de las hojas de estilo. */
.cart-widget-side .woocommerce-mini-cart .remove:after,
.cart-widget-side .woocommerce-mini-cart-item .remove:after,
.cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button:after,
.cart-widget-side a.remove.remove_from_cart_button:after {
    content    : "" !important;
    font-family: initial !important;
    display    : none !important;
}

/* Total */
.cart-widget-side .woocommerce-mini-cart__total {
    display          : flex !important;
    justify-content  : space-between !important;
    align-items      : center !important;
    font-size        : 15px !important;
    padding-top      : 12px !important;
    border-top       : 1px solid var(--pxcat-cq-border) !important;
    color            : var(--pxcat-cq-text) !important;
}
.cart-widget-side .woocommerce-mini-cart__total strong {
    font-weight : 600 !important;
}

/* Botón "Solicitar Cotización" */
.cart-widget-side .woocommerce-mini-cart__buttons.buttons {
    margin-top : 12px !important;
}
.cart-widget-side .pxcat-cart-quote-btn {
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 8px !important;
    width            : 100% !important;
    background       : var(--pxcat-brand-accent) !important;
    color            : var(--pxcat-cq-text) !important;
    border           : none !important;
    border-radius    : 8px !important;
    padding          : 14px !important;
    font-size        : 14px !important;
    font-weight      : 700 !important;
    text-transform   : uppercase !important;
    letter-spacing   : 0.02em !important;
    box-shadow       : none !important;
    transition       : background-color .15s ease !important;
}
.cart-widget-side .pxcat-cart-quote-btn:hover {
    background-color : var(--pxcat-brand-accent-hover) !important;
    color             : var(--pxcat-cq-text) !important;
    border-color      : transparent !important;
}
.pxcat-cq-btn-icon {
    display     : inline-flex;
    align-items : center;
}

/* Respaldo: si WoodMart llegara a repintar "Ver carrito" / "Finalizar
   compra" por otra vía distinta al hook que reemplazamos en PHP, se
   ocultan aquí sin afectar nuestro botón "Solicitar Cotización". */
.cart-widget-side .woocommerce-mini-cart__buttons.buttons a.wc-forward,
.cart-widget-side .woocommerce-mini-cart__buttons.buttons a.btn-cart,
.cart-widget-side .woocommerce-mini-cart__buttons.buttons a.checkout {
    display: none !important;
}

/* Quita el texto "Cerrar" del botón nativo de cierre del drawer,
   dejando solo el ícono ×. Se limita a .cart-widget-side para no
   afectar otros paneles deslizables de WoodMart (filtros, wishlist). */
.cart-widget-side .close-side-widget .wd-action-text {
    display: none !important;
}

/* Header del drawer: fondo azul de marca, título en blanco, ícono de
   cerrar en amarillo de marca. */
.cart-widget-side .wd-heading {
    background   : var(--pxcat-brand-primary) !important;
    padding      : 18px 20px !important;
}
.cart-widget-side .wd-heading .title {
    color       : #ffffff !important;
    font-family : var(--pxcat-cq-font) !important;
    font-weight : 700 !important;
    font-size   : 20px !important;
}
/* El × del drawer y el del modal deben verse idénticos. En vez de
   depender de cómo WoodMart dibuja su ícono nativo (color vs
   background-color — no queda claro sin el markup exacto), se oculta
   por completo y se inyecta el mismo carácter × con el mismo tamaño,
   color y tipografía que usa .pxcat-cq-close en el modal. */
.cart-widget-side .close-side-widget .wd-action-icon {
    display: none !important;
}
.cart-widget-side .close-side-widget a {
    position: relative !important;
}
.cart-widget-side .close-side-widget a::after {
    content     : "×";
    color       : var(--pxcat-brand-accent);
    font-size   : 22px;
    line-height : 1;
    font-family : var(--pxcat-cq-font);
}


/* ══════════════════════════════════════════════════════════════════
 * 2. MODAL "SOLICITAR COTIZACIÓN"
 * ══════════════════════════════════════════════════════════════════ */

.pxcat-cq-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.45);
    z-index         : 999999;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 16px;
    opacity         : 0;
    pointer-events  : none;
    transition      : opacity var(--pxcat-cq-duration) ease;
}
.pxcat-cq-overlay.is-visible {
    opacity        : 1;
    pointer-events : auto;
}

.pxcat-cq-card {
    position      : relative;
    background    : var(--pxcat-brand-gray);
    border-radius : 14px;
    box-shadow    : 0 8px 32px rgba(0, 0, 0, 0.18);
    width         : 100%;
    max-width     : 420px;
    max-height    : 90vh;
    overflow      : hidden; /* recorta el header azul a las esquinas redondeadas de la card */
    display       : flex;
    flex-direction: column;
    transform     : scale(0.92) translateY(8px);
    opacity       : 0;
    transition    : transform var(--pxcat-cq-duration) ease, opacity var(--pxcat-cq-duration) ease;
    outline       : none;
}
.pxcat-cq-overlay.is-visible .pxcat-cq-card {
    transform : scale(1) translateY(0);
    opacity   : 1;
}

/* Header azul de marca, de borde a borde */
.pxcat-cq-header {
    position         : relative;
    flex-shrink      : 0;
    background-color : var(--pxcat-brand-primary);
    padding          : 24px 26px 20px;
}

.pxcat-cq-close {
    position    : absolute !important;
    top         : 18px !important;
    right       : 18px !important;
    background  : none !important;
    border      : none !important;
    box-shadow  : none !important;
    font-size   : 22px !important;
    line-height : 1 !important;
    color       : var(--pxcat-brand-accent) !important;
    cursor      : pointer !important;
    padding     : 4px 6px !important;
    width       : auto !important;
    height      : auto !important;
    min-width   : 0 !important;
    transition  : opacity .15s ease !important;
}
.pxcat-cq-close:hover {
    opacity : 0.8 !important;
}

.pxcat-cq-title {
    margin      : 0 0 6px !important;
    font-family : var(--pxcat-cq-font) !important;
    font-size   : 22px !important;
    font-weight : 800 !important;
    color       : #ffffff !important;
}
.pxcat-cq-subtitle {
    margin      : 0 !important;
    font-size   : 13px !important;
    color       : rgba(255, 255, 255, 0.85) !important;
}

/* Cuerpo gris con el formulario */
.pxcat-cq-body {
    flex          : 1 1 auto;
    overflow-y    : auto;
    padding       : 22px 26px 26px;
}

.pxcat-cq-field {
    margin-bottom : 18px;
}
.pxcat-cq-field label {
    display       : block;
    font-size     : 13px;
    font-weight   : 500;
    color         : var(--pxcat-cq-text);
    margin-bottom : 6px;
}
.pxcat-cq-field input,
.pxcat-cq-field textarea {
    width         : 100% !important;
    box-sizing    : border-box;
    background    : #fff !important;
    border        : 1px solid var(--pxcat-cq-border) !important;
    border-radius : 8px !important;
    padding       : 11px 13px !important;
    font-size     : 14px !important;
    color         : var(--pxcat-cq-text) !important;
    box-shadow    : none !important;
    transition    : border-color .15s ease !important;
}
.pxcat-cq-field input::placeholder,
.pxcat-cq-field textarea::placeholder {
    color : #b0b0b0;
}
.pxcat-cq-field input:focus,
.pxcat-cq-field textarea:focus {
    border-color : var(--pxcat-cq-focus) !important;
    outline      : none !important;
}
.pxcat-cq-field textarea {
    resize : vertical;
    min-height : 90px;
}

.pxcat-cq-error {
    background    : #fdecea;
    border        : 1px solid #f3c6c1;
    color         : #9a3b34;
    font-size     : 13px;
    padding       : 10px 12px;
    border-radius : 8px;
    margin        : 0 0 16px;
}

.pxcat-cq-submit {
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 8px !important;
    width            : 100% !important;
    background-color : var(--pxcat-cq-accent) !important;
    border-color     : var(--pxcat-cq-accent) !important;
    color            : #ffffff !important;
    border-radius    : 8px !important;
    padding          : 13px !important;
    font-size        : 14px !important;
    font-weight      : 600 !important;
    cursor           : pointer !important;
    border-style     : solid !important;
    border-width     : 1px !important;
    transition       : background-color .15s ease !important;
}
.pxcat-cq-submit:hover {
    background-color : #1da851 !important;
    border-color     : #1da851 !important;
}
.pxcat-cq-wa-icon {
    display     : inline-flex;
    align-items : center;
}

/* ══════════════════════════════════════════════════════════════════
 * 3. RESPONSIVE — Desktop (por defecto) / Tablet / Mobile
 * ══════════════════════════════════════════════════════════════════ */

/* Tablet (≤ 768px): el drawer de WoodMart y el modal ya caben bien con
   los valores por defecto en la mayoría de tablets; se afinan
   espaciados para que no se vean apretados en el ancho intermedio. */
@media ( max-width: 768px ) {
    .cart-widget-side li.woocommerce-mini-cart-item {
        padding : 10px !important;
        gap     : 10px !important;
    }
    .pxcat-cq-card {
        max-width : 400px;
    }
    .pxcat-cq-header {
        padding : 22px 22px 18px;
    }
    .pxcat-cq-body {
        padding : 20px 22px 22px;
    }
}

/* Mobile (≤ 480px) */
@media ( max-width: 480px ) {
    /* Drawer */
    .cart-widget-side li.woocommerce-mini-cart-item {
        padding : 10px !important;
        gap     : 10px !important;
    }
    .cart-widget-side li.woocommerce-mini-cart-item .cart-item-image {
        width  : 48px !important;
        height : 48px !important;
    }
    .cart-widget-side .cart-info .wd-entities-title {
        font-size : 12px !important;
    }
    .cart-widget-side .wd-product-detail.wd-product-sku {
        font-size : 10px !important;
    }
    .cart-widget-side .cart-info .pxcat-cq-price {
        font-size : 12px !important;
    }
    .cart-widget-side li.woocommerce-mini-cart-item a.remove_from_cart_button {
        width  : 24px !important;
        height : 24px !important;
        top    : 8px !important;
        right  : 8px !important;
    }
    .cart-widget-side .woocommerce-mini-cart__total {
        font-size : 14px !important;
    }
    .cart-widget-side .pxcat-cart-quote-btn {
        font-size : 13px !important;
        padding   : 11px !important;
    }

    /* Modal */
    .pxcat-cq-overlay {
        padding : 12px;
        align-items : flex-end; /* hoja inferior en pantallas angostas */
    }
    .pxcat-cq-card {
        max-width  : 100%;
        max-height : 85vh;
        border-radius : 16px 16px 0 0;
    }
    .pxcat-cq-header {
        padding : 20px 18px 16px;
    }
    .pxcat-cq-body {
        padding : 18px 18px;
    }
    .pxcat-cq-title {
        font-size : 19px !important;
    }
    .pxcat-cq-field {
        margin-bottom : 14px;
    }
    .pxcat-cq-field input,
    .pxcat-cq-field textarea {
        font-size : 16px !important; /* evita zoom automático de iOS al enfocar */
        padding   : 10px 12px !important;
    }
}

/* Mobile pequeño (≤ 360px): teléfonos angostos (iPhone SE, Android
   compacto). Ajustes adicionales de espaciado para que la card del
   carrito no se sienta apretada. */
@media ( max-width: 360px ) {
    .cart-widget-side li.woocommerce-mini-cart-item {
        padding : 8px !important;
        gap     : 8px !important;
    }
    .cart-widget-side li.woocommerce-mini-cart-item .cart-item-image {
        width  : 42px !important;
        height : 42px !important;
    }
    .pxcat-cq-header {
        padding : 16px 14px 14px;
    }
    .pxcat-cq-body {
        padding : 16px 14px;
    }
    .pxcat-cq-title {
        font-size : 18px !important;
    }
    .pxcat-cq-subtitle {
        font-size : 12px !important;
    }
}