/* =============================================
   PLANESTI LANDING PAGE - GLOBAL STYLES
   =============================================
   
   TABLE OF CONTENTS:
   ------------------
   1.  CSS VARIABLES
   2.  BASE RESET
   3.  CONTAINER
   4.  BUTTONS
   5.  NAVBAR
       5.1  Base Navbar
       5.2  Shadow Variations
       5.3  Menu Alignment
       5.3.1 Header Layout (Admin Controlled)
       5.4  Scroll Behaviors (Shrink, Hide)
       5.5  Logo
       5.6  Navigation Links
   6.  MEGA SUBMENU (Desktop Dropdowns)
   7.  HEADER SEARCH
       7.1  Base Search
       7.2  Search Styles (Expanded, Icon Only, Expandable)
       7.3  Search Position (In Menu)
   8.  NAV ACTIONS (CTA Buttons)
   9.  HAMBURGER MENU
   10. MOBILE MENU
       10.1  Base Mobile Menu
       10.2  Mobile Menu Styles (Slide Right, Slide Left, Fullscreen, Dropdown)
       10.3  Mobile Menu Header
       10.4  Mobile Search
       10.5  Mobile Navigation
       10.6  Mobile Submenu
       10.7  Mobile Actions
   11. SECTIONS
   12. FOOTER
   13. LIVE SEARCH SUGGESTIONS
   14. RESPONSIVE BREAKPOINTS
   
   ============================================= */


/* ==============================================
   1. CSS VARIABLES
   ============================================== */
:root {
    /* Base Colors (Theme colors come from dynamic-theme.css) */
    --bg: #f8fafc;
    --white: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    
    /* Shadows */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
    --section-bg-dark: #1e293b;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition: 0.2s ease;
    --transition-smooth: 0.3s ease;
    --transition-slide: 0.4s ease;
    
    /* Spacing System (8px grid) */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    
    /* Layout */
    --page-padding: 32px;
    --section-margin: 32px;
    --card-padding: 20px;
    --element-gap: 16px;
    
/* Header System (Defaults - Overridden by admin settings) */
    --header-height: 72px;
    --header-height-shrink: 60px;
    --header-text-color: #1e293b;
    --header-hover-color: #016db7;
    --transparent-text-color: #ffffff;
    --transparent-hover-color: #fbbf24;
    
    /* Logo Size */
    --logo-max-height: 40px;
    --logo-max-height-shrink: 32px;
    
    /* Top Bar */
    --topbar-height: 40px;
}


/* ==============================================
   2. BASE RESET
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}


/* ==============================================
   3. CONTAINER
   ============================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ==============================================
   4. BUTTONS
   ============================================== */
.btn {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(1, 109, 183, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-accent {
    background: var(--accent);
    color: white;
}

.btn-accent:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.btn-white {
    background: white;
    color: var(--primary);
}

.btn-white:hover {
    background: var(--bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* CTA Button Styles (Used in Header) */
.btn-solid {
    border: none;
}

.btn-outline {
    background: transparent;
}

.btn-gradient {
    border: none;
}


/* ==============================================
   5. NAVBAR
   ============================================== */

/* ---------------------------------------------
   5.1 Base Navbar
   --------------------------------------------- */
.navbar {
    position: fixed;
    top: var(--navbar-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-navbar, 9998);
    height: var(--header-height, 72px);
    display: flex;
    align-items: center;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;
}

.navbar .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    height: 100%;
    width: 100%;
}

/* Fallback: When no JS has run yet */
.navbar:not([style*="top"]) {
    top: 0;
}

/* ---------------------------------------------
   5.2 Shadow Variations (Admin Controlled)
   --------------------------------------------- */
.navbar.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.navbar.shadow-md {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.navbar.shadow-lg {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

/* No shadow */
.navbar:not(.shadow-sm):not(.shadow-md):not(.shadow-lg) {
    box-shadow: none !important;
}

/* No shadow class = no shadow */

/* ---------------------------------------------
   5.3 Header Layout & Menu Alignment (Admin Controlled)
   --------------------------------------------- */

/* Logo - Always flex-shrink to maintain size */
.navbar .logo {
    flex-shrink: 0;
    z-index: 2;
}

/* Nav Links - Flexible middle section */
.navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Search - Maintain size */
.navbar .header-search {
    flex-shrink: 0;
}

/* CTA Actions - Always on right, never shrink */
.navbar .nav-actions {
    flex-shrink: 0;
}

/* ===========================================
   LAYOUT: Logo Left (Default)
   [LOGO] [----MENU----] [SEARCH] [CTA]
   =========================================== */
.navbar.layout-logo_left .nav-links {
    flex: 1;
}

.navbar.layout-logo_left.menu-left .nav-links {
    justify-content: flex-start;
}

.navbar.layout-logo_left.menu-center .nav-links {
    justify-content: center;
}

.navbar.layout-logo_left.menu-right .nav-links {
    justify-content: flex-end;
}

/* ===========================================
   LAYOUT: Logo Center
   [MENU] [----LOGO----] [SEARCH + CTA]
   =========================================== */
.navbar.layout-logo_center .logo {
    order: 2;
    margin: 0 auto;
}

.navbar.layout-logo_center .nav-links {
    order: 1;
    flex: 0 0 auto;
}

.navbar.layout-logo_center .header-search {
    order: 3;
}

.navbar.layout-logo_center .nav-actions {
    order: 4;
}

/* Search In Menu - moves to left with nav-links */
.navbar.layout-logo_center .header-search.search-in-menu {
    order: 1;
    margin-right: 0;
    margin-left: 12px;
}

/* ---------------------------------------------
   5.3.2 Header Content Width (Admin Controlled)
   --------------------------------------------- */
.navbar.header-width-narrow .container {
    max-width: 1024px;
}

.navbar.header-width-default .container {
    max-width: 1280px;
}

.navbar.header-width-wide .container {
    max-width: 1440px;
}

.navbar.header-width-full .container {
    max-width: 100%;
    padding: 0 32px;
}


/* ---------------------------------------------
   5.4 Scroll Behaviors (Admin Controlled)
   --------------------------------------------- */

/* Cross-browser smooth transitions */
.navbar {
    -webkit-transition: height 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    -moz-transition: height 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    transition: height 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: height, transform;
}

   /* Shrink on Scroll */
.navbar.navbar-shrink {
    height: var(--header-height-shrink, 60px);
}

.navbar.navbar-shrink .logo-img {
    max-height: 32px;
}

.navbar.navbar-shrink .nav-link > a {
    padding: 8px 14px;
}

/* Hide on Scroll Down */
.navbar.navbar-hidden {
    transform: translateY(-100%);
}

/* Static Navbar - Scrolls with page (Admin Controlled) */
.navbar.navbar-static {
    position: relative !important;
    top: auto !important;
}

/* Transparent on Hero (Admin Controlled) */
.navbar.navbar-transparent {
    --scroll-opacity: 0;
    backdrop-filter: none;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.navbar.navbar-transparent:not(.navbar-scrolled) {
    background-color: transparent !important;
}

.navbar.navbar-transparent.navbar-scrolled {
    backdrop-filter: blur(calc(var(--scroll-opacity) * 10px));
    box-shadow: 0 2px 8px rgba(0, 0, 0, calc(var(--scroll-opacity) * 0.05)) !important;
}

/* Transparent State - Text & Hover Colors (FIX) */
.navbar.navbar-transparent.navbar-over-hero .nav-link > a {
    color: var(--transparent-text-color) !important;
}

.navbar.navbar-transparent.navbar-over-hero .nav-link > a:hover {
    color: var(--transparent-hover-color) !important;
}

.navbar.navbar-transparent.navbar-over-hero .hamburger .bar {
    background-color: var(--transparent-text-color) !important;
}

.navbar.navbar-transparent.navbar-over-hero .header-search i {
    color: var(--transparent-text-color) !important;
}

/* Transparent State - Logo Switching */
.navbar.navbar-transparent .logo-transparent {
    display: none;
}

.navbar.navbar-transparent .logo-default {
    display: block;
}

.navbar.navbar-transparent.navbar-over-hero .logo-transparent {
    display: block;
}

.navbar.navbar-transparent.navbar-over-hero .logo-default {
    display: none;
}

/* ---------------------------------------------
   5.5 Logo
   --------------------------------------------- */
.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}

.navbar .logo-img {
    max-height: var(--logo-max-height, 40px);
    transition: max-height var(--transition-smooth);
}

/* Logo shrink when header shrinks */
.navbar.navbar-shrink .logo-img {
    max-height: var(--logo-max-height-shrink, 32px);
}

.navbar .logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

/* ---------------------------------------------
   5.6 Navigation Links
   --------------------------------------------- */
.navbar .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.navbar .nav-link > a {
    padding: 10px 14px;
    color: var(--header-text-color, var(--text));
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    white-space: nowrap;
}

.navbar .nav-link > a:hover {
    color: var(--header-hover-color, var(--primary)) !important;
}

/* ---------------------------------------------
   5.7 Menu Typography (Admin Controlled)
   --------------------------------------------- */

/* Menu Font Size */
.navbar.header-menu-size-sm .nav-link > a {
    font-size: 13px;
}

.navbar.header-menu-size-md .nav-link > a {
    font-size: 14px;
}

.navbar.header-menu-size-lg .nav-link > a {
    font-size: 15px;
}

.navbar.header-menu-size-xl .nav-link > a {
    font-size: 16px;
}

/* Menu Font Weight */
.navbar.header-menu-weight-normal .nav-link > a {
    font-weight: 400;
}

.navbar.header-menu-weight-medium .nav-link > a {
    font-weight: 500;
}

.navbar.header-menu-weight-semibold .nav-link > a {
    font-weight: 600;
}

.navbar.header-menu-weight-bold .nav-link > a {
    font-weight: 700;
}

/* Menu Item Spacing */
.navbar.header-menu-spacing-compact .nav-links {
    gap: 0;
}

.navbar.header-menu-spacing-normal .nav-links {
    gap: 4px;
}

.navbar.header-menu-spacing-spacious .nav-links {
    gap: 12px;
}

.navbar.header-menu-spacing-wide .nav-links {
    gap: 20px;
}

/* Menu Text Transform */
.navbar.header-menu-transform-none .nav-link > a {
    text-transform: none;
}

.navbar.header-menu-transform-uppercase .nav-link > a {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.navbar.header-menu-transform-capitalize .nav-link > a {
    text-transform: capitalize;
}

.navbar.header-menu-transform-lowercase .nav-link > a {
    text-transform: lowercase;
}

/* ---------------------------------------------
   5.8 Menu Hover Styles (Admin Controlled)
   --------------------------------------------- */

/* Color Change (Default) - handled by base styles */

/* Underline Hover */
.navbar.header-menu-hover-underline .nav-link > a {
    position: relative;
}

.navbar.header-menu-hover-underline .nav-link > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background-color: var(--header-hover-color, var(--primary));
    transform: scaleX(0);
    transition: transform var(--transition);
}

.navbar.header-menu-hover-underline .nav-link > a:hover::after {
    transform: scaleX(1);
}

/* Background Hover */
.navbar.header-menu-hover-background .nav-link > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--header-hover-color, var(--primary)) !important;
}

/* Scale Hover */
.navbar.header-menu-hover-scale .nav-link > a {
    transition: all var(--transition);
}

.navbar.header-menu-hover-scale .nav-link > a:hover {
    transform: scale(1.05);
    color: var(--header-hover-color, var(--primary)) !important;
}

/* Menu Active States (Admin Controlled) */
.nav-link-active[data-active-style="underline"] > a {
    position: relative;
}

.nav-link-active[data-active-style="underline"] > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background-color: var(--menu-active-color, var(--primary));
}

.nav-link-active[data-active-style="background"] > a {
    background-color: var(--menu-active-color, var(--primary)) !important;
    color: white !important;
    border-radius: var(--radius-sm);
}

.nav-link-active[data-active-style="dot"] > a {
    position: relative;
}

.nav-link-active[data-active-style="dot"] > a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--menu-active-color, var(--primary));
}

.nav-link-active[data-active-style="bold"] > a {
    font-weight: 700 !important;
    color: var(--menu-active-color, var(--primary)) !important;
}


/* ==============================================
   6. MEGA SUBMENU (Desktop Dropdowns)
   ============================================== */
.nav-item-has-submenu {
    position: relative;
}

.mega-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    margin-top: 16px;
    z-index: 1000;
    /* Defaults - overridden by dynamic classes */
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-width: 220px;
    width: max-content;
    max-width: 90vw;
}

.nav-item-has-submenu:hover .mega-submenu {
    opacity: 1;
    visibility: visible;
}

.mega-submenu-content {
    display: grid;
    gap: 24px;
}

.submenu-column h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.submenu-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.submenu-column ul li {
    margin-bottom: 4px;
}

.submenu-column ul li a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.submenu-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.submenu-footer a {
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}



/* ==============================================
   6.1 MEGA SUBMENU - DYNAMIC CLASSES
   ============================================== */

/* ---------------------------------------------
   6.1.1 Animation Classes
   --------------------------------------------- */
/* None - Instant show */
.mega-submenu.submenu-anim-none {
    transition: none;
    transform: none;
}
.nav-item-has-submenu:hover .mega-submenu.submenu-anim-none {
    transform: none;
}

/* Fade (default) */
.mega-submenu.submenu-anim-fade {
    transform: none;
    opacity: 0;
}
.nav-item-has-submenu:hover .mega-submenu.submenu-anim-fade {
    opacity: 1;
}

/* Slide Down */
.mega-submenu.submenu-anim-slide-down {
    transform: translateY(-10px);
    opacity: 0;
}
.nav-item-has-submenu:hover .mega-submenu.submenu-anim-slide-down {
    transform: translateY(0);
    opacity: 1;
}

/* Slide Up */
.mega-submenu.submenu-anim-slide-up {
    transform: translateY(10px);
    opacity: 0;
}
.nav-item-has-submenu:hover .mega-submenu.submenu-anim-slide-up {
    transform: translateY(0);
    opacity: 1;
}

/* Scale */
.mega-submenu.submenu-anim-scale {
    transform: scale(0.95);
    opacity: 0;
}
.nav-item-has-submenu:hover .mega-submenu.submenu-anim-scale {
    transform: scale(1);
    opacity: 1;
}

/* =============================================================================
   6.1.2 Width Classes (Per-Menu)
   ============================================================================= */

/* ---------------------------------------------
   Base Width Definitions
   --------------------------------------------- */
.mega-submenu.submenu-width-narrow {
    width: 320px;
    max-width: 95vw;
}

.mega-submenu.submenu-width-default {
    width: 600px;
    max-width: 95vw;
}

.mega-submenu.submenu-width-wide {
    width: 900px;
    max-width: 95vw;
}

.mega-submenu.submenu-width-full {
    width: calc(100vw - 48px);
    max-width: 1400px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: auto;
    transform: translateY(10px);
}

/* Full width hover animation */
.nav-item-has-submenu:hover .mega-submenu.submenu-width-full {
    transform: translateY(0);
}

/* ---------------------------------------------
   Content Container Constraints
   --------------------------------------------- */
.mega-submenu .mega-submenu-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Narrow: Force single column (400px / 1 = 400px per col) */
.mega-submenu.submenu-width-narrow .mega-submenu-content {
    grid-template-columns: 1fr !important;
}

/* Default: Max 2 columns (600px / 2 = 300px per col) */
.mega-submenu.submenu-width-default .mega-submenu-content.submenu-cols-3,
.mega-submenu.submenu-width-default .mega-submenu-content.submenu-cols-4,
.mega-submenu.submenu-width-default .mega-submenu-content.submenu-cols-5 {
    grid-template-columns: repeat(2, 1fr);
}

/* Wide: Max 3 columns (900px / 3 = 300px per col) */
.mega-submenu.submenu-width-wide .mega-submenu-content.submenu-cols-4,
.mega-submenu.submenu-width-wide .mega-submenu-content.submenu-cols-5 {
    grid-template-columns: repeat(3, 1fr);
}

/* Full: Explicit column support up to 5 columns */
.mega-submenu.submenu-width-full .mega-submenu-content.submenu-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.mega-submenu.submenu-width-full .mega-submenu-content.submenu-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.mega-submenu.submenu-width-full .mega-submenu-content.submenu-cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* ---------------------------------------------
   Responsive Breakpoints
   --------------------------------------------- */

/* Tablet: Reduce columns */
@media (max-width: 1024px) {
    .mega-submenu.submenu-width-wide {
        width: 95vw;
    }
    
    .mega-submenu.submenu-width-wide .mega-submenu-content.submenu-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: Full width, single column */
@media (max-width: 768px) {
    .mega-submenu.submenu-width-narrow,
    .mega-submenu.submenu-width-default,
    .mega-submenu.submenu-width-wide {
        width: 100%;
        max-width: 100vw;
    }
    
    .mega-submenu .mega-submenu-content {
        grid-template-columns: 1fr !important;
    }
}


/* ---------------------------------------------
   6.1.3 Shadow Classes
   --------------------------------------------- */
.mega-submenu.submenu-shadow-none {
    box-shadow: none;
}

.mega-submenu.submenu-shadow-light {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mega-submenu.submenu-shadow-medium {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.mega-submenu.submenu-shadow-strong {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------
   6.1.4 Border Radius Classes
   --------------------------------------------- */
.mega-submenu.submenu-radius-none {
    border-radius: 0;
}

.mega-submenu.submenu-radius-sm {
    border-radius: 4px;
}

.mega-submenu.submenu-radius-md {
    border-radius: 8px;
}

.mega-submenu.submenu-radius-lg {
    border-radius: 12px;
}

.mega-submenu.submenu-radius-xl {
    border-radius: 16px;
}

/* ---------------------------------------------
   6.1.5 Padding Classes
   --------------------------------------------- */
.mega-submenu.submenu-padding-compact {
    padding: 16px;
}

.mega-submenu.submenu-padding-normal {
    padding: 24px;
}

.mega-submenu.submenu-padding-spacious {
    padding: 32px;
}

/* ---------------------------------------------
   6.1.6 Column Classes
   --------------------------------------------- */
.mega-submenu .mega-submenu-content.submenu-cols-1 {
    grid-template-columns: 1fr;
}

.mega-submenu .mega-submenu-content.submenu-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mega-submenu .mega-submenu-content.submenu-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mega-submenu .mega-submenu-content.submenu-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mega-submenu .mega-submenu-content.submenu-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Responsive column adjustments */
@media (max-width: 1200px) {
    .mega-submenu .mega-submenu-content.submenu-cols-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .mega-submenu .mega-submenu-content.submenu-cols-5,
    .mega-submenu .mega-submenu-content.submenu-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mega-submenu .mega-submenu-content.submenu-cols-5,
    .mega-submenu .mega-submenu-content.submenu-cols-4,
    .mega-submenu .mega-submenu-content.submenu-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------
   6.1.7 Column Gap Classes
   --------------------------------------------- */
.mega-submenu .mega-submenu-content.submenu-gap-compact {
    gap: 16px;
}

.mega-submenu .mega-submenu-content.submenu-gap-normal {
    gap: 24px;
}

.mega-submenu .mega-submenu-content.submenu-gap-spacious {
    gap: 32px;
}

/* ---------------------------------------------
   6.1.8 Vertical Dividers (JavaScript-powered)
   --------------------------------------------- */
.mega-submenu .mega-submenu-content.submenu-dividers {
    row-gap: 24px;
}

.mega-submenu .mega-submenu-content.submenu-dividers.submenu-gap-compact {
    row-gap: 16px;
}

.mega-submenu .mega-submenu-content.submenu-dividers.submenu-gap-spacious {
    row-gap: 32px;
}

.mega-submenu .mega-submenu-content.submenu-dividers .submenu-column {
    border-left: 1px solid var(--submenu-divider-color, #e5e7eb);
    padding-left: 16px;
}

.mega-submenu .mega-submenu-content.submenu-dividers .submenu-column:first-child,
.mega-submenu .mega-submenu-content.submenu-dividers .submenu-column.row-start {
    border-left: none !important;
    padding-left: 0;
}

/* Divider thickness */
.mega-submenu .mega-submenu-content.submenu-divider-medium .submenu-column {
    border-left-width: 2px;
}

.mega-submenu .mega-submenu-content.submenu-divider-thick .submenu-column {
    border-left-width: 3px;
}

/* ---------------------------------------------
   6.1.9 Heading Typography Classes
   --------------------------------------------- */
/* Heading Size */
.mega-submenu .submenu-column h4.submenu-heading-xs {
    font-size: 11px;
}

.mega-submenu .submenu-column h4.submenu-heading-sm {
    font-size: 12px;
}

.mega-submenu .submenu-column h4.submenu-heading-md {
    font-size: 13px;
}

.mega-submenu .submenu-column h4.submenu-heading-lg {
    font-size: 14px;
}

/* Heading Weight */
.mega-submenu .submenu-column h4.submenu-heading-normal {
    font-weight: 400;
}

.mega-submenu .submenu-column h4.submenu-heading-medium {
    font-weight: 500;
}

.mega-submenu .submenu-column h4.submenu-heading-semibold {
    font-weight: 600;
}

.mega-submenu .submenu-column h4.submenu-heading-bold {
    font-weight: 700;
}

/* ---------------------------------------------
   6.1.10 Text Size Classes
   --------------------------------------------- */
.mega-submenu .submenu-column ul li a.submenu-text-xs {
    font-size: 12px;
    padding: 6px 10px;
}

.mega-submenu .submenu-column ul li a.submenu-text-sm {
    font-size: 13px;
    padding: 7px 11px;
}

.mega-submenu .submenu-column ul li a.submenu-text-md {
    font-size: 14px;
    padding: 8px 12px;
}

.mega-submenu .submenu-column ul li a.submenu-text-lg {
    font-size: 15px;
    padding: 10px 14px;
}

/* ---------------------------------------------
   6.1.11 Item Spacing Classes
   --------------------------------------------- */
.mega-submenu .submenu-column ul.submenu-spacing-compact li {
    margin-bottom: 2px;
}

.mega-submenu .submenu-column ul.submenu-spacing-normal li {
    margin-bottom: 4px;
}

.mega-submenu .submenu-column ul.submenu-spacing-spacious li {
    margin-bottom: 8px;
}

/* ---------------------------------------------
   6.1.12 Icon Classes
   --------------------------------------------- */
.mega-submenu .submenu-column ul li a .submenu-icon {
    margin-right: 8px;
    opacity: 0.7;
    transition: all var(--transition);
}

.mega-submenu .submenu-column ul li a:hover .submenu-icon {
    opacity: 1;
}

/* Icon Size */
.mega-submenu .submenu-column ul li a .submenu-icon.submenu-icon-xs {
    font-size: 14px;
}
.mega-submenu .submenu-column ul li a .submenu-icon.submenu-icon-sm {
    font-size: 16px;
}
.mega-submenu .submenu-column ul li a .submenu-icon.submenu-icon-md {
    font-size: 18px;
}
.mega-submenu .submenu-column ul li a .submenu-icon.submenu-icon-lg {
    font-size: 20px;
}

/* ---------------------------------------------
   6.1.13 Hover Style Classes
   --------------------------------------------- */
/* None - No hover effect */
.mega-submenu.submenu-hover-none .submenu-column ul li a:hover {
    background: transparent;
    padding-left: 12px;
}

/* Background (default) */
.mega-submenu.submenu-hover-background .submenu-column ul li a:hover {
    background: var(--submenu-hover-bg, var(--bg));
}

/* Underline */
.mega-submenu.submenu-hover-underline .submenu-column ul li a {
    position: relative;
    background: transparent !important;
    padding-left: 12px !important;
}

.mega-submenu.submenu-hover-underline .submenu-column ul li a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--submenu-hover-text-color, var(--header-hover-color, var(--primary)));
    transform: scaleX(0);
    transition: transform var(--transition);
}

.mega-submenu.submenu-hover-underline .submenu-column ul li a:hover::after {
    transform: scaleX(1);
}

/* Slide (left border appears) */
.mega-submenu.submenu-hover-slide .submenu-column ul li a {
    position: relative;
    background: transparent !important;
    padding-left: 12px;
    transition: all var(--transition);
}

.mega-submenu.submenu-hover-slide .submenu-column ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--submenu-hover-text-color, var(--header-hover-color, var(--primary)));
    border-radius: 2px;
    transition: height var(--transition);
}

.mega-submenu.submenu-hover-slide .submenu-column ul li a:hover {
    padding-left: 16px;
}

.mega-submenu.submenu-hover-slide .submenu-column ul li a:hover::before {
    height: 60%;
}

/* Highlight (full row background) */
.mega-submenu.submenu-hover-highlight .submenu-column ul li a {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0;
}

.mega-submenu.submenu-hover-highlight .submenu-column ul li a:hover {
    background: var(--submenu-hover-bg, var(--bg));
    padding-left: 28px;
}

/* Glow */
.mega-submenu.submenu-hover-glow .submenu-column ul li a:hover {
    background: var(--submenu-hover-bg, var(--bg));
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 1, 221, 255), 0.2);
}

/* ---------------------------------------------
   6.1.14 Submenu Footer
   --------------------------------------------- */
.mega-submenu .submenu-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--submenu-border-color, #e5e7eb);
}

/* Footer Padding Sizes */
.mega-submenu .submenu-footer.submenu-footer-padding-compact {
    padding: 8px 0;
    margin-top: 12px;
    margin-bottom: -24px; /* Fully offset container's bottom padding */
}
.mega-submenu .submenu-footer.submenu-footer-padding-default {
    padding: 12px 0;
    margin-top: 16px;
    margin-bottom: -24px; /* Fully offset container's bottom padding */
}
.mega-submenu .submenu-footer.submenu-footer-padding-spacious {
    padding: 20px 0;
    margin-top: 20px;
    margin-bottom: -24px; /* Fully offset container's bottom padding */
}

/* Footer Alignment */
.mega-submenu .submenu-footer.submenu-footer-left {
    justify-content: flex-start;
}
.mega-submenu .submenu-footer.submenu-footer-center {
    justify-content: center;
}
.mega-submenu .submenu-footer.submenu-footer-right {
    justify-content: flex-end;
}


/* Footer without border */
.mega-submenu .submenu-footer.submenu-footer-no-border {
    border-top: none;
    margin-top: 8px;
}

/* Footer Link Styling */
.mega-submenu .submenu-footer a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    color: var(--submenu-footer-text-color, var(--submenu-text-color, #374151));
    transition: color 0.2s ease;
}
.mega-submenu .submenu-footer a::after {
    content: '→';
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.2s ease;
}
.mega-submenu .submenu-footer a:hover {
    color: var(--submenu-footer-hover-color, var(--submenu-hover-text-color, #016db7));
}
.mega-submenu .submenu-footer a:hover::after {
    transform: translateX(4px);
}

/* ---------------------------------------------
   6.1.15 CSS Variables (Applied via inline styles)
   --------------------------------------------- */
/*
 * These are set dynamically from the blade template:
 * --submenu-bg-color
 * --submenu-border-color
 * --submenu-divider-color
 * --submenu-heading-color
 * --submenu-text-color
 * --submenu-icon-color
 * --submenu-hover-bg
 * --submenu-hover-text-color
 */

/* Apply CSS variables */
.mega-submenu {
    background-color: var(--submenu-bg-color, white);
    border-color: var(--submenu-border-color, var(--border));
}

.mega-submenu .submenu-column h4 {
    color: var(--submenu-heading-color, var(--text-muted));
}

.mega-submenu .submenu-column ul li a {
    color: var(--submenu-text-color, var(--text-light));
}

.mega-submenu .submenu-column ul li a:hover {
    color: var(--submenu-hover-text-color, var(--header-hover-color, var(--primary)));
}

.mega-submenu .submenu-column ul li a .submenu-icon {
    color: var(--submenu-icon-color, var(--text-muted));
}

/* No border variant */
.mega-submenu.submenu-no-border {
    border: none;
}

/* ---------------------------------------------
   6.1.16 Dropdown Hover Bridge
   --------------------------------------------- */
.mega-submenu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* ---------------------------------------------
   6.1.17 Submenu Item with Icon/Description
   --------------------------------------------- */
/* All links with icons - inline flex */
.mega-submenu .submenu-column ul li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* With description - larger gap */
.mega-submenu .submenu-column ul li a.has-description {
    gap: 12px;
}

/* Content wrapper - default inline */
.mega-submenu .submenu-column ul li a .submenu-item-content {
    display: inline;
}

/* Only flex column when description exists */
.mega-submenu .submenu-column ul li a.has-description .submenu-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-submenu .submenu-column ul li a .submenu-item-title {
    font-weight: 500;
    color: var(--submenu-text-color, var(--text));
}

.mega-submenu .submenu-column ul li a .submenu-item-desc {
    font-size: 12px;
    color: var(--submenu-description-color, #6b7280);
    font-weight: 400;
    line-height: 1.4;
}

/* Hover states */
.mega-submenu .submenu-column ul li a:hover .submenu-item-title {
    color: var(--submenu-hover-text-color, var(--header-hover-color, var(--primary)));
}

.mega-submenu .submenu-column ul li a:hover .submenu-item-desc {
    color: var(--submenu-hover-text-color, var(--header-hover-color, var(--primary)));
}

.mega-submenu .submenu-column ul li a:hover .submenu-icon {
    color: var(--submenu-icon-hover-color, var(--submenu-hover-text-color, var(--primary)));
}

/* Icon centered vertically with title + description */
.mega-submenu .submenu-column ul li a.has-description .submenu-icon {
    flex-shrink: 0;
    align-self: center;
}


/* ==============================================
   7. HEADER SEARCH
   ============================================== */

/* ---------------------------------------------
   7.1 Base Search
   --------------------------------------------- */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    transition: all var(--transition-smooth);
    flex: 1;
    max-width: 400px;
}

.header-search:focus-within {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--header-hover-color, var(--primary));
    box-shadow: 0 0 0 3px rgba(1, 109, 183, 0.1);
}

.header-search i {
    font-size: 14px;
    opacity: 0.6;
    flex-shrink: 0;
}

.header-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: inherit;
    min-width: 0;
}

.header-search input::placeholder {
    opacity: 0.6;
}

.header-search button[type="submit"] {
    display: none;
}

/* ---------------------------------------------
   7.2 Search Styles (Admin Controlled)
   --------------------------------------------- */
/* Expanded (Default) - Full width with visible input */

    /* Default styles from 7.1 */


/* Icon Only - Circular icon button */
.header-search.search-icon_only {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.header-search.search-icon_only:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.header-search.search-icon_only i {
    font-size: 16px;
    opacity: 0.8;
}

.header-search.search-icon_only input {
    display: none;
}

.header-search.search-expandable {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: 22px;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-search.search-expandable i {
    flex-shrink: 0;
    font-size: 16px;
}

.header-search.search-expandable input {
    width: 0;
    padding: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.header-search.search-expandable:focus-within,
.header-search.search-expandable:hover {
    width: 300px;
    max-width: 300px;
    justify-content: flex-start;
    padding: 0 16px;
    overflow: visible;
}

/* Expandable Search - Width Classes (Override default) */
.navbar.header-search-width-sm .header-search.search-expandable:focus-within,
.navbar.header-search-width-sm .header-search.search-expandable:hover {
    width: 200px;
    max-width: 200px;
}

.navbar.header-search-width-md .header-search.search-expandable:focus-within,
.navbar.header-search-width-md .header-search.search-expandable:hover {
    width: 300px;
    max-width: 300px;
}

.navbar.header-search-width-lg .header-search.search-expandable:focus-within,
.navbar.header-search-width-lg .header-search.search-expandable:hover {
    width: 400px;
    max-width: 400px;
}

.navbar.header-search-width-xl .header-search.search-expandable:focus-within,
.navbar.header-search-width-xl .header-search.search-expandable:hover {
    width: 500px;
    max-width: 500px;
}

.navbar.header-search-width-full .header-search.search-expandable:focus-within,
.navbar.header-search-width-full .header-search.search-expandable:hover {
    width: 400px;
    max-width: 400px;
}

.header-search.search-expandable:focus-within i,
.header-search.search-expandable:hover i {
    margin-right: 10px;
}

.header-search.search-expandable:focus-within input,
.header-search.search-expandable:hover input {
    width: 100%;
    padding: 0;
    opacity: 1;
}

/* Expandable Search - Dropdown visibility */
.header-search.search-expandable .search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    margin-top: 8px;
    z-index: 9999;
}

/* ---------------------------------------------
   7.3 Search Position (Admin Controlled)
   --------------------------------------------- */
/* When Search In Menu - nav-links should not expand */
.navbar:has(.header-search.search-in-menu) .nav-links {
    flex: 0 0 auto;
}

/* In Menu - Search stays after menu */
.navbar .header-search.search-in-menu {
    flex: 0 0 auto;
    margin-right: auto;
}

/* ---------------------------------------------
   7.4 Search Width (Admin Controlled)
   --------------------------------------------- */
/* Width for Expanded (always visible) style only */
.navbar.header-search-width-sm .header-search.search-expanded {
    max-width: 200px;
}
.navbar.header-search-width-md .header-search.search-expanded {
    max-width: 300px;
}
.navbar.header-search-width-lg .header-search.search-expanded {
    max-width: 400px;
}
.navbar.header-search-width-xl .header-search.search-expanded {
    max-width: 500px;
}
.navbar.header-search-width-full .header-search.search-expanded {
    max-width: none;
    flex: 1;
}


/* ==============================================
   8. NAV ACTIONS (CTA Buttons)
   ============================================== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-actions .btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.nav-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CTA Button Types */
.nav-actions .btn-cta-primary,
.nav-actions .btn-cta-secondary {
    transition: all var(--transition);
}

/* ---------------------------------------------
   8.1 CTA Button Sizes (Admin Controlled)
   --------------------------------------------- */
.navbar.header-cta-sm .nav-actions .btn {
    padding: 8px 16px;
    font-size: 13px;
}

.navbar.header-cta-md .nav-actions .btn {
    padding: 10px 20px;
    font-size: 14px;
}

.navbar.header-cta-lg .nav-actions .btn {
    padding: 12px 24px;
    font-size: 15px;
}

.navbar.header-cta-xl .nav-actions .btn {
    padding: 14px 28px;
    font-size: 16px;
}


/* ==============================================
   9. HAMBURGER MENU
   ============================================== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 100;
}

.hamburger .bar {
    width: 24px;
    height: 2px;
    background: var(--header-text-color, var(--text));
    border-radius: 2px;
    transition: all var(--transition-smooth);
}

/* Hamburger Active State (X icon) */
.hamburger.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==============================================
   9.1 TOP BAR STYLES (Admin Controlled)
   ============================================== */

/* Top Bar Font Sizes */
.top-bar.topbar-font-xs,
.topbar-font-xs .top-bar {
    font-size: 11px;
}

.top-bar.topbar-font-sm,
.topbar-font-sm .top-bar {
    font-size: 12px;
}

.top-bar.topbar-font-md,
.topbar-font-md .top-bar {
    font-size: 13px;
}

.top-bar.topbar-font-lg,
.topbar-font-lg .top-bar {
    font-size: 14px;
}

/* Top Bar Height (via CSS variable) */
.top-bar {
    height: var(--topbar-height, 40px);
    min-height: var(--topbar-height, 40px);
}


/* ==============================================
   10. MOBILE MENU
   ============================================== */

/* ---------------------------------------------
   10.1 Base Mobile Menu
   --------------------------------------------- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    z-index: 10001;
}

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

.mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: white;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ---------------------------------------------
   10.2 Mobile Menu Styles (Admin Controlled)
   --------------------------------------------- */
/* Slide Right (Default) */
.mobile-menu.mobile-slide_right {
    right: 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mobile-menu.mobile-slide_right.active {
    transform: translateX(0);
}

/* Slide Left */
.mobile-menu.mobile-slide_left {
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mobile-menu.mobile-slide_left.active {
    transform: translateX(0);
}

/* Fullscreen */
.mobile-menu.mobile-fullscreen {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(-100%);
    transition: transform var(--transition-slide);
}

.mobile-menu.mobile-fullscreen.active {
    transform: translateY(0);
}

/* Dropdown */
.mobile-menu.mobile-dropdown {
    top: var(--content-offset, 72px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    bottom: auto;
    max-height: 80vh;
    transform: translateY(-20px);
    opacity: 0;
    transition: all var(--transition-smooth);
}

.mobile-menu.mobile-dropdown.active {
    transform: translateY(0);
    opacity: 1;
}

/* ---------------------------------------------
   10.3 Mobile Menu Header
   --------------------------------------------- */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-menu-header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
}

.mobile-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg);
    cursor: pointer;
    transition: all var(--transition);
}

.mobile-close:hover {
    background: var(--primary);
    color: white;
}

.mobile-close i {
    font-size: 20px;
}

/* ---------------------------------------------
   10.4 Mobile Search
   --------------------------------------------- */
.mobile-search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.mobile-search form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--radius-md);
}

.mobile-search i {
    color: var(--text-muted);
}

.mobile-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--text);
}

.mobile-search input::placeholder {
    color: var(--text-muted);
}

/* ---------------------------------------------
   10.5 Mobile Navigation
   --------------------------------------------- */
.mobile-menu-content {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--border);
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}

.mobile-nav-link:hover {
    color: var(--primary);
}

.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.mobile-nav-toggle i {
    font-size: 12px;
    transition: transform var(--transition-smooth);
}

.mobile-nav-toggle.active i {
    transform: rotate(180deg);
}

/* ---------------------------------------------
   10.6 Mobile Submenu
   --------------------------------------------- */
.mobile-submenu {
    list-style: none;
    padding: 0 20px 16px 32px;
    margin: 0;
    display: none;
}

.mobile-submenu.active {
    display: block;
}

.mobile-submenu h5 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 8px;
}

.mobile-submenu li {
    list-style: none;
}

.mobile-submenu li a {
    display: block;
    padding: 10px 12px;
    color: var(--text-light);
    font-size: 14px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.mobile-submenu li a:hover {
    background: var(--bg);
    color: var(--primary);
    padding-left: 16px;
}

/* ---------------------------------------------
   10.7 Mobile Actions
   --------------------------------------------- */
.mobile-menu-actions {
    padding: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.mobile-menu-actions .btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    text-align: center;
}


/* ==============================================
   11. SECTIONS
   ============================================== */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    color: var(--text-light);
}


/* ==============================================
   12. FOOTER
   ============================================== */
.footer {
    background: var(--section-bg-dark);
    color: #e2e8f0;
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    transition: color var(--transition);
}

.footer-col ul li a:hover {
    color: var(--primary-light);
}

.footer-brand p {
    color: #a0aec0;
    margin: 16px 0;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    transition: all var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
    text-align: center;
    color: #a0aec0;
    font-size: 14px;
}

.footer-bottom a {
    color: #a0aec0;
    text-decoration: none;
    margin: 0 12px;
}

.footer-bottom a:hover {
    color: var(--primary-light);
}


/* ==============================================
   13. LIVE SEARCH SUGGESTIONS
   ============================================== */
.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    margin-top: -1px;
}

/* Search History Header */
.search-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.search-history-header i {
    margin-right: 8px;
    color: var(--primary);
}

.clear-history-btn {
    background: transparent;
    border: none;
    color: var(--danger, #ef4444);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.clear-history-btn:hover {
    background: var(--danger, #ef4444);
    color: white;
}

/* History Item */
.history-item {
    background: white;
}

.history-item:hover {
    background: #f8f9ff;
}

.history-item .suggestion-icon {
    background: #e8f0fe;
    color: var(--primary);
}

.history-item .suggestion-icon i {
    font-size: 1.2rem;
}

.suggestion-go-icon {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0;
    transition: all var(--transition);
}

.history-item:hover .suggestion-go-icon {
    opacity: 1;
    color: var(--primary);
}

/* Suggestion Item */
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: all var(--transition);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--bg);
    padding-left: 20px;
}

.suggestion-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.suggestion-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-title mark {
    background: var(--accent);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
}

.suggestion-meta {
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.suggestion-type {
    color: var(--primary);
    font-weight: 600;
}

.suggestion-category {
    color: var(--text-light);
}

/* No Results */
.suggestion-no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
}

.suggestion-no-results i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 15px;
    display: block;
}

.suggestion-no-results p {
    margin-bottom: 8px;
    color: var(--text);
}

.suggestion-no-results strong {
    color: var(--primary);
}

.suggestion-no-results small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Scrollbar Styling */
.search-suggestions-dropdown::-webkit-scrollbar {
    width: 8px;
}

.search-suggestions-dropdown::-webkit-scrollbar-track {
    background: var(--bg);
}

.search-suggestions-dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.search-suggestions-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ==============================================
   14. RESPONSIVE BREAKPOINTS
   ============================================== */

/* ---------------------------------------------
   Large Tablets & Small Desktops (1024px)
   --------------------------------------------- */
@media (max-width: 1024px) {
    /* Navbar */
    .navbar .nav-links {
        display: none;
    }
    
    .navbar .header-search:not(.search-in-menu) {
        display: none;
    }
    
    .navbar .nav-actions {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    /* Header Search */
    .header-search {
        max-width: 300px;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------
   Tablets (768px)
   --------------------------------------------- */
@media (max-width: 768px) {
    /* Navbar */
    .navbar .header-search.search-in-menu {
        display: none;
    }
    
    /* Sections */
    section {
        padding: 60px 0;
    }
    
    .section-header h2 {
        font-size: 32px;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Search Suggestions */
    .search-suggestions-dropdown {
        max-height: 300px;
    }
    
    .suggestion-item img,
    .suggestion-icon {
        width: 40px;
        height: 40px;
    }
}

/* ---------------------------------------------
   Mobile (576px)
   --------------------------------------------- */
@media (max-width: 576px) {
    /* Container */
    .container {
        padding: 0 16px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    /* Mobile Menu */
    .mobile-menu {
        width: 100%;
        max-width: 100%;
    }
    
    /* Footer */
    .footer {
        padding: 60px 0 30px;
    }
    
    .footer-grid {
        gap: 32px;
    }
}


/* ==============================================
   END OF GLOBAL STYLES
   ============================================== */