#bn-consent-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Below the floating action buttons (WhatsApp/chat, z-index ~1001+) so
       they stay reachable if this banner is showing, but still above
       ordinary page content. */
    z-index: 500;
    background: #111827;
    color: #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    padding: 14px 20px;
}
/* Clears the app-style mobile bottom nav (.mob-bottom-nav, 56px + safe-area)
   instead of sitting at bottom:0 underneath/on top of it, which completely
   hid the nav bar on any page with both (e.g. cart.php). */
@media (max-width: 768px) {
    #bn-consent-banner {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}
.bn-consent-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bn-consent-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.bn-consent-text strong { font-size: .88rem; color: #fff; }
.bn-consent-text span { font-size: .78rem; color: #9ca3af; line-height: 1.5; }
.bn-consent-text a { color: #5eead4; }
.bn-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.bn-consent-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}
.bn-consent-decline { background: transparent; color: #9ca3af; border: 1.5px solid #374151; }
.bn-consent-decline:hover { color: #e5e7eb; border-color: #4b5563; }
.bn-consent-accept { background: linear-gradient(135deg,#0d9488,#115e59); color: #fff; }
.bn-consent-accept:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
    /* the floating chat / WhatsApp buttons sat on top of the consent text; hide them until the visitor answers */
    body:has(#bn-consent-banner) #bn-bubble,
    body:has(#bn-consent-banner) .whatsapp-float { display: none !important; }
    /* Compact: buttons side by side so the banner takes ~1/4 of a phone screen, not 1/3+ */
    #bn-consent-banner { padding: 10px 14px; }
    .bn-consent-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .bn-consent-text { min-width: 0; gap: 2px; }
    .bn-consent-text strong { font-size: .8rem; }
    .bn-consent-text span { font-size: .72rem; line-height: 1.4; }
    .bn-consent-actions { flex-direction: row; }
    .bn-consent-btn { flex: 1; min-height: 44px; padding: 8px 10px; white-space: normal; line-height: 1.2; }
    .bn-consent-decline { flex: 0 0 34%; }
}