@charset "UTF-8";
/* ============================================
   ExpertCE Modern Header Styles
   Applied sitewide via child theme
   ============================================ */

/* CSS Variables */
:root {
    --ece-primary: #2563eb;
    --ece-primary-dark: #1d4ed8;
    --ece-primary-light: #3b82f6;
    --ece-gray-50: #f9fafb;
    --ece-gray-100: #f3f4f6;
    --ece-gray-200: #e5e7eb;
    --ece-gray-300: #d1d5db;
    --ece-gray-400: #9ca3af;
    --ece-gray-500: #6b7280;
    --ece-gray-600: #4b5563;
    --ece-gray-700: #374151;
    --ece-gray-800: #1f2937;
    --ece-gray-900: #111827;
    --ece-radius: 8px;
    --ece-radius-lg: 16px;
    --ece-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ece-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --ece-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ece-transition: all 0.2s ease;
    --ece-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   MODERN HEADER - Main Styles
   ============================================ */

/* CRITICAL: Hide theme site headers except ece-header (but NOT content entry-headers) */
body.ece-modern-header #wrapper-container > .content-pusher > header:not(.ece-header),
body.ece-modern-header #wrapper-container .site-header:not(.ece-header),
body.ece-modern-header .content-pusher > header:not(.ece-header):not(.entry-header),
body.ece-modern-header header#masthead:not(.ece-header) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide theme's navigation wrappers */
body.ece-modern-header .thim-nav-wrapper,
body.ece-modern-header .toolbar-wrapper,
body.ece-modern-header .header_v1,
body.ece-modern-header .header_v2,
body.ece-modern-header .header_v3,
body.ece-modern-header .header_v4,
body.ece-modern-header .header_v5,
body.ece-modern-header .navigation.col-sm-12:not(.ece-nav),
body.ece-modern-header .tm-table,
body.ece-modern-header .width-navigation,
body.ece-modern-header .width-logo:not(.ece-header-logo),
body.ece-modern-header .navbar-nav:not(.ece-nav-menu),
body.ece-modern-header .menu-main-menu-container,
body.ece-modern-header ul.nav.navbar-nav.menu-main-menu:not(.ece-nav-menu) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* MOBILE MENU FIX: Override the above hiding rules for mobile menu */
/* These have higher specificity (3 classes vs 2) so they win even with !important */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav,
body.ece-modern-header .mobile-menu-inner .nav.navbar-nav {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* Parent menu items */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav > li {
    display: block !important;
    visibility: visible !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li > a,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff;
    padding: 18px 20px !important;
    font-size: 16px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: all 0.25s ease;
}

/* Add arrow via ::after on menu items with children - perfectly aligned with text */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li.menu-item-has-children > a::after,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav > li.menu-item-has-children > a::after {
    content: '›' !important;
    font-size: 22px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 300 !important;
    margin-left: auto !important;
    line-height: 1 !important;
}

/* Hide ALL .icon-toggle elements in mobile menu - we use ::after instead */
body.ece-modern-header .mobile-menu-wrapper .icon-toggle,
body.ece-modern-header .mobile-menu-container .icon-toggle,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .icon-toggle,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .icon-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Also hide arrows from submenu items */
body.ece-modern-header .mobile-menu-wrapper .sub-menu li a::after,
body.ece-modern-header .mobile-menu-wrapper .sub-menu li a::before {
    display: none !important;
    content: none !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li > a:hover {
    background: rgba(255,255,255,0.06);
    /* padding-left: 28px; */
    color: #fff;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li.current-menu-item > a,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li.current_page_item > a {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

/* Mobile menu submenus - clean nested style */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu {
    display: none;
    position: static !important;
    background: transparent !important;
    padding: 0;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    border: none;
}

/* Show submenu when parent item is expanded (clicked) */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav li.thim-ekits-menu__is-hover > .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav li.thim-ekits-menu__is-hover > .sub-menu,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav li.current > .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav li.current > .sub-menu {
    display: block !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu li {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu li a {
    display: block !important;
    visibility: visible !important;
    color: rgba(255,255,255,0.75);
    padding: 16px 24px 16px 44px;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    background: rgba(0,0,0,0.15);
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a:hover {
    color: #fff;
    padding-left: 48px;
    background: rgba(0,0,0,0.25);
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a::before,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a::after {
    display: none !important;
}


/* Modern Header Container */
.ece-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--ece-gray-200) !important;
    padding: 0 !important;
    z-index: 9999 !important;
    box-shadow: none !important;
    height: 72px !important;
    font-family: var(--ece-font-family) !important;
    transition: transform 0.3s ease !important;
    transform: translateY(0) !important;
}

/* Hide header when scrolling down (headroom effect) - Mobile only */
@media (max-width: 991px) {
    .ece-header.header-hidden {
        transform: translateY(-120px) !important; /* Move fully off screen (covers 64px header + 46px admin bar + buffer) */
        pointer-events: none !important;
    }
}

.ece-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Pin the header container to ONE consistent width on every page template. Some
   templates (e.g. the CE archive) do a blanket ".container { max-width: 1290px }"
   to widen their page content, and the header shares the .container class -- that
   widened the header only on those pages and pushed the "Hi, <name>" profile away
   from the nav. Higher specificity than the page-template overrides so the header
   is identical everywhere. (The 992-1300 compaction block below still narrows the
   padding in that band -- it comes later in the file and wins there.) */
body.ece-modern-header .ece-header-container {
    max-width: 1200px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ece-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

/* Logo */
.ece-header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ece-header-logo img {
    height: 50px;
    width: auto;
}

.ece-header-logo a {
    display: flex;
    align-items: center;
}

/* ============================================
   NAVIGATION - Main Menu Styling
   ============================================ */
.ece-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1;
    justify-content: center;
}

/* Style the wp_nav_menu output */
.ece-nav-menu,
.ece-nav .nav.navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level menu items */
.ece-nav-menu > li,
.ece-nav .nav.navbar-nav > li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level links */
.ece-nav-menu > li > a,
.ece-nav .nav.navbar-nav > li > a,
.ece-nav-menu > li > .tc-menu-inner > a,
.ece-nav .nav.navbar-nav > li > .tc-menu-inner > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ece-gray-600) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--ece-radius) !important;
    transition: var(--ece-transition) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-nav-menu > li > a:hover,
.ece-nav .nav.navbar-nav > li > a:hover,
.ece-nav-menu > li:hover > a,
.ece-nav .nav.navbar-nav > li:hover > a,
.ece-nav-menu > li > .tc-menu-inner > a:hover,
.ece-nav .nav.navbar-nav > li > .tc-menu-inner > a:hover {
    color: var(--ece-gray-900) !important;
    background: var(--ece-gray-50) !important;
    box-shadow: none !important;
}

/* Current/Active menu item */
.ece-nav-menu > li.current-menu-item > a,
.ece-nav .nav.navbar-nav > li.current-menu-item > a,
.ece-nav-menu > li.current-menu-parent > a,
.ece-nav .nav.navbar-nav > li.current-menu-parent > a {
    color: var(--ece-primary) !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Dropdown arrow for items with children */
.ece-nav-menu > li.menu-item-has-children > a::after,
.ece-nav .nav.navbar-nav > li.menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.ece-nav-menu > li.menu-item-has-children:hover > a::after,
.ece-nav .nav.navbar-nav > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ============================================
   MEGA MENU DROPDOWN STYLES (Matching Mockup)
   Only for main nav items, NOT user profile dropdown
   ============================================ */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    padding: 24px !important;
    min-width: 320px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    list-style: none !important;
    margin: 0 !important;
    border: none !important;
}

.ece-nav-menu > li:not(.ece-mobile-profile-parent):hover > .sub-menu,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent):hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(8px) !important;
}

/* Header text for dropdowns - ONLY for main navigation, NOT user profile */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu::before,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu::before {
    content: 'SELECT YOUR PROFESSION';
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
}

/* Safety menu header - target by URL */
.ece-nav-menu > li > a[href*="safetycompliance"] ~ .sub-menu::before,
.ece-nav-menu > li > a[href*="/safety/"] ~ .sub-menu::before {
    content: 'SELECT YOUR TRAINING' !important;
}

/* Learn menu header - target by URL */
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu::before {
    content: 'LEARN RESOURCES' !important;
}

/* Grid layout for profession items - ONLY for main navigation, NOT user profile */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
}

/* Center single item when only one profession exists (before "View All") */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li:first-child:nth-last-child(2),
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li:first-child:nth-last-child(2) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 200px !important;
}

/* Header spans full width */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu::before,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu::before {
    grid-column: 1 / -1 !important;
}

/* Submenu items - ONLY for main navigation */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Submenu link styles - ONLY for main navigation, NOT user profile */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li a,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ece-gray-700) !important;
    border-radius: 10px !important;
    transition: var(--ece-transition) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li a:hover,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li a:hover {
    background: var(--ece-gray-50) !important;
    color: var(--ece-primary) !important;
}

/* Icons for profession items via ::before - ONLY for main navigation */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li a::before,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li a::before {
    content: '📖' !important; /* Default fallback icon for new professions */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05)) !important;
}

/* Electrician icon - matches both /electrician/ and /electricians/ */
.ece-nav-menu .sub-menu li a[href*="electrician"]::before,
.ece-nav-menu .sub-menu li a[href*="profession/electrician"]::before,
.ece-nav-menu .sub-menu li a[href*="learn/electricians"]::before {
    content: '⚡' !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)) !important;
}
/* Real Estate icon */
.ece-nav-menu .sub-menu li a[href*="real-estate"]::before {
    content: '🏠' !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
}
/* HVAC icon */
.ece-nav-menu .sub-menu li a[href*="hvac"]::before {
    content: '❄️' !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
}
/* Healthcare icon */
.ece-nav-menu .sub-menu li a[href*="healthcare"]::before {
    content: '🏥' !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
}
/* Plumbing icon */
.ece-nav-menu .sub-menu li a[href*="plumbing"]::before {
    content: '🔧' !important;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05)) !important;
}
/* Insurance icon */
.ece-nav-menu .sub-menu li a[href*="insurance"]::before {
    content: '🛡️' !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)) !important;
}
/* Contractor icon */
.ece-nav-menu .sub-menu li a[href*="contractor"]::before {
    content: '🏗️' !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05)) !important;
}

/* Safety items icons - specific overrides (dynamic CSS handles most icons) */
.ece-nav-menu .sub-menu li a[href*="osha-10"]::before,
.ece-nav-menu .sub-menu li a[href*="osha10"]::before,
.ece-nav-menu .sub-menu li a[href*="10-hour"]::before {
    content: '🔴' !important;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="osha-30"]::before,
.ece-nav-menu .sub-menu li a[href*="osha30"]::before,
.ece-nav-menu .sub-menu li a[href*="30-hour"]::before {
    content: '🟠' !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="hipaa"]::before,
.ece-nav-menu .sub-menu li a[href*="HIPAA"]::before {
    content: '📋' !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="workplace"]::before,
.ece-nav-menu .sub-menu li a[href*="general-safety"]::before {
    content: '🏭' !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
}

/* "View All" button style - spans full width - ONLY for main navigation */
.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--ece-gray-100) !important;
}

.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child a,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child a {
    justify-content: center !important;
    background: var(--ece-gray-100) !important;
    color: var(--ece-gray-700) !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
}

.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child a::before {
    display: none !important;
}

.ece-nav-menu > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child a:hover,
.ece-nav .nav.navbar-nav > li:not(.ece-mobile-profile-parent) > .sub-menu > li:last-child a:hover {
    background: var(--ece-primary) !important;
    color: white !important;
}

/* ============================================
   USER PROFILE DROPDOWN IN MAIN NAVIGATION
   Hide on desktop - only show in mobile hamburger menu
   ============================================ */
@media (min-width: 992px) {
    .ece-nav-menu > li.ece-mobile-profile-parent,
    .ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent {
        display: none !important;
    }
}

/* Mobile styles for profile dropdown - simple list, no grid/icons/headers */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(10px) !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    list-style: none !important;
    margin: 0 !important;
    border: none !important;
    display: block !important; /* Override any grid layout */
}

.ece-nav-menu > li.ece-mobile-profile-parent:hover > .sub-menu,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(8px) !important;
}

/* No ::before header for profile dropdown */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu::before,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu::before {
    display: none !important;
    content: none !important;
}

/* Profile dropdown menu items */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Profile dropdown links */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li a,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li a {
    display: block !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ece-gray-700) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li a:hover,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li a:hover {
    background: var(--ece-gray-50) !important;
    color: var(--ece-primary) !important;
}

/* No icons for profile dropdown items */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li a::before,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li a::before {
    display: none !important;
    content: none !important;
}

/* Logout item styling */
.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li.ece-logout-item a,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li.ece-logout-item a {
    color: var(--ece-gray-500) !important;
    border-top: 1px solid var(--ece-gray-100) !important;
    margin-top: 4px !important;
    padding-top: 14px !important;
}

.ece-nav-menu > li.ece-mobile-profile-parent > .sub-menu > li.ece-logout-item a:hover,
.ece-nav .nav.navbar-nav > li.ece-mobile-profile-parent > .sub-menu > li.ece-logout-item a:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.05) !important;
}

/* Blog and Contact Us have no submenu - hide dropdown styles by URL match */
/* Using URL matching instead of nth-child to be independent of menu order */
.ece-nav-menu > li > a[href*="/blog/"] ~ .sub-menu,
.ece-nav-menu > li > a[href*="/contact/"] ~ .sub-menu {
    display: none !important;
}

/* Learn menu - single column layout, no "View All" styling - target by URL */
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu {
    grid-template-columns: 1fr !important;
    min-width: 240px !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child {
    grid-column: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a {
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 12px 16px !important;
    color: var(--ece-gray-700) !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a:hover {
    background: var(--ece-gray-50) !important;
    color: var(--ece-primary) !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a::before {
    display: inline-flex !important;
}

/* CE Courses menu - 2 columns like Exam Prep - target by URL */
.ece-nav-menu > li > a[href*="/ce/"] ~ .sub-menu {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: 420px !important;
}

/* Nested submenus (3rd level) - not used but keeping for safety */
.ece-nav-menu .sub-menu .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
    transform: translateX(10px) !important;
}

.ece-nav-menu .sub-menu li:hover > .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* ============================================
   MEGA MENU STYLES (Theme's TC Mega Menu)
   ============================================ */
.ece-nav .nav.navbar-nav li.tc-menu-layout-builder > .sub-menu,
.ece-nav .nav.navbar-nav li.tc-menu-layout-column > .sub-menu,
.ece-nav .nav.navbar-nav li.widget_area > .sub-menu {
    min-width: 600px !important;
    padding: 20px !important;
}

.ece-nav .nav.navbar-nav .tc-megamenu-wrapper {
    background: white !important;
    border-radius: var(--ece-radius-lg) !important;
}

.ece-nav .nav.navbar-nav .widget-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--ece-gray-100) !important;
}

/* ============================================
   HEADER ACTIONS (Login/Profile Buttons)
   ============================================ */
.ece-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0;
}

/* Thim Login Popup Widget Styles */
.ece-header-actions .widget,
.ece-header-actions .widget_login-popup,
.ece-header-actions .thim-widget-login-popup {
    display: flex !important;
    align-items: center !important;
}

.ece-header-actions .thim-link-login,
.ece-header-actions .thim-login-popup {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ece-header-actions .thim-link-login a,
.ece-header-actions .thim-login-popup a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--ece-radius) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--ece-transition) !important;
}

.ece-header-actions .thim-link-login a.login,
.ece-header-actions .thim-login-popup a.login {
    background: #d97706 !important;
    color: white !important;
    border: none !important;
}

.ece-header-actions .thim-link-login a.login:hover,
.ece-header-actions .thim-login-popup a.login:hover {
    background: #b45309 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ece-shadow-md) !important;
}

.ece-header-actions .thim-link-login a.register,
.ece-header-actions .thim-login-popup a.register {
    background: var(--ece-primary) !important;
    color: white !important;
    border: none !important;
}

.ece-header-actions .thim-link-login a.register:hover,
.ece-header-actions .thim-login-popup a.register:hover {
    background: var(--ece-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ece-shadow-md) !important;
}

/* Simplify auth to ONE clear button for non-technical users: hide the separate
   "Register" trigger and make the single "Login" button bigger / more prominent.
   (New users can still register from the login popup's "register now" link.) */
.ece-header .thim-link-login a.register.js-show-popup,
.ece-header .thim-login-popup a.register.js-show-popup {
    display: none !important;
}
.ece-header-actions .thim-link-login a.login,
.ece-header-actions .thim-login-popup a.login {
    padding: 11px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Logged-in user styles */
.ece-header-actions .thim-link-login a.profile,
.ece-header-actions .thim-login-popup a.profile {
    background: transparent !important;
    color: var(--ece-gray-600) !important;
}

.ece-header-actions .thim-link-login a.profile:hover,
.ece-header-actions .thim-login-popup a.profile:hover {
    color: var(--ece-primary) !important;
}

.ece-header-actions .thim-link-login a.logout,
.ece-header-actions .thim-login-popup a.logout {
    background: transparent !important;
    color: var(--ece-gray-500) !important;
}

.ece-header-actions .thim-link-login a.logout:hover,
.ece-header-actions .thim-login-popup a.logout:hover {
    color: var(--ece-gray-700) !important;
}

/* User Profile Dropdown */
.ece-header-actions .thim-link-login.has_sub_info {
    position: relative;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile .author {
    color: var(--ece-gray-700);
    font-weight: 500;
    font-size: 14px;
}

/* Hide duplicate arrow - widget already provides one */
.ece-header-actions .thim-link-login.has_sub_info > a.profile::after {
    display: none !important;
}

/* Profile Link Styling */
.ece-header-actions .thim-link-login.has_sub_info > a.profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile:hover {
    background: var(--ece-gray-100) !important;
}

/* Hide broken avatar images */
.ece-header-actions .thim-link-login.has_sub_info > a.profile img {
    display: none !important;
}

/* Dropdown arrow */
.ece-header-actions .thim-link-login.has_sub_info > a.profile .author::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ece-gray-500);
    transition: transform 0.2s ease;
}

.ece-header-actions .thim-link-login.has_sub_info.show > a.profile .author::after {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 8px;
    padding-top: 16px; /* Visual gap at top */
    margin: 0;
    list-style: none;
    display: none;
    z-index: 1000;
    font-family: var(--ece-font-family);
}

/* Invisible bridge to prevent hover gap */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* JS adds .show class on click */
.ece-header-actions .thim-link-login.has_sub_info.show ul.user-info {
    display: block !important;
}

/* Also show on hover */
.ece-header-actions .thim-link-login.has_sub_info:hover ul.user-info {
    display: block !important;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li {
    margin: 0;
    padding: 0;
}

/* Hide duplicate user profile at top - already shown in header */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-user {
    display: none;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--ece-gray-700);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a:hover {
    background: var(--ece-gray-50);
}

/* Icon styling with colored backgrounds */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* My Courses - Blue */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-courses a i {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
    color: #2563eb;
}

/* My Orders - Green */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-orders a i {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: #10b981;
}

/* Certificates - Sober Amber */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-certificates a i {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.05));
    color: #d97706;
}

/* Wishlist - Red */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-wishlist a i {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    color: #ef4444;
}

/* Edit Profile / Settings - Gray */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-settings a i {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
    color: #6b7280;
}

/* My Team - Sky */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-my-team a i {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.05));
    color: #0ea5e9;
}

/* Course Studio - Amber */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-course-studio a i {
    background: linear-gradient(135deg, rgba(245, 130, 31, 0.15), rgba(245, 130, 31, 0.05));
    color: #f5821f;
}

/* Referrals and other items - Purple */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li:not([class*="menu-item-"]) a i,
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li[class=""] a i {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
    color: #8b5cf6;
}

/* Logout styling */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out {
    border-top: 1px solid var(--ece-gray-200);
    margin-top: 8px;
    padding-top: 8px;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a {
    color: #dc3545;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a:hover {
    background: rgba(220, 53, 69, 0.06);
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a i {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05));
    color: #dc3545;
}

.ece-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--ece-radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--ece-transition) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-btn-ghost {
    background: transparent !important;
    color: var(--ece-gray-600) !important;
}

.ece-btn-ghost:hover {
    background: var(--ece-gray-100) !important;
    color: var(--ece-gray-900) !important;
}

.ece-btn-primary {
    background: #f5a623 !important;
    color: white !important;
    font-weight: 700 !important;
}

.ece-btn-primary:hover {
    background: #e09100 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ece-shadow-md) !important;
}

.ece-btn-outline {
    background: transparent !important;
    border: 1px solid var(--ece-gray-300) !important;
    color: var(--ece-gray-700) !important;
}

.ece-btn-outline:hover {
    border-color: var(--ece-gray-400) !important;
    background: var(--ece-gray-50) !important;
}

.ece-btn-block {
    display: flex !important;
    width: 100% !important;
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */
.ece-mobile-toggle {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 10px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.ece-mobile-toggle .icon-bar {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background: var(--ece-gray-700) !important;
    border-radius: 2px !important;
    transition: var(--ece-transition) !important;
}

/* "Menu" label under the hamburger — non-technical users don't recognize the bare
   3-bar icon as a menu, so spell it out. The parent theme positions the bars
   absolutely (for the open/close animation), which made the label render BEHIND them
   — pull the bars back into normal flow and force a clean, centered vertical stack. */
.ece-header .ece-mobile-toggle {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 5px 9px !important;
    height: auto !important;
    width: auto !important;
    /* Clear, tappable bordered button — brand-blue outline on white. */
    background: #ffffff !important;
    border: 1.5px solid #d97706 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
.ece-header .ece-mobile-toggle .icon-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 22px !important;
    height: 3px !important; /* whole pixel — 2.5px anti-aliased unevenly (middle bar looked thinner) */
    margin: 0 !important;
    background: #d97706 !important;
    opacity: 1 !important;
}
.ece-header .ece-mobile-toggle .ece-mobile-toggle-label {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #d97706 !important;
    background: transparent !important;
    white-space: nowrap !important;
}

.ece-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Mobile Auth in mobile menu */
.mobile-menu-wrapper .ece-mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Style login/register buttons in mobile menu */
.mobile-menu-wrapper .ece-mobile-auth ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mobile-menu-wrapper .ece-mobile-auth .thim-link-login,
.mobile-menu-wrapper .ece-mobile-auth .thim-login-popup {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.mobile-menu-wrapper .ece-mobile-auth a {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.login {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.login:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.register {
    background: var(--ece-primary) !important;
    border: none !important;
    color: white !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.register:hover {
    background: var(--ece-primary-dark) !important;
    transform: translateY(-1px) !important;
}

/* Logged-in user in mobile menu */
.mobile-menu-wrapper .ece-mobile-auth a.profile {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #fff !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.profile:hover {
    background: rgba(37, 99, 235, 0.25) !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.logout {
    background: transparent !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: rgba(220, 53, 69, 0.9) !important;
}

.mobile-menu-wrapper .ece-mobile-auth a.logout:hover {
    background: rgba(220, 53, 69, 0.1) !important;
}

/* ============================================
   MOBILE HEADER AUTH BUTTONS
   ============================================ */
/* Hide mobile header auth by default (desktop) */
.ece-mobile-header-auth {
    display: none !important;
}

/* Mobile Profile Dropdown - NO LONGER USED (profile moved to hamburger menu) */
.ece-mobile-profile-dropdown {
    display: none !important;
}

/* Show on mobile and hide desktop auth */
@media (max-width: 991px) {
    /* Mobile Profile Dropdown - hidden (moved to hamburger menu) */
    .ece-mobile-profile-dropdown {
        display: none !important;
    }

    /* Logo centering is now handled in the base .ece-header-logo rule for all users */

    /* Mobile hamburger menu - Profile link with two-column layout */
    .ece-profile-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Hide icon-toggle for profile item (we use ::after for arrow instead) */
    .ece-mobile-profile-parent .icon-toggle,
    .ece-mobile-profile-parent > .icon-toggle,
    .mobile-menu-wrapper .ece-mobile-profile-parent .icon-toggle,
    .mobile-menu-wrapper .nav.navbar-nav .ece-mobile-profile-parent .icon-toggle,
    li.ece-mobile-profile-parent .icon-toggle {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Left side: avatar + name */
    .ece-profile-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .ece-profile-name {
        color: inherit;
    }

    /* Right side: arrow */
    .ece-profile-arrow {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 300;
    }

    /* Mini avatar in mobile menu */
    .ece-profile-avatar-mini {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, #f7941d 0%, #e07c0e 100%);
        border-radius: 6px;
        color: white;
        font-weight: 600;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* Logout item in profile submenu */
    .ece-logout-item a {
        color: #ef4444 !important;
    }

    /* Guest auth buttons */
    .ece-mobile-header-auth {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* Hide cart widget on mobile - only show login buttons */
    .ece-mobile-header-auth > .widget.woocommerce,
    .ece-mobile-header-auth > li.woocommerce {
        display: none !important;
    }

    /* Hide desktop header actions on mobile */
    .ece-header-actions {
        display: none !important;
    }

    /* Mobile header auth button styles */
    .ece-mobile-header-auth .widget,
    .ece-mobile-header-auth .widget_login-popup,
    .ece-mobile-header-auth .thim-widget-login-popup {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .ece-mobile-header-auth .thim-link-login,
    .ece-mobile-header-auth .thim-login-popup {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .ece-mobile-header-auth .thim-link-login a,
    .ece-mobile-header-auth .thim-login-popup a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
    }

    /* Single bigger Log In button on mobile */
    .ece-mobile-header-auth .thim-link-login a.login,
    .ece-mobile-header-auth .thim-login-popup a.login {
        background: #d97706 !important;
        color: white !important;
        border: none !important;
        padding: 10px 22px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
    }

    .ece-mobile-header-auth .thim-link-login a.login:hover,
    .ece-mobile-header-auth .thim-login-popup a.login:hover {
        background: #b45309 !important;
        color: white !important;
    }
    /* (Register trigger is hidden globally by the .ece-header rule above.) */

    /* Logged-in user in mobile header */
    .ece-mobile-header-auth .thim-link-login a.profile,
    .ece-mobile-header-auth .thim-login-popup a.profile {
        background: #f1f5f9 !important;
        color: #64748b !important;
        padding: 6px 10px !important;
    }

    .ece-mobile-header-auth .thim-link-login a.profile:hover,
    .ece-mobile-header-auth .thim-login-popup a.profile:hover {
        color: var(--ece-primary) !important;
    }

    /* Hide user dropdown in mobile header (too complex for small space) */
    .ece-mobile-header-auth .thim-link-login.has_sub_info ul.user-info {
        display: none !important;
    }
}

/* Adjust for very small screens */
@media (max-width: 400px) {
    .ece-header-container {
        padding: 0 8px !important;
    }

    .ece-mobile-header-auth .thim-link-login a,
    .ece-mobile-header-auth .thim-login-popup a {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    /* Very small screens - slightly smaller logo */
    .ece-header-logo img,
    .ece-header-logo .thim-logo img,
    .ece-header-logo .width-logo img,
    .ece-header-logo a img,
    .ece-header-logo .ece-logo img,
    .ece-header-logo img.ece-logo-img,
    .ece-header .ece-header-logo img {
        height: 42px !important;
        max-height: 42px !important;
        min-height: 42px !important;
    }

    .ece-header-inner {
        gap: 6px !important;
    }

    .ece-mobile-header-auth {
        gap: 4px !important;
        margin-right: 4px !important;
    }

    /* Mobile profile dropdown - smaller on tiny screens */
    .ece-mobile-profile-trigger {
        padding: 4px 10px 4px 4px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .ece-mobile-profile-name {
        max-width: 70px !important;
    }

    .ece-mobile-profile-avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}

/* ============================================
   BODY PADDING FOR FIXED HEADER
   ============================================ */
body.ece-modern-header {
    padding-top: 72px !important;
}

body.ece-modern-header.admin-bar {
    padding-top: 72px !important;
}

body.ece-modern-header.admin-bar .ece-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.ece-modern-header.admin-bar .ece-header {
        top: 46px !important;
    }
    /* WordPress makes the admin bar position:absolute under 782px, so it scrolls
       away and leaves a 46px gap above the sticky header on scroll-up. Pin it fixed
       (like desktop) so the header stays flush below it. Admin-only. */
    #wpadminbar {
        position: fixed !important;
    }
}

/* Mobile body padding - match 60px header height */
@media (max-width: 991px) {
    body.ece-modern-header {
        padding-top: 60px !important;
    }
    body.ece-modern-header.admin-bar {
        padding-top: 56px !important;
    }
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1024px) {
    .ece-nav-menu > li > a,
    .ece-nav .nav.navbar-nav > li > a {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .ece-header-inner {
        gap: 16px;
    }
}

/* Desktop header shows only >=992px (below that is the compact/hamburger header,
   which switches at <=991px so the desktop nav never leaks a mis-placed profile
   item or overflows off the right edge). In the tight 992-1300 band, compact the
   nav padding + gap + container padding so the 7-item nav + logo + short
   "Hi, <first name>" account all fit down to 992px. >=1300px keeps roomier spacing. */
@media (min-width: 992px) and (max-width: 1300px) {
    body.ece-modern-header .ece-nav-menu > li > a,
    body.ece-modern-header .ece-nav .nav.navbar-nav > li > a {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
    body.ece-modern-header .ece-header-inner { gap: 12px !important; }
    body.ece-modern-header .ece-header-container { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 991px) {
    /* Hide desktop elements */
    .ece-nav,
    .ece-header-actions {
        display: none !important;
    }


    /* Show mobile toggle */
    .ece-mobile-toggle {
        display: flex !important;
        order: -1;
    }

    /* Mobile header - clean responsive design */
    .ece-header {
        height: 60px !important;
        padding: 0 !important;
    }

    .ece-header-container {
        padding: 0 12px 0 8px;
        height: 100%;
        position: relative;
    }

    .ece-header-inner {
        display: flex !important;
        gap: 10px;
        justify-content: space-between !important;
        height: 100%;
        align-items: center;
        overflow: visible;
        flex-wrap: nowrap;
        position: relative;
    }

    /* Hamburger menu - flex item on the left */
    .ece-mobile-toggle {
        flex-shrink: 0;
        order: 0;
        z-index: 10;
    }

    /* Logo - centered using flex-grow */
    .ece-header-logo {
        flex-shrink: 0;
        flex-grow: 1;
        display: flex !important;
        justify-content: center !important;
        order: 1;
    }

    /* Mobile logo size - target all possible selectors with high specificity */
    .ece-header-logo img,
    .ece-header-logo .thim-logo img,
    .ece-header-logo .width-logo img,
    .ece-header-logo a img,
    .ece-header-logo .ece-logo img,
    .ece-header-logo img.ece-logo-img,
    .ece-header .ece-header-logo img {
        height: 50px !important;
        max-height: 50px !important;
        min-height: 50px !important;
        width: auto !important;
    }

    /* Mobile auth buttons */
    .ece-mobile-header-auth {
        display: flex !important;
        order: 2;
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
        max-width: 50%;
    }

    .ece-mobile-header-auth .thim-link-login a,
    .ece-mobile-header-auth .thim-login-popup a {
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* Logged-in: Create invisible spacer on right to balance hamburger on left */
    /* This ensures logo stays centered when there are no auth buttons */
    .logged-in .ece-header-inner::after {
        content: '';
        display: block;
        width: 46px; /* Same width as hamburger toggle */
        flex-shrink: 0;
        order: 3;
    }

    /* Body spacing */
    body.ece-modern-header {
        padding-top: 68px;
    }
}

/* ============================================
   HIDE THEME'S OLD HEADER ELEMENTS
   ============================================ */
body.ece-modern-header .thim-nav-wrapper:not(.ece-nav),
body.ece-modern-header #masthead .thim-nav-wrapper,
body.ece-modern-header #masthead .navigation,
body.ece-modern-header #masthead .toolbar-wrapper {
    display: none !important;
}

/* Keep wrapper container structure for rest of page */
body.ece-modern-header #wrapper-container {
    padding-top: 0 !important;
}

/* ============================================
   MINI CART - Position dropdown below cart icon
   ============================================ */
.ece-header-actions .widget_shopping_cart,
.ece-header-actions .woocommerce.widget_shopping_cart {
    display: block;
    position: relative;
}

/* Force dropdown to appear BELOW cart icon */
.ece-header-actions .widget_shopping_cart_content {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 15px !important;
    z-index: 9999 !important;
}

/* Hide menu_right sidebar items (we use explicit buttons) */
.ece-nav-menu > li.menu-right,
.ece-nav .nav.navbar-nav > li.menu-right {
    display: none !important;
}

/* "Become a Partner" CTA nav item */
.ece-nav-menu > li.ece-partner-menu-item > a {
    color: var(--ece-primary) !important;
    border: 1.5px solid var(--ece-primary) !important;
    border-radius: 20px !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.ece-nav-menu > li.ece-partner-menu-item > a:hover {
    color: #fff !important;
    background: var(--ece-primary) !important;
}

/* Cart visibility - controlled by JS classes based on cart contents
   Note: Guest checkout is disabled, so guests can't add items.
   The .cart-empty class effectively hides the cart for guests. */

/* Default-hidden BEFORE the JS runs. The cart widget always renders in the HTML,
   and edumachild.js only adds .cart-empty/.cart-has-items on document.ready (after
   WC fragments load). Without this rule the cart shows on initial paint and then
   hides a moment later, which reflowed / "jumped" the header on every refresh.
   Start hidden; JS reveals it only when there are items (.cart-has-items below). */
.ece-header-actions .widget_shopping_cart,
.ece-mobile-header-auth .widget_shopping_cart {
    display: none !important;
}

/* Hide cart when empty (JS adds .cart-empty class after fragments load) */
.ece-header-actions .widget_shopping_cart.cart-empty,
.ece-mobile-header-auth .widget_shopping_cart.cart-empty {
    display: none !important;
}

/* Show cart when has items (JS adds .cart-has-items class) */
.ece-header-actions .widget_shopping_cart.cart-has-items {
    display: block !important;
}

.ece-mobile-header-auth .widget_shopping_cart.cart-has-items {
    display: flex !important;
}

/* Hide cart completely on mobile - not enough space */
@media (max-width: 991px) {
    .ece-mobile-header-auth .widget_shopping_cart,
    .ece-mobile-header-auth .woocommerce.widget_shopping_cart {
        display: none !important;
    }
}

/* ============================================
   MOBILE CART ICON (logged-in users)
   The desktop cart is in .ece-header-actions (hidden on mobile); this compact icon
   restores the cart on the mobile header. Hidden on desktop and when the cart is empty.
   ============================================ */
.ece-mobile-cart { display: none; }
@media (max-width: 991px) {
    .ece-mobile-cart.has-items {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        order: 2;                 /* after hamburger(0) and logo(1) -> sits on the right */
        flex-shrink: 0;
        color: var(--ece-gray-700, #374151);
        text-decoration: none;
        padding: 6px;
        margin-right: 2px;
        z-index: 6;
    }
    .ece-mobile-cart .ece-mobile-cart-icon { display: block; }
    .ece-mobile-cart .ece-mobile-cart-count {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #f7941d;
        color: #fff;
        border-radius: 999px;
        font: 700 11px/16px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        text-align: center;
    }
}

/* ============================================
   CE MEGA MENU WITH STATE SELECTION (V3)
   Full-width dropdown with profession -> state flow
   ============================================ */

/* Hide default submenu for CE Courses menu item - target by class (position-independent) */
.ce-mega-menu-enabled .ce-mega-menu-item > .sub-menu,
.ce-mega-menu-item.ce-mega-active > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Also hide on hover when mega menu is enabled */
.ce-mega-menu-enabled .ce-mega-menu-item:hover > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CE Mega Menu Wrapper - Full Width */
.ce-mega-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
    border-top: none;
    z-index: 9998;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.ce-mega-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Admin bar offset */
body.admin-bar .ce-mega-menu {
    top: 104px; /* 72px header + 32px admin bar */
}

@media screen and (max-width: 782px) {
    body.admin-bar .ce-mega-menu {
        top: 110px; /* 64px header + 46px admin bar on mobile */
    }
}

.ce-mega-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}

/* Mega Menu Header */
.ce-mega-menu-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.ce-mega-menu-back {
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ece-gray-600) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--ece-gray-200) !important;
    background: var(--ece-gray-50) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ce-mega-menu-back:hover {
    background: var(--ece-gray-100) !important;
    border-color: var(--ece-gray-300) !important;
    color: var(--ece-gray-800) !important;
}

.ce-mega-menu-back:focus {
    outline: none !important;
    border-color: var(--ece-gray-300) !important;
}

.ce-mega-menu.state-view .ce-mega-menu-back {
    display: flex !important;
}

/* Hide back button in single-profession mode (only one profession enabled) */
.ce-mega-menu.single-profession-mode .ce-mega-menu-back {
    display: none !important;
}

.ce-mega-menu-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ece-gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    background: var(--ece-gray-50);
    border-radius: 6px;
}

.ce-mega-menu.state-view .ce-mega-menu-title {
    display: none;
}

/* Professions Grid - Horizontal Pills */
.ce-mega-menu-professions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ce-mega-menu.state-view .ce-mega-menu-professions {
    display: none;
}

.ce-mega-menu-profession {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px 12px 12px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--ece-gray-200) !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-700) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ce-mega-menu-profession:hover {
    background: #fff !important;
    border-color: var(--ece-gray-300) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    color: var(--ece-gray-900) !important;
}

.ce-mega-menu-profession:focus {
    outline: none !important;
    border-color: var(--ece-gray-300) !important;
}

.ce-mega-menu-profession-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(107, 114, 128, 0.04));
}

/* Profession-specific icon colors */
.ce-mega-menu-profession[data-profession="electrician"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.12));
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}
.ce-mega-menu-profession[data-profession="hvac"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
}
.ce-mega-menu-profession[data-profession="plumber"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
}
.ce-mega-menu-profession[data-profession="contractor"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05));
}
.ce-mega-menu-profession[data-profession="real-estate"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
}
.ce-mega-menu-profession[data-profession="insurance"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}
.ce-mega-menu-profession[data-profession="codeofficial"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.28), rgba(13, 148, 136, 0.12));
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.35);
}

/* Per-profession pill tint + border so each is distinguishable at a glance */
.ce-mega-menu-profession[data-profession="electrician"]  { background: linear-gradient(135deg, rgba(245,158,11,0.16), #fff) !important; border-color: rgba(245,158,11,0.60) !important; }
.ce-mega-menu-profession[data-profession="codeofficial"] { background: linear-gradient(135deg, rgba(13,148,136,0.16), #fff) !important; border-color: rgba(13,148,136,0.60) !important; }
.ce-mega-menu-profession[data-profession="hvac"]         { background: linear-gradient(135deg, rgba(59,130,246,0.08), #fff) !important; border-color: rgba(59,130,246,0.35) !important; }
.ce-mega-menu-profession[data-profession="plumber"]      { background: linear-gradient(135deg, rgba(107,114,128,0.08), #fff) !important; border-color: rgba(107,114,128,0.35) !important; }
.ce-mega-menu-profession[data-profession="contractor"]   { background: linear-gradient(135deg, rgba(234,88,12,0.08), #fff) !important; border-color: rgba(234,88,12,0.35) !important; }
.ce-mega-menu-profession[data-profession="real-estate"]  { background: linear-gradient(135deg, rgba(16,185,129,0.08), #fff) !important; border-color: rgba(16,185,129,0.35) !important; }
.ce-mega-menu-profession[data-profession="insurance"]    { background: linear-gradient(135deg, rgba(139,92,246,0.08), #fff) !important; border-color: rgba(139,92,246,0.35) !important; }

.ce-mega-menu-profession-arrow {
    font-size: 14px;
    color: var(--ece-gray-400);
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.ce-mega-menu-profession:hover .ce-mega-menu-profession-arrow {
    transform: translateX(3px);
    color: var(--ece-gray-600);
}

/* States Panel */
.ce-mega-menu-states {
    display: none;
}

.ce-mega-menu.state-view .ce-mega-menu-states {
    display: block;
    animation: ceMegaFadeIn 0.2s ease;
}

@keyframes ceMegaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Selected Profession Badge - hidden by default, shown in header when in state view */
.ce-mega-menu-selected-badge {
    display: none;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
    padding: 10px 18px 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.ce-mega-menu-selected-badge .ce-mega-menu-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    font-size: 16px;
}

.ce-mega-menu.state-view .ce-mega-menu-selected-badge {
    display: inline-flex;
}

/* Profession-specific badge colors */
.ce-mega-menu.state-view[data-profession="electrician"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
.ce-mega-menu.state-view[data-profession="hvac"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.ce-mega-menu.state-view[data-profession="plumber"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.35);
}
.ce-mega-menu.state-view[data-profession="contractor"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
.ce-mega-menu.state-view[data-profession="real-estate"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.ce-mega-menu.state-view[data-profession="insurance"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

/* States Grid - Pills Layout */
.ce-mega-menu-states-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.ce-mega-menu-state {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--ece-gray-700);
    text-align: center;
    white-space: nowrap;
    background: #f8f9fa;
    border: 1px solid var(--ece-gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    display: block;
}

.ce-mega-menu-state:hover {
    background: #1e3a5a;
    color: white;
    border-color: #1e3a5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 90, 0.25);
}

/* "Multi-State" pseudo-entry — highlighted as the recommended cross-state path */
.ce-mega-menu-state.ce-mega-menu-state-direct {
    background: #fff7ed;
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 600;
}
.ce-mega-menu-state.ce-mega-menu-state-direct:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.ce-mega-menu-state:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(30, 58, 90, 0.2);
}

/* Disabled state */
.ce-mega-menu-state.disabled {
    color: var(--ece-gray-300);
    background: var(--ece-gray-50);
    border-color: var(--ece-gray-100);
    cursor: not-allowed;
    pointer-events: none;
}

/* View All Link */
.ce-mega-menu-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 20px;
    color: #1e3a5a;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #1e3a5a;
    background: transparent;
    transition: all 0.2s ease;
}

.ce-mega-menu-view-all:hover {
    background: #1e3a5a;
    border-color: #1e3a5a;
    color: white;
}

/* ============================================
   CE MEGA MENU RESPONSIVE STYLES
   ============================================ */

/* Large tablets / small desktops */
@media (max-width: 1200px) {
    .ce-mega-menu-states-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .ce-mega-menu-professions {
        gap: 10px;
    }

    .ce-mega-menu-profession {
        padding: 10px 14px 10px 10px !important;
    }

    .ce-mega-menu-profession-icon {
        width: 32px;
        height: 32px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .ce-mega-menu-content {
        padding: 20px 24px;
    }

    .ce-mega-menu-states-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .ce-mega-menu-state {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Hide on mobile - mobile menu will handle this differently */
@media (max-width: 991px) {
    .ce-mega-menu {
        display: none !important;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .ce-mega-menu-state:hover {
        transform: none;
        box-shadow: none;
    }

    .ce-mega-menu-state:active {
        background: #1e3a5a;
        color: white;
        border-color: #1e3a5a;
    }

    .ce-mega-menu-profession:hover {
        transform: none;
        box-shadow: none;
    }

    .ce-mega-menu-profession:active {
        background: var(--ece-gray-50);
        border-color: var(--ece-gray-300);
    }
}

/* ============================================
   HIDE HEADER ON MOBILE WHEN LOGIN MODAL IS OPEN
   ============================================ */
@media (max-width: 991px) {
    body.thim-body-overlay .ece-header,
    body.thim-popup-active .ece-header {
        display: none !important;
    }
}

/* ============================================
   ELEMENTOR POPUP - MOBILE RESPONSIVE FIX
   Certificate popup and other lightbox modals
   ============================================ */
@media (max-width: 991px) {
    /* Make popup container fit mobile viewport */
    .elementor-popup-modal .dialog-widget-content {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 10px auto !important;
    }

    /* Scale down popup content to fit */
    .elementor-popup-modal .dialog-message {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Certificate image specifically - scale to fit */
    .elementor-popup-modal .dialog-message img,
    .elementor-popup-modal .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Elementor section within popup */
    .elementor-popup-modal .elementor-section {
        max-width: 100% !important;
    }

    /* Popup inner container */
    .elementor-popup-modal .elementor-container {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}

/* ============================================
   MOBILE PROFILE AVATAR DROPDOWN (logged-in)
   Persistent "you are logged in" indicator on the mobile header bar.
   Sits where guests see Register/Login. Tap toggles .is-open
   (js/mobile-profile-dropdown.js). Hidden on desktop, where the
   Thim widget in .ece-header-actions already shows the profile.
   ============================================ */
.ece-mobile-profile-dropdown {
    display: none !important; /* desktop: use .ece-header-actions instead */
}

@media (max-width: 991px) {
    .ece-mobile-profile-dropdown {
        display: inline-flex !important;
        position: relative !important;
        align-items: center !important;
        order: 2 !important;           /* push to the far right, like the guest auth buttons */
        margin-right: 2px !important;
        flex-shrink: 0 !important;
        z-index: 1001 !important;
    }

    /* The avatar now balances the hamburger on the right, so the old
       invisible spacer is no longer needed (it would shove the avatar
       inward, away from the right edge). */
    .logged-in .ece-header-inner::after {
        display: none !important;
    }

    .ece-mobile-profile-trigger {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 2px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }

    .ece-mobile-profile-trigger .ece-mobile-profile-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f7941d 0%, #e07c0e 100%);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(247, 148, 29, 0.35);
    }

    /* Crisp CSS-drawn caret (the Unicode glyph rendered as a faint dash) */
    .ece-mobile-profile-trigger .ece-mobile-profile-caret {
        display: inline-block;
        width: 0;
        height: 0;
        font-size: 0;                 /* hide the fallback Unicode character */
        line-height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #64748b;
        transition: transform 0.2s ease;
    }

    .ece-mobile-profile-dropdown.is-open .ece-mobile-profile-caret {
        transform: rotate(180deg);
    }

    /* Dropdown panel */
    .ece-mobile-profile-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        min-width: 220px !important;
        margin: 0 !important;
        padding: 6px !important;
        list-style: none !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 1002 !important;
    }

    .ece-mobile-profile-dropdown.is-open .ece-mobile-profile-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Little notch pointing at the avatar */
    .ece-mobile-profile-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 14px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-left: 1px solid #e5e7eb;
        border-top: 1px solid #e5e7eb;
        transform: rotate(45deg);
    }

    .ece-mobile-profile-menu li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Name header row */
    .ece-mobile-profile-menu .ece-mobile-profile-name {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid #f1f5f9;
        font-weight: 700;
        font-size: 14px;
        color: #0f172a;
    }

    .ece-mobile-profile-menu .ece-mobile-profile-name .ece-mobile-profile-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f7941d 0%, #e07c0e 100%);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ece-mobile-profile-menu li a {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        font-size: 14px;
        font-weight: 500;
        color: #334155 !important;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .ece-mobile-profile-menu li a:hover {
        background: #f8fafc !important;
    }

    .ece-mobile-profile-menu li.ece-logout {
        margin-top: 4px;
        padding-top: 2px;
        border-top: 1px solid #f1f5f9;
    }

    .ece-mobile-profile-menu li.ece-logout a {
        color: #ef4444 !important;
    }
}

/* =========================================================================
   Login popup — plain-language redesign for non-technical users.
   Social buttons are relabeled in PHP ("Sign in to your account" /
   "Sign in with Google/Facebook"); this styles the email/password form so
   the whole popup reads clearly (labels above fields, real dividers, and a
   "Create your account" button instead of a tiny text link).
   ========================================================================= */

/* "or" divider (below the social buttons, on both the sign-in and register
   panels) + "New to ExpertCE?" divider */
.thim-login .ece-login-or,
.thim-register .ece-login-or,
.thim-login .ece-login-newhere {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}
.thim-login .ece-login-or::before,
.thim-login .ece-login-or::after,
.thim-register .ece-login-or::before,
.thim-register .ece-login-or::after,
.thim-login .ece-login-newhere::before,
.thim-login .ece-login-newhere::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}
.thim-login .ece-login-or span,
.thim-register .ece-login-or span,
.thim-login .ece-login-newhere span {
    padding: 0 12px;
    white-space: nowrap;
}

/* The miniOrange social block already sits above; tuck the "or" divider close
   to the buttons instead of leaving a big gap. */
.thim-login .ece-login-or,
.thim-register .ece-login-or {
    margin: 2px 0 14px;
}

/* === Single-column (vertical) login popup — Mike-Holt style ===
   The popup markup order is already: social buttons -> "or" divider -> email/
   password form -> "Create your account". The parent theme laid this out as two
   desktop columns (social LEFT, form RIGHT) via flex on .thim-login-container.
   We stack it into one narrow vertical column instead, so the "or" divider now
   belongs between the social buttons and the form. (Mobile was already stacked.)
   Scoped to #thim-popup-login so the standalone /account page is untouched. */
@media (min-width: 768px) {
    #thim-popup-login .thim-login-container {
        display: block !important;
    }
    #thim-popup-login .thim-login-container > * {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
    /* show the "or" divider — it sits between the social block and the form now */
    #thim-popup-login .ece-login-or {
        display: flex !important;
    }
    /* narrow the modal to a single-column card and center it */
    #thim-popup-login .popup-login-wrapper {
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* === Sign-in card =========================================================
   Group the returning-user options (social buttons + email/password form) in a
   single bordered box, mirrored by the tinted "New to ExpertCE?" box below it,
   so the two paths read as two clear, separate choices — important for our
   older, less tech-savvy electrician audience. The card carries its own heading
   plus a plain one-line instruction; miniOrange's duplicate heading is hidden. */
#thim-popup-login .ece-signin-card {
    border: 1px solid #d9dee6;
    border-radius: 12px;
    background: #ffffff;
    padding: 22px 22px 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
#thim-popup-login .ece-signin-head {
    text-align: center;
    margin-bottom: 14px;
}
#thim-popup-login .ece-signin-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
}
#thim-popup-login .ece-signin-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}
/* Bold the lead phrase ("Already have an account?" / "New to ExpertCE?") in the
   dark heading colour so it pops without resorting to low-contrast yellow text. */
#thim-popup-login .ece-signin-sub strong {
    color: #1a1a2e;
    font-weight: 700;
}
/* miniOrange prints its own "Sign in to your account" heading above the social
   buttons; we render our own heading + instruction, so hide the duplicate. */
#thim-popup-login .mo-openid-app-icons > p:first-child {
    display: none !important;
}
/* One-line instruction under "New to ExpertCE?", to mirror the sign-in card. */
#thim-popup-login .ece-new-user-panel .ece-newuser-sub {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    text-align: center;
}

/* /account: the login widget now renders the same card as the popup, with the
   social buttons INSIDE the card above the form, so the "or" divider belongs
   between them (same as the popup). The separate Elementor social widget that
   used to sit below the form is hidden via body.ece-login-page below. */
#thim-form-login .ece-login-or {
    display: flex !important;
}

/* /account page: the social-login Elementor shortcode renders its buttons
   left-aligned and cramped. Center the block (and its heading) so it reads
   tidily. Scoped to .elementor-shortcode — the popup's social block is NOT an
   Elementor shortcode, so it's unaffected. */
/* Lay the social block out as a centered flex column. miniOrange hard-codes
   margin-left:10px and margin-bottom:5px inline on each button (unoverridable),
   so we use flex `gap` for reliable, controllable spacing between the stacked
   buttons, and balance the inline margin-left with an equal margin-right so they
   sit centered. (Also keeps /account consistent with the popup's stacked look.) */
.elementor-shortcode .mo-openid-app-icons {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center !important;
}
.elementor-shortcode .mo-openid-app-icons a {
    margin-right: 10px !important;
}
.elementor-shortcode .mo-openid-app-icons br {
    display: none !important;
}

/* "New to ExpertCE?" — make this divider clearly more prominent than the "or"
   one: darker, bolder text and a darker line so the Create-account CTA stands out. */
.thim-login .ece-login-newhere {
    margin: 18px 0 12px;
    color: #374151;
    font-weight: 600;
}
.thim-login .ece-login-newhere::before,
.thim-login .ece-login-newhere::after {
    background: #cbd5e1;
}

/* Remove miniOrange's large trailing gap and its own built-in 1px divider line
   under the social buttons — we supply a single, clearer "or" divider instead.
   (The duplicate line + dead space was the spacing issue between the Google
   button and the email field.) */
.thim-login-container .mo-openid-app-icons {
    padding-bottom: 0 !important;
}
.thim-login-container .mo-openid-app-icons::after {
    display: none !important;
}
.thim-login-container .mo-openid-app-icons + br {
    display: none !important;
}

/* Center + order the social buttons in the single-column card. miniOrange
   hard-codes inline (margin-left:30px, margin-bottom:25px, width:200px) with
   !important, which an external rule can't override — inline !important always
   wins. So we BALANCE the left margin with an equal margin-right (true center),
   and use flex `order` + a negative margin-top to sequence/space the buttons. */
/* Force the social block to a centered flex COLUMN. miniOrange renders it as a
   plain display:block div, where flex `order` (below) is a no-op — which is why
   the Google-first reorder silently failed. Flex also makes the centering robust
   (align-items:center + the balanced margins below). */
#thim-popup-login .mo-openid-app-icons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#thim-popup-login .mo-openid-app-icons a.mo_btn {
    margin-right: 30px !important;   /* balances inline margin-left:30px -> centered */
}
/* Show "Sign in with Google" FIRST, then Facebook (flex re-order, no markup change). */
#thim-popup-login .mo-openid-app-icons a.mo_btn-google {
    order: -1 !important;
}
/* Facebook is now the 2nd button — pull it up to a tidy ~10px gap. */
#thim-popup-login .mo-openid-app-icons a.mo_btn-facebook {
    margin-top: -15px !important;
}
/* pull the "or" section up under the buttons */
.thim-login-container .mo-openid-app-icons {
    margin-bottom: -14px !important;
}

/* Visible "Email" / "Password" labels above each input. The parent theme
   force-hides all labels in the login form (display:none; visibility:hidden)
   and relies on placeholders alone — confusing for non-technical users — so we
   override with ID-level specificity + !important to bring the labels back. */
#thim-popup-login .thim-login .ece-field-label,
#thim-popup-login .thim-register .ece-field-label,
.thim-login .ece-field-label,
.thim-register .ece-field-label {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-align: left;
}

/* "Keep me signed in" + "Forgot your password?" on one tidy row */
.thim-login .ece-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 16px;
}
.thim-login .ece-login-row .login-remember {
    margin: 0 !important;
    font-size: 13px;
}
.thim-login .ece-login-row .lost-pass-link {
    margin: 0 !important;
    white-space: nowrap;
    font-size: 14px;
}
/* "Forgot your password?" must read as a link at a glance (visibility
   complaints): bold, deep amber, always underlined. Covers the /account
   card and the login popup (both render a.lost-pass-link). */
a.lost-pass-link {
    font-weight: 700 !important;
    color: #b45309 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
a.lost-pass-link:hover,
a.lost-pass-link:focus {
    color: #92400e !important;
}

/* Password "show/hide" eye (#show_pass, injected by the theme JS) is centered on
   the WHOLE .login-password wrapper (top:50% + translateY(-50%)). Once we made the
   "Password" label visible, the wrapper grew taller than the input, so 50% landed
   above the input's middle and the eye drifted up toward the label. Re-anchor it to
   the input box (bottom of the wrapper) so it stays centered on the field at any
   label height. Applies to the popup's sign-in and register password fields. */
#thim-popup-login .login-password {
    position: relative;
}
#thim-popup-login .login-password #show_pass {
    top: auto !important;
    bottom: 0 !important;
    height: 43px !important;            /* ~ input height, so the icon centers on it */
    display: flex !important;
    align-items: center !important;
    transform: none !important;
}

/* ===== /account standalone login page — match the popup card ================
   The /account login form is rendered by the theme login widget (#thim-form-login),
   which now outputs the same .ece-signin-card markup as the popup. The popup's own
   rules are scoped to #thim-popup-login, so we mirror the needed ones for the
   #thim-form-login scope here. A body.ece-login-page class (set in functions.php)
   scopes the page-level tweaks (hide duplicate social widget; hide hero on mobile). */
#thim-form-login .ece-signin-card {
    border: 1px solid #d9dee6;
    border-radius: 12px;
    background: #ffffff;
    padding: 22px 22px 8px;
    margin: 0 auto 16px;
    max-width: 460px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
#thim-form-login .ece-new-user-panel {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
#thim-form-login .ece-signin-head {
    text-align: center;
    margin-bottom: 14px;
}
#thim-form-login .ece-signin-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
}
#thim-form-login .ece-signin-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}
#thim-form-login .ece-signin-sub strong {
    color: #1a1a2e;
    font-weight: 700;
}
/* social block: centered flex column, Google first, miniOrange heading hidden */
#thim-form-login .mo-openid-app-icons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: -14px !important;
}
#thim-form-login .mo-openid-app-icons > p:first-child {
    display: none !important;
}
#thim-form-login .mo-openid-app-icons a.mo_btn {
    margin-right: 30px !important;       /* balances miniOrange's inline margin-left */
}
#thim-form-login .mo-openid-app-icons a.mo_btn-google {
    order: -1 !important;
}
#thim-form-login .mo-openid-app-icons a.mo_btn-facebook {
    margin-top: -15px !important;
}
/* password eye centered on the input (same fix as the popup) */
#thim-form-login .login-password {
    position: relative;
}
#thim-form-login .login-password #show_pass {
    top: auto !important;
    bottom: 0 !important;
    height: 43px !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
}

/* Hide the now-duplicate standalone social Elementor widget on the login page.
   The login FORM widget is a custom widget (not .elementor-widget-shortcode), so
   this only removes the leftover social shortcode block. */
body.ece-login-page .elementor-widget-shortcode {
    display: none !important;
}

/* Mobile: hide the dark "Account" page-title hero so the card sits high like the
   popup (kept on desktop per design), pull the card up under the site header
   (which stays), and apply the same phone compaction the popup gets — so the
   "Create your account" button fits without scrolling. The site header is left
   untouched. */
@media (max-width: 767px) {
    body.ece-login-page .top_heading_out {
        display: none !important;
    }
    /* close the gap between the (kept) site header and the card */
    body.ece-login-page #thim-form-login {
        margin-top: -38px;
    }
    #thim-form-login .ece-signin-card {
        padding: 14px 16px 4px !important;
        margin-bottom: 10px !important;
    }
    #thim-form-login .ece-signin-head {
        margin-bottom: 8px !important;
    }
    #thim-form-login .ece-signin-title {
        font-size: 18px !important;
    }
    #thim-form-login .ece-signin-sub {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    #thim-form-login .mo-openid-app-icons a.mo_btn-facebook {
        margin-top: -15px !important;       /* keep a clear ~10px gap between buttons */
    }
    #thim-form-login .mo-openid-app-icons {
        margin-bottom: -16px !important;
    }
    #thim-form-login .ece-login-or {
        margin: 6px 0 !important;
    }
    #thim-form-login .ece-field-label {
        margin-bottom: 3px !important;
    }
    #thim-form-login .login-username,
    #thim-form-login .login-password {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
    #thim-form-login .login-username input.input,
    #thim-form-login .login-password input.input {
        margin-bottom: 0 !important;
    }
    #thim-form-login .ece-login-row {
        margin: 2px 0 10px !important;
    }
    #thim-form-login .ece-new-user-panel {
        margin-top: 10px !important;
        padding: 10px 14px !important;
    }
    #thim-form-login .ece-new-user-panel .ece-login-newhere {
        margin-bottom: 6px !important;
    }
    #thim-form-login .ece-new-user-panel .ece-newuser-sub {
        margin-bottom: 8px !important;
    }
    #thim-form-login .ece-create-account-btn {
        padding: 12px 16px !important;
    }
}

/* "Create your account" — a prominent BLUE button with crisp white, bold text.
   Deliberately a different colour from the orange/gold SIGN IN button so the two
   actions don't clash (blue = new user, orange = returning user). ID-level
   specificity + !important is required because the theme's ".register" link
   colour (orange) otherwise bleeds into the text, leaving unreadable text. */
#thim-popup-login .thim-login .ece-create-account-btn,
.thim-login .ece-create-account-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 14px 16px;
    text-align: center;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px;
    background: #2563eb !important;
    background-image: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
#thim-popup-login .thim-login .ece-create-account-btn:hover,
.thim-login .ece-create-account-btn:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Group "New to ExpertCE?" + the Create-account button in a subtly tinted panel
   so the NEW-user zone is visually separated from the SIGN-IN (returning-user)
   zone — clearer for non-technical users. */
.thim-login .ece-new-user-panel {
    margin-top: 18px;
    padding: 14px 16px 16px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
/* The panel itself provides the separation, so drop the divider lines and just
   show a clear label above the button. */
.thim-login .ece-new-user-panel .ece-login-newhere {
    margin: 0 0 10px;
}
.thim-login .ece-new-user-panel .ece-login-newhere::before,
.thim-login .ece-new-user-panel .ece-login-newhere::after {
    display: none;
}
/* .link-bottom is only here so the theme's register-toggle JS catches the button;
   strip its default spacing so it doesn't alter the panel layout. */
.thim-login .ece-new-user-panel .link-bottom {
    margin: 0 !important;
    padding: 0 !important;
}

/* Register (sign-up) view: "Already have an account? Log in" panel — mirrors the
   sign-in view's "New to ExpertCE?" box so both panels feel consistent. The
   register card now carries its own heading + social buttons + "or", same as the
   sign-in card. (The h4.title heading the theme used is replaced by .ece-signin-
   head, so no extra rule is needed for it.) */
.ece-haveaccount-panel {
    margin-top: 18px;
    padding: 14px 16px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
}
.ece-haveaccount-panel .link-bottom {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    color: #374151;
}
.ece-haveaccount-panel .ece-haveaccount-label {
    font-weight: 600;
    margin-right: 4px;
}
.ece-haveaccount-panel a {
    color: #2563eb !important;
    font-weight: 700;
    text-decoration: none;
}
.ece-haveaccount-panel a:hover {
    text-decoration: underline;
}

/* ===== Phone compaction =====================================================
   On short phones the "New to ExpertCE?" box (Create account) was pushed below
   the fold. Trim the top gap, the social-button gaps (miniOrange's inline 25px),
   the field margins, and the inter-section spacing so the box sits in view
   without scrolling. Single column already applies below 768px; this only
   tightens spacing. */
@media (max-width: 767px) {
    #thim-popup-login .popup-login-wrapper {
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }
    /* The parent theme reserves 50px of top padding on .thim-login-container to
       clear the close (X) button; 28px still clears it and reclaims ~22px above
       the heading. Also drop .thim-login/.thim-register's 10px top margin. */
    #thim-popup-login .thim-login-container {
        padding-top: 28px !important;
    }
    #thim-popup-login .thim-login,
    #thim-popup-login .thim-register {
        margin-top: 0 !important;
    }
    #thim-popup-login .ece-signin-card {
        padding: 14px 16px 4px !important;
        margin-bottom: 12px !important;
    }
    #thim-popup-login .ece-signin-head {
        margin-bottom: 8px !important;
    }
    #thim-popup-login .ece-signin-title {
        font-size: 18px !important;
    }
    #thim-popup-login .ece-signin-sub {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    /* pull the social stack tighter (each button has inline margin-bottom:25px) */
    #thim-popup-login .mo-openid-app-icons a.mo_btn-facebook {
        margin-top: -20px !important;
    }
    .thim-login-container .mo-openid-app-icons {
        margin-bottom: -20px !important;
    }
    /* compact the "or" divider and the email/password rows */
    #thim-popup-login .ece-login-or {
        margin: 8px 0 !important;
    }
    #thim-popup-login .ece-field-label {
        margin-bottom: 3px !important;
    }
    #thim-popup-login .thim-login .login-username,
    #thim-popup-login .thim-login .login-password,
    #thim-popup-login .thim-register form > p {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
    #thim-popup-login .thim-login .ece-login-row {
        margin: 2px 0 10px !important;
    }
    /* tighten the returning/new-user boxes and their distance from the card */
    #thim-popup-login .thim-login .ece-new-user-panel,
    .ece-haveaccount-panel {
        margin-top: 10px !important;
        padding: 10px 14px !important;
    }
    #thim-popup-login .thim-login .ece-new-user-panel .ece-login-newhere {
        margin-bottom: 6px !important;
    }
    #thim-popup-login .thim-login .ece-new-user-panel .ece-newuser-sub {
        margin-bottom: 8px !important;
    }
    #thim-popup-login .thim-login .ece-create-account-btn {
        padding: 12px 16px !important;
    }
}