.navbar-container{*{margin:0;padding:0;box-sizing:border-box;} body{padding-top:80px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background:#f8f9fa;}  .navbar{background:linear-gradient(135deg, #193c76 0%, #2563a8 100%);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:12px 0;transition:transform 0.3s ease-in-out, box-shadow 0.3s;} .navbar-hidden{transform:translateY(-100%);} .navbar:hover{box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);} .navbar-brand{display:flex;align-items:center;gap:12px;color:#fff !important;text-decoration:none;transition:transform 0.3s;flex-shrink:0;} .navbar-brand:hover{transform:translateY(-2px);} .brand-logo-wrap{width:50px;height:50px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:transform 0.3s;margin-left:10px;} .brand-logo-wrap:hover{transform:rotate(5deg) scale(1.05);} .brand-logo{width:100%;height:100%;object-fit:cover;} .brand-text{display:flex;flex-direction:column;line-height:1.2;} .brand-line-small{font-size:11px;font-weight:600;color:rgba(255, 255, 255, 0.9);letter-spacing:1.5px;} .brand-line-main{font-size:16px;font-weight:700;color:#fff;letter-spacing:0.5px;}  .search-bar{position:relative;flex:0 1 auto;min-width:350px;max-width:800px;margin:0 15px;} .search-form{display:flex;align-items:center;position:relative;width:100%;max-width:900px;margin:0 auto;} .search-bar input.form-control{border-radius:25px;border:none;padding:10px 50px 10px 20px;width:100%;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:all 0.3s;background:#fff;} .search-bar input.form-control:focus{outline:none;box-shadow:0 4px 16px rgba(255, 255, 255, 0.3);transform:translateY(-1px);} .search-btn{position:absolute;right:5px;border-radius:20px;border:none;padding:8px 16px;background:#193c76;color:#fff;font-weight:600;transition:all 0.3s;display:flex;align-items:center;gap:6px;} .search-btn:hover{background:#2563a8;transform:scale(1.05);}  .search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;width:100%;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.15);max-height:500px;overflow-y:auto;z-index:2000;display:none;animation:slideDown 0.3s ease;} .search-results.show{display:block;} @keyframes slideDown{from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);}}  .search-result-item{padding:12px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:background 0.2s;} .search-result-item:hover{background:#f8f9fa;} .search-result-item:last-child{border-bottom:none;border-radius:0 0 12px 12px;} .search-result-item:first-child{border-radius:12px 12px 0 0;}  .search-result-item img{width:60px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#f0f0f0;border:1px solid #e0e0e0;}  .search-result-info{flex:1;min-width:0;overflow:hidden;} .search-result-name{font-weight:600;color:#193c76;font-size:14px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .search-result-name mark{background:#fff3cd;color:#193c76;padding:2px 4px;border-radius:3px;} .search-result-price{color:#e74c3c;font-weight:600;font-size:14px;margin-bottom:2px;} .search-result-stock{color:#28a745;font-size:12px;font-weight:500;} .search-result-category{color:#6c757d;font-size:12px;margin-bottom:4px;} .search-result-excerpt{color:#6c757d;font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .search-result-badge{display:inline-block;background:#28a745;color:white;font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600;margin-top:4px;}  .search-view-all{padding:12px 16px;text-align:center;border-top:2px solid #f0f0f0;background:#f8f9fa;border-radius:0 0 12px 12px;} .btn-view-all{display:inline-block;padding:8px 20px;background:#193c76;color:white;text-decoration:none;border-radius:6px;font-weight:600;font-size:14px;transition:all 0.3s;} .btn-view-all:hover{background:#2563a8;color:white;transform:scale(1.05);}  .search-loading, .search-no-results, .search-error{padding:30px 20px;text-align:center;} .search-loading{color:#666;} .search-loading i{font-size:24px;margin-bottom:10px;display:block;} .search-no-results{color:#999;} .search-no-results i{font-size:48px;margin-bottom:15px;display:block;opacity:0.5;} .search-no-results p{margin-bottom:8px;font-weight:600;color:#666;} .search-no-results small{color:#999;font-size:12px;} .search-error{color:#e74c3c;} .search-error i{font-size:32px;margin-bottom:10px;display:block;}  .search-results::-webkit-scrollbar{width:8px;} .search-results::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0;} .search-results::-webkit-scrollbar-thumb{background:#193c76;border-radius:4px;} .search-results::-webkit-scrollbar-thumb:hover{background:#2563a8;}  .navbar-nav{align-items:center;flex-shrink:0;margin-left:10px;margin-right:10px;gap:2px;} .navbar-nav .nav-link{display:flex;align-items:center;gap:6px;color:#fff !important;padding:8px 12px;font-weight:500;transition:all 0.3s;border-radius:10px;position:relative;white-space:nowrap;min-width:auto;flex-shrink:0;} .navbar-nav .nav-link i{font-size:16px;flex-shrink:0;} .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{background:rgba(255, 255, 255, 0.15);color:#fff !important;} .navbar-nav .nav-link::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:#fff;transition:all 0.3s;transform:translateX(-50%);} .navbar-nav .nav-link:hover::after{width:70%;}  .cart-badge{position:absolute;top:0;right:0;background:#e74c3c;color:white;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;line-height:1.2;}  .dropdown-menu{min-width:220px;border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.15);border:none;margin-top:8px;animation:fadeInDown 0.3s ease;} @keyframes fadeInDown{from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);}} .dropdown-item{font-weight:500;color:#193c76;padding:10px 16px;transition:all 0.2s;border-radius:8px;display:flex;align-items:center;gap:10px;} .dropdown-item:hover{background:#f0f4ff;color:#193c76;} .dropdown-item i{width:20px;text-align:center;}  .profile-avatar{width:38px;height:38px;border-radius:10px;object-fit:cover;border:2px solid rgba(255, 255, 255, 0.3);transition:all 0.3s;flex-shrink:0;} .profile-avatar:hover{border-color:#fff;transform:scale(1.1);}  .toggle-btn{border:2px solid #fff;border-radius:25px;padding:8px 16px;font-weight:600;transition:all 0.3s;display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;min-width:auto;} .toggle-btn.logged-out{background:#edd25f;border-color:#edd25f;color:#193c76;} .toggle-btn.logged-out:hover{background:#f4e285;transform:scale(1.05);} .toggle-btn.logged-in{background:#e74c3c;border-color:#e74c3c;color:#fff;} .btn-logout{background:#e74c3c;color:#fff;border-radius:8px;padding:8px 16px;font-weight:600;transition:all 0.3s;} .btn-logout:hover{background:#c0392b;transform:scale(1.05);}  .navbar-toggler{border:none;background:rgba(255, 255, 255, 0.1);padding:8px 12px;border-radius:8px;transition:all 0.3s;flex-shrink:0;} .navbar-toggler:hover{background:rgba(255, 255, 255, 0.2);} .navbar-toggler-icon{background-image:none;width:24px;height:2px;background:#fff;position:relative;display:inline-block;transition:0.3s;} .navbar-toggler-icon::before, .navbar-toggler-icon::after{content:'';position:absolute;width:24px;height:2px;background:#fff;transition:0.3s;} .navbar-toggler-icon::before{top:-8px;} .navbar-toggler-icon::after{top:8px;} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{background:transparent;} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{transform:rotate(45deg);top:0;} .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{transform:rotate(-45deg);top:0;}  .nav-item[data-tooltip]{position:relative;} .nav-item[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.9);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:all 0.3s;z-index:0;} .nav-item[data-tooltip]:hover::after{opacity:1;bottom:-45px;}  .navbar .container-fluid{display:flex;align-items:center;flex-wrap:nowrap;justify-content:space-between;min-width:0;}  .nav-link-text, .login-text{display:inline;transition:opacity 0.3s ease;white-space:nowrap;}   @media (min-width:1800px){.search-bar{max-width:900px;}}  @media (max-width:1500px){.search-bar{max-width:650px;min-width:320px;margin:0 12px;} .navbar-nav .nav-link{padding:8px 10px;gap:5px;}} @media (max-width:1400px){.search-bar{max-width:600px;margin:0 12px;} .brand-logo-wrap{width:45px;height:45px;} .brand-line-small{font-size:10px;} .brand-line-main{font-size:14px;}  .navbar-nav .nav-item:nth-last-child(-n+2) .nav-link-text, .navbar-nav .nav-item:nth-last-child(-n+2) .login-text{display:none;}} @media (max-width:1300px){.search-bar{max-width:550px;margin:0 10px;} .navbar-nav .nav-link{padding:8px 8px;}  .navbar-nav .nav-item:nth-last-child(-n+3) .nav-link-text, .navbar-nav .nav-item:nth-last-child(-n+3) .login-text{display:none;}} @media (max-width:1200px){.search-bar{max-width:500px;min-width:280px;}  .navbar-nav .nav-item:nth-last-child(-n+4) .nav-link-text, .navbar-nav .nav-item:nth-last-child(-n+4) .login-text{display:none;}} @media (max-width:1150px){ .navbar-nav .nav-item:nth-last-child(-n+5) .nav-link-text, .navbar-nav .nav-item:nth-last-child(-n+5) .login-text{display:none;}} @media (max-width:1100px){.search-bar{max-width:450px;}  .navbar-nav .nav-item:nth-child(n+3) .nav-link-text, .navbar-nav .nav-item:nth-child(n+3) .login-text{display:none;} .brand-text{display:none;}} @media (max-width:1050px){ .navbar-nav .nav-item:nth-child(n+2) .nav-link-text, .navbar-nav .nav-item:nth-child(n+2) .login-text{display:none;}} @media (max-width:1036px){ .navbar .container-fluid{flex-wrap:wrap;position:relative;justify-content:space-between;gap:10px;} .navbar-toggler{order:1;margin-left:auto;display:block !important;z-index:1000;} .navbar-brand{order:0;margin-right:auto;} .navbar-container:not(:has(.search-bar)) .brand-text{display:flex !important;flex-direction:column;line-height:1.2;} .navbar-container:has(.search-bar) .brand-text{display:none !important;} .navbar-container:not(:has(.search-bar)) .navbar-brand{gap:10px;} .navbar-container:has(.search-bar) .navbar-brand{gap:0;} .search-bar{margin:8px 0;width:70%;max-width:70%;order:1;flex-basis:100%;min-width:70%;} .search-form{max-width:100%;} .navbar-collapse{background:linear-gradient(135deg, #193c76 0%, #2563a8 100%);border-radius:12px;margin-top:8px;padding:16px !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);order:3;flex-basis:100%;max-height:70vh;overflow-y:auto;overflow-x:hidden;} .navbar-collapse::-webkit-scrollbar{width:6px;} .navbar-collapse::-webkit-scrollbar-track{background:rgba(255, 255, 255, 0.1);border-radius:3px;} .navbar-collapse::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.3);border-radius:3px;} .navbar-collapse::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.5);} .navbar-collapse:not(.show){display:none !important;} .navbar-collapse.show{display:block !important;} .navbar-nav{flex-direction:column;width:100%;gap:8px;} .navbar-nav .nav-item{width:100%;} .navbar-nav .nav-link{width:100%;justify-content:flex-start;padding:12px 16px;}  .nav-link-text, .login-text{display:inline !important;margin-left:10px;} .dropdown-menu{position:static !important;float:none !important;width:100%;margin-top:8px;background:rgba(255, 255, 255, 0.95);} .nav-item[data-tooltip]::after{display:none;} .toggle-btn{width:100%;justify-content:center;padding:10px 16px;} .profile-avatar{width:36px;height:36px;}} @media (max-width:768px){.search-bar{margin:8px 0;} .navbar-brand{margin-right:15px;} .search-results{max-height:400px;} .search-result-item{padding:10px 12px;gap:10px;} .search-result-item img{width:50px;height:50px;} .search-result-name{font-size:13px;} .search-result-price{font-size:13px;}} @media (max-width:576px){body{padding-top:70px;} .brand-logo-wrap{width:40px;height:40px;} .navbar-container:not(:has(.search-bar)) .brand-text .brand-line-small{font-size:9px !important;letter-spacing:1px;} .navbar-container:not(:has(.search-bar)) .brand-text .brand-line-main{font-size:13px !important;letter-spacing:0.3px;} .search-bar input.form-control{padding:8px 45px 8px 16px;font-size:14px;} .search-btn{padding:6px 12px;} .search-text{display:none;} .navbar-brand{margin-right:10px;} .navbar .container-fluid{gap:8px;} .search-results{max-height:300px;left:-10px;right:-10px;width:calc(100% + 20px);} .search-result-item{padding:8px 10px;gap:8px;} .search-result-item img{width:45px;height:45px;} .search-result-name{font-size:12px;} .search-result-price{font-size:12px;} .search-result-stock, .search-result-category, .search-result-excerpt{font-size:11px;}} @media (max-width:417px){.navbar-brand{margin-right:10px;} .brand-logo-wrap{width:36px;height:36px;} .navbar-toggler{padding:6px 10px;} .navbar-container:not(:has(.search-bar)) .brand-text .brand-line-small{font-size:8px !important;letter-spacing:0.8px;} .navbar-container:not(:has(.search-bar)) .brand-text .brand-line-main{font-size:11px !important;} .search-bar{margin:8px 0;width:55%;max-width:55%;min-width:55%;}}  @supports not selector(:has(*)){@media (max-width:1035px){.navbar-container.no-search .brand-text{display:flex !important;} .navbar-container.has-search .brand-text{display:none !important;}}}}