/* ================================================
   navbar.css — Navbar Styles (3-row desktop, mobile drawer)
   ================================================ */

/* ── Top utility bar ── */
.navbar-utility { background: var(--color-cream); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.navbar-utility .container { display: flex; align-items: center; justify-content: space-between; }
.utility-left { display: flex; align-items: center; gap: var(--space-2); }
.utility-right { display: flex; align-items: center; gap: var(--space-4); }
.utility-right a { color: var(--color-text-secondary); transition: color var(--transition-fast); }
.utility-right a:hover { color: var(--color-primary); }

/* ── Main navbar ── */
#navbar { background: var(--color-white); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 200; }
.navbar-main { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.navbar-main .container { display: flex; align-items: center; gap: var(--space-6); }

/* Logo */
.navbar-logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; flex-shrink: 0; }
.navbar-logo-text { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); letter-spacing: -0.02em; }
.navbar-logo-icon { color: var(--color-primary); }

/* Search */
.navbar-search { flex: 1; max-width: 520px; position: relative; }
.navbar-search input { width: 100%; padding: var(--space-3) var(--space-4); padding-right: 44px; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--text-sm); transition: border-color var(--transition-fast); }
.navbar-search input:focus { outline: none; border-color: var(--color-primary); background: var(--color-white); }
.search-icon-btn { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); background: none; padding: var(--space-1); }

/* Nav actions */
.navbar-actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.nav-action-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-text-secondary); position: relative; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-md); transition: color var(--transition-fast); background: none; border: none; }
.nav-action-btn:hover { color: var(--color-primary); }
.nav-action-btn span.label { font-size: 10px; }
.nav-action-icon { position: relative; display: flex; }
.nav-badge { position: absolute; top: -6px; right: -8px; background: var(--color-primary); color: white; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Notification bell */
.notif-panel { display: none; position: absolute; top: calc(100% + 10px); right: -10px; width: 340px; max-width: 90vw; max-height: 420px; overflow-y: auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200; }
.notif-panel.open { display: block; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.notif-mark-all { background: none; border: none; color: var(--color-primary); font-size: 12px; cursor: pointer; padding: 0; }
.notif-panel-list { max-height: 360px; overflow-y: auto; }
.notif-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.notif-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); cursor: pointer; text-align: left; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-cream); }
.notif-item.unread { background: rgba(74,124,89,0.05); }
.notif-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.notif-item-message { font-size: 12px; color: var(--color-text-secondary); }
.notif-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); margin-right: 6px; }

/* Category bar */
.navbar-categories { overflow-x: auto; border-top: 1px solid var(--color-border); scrollbar-width: none; }
.navbar-categories::-webkit-scrollbar { display: none; }
.category-tabs { display: flex; align-items: center; padding: 0 var(--space-6); }
.category-tab { white-space: nowrap; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-fast); text-decoration: none; display: flex; align-items: center; gap: var(--space-1); }
.category-tab:hover, .category-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Mobile Hamburger ── */
.hamburger-btn { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); cursor: pointer; }
.hamburger-btn span { width: 24px; height: 2px; background: var(--color-text-primary); border-radius: 2px; transition: all var(--transition-base); display: block; }

/* ── Mobile Nav Drawer ── */
.mobile-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 320px; background: var(--color-white); z-index: 1000; transform: translateX(-100%); transition: transform var(--transition-slow); overflow-y: auto; box-shadow: var(--shadow-xl); }
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6); border-bottom: 1px solid var(--color-border); }
.mobile-nav-links { padding: var(--space-4); }
.mobile-nav-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-base); transition: all var(--transition-fast); }
.mobile-nav-link:hover { background: var(--color-bg); color: var(--color-primary); }
.mobile-nav-divider { border-top: 1px solid var(--color-border); margin: var(--space-2) 0; }

/* ── Bottom Tab Bar (mobile only) ── */
.bottom-tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-white); border-top: 1px solid var(--color-border); z-index: 300; padding-bottom: env(safe-area-inset-bottom); }
.bottom-tabs { display: flex; }
.bottom-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2) var(--space-1); color: var(--color-text-muted); font-size: 10px; gap: 2px; cursor: pointer; transition: color var(--transition-fast); position: relative; text-decoration: none; }
.bottom-tab.active, .bottom-tab:hover { color: var(--color-primary); }
.bottom-tab-icon { font-size: 1.2rem; position: relative; }

/* ── Search Dropdown ── */
#search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--color-border); z-index: 300; display: none; overflow: hidden; max-height: 400px; overflow-y: auto; }
#search-dropdown.visible { display: block; animation: fadeInUp 0.2s ease; }
.search-result-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--color-border); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.focused { background: var(--color-bg); }
.search-result-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-cream); flex-shrink: 0; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.search-result-price { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); flex-shrink: 0; }
.search-no-results { padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }