/* ════════════════════════════════════════════════════════════════════════
 *  BUYACÁ — Nav inferior + Publicar + modales v2 (Fase 2 del rediseño)
 *  ───────────────────────────────────────────────────────────────────────
 *  templates/bottom-nav.php tiene lógica de negocio real en el bottom-sheet
 *  "Publicar" (0/1/2+ negocios, etiquetas "Pautar", badges de plan) — por
 *  eso este archivo es SOLO un reestilizado visual (colores/tipografía/
 *  radios/sombras), igual que home-products-v2.css, y no una reescritura
 *  de markup. La única edición de markup fue puntual: el ícono roto
 *  `bq-i bq-i-trash` del botón "Vaciar todo" (sin ningún CSS que lo
 *  dibujara) se reemplazó por un SVG inline en el propio template.
 *
 *  `.buyaca-bottom-nav`/`.bq-publish-*`/`.bq-modal-overlay` estaban definidos
 *  en decenas de puntos de frontend.css (incluidas variantes dark-mode); los
 *  que quedaban obsoletos tras este rediseño se purgaron de frontend.css
 *  (ver comentarios "[Purga rediseño]" ahí) — este overlay es ahora la única
 *  fuente de verdad para el color/fondo del estado activo. Se carga en
 *  wp_head prioridad 1000000 (ver class-buyaca-redesign-fase2.php).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Barra de navegación ──
   [Fix pedido] se veía apretada contra el borde inferior — el fallback de
   env(safe-area-inset-bottom) original (6-8px) es muy poco en dispositivos
   sin gesture-bar. Se sube el padding inferior real. */
.buyaca-app .buyaca-bottom-nav {
    background: color-mix(in srgb, var(--bq-page-bg, #FDFCFB) 96%, transparent) !important;
    border-top: 1px solid var(--bq-line, #E7E8EC) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    padding-top: 5px !important;
    padding-bottom: max(5px, env(safe-area-inset-bottom, 16px)) !important;
}
.buyaca-app .buyaca-bottom-nav-item,
.buyaca-app .buyaca-bottom-nav-item:not(.active):not([aria-current="page"]) .buyaca-bottom-nav-icon,
.buyaca-app .buyaca-bottom-nav-item:not(.active):not([aria-current="page"]) .buyaca-bottom-nav-label {
    color: var(--bq-ink-faint, #9A9DA6) !important;
}
.buyaca-app .buyaca-bottom-nav-item.active,
.buyaca-app .buyaca-bottom-nav-item[aria-current="page"],
.buyaca-app .buyaca-bottom-nav-item.active .buyaca-bottom-nav-icon,
.buyaca-app .buyaca-bottom-nav-item[aria-current="page"] .buyaca-bottom-nav-icon,
.buyaca-app .buyaca-bottom-nav-item.active .buyaca-bottom-nav-label,
.buyaca-app .buyaca-bottom-nav-item[aria-current="page"] .buyaca-bottom-nav-label {
    color: var(--bq-brand-text, #2E45C4) !important;
}
/* [Pedido, misma estética que las pestañas del catálogo — ver referencia
   estilo Facebook] El ítem seleccionado se resalta con fondo blanco propio,
   además de ícono + texto en el color principal (de la plataforma, no del
   negocio: el nav inferior es global y no debe teñirse del color de un
   catálogo específico). */
.buyaca-app .buyaca-bottom-nav-item.active,
.buyaca-app .buyaca-bottom-nav-item[aria-current="page"] {
    background: var(--bq-surface, #fff) !important;
    border-radius: var(--bq-radius-sm, 10px) !important;
    
}
.buyaca-app .buyaca-bottom-nav-item::before,
.buyaca-app .buyaca-bottom-nav-item.active::before,
.buyaca-app .buyaca-bottom-nav-item.active::after { display: none !important; }
.buyaca-app .buyaca-bottom-nav-item.active .buyaca-bottom-nav-icon,
.buyaca-app .buyaca-bottom-nav-item:active { transform: none !important; }

/* [Revertido a pedido] El nav solo-íconos (estilo Instagram) vuelve a
   mostrar el texto debajo, como antes del rediseño. */
.buyaca-app .buyaca-bottom-nav-label {
    font-family: var(--bq-font-body, inherit) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}
.buyaca-app .buyaca-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.buyaca-app .buyaca-bottom-nav-icon svg { width: 22px !important; height: 22px !important; }

.buyaca-app .bq-nav-publish-fab {
    background: var(--bq-brand, #3A59EF) !important;
    border-radius: 14px !important;
    
    border: 3px solid var(--bq-page-bg, #FDFCFB) !important;
}
.buyaca-app .bq-nav-publish-fab::before { display: none !important; }
.buyaca-app .bq-nav-publish:hover .bq-nav-publish-fab { transform: none !important; background: var(--bq-brand-dark, #344FD9) !important; }
.buyaca-app .bq-nav-publish-fab svg { stroke: #fff !important; }
.buyaca-app .bq-nav-publish .buyaca-bottom-nav-label { color: var(--bq-ink-soft, #5B5F6B) !important; }

.buyaca-app .bq-nav-badge {
    background: var(--bq-brand, #3A59EF) !important;
    color: #fff !important;
    
}

/* ── Bottom-sheet "Publicar" ── */
.buyaca-app .bq-publish-sheet-panel,
.bq-publish-sheet-panel {
    background: var(--bq-surface, #fff) !important;
    border-radius: 20px 20px 0 0 !important;
    
}
.bq-publish-sheet-handle { background: var(--bq-line-strong, #DEDFE4) !important; }
.bq-publish-sheet-header h3 { font-family: var(--bq-font-display, inherit) !important; color: var(--bq-text, #14151A) !important; }
.bq-publish-sheet-close { background: var(--bq-page-bg, #FDFCFB) !important; color: var(--bq-ink-soft, #5B5F6B) !important; }

.bq-publish-option,
.buyaca-app .bq-publish-sheet .bq-publish-option {
    border: 1px solid var(--bq-line-strong, #DEDFE4) !important;
    background: var(--bq-surface, #fff) !important;
    border-radius: 14px !important;
    
    transition: border-color 110ms ease-out, background 110ms ease-out !important;
}
.bq-publish-option:hover { border-color: var(--bq-brand, #3A59EF) !important; background: var(--bq-brand-tint, #E6EBFF) !important; }
.bq-publish-option--primary,
.bq-publish-option--cta {
    border-color: var(--bq-brand, #3A59EF) !important;
    background: var(--bq-brand-tint, #E6EBFF) !important;
}
.bq-publish-option-icon {
    background: var(--bq-text, #14151A) !important;
    color: #fff !important;
    border-radius: 11px !important;
}
.bq-publish-option-title,
.buyaca-app .bq-publish-sheet .bq-publish-option-title,
.bq-publish-option-name,
.buyaca-app .bq-publish-sheet .bq-publish-option-name {
    color: var(--bq-text, #14151A) !important;
    font-family: var(--bq-font-body, inherit) !important;
}
.bq-publish-option-desc { color: var(--bq-ink-soft, #5B5F6B) !important; }
.bq-publish-option-chev { color: var(--bq-ink-faint, #9A9DA6) !important; }
.bq-publish-section-label { color: var(--bq-text, #14151A) !important; font-family: var(--bq-font-display, inherit) !important; }
.bq-publish-section-hint { color: var(--bq-ink-soft, #5B5F6B) !important; }
.bq-publish-divider { background: var(--bq-line, #E7E8EC) !important; }

/* ── Modales: carrito, slider de catálogo, zoom, video ── */
.bq-modal-overlay,
.buyaca-app .bq-modal-overlay {
    background: rgba(12,12,14,.5) !important;
}
.bq-cart-modal-content,
.bq-catalog-modal-content {
    background: var(--bq-surface, #fff) !important;
    border-radius: 20px !important;
    
}
.bq-cart-modal-title { font-family: var(--bq-font-display, inherit) !important; color: var(--bq-text, #14151A) !important; }
.bq-modal-close-btn { background: var(--bq-page-bg, #FDFCFB) !important; color: var(--bq-ink-soft, #5B5F6B) !important;  }

@media (prefers-reduced-motion: reduce) {
    .buyaca-app .bq-publish-option,
    .buyaca-app .buyaca-bottom-nav-item { transition-duration: 0ms !important; }
}