/**
 * Custom Header Styles - FAST SERVICES
 * Dark navy fixed header with RTL support
 */

/* ===== Global Cairo Font ===== */
*:not(i):not([class*="fa-"]):not(.fas):not(.far):not(.fal):not(.fab):not(.fa) {
    font-family: 'Cairo', sans-serif !important;
}

body {
    font-family: 'Cairo', sans-serif !important;
}

/* ===== Custom Scrollbar Styles ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #1C2340;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00bcd4 0%, #0891b2 100%);
    border-radius: 5px;
    border: 2px solid #1C2340;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #00bcd4 #1C2340;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
button,
input,
textarea,
select,
label {
    font-family: 'Cairo', sans-serif;
}

/* ===== CSS Custom Properties (Variables) ===== */
:root {
    /* Primary Colors */
    --header-bg: #1C2340;
    --header-bg-rgb: 28, 35, 64;
    --navy-dark: #1e3a5f;
    --navy-dark-rgb: 30, 58, 95;
    --dark-color: #0C0F1E;
    /* Accent Colors */
    --accent-cyan: #00bcd4;
    --accent-cyan-dark: #0891b2;
    --accent-cyan-darker: #0e7490;

    /* Text Colors */
    --text-white: #ffffff;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.7);
}

/* ===== Fixed Header Container ===== */
.custom-fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 95px;
    padding: 0 100px;
    margin-top: 30px;
}

/* When header is over hero section, make it more transparent */
.custom-fixed-header.header-transparent {
    background-color: rgba(var(--navy-dark-rgb), 0.7);
}

.custom-fixed-header .header-container {
    /* max-width: 1400px; */
    background-color: var(--header-bg);
    margin: 0 auto;
    padding: 0 20px;
    border-radius: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* RTL Layout Support */
[dir="rtl"] .custom-fixed-header .header-container {
    flex-direction: row;
}

/* ===== Logo Section (Right side in RTL) ===== */
.header-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo-section .logo-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo-section .logo-icon svg {
    width: 40px;
    height: 40px;
}

.header-logo-section .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-logo-section .logo-text .brand-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
}

.header-logo-section .logo-text .brand-tagline {
    color: #00bcd4;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== Navigation Menu (Center) ===== */
.header-nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-menu .nav-item {
    position: relative;
}

.header-nav-menu .nav-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    padding: 7px 18px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.header-nav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-nav-menu .nav-link.active {
    background-color: #00bcd4;
    color: #ffffff;
}

.header-nav-menu .nav-link .dropdown-arrow {
    font-size: 10px;
    margin-top: 2px;
}

/* ===== Action Buttons Section (Left side in RTL) ===== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Login Button */
.header-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #00bcd4;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-login-btn:hover {
    background-color: #0891b2;
    color: #ffffff;
    transform: translateY(-1px);
}

.header-login-btn svg,
.header-login-btn .btn-icon {
    width: 16px;
    height: 16px;
}

/* Provider Login Button */
.header-provider-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    border: 1px solid rgba(0, 188, 212, 0.4);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-provider-btn:hover {
    background-color: rgba(0, 188, 212, 0.15);
    border-color: #00bcd4;
    color: #00bcd4;
    transform: translateY(-1px);
}

.header-provider-btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.header-provider-btn:hover svg {
    opacity: 1;
}

/* Language Toggle Button */
.header-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-lang-btn .lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.header-lang-btn .dropdown-arrow {
    font-size: 10px;
    margin-left: 4px;
}

/* Language Dropdown Menu - Premium Design */
.lang-dropdown {
    position: relative;
}

.lang-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    min-width: 160px;
    background: rgba(28, 35, 64, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1060;
}

/* Arrow indicator */
.lang-dropdown .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(28, 35, 64, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

[dir="rtl"] .lang-dropdown .dropdown-menu {
    left: 50%;
    right: auto;
}

/* Show on click (Bootstrap .show class) */
.lang-dropdown .dropdown-menu.show,
.lang-dropdown.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1);
}

.lang-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.lang-dropdown .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.3) 0%, rgba(0, 188, 212, 0.1) 100%);
    color: #ffffff;
}

[dir="rtl"] .lang-dropdown .dropdown-item:hover {
    transform: none;
}

/* Active language indicator */
.lang-dropdown .dropdown-item.active,
.lang-dropdown .dropdown-item:active {
    background: linear-gradient(135deg, #00bcd4 0%, #0891b2 100%);
    color: #ffffff;
}

/* Scrollbar for many languages */
.lang-dropdown .dropdown-menu {
    max-height: 350px;
    overflow-y: auto;
}

.lang-dropdown .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

.lang-dropdown .dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.lang-dropdown .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 188, 212, 0.5);
    border-radius: 2px;
}

.lang-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 188, 212, 0.7);
}

/* ===== Mobile Menu Toggle ===== */
.header-mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 8px;
    cursor: pointer;
}

.header-mobile-toggle svg {
    width: 24px;
    height: 24px;
}

/* ===== Body Padding for Fixed Header ===== */
body.has-fixed-header {
    padding-top: 70px;
}

/* Main content wrapper should also account for fixed header */
.main-content.with-fixed-header {
    padding-top: 70px;
}

@media (max-width: 1165px) {

    /* Non-authenticated users: hide nav at 950px */
    .header-nav-menu:not(.header-nav-menu-auth) {
        display: none;
    }

    .header-mobile-toggle:not(.header-mobile-toggle-auth) {
        display: block;
    }
}

@media (max-width: 1145px) {

    /* Authenticated users: hide nav at 1145px */
    .header-nav-menu.header-nav-menu-auth {
        display: none;
    }

    .header-mobile-toggle.header-mobile-toggle-auth {
        display: block;
    }
}

@media (min-width: 1146px) {

    /* Authenticated users: show nav above 1145px */
    .header-mobile-toggle.header-mobile-toggle-auth {
        display: none !important;
    }
}

@media (min-width: 951px) {

    /* Non-authenticated users: show nav above 950px */
    .header-mobile-toggle:not(.header-mobile-toggle-auth) {
        display: none !important;
    }
}

@media (min-width: 900px) and (max-width: 1080px) {
    .header-nav-menu {
        gap: 4px !important;
    }
}

@media (max-width: 1367px) {
    .custom-fixed-header {
        padding: 0 31px;
    }
}

@media (max-width: 767px) {
    .custom-fixed-header {
        padding: 0 15px;
    }
}

/* ===== Mobile Responsive ===== */
@media (max-width: 1199.98px) {

    .custom-fixed-header .header-container {
        padding: 0 15px;
    }

    .header-actions {
        gap: 8px;
    }

    .header-login-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    /* .custom-fixed-header {
        height: 60px;
    } */

    body.has-fixed-header,
    .main-content.with-fixed-header {
        padding-top: 60px;
    }

    .header-logo-section .logo-text .brand-name {
        font-size: 16px;
    }

    .header-logo-section .logo-text .brand-tagline {
        font-size: 10px;
    }

    .header-lang-btn {
        padding: 6px 12px;
    }

    /* .header-login-btn {
        padding: 6px 12px;
    } */
}

/* Hide Login and Language buttons on small screens (below 650px) */
@media (max-width: 650px) {

    .header-actions .lang-dropdown,
    .header-actions .header-login-btn,
    .header-actions .header-provider-btn,
    .header-actions .header-login-dropdown,
    .header-actions .user-dropdown-container,
    .header-actions>a[href*="favourite"] {
        display: none !important;
    }
}

/* ===== Sidebar Action Buttons - Always visible inside sidebar ===== */
.mobile-sidebar-actions {
    display: block;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-sidebar-actions .sidebar-lang-dropdown {
    position: relative;
}

.mobile-sidebar-actions .sidebar-lang-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-sidebar-actions .sidebar-lang-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mobile-sidebar-actions .sidebar-lang-dropdown .dropdown-menu {
    position: static;
    width: 100%;
    background: rgba(28, 35, 64, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin-top: 8px;
    padding: 8px;
}

.mobile-sidebar-actions .sidebar-lang-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 10px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mobile-sidebar-actions .sidebar-lang-dropdown .dropdown-item:hover {
    background: rgba(0, 188, 212, 0.2);
    color: #ffffff;
}

.mobile-sidebar-actions .sidebar-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #00bcd4 0%, #0891b2 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-sidebar-actions .sidebar-login-btn:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Provider Login Button in Sidebar */
.mobile-sidebar-actions .sidebar-provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: transparent;
    border: 1px solid rgba(0, 188, 212, 0.5);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-sidebar-actions .sidebar-provider-btn:hover {
    background: rgba(0, 188, 212, 0.15);
    border-color: #00bcd4;
    color: #00bcd4;
    transform: translateY(-1px);
}

.mobile-sidebar-actions .sidebar-provider-btn svg {
    opacity: 0.8;
}

.mobile-sidebar-actions .sidebar-provider-btn:hover svg {
    opacity: 1;
}

/* ===== Mobile Navigation Sidebar ===== */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ============================================
   PREMIUM MOBILE SIDEBAR
   ============================================ */

.mobile-nav-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 340px;
    height: 100vh;
    background: linear-gradient(180deg, #0a192f 0%, #112240 50%, #1a365d 100%);
    z-index: 1100;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.mobile-nav-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at top right, rgba(0, 188, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 212, 212, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    height: max-content;
}

[dir="rtl"] .mobile-nav-sidebar {
    right: auto;
    left: -100%;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}

.mobile-nav-sidebar.active {
    right: 0;
}

[dir="rtl"] .mobile-nav-sidebar.active {
    left: 0;
    right: auto;
}

/* Sidebar Header - Premium */
.mobile-nav-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(0, 188, 212, 0.05));
    border-bottom: 1px solid rgba(0, 188, 212, 0.2);
    position: relative;
    z-index: 1;
}

.mobile-nav-sidebar .sidebar-header .header-logo-section img {
    max-height: 35px;
    filter: drop-shadow(0 2px 4px rgba(0, 188, 212, 0.3));
}

.mobile-nav-sidebar .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-nav-sidebar .close-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
    transform: rotate(90deg);
}

/* Navigation Links - Premium */
.mobile-nav-sidebar .mobile-nav-links {
    padding: 1rem 1rem 0.5rem;
    list-style: none;
    margin: 0;
    position: relative;
    z-index: 1;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item {
    margin-bottom: 0.5rem;
    animation: slideInRight 0.4s ease forwards;
    opacity: 0;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(1) {
    animation-delay: 0.1s;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(2) {
    animation-delay: 0.15s;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(3) {
    animation-delay: 0.2s;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(4) {
    animation-delay: 0.25s;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(5) {
    animation-delay: 0.3s;
}

.mobile-nav-sidebar .mobile-nav-links .nav-item:nth-child(6) {
    animation-delay: 0.35s;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-nav-sidebar .mobile-nav-links .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.mobile-nav-sidebar .mobile-nav-links .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #00bcd4, #00d4d4);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 3px 3px 0;
}

.mobile-nav-sidebar .mobile-nav-links .nav-link:hover,
.mobile-nav-sidebar .mobile-nav-links .nav-link.active {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), rgba(0, 188, 212, 0.1));
    border-color: rgba(0, 188, 212, 0.3);
    color: #00d4d4;
    transform: translateX(8px);
}

.mobile-nav-sidebar .mobile-nav-links .nav-link:hover::before,
.mobile-nav-sidebar .mobile-nav-links .nav-link.active::before {
    transform: scaleY(1);
}

/* Mobile Sidebar Actions - Premium */
.mobile-sidebar-actions {
    padding: 1rem 1.25rem 2rem;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
}

/* Sidebar Language Dropdown */
.sidebar-lang-dropdown {
    margin-bottom: 1rem;
}

.sidebar-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-lang-btn:hover {
    background: rgba(0, 188, 212, 0.15);
    border-color: rgba(0, 188, 212, 0.3);
}

.sidebar-lang-dropdown .dropdown-menu {
    background: #112240;
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    min-width: 100%;
}

.sidebar-lang-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.sidebar-lang-dropdown .dropdown-item:hover,
.sidebar-lang-dropdown .dropdown-item.active {
    background: rgba(0, 188, 212, 0.2);
    color: #00d4d4;
}

/* Sidebar User Section - Premium */
.sidebar-user-section {
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.12), rgba(0, 188, 212, 0.05));
    border: 1px solid rgba(0, 188, 212, 0.2);
    border-radius: 16px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.sidebar-user-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 188, 212, 0.15) 0%, transparent 70%);
    animation: pulse-glow 3s ease-in-out infinite;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.sidebar-user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid #00bcd4;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.4);
    transition: transform 0.3s ease;
}

.sidebar-user-avatar:hover {
    transform: scale(1.05);
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-user-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.2;
}

.sidebar-user-email {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Sidebar User Menu - Premium */
.sidebar-user-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sidebar-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #00bcd4, #00d4d4);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.sidebar-menu-item:hover {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(0, 188, 212, 0.08));
    border-color: rgba(0, 188, 212, 0.3);
    color: #00d4d4;
    transform: translateX(8px);
}

.sidebar-menu-item:hover::before {
    transform: scaleY(1);
}

.sidebar-menu-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

.sidebar-menu-item span {
    font-weight: 500;
    font-size: 0.95rem;
}

/* Sidebar Login Button */
.sidebar-login-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #00bcd4, #00a5bb);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

.sidebar-login-btn:hover {
    background: linear-gradient(135deg, #00a5bb, #0891b2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
    color: #fff;
}

.sidebar-login-btn svg {
    width: 18px;
    height: 18px;
}

/* Sidebar Logout Button - Premium */
.sidebar-logout-form {
    margin-top: 0.5rem;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #f87171;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-logout-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.sidebar-logout-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Mobile Nav Overlay - Premium */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== 3D Cube Logo Icon ===== */
.cube-icon {
    position: relative;
    width: 40px;
    height: 40px;
}

.cube-icon svg {
    width: 100%;
    height: 100%;
}

/* ===== Hero Section with Gradient Background ===== */
.hero-section-wrapper {
    position: relative;
    margin-top: -70px;
    /* Pull up to go behind the fixed header */
    padding-top: 70px;
    /* Add back the padding to account for header */
    min-height: 600px;
    background: linear-gradient(135deg, #1a3654 0%, #0d4a6b 50%, #0a5a72 100%);
    overflow: hidden;
}

.hero-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/landing-images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 1;
}

.hero-section-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(30, 58, 95, 0.3) 0%, rgba(30, 58, 95, 0.7) 100%);
    z-index: 2;
}

.hero-section-wrapper>* {
    position: relative;
    z-index: 3;
}

.hero-section-wrapper .container,
.hero-section-wrapper .container-fluid {
    position: relative;
    z-index: 3;
}

/* Hero section text should be white */
.hero-section-wrapper h1,
.hero-section-wrapper h2,
.hero-section-wrapper h3,
.hero-section-wrapper h4,
.hero-section-wrapper h5,
.hero-section-wrapper h6 {
    color: #ffffff !important;
}

.hero-section-wrapper p,
.hero-section-wrapper .iq-title-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Remove body padding when hero section is present */
body.has-hero-section.has-fixed-header {
    padding-top: 0;
}

/* Alternative: Hero Banner with gradient that matches the design */
.hero-banner-gradient {
    position: relative;
    background: linear-gradient(135deg, #1a3654 0%, #0d4a6b 40%, #0a5a72 70%, #0d6a7a 100%);
    min-height: 550px;
    margin-top: -70px;
    padding-top: 100px;
    padding-bottom: 60px;
}

.hero-banner-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(to right, rgba(26, 54, 84, 0.95) 0%, rgba(26, 54, 84, 0.8) 40%, rgba(26, 54, 84, 0.6) 100%),
        url('/landing-images/service/hero-worker.webp');
    background-size: cover;
    background-position: center right;
    z-index: 1;
}

.hero-banner-gradient>.container,
.hero-banner-gradient>.container-fluid {
    position: relative;
    z-index: 2;
}

.hero-banner-gradient h1,
.hero-banner-gradient h2,
.hero-banner-gradient h3 {
    color: #ffffff !important;
}

.hero-banner-gradient p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Search box in hero */
.hero-search-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.hero-search-box input {
    border: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 15px;
}

.hero-search-box input:focus {
    outline: none;
    box-shadow: none;
}

.hero-search-box .btn-search {
    background: #00bcd4;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
}

/* Override the default bg-light for banner section */
.padding-top-bottom-90.hero-dark-bg {
    background: linear-gradient(135deg, #1a3654 0%, #0d4a6b 50%, #0a5a72 100%) !important;
    margin-top: -70px;
    padding-top: 120px !important;
    position: relative;
}

.padding-top-bottom-90.hero-dark-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.padding-top-bottom-90.hero-dark-bg>* {
    position: relative;
    z-index: 1;
}

.padding-top-bottom-90.hero-dark-bg h1,
.padding-top-bottom-90.hero-dark-bg h2,
.padding-top-bottom-90.hero-dark-bg h3,
.padding-top-bottom-90.hero-dark-bg h4 {
    color: #ffffff !important;
}

.padding-top-bottom-90.hero-dark-bg p,
.padding-top-bottom-90.hero-dark-bg .text-body {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ===== NEW HERO SECTION STYLES ===== */
.hero-section-new {
    position: relative;
    min-height: 800px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    padding: 200px 20px 80px;
    background-image: url('/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* .hero-section-new .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.75) 0%, rgba(28, 35, 64, 0.85) 100%);
    z-index: 1;
} */

.hero-section-new .hero-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.hero-section-new .hero-content {
    text-align: center;
}

.hero-section-new .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-section-new .hero-description {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 35px;
}

.hero-section-new .hero-search-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

/* Override location-search component styles in hero */
.hero-section-new .search-box-wrapper {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 6px 8px !important;
}

.hero-section-new .search-box-wrapper .location-search-block {
    flex-wrap: nowrap;
}

.hero-section-new .search-box-wrapper .modal-location {
    background: transparent;
    padding: 8px 12px !important;
}

.hero-section-new .search-box-wrapper .modal-location span {
    color: #333 !important;
    white-space: nowrap;
}

.hero-section-new .search-box-wrapper .location-search {
    padding: 15px !important;
}

.hero-section-new .search-box-wrapper .location-search .form-group {
    border: none !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.hero-section-new .search-box-wrapper .location-search input {
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #333 !important;
    flex: 1;
}

.hero-section-new .search-box-wrapper .location-search input::placeholder {
    color: #888 !important;
}

.hero-section-new .search-box-wrapper .btn-primary {
    background: linear-gradient(135deg, #00bcd4 0%, #0891b2 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap;
}

.hero-section-new .search-box-wrapper .btn-primary:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    transform: translateY(-1px) !important;
}

/* Hide categories list in hero for cleaner look */
.hero-section-new .categories-list {
    display: none;
}



/* Hero Section Responsive */
@media (max-width: 991.98px) {
    .hero-section-new {
        min-height: 450px;
        padding: 200px 20px 60px;
    }

    .hero-section-new .hero-title {
        font-size: 2.5rem;
    }

    .hero-section-new .hero-description {
        font-size: 1rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section-new {
        min-height: 400px;
        padding: 200px 15px 50px;
    }

    .hero-section-new .hero-title {
        font-size: 2rem;
    }

    .hero-section-new .hero-description {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }
}

@media (max-width: 575.98px) {
    .hero-section-new {
        min-height: 380px;
        padding: 200px 15px 40px;
    }

    .hero-section-new .hero-title {
        font-size: 1.75rem;
    }

    .hero-section-new .hero-description {
        font-size: 0.9rem;
    }
}

/* RTL Support for Hero */
[dir="rtl"] .hero-section-new .hero-title,
[dir="rtl"] .hero-section-new .hero-description {
    direction: rtl;
    text-align: center;
}

/* ===== Hero Bottom Cards ===== */
.hero-section-new {
    position: relative;
    padding-bottom: 200px !important;
    /* Increased space */
    overflow: visible !important;
    /* CRITICAL: Allows cards to overlap the next section */
    z-index: 20;
    /* Ensure the section itself is elevated */
}

.hero-content-wrapper {
    position: relative;
    z-index: 50 !important;
}

.hero-bottom-cards {
    position: absolute;
    bottom: -170px;
    /* Pull it down to overlap */
    left: 0;
    right: 0;
    z-index: 10;
    /* Keep low so search dropdown can appear above */
}

.hero-card {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, var(--header-bg) 73%, rgba(30, 58, 95, 0.1) 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 200px;
    height: 300px;
    /* Ensures equal height */
    margin-bottom: 20px;
}

.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
}

.hero-card-image {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}

.hero-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.hero-card-content {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-card-title {
    color: var(--accent-cyan);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.hero-card-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;

    /* Limit to 6 lines */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-cyan);
    color: var(--header-bg);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.hero-card-btn:hover {
    background-color: #fff;
    color: var(--header-bg);
    transform: translateX(-5px);
}

/* RTL Support for Hero Cards */
[dir="rtl"] .hero-card-btn:hover {
    transform: translateX(5px);
}

[dir="rtl"] .hero-card-btn svg {
    transform: rotate(180deg);
}

/* Responsive Hero Cards - Below 1110px */
@media (max-width: 1110px) {
    .hero-bottom-cards {
        position: absolute;
        bottom: -170px;
        left: 0;
        right: 0;
        z-index: 10;
    }

    .hero-section-new {
        padding-bottom: 200px !important;
        display: flex;
        flex-direction: column;
    }

    .hero-card {
        flex-direction: row;
        min-height: 280px;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    /* Image becomes absolute background - full width */
    .hero-card-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    /* Overlay on the image */
    .hero-card-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, transparent 0%, rgba(11, 23, 57, 0.7) 50%, var(--header-bg) 100%);
        z-index: 2;
    }

    /* RTL overlay direction */
    [dir="rtl"] .hero-card-image::after {
        background: linear-gradient(to left, transparent 0%, rgba(11, 23, 57, 0.7) 50%, var(--header-bg) 100%);
    }

    /* Text content takes full width and overlays the image */
    .hero-card-content {
        position: relative;
        z-index: 3;
        width: 100%;
        padding: 25px 30px;
        background: transparent;
    }
}

@media (max-width: 767.98px) {
    .hero-bottom-cards {
        position: relative;
        bottom: auto;
        margin-top: 30px;
        z-index: 10;
    }

    .hero-section-new {
        padding-bottom: 40px !important;
    }

    .card-parent {
        display: flex;
        justify-content: center;
    }

    .hero-card {
        min-height: 220px;
        height: auto;
        width: 60%;
    }

    .hero-card-content {
        padding: 20px;
    }

    .hero-card-title {
        font-size: 1.1rem;
    }

    .hero-card-text {
        font-size: 0.85rem;
        -webkit-line-clamp: 4;
    }

    .hero-card-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 680px) {
    .hero-card {
        min-height: 220px;
        height: auto;
        width: 75%;
    }
}

@media (max-width: 470px) {
    .hero-card {
        min-height: 220px;
        height: auto;
        width: 100%;
    }
}

/* Search Button - Show icon on small screens */
.search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-btn-icon {
    display: none;
}

.search-btn-text {
    display: inline;
}

.top-category-section {
    background-color: var(--dark-color);
}

@media (max-width: 400px) {
    .search-btn-icon {
        display: inline;
    }

    .search-btn-text {
        display: none;
    }

    .search-btn {
        padding: 10px 16px;
    }

    /* CSS-only fallback: Hide text and show icon using pseudo-element */
    /* Increased specificity to override desktop styles */
    .hero-section-new .hero-search-wrapper .search-box-wrapper .btn.btn-primary,
    .search-box-wrapper button.btn.btn-primary {
        font-size: 0 !important;
        padding: 10px !important;
        position: relative;
        min-width: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-section-new .hero-search-wrapper .search-box-wrapper .btn.btn-primary::before,
    .search-box-wrapper button.btn.btn-primary::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* Section below hero needs extra top margin to account for overlapping cards */
/* Section below hero needs extra top margin to account for overlapping cards */
.hero-section-new+.section-padding {
    padding-top: 240px !important;
    position: relative;
    z-index: 10;
}

@media (max-width: 991.98px) {
    .hero-section-new+.section-padding {
        padding-top: 60px !important;
    }
}

/* ===== Modal Z-Index Fix ===== */
/* Ensure modals appear above everything including header (z-index: 1050) */
.modal-backdrop {
    z-index: 1055 !important;
}

.modal {
    z-index: 1060 !important;
}

.modal-dialog {
    position: relative !important;
    z-index: 1 !important;
}

.modal-content {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for location modal specifically */
#modal-location {
    z-index: 1060 !important;
}

/* Force hide the location search button and adjust formatting */
.modal-location,
.location-search-block .modal-location,
[data-bs-target="#modal-location"] {
    display: none !important;
}

.location-search-block .border-start {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.search-box-wrapper {
    justify-content: center !important;
}

.location-search-block {
    width: 100% !important;
}

/* ===== Custom Vue Modal Styles ===== */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000 !important;
    /* Extremely high to beat everything */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.custom-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    z-index: 10001 !important;
    position: relative;
    overflow: hidden;
    animation-duration: 0.3s;
}

.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
}

.custom-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--header-bg);
}

.custom-modal-body {
    padding: 30px 25px;
}

.custom-modal-overlay .close-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-modal-overlay .close-btn:hover {
    color: #333;
    background-color: #f5f5f5;
}

/* Dark mode support if needed, or specific RTL adjustments */
[dir="rtl"] .custom-modal-header {
    text-align: right;
}

[dir="rtl"] .custom-modal-title {
    text-align: right;
}

/* Animation classes if animate.css is not fully loaded or behaving differently */
@keyframes customFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInDown {
    animation-name: customFadeInDown;
    animation-fill-mode: both;
}

/* ===== Custom Placeholder/Shimmer Styles ===== */
.placeholder,
.placeholder-glow .placeholder {
    background-color: rgba(0, 188, 212, 0.15) !important;
}

.placeholder-glow .placeholder::before {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 188, 212, 0.3) 50%,
            transparent 100%) !important;
}

/* Shimmer Card Styles */
.shimmer-card,
.shimmer-row>div {
    background: linear-gradient(135deg,
            rgba(28, 35, 64, 0.8) 0%,
            rgba(0, 118, 143, 0.3) 50%,
            rgba(28, 35, 64, 0.8) 100%) !important;
    background-size: 200% 100% !important;
    animation: shimmerAnimation 1.5s infinite !important;
}

@keyframes shimmerAnimation {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}






/* Category Shimmer Card */
.category-card .placeholder,
.category-card .img-bg {
    background-color: rgba(0, 188, 212, 0.2) !important;
}

/* Override bg-light for shimmer cards - change to dark theme */
.card.bg-light,
.shimmer-row .card.bg-light,
.category-card {
    background: rgba(28, 35, 64, 0.9) !important;
    border: 1px solid rgba(0, 188, 212, 0.3) !important;
}

.card.bg-light .placeholder-glow .placeholder,
.card .placeholder {
    background-color: rgba(0, 188, 212, 0.25) !important;
}

/* Dark theme shimmer styles */
[data-bs-theme="dark"] .placeholder,
body.dark .placeholder,
.placeholder {
    background-color: rgba(0, 188, 212, 0.2) !important;
}

[data-bs-theme="dark"] .shimmer-card,
body.dark .shimmer-card {
    background: linear-gradient(135deg,
            #1C2340 0%,
            rgba(0, 188, 212, 0.2) 50%,
            #1C2340 100%) !important;
}

/* Category Shimmer Specific Overrides */
.shimmer-row .card,
.loading-container .card {
    background: rgba(28, 35, 64, 0.9) !important;
    border-color: rgba(0, 188, 212, 0.3) !important;
}

.shimmer-row .placeholder,
.loading-container .placeholder {
    background-color: rgba(0, 188, 212, 0.25) !important;
}

/* Remove any black backgrounds */
.shimmer-row *,
.loading-container * {
    background-color: transparent;
}

.shimmer-row .card *,
.loading-container .card * {
    background-color: transparent;
}

.shimmer-row .placeholder,
.shimmer-row .img-bg,
.loading-container .placeholder,
.loading-container .img-bg {
    background-color: rgba(0, 188, 212, 0.2) !important;
}

/* ===== Search Dropdown Premium Theme ===== */
.top-width.dropdown-menu,
.user-dropdown {
    background: linear-gradient(145deg,
            rgba(28, 35, 64, 0.95) 0%,
            rgba(15, 23, 42, 0.98) 100%) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 188, 212, 0.25) !important;
    border-radius: 20px !important;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 0 40px rgba(0, 188, 212, 0.1) !important;
    padding: 0 !important;
    overflow: visible;
    z-index: 9999 !important;
    position: absolute !important;
    animation: dropdownSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
}

@keyframes dropdownSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.location-search-dropdown {
    background: transparent !important;
    max-height: 400px;
    width: 100%;
    overflow-y: auto;
    padding: 8px 0;
}

.location-search-dropdown .searchbox-datalink {
    background: transparent !important;
}

.location-search-dropdown .iq-post {
    background: transparent !important;
    margin: 0;
    padding: 8px 14px !important;
}

.location-search-dropdown .iq-post li {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    border-radius: 14px;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff !important;
    position: relative;
    overflow: hidden;
}

/* Shine effect on hover */
.location-search-dropdown .iq-post li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%);
    transition: left 0.5s ease;
}

.location-search-dropdown .iq-post li:hover::before {
    left: 100%;
}

.location-search-dropdown .iq-post li:last-child {
    margin-bottom: 0 !important;
}

.location-search-dropdown .iq-post li:hover {
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.18) 0%,
            rgba(0, 188, 212, 0.08) 100%);
    border-color: rgba(0, 188, 212, 0.4);
    transform: translateX(6px);
    box-shadow:
        0 8px 25px rgba(0, 188, 212, 0.15),
        0 0 0 1px rgba(0, 188, 212, 0.2) inset;
}

[dir="rtl"] .location-search-dropdown .iq-post li:hover {
    transform: translateX(-6px);
}

.location-search-dropdown .iq-post li a {
    color: #ffffff !important;
    text-decoration: none;
}

.location-search-dropdown .iq-post li a .nav-link {
    color: #ffffff !important;
    padding: 0;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

.location-search-dropdown .iq-post li:hover .nav-link {
    color: #00e5ff !important;
}

.location-search-dropdown .post-img-holder {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(0, 188, 212, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.location-search-dropdown .iq-post li:hover .post-img-holder {
    border-color: rgba(0, 188, 212, 0.7);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.3);
    transform: scale(1.05);
}

.location-search-dropdown .post-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.location-search-dropdown .iq-post li:hover .post-img-holder img {
    transform: scale(1.1);
}

.location-search-dropdown .post-blog {
    padding-left: 16px;
}

[dir="rtl"] .location-search-dropdown .post-blog {
    padding-left: 0;
    padding-right: 16px;
}

.location-search-dropdown .blog-box .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff !important;
}

/* Close button styling */
.top-width .custom-btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    color: #00bcd4 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

[dir="rtl"] .top-width .custom-btn-close {
    right: auto;
    left: 10px;
}

.top-width .custom-btn-close:hover {
    color: #0891b2 !important;
    transform: scale(1.1);
}

.top-width .custom-btn-close svg {
    width: 32px;
    height: 32px;
}

/* Record Not Found styling */
.location-search-dropdown .show-data li:only-child {
    text-align: center;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px;
    background: rgba(0, 188, 212, 0.1);
    padding: 20px !important;
}

/* Scrollbar for dropdown */
.location-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.location-search-dropdown::-webkit-scrollbar-track {
    background: rgba(28, 35, 64, 0.5);
    border-radius: 3px;
}

.location-search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 188, 212, 0.5);
    border-radius: 3px;
}

.location-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 188, 212, 0.7);
}

/* ===== Search Loading Spinner ===== */
.search-loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
}

.search-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.spinner-icon {
    width: 40px;
    height: 40px;
    animation: rotate 1.5s linear infinite;
}

.spinner-icon .path {
    stroke: #00bcd4;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.loading-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

/* ===== Mobile Sidebar - Authenticated User Styles ===== */
.sidebar-user-section {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(0, 188, 212, 0.05));
    border-radius: 12px;
    margin-bottom: 1rem;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #00bcd4;
    object-fit: cover;
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

.sidebar-user-email {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-user-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sidebar-menu-item:hover {
    background: rgba(0, 188, 212, 0.2);
    color: #00bcd4;
    transform: translateX(5px);
}

.sidebar-menu-item svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.sidebar-logout-form {
    margin-top: 0.5rem;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    color: #f87171;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-logout-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
    color: #fff;
}

.sidebar-logout-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Sidebar elements - Always visible inside sidebar */
.mobile-sidebar-actions .sidebar-lang-dropdown,
.mobile-sidebar-actions .sidebar-user-section,
.mobile-sidebar-actions .sidebar-user-menu,
.mobile-sidebar-actions .sidebar-logout-form,
.mobile-sidebar-actions .sidebar-login-btn {
    display: block;
}

/* ============================================
   SEARCH ROTATING BORDER EFFECT
   ============================================ */
@keyframes searchRotateBorder {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* الحاوية الأساسية - بدون overflow:hidden عشان النتائج تظهر */
.search-box-wrapper.search-animated-wrapper {
    position: relative !important;
    border-radius: 50px !important;
    background: #fff !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* طبقة الأنميشن - هنخليها داخل عنصر منفصل عشان نقدر نقصها لوحدها */
.search-animation-frame {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    overflow: hidden;
    /* القص بيحصل هنا بس */
    z-index: 0;
    pointer-events: none;
}

.search-animation-frame::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    padding-bottom: 200%;
    background: conic-gradient(from 0deg,
            transparent 0%,
            #00bcd4 10%,
            #fff 15%,
            #00bcd4 20%,
            transparent 25%,
            transparent 50%,
            #00bcd4 60%,
            #fff 65%,
            #00bcd4 70%,
            transparent 75%,
            transparent 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.search-animation-frame::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #fff;
    border-radius: 48px;
    z-index: 1;
}

.search-animated-wrapper:hover .search-animation-frame::before,
.search-animated-wrapper:focus-within .search-animation-frame::before {
    opacity: 1;
    animation: searchRotateBorder 2s linear infinite;
}

/* محتوى البحث الجوهري */
.search-content-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2px;
}

/* قائمة النتائج - تظهر بالكامل */
.search-animated-wrapper .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
    background: #1C2340 !important;
    /* لون غامق فخم */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* زرار الإغلاق absolute في الزاوية */
.custom-btn-close {
    position: absolute !important;
    top: -4% !important;
    right: 3% !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(220, 38, 38, 0.8) !important;
    /* لون أحمر */
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    cursor: pointer !important;
    z-index: 100 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

[dir="rtl"] .custom-btn-close {
    right: auto !important;
    left: -3% !important;
    top: -4% !important;
}

.custom-btn-close:hover {
    background: #dc2626 !important;
    transform: scale(1.1);
}

.custom-btn-close svg {
    width: 14px !important;
    height: 14px !important;
}