/*
 * PASARMOBKAS - Optimized Navbar CSS
 * Extracted from inline for better caching
 */

/* Navbar Glassmorphism */
.navbar-wrapper{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 8px 32px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.5) inset;transition:all .4s cubic-bezier(.4,0,.2,1)}
.navbar-wrapper.scrolled{background:rgba(255,255,255,.95);box-shadow:0 12px 40px rgba(74,151,130,.12),0 0 0 1px rgba(74,151,130,.1) inset}
.navbar-top{border-bottom:1px solid rgba(0,0,0,.06)}

/* Search Bar */
.search-bar-wrapper{background:linear-gradient(135deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.6));backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:2px solid rgba(74,151,130,.15);border-radius:50px;padding:10px 24px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px rgba(74,151,130,.08)}
.search-bar-wrapper:focus-within{background:rgba(255,255,255,.95);border-color:rgba(74,151,130,.4);box-shadow:0 0 0 4px rgba(74,151,130,.15),0 8px 24px rgba(74,151,130,.15);transform:translateY(-2px)}
.search-bar-wrapper input{font-size:15px}
.search-bar-wrapper input::placeholder{color:rgba(45,55,72,.6)}

/* Icon Buttons */
.icon-btn{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#2d3748;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;background:linear-gradient(135deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.6));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.icon-btn:hover{background:linear-gradient(135deg,#4A9782,#5eac96);color:#fff;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px rgba(74,151,130,.3);border-color:rgba(74,151,130,.3)}
.icon-btn:active{transform:translateY(-1px) scale(1.02)}

/* Badge Count */
.badge-count{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 4px 12px rgba(239,68,68,.4);border:2px solid #fff;animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1);box-shadow:0 4px 12px rgba(239,68,68,.4)}50%{transform:scale(1.1);box-shadow:0 6px 16px rgba(239,68,68,.6)}}

/* Better tablet navbar */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-top .container {
        padding: 0 1rem;
    }
    .search-bar-wrapper {
        padding: 8px 16px;
        max-width: 300px;
    }
    .search-bar-wrapper input {
        font-size: 14px;
    }
    .icon-btn {
        width: 40px;
        height: 40px;
    }
}

/* Mobile Header */
.mobile-header{position:sticky;top:0;z-index:998;background:linear-gradient(to bottom,rgba(255,255,255,.98) 0,rgba(255,255,255,.95));backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(0,0,0,.06);padding:12px 16px;align-items:center;justify-content:space-between;box-shadow:0 4px 20px rgba(0,0,0,.06)}

/* User Menu */
#userMenu{background:linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.9));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 40px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.5) inset}
#userMenu a{transition:all .3s ease}
#userMenu a:hover{background:linear-gradient(135deg,rgba(74,151,130,.1) 0,rgba(94,172,150,.05))}

/* Utility Animations */
.animate-slide-in{animation:slideInFromRight .4s cubic-bezier(.34,1.56,.64,1)}
.animate-fade-in{animation:fadeInScale .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* Logo & Button Effects */
.logo-hover{transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.logo-hover:hover{transform:scale(1.02);filter:drop-shadow(0 8px 16px rgba(74,151,130,.2))}
.btn-glow{transition:all .4s cubic-bezier(.4,0,.2,1)}
.btn-glow:hover{box-shadow:0 8px 24px rgba(74,151,130,.35),0 0 0 3px rgba(74,151,130,.15);transform:translateY(-2px)}