/* General Header Styles */
header.header-2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: block !important;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
}

 
.header-2 .container-fluid {
    display: block;
    width: 100%;
    overflow: visible; /* Allow dropdowns to popout */
}

.header-2 .row {
    overflow: visible; /* Allow dropdowns to popout */
}

.header-2 .col-md-3,
.header-2 .header-actions,
.header-2 .header-right {
    overflow: visible !important; /* Allow dropdowns to popout */
}

.header-2 .d-flex {
    overflow: visible !important;
}

.header-2 .align-items-center {
    overflow: visible !important;
}

.menu-toggle {
    cursor: pointer;
    font-size: 20px;
}

/* Dashboard menu toggle button styling for better visibility */
.dashboard-list .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid #0071d0;
    border-radius: 8px;
    background-color: #0071d0;
    color: #0071d0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 113, 208, 0.1);
}

.dashboard-list .menu-toggle:hover {
    background-color: #0071d0;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 113, 208, 0.2);
}

.dashboard-list .menu-toggle:active {
    transform: scale(0.95);
}

.dashboard-list .menu-toggle i {
    font-size: 20px;
    color: white !important;
}

/* RTL support for dashboard menu toggle */
html[dir="rtl"] .dashboard-list .menu-toggle {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* Hide user profile section on mobile */
@media (max-width: 767.98px) {
    .sidebar-user .user-profile {
        display: none !important;
    }
}
.brand-logo{
    padding: 5px;
    text-align: center;
}
.brand-logo img {
    height: 75px;
}

/* RTL Support for Header Layout */
html[dir="rtl"] .cstrow {
    direction: rtl;
}

html[dir="rtl"] .cstrow > div {
    text-align: right;
}

html[dir="rtl"] .header-actions {
   
    gap: .5rem !important;
    
}

html[dir="rtl"] .header-actions .nav-menu {
    gap: 1rem !important;
}

html[dir="rtl"] .header-right {
    margin-inline-start: 1.5rem;
}

html[dir="rtl"] .header-actions .action-pill {
    margin-inline-start: 0.5rem;
}

html[dir="rtl"] .header-actions .map-link {
    margin-inline-end: 1rem;
}

html[dir="rtl"] .col-md-3.d-flex.justify-content-end {
    justify-content: flex-start !important;
    padding-inline-end: calc(3rem + 50px);
}

html[dir="rtl"] .brand-logo {
    text-align: center;
}

html[dir="rtl"] .col-md-3.d-flex.justify-content-end {
    justify-content: start !important;
}

/* Mirror the layout for RTL - Burger menu on left, logo on right */
html[dir="rtl"] .cstrow .order-md-1 {
    order: 2; /* Logo moves to position 2 (after burger) */
}

html[dir="rtl"] .cstrow .order-md-2 {
    order: 1; /* Burger menu moves to position 1 (leftmost) */
}

html[dir="rtl"] .cstrow .order-md-3 {
    order: 3;
}

html[dir="rtl"] .cstrow .order-md-4 {
    order: 4;
}

.header-right .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.header-actions {
    gap: 1rem;
    overflow: visible !important;
    height: auto !important;
}

.search-input-group {
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: stretch;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-group:focus-within {
    border-color: #0071d0;
    box-shadow: 0 0 0 0.2rem rgba(0, 113, 208, 0.15);
}

.search-input-group .search-input {
    border: none;
    background: transparent;
    height: 48px;
    padding: 0 1.3rem;
    border-radius: 999px 0 0 999px;
    font-size: 1rem;
    flex: 1 1 auto;
    width: auto;
}

.search-input-group .search-input:focus {
    box-shadow: none;
}

.btn-search-icon {
    background-color: #0071d0;
    border: none;
    color: #ffffff;
    height: 48px;
    padding: 0 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 999px 999px 0;
    flex-shrink: 0;
}

.btn-search-icon:hover,
.btn-search-icon:focus {
    background-color: #005ea6;
    color: #ffffff;
}

.btn-search-icon:focus {
    box-shadow: none;
}

.header-actions .nav-menu {
    gap: 0.6rem;
    overflow: visible !important;
}

.header-actions .nav-menu li {
    margin: 0;
    overflow: visible !important;
}

.header-actions .nav-menu li.action-pill {
    position: relative;
    z-index: 1;
    overflow: visible; /* Allow dropdown to extend beyond */
}

.header-actions .action-pill > a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.header-actions .action-pill > a:hover {
    color: inherit;
}

.header-actions .action-pill {
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    height: 48px;
    padding: 0 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    position: relative; /* Ensure dropdown positions relative to this */
    overflow: visible !important; /* Allow dropdown to extend beyond */
}

.header-actions .action-pill:hover {
    background-color: #f5f7fa;
    border-color: #c3d4f0;
    color: #222222;
}

.header-actions .action-pill a {
    color: inherit;
    text-decoration: none;
}

.header-actions .action-pill a:hover {
    color: inherit;
    text-decoration: none;
}

.header-actions .action-pill.lang-switch {
    gap: 0.4rem;
}

.header-actions .map-link {
    background-color: #0071d0;
    border-color: #0071d0;
    color: #ffffff;
}

.header-actions .map-link:hover {
    background-color: #005ea6;
    border-color: #005ea6;
    color: #ffffff;
}

.header-actions .map-link i,
.header-actions .map-link span {
    color: inherit;
}

.nav-menu .dropdown ul {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 25px;
    padding: 15px;
    z-index: 9999; /* Ensure dropdown appears on top */
}

.nav-menu .dropdown:hover ul {
    display: block;
}

.nav-menu .dropdown {
    position: relative; /* Ensure dropdown positions relative to this */
}

/* Hide dropdown by default */
.header-actions .dropdown .cst-prof,
.header-actions .dropdown .nav-submenu {
    display: none !important;
}

/* Show dropdown only when .show class is added via JavaScript */
.header-actions .dropdown.show .nav-submenu,
.header-actions .dropdown.show .cst-prof {
    display: block !important;
}

/* Ensure dropdown container doesn't clip content */
.header-actions li.dropdown.action-pill {
    overflow: visible !important;
    position: relative;
}

.header-actions .nav-menu li.dropdown {
    overflow: visible !important;
    position: relative;
}

.header-actions .dropdown > a {
    cursor: pointer;
}

.slide-menu {
    position: fixed;
    top: 85px;
    left: -300px; /* Initially hidden */
    width: 300px;
    height: auto;
    max-height: 100vh;
    background: #fff;
    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    transition: all 0.3s ease; /* Smooth transition */
    z-index: 3000;
}

/* For RTL: Slide menu appears on the right */
.rtl .slide-menu,
[dir="rtl"] .slide-menu,
html[dir="rtl"] .slide-menu {
    left: auto !important; /* Ignore left positioning */
    right: -300px; /* Hidden on the right */
    box-shadow: -2px 0px 6px rgba(0, 0, 0, 0.2); /* Shadow on left side for RTL */
}

.rtl .slide-menu.open,
[dir="rtl"] .slide-menu.open,
html[dir="rtl"] .slide-menu.open {
    right: 0 !important; /* Display menu on the right */
    left: auto !important;
}

/* For LTR: Menu opens on the left */
.slide-menu.open {
    left: 0; /* Display menu on the left for LTR */
}

.langIcon {
    font-size: 12px;
    color: black;
}

.language {
    font-size: 16px;
    color: black;
}

.slide-menu-content {
    padding: 16px;
    direction: ltr; /* Default LTR direction */
}

/* RTL direction for slide menu content */
html[dir="rtl"] .slide-menu-content,
[dir="rtl"] .slide-menu-content,
.rtl .slide-menu-content {
    direction: rtl;
    text-align: right;
}

/* Beautified slide menu */
.slide-menu-content .menu-section-title {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.slide-menu-content .menu-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* force vertical stacking */
    gap: 4px;
}

/* RTL alignment for menu lists */
html[dir="rtl"] .slide-menu-content .menu-list,
[dir="rtl"] .slide-menu-content .menu-list,
.rtl .slide-menu-content .menu-list {
    text-align: right;
    direction: rtl;
}

.slide-menu-content .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    width: 100%;
}

.slide-menu-content .menu-link:hover {
    background: #f5f7fa;
}

.slide-menu-content .menu-link i {
    width: 22px;
    text-align: center;
    color: #6b7280;
}

.slide-menu-content .menu-divider {
    height: 1px;
    background: #ececec;
    margin: 6px 0;
}

.slide-menu-content .menu-locale i {
    color: #6b7280;
}

/* Enhanced mobile menu link styling */
/* Enhanced menu links - inspired by Toggl's large tappable icons */
.slide-menu-content .menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #333;
    text-decoration: none;
    width: 100%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    margin-bottom: 0;
    text-align: left; /* Default LTR alignment */
}

/* RTL: Icon first (on right), then text - both right-aligned */
html[dir="rtl"] .slide-menu-content .menu-link,
html[dir="rtl"] body .slide-menu-content .menu-link,
[dir="rtl"] .slide-menu-content .menu-link,
[dir="rtl"] body .slide-menu-content .menu-link,
.rtl .slide-menu-content .menu-link,
body.rtl .slide-menu-content .menu-link {
    flex-direction: row !important; /* Keep normal order: icon on left, text on right */
    text-align: right !important; /* Right align container */
    justify-content: flex-start !important; /* Start from left (icon, then text) */
    gap: 12px !important; /* Ensure gap between icon and text */
}

html[dir="rtl"] .slide-menu-content .menu-link span,
html[dir="rtl"] body .slide-menu-content .menu-link span,
[dir="rtl"] .slide-menu-content .menu-link span,
[dir="rtl"] body .slide-menu-content .menu-link span,
.rtl .slide-menu-content .menu-link span,
body.rtl .slide-menu-content .menu-link span {
    text-align: right !important; /* Right align text */
    margin-right: 0;
    flex: 1;
    direction: rtl;
}

html[dir="rtl"] .slide-menu-content .menu-link i,
html[dir="rtl"] body .slide-menu-content .menu-link i,
[dir="rtl"] .slide-menu-content .menu-link i,
[dir="rtl"] body .slide-menu-content .menu-link i,
.rtl .slide-menu-content .menu-link i,
body.rtl .slide-menu-content .menu-link i {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

.slide-menu-content .menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: #0071d0;
    border-radius: 0 2px 2px 0;
    transition: height 0.3s ease;
}

.slide-menu-content .menu-link:hover {
    background: linear-gradient(90deg, #f5f7fa 0%, #ffffff 100%);
    color: #0071d0;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 113, 208, 0.08);
}

.slide-menu-content .menu-link:hover::before {
    height: 70%;
}

html[dir="rtl"] .slide-menu-content .menu-link::before,
[dir="rtl"] .slide-menu-content .menu-link::before,
.rtl .slide-menu-content .menu-link::before {
    left: auto !important;
    right: 0;
}

html[dir="rtl"] .slide-menu-content .menu-link:hover,
[dir="rtl"] .slide-menu-content .menu-link:hover,
.rtl .slide-menu-content .menu-link:hover {
    transform: translateX(-4px);
    background: linear-gradient(90deg, #ffffff 0%, #f5f7fa 100%);
}

.slide-menu-content .menu-link i {
    width: 26px;
    text-align: center;
    color: #6b7280;
    font-size: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.slide-menu-content .menu-link:hover i {
    color: #0071d0;
    transform: scale(1.1);
}

/* Reset transform for directional icons in RTL to avoid double transform */
html[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
html[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt {
    transform: scaleX(-1) scale(1.1); /* Flip + scale on hover */
}

/* Special styling for login/signup buttons - inspired by UpKeep and Freshworks */
.slide-menu-content .menu-link-login {
    background: linear-gradient(135deg, #0071d0 0%, #005ea6 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 113, 208, 0.25);
    position: relative;
    overflow: hidden;
    /* Override default menu-link styles */
    transform: none !important;
    margin-bottom: 0;
}

/* Ripple effect for login button */
.slide-menu-content .menu-link-login::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.slide-menu-content .menu-link-login:hover::before {
    width: 300px;
    height: 300px;
}

.slide-menu-content .menu-link-login:hover {
    background: linear-gradient(135deg, #005ea6 0%, #004a8c 100%);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 208, 0.4);
}

html[dir="rtl"] .slide-menu-content .menu-link-login:hover {
    transform: translateY(-2px);
}

.slide-menu-content .menu-link-login i {
    color: #ffffff !important;
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
}

.slide-menu-content .menu-link-signup {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #0071d0;
    font-weight: 600;
    /* Override default menu-link styles */
    transform: none !important;
    margin-bottom: 0;
    box-shadow: none;
}

/* Remove left accent indicator for signup button */
.slide-menu-content .menu-link-signup::before {
    display: none !important;
}

.slide-menu-content .menu-link-signup:hover {
    background: #e9ecef;
    border-color: #0071d0;
    color: #005ea6;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 208, 0.15);
}

.slide-menu-content .menu-link-signup i {
    color: #0071d0;
    transform: none;
}

.slide-menu-content .menu-link-signup:hover i {
    transform: none;
}

/* Language button styling - matches signup button design */
.slide-menu-content .menu-link-lang {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #0071d0;
    font-weight: 600;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Override default menu-link styles */
    transform: none !important;
    box-shadow: none;
    margin-bottom: 0;
}

/* Remove left accent indicator for language buttons */
.slide-menu-content .menu-link-lang::before {
    display: none !important;
}

.slide-menu-content .menu-link-lang:hover {
    background: #e9ecef;
    border-color: #0071d0;
    color: #005ea6;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 208, 0.15);
}

.slide-menu-content .menu-link-lang i {
    color: #0071d0;
    font-size: 18px;
    width: 20px;
    text-align: center;
    transition: color 0.25s ease;
    transform: none;
}

.slide-menu-content .menu-link-lang:hover i {
    color: #005ea6;
    transform: none;
}

/* RTL for language button - icon on left, text on right */
html[dir="rtl"] .slide-menu-content .menu-link-lang,
[dir="rtl"] .slide-menu-content .menu-link-lang,
.rtl .slide-menu-content .menu-link-lang {
    flex-direction: row; /* Normal order: icon on left, text on right */
    text-align: right;
    justify-content: flex-start; /* Start from left */
    gap: 12px; /* Ensure gap between icon and text */
    direction: rtl; /* RTL direction */
}

html[dir="rtl"] .slide-menu-content .menu-link-lang span,
[dir="rtl"] .slide-menu-content .menu-link-lang span,
.rtl .slide-menu-content .menu-link-lang span {
    text-align: right;
}

html[dir="rtl"] .slide-menu-content .menu-link-lang i,
[dir="rtl"] .slide-menu-content .menu-link-lang i,
.rtl .slide-menu-content .menu-link-lang i {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

html[dir="rtl"] .slide-menu-content .menu-link-lang:hover,
[dir="rtl"] .slide-menu-content .menu-link-lang:hover,
.rtl .slide-menu-content .menu-link-lang:hover {
    transform: translateY(-1px) !important;
}

/* RTL for signup and login buttons - icon on left, text on right */
html[dir="rtl"] .slide-menu-content .menu-link-signup,
html[dir="rtl"] .slide-menu-content .menu-link-login,
html[dir="rtl"] body .slide-menu-content .menu-link-signup,
html[dir="rtl"] body .slide-menu-content .menu-link-login,
[dir="rtl"] .slide-menu-content .menu-link-signup,
[dir="rtl"] .slide-menu-content .menu-link-login,
[dir="rtl"] body .slide-menu-content .menu-link-signup,
[dir="rtl"] body .slide-menu-content .menu-link-login,
.rtl .slide-menu-content .menu-link-signup,
.rtl .slide-menu-content .menu-link-login,
body.rtl .slide-menu-content .menu-link-signup,
body.rtl .slide-menu-content .menu-link-login {
    flex-direction: row !important; /* Normal order: icon on left, text on right */
    text-align: right !important;
    justify-content: flex-start !important; /* Start from left */
    gap: 12px !important; /* Ensure gap between icon and text */
}

html[dir="rtl"] .slide-menu-content .menu-link-signup span,
html[dir="rtl"] .slide-menu-content .menu-link-login span,
html[dir="rtl"] body .slide-menu-content .menu-link-signup span,
html[dir="rtl"] body .slide-menu-content .menu-link-login span,
[dir="rtl"] .slide-menu-content .menu-link-signup span,
[dir="rtl"] .slide-menu-content .menu-link-login span,
[dir="rtl"] body .slide-menu-content .menu-link-signup span,
[dir="rtl"] body .slide-menu-content .menu-link-login span,
.rtl .slide-menu-content .menu-link-signup span,
.rtl .slide-menu-content .menu-link-login span,
body.rtl .slide-menu-content .menu-link-signup span,
body.rtl .slide-menu-content .menu-link-login span {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .slide-menu-content .menu-link-signup i,
html[dir="rtl"] .slide-menu-content .menu-link-login i,
html[dir="rtl"] body .slide-menu-content .menu-link-signup i,
html[dir="rtl"] body .slide-menu-content .menu-link-login i,
[dir="rtl"] .slide-menu-content .menu-link-signup i,
[dir="rtl"] .slide-menu-content .menu-link-login i,
[dir="rtl"] body .slide-menu-content .menu-link-signup i,
[dir="rtl"] body .slide-menu-content .menu-link-login i,
.rtl .slide-menu-content .menu-link-signup i,
.rtl .slide-menu-content .menu-link-login i,
body.rtl .slide-menu-content .menu-link-signup i,
body.rtl .slide-menu-content .menu-link-login i {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

/* Flip directional icons in RTL mode - arrows, sign-in, etc. */
html[dir="rtl"] .slide-menu-content .menu-link-login i.fa-sign-in-alt,
html[dir="rtl"] .slide-menu-content .menu-link-login i.fas.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login i.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login i.fas.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login i.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login i.fas.fa-sign-in-alt {
    transform: scaleX(-1); /* Flip the icon horizontally */
}

html[dir="rtl"] .slide-menu-content .menu-link-logout i.fa-sign-out-alt,
html[dir="rtl"] .slide-menu-content .menu-link-logout i.fas.fa-sign-out-alt,
[dir="rtl"] .slide-menu-content .menu-link-logout i.fa-sign-out-alt,
[dir="rtl"] .slide-menu-content .menu-link-logout i.fas.fa-sign-out-alt,
.rtl .slide-menu-content .menu-link-logout i.fa-sign-out-alt,
.rtl .slide-menu-content .menu-link-logout i.fas.fa-sign-out-alt {
    transform: scaleX(-1); /* Flip the icon horizontally */
}

/* Ensure icons are properly positioned in RTL for all menu links */
/* flex-direction: row-reverse already handles the positioning */
html[dir="rtl"] .slide-menu-content .menu-link i,
[dir="rtl"] .slide-menu-content .menu-link i,
.rtl .slide-menu-content .menu-link i {
    margin-left: 0;
    margin-right: 0;
}

/* Override icon transform on hover for flipped icons in RTL */
html[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
html[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
[dir="rtl"] .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login:hover i.fa-sign-in-alt,
.rtl .slide-menu-content .menu-link-login:hover i.fas.fa-sign-in-alt {
    transform: scaleX(-1) scale(1.1); /* Flip + scale on hover */
}

.slide-menu-content .menu-link-logout {
    color: #dc3545;
}

.slide-menu-content .menu-link-logout:hover {
    background: #fff5f5;
    color: #c82333;
}

.slide-menu-content .menu-link-logout i {
    color: #dc3545;
}

.slide-menu-content .menu-link-logout:hover i {
    color: #c82333;
}

/* Enhanced section titles - inspired by Stripe's organized categories */
.slide-menu-content .menu-section-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
    display: inline-block;
    width: 100%;
}

.slide-menu-content .menu-section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #0071d0;
    transition: width 0.3s ease;
}

.slide-menu-content .menu-section:hover .menu-section-title::after {
    width: 60px;
}

/* Better locale button styling */
.slide-menu-content .menu-locale {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.slide-menu-content .menu-locale .btn {
    font-weight: 500;
    border-width: 2px;
    transition: all 0.2s ease;
}

.slide-menu-content .menu-locale .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 113, 208, 0.2);
}

/* Improved close button with animated hamburger-to-X transformation */
.slide-menu .close-menu {
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    color: #6b7280;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    font-weight: 300;
    line-height: 1;
}

.slide-menu .close-menu:hover {
    background: #f5f7fa;
    color: #1f2937;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slide-menu .close-menu:active {
    transform: rotate(90deg) scale(0.95);
}

html[dir="rtl"] .slide-menu .close-menu {
    right: auto;
    left: 16px;
}

/* Mobile menu scrollbar styling */
.slide-menu-content::-webkit-scrollbar {
    width: 6px;
}

.slide-menu-content::-webkit-scrollbar-track {
    background: #f5f7fa;
}

.slide-menu-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.slide-menu-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Account section special styling */
.slide-menu-content .menu-section:has(.menu-link-login),
.slide-menu-content .menu-section:has(.menu-link-signup) {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
}

/* RTL-specific improvements for mobile menu */
html[dir="rtl"] .slide-menu-content .menu-link,
[dir="rtl"] .slide-menu-content .menu-link,
.rtl .slide-menu-content .menu-link {
    direction: rtl;
    text-align: right;
    flex-direction: row-reverse;
}

html[dir="rtl"] .slide-menu-content .menu-link i,
[dir="rtl"] .slide-menu-content .menu-link i,
.rtl .slide-menu-content .menu-link i {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .slide-menu-content .menu-locale,
[dir="rtl"] .slide-menu-content .menu-locale,
.rtl .slide-menu-content .menu-locale {
    direction: rtl;
}

html[dir="rtl"] .slide-menu-content .menu-section-title,
[dir="rtl"] .slide-menu-content .menu-section-title,
.rtl .slide-menu-content .menu-section-title {
    text-align: right;
}

/* RTL section title underline */
html[dir="rtl"] .slide-menu-content .menu-section-title::after,
[dir="rtl"] .slide-menu-content .menu-section-title::after,
.rtl .slide-menu-content .menu-section-title::after {
    left: auto;
    right: 0;
}

/* Staggered entrance animation for menu sections - inspired by modern app design */
.slide-menu.open .slide-menu-content .menu-section {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.slide-menu.open .slide-menu-content .menu-section:nth-child(1) {
    animation-delay: 0.1s;
}

.slide-menu.open .slide-menu-content .menu-section:nth-child(2) {
    animation-delay: 0.15s;
}

.slide-menu.open .slide-menu-content .menu-section:nth-child(3) {
    animation-delay: 0.2s;
}

.slide-menu.open .slide-menu-content .menu-section:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compact section spacing */
.slide-menu-content .menu-section-compact {
    margin-top: 10px !important;
}

.slide-menu-content .menu-section {
    margin-bottom: 10px;
}

.slide-menu-content .menu-section:first-of-type {
    margin-top: 0;
}

/* Better spacing for mobile menu - more compact */
@media (max-width: 575.98px) {
    .slide-menu-content {
        padding: 16px 14px 20px;
    }
    
    /* RTL direction for mobile menu content */
    [dir="rtl"] .slide-menu-content,
    html[dir="rtl"] .slide-menu-content,
    .rtl .slide-menu-content {
        direction: rtl;
        text-align: right;
    }
    
    .slide-menu-content .menu-section {
        margin-bottom: 12px;
        padding: 14px;
        border-radius: 14px;
    }
    
    .slide-menu-content .menu-link {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 12px;
        min-height: 48px;
    }
    
    /* RTL for menu links on mobile */
    [dir="rtl"] .slide-menu-content .menu-link,
    html[dir="rtl"] .slide-menu-content .menu-link,
    .rtl .slide-menu-content .menu-link {
        flex-direction: row-reverse;
        text-align: right;
    }
    
    .slide-menu-content .menu-section-title {
        font-size: 13px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    
    /* RTL for section titles on mobile */
    [dir="rtl"] .slide-menu-content .menu-section-title,
    html[dir="rtl"] .slide-menu-content .menu-section-title,
    .rtl .slide-menu-content .menu-section-title {
        text-align: right;
    }
    
    [dir="rtl"] .slide-menu-content .menu-section-title::after,
    html[dir="rtl"] .slide-menu-content .menu-section-title::after,
    .rtl .slide-menu-content .menu-section-title::after {
        left: auto;
        right: 0;
    }
    
    /* Improve first menu section spacing */
    .slide-menu-content .menu-section:first-of-type {
        margin-top: 6px;
    }
    
    .slide-menu-content .menu-section-compact {
        margin-top: 10px !important;
    }
    
    .slide-menu-content .menu-link-lang {
        padding: 12px 16px;
        min-height: 48px;
    }
    
    /* RTL for language and button links on mobile */
    [dir="rtl"] .slide-menu-content .menu-link-lang,
    [dir="rtl"] .slide-menu-content .menu-link-login,
    [dir="rtl"] .slide-menu-content .menu-link-signup,
    html[dir="rtl"] .slide-menu-content .menu-link-lang,
    html[dir="rtl"] .slide-menu-content .menu-link-login,
    html[dir="rtl"] .slide-menu-content .menu-link-signup,
    .rtl .slide-menu-content .menu-link-lang,
    .rtl .slide-menu-content .menu-link-login,
    .rtl .slide-menu-content .menu-link-signup {
        flex-direction: row-reverse;
        text-align: right;
    }
}

/* Hide legacy list inside slide menu */
.slide-menu-content > ul.nav-menu.nv-li {
    display: none;
}

.slide-menu .close-menu {
    font-size: 25px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Hide legacy language block inside slide menu (replaced by new locale buttons) */
.slide-menu #dvLang { display: none; }

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .nav-menu li {
        margin: 4px 0;
    }


    .nav-menu .nav-submenu {
        display: none;
        list-style: none;
    }

    .nav-menu .dropdown:hover .nav-submenu {
        display: block;
    }

.nav-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

#menu-toggle-iconL, #menu-toggle-iconS, #map-icon {
    font-size: 19px;
    padding: 25.7px;
    
    
}

    #menu-toggle-iconL:hover, #menu-toggle-iconS:hover, #map-icon:hover {
        background-color: #55a6f7;
        color: white;       
background-color : #f5f7fa;
    border-color: #c3d4f0;
    color: #222222;
        cursor: pointer;
    }

.cst-menu {
    padding: 0;
}

   

.nv-li li {
    display: block !important;
}

.cst-mnu {
    display: none;
    padding: 0px !important;
    width: 120px;
    background-color: #f5f4f4 !important;
    border-radius: 5px;
}

    .cst-mnu li {
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);
        display: block;
        padding: 5px 15px;
    }
        /* Remove border and set margin-bottom for the last item */
        .cst-mnu li:last-child {
            border-bottom: none; /* Remove border */
            margin-bottom: 0; /* Remove margin */
        }

/* Mobile top bar direction-aware ordering */
.mobile-topbar .order-ltr-1 { order: 1; }
.mobile-topbar .order-ltr-2 { order: 2; }
.mobile-topbar .order-ltr-3 { order: 3; }
html[dir="rtl"] .mobile-topbar .order-rtl-1 { order: 1; }
html[dir="rtl"] .mobile-topbar .order-rtl-2 { order: 2; }
html[dir="rtl"] .mobile-topbar .order-rtl-3 { order: 3; }
html[dir="ltr"] .mobile-topbar .order-rtl-1,
html[dir="ltr"] .mobile-topbar .order-rtl-2,
html[dir="ltr"] .mobile-topbar .order-rtl-3 { order: initial; }

/* Map chip size tweaks */
.map-chip-wrapper .btn {
    height: 36px;
    line-height: 1;
}

.mobile-menu .menu-toggle {
    padding: 6px 10px;
}


.partition {
    
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
}

.smallNone { 
    display: flex !important; 
}
.largeNone { 
    display: none !important; 
}

@media (max-width: 575.98px) {



    .partition {
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
        border-bottom: dashed 1px #ddd;
    }


    .cstrow > * {
        width: auto;
    }

    #menu-toggle-iconL, #menu-toggle-iconS, #map-icon, #dvLogin, #dvLang {
        font-size: 12px;
        padding: 7px;
        background-color: #ffffff;
        border: solid 1px #d6d6d6;
    }

        #dvLogin li, #dvLang li {
            margin: 0px;
            font-size: 12px
        }

    .language {
        font-size: 11px;
        color: black;
    }

    .smallNone {
        display: none !important;
    }

    .largeNone { 
        display: flex !important; 
    }

.ml-3{
    margin-left: 7px;;
}

    .slide-menu {
        position: fixed;
        top: 0;
        left: -100vw; /* hidden off-screen */
        width: 100vw;  /* full overlay */
        height: 100vh;
        max-height: 100vh;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 3000;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    }

    .slide-menu.open { 
        left: 0;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    }

    [dir="rtl"] .slide-menu,
    html[dir="rtl"] .slide-menu,
    .rtl .slide-menu {
        left: auto !important;
        right: -100vw; /* hidden on right for RTL */
        box-shadow: -8px 0px 24px rgba(0, 0, 0, 0.2); /* Shadow on left for RTL */
    }

    [dir="rtl"] .slide-menu.open,
    html[dir="rtl"] .slide-menu.open,
    .rtl .slide-menu.open { 
        right: 0 !important;
        left: auto !important;
        box-shadow: -12px 0px 48px rgba(0, 0, 0, 0.25);
    }

    .slide-menu .close-menu { 
        top: 16px; 
        right: 16px; 
        font-size: 24px;
        width: 40px;
        height: 40px;
    }
    
    [dir="rtl"] .slide-menu .close-menu,
    html[dir="rtl"] .slide-menu .close-menu,
    .rtl .slide-menu .close-menu { 
        left: 16px !important; 
        right: auto !important; 
    }
    
    /* Menu backdrop overlay */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2999;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .slide-menu-content { 
        height: 100%; 
        overflow-y: auto; 
        padding: 18px 16px 24px; 
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    }
    
    /* RTL direction for mobile menu content */
    [dir="rtl"] .slide-menu-content,
    html[dir="rtl"] .slide-menu-content,
    .rtl .slide-menu-content {
        direction: rtl;
        text-align: right;
    }
    
    .slide-menu-content .menu-section { 
        background:#fff; 
        border-radius:16px; 
        padding:16px; 
        box-shadow:0 2px 12px rgba(0,0,0,.06); 
        margin-bottom: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(0, 0, 0, 0.03);
    }
    
    .slide-menu-content .menu-section:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        transform: translateY(-2px);
    }




     

}
.cst-prof {
    display: none;
    position: absolute;
    top: calc(100% + 0px) !important;
    left: auto;
    right: 0;
    padding: 8px 0;
    min-width: 200px;
    max-height: none !important; /* Remove any height constraints */
    height: auto !important;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    z-index: 10000 !important; /* Higher z-index to appear over everything */
    list-style: none;
    margin: 0;
    overflow: visible !important; /* Prevent scrollbars */
    width: auto; /* Auto width based on content */
    pointer-events: auto !important; /* Ensure clicks work */
}

[dir="rtl"] .cst-prof {
    left: auto;
    right: 0;
    text-align: right;
}

.cst-prof li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    border-bottom: 1px solid transparent;
}

.cst-prof li:last-child {
    border-bottom: none;
}

.cst-prof li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.cst-prof li a:hover {
    color: #0071d0;
    background-color: #f8fafc;
}

.cst-prof li a i {
    width: 18px;
    text-align: center;
}

/* Specific styling for nav-submenu when used as dropdown */
.nav-submenu.cst-prof {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
}

.nav-submenu.cst-prof li {
    display: block !important;
    width: 100% !important;
}
.fa-search:before
{
    color: white;
}
/* Footer styles */
.footer-contact {
    padding: 0;
}

.footer-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #1f2937; /* neutral dark text */
    font-size: 15px;
}

.footer-contact .contact-item:last-child {
    margin-bottom: 0;
}

/* Feather-like inline SVG styling */
.footer-contact svg {
    width: 22px;
    height: 22px;
    stroke: #0d6efd; /* primary blue */
    stroke-width: 2.2px;
    flex-shrink: 0;
}

/* Direction-aware spacing remains correct thanks to gap */
html[dir="rtl"] .footer-contact .contact-item {
    justify-content: flex-start;
}

.footer-logo-img {
    width: 85px;
    height: auto;
}

@media (min-width: 768px) {
    .footer-logo-img {
        width: 110px;
    }
}
