/* ═══════════════════════════════════════════════════════════
   BF Menu v5.1 — Frontend tipo Rappi — CSS limpio desde cero
   ═══════════════════════════════════════════════════════════ */
/* ── Variables del tema ─────────────────────────────────── */
:root {
    --bf-primary:   #CC0000;
    --bf-secondary: #1A1A1A;
    --bf-accent:    #FF6B35;
    --bf-bg:        #EDEDED;
    --bf-card:      #FFFFFF;
    --bf-text:      #1A1A1A;
    --bf-muted:     #737373;
    --bf-border:    #E0E0E0;
    --bf-success:   #16A34A;
    --bf-error:     #DC2626;
    --bf-r:         12px;
    --bf-btn-r:     8px;
    --bf-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bf-shadow:    0 2px 8px rgba(0,0,0,.08);
    --bf-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
}
/* ── Anular padding de Astra en desktop ─────────────────── */
@media(min-width: 600px) {
    .entry-content:has(#bf-menu-app) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        max-width: 100% !important;
    }
    .ast-container:has(#bf-menu-app),
    .site-content:has(#bf-menu-app) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    article:has(#bf-menu-app) {
        padding-top: 0 !important;
    }
    #bf-menu-app .bf-store-header {
        margin-top: 0;
    }
}

/* ── Banners (global — aplica en todos los tamaños) ─────── */
.bf-banners-wrap {
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    position: relative !important;
}
.bf-banner-slide {
    width: 100% !important;
    min-width: 100% !important;
    overflow: hidden !important;
}
.bf-banner-slide img {
    width: 100% !important;
    height: 52vw !important;
    max-height: 280px !important;
    min-height: 140px !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    display: block !important;
}

/* ── Reset dentro del menú ──────────────────────────────── */
#bf-menu-app, #bf-menu-app * { box-sizing: border-box; }

/* ── Reset dentro del menú ──────────────────────────────── */
#bf-menu-app, #bf-menu-app * { box-sizing: border-box; }

/* ── Anular contenedor de Astra en la página del menú ───────
   Astra envuelve el shortcode en .entry-content con max-width
   y padding propios. Lo anulamos para que #bf-menu-app tome
   el control total del layout.
──────────────────────────────────────────────────────────── */
.ast-page-builder-template #bf-menu-app,
.ast-full-width-layout #bf-menu-app,
body.page #bf-menu-app {
    margin-left:  calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

/* Anular el padding del .entry-content de Astra */
.entry-content:has(#bf-menu-app),
.ast-container:has(#bf-menu-app),
.site-content:has(#bf-menu-app) .entry-content {
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Ocultar el título "Menú" que pone Astra/WP encima del shortcode */
.page:has(#bf-menu-app) .entry-header,
.page:has(#bf-menu-app) .entry-title {
    display: none !important;
}


#bf-menu-app { font-family: var(--bf-font); color: var(--bf-text); background: var(--bf-bg); min-height: 100vh; width: 100%; position: relative; overflow-x: hidden; }
/* ── Header ─────────────────────────────────────────────── */
.bf-store-header { background: var(--bf-primary); color: #fff; padding: 0; position: relative; overflow: hidden; }
.bf-store-banner { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; opacity: .85; }
.bf-store-banner-placeholder { width: 100%; aspect-ratio: 16/7; background: var(--bf-secondary); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.bf-store-info { padding: 12px 16px 12px; background: var(--bf-primary); display: flex; align-items: center; gap: 12px; position: relative; min-height: 72px; padding-right: 140px !important; }
.bf-store-logo { width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3); object-fit: cover; flex-shrink: 0; display: block; }
.bf-store-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.bf-store-name { font-size: 20px; font-weight: 800; line-height: 1.2; }
.bf-store-desc { font-size: 12px; opacity: .8; margin-top: 2px; }
.bf-store-meta { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bf-store-meta-item { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 4px; }
.bf-store-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.bf-store-status.open { background: rgba(22,163,74,.25); }
.bf-store-status.closed { background: rgba(220,38,38,.25); }
/* ── Buscador ───────────────────────────────────────────── */
.bf-search-wrap { padding: 12px 16px; background: var(--bf-card); border-bottom: 1px solid var(--bf-border); }
.bf-search-box { display: flex; align-items: center; gap: 8px; background: var(--bf-bg); border: 1.5px solid var(--bf-border); border-radius: 24px; padding: 9px 14px; transition: border-color .2s; }
.bf-search-box:focus-within { border-color: var(--bf-primary); }
.bf-search-icon { color: var(--bf-muted); flex-shrink: 0; }
.bf-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; font-family: var(--bf-font); color: var(--bf-text); }
.bf-search-input::placeholder { color: var(--bf-muted); }

/* ── Categorías sticky ──────────────────────────────────── */
.bf-cats-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10,10,14,.95);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 10px 0;
    width: 100%;
    overflow: visible;
}
/* Placeholder — altura ajustada dinámicamente por JS */
.bf-cats-placeholder {
    height: 60px;
    display: block;
    transition: height .15s ease;
}
.bf-cats-outer { position: relative; }
/* CLAVE: flex-start para que la primera categoría nunca se corte */
.bf-cats-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
}
.bf-cats-scroll::-webkit-scrollbar { display: none; }
.bf-cats-outer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 72px; background: linear-gradient(to right, transparent, rgba(10,10,14,.98)); pointer-events: none; z-index: 2; }
.bf-cats-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255,107,53,.2); border: 1.5px solid rgba(255,107,53,.5); display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; animation: bf-arrow-pulse 1.6s ease-in-out infinite; }
.bf-cats-arrow::after { content: '›'; color: #FF6B35; font-size: 22px; font-weight: 700; line-height: 1; }
@keyframes bf-arrow-pulse { 0%,100%{opacity:.5;transform:translateY(-50%) translateX(0)} 50%{opacity:1;transform:translateY(-50%) translateX(3px)} }
.bf-cat-tab { flex-shrink: 0; padding: 10px 20px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.5); cursor: pointer; white-space: nowrap; transition: all .2s ease; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.1); border-radius: 50px; font-family: var(--bf-font); }
.bf-cat-tab:hover:not(.active) { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); transform: translateY(-1px); }
.bf-cat-tab:active { opacity: .7; }
.bf-cat-tab.active { color: #fff; background: var(--bf-primary); border-color: var(--bf-primary); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.bf-cat-icon { font-size: 15px; }
.bf-cat-arrow { font-size: 11px; margin-left: 4px; transition: transform .2s; }
.bf-cat-parent.active .bf-cat-arrow { transform: rotate(180deg); }
.bf-subcats-bar { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 16px 8px; background: rgba(30,30,40,.98); border-top: 2px solid var(--bf-primary); justify-content: flex-start; flex-wrap: nowrap; }
.bf-subcats-bar::-webkit-scrollbar { display: none; }
.bf-cat-child { font-size: 13px !important; padding: 7px 16px !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.7) !important; flex-shrink: 0 !important; }
.bf-cat-child:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.bf-cat-child.active { background: var(--bf-primary) !important; border-color: var(--bf-primary) !important; color: #fff !important; }
.bf-menu-section-parent { padding: 0; }
.bf-menu-section-parent-title { font-size: 20px; font-weight: 900; padding: 24px 16px 8px; color: var(--bf-primary); border-bottom: 2px solid var(--bf-primary); margin-bottom: 4px; }
/* ── Banners ────────────────────────────────────────────── */

.bf-banners-wrap::-webkit-scrollbar { display: none; }


/* ── Sugeridos ──────────────────────────────────────────── */
.bf-featured-section { padding: 16px; }
.bf-section-title { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.bf-featured-scroll { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.bf-featured-scroll::-webkit-scrollbar { display: none; }
.bf-featured-card { flex-shrink: 0; width: 160px; background: var(--bf-card); border-radius: var(--bf-r); overflow: hidden; box-shadow: var(--bf-shadow); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.bf-featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.13); }
.bf-featured-card:active { transform: scale(.97); }
.bf-featured-img { width: 100%; height: 100px; object-fit: cover; object-position: center top; background: var(--bf-bg); display: block; filter: contrast(1.08) saturate(1.15) brightness(1.03); transition: filter .25s ease; }
.bf-featured-card:hover .bf-featured-img { filter: contrast(1.12) saturate(1.2) brightness(1.06); }
.bf-featured-img-ph { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--bf-bg); font-size: 32px; }
.bf-featured-info { padding: 8px 10px; }
.bf-featured-name { font-size: 12px; font-weight: 700; line-height: 1.3; }
.bf-featured-price { font-size: 13px; font-weight: 800; color: var(--bf-primary); margin-top: 4px; }
/* ── Secciones del menú ─────────────────────────────────── */
.bf-menu-section { padding: 0 12px 8px; }
.bf-menu-section-title { font-size: 18px; font-weight: 800; padding: 20px 4px 12px; color: var(--bf-text); }
/* ── Card de producto ───────────────────────────────────── */
.bf-product-card {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    padding: 16px; background: var(--bf-card); border-radius: 14px; margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, opacity .15s;
}
.bf-product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.bf-product-card:active { transform: scale(.98); opacity: .85; }
.bf-product-info { flex: 1; min-width: 0; }
.bf-product-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bf-text); }
.bf-product-desc { font-size: 12px; color: var(--bf-muted); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bf-product-price { font-size: 16px; font-weight: 800; color: var(--bf-primary); margin-top: 8px; }
.bf-product-img-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bf-product-img { width: 110px; height: 110px; min-width: 110px; min-height: 110px; border-radius: 12px; object-fit: cover; object-position: center top; background: var(--bf-bg); display: block; filter: contrast(1.08) saturate(1.15) brightness(1.03); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; }
.bf-product-card:hover .bf-product-img { filter: contrast(1.12) saturate(1.2) brightness(1.06); transform: scale(1.04); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.bf-product-img-ph { width: 110px; height: 110px; min-width: 110px; min-height: 110px; border-radius: 12px; background: var(--bf-bg); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.bf-product-add-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bf-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.2); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; flex-shrink: 0; position: relative; overflow: visible; }
.bf-product-add-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--bf-primary); opacity: 0.35; z-index: -1; animation: bf-pulse 2s ease-out infinite; }
@keyframes bf-pulse { 0% { transform: scale(1); opacity: 0.35; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
.bf-product-add-btn:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.bf-product-add-btn:active { transform: scale(.92); }
/* ── Modal de producto ──────────────────────────────────── */
.bf-product-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999999; align-items: flex-end; justify-content: center; }
.bf-product-modal-overlay.open { display: flex; }
.bf-product-modal { background: var(--bf-card); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 95vh; display: flex; flex-direction: column; overflow: hidden; }
.bf-product-modal-img { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; max-width: 100px !important; max-height: 100px !important; border-radius: 50% !important; object-fit: cover !important; object-position: center top !important; border: 3px solid #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important; display: block !important; flex-shrink: 0 !important; flex-grow: 0 !important; margin: 0 auto !important; filter: contrast(1.08) saturate(1.12) brightness(1.02) !important; }
#bf-pmodal-img-wrap { background: transparent !important; padding: 16px 0 8px !important; display: flex !important; justify-content: center !important; align-items: center !important; overflow: visible !important; flex-shrink: 0 !important; max-height: none !important; }
.bf-product-modal-img-ph { width: 100%; height: 100px; max-height: 100px; flex-shrink: 0; background: var(--bf-bg); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.bf-product-modal-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.bf-product-modal-name { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.bf-product-modal-desc { font-size: 14px; color: var(--bf-muted); line-height: 1.6; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bf-product-modal-price { font-size: 22px; font-weight: 800; color: var(--bf-primary); margin-bottom: 16px; }
.bf-product-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; font-weight: 700; }
/* ── Modificadores ──────────────────────────────────────── */
.bf-mod-group { margin-bottom: 16px; }
.bf-mod-group-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bf-mod-required { background: var(--bf-primary); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.bf-mod-optional { background: var(--bf-bg); color: var(--bf-muted); font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.bf-mod-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bf-border); cursor: pointer; gap: 8px; }
.bf-mod-option:last-child { border-bottom: none; }
.bf-mod-option-name { font-size: 14px; flex: 1; min-width: 0; }
.bf-mod-option-price { font-size: 13px; color: var(--bf-success); font-weight: 600; white-space: nowrap; min-width: 60px; text-align: right; flex-shrink: 0; }
.bf-mod-option-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bf-border); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.bf-mod-option-check.checked { background: var(--bf-primary); border-color: var(--bf-primary); color: #fff; }
.bf-mod-option-check.checked::after { content: '✓'; font-size: 12px; font-weight: 700; }
.bf-notes-wrap { margin-top: 10px; border-top: 1px solid var(--bf-border); padding-top: 10px; }
.bf-notes-label { font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 8px; }
.bf-item-notes { width: 100%; padding: 10px 12px; border: 1.5px solid var(--bf-border); border-radius: var(--bf-r); font-size: 13px; font-family: var(--bf-font); color: var(--bf-text); background: var(--bf-bg); resize: none; outline: none; display: block; }
.bf-item-notes:focus { border-color: var(--bf-primary); }
/* ── Cantidad ───────────────────────────────────────────── */
.bf-qty-ctrl { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--bf-border); border-radius: 24px; overflow: hidden; }
.bf-qty-btn { width: 36px; height: 36px; border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--bf-primary); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bf-qty-btn:active { background: var(--bf-bg); }
.bf-qty-val { min-width: 32px; text-align: center; font-size: 15px; font-weight: 700; }
.bf-product-modal-foot { padding: 12px 16px; border-top: 1px solid var(--bf-border); background: var(--bf-card); display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)); }
.bf-add-to-cart-btn { flex: 1; padding: 13px; background: var(--bf-primary); color: #fff; border: none; border-radius: var(--bf-btn-r); font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--bf-font); transition: background .15s; display: flex; align-items: center; justify-content: space-between; }
.bf-add-to-cart-btn:active { opacity: .85; }
/* ── Carrito flotante ───────────────────────────────────── */
.bf-cart-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; z-index: 200; padding: 12px 16px; background: transparent; padding-bottom: calc(12px + env(safe-area-inset-bottom,0px)); pointer-events: none; }
.bf-cart-bar.visible { pointer-events: all; }
.bf-cart-btn { width: 100%; padding: 14px 18px; background: var(--bf-secondary); color: #fff; border: none; border-radius: var(--bf-r); font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--bf-font); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--bf-shadow-lg); opacity: 0; transform: translateY(100%); transition: all .25s cubic-bezier(.4,0,.2,1); }
.bf-cart-bar.visible .bf-cart-btn { opacity: 1; transform: translateY(0); }
.bf-cart-btn:active { transform: scale(.98); }
.bf-cart-count { background: var(--bf-primary); color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bf-cart-total { font-size: 16px; font-weight: 800; }
/* ── Checkout ───────────────────────────────────────────── */
.bf-checkout-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99999; align-items: flex-end; justify-content: center; }
.bf-checkout-overlay.open { display: flex; }
.bf-checkout-modal { background: var(--bf-bg); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 95vh; display: flex; flex-direction: column; overflow: hidden; }
.bf-checkout-head { background: var(--bf-card); padding: 16px 16px 14px; border-bottom: 1px solid var(--bf-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.bf-checkout-title { font-size: 17px; font-weight: 800; }
.bf-checkout-close { width: 32px; height: 32px; border-radius: 50%; background: #F0F0F0; border: none; font-size: 16px; cursor: pointer; color: #1A1A1A; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-top: 4px; }
.bf-checkout-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bf-checkout-section { background: var(--bf-card); margin-bottom: 8px; padding: 16px; }
.bf-checkout-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1A1A1A; margin-bottom: 12px; }
.bf-cart-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bf-border); }
.bf-cart-item:last-child { border-bottom: none; }
.bf-cart-item-info { flex: 1; }
.bf-cart-item-name { font-size: 14px; font-weight: 600; }
.bf-cart-item-mods { font-size: 11px; color: #444; margin-top: 2px; }
.bf-cart-item-price { font-size: 14px; font-weight: 700; }
.bf-cart-item-remove { width: 26px; height: 26px; border-radius: 50%; background: #F0F0F0; border: none; color: #555; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bf-checkout-field { margin-bottom: 12px; }
.bf-checkout-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1A1A1A; margin-bottom: 5px; }
.bf-checkout-input, .bf-checkout-select, .bf-checkout-textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--bf-border); border-radius: var(--bf-btn-r); font-size: 14px; font-family: var(--bf-font); color: var(--bf-text); background: var(--bf-card); transition: border-color .15s; -webkit-appearance: none; }
.bf-checkout-input:focus, .bf-checkout-select:focus, .bf-checkout-textarea:focus { outline: none; border-color: var(--bf-primary); }
.bf-field-error { border-color: var(--bf-error) !important; background: #FFF0F0 !important; }
.bf-checkout-textarea { resize: none; min-height: 72px; }
.bf-checkout-field-hint { font-size: 11px; color: #1A1A1A; margin-top: 4px; }
/* ── Propinas ───────────────────────────────────────────── */
.bf-tips-section { background: #FFF8F5; border-radius: 12px; padding: 14px; border: 1px solid #FFD5C0; }
.bf-tips-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-tip-option { flex: 1; min-width: 72px; padding: 11px 8px; border-radius: 50px; text-align: center; cursor: pointer; transition: all .18s; font-size: 12px; font-weight: 700; background: #fff; border: 1.5px solid var(--bf-border); color: var(--bf-muted); }
.bf-tip-option.selected { background: #FF6B35; border-color: #FF6B35; color: #fff; box-shadow: 0 4px 12px rgba(255,107,53,.3); }
.bf-tip-option-label { display: block; margin-bottom: 3px; font-size: 11px; line-height: 1.3; }
.bf-tip-option-value { font-size: 13px; font-weight: 800; }
.bf-tip-option.selected .bf-tip-option-label { color: rgba(255,255,255,.85); }
/* ── Métodos de pago ────────────────────────────────────── */
.bf-payment-options { display: flex; flex-direction: column; gap: 8px; }
.bf-payment-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--bf-border); border-radius: var(--bf-btn-r); cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; background: var(--bf-card); }
.bf-payment-option:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.bf-payment-option.selected { border-color: var(--bf-primary); background: #FFF8F8; }
.bf-payment-logo { font-size: 24px; }
.bf-payment-info { flex: 1; }
.bf-payment-name { font-size: 14px; font-weight: 700; }
.bf-payment-detail { font-size: 12px; color: #444; margin-top: 2px; }
.bf-payment-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bf-border); background: transparent; transition: all .15s; }
.bf-payment-option.selected .bf-payment-check { background: var(--bf-primary); border-color: var(--bf-primary); display: flex; align-items: center; justify-content: center; }
.bf-payment-option.selected .bf-payment-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
/* ── Resumen ────────────────────────────────────────────── */
.bf-order-summary { padding: 14px 0; }
.bf-summary-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: #1A1A1A; }
.bf-summary-row.total { font-size: 18px; font-weight: 800; color: var(--bf-text); border-top: 2px solid var(--bf-border); padding-top: 10px; margin-top: 4px; }
.bf-checkout-foot { background: var(--bf-card); padding: 14px 16px; border-top: 1px solid var(--bf-border); flex-shrink: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom,0px)); }
.bf-confirm-btn { width: 100%; padding: 16px; background: var(--bf-primary); color: #fff; border: none; border-radius: var(--bf-btn-r); font-size: 16px; font-weight: 800; cursor: pointer; font-family: var(--bf-font); display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.bf-confirm-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(204,0,0,.3); }
.bf-confirm-btn:active:not(:disabled) { transform: scale(.98); }
.bf-confirm-btn:disabled { background: var(--bf-muted); cursor: not-allowed; }
/* ── Modal pago ─────────────────────────────────────────── */
.bf-payment-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 800; align-items: flex-end; justify-content: center; }
.bf-payment-modal-overlay.open { display: flex; }
.bf-payment-modal { background: var(--bf-card); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.bf-payment-modal-head { background: var(--bf-primary); color: #fff; padding: 16px 20px; font-size: 17px; font-weight: 800; text-align: center; flex-shrink: 0; }
.bf-payment-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.bf-payment-details-card { background: var(--bf-bg); border-radius: var(--bf-r); padding: 18px; margin-bottom: 16px; text-align: center; }
.bf-payment-icon { font-size: 44px; margin-bottom: 8px; }
.bf-payment-name-big { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.bf-payment-number { font-size: 22px; font-weight: 800; color: var(--bf-primary); letter-spacing: 2px; }
.bf-payment-holder { font-size: 14px; color: #1A1A1A; margin-top: 4px; }
.bf-payment-instructions { font-size: 13px; color: #1A1A1A; line-height: 1.6; background: var(--bf-bg); border-radius: var(--bf-btn-r); padding: 12px; margin-top: 12px; }
.bf-payment-total-big { font-size: 28px; font-weight: 900; color: var(--bf-primary); text-align: center; margin: 16px 0; padding: 14px; background: #FFF0F0; border-radius: var(--bf-r); }
.bf-order-summary-mini { font-size: 13px; color: #1A1A1A; margin-bottom: 16px; line-height: 1.8; }
.bf-send-wa-btn { width: 100%; padding: 16px; background: #25D366; color: #fff; border: none; border-radius: var(--bf-btn-r); font-size: 16px; font-weight: 800; cursor: pointer; font-family: var(--bf-font); display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; transition: transform .18s ease, box-shadow .18s ease; }
.bf-send-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,.35); }
.bf-payment-modal-note { font-size: 11px; color: #444; text-align: center; line-height: 1.6; }
.bf-sent-confirm-btn { width: 100%; padding: 12px; background: var(--bf-bg); color: #444; border: 1.5px solid var(--bf-border); border-radius: var(--bf-btn-r); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--bf-font); margin-top: 8px; }
/* ── Éxito ──────────────────────────────────────────────── */
.bf-success-screen { display: none; position: fixed; inset: 0; background: var(--bf-card); z-index: 900; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; text-align: center; }
.bf-success-screen.show { display: flex; }
.bf-success-icon { font-size: 72px; margin-bottom: 16px; animation: bf-bounce .5s ease; }
.bf-success-title { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
.bf-success-sub { font-size: 15px; color: var(--bf-muted); line-height: 1.6; margin-bottom: 24px; }
.bf-success-number { font-size: 28px; font-weight: 900; color: var(--bf-primary); }
.bf-success-back { padding: 14px 32px; background: var(--bf-primary); color: #fff; border: none; border-radius: var(--bf-btn-r); font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--bf-font); margin-top: 16px; }
@keyframes bf-bounce { 0%{transform:scale(0)} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
/* ── Búsqueda resultados ────────────────────────────────── */
.bf-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--bf-card); box-shadow: var(--bf-shadow-lg); border-radius: 0 0 var(--bf-r) var(--bf-r); max-height: 50vh; overflow-y: auto; }
.bf-search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--bf-border); transition: background .15s ease, transform .15s ease; }
.bf-search-result-item:last-child { border-bottom: none; }
.bf-search-result-item:hover { background: var(--bf-bg); transform: translateX(4px); }
.bf-search-result-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bf-bg); flex-shrink: 0; }
.bf-search-result-ph { width: 44px; height: 44px; border-radius: 8px; background: var(--bf-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; }
/* ── Cliente ────────────────────────────────────────────── */
.bf-customer-found { background: #F0FFF4; border: 1.5px solid #86EFAC; border-radius: var(--bf-btn-r); padding: 12px 14px; margin-top: 8px; display: none; }
.bf-customer-found.show { display: block; }
.bf-customer-found-name { font-weight: 700; font-size: 14px; color: #15803D; }
.bf-customer-found-meta { font-size: 12px; color: #166534; margin-top: 2px; }
/* ── Spinner / Toast / Loading ──────────────────────────── */
.bf-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: bf-spin .6s linear infinite; }
.bf-spinner--dark { width: 28px; height: 28px; border-width: 3px; border-color: rgba(204,0,0,.15); border-top-color: var(--bf-primary); }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bf-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--bf-secondary); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 9999999; white-space: nowrap; box-shadow: var(--bf-shadow-lg); animation: bf-toast-in .2s ease; max-width: 90vw; text-align: center; }
.bf-toast--error { background: var(--bf-error); }
@keyframes bf-toast-in { from{transform:translateX(-50%) translateY(10px);opacity:0} to{transform:translateX(-50%);opacity:1} }
.bf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; color: var(--bf-muted); }
.bf-empty-state { text-align: center; padding: 40px 24px; color: var(--bf-muted); }
.bf-closed-banner { background: #FEF2F2; border: 1.5px solid #FECACA; border-radius: var(--bf-r); padding: 14px 16px; margin: 12px 16px; text-align: center; }
.bf-closed-banner-icon { font-size: 28px; margin-bottom: 6px; }
.bf-closed-banner-title { font-size: 15px; font-weight: 700; color: var(--bf-error); }
.bf-closed-banner-sub { font-size: 13px; color: var(--bf-muted); margin-top: 4px; }

/* ── Botón instalar PWA ─────────────────────────────────── */
#bf-pwa-install-btn {
    position: fixed;
    bottom: 90px;
    right: 16px;
    z-index: 300;
    background: var(--bf-primary, #CC0000);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--bf-font, -apple-system, sans-serif);
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}
#bf-pwa-install-btn.visible { display: flex; }
#bf-pwa-install-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
#bf-pwa-install-btn:active { transform: scale(.96); }
@media (max-width: 480px) {
    #bf-pwa-install-btn { bottom: 80px; right: 12px; padding: 10px 14px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   PC — min-width: 900px
   ════════════════════════════════════════════════════════════ */
@media(min-width: 900px) {
    #bf-menu-app { max-width: 100%; display: block; }
    #bf-menu-app .bf-cats-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
    #bf-menu-app 
    #bf-menu-app .bf-cat-tab { padding: 11px 24px; font-size: 15px; }
    #bf-menu-app .bf-featured-section { max-width: 900px; margin: 0 auto; padding: 20px 32px; }
    #bf-menu-app #bf-menu-sections { max-width: 900px; margin: 0 auto; padding: 0 32px 32px; }
    #bf-menu-app .bf-menu-section { padding: 0; }
    #bf-menu-app .bf-menu-section-title { font-size: 22px; padding: 28px 0 16px; }
    #bf-menu-app .bf-product-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 24px !important; padding: 20px 24px !important; margin-bottom: 16px !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; }
    #bf-menu-app .bf-product-info { flex: 1 !important; min-width: 0 !important; }
    #bf-menu-app .bf-product-name { font-size: 17px !important; }
    #bf-menu-app .bf-product-desc { font-size: 14px !important; -webkit-line-clamp: 3 !important; }
    #bf-menu-app .bf-product-price { font-size: 18px !important; margin-top: 10px !important; }
    #bf-menu-app .bf-product-img-wrap { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 140px !important; }
    #bf-menu-app .bf-product-img { width: 140px !important; height: 140px !important; min-width: 140px !important; min-height: 140px !important; max-width: 140px !important; max-height: 140px !important; border-radius: 14px !important; object-fit: cover !important; display: block !important; filter: contrast(1.08) saturate(1.15) brightness(1.03) !important; transition: transform .25s ease, filter .25s ease !important; }
    #bf-menu-app .bf-product-card:hover .bf-product-img { filter: contrast(1.12) saturate(1.2) brightness(1.06) !important; transform: scale(1.05) !important; }
    #bf-menu-app .bf-product-img-ph { width: 140px !important; height: 140px !important; min-width: 140px !important; min-height: 140px !important; border-radius: 14px !important; font-size: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--bf-bg) !important; }
    #bf-menu-app .bf-product-add-btn { width: 48px !important; height: 48px !important; font-size: 28px !important; position: static !important; }
    #bf-menu-app ~ .bf-cart-bar, .bf-cart-bar { max-width: 900px; left: 50%; transform: translateX(-50%); }
    .bf-product-modal-overlay, .bf-checkout-overlay, .bf-payment-modal-overlay { align-items: center; padding: 20px; }
    .bf-product-modal, .bf-checkout-modal, .bf-payment-modal { border-radius: 20px; max-height: 85vh; max-width: 560px; }
}
/* ── Banner auto-slide en desktop ──────────────────────────
   El auto-slide se controla desde menu.js.
   El CSS define el comportamiento de scroll suave.
──────────────────────────────────────────────────────────── */

/* Indicador de banners (dots) */
.bf-banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
}
.bf-banner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bf-border);
    cursor: pointer;
    transition: background .2s, transform .2s;
    border: none;
    padding: 0;
}
.bf-banner-dot.active {
    background: var(--bf-primary);
    transform: scale(1.3);
}

/* ── Upsells del checkout ───────────────────────────────────── */
.bf-upsell-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.bf-upsell-item { display:flex; align-items:center; gap:12px; background:var(--bf-bg); border:1px solid var(--bf-border); border-radius:12px; padding:10px; cursor:pointer; transition:background .15s; }
.bf-upsell-item:active { background:var(--bf-border); }
.bf-upsell-img-wrap { flex-shrink:0; width:56px; height:56px; border-radius:8px; overflow:hidden; background:var(--bf-border); }
.bf-upsell-img { width:56px; height:56px; object-fit:cover; object-position:center top; display:block; }
.bf-upsell-img-ph { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.bf-upsell-info { flex:1; min-width:0; }
.bf-upsell-label { font-size:11px; color:var(--bf-muted); margin-bottom:2px; }
.bf-upsell-name { font-size:13px; font-weight:700; color:var(--bf-text); line-height:1.3; }
.bf-upsell-price { font-size:13px; font-weight:800; color:var(--bf-primary); margin-top:2px; }
.bf-upsell-btn { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--bf-primary); color:#fff; border:none; font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }