/**
 * 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 MercadotelaCatalogo
 * @since   2.0.0
 */

:root {
    --mtcat-brand-blue     : #032D9E;
    --mtcat-brand-yellow   : #FEDF03;
    --mtcat-brand-yellow-hover : #e6c900;
    --mtcat-brand-gray     : #F5F5F5;

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

.cart-widget-side,
.mtcat-cq-overlay {
    font-family: var(--mtcat-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(--mtcat-cq-card-bg) !important;
    border-radius   : var(--mtcat-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(--mtcat-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(--mtcat-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: "1 × $699.00" → se ve solo "$699.00".
   100% CSS (colapsa el texto "1 × " con font-size:0 y restaura el
   tamaño solo en el precio) para NO tocar el DOM con JS — WoodMart
   sincroniza este texto de forma nativa al cambiar la cantidad con
   el stepper, y modificarlo con JS rompía esa actualización. */
.cart-widget-side .cart-info span.quantity {
    display    : block !important;
    font-size  : 0 !important;
    margin-top : 2px !important;
}
.cart-widget-side .cart-info span.quantity .woocommerce-Price-amount {
    font-size   : 13px !important;
    font-weight : 700 !important;
    color       : var(--mtcat-cq-text) !important;
}

/* Stepper de cantidad — acotado a div.quantity: div y span comparten
   la clase "quantity" en el markup nativo, y este selector no debe
   afectar también al span.quantity del precio. */
.cart-widget-side .cart-info div.quantity {
    display      : flex !important;
    align-items  : center !important;
    gap          : 4px !important;
    margin-top   : 8px !important;
}
.cart-widget-side .cart-info div.quantity .minus,
.cart-widget-side .cart-info div.quantity .plus {
    width         : 22px !important;
    height        : 22px !important;
    border        : 1px solid var(--mtcat-cq-border) !important;
    background    : #fff !important;
    color         : var(--mtcat-cq-text) !important;
    border-radius : 6px !important;
    font-size     : 13px !important;
    line-height   : 1 !important;
    cursor        : pointer !important;
    transition    : background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.cart-widget-side .cart-info div.quantity .minus:hover,
.cart-widget-side .cart-info div.quantity .plus:hover {
    background-color : #000000 !important;
    color             : #ffffff !important;
    border-color      : #000000 !important;
}
.cart-widget-side .cart-info div.quantity input.qty {
    width         : 30px !important;
    text-align    : center !important;
    border        : none !important;
    background    : transparent !important;
    font-size     : 13px !important;
    padding       : 0 !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(--mtcat-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(--mtcat-cq-focus) !important;
    color        : var(--mtcat-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(--mtcat-cq-border) !important;
    color            : var(--mtcat-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 .mtcat-cart-quote-btn {
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 8px !important;
    width            : 100% !important;
    background       : var(--mtcat-brand-yellow) !important;
    color            : var(--mtcat-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 .mtcat-cart-quote-btn:hover {
    background-color : var(--mtcat-brand-yellow-hover) !important;
    color             : var(--mtcat-cq-text) !important;
    border-color      : transparent !important;
}
.mtcat-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(--mtcat-brand-blue) !important;
    padding      : 18px 20px !important;
}
.cart-widget-side .wd-heading .title {
    color       : #ffffff !important;
    font-family : var(--mtcat-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 .mtcat-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(--mtcat-brand-yellow);
    font-size   : 22px;
    line-height : 1;
    font-family : var(--mtcat-cq-font);
}


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

.mtcat-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(--mtcat-cq-duration) ease;
}
.mtcat-cq-overlay.is-visible {
    opacity        : 1;
    pointer-events : auto;
}

.mtcat-cq-card {
    position      : relative;
    background    : var(--mtcat-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(--mtcat-cq-duration) ease, opacity var(--mtcat-cq-duration) ease;
    outline       : none;
}
.mtcat-cq-overlay.is-visible .mtcat-cq-card {
    transform : scale(1) translateY(0);
    opacity   : 1;
}

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

.mtcat-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(--mtcat-brand-yellow) !important;
    cursor      : pointer !important;
    padding     : 4px 6px !important;
    width       : auto !important;
    height      : auto !important;
    min-width   : 0 !important;
    transition  : opacity .15s ease !important;
}
.mtcat-cq-close:hover {
    opacity : 0.8 !important;
}

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

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

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

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

.mtcat-cq-submit {
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 8px !important;
    width            : 100% !important;
    background-color : var(--mtcat-cq-accent) !important;
    border-color     : var(--mtcat-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;
}
.mtcat-cq-submit:hover {
    background-color : #1da851 !important;
    border-color     : #1da851 !important;
}
.mtcat-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;
    }
    .mtcat-cq-card {
        max-width : 400px;
    }
    .mtcat-cq-header {
        padding : 22px 22px 18px;
    }
    .mtcat-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 span.quantity .woocommerce-Price-amount {
        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 .mtcat-cart-quote-btn {
        font-size : 13px !important;
        padding   : 11px !important;
    }

    /* Modal */
    .mtcat-cq-overlay {
        padding : 12px;
        align-items : flex-end; /* hoja inferior en pantallas angostas */
    }
    .mtcat-cq-card {
        max-width  : 100%;
        max-height : 85vh;
        border-radius : 16px 16px 0 0;
    }
    .mtcat-cq-header {
        padding : 20px 18px 16px;
    }
    .mtcat-cq-body {
        padding : 18px 18px;
    }
    .mtcat-cq-title {
        font-size : 19px !important;
    }
    .mtcat-cq-field {
        margin-bottom : 14px;
    }
    .mtcat-cq-field input,
    .mtcat-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;
    }
    .mtcat-cq-header {
        padding : 16px 14px 14px;
    }
    .mtcat-cq-body {
        padding : 16px 14px;
    }
    .mtcat-cq-title {
        font-size : 18px !important;
    }
    .mtcat-cq-subtitle {
        font-size : 12px !important;
    }
}