/* ════════════════════════════════════════════════════════════════════════
 *  BUYACÁ — Modal "quick view" de producto v2 (Fase 3 del rediseño)
 *  ───────────────────────────────────────────────────────────────────────
 *  #bq-catalog-modal / BUYACA.CatalogModal (assets/js/frontend.js ~1337-1816)
 *  arma su contenido 100% por JS (template strings) — su esqueleto vive en
 *  templates/bottom-nav.php (incluido en TODAS las páginas), así que este
 *  modal puede aparecer fuera de .buyaca-business-profile. Por eso este
 *  archivo usa los tokens GLOBAL-SAFE (--bq-text/--bq-page-bg/--bq-ok/
 *  --bq-bad), no los scoped a business-profile.
 *
 *  Motivo del cambio: nombre de producto a 20px !important y precio a 24px
 *  !important (frontend.css ~13257/13297), más botones con padding 12-14px
 *  + font 14-15px en una fila de 2 — el propio dueño lo describió como
 *  "todo muy grande" en esta ventana. Solo se toca CSS (radios/tipografía/
 *  espaciado/tamaño de botón), CERO cambios en frontend.js — el render()
 *  que arma el HTML sigue intacto.
 * ════════════════════════════════════════════════════════════════════════ */

#bq-catalog-modal .bq-catalog-modal-content {
    background: var(--bq-surface, #fff) !important;
}
/* [Fix v10.14.5] Este border-radius SIN media query pisaba (mismo !important,
   cargado después en el bundle) el "[v32] Modal catálogo fullscreen móvil"
   de frontend.css (@media max-width:640px, border-radius:0 !important) —
   por eso en móvil seguía apareciendo con esquinas redondeadas en vez de
   ocupar toda la pantalla. Se acota a escritorio/tablet, que es donde SÍ
   debe verse con esquinas redondeadas. */
@media (min-width: 641px) {
    #bq-catalog-modal .bq-catalog-modal-content {
        border-radius: 18px !important;
    }
}

/* Galería */
#bq-catalog-modal .bq-slider-slide-image { background: var(--bq-page-bg, #FDFCFB) !important; }
#bq-catalog-modal .bq-slider-arrow {
    background: var(--bq-scrim, rgba(12,12,14,.38)) !important;
    color: #fff !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
}
#bq-catalog-modal .bq-slider-dot { background: rgba(255,255,255,.5) !important; }
#bq-catalog-modal .bq-slider-dot.active,
#bq-catalog-modal .bq-slider-dot[aria-current="true"] { background: #fff !important; }
#bq-catalog-modal .bq-cat-img-counter,
#bq-catalog-modal .bq-zoom-btn {
    background: var(--bq-scrim, rgba(12,12,14,.38)) !important;
    border-radius: 999px !important;
    color: #fff !important;
}

/* Cuerpo: categoría/marca, fecha, rating, nombre, precio */
#bq-catalog-modal .bq-slider-slide-body { padding: 16px 18px 4px !important; }

/* [Pedido v10.14.6] Fila superior: logo+nombre+ciudad+cantidad del catálogo
   (izquierda) y migas de categoría, más chicas (derecha) — "toda esta parte
   de arriba... la letra va a ser pequeñita, para que todo se distribuya muy
   bien el espacio". */
#bq-catalog-modal .bq-qv-topinfo {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
#bq-catalog-modal .bq-qv-biz-mini {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
}
#bq-catalog-modal .bq-qv-biz-mini-logo {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--bq-line, #E7E8EC) !important;
    background: var(--bq-bg-elevated, #F3F4F6) !important;
}
#bq-catalog-modal .bq-qv-biz-mini-logo--empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
}
#bq-catalog-modal .bq-qv-biz-mini-text { min-width: 0; }
/* [Pedido] "quiero que el nombre del negocio esté subrayado". */
#bq-catalog-modal .bq-qv-biz-mini-name {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--bq-text, #14151A) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
}
#bq-catalog-modal .bq-qv-biz-mini-city {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
}
#bq-catalog-modal .bq-qv-biz-mini-dot { opacity: .7; }
/* [Pedido] "elimina las migas de pan, pongas el ícono de compartir... muy
   sutil y elegante y profesional" — botón fantasma en el slot derecho de la
   cabecera, mismo criterio que quick-view-modal-v2.css (vitrina de inicio).
   "Al lado del ícono de compartir esté el contador de favoritos... separado
   por línea vertical". */
#bq-catalog-modal .bq-qv-topinfo-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 1px 0 0 !important;
}
#bq-catalog-modal .bq-qv-share-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 50% !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
#bq-catalog-modal .bq-qv-share-inline:hover {
    color: var(--bq-primary, #3A59EF) !important;
    background: rgba(58,89,239,.08) !important;
}
#bq-catalog-modal .bq-qv-share-inline.is-shared { color: var(--bq-primary, #3A59EF) !important; }
#bq-catalog-modal .bq-qv-topinfo-divider {
    width: 1px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
    background: var(--bq-line, #E7E8EC) !important;
}
.buyaca-app:not(.bq-light-mode) #bq-catalog-modal .bq-qv-topinfo-divider { background: rgba(255,255,255,.14) !important; }
#bq-catalog-modal .bq-qv-fav-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
#bq-catalog-modal .bq-qv-fav-count svg { flex: 0 0 auto !important; opacity: .75; }
#bq-catalog-modal .bq-slider-slide-date {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    letter-spacing: .01em;
    margin-bottom: 3px !important;
}
/* [Pedido] Ícono de calendario + migas de pan (categoría de catálogo/contenido) */
#bq-catalog-modal .bq-slider-slide-date .bq-qv-date-icon { flex-shrink: 0; opacity: .75; }
#bq-catalog-modal .bq-slider-slide-date .bq-qv-date-sep {
    width: 1px; height: 11px;
    background: var(--bq-line, #E7E8EC);
    flex-shrink: 0;
    margin: 0 1px;
}
#bq-catalog-modal .bq-slider-slide-date .bq-qv-crumb {
    color: var(--bq-primary, #3A59EF) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: underline;
}
/* [Pedido] Migas de pan clicables: categoría de negocio → limpia el filtro
   (todo el catálogo); categoría de producto → filtra el catálogo por ella. */
#bq-catalog-modal .bq-slider-slide-date .bq-qv-crumb-link {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
#bq-catalog-modal .bq-slider-slide-date .bq-qv-crumb-link:hover,
#bq-catalog-modal .bq-slider-slide-date .bq-qv-crumb-link:active {
    opacity: .75;
}
#bq-catalog-modal .bq-slider-slide-date .bq-qv-crumb-dot { opacity: .7; }
#bq-catalog-modal .bq-modal-rating-only,
#bq-catalog-modal .bq-modal-rating-num { color: var(--bq-text, #14151A) !important; font-weight: 700 !important; }
#bq-catalog-modal .bq-modal-rating-cnt { color: var(--bq-ink-soft, #5B5F6B) !important; font-weight: 400 !important; }

#bq-catalog-modal .bq-slider-slide-name {
    font-family: var(--bq-font-display, inherit) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bq-text, #14151A) !important;
    margin: 6px 0 4px !important;
}
/* [Pedido v10.14.6] "la etiqueta aparecerá en la parte final del nombre del
   producto" — chip inline, no en su propia fila. */
#bq-catalog-modal .bq-qv-name-tag {
    display: inline-block;
    vertical-align: middle;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    margin-left: 4px;
}
#bq-catalog-modal .bq-slider-slide-price {
    font-family: var(--bq-font-display, inherit) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--bq-primary, #3A59EF) !important;
}
#bq-catalog-modal .bq-slider-slide-regular { color: var(--bq-ink-faint, #9A9DA6) !important; font-size: 14px !important; }
/* [Fix reportado con captura] usaba var(--bq-text) de fondo — en modo
   oscuro ese token se vuelve casi blanco (pensado para TEXTO), y el pill
   quedaba blanco-sobre-blanco con el texto #fff encima. Fondo oscuro
   estable en ambos modos. */
#bq-catalog-modal .bq-slider-slide-disc {
    background: #14151A !important;
    color: #fff !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
}

/* Descripción
   [Fix reportado con captura] antes usaba var(--bq-page-bg) — en modo
   claro ese token (#FDFCFB) es casi idéntico al fondo del propio modal
   (var(--bq-surface) = #FFFFFF), así que la tarjeta prácticamente
   desaparecía contra su propio contenedor. Ahora un tono visiblemente
   distinto en ambos modos. */
#bq-catalog-modal .bq-qv-card {
    background: #F3F4F6 !important;
    border: 1px solid var(--bq-line, #E7E8EC) !important;
    border-radius: 12px !important;
    
    padding: 12px 14px !important;
    margin: 10px 0 !important;
}
.buyaca-app:not(.bq-light-mode) #bq-catalog-modal .bq-qv-card {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--bq-line, #2A2B30) !important;
}
/* [Fix reportado con captura] título en gris apagado, sin jerarquía clara
   frente al texto de cuerpo — ahora usa el color principal del catálogo
   para que "DESCRIPCIÓN"/"DETALLES" se lean claramente como encabezado. */
#bq-catalog-modal .bq-qv-card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bq-primary, #3A59EF) !important;
    margin-bottom: 4px !important;
}
#bq-catalog-modal .bq-qv-card-title svg { color: var(--bq-primary, #3A59EF) !important; stroke: var(--bq-primary, #3A59EF) !important; }
#bq-catalog-modal .bq-qv-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--bq-text, #14151A) !important;
}

/* Tabla de atributos — "Detalles" no tenía NINGÚN color propio en ningún
   archivo (ni frontend.css ni aquí), heredaba el color ambiente del modal
   y podía terminar con poco contraste contra el fondo de su propia
   tarjeta (.bq-qv-card, ya corregido arriba). */
#bq-catalog-modal .bq-prod-attrs-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bq-primary, #3A59EF) !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#bq-catalog-modal .bq-prod-attrs-title svg { color: var(--bq-primary, #3A59EF) !important; stroke: var(--bq-primary, #3A59EF) !important; }
#bq-catalog-modal .bq-prod-attrs-row { border-color: var(--bq-line, #E7E8EC) !important; padding: 7px 0 !important; }
#bq-catalog-modal .bq-prod-attrs-key { color: var(--bq-ink-soft, #5B5F6B) !important; font-size: 12.5px !important; }
#bq-catalog-modal .bq-prod-attrs-val { color: var(--bq-text, #14151A) !important; font-size: 12.5px !important; font-weight: 600 !important; }

/* ── Botones de acción: más compactos y estratégicos, no ocupan toda la
   fila con la misma jerarquía — el CTA (WhatsApp/URL) es el protagonista,
   "Me interesa" queda como acción secundaria más chica. ── */
/* [Pedido] "hay mucho espacio en el botón... quítale un poco" — el
   corazón ya no comparte esta fila (vive junto al ícono de compartir), así
   que el CTA queda solo y más compacto. */
#bq-catalog-modal .bq-cat-cta-row { gap: 8px !important; padding: 10px 18px 14px !important; }
#bq-catalog-modal .buyaca-btn-primary,
#bq-catalog-modal .bq-custom-url-btn {
    padding: 0 16px !important;
    height: 38px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: var(--bq-primary, #3A59EF) !important;
    gap: 7px !important;
    flex: 1 1 auto !important;
}
#bq-catalog-modal .bq-qv-cta-note {
    font-size: 11px !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    padding: 0 18px 12px !important;
}

/* Navegación entre productos (Anterior/Siguiente) — [Fix reportado con
   captura] antes era una fila de botones grandes con borde, tan visible
   como el CTA principal; ahora es una franja delgada tipo "paginador",
   texto e íconos chicos, sin fondo ni borde de botón, para que no compita
   con la acción de compra. */
#bq-catalog-modal .bq-cat-prodnav {
    border-top: 1px solid var(--bq-line, #E7E8EC) !important;
    padding: 8px 18px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#bq-catalog-modal #bq-prev-product,
#bq-catalog-modal #bq-next-product {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    background: none !important;
    border: none !important;
    padding: 4px 2px !important;
    height: auto !important;
    
}
#bq-catalog-modal #bq-prev-product:hover,
#bq-catalog-modal #bq-next-product:hover { color: var(--bq-primary, #3A59EF) !important; }

/* [Pedido] El botón de cerrar tenía reglas encontradas (sticky/absolute)
 * en varias capas de CSS más viejas — a veces terminaba haciendo scroll
 * junto con el contenido en vez de quedarse fijo arriba a la derecha.
 * Esta regla, cargada después de todas las demás, gana siempre y fija
 * la posición de forma inequívoca respecto al viewport (en móvil el
 * modal ya ocupa toda la pantalla, así que equivale a la esquina de la
 * propia tarjeta). */
#bq-catalog-modal .bq-modal-close-btn {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top, 14px)) !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 !important;
    z-index: 999999 !important;
}

/* -- Corazón de favorito del CONTENIDO dentro del modal (reemplaza "Me interesa") --
   [Fix reportado con captura] El botón se veía como un "0" suelto flotando
   sobre el botón de WhatsApp — venía de la clase compartida
   buyaca-card-favorite-btn (position:absolute;top:8px;left:8px de otra
   tarjeta), ya retirada del lado de frontend.js. Se fuerza position:static
   igual acá como segunda salvaguarda.
   [Pedido] "solamente haya el botón de favoritos, el corazón" (ya sin
   contador, que se movió arriba junto al ícono de compartir) — pasa de
   pastilla ancha con texto a un ícono cuadrado, minimalista. "Un color más
   minimalista... puede ser un contorno con una línea sutil... el corazón
   tiene que ser sutil [en tono oscuro/neutro por defecto]... al momento de
   seleccionarse se seleccione con el color primario del catálogo" — se
   retira el rojo (#EF4444) por completo: contorno neutro por defecto (se
   adapta solo a modo oscuro vía --bq-ink-soft) y relleno con
   --bq-primary del catálogo solo al estar activo. */
#bq-catalog-modal .bq-modal-fav-btn {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--bq-border, rgba(128,128,128,.22)) !important;
    background: transparent !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    cursor: pointer;
    transition: all .15s ease !important;
}
#bq-catalog-modal .bq-modal-fav-btn svg { stroke-width: 1.8 !important; }
#bq-catalog-modal .bq-modal-fav-btn:hover {
    border-color: var(--bq-primary, #3A59EF) !important;
    color: var(--bq-primary, #3A59EF) !important;
}
#bq-catalog-modal .bq-modal-fav-btn.active {
    border-color: var(--bq-primary, #3A59EF) !important;
    background: var(--bq-primary-light, rgba(58,89,239,.08)) !important;
    color: var(--bq-primary, #3A59EF) !important;
}
#bq-catalog-modal .bq-cat-prodnav-count {
    color: var(--bq-ink-faint, #9A9DA6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
    #bq-catalog-modal * { transition-duration: 0ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 *  [Pedido v10.14.6] RESEÑAS DEL PRODUCTO — al final de la información,
 *  paginadas de a 5 con botón "ver más" (infinito, sin recargar la página).
 * ════════════════════════════════════════════════════════════════════════ */
#bq-catalog-modal .bq-qv-reviews-section {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--bq-line, #E7E8EC) !important;
}
#bq-catalog-modal .bq-qv-reviews-title { margin-bottom: 8px !important; }
#bq-catalog-modal .bq-qv-reviews-loading,
#bq-catalog-modal .bq-qv-reviews-empty {
    font-size: 12.5px !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    padding: 6px 0 !important;
}
#bq-catalog-modal .bq-qv-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#bq-catalog-modal .bq-qv-review-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
#bq-catalog-modal .bq-qv-review-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    background: var(--bq-bg-elevated, #F3F4F6) !important;
}
#bq-catalog-modal .bq-qv-review-body { min-width: 0; flex: 1 1 auto; }
#bq-catalog-modal .bq-qv-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
#bq-catalog-modal .bq-qv-review-author {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--bq-text, #14151A) !important;
}
#bq-catalog-modal .bq-qv-review-time {
    font-size: 10.5px !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    flex: 0 0 auto;
}
#bq-catalog-modal .bq-qv-review-comment {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    margin: 4px 0 0 !important;
}
/* [Pedido] "botón de ver más infinito... degradado en color claro o oscuro,
   según corresponda el contraste y el modo que esté actualmente". */
#bq-catalog-modal .bq-qv-reviews-loadmore {
    display: block;
    width: 100%;
    margin: 12px 0 4px !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(58,89,239,.10), rgba(58,89,239,.04)) !important;
    color: var(--bq-primary, #3A59EF) !important;
    transition: background .15s ease, transform .15s ease;
}
#bq-catalog-modal .bq-qv-reviews-loadmore:hover {
    background: linear-gradient(135deg, rgba(58,89,239,.16), rgba(58,89,239,.07)) !important;
    transform: translateY(-1px);
}
.buyaca-app:not(.bq-light-mode) #bq-catalog-modal .bq-qv-reviews-loadmore {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
    color: var(--bq-primary, #6C7CFF) !important;
}
.buyaca-app:not(.bq-light-mode) #bq-catalog-modal .bq-qv-reviews-loadmore:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
}