@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";:root{--primary-blue: #0b3d91;--accent-blue: #0d6efd;--light-blue: #4ea8ff;--text-main: #1f2937;--text-muted: #6b7280;--nav-bg: rgba(255, 255, 255, .85);--glass-border: rgba(255, 255, 255, .3);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);--shadow-md: 0 10px 25px rgba(11, 61, 145, .08);--transition-fast: .2s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-sm);padding:0 5%;transition:all var(--transition-smooth)}.navbar{max-width:1440px;margin:0 auto;height:80px;display:flex;justify-content:space-between;align-items:center;gap:2rem}.navbar .logo{text-decoration:none;flex-shrink:0}.navbar .logo h1{font-size:28px;font-weight:900;letter-spacing:-1px;margin:0;display:flex;align-items:center}.logo-bron{color:var(--primary-blue)}.logo-x{color:#ff3b30;position:relative}.navbar-menu{display:flex;list-style:none;gap:32px;margin:0;padding:0}.navbar-menu a{text-decoration:none;color:var(--text-muted);font-size:16px;font-weight:600;position:relative;padding:8px 0;transition:color var(--transition-fast)}.navbar-menu a:hover,.navbar-menu a.active{color:var(--primary-blue)}.navbar-menu a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent-blue);transition:width var(--transition-smooth);border-radius:2px}.navbar-menu a:hover:after,.navbar-menu a.active:after{width:100%}.search-bar{flex:1;max-width:500px;position:relative}.navbar-right{display:flex;align-items:center;gap:24px}.cart-icon-container{position:relative;display:flex;align-items:center;transition:transform var(--transition-fast)}.cart-icon-container:hover{transform:translateY(-2px)}.cart-icon{width:28px;height:28px;object-fit:contain}.cart-badge{position:absolute;top:-6px;right:-10px;background:#ff3b30;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white;box-shadow:0 2px 8px #ff3b304d}.signin{background:var(--primary-blue);color:#fff;border:none;padding:10px 24px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 15px #0b3d9133}.signin:hover{background:var(--accent-blue);transform:translateY(-2px);box-shadow:0 6px 20px #0d6efd4d}.navbar-profile{position:relative;cursor:pointer}.profile-pic{width:40px;height:40px;border-radius:50%;border:2px solid var(--glass-border);transition:border-color var(--transition-fast)}.navbar-profile:hover .profile-pic{border-color:var(--accent-blue)}.nav-profile-dropdown{position:absolute;top:130%;right:0;background:#fff;min-width:180px;padding:12px;border-radius:12px;box-shadow:var(--shadow-md);list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition-smooth);border:1px solid rgba(0,0,0,.05)}.nav-profile-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.nav-profile-dropdown li{padding:10px 12px;display:flex;align-items:center;gap:12px;border-radius:8px;color:var(--text-main);font-weight:600;font-size:14px;transition:background var(--transition-fast)}.nav-profile-dropdown li:hover{background:#f3f4f6}.nav-profile-dropdown hr{margin:8px 0;border:none;border-top:1px solid #f3f4f6}.hamburger-btn{display:none;flex-direction:column;gap:6px;background:transparent;border:none;cursor:pointer;padding:8px;z-index:1002}.bar{width:24px;height:2px;background:var(--primary-blue);border-radius:2px;transition:all var(--transition-smooth)}.bar.open:nth-child(1){transform:translateY(8px) rotate(45deg)}.bar.open:nth-child(2){opacity:0}.bar.open:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1001;opacity:0;visibility:hidden;transition:all var(--transition-smooth)}.mobile-menu-overlay.active{opacity:1;visibility:visible}.mobile-menu{position:fixed;top:0;right:-100%;width:320px;height:100vh;background:#fff;z-index:1002;box-shadow:-10px 0 30px #0000001a;padding:40px 24px;transition:right var(--transition-smooth);display:flex;flex-direction:column}.mobile-menu.active{right:0}.mobile-menu-close{align-self:flex-end;background:none;border:none;font-size:32px;color:var(--text-muted);cursor:pointer;margin-bottom:20px}.mobile-navbar-menu{list-style:none;padding:0;margin:40px 0;display:flex;flex-direction:column;gap:20px}.mobile-navbar-menu a{font-size:20px;font-weight:700;color:var(--text-main);text-decoration:none;transition:color var(--transition-fast)}.mobile-navbar-menu a.active{color:var(--accent-blue)}.mobile-auth{margin-top:auto}.mobile-profile-links{display:flex;flex-direction:column;gap:16px}.mobile-profile-item{display:flex;align-items:center;gap:16px;font-size:16px;font-weight:600;color:var(--text-main)}.mobile-profile-item img{width:24px;height:24px}.mobile-only-flex{display:none}@media (max-width: 1024px){.navbar-menu{gap:20px}}@media (max-width: 850px){.navbar-menu,.desktop-only{display:none!important}.hamburger-btn{display:flex}.navbar{height:70px}.nav{padding:0 4%}.search-bar{max-width:none;order:3;flex-basis:100%;margin:0 0 15px}.nav:has(.search-bar) .navbar{flex-wrap:wrap;height:auto;padding:10px 0}}@media (max-width: 480px){.navbar .logo h1{font-size:22px}.mobile-menu{width:100%}.mobile-only-flex{display:flex!important;padding:10px 5%;background:var(--nav-bg);border-bottom:1px solid var(--glass-border)}}.carousel-container{position:relative;overflow:hidden;border:none}.carousel-image{width:100%;height:90vh;top:0;right:0;bottom:0;left:0;transition:opacity 1s ease-in-out}.carousel-button-main{background-color:#fff;color:#000;border:none;border-radius:25px;padding:12px 28px;font-weight:600;cursor:pointer;transition:.3s ease}.carousel-button-main:hover{background-color:#f5f5f5;transform:scale(1.05)}.carousel-arrow{position:absolute;top:40%;transform:translateY(-50%);background:#ffffff34;border:none;border-radius:50%;padding:10px 15px;font-size:24px;cursor:pointer}.carousel-arrow.left{left:15px}.carousel-arrow.right{right:15px}.carousel-dots{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px}.carousel-dot{width:10px;height:10px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:.3s ease}.carousel-dot.active{background:#fff}.carousel-container:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0003 30%,#000000b3);border-radius:16px;pointer-events:none;z-index:1}.carousel-caption{position:absolute;top:50%;left:50%;transform:translate(-30%,-20%);color:#fff;text-align:left;padding:25px 40px;border-radius:14px;max-width:80%;width:80%;display:flex;flex-direction:column;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@media (max-width: 992px){.carousel-image{height:340px}.carousel-caption{bottom:10px}.caption-title{font-size:1.8rem}.caption-subtitle{font-size:1rem}.carousel-button-main{padding:10px 24px;font-size:.95rem}.carousel-arrow{top:50%}}@media (max-width: 768px){.carousel-image{height:290px}.carousel-caption{top:40px;left:50%;transform:translate(-50%);max-width:90%;width:90%}.caption-title{font-size:1.5rem;text-align:center}.caption-subtitle{font-size:0 nine rem;text-align:center}.carousel-button-main{padding:8px 20px;font-size:.9rem}.carousel-arrow{font-size:20px;top:60px;padding:8px 12px}.carousel-arrow{top:40%}}@media (max-width: 600px){.carousel-image{height:200px}.carousel-caption{top:50px;max-width:90%}.caption-title{font-size:10px}.caption-subtitle{display:none}.carousel-button-main{padding:8px 18px;font-size:.85rem}.carousel-arrow{font-size:18px;top:70px;padding:6px 10px}.carousel-dots{bottom:10px}}@media (max-width: 400px){.carousel-image{height:170px}.caption-title{font-size:1.1rem;text-align:center}.caption-subtitle{display:none}.carousel-button-main{padding:6px 14px;font-size:.8rem}}.search-bar-container{position:relative;width:100%}.search-input{width:100%;padding:10px 14px;border-radius:999px;border:1px solid rgba(13,110,253,.12);background:#ffffffd9;color:#0b3d91;outline:none;font-size:14px;box-shadow:inset 0 -6px 12px #0d3d9108;transition:box-shadow .18s ease,border-color .18s ease,transform .12s ease}.search-input::placeholder{color:#5f5f5f80}.search-input:focus{border-color:#0d6efd;box-shadow:0 10px 30px #0e4dc80f,inset 0 0 8px #4ea8ff0a;background:#fff;transform:translateY(-1px)}.search-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #ddd;border-top:none;border-radius:0 0 15px 15px;max-height:400px;overflow-y:auto;z-index:1000;box-shadow:0 4px 12px #0000001a}.suggestions-section{border-bottom:1px solid #eee}.section-title{padding:10px 15px;font-size:12px;color:#999;font-weight:600;text-transform:uppercase;background:#f9f9f9}.suggestion-item,.history-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f0f0f0}.suggestion-item:hover,.history-item:hover{background-color:#f5f5f5}.suggestion-content,.history-content{flex:1;min-width:0}.suggestion-name,.history-name{font-size:14px;color:#333;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suggestion-price,.history-price{font-size:12px;color:tomato;font-weight:600}.suggestion-image{width:40px;height:40px;object-fit:cover;border-radius:4px;margin-left:10px}.history-section{background:#fafafa}.history-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f9f9f9;border-top:1px solid #eee}.clear-history{background:none;border:none;color:tomato;font-size:12px;cursor:pointer;font-weight:600;transition:color .2s ease}.clear-history:hover{color:#e55239}.search-loading,.no-results{padding:20px 15px;text-align:center;color:#999;font-size:14px}.search-dropdown::-webkit-scrollbar{width:6px}.search-dropdown::-webkit-scrollbar-track{background:#f1f1f1}.search-dropdown::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.search-dropdown::-webkit-scrollbar-thumb:hover{background:#999}@media (max-width: 768px){.search-bar-container{max-width:100%}.search-dropdown{max-height:300px}.suggestion-item,.history-item{padding:10px 12px}.suggestion-name,.history-name{font-size:13px}.suggestion-image{width:35px;height:35px}}.footer{color:#666;background-color:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);background:linear-gradient(135deg,#fff,#f8f9fa);display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 8vh;padding-top:80px;margin-top:100px;border-top:1px solid rgba(66,133,244,.15);box-shadow:0 -4px 12px #0000000d}.footer h1{color:#4285f4;font-size:30px}.footer-content{display:grid;width:100%;grid-template-columns:2fr 1fr 1fr;gap:80px}.footer-content-left,.footer-content-center,.footer-content-right{display:flex;flex-direction:column;align-items:start;gap:20px}.footer-content-left li,.footer-content-center li,.footer-content-right li{margin-bottom:10px;list-style:none;cursor:pointer}.footer-content-center h2,.footer-content-right h2{color:#333}.footer-content-center-text :hover,.footer-content-right-text :hover{color:#ff6b6b}.footer-content-center-text{color:#666}.footer-social-icons img{width:40px;margin-right:15px;cursor:pointer}.footer hr{width:100%;height:2px;margin:20px 0;background-color:#4285f426;border:none}@media (max-width:750px){.footer-content{display:flex;flex-direction:column;gap:35px}.footer-copyright{text-align:center}}.login-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:grid;place-items:center;background-color:#0000008f;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.login-popup-container{width:min(420px,calc(100% - 48px));color:#666;background:#fffffffa;display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:12px;font-size:15px;box-shadow:0 10px 30px #1212121f;border:1px solid rgba(66,133,244,.1);transition:transform .2s ease,opacity .2s ease;transform:translateY(0)}.login-popup-container{animation:popupFade .22s ease}.login-popup-title{display:flex;justify-content:space-between;align-items:center;color:#333}.login-popup-title h2{margin:0;font-size:18px;font-weight:600}.login-popup-title img{width:18px;cursor:pointer;opacity:.85;transition:transform .12s ease,opacity .12s ease}.login-popup-title img:hover{transform:rotate(20deg);opacity:1}.login-popup-inputs{display:flex;flex-direction:column;gap:14px}.login-popup-inputs input{outline:none;border:1px solid rgba(66,133,244,.2);padding:12px 14px;border-radius:10px;transition:box-shadow .14s ease,border-color .14s ease;background:#fff;font-size:14px}.login-popup-inputs input::placeholder{color:#999}.login-popup-inputs input:focus{box-shadow:0 6px 18px #4285f426;border-color:#4285f4}.login-popup-container button{border:none;padding:12px 14px;border-radius:10px;color:#fff;background-color:#4285f4;font-size:15px;cursor:pointer;font-weight:600;box-shadow:0 8px 18px #4285f426;transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}.login-popup-container button:active{transform:translateY(1px)}.login-popup-container button:hover{background-color:#3a7ce4;opacity:.98}.login-popup-condition{display:flex;align-items:center;gap:10px;margin-top:0}.login-popup-condition input{margin-top:0;width:16px;height:16px}.login-popup p span{color:#4285f4;font-weight:600;cursor:pointer}.login-popup-error{background:#ffebebf2;color:#8b1f1f;padding:10px 12px;border-radius:8px;border:1px solid rgba(139,31,31,.12);font-size:13px}@keyframes popupFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width:420px){.login-popup-container{padding:18px}.login-popup-inputs input{padding:11px}}*{padding:0;margin:0;box-sizing:border-box;font-family:Outfit;scroll-behavior:smooth}body{min-height:100vh}:root{--primary: #0b72ff}a{text-decoration:none;color:inherit}.app{width:80%;margin:auto}.app{min-width:80%;margin:auto;display:flex;flex-direction:column;padding-top:100px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.header{width:100%}.carousel{position:relative;overflow:hidden;max-width:800px;margin:auto}.carousel img{width:100%;height:400px;object-fit:cover;transition:all .7s ease-in-out}
