/* ============================================ HEADER - UPDATED STYLES ============================================ */
/* --- Top Bar Links --- */
.top-link { color: #333;font-size: 12px;font-weight: 600; text-transform: uppercase; transition: color 0.3s ease;}
.top-link:hover { color: var(--brand-color);}
.top-divider { width: 1px; height: 20px; background: #ddd; margin: 0 5px;}
.social-icon-top { color: #555;font-size: 14px; transition: all 0.3s ease; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;}
.social-icon-top:hover { color: #fff; background: var(--brand-color);}
/* --- Search Toggle Button --- */
.search-toggle-btn { width: 40px; height: 40px; border: none; background: transparent; color: #333; font-size: 18px; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;}
.search-toggle-btn:hover { background: #f0f0f0; color: var(--brand-color);}
/* --- Auth Buttons (Desktop) --- */
.btn-auth { padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.3s ease;}
.btn-login { color: #333; border: 1px solid #ddd; background: transparent;}
.btn-login:hover { border-color: var(--brand-color); color: var(--brand-color); }
.btn-signup { color: #fff; background: var(--brand-color); border: 1px solid var(--brand-color); }
.btn-signup:hover { background: #e64a19; border-color: #e64a19; color: #fff;}
/* --- Hamburger Menu Button --- */
.sidenav-toggle-btn { width: 40px; height: 40px; border: none; background: var(--brand-color); border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; transition: all 0.3s ease;}
.sidenav-toggle-btn:hover { background: #e64a19;}
.hamburger-line { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s ease;}
/* Hamburger Animation when open */
.sidenav-toggle-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px);}
.sidenav-toggle-btn.active .hamburger-line:nth-child(2) { opacity: 0;}
.sidenav-toggle-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px);}
/* ============================================ SIDE NAVIGATION (Off-Canvas) ============================================ */
/* Overlay */
.sidenav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.sidenav-overlay.active { opacity: 1; visibility: visible;}
/* Sidenav Panel */
.sidenav { position: fixed; top: 0; right: -320px; width: 300px; max-width: 85vw; height: 100%; background: #fff; z-index: 9999; overflow-y: auto; overflow-x: hidden; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);}
.sidenav.active { right: 0;}
/* Sidenav Header */
.sidenav-header { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 3px solid var(--brand-color); }
.sidenav-logo { display: flex; align-items: center; font-family: var(--font-logo); text-decoration: none; width: 140px;}
.logo-text-light { font-size: 24px; color: #fff; font-weight: 700; letter-spacing: -0.5px; }
.logo-circle-small { width: 32px; height: 32px; background: var(--logo-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 3px; color: #fff; font-size: 18px; font-weight: 700;}
.sidenav-close-btn { width: 36px; height: 36px; border: none; background:rgba(0, 0, 0, 0.9); color: #fff; font-size: 18px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}
.sidenav-close-btn:hover { background: var(--brand-color); transform: rotate(90deg);}
/* Sidenav Auth Buttons */
.sidenav-auth { display: flex; gap: 10px; padding: 20px; border-bottom: 1px solid #eee; }
.btn-sidenav-auth { flex: 1; padding: 12px 15px; font-size: 13px; font-weight: 600; text-align: center; border-radius: 6px; transition: all 0.3s ease; text-decoration: none;}
.btn-sidenav-login { color: #333; background: #f5f5f5; border: 1px solid #ddd; }
.btn-sidenav-login:hover { background: #eee; color: var(--brand-color); border-color: var(--brand-color);}
.btn-sidenav-signup { color: #fff; background: var(--brand-color); border: 1px solid var(--brand-color);}
.btn-sidenav-signup:hover { background: #e64a19; border-color: #e64a19; color: #fff;}
/* Sidenav Menu */
.sidenav-menu { padding: 15px 20px; border-bottom: 1px solid #eee; }
.sidenav-section-title { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;}
.sidenav-links { list-style: none; padding: 0; margin: 0;}
.sidenav-links li { margin-bottom: 2px;}
.sidenav-links a { display: flex; align-items: center;padding: 12px 15px; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 6px; transition: all 0.2s ease; text-transform: uppercase;}
.sidenav-links a i { width: 24px; font-size: 14px; color: #888; transition: color 0.2s ease;}
.sidenav-links a:hover,
.sidenav-links a.active { background: #fff5f2; color: var(--brand-color);}
.sidenav-links a:hover i,
.sidenav-links a.active i { color: var(--brand-color);}
.sidenav-links a.active { background: var(--brand-color); color: #fff;}
.sidenav-links a.active i { color: #fff; }
/* Small Links (Quick Links) */
.sidenav-links-small a { padding: 10px 15px; font-size: 13px;}
.sidenav-links-small a i { display: none;}
/* Sidenav Social */
.sidenav-social { padding: 20px; border-bottom: 1px solid #eee;}
.sidenav-social-icons { display: flex; flex-wrap: wrap; gap: 10px;}
.sidenav-social-icons a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; color: #555; border-radius: 50%; font-size: 16px; transition: all 0.3s ease; }
.sidenav-social-icons a:hover { background: var(--brand-color); color: #fff; transform: translateY(-3px);}
/* Individual social colors on hover */
.sidenav-social-icons a:hover .fa-facebook-f { background: #1877f2;}
.sidenav-social-icons a:hover .fa-twitter { background: #1da1f2;}
.sidenav-social-icons a:hover .fa-youtube { background: #ff0000;}
.sidenav-social-icons a:hover .fa-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);}
/* Sidenav App Download */
.sidenav-app { padding: 20px;}
.btn-app-download { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; background: #222; color: #fff; font-size: 12px; font-weight: 600; border-radius: 6px; transition: all 0.3s ease; text-decoration: none; }
.btn-app-download:hover {background: #333; color: #fff;}
.btn-app-download i { font-size: 16px;}
/* ============================================ SEARCH OVERLAY ============================================ */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.search-overlay.active { opacity: 1; visibility: visible;}
.search-overlay-content { width: 100%; max-width: 700px; padding: 20px; transform: translateY(-30px); transition: transform 0.3s ease;}
.search-overlay.active .search-overlay-content { transform: translateY(0);}
.search-close-btn {position: absolute; top: 30px; right: 30px; width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; font-size: 24px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}
.search-close-btn:hover { background: var(--brand-color); border-color: var(--brand-color); transform: rotate(90deg);}
.search-container { text-align: center;}
.search-title { color: #fff; font-family: var(--font-head); font-size: 28px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;}
.search-form { margin-bottom: 25px;}
.search-input-wrap { position: relative; display: flex; align-items: center; background: #fff; border-radius: 50px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);}
.search-input-icon { position: absolute; left: 25px; font-size: 20px; color: #999;}
.search-input { flex: 1; padding: 20px 60px 20px 60px; border: none; font-size: 18px; font-family: var(--font-body); outline: none; background: transparent;}
.search-input::placeholder { color: #aaa;}
.search-submit-btn { position: absolute; right: 8px; width: 50px; height: 50px; border: none; background: var(--brand-color); color: #fff; font-size: 18px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}
.search-submit-btn:hover { background: #e64a19; transform: scale(1.05);}
/* Popular Searches */
.popular-searches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;}
.popular-label { color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; }
.popular-tag { display: inline-block; padding: 8px 16px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; border-radius: 20px; transition: all 0.3s ease; text-decoration: none; }
.popular-tag:hover { background: var(--brand-color); color: #fff;}
/* ============================================ BODY SCROLL LOCK ============================================ */
body.menu-open,
body.search-open { overflow: hidden;}
/* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */
@media (max-width: 991.98px) {
    .top-solid-bar { padding: 12px 0;}
    .logo-text-dark { font-size: 32px;}
    .logo-circle { width: 42px; height: 42px; font-size: 24px;}
    .top-solid-bar { border-bottom: 1px solid #ddd; }
}
@media (max-width: 767.98px) {
    .top-solid-bar { padding: 10px 0;}    
    .logo-text-dark { font-size: 26px; }    
    .logo-circle { width: 36px; height: 36px; font-size: 20px; }    
    .search-toggle-btn { width: 24px; height: 24px; font-size: 16px; }    
    .sidenav-toggle-btn { width: 36px; height: 36px; }    
    .hamburger-line { width: 18px; }  
    .search-overlay { padding-top: 10vh; }    
    .search-title { font-size: 22px; }
    .search-input { padding: 16px 50px 16px 50px; font-size: 16px; }    
    .search-input-icon { left: 20px; font-size: 16px; }   
    .search-submit-btn { width: 40px; height: 40px; font-size: 16px; }    
    .search-close-btn { top: 15px; right: 15px; width: 40px; height: 40px; font-size: 20px; }    
    .popular-searches { padding: 0 10px; }
    .popular-tag { padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 575.98px) {
    .logo-text-dark { font-size: 22px; }
    .logo-circle { width: 30px; height: 30px; font-size: 16px;}
    .btn-auth { display: none;}
}
/* ============================================NAVBAR AUTH BUTTONS (Desktop - In Navbar) ============================================ */
.navbar-auth { display: flex; align-items: center; gap: 10px; margin-left: 15px; padding-left: 15px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.btn-navbar-auth { display: inline-flex; align-items: center; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.3s ease; text-decoration: none; white-space: nowrap;}
.btn-navbar-login { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);}
.btn-navbar-login:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #fff;}
.btn-navbar-signup { color: #fff; background: var(--brand-color); border: 1px solid var(--brand-color);}
.btn-navbar-signup:hover { background: #e64a19; border-color: #e64a19; color: #fff;}
/* Icon styling in auth buttons */
.btn-navbar-auth i { font-size: 11px;}
/* ============================================ NAVBAR ADJUSTMENTS  ============================================ */
/* Ensure navbar container uses flexbox properly */
.main-navbar .container { display: flex; align-items: center; justify-content: space-between;}
.main-navbar .navbar-nav { display: flex; flex-wrap: nowrap; }
/* Adjust nav-link padding for more items */
.main-navbar .nav-link { padding: 18px 12px !important; font-size: 13px;}
/* ============================================ RESPONSIVE - HIDE AUTH IN NAVBAR ON SMALLER SCREENS  ============================================ */
@media (max-width: 1399.98px) {
    .main-navbar .nav-link { padding: 18px 10px !important;}    
    .btn-navbar-auth {padding: 7px 12px; }    
    .btn-navbar-auth i { display: none; }
}
@media (max-width: 1199.98px) {
    .main-navbar .nav-link { padding: 12px 8px !important; }    
    .navbar-auth { gap: 8px; margin-left: 10px; padding-left: 10px; }
    .btn-navbar-auth { padding: 6px 10px; }
    .ticker-wrap .container { padding-left: 0px !important; }
}
/* ============================================ REMOVE OLD TOP BAR AUTH STYLES (if any) ============================================ */
/* These are no longer needed for desktop */
.btn-auth { display: none !important;}
/* User Dropdown in Navbar */
.navbar-auth .dropdown-menu { background: #fff; border: none; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 10px 0; min-width: 200px; margin-top: 10px;}
.navbar-auth .dropdown-item { padding: 10px 20px; font-size: 14px; color: #333; transition: all 0.2s ease;}
.navbar-auth .dropdown-item:hover { background: #fff5f2; color: var(--brand-color);}
.navbar-auth .dropdown-item.text-danger:hover { background: #fff5f5; color: #dc3545;}
.navbar-auth .dropdown-divider { margin: 8px 0; border-color: #eee;}
/* ============================================ SIDENAV USER INFO (Logged In State)  ============================================ */
.sidenav-user-info { display: flex; align-items: center; gap: 12px; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); border-radius: 8px; width: 100%;}
.sidenav-user-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--brand-color); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;}
.sidenav-user-avatar img { width: 100%; height: 100%; object-fit: cover;}
.sidenav-user-avatar i { color: #fff; font-size: 20px;}
.sidenav-user-details { display: flex; flex-direction: column; overflow: hidden;}
.sidenav-user-name { font-size: 15px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sidenav-user-email { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* User Menu Section */
.sidenav-user-menu { background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
/* Logout Button */
.sidenav-logout-form { margin: 0;}
.sidenav-logout-btn { display: flex; align-items: center; width: 100%; padding: 12px 15px; background: transparent; border: none; color: #dc3545; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; text-align: left; }
.sidenav-logout-btn i { width: 24px; font-size: 14px; margin-right: 0;}
.sidenav-logout-btn:hover { background: #fff5f5; color: #c82333;}
/* Divider between auth section when logged in */
.sidenav-auth:has(.sidenav-user-info) { border-bottom: none; padding: 0px !important;}