/* ================================================================
   mobile.css — Password Mobile Store
   Bottom App Bar + Mobile-only enhancements
================================================================ */

.mobile-bottom-bar { display: none; }
.mbb-more-sheet    { display: none; }
.mbb-more-backdrop { display: none; }

@media (max-width: 768px) {

    /* ── Page bottom spacing for fixed bar ───────────────── */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        /* Remove overflow from body so position:fixed works on iOS */
        overflow-x: visible !important;
    }

    /* ── Move overflow clip to main-content (not body) ──── */
    /* This prevents horizontal scroll on content while     */
    /* keeping nav + bottom bar truly position:fixed         */
    .main-content {
        overflow-x: clip;
    }

    /* ── Kill top announcement bar on mobile — triple enforce */
    .top-bar {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* ── Ensure nav sticks to absolute top ─────────────── */
    .premium-nav {
        top: 0 !important;
    }

    /* ── Hide hamburger (replaced by bottom bar) ─────────── */
    .mobile-menu-btn { display: none !important; }

    /* ── Clean up nav: hide user/admin links (in bottom bar) */
    a.nav-icon-btn[href$="profile.php"],
    a.nav-icon-btn[href$="login.php"],
    a.nav-icon-btn[href$="logout.php"],
    a.nav-icon-btn[href*="admin/"] { display: none !important; }

    /* ── Fix mobile nav layout: no dead space ────────────── */
    .nav-container {
        justify-content: space-between;
        padding: 0 1rem;
    }
    .nav-actions {
        margin-inline-start: 0 !important;
        gap: 0.3rem;
    }
    /* Make brand logo image smaller on mobile */
    .brand-logo img { height: 38px !important; }

    /* ── Bottom App Bar ───────────────────────────────────── */
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface-s);
        border-top: 1px solid var(--border);
        z-index: 9990;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
    }

    .mbb-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-family: 'Tajawal', 'Cairo', sans-serif;
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--text-muted);
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        padding: 6px 2px 8px;
        transition: color 0.18s, transform 0.15s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .mbb-item i {
        font-size: 1.25rem;
        transition: transform 0.15s, color 0.18s;
        display: block;
    }

    .mbb-item:active { transform: scale(0.9); }

    .mbb-item.active { color: var(--gold); }
    .mbb-item.active i { color: var(--gold); transform: scale(1.12); }

    .mbb-item.active::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: var(--gold);
    }

    /* ── Cart FAB ─────────────────────────────────────────── */
    .mbb-cart-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .mbb-cart-fab {
        width: 52px;
        height: 52px;
        margin-top: -18px;
        background: linear-gradient(135deg, #ff4e00 0%, #c83200 100%);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        box-shadow: 0 4px 18px rgba(255,78,0,0.5), 0 0 0 3px var(--surface-s);
        border: none;
        cursor: pointer;
        color: #fff;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s, box-shadow 0.15s;
        position: relative;
        flex-shrink: 0;
    }

    .mbb-cart-fab:active {
        transform: scale(0.88);
        box-shadow: 0 2px 10px rgba(255,78,0,0.4);
    }

    .mbb-cart-fab i { font-size: 1.35rem; color: #fff; }

    /* ── Cart Badge ───────────────────────────────────────── */
    .mbb-badge {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(35%);
        background: #22c55e;
        color: #fff;
        font-size: 0.6rem;
        font-weight: 900;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        line-height: 1;
        border: 2px solid var(--surface-s);
        transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    }

    .mbb-badge:empty { display: none; }
    .mbb-badge.bounce {
        animation: mbb-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }

    @keyframes mbb-bounce {
        0%   { transform: translateX(35%) scale(0.5); }
        60%  { transform: translateX(35%) scale(1.3); }
        100% { transform: translateX(35%) scale(1); }
    }

    /* ── Lift all floating elements above the bottom bar ─── */
    #pwa-banner      { bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px)) !important; }
    .chatbot-wrapper { bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }
    .chatbot-window  {
        bottom: calc(64px + 78px + env(safe-area-inset-bottom, 0px)) !important;
        width:  calc(100vw - 28px) !important;
        right:  0 !important;
        max-height: calc(100dvh - 200px);
    }
    .whatsapp-float  {
        bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
    }

    /* ── More Sheet Backdrop — sits BELOW bottom bar ─────── */
    .mbb-more-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 9985;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .mbb-more-backdrop.open {
        opacity: 1;
        pointer-events: all;
    }

    /* ── More Sheet — anchored at bottom: 0, slides up ───── */
    /* z-index 9989 keeps it BELOW bottom bar (9990) so bar  */
    /* stays visible on top of the sheet at all times.       */
    .mbb-more-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9989;
        background: var(--surface-s);
        border-radius: 22px 22px 0 0;
        border: 1px solid var(--border);
        border-bottom: none;
        /* Push sheet content above the bottom bar */
        padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px) + 8px);
        transform: translateY(100%);
        transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -10px 50px rgba(0,0,0,0.4);
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mbb-more-sheet.open {
        transform: translateY(0);
    }

    .mbb-more-handle {
        width: 38px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 12px auto 16px;
    }

    .mbb-more-section-title {
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--text-muted);
        padding: 0 16px 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .mbb-more-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 0 12px;
    }

    .mbb-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 6px 12px;
        border-radius: 16px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        text-decoration: none;
        font-family: 'Tajawal', sans-serif;
        font-size: 0.67rem;
        font-weight: 600;
        transition: background 0.15s, transform 0.12s;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        text-align: center;
        line-height: 1.3;
    }
    .mbb-more-item:active {
        transform: scale(0.92);
        background: var(--surface-s);
    }
    .mbb-more-item i {
        font-size: 1.4rem;
        color: var(--gold);
        display: block;
    }

    .mbb-more-divider {
        height: 1px;
        background: var(--border);
        margin: 14px 16px 14px;
    }

    .mbb-more-rows {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0 12px;
    }

    .mbb-more-row-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        border-radius: 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        text-decoration: none;
        font-family: 'Tajawal', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        transition: background 0.15s, transform 0.12s;
    }
    .mbb-more-row-item:active {
        transform: scale(0.97);
        background: var(--surface-s);
    }
    .mbb-more-row-item i {
        font-size: 1.1rem;
        color: var(--gold);
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }
    .mbb-more-row-item .mbb-row-arrow {
        margin-inline-start: auto;
        color: var(--text-muted);
        font-size: 0.75rem;
    }
    .mbb-more-row-item.whatsapp-item i { color: #25D366; }
    .mbb-more-row-item.danger { color: #e74c3c; }
    .mbb-more-row-item.danger i { color: #e74c3c; }

}

@media (max-width: 480px) {
    .mbb-item { font-size: 0.6rem; gap: 2px; }
    .mbb-item i { font-size: 1.15rem; }
    .mbb-cart-fab { width: 48px; height: 48px; margin-top: -16px; }
    .mbb-more-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px; }
    .mbb-more-item { padding: 12px 4px 10px; font-size: 0.62rem; }
    .mbb-more-item i { font-size: 1.25rem; }
}