/* ============================================================
   TAMBUA AFRIKA — PREMIUM CROSS-DEVICE FIX LAYER
   Load this file AFTER Bootstrap and AFTER style.css:

   <link rel="stylesheet" href="{% static 'css/style.css' %}">
   <link rel="stylesheet" href="{% static 'css/premium-responsive-fixes.css' %}">

   Nothing in style.css needs to be deleted. This file only
   overrides the specific rules that were causing:
     1. Mobile nav breaking on browsers without :has() support
        (older Samsung Internet / Android WebView)
     2. The footer social pills getting silently overridden by
        a later duplicate .ta-footer-social block
     3. The floating WhatsApp button being fragile on iOS Safari
     4. No left-side Chatbot button existing yet
   ============================================================ */

/* ------------------------------------------------------------
   1. MOBILE NAV — class-based, not :has()-dependent
   The tiny JS in base.html toggles `.nav-open` on .navbar
   when Bootstrap's collapse opens/closes. This produces the
   exact same full-screen overlay on EVERY browser, including
   ones that don't support :has().
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .navbar.nav-open .navbar-brand {
        opacity: 0;
        pointer-events: none;
    }
    .navbar.nav-open .navbar-toggler {
        position: fixed;
        top: 1rem;
        right: 1rem;
        margin-left: 0;
        z-index: 1060;
    }
    /* Belt-and-braces: keep the old :has() version too, for
       browsers that support it — the two never conflict since
       they produce identical results. */
}

/* Consolidated collapse panel behaviour — single source of truth */
@media (max-width: 991px) {
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important; /* dvh = correct on iOS/Android toolbars */
        background-color: #111 !important;
        z-index: 1050 !important;
        margin: 0 -1.5rem -1px !important;
        padding: 2rem 1.5rem 1.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.3s ease !important;
        transform: translateY(-100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .navbar-collapse.show {
        transform: translateY(0) !important;
    }
}

/* ------------------------------------------------------------
   2. FOOTER — deduplicate the social pills + tighten breakpoints
   Restores the pill-with-label style as the final word, and
   adds a clean single-column stack down to very small phones
   (iPhone SE 375px, small Samsung 360px).
   ------------------------------------------------------------ */
.ta-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 0.8rem;
}
.ta-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    background: transparent;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.ta-footer-social i {
    font-size: 0.9rem;
    color: inherit;
}
.ta-footer-social-label {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.ta-footer-social:hover {
    border-color: var(--theme-primary);
    color: white;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}
.ta-footer-social:hover .ta-footer-social-label {
    color: white;
}

@media (max-width: 900px) {
    .ta-footer-main {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 640px) {
    .ta-footer-main {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
        text-align: left;
    }
    .ta-footer-brand-copy {
        max-width: 100% !important;
    }
    .ta-footer-locations {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.9rem !important;
    }
    .ta-footer-location-sep {
        display: none !important;
    }
    .ta-footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ta-footer-form-row {
        flex-wrap: nowrap;
    }
}

/* ------------------------------------------------------------
   3 & 4. FLOATING ACTION BUTTONS — WhatsApp (right) + Chatbot (left)
   One shared, defensive positioning system so both buttons are
   guaranteed visible on iOS Safari, Chrome Android and Samsung
   Internet, above every other fixed layer in the app (nav
   overlay 1050, dashboard sidebar 1050, search overlay 9999).
   ------------------------------------------------------------ */
.floating-action-btn {
    position: fixed !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    color: white;
    z-index: 10000 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    -webkit-transform: translateZ(0); /* forces its own compositor layer on iOS */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
.floating-action-btn:hover {
    transform: translateZ(0) scale(1.08);
    color: white;
}
.floating-action-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

.floating-whatsapp {
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    background: #25d366;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
    animation: ta-fab-pulse-wa 2.2s infinite;
}
.floating-whatsapp:hover {
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
}
.floating-chatbot-toggle {
    left: calc(24px + env(safe-area-inset-left, 0px)) !important;
    background: var(--col-black, #0d0d0d);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.floating-chatbot-toggle:hover {
    background: #1a1a1a;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.floating-chatbot-toggle.is-active {
    background: var(--theme-primary, #0d0d0d);
}

.chatbot-toggle-icon {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.chatbot-toggle-icon svg {
    position: absolute;
    width: 26px;
    height: 26px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.chatbot-icon-bot {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.chatbot-icon-close {
    opacity: 0;
    width: 18px;
    height: 18px;
    transform: scale(0.6) rotate(-45deg);
}
.floating-chatbot-toggle.is-active .chatbot-icon-bot {
    opacity: 0;
    transform: scale(0.6) rotate(45deg);
}
.floating-chatbot-toggle.is-active .chatbot-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-toggle-icon svg { transition: none; }
}

@keyframes ta-fab-pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* On very narrow phones, shrink slightly + tuck closer to the edge
   so neither button ever crowds page content or each other. */
@media (max-width: 380px) {
    .floating-action-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .floating-whatsapp { right: calc(16px + env(safe-area-inset-right, 0px)) !important; }
    .floating-chatbot-toggle { left: calc(16px + env(safe-area-inset-left, 0px)) !important; }
}

/* When the full-screen mobile nav is open, hide both FABs so they
   never float on top of the menu overlay. */
.navbar-collapse.show ~ * .floating-action-btn,
body:has(.navbar-collapse.show) .floating-action-btn {
    opacity: 0;
    pointer-events: none;
}
/* Fallback for browsers without :has() — JS also toggles this class on <body> */
body.nav-open .floating-action-btn {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .floating-whatsapp { animation: none; }
    .floating-action-btn:hover { transform: translateZ(0); }
}