/** 
  * Login Modal Styles 
  */ 
 
 /* Modal Container */ 
 .ac-esl-login-modal { 
 	 position: fixed; 
 	 top: 0; 
 	 left: 0; 
 	 width: 100%; 
 	 height: 100%; 
 	 z-index: 999999; 
 	 display: flex; 
 	 align-items: center; 
 	 justify-content: center; 
 } 
 
 .ac-esl-login-modal-overlay { 
 	 position: absolute; 
 	 top: 0; 
 	 left: 0; 
 	 width: 100%; 
 	 height: 100%; 
 	 background: rgba(0, 0, 0, 0.7); 
 	 backdrop-filter: blur(4px); 
 } 
 
 .ac-esl-login-modal-container { 
 	 position: relative; 
 	 background: #fff; 
 	 border-radius: 12px; 
 	 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
 	 max-width: 520px; 
 	 width: 90%; 
 	 max-height: 90vh; 
 	 overflow-y: auto; 
 	 z-index: 1; 
 } 
 
 .ac-esl-login-modal-close { 
 	 position: absolute; 
 	 top: 15px; 
 	 right: 15px; 
 	 background: none; 
 	 border: none; 
 	 font-size: 32px; 
 	 line-height: 1; 
 	 color: #fff; 
 	 cursor: pointer; 
 	 z-index: 10; 
 	 padding: 5px; 
 	 width: 35px; 
 	 height: 35px; 
 	 display: flex; 
 	 align-items: center; 
 	 justify-content: center; 
 	 border-radius: 50%; 
 	 transition: all 0.2s ease; 
 } 
 
 .ac-esl-login-modal-close:hover { 
 	 background: rgba(255, 255, 255, 0.2); 
 	 color: #fff; 
 } 
 
 button.ac-esl-login-modal-close.sc_button_hover_slide_left { 
 	 color: white; 
 } 
 
 /* Tabs */ 
 .ac-esl-login-modal-tabs { 
 	 display: flex; 
 	 border-bottom: 1px solid #e2e8f0; 
 	 padding: 0 28px; 
 	 margin-top: 20px; 
 	 background: transparent; 
 } 
 
 .ac-esl-login-tab { 
 	 flex: 1; 
 	 padding: 15px 20px; 
 	 background: none; 
 	 border: none; 
 	 border-bottom: 2px solid transparent; 
 	 color: #334155; 
 	 font-size: 16px; 
 	 font-weight: 600; 
 	 cursor: pointer; 
 	 transition: all 0.2s ease; 
 	 display: flex; 
 	 align-items: center; 
 	 justify-content: center; 
 	 gap: 8px; 
 } 
 
 .ac-esl-login-tab:hover { 
 	 color: #009e60; 
 } 
 
 .ac-esl-login-tab.active { 
 	 color: #009e60; 
 	 border-bottom-color: #009e60; 
 } 
 
 .ac-esl-login-tab i { 
 	 font-size: 16px; 
 } 
 
 /* Tab Content */ 
 .ac-esl-login-modal-content { 
 	 position: relative; 
 	 min-height: 300px; 
 } 
 
 .ac-esl-login-tab-content { 
 	 display: none; 
 	 padding: 0; 
 } 
 
 .ac-esl-login-tab-content.active { 
 	 display: block; 
 } 
 
 /* Body scroll lock when modal is open */ 
 body.ac-esl-modal-open { 
 	 overflow: hidden; 
 } 
 
 /* Auth Card Styles (from EduPlugin) */ 
 .ac-esl-login-modal .auth-card { 
 	 background: transparent; 
 	 border: none; 
 	 box-shadow: none; 
 	 border-radius: 0; 
 	 margin: 0; 
 	 max-width: 100%; 
 } 
 
 .ac-esl-login-modal .auth-header { 
 	 padding: 24px 28px 20px; 
 	 border-bottom: 1px solid rgba(0,0,0,0.06); 
 	 display: flex; 
 	 align-items: center; 
 	 gap: 10px; 
 } 
 
 .ac-esl-login-modal .auth-header h1 { 
 	 margin: 0; 
 	 font-size: 22px; 
 	 font-weight: 700; 
 } 
 
 .ac-esl-login-modal .auth-body { 
 	 padding: 24px 28px; 
 } 
 
 .ac-esl-login-modal .auth-footer { 
 	 padding: 20px 28px; 
 	 background: transparent; 
 	 border-top: 1px solid rgba(0,0,0,0.06); 
 } 
 
 .ac-esl-login-modal .field-row { 
 	 margin-bottom: 14px; 
 } 
 
 .ac-esl-login-modal .field-row .label { 
 	 display: block; 
 	 margin-bottom: 6px; 
 	 font-weight: 600; 
 	 color: #334155; 
 } 
 
 .ac-esl-login-modal .input-group { 
 	 position: relative; 
 	 display: flex; 
 	 align-items: center; 
 } 
 
 .ac-esl-login-modal .input-group > i { 
 	 position: absolute; 
 	 left: 12px; 
 	 color: #8a8f98; 
 	 font-size: 14px; 
 	 z-index: 1; 
 } 
 
 .ac-esl-login-modal .input-group > input { 
 	 width: 100%; 
 	 padding: 12px 12px 12px 38px; 
 	 border: 1px solid #e2e8f0; 
 	 border-radius: 8px; 
 	 outline: none; 
 	 transition: box-shadow .2s, border-color .2s; 
 	 font-size: 16px; 
 } 
 
 .ac-esl-login-modal .input-group > input:focus { 
 	 border-color: #fff; 
 	 box-shadow: 0 0 0 4px rgba(255,255,255,0.15); 
 } 
 
 .ac-esl-login-modal .btn.modern-primary { 
 	 background: #fff; 
 	 color: #000; 
 	 border: none; 
 	 padding: 12px 16px; 
 	 border-radius: 8px; 
 	 cursor: pointer; 
 	 width: 100%; 
 	 font-weight: 600; 
 	 font-size: 16px; 
 	 transition: background 0.2s ease; 
 } 
 
 .ac-esl-login-modal .btn.modern-primary:hover { 
 	 background: #f0f0f0; 
 } 
 
 .ac-esl-login-modal .btn.modern-secondary { 
 	 background: #1e293b; 
 	 color: #fff; 
 	 border: none; 
 	 padding: 10px 14px; 
 	 border-radius: 8px; 
 	 cursor: pointer; 
 	 font-weight: 600; 
 	 text-decoration: none; 
 	 display: inline-block; 
 	 transition: background 0.2s ease; 
 } 
 
 .ac-esl-login-modal .btn.modern-secondary:hover { 
 	 background: #0f172a; 
 } 
 
 .ac-esl-login-modal .btn.link { 
 	 background: none; 
 	 border: none; 
 	 color: #2b6cb0; 
 	 padding: 0; 
 	 font-size: 14px; 
 	 cursor: pointer; 
 	 text-decoration: none; 
 } 
 
 .ac-esl-login-modal .btn.link:hover { 
 	 text-decoration: underline; 
 } 
 
 .ac-esl-login-modal .auth-cta { 
 	 display: flex; 
 	 gap: 12px; 
 	 align-items: center; 
 	 flex-wrap: wrap; 
 } 
 
 .ac-esl-login-modal .auth-cta .spacer { 
 	 flex: 1; 
 } 
 
 .ac-esl-login-modal .note { 
 	 display: flex; 
 	 align-items: flex-start; 
 	 gap: 8px; 
 	 padding: 12px; 
 	 background: #f0f9ff; 
 	 border-radius: 8px; 
 	 color: #0369a1; 
 	 font-size: 14px; 
 } 
 
 .ac-esl-login-modal .note i { 
 	 margin-top: 2px; 
 } 
 
 .ac-esl-login-modal .mr6 { 
 	 margin-right: 6px; 
 } 
 
 .ac-esl-login-modal .mb10 { 
 	 margin-bottom: 10px; 
 } 
 
 /* Header Button Styles */ 
 .sc_layouts_login_button { 
 	 margin-left: 15px; 
 } 
 
 .sc_layouts_login_button .sc_layouts_item_link { 
 	 padding: 8px 16px; 
 	 background: #0d4bc1; 
 	 color: #fff; 
 	 border-radius: 6px; 
 	 text-decoration: none; 
 	 font-weight: 600; 
 	 transition: background 0.2s ease; 
 } 
 
 .sc_layouts_login_button .sc_layouts_item_link:hover { 
 	 background: #0a3a9a; 
 	 color: #fff; 
 } 
 
 /* Login Menu Button Background Styling */ 
 .sc_layouts_login_button_menu_item a.ac-esl-login-button-bg { 
     background-color: #0073aa !important; 
     color: #ffffff !important; 
     padding: 8px 16px !important; 
     border-radius: 4px !important; 
     text-decoration: none !important; 
     display: inline-block !important; 
     transition: background-color 0.3s ease !important; 
     font-weight: 500 !important; 
 } 
 
 .sc_layouts_login_button_menu_item a.ac-esl-login-button-bg:hover { 
     background-color: #005a87 !important; 
     color: #ffffff !important; 
 } 
 
 .sc_layouts_login_button_menu_item a.ac-esl-login-button-bg span { 
     color: #ffffff !important; 
 } 
 
 /* Responsive */ 
 @media (max-width: 768px) { 
 	 .ac-esl-login-modal-container { 
 	 	 width: 95%; 
 	 	 max-height: 95vh; 
 	 } 
 
 	 .ac-esl-login-modal .auth-header, 
 	 .ac-esl-login-modal .auth-body, 
 	 .ac-esl-login-modal .auth-footer { 
 	 	 padding: 20px 16px; 
 	 } 
 
 	 .ac-esl-login-modal-tabs { 
 	 	 padding: 0 16px; 
 	 } 
 
 	 .ac-esl-login-tab { 
 	 	 padding: 12px 15px; 
 	 	 font-size: 14px; 
 	 } 
 
 	 .sc_layouts_login_button { 
 	 	 margin-left: 10px; 
 	 } 
 
 	 .sc_layouts_login_button .sc_layouts_item_link { 
 	 	 padding: 6px 12px; 
 	 	 font-size: 14px; 
 	 } 
 } 
 
 /* Standalone plugin header menu - ensure text is visible (override theme) */ 
 .ac-esl-header-menu, 
 .ac-esl-header-menu .sc_layouts_menu_nav, 
 .ac-esl-header-menu .menu-item, 
 .ac-esl-header-menu .menu-item a, 
 .ac-esl-header-menu .menu-item a span { 
 	 font-size: 14px !important; 
 	 opacity: 1 !important; 
 	 visibility: visible !important; 
 	 text-indent: 0 !important; 
 	 overflow: visible !important; 
 } 
 .ac-esl-header-menu .menu-item { 
 	 width: 100%; 
 } 
 .ac-esl-header-menu .menu-item a { 
 	 display: inline-flex !important; 
 	 align-items: center !important; 
 	 width: auto !important; 
 	 box-sizing: border-box !important; 
 	 padding: 8px 12px !important; 
 	 text-decoration: none !important; 
 	 color: #1f2937 !important; 
 	 border-radius: 6px !important; 
 	 transition: background 0.2s ease !important; 
 } 
 .ac-esl-header-menu .menu-item a:hover { 
 	 color: #111827 !important; 
 	 background: rgba(0,0,0,0.06) !important; 
 } 
 .ac-esl-header-menu ul.sc_layouts_menu_nav { 
 	 font-size: 14px !important; 
 	 display: flex !important; 
 	 align-items: center !important; 
 	 gap: 5px !important; 
 } 
 
 /* Standalone plugin header menu - profile dropdown */ 
 .ac-esl-header-menu .ac-esl-profile-dropdown { 
 	 display: none; 
 	 position: absolute !important; 
 	 top: 100% !important; 
	 right: 0 !important;
	 left: auto !important;
    transform: none !important;
 	 min-width: 220px !important; 
 	 box-sizing: border-box !important; 
 	 background: #fff !important; 
 	 border: 1px solid #e5e7eb !important; 
 	 border-radius: 10px !important; 
 	 box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
 	 padding: 6px 0 !important; 
 	 z-index: 99999 !important; 
 	 margin-top: 8px !important; 
 	 overflow: hidden !important; /* Clip hover backgrounds at rounded corners */ 
 } 
 .ac-esl-header-menu .menu-item-has-children.ac-esl-dropdown-open .ac-esl-profile-dropdown { 
 	 display: block !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .menu-item { 
 	 width: 100% !important; 
 	 margin: 0 !important; 
 	 padding: 0 !important; 
 	 display: block !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .menu-item a { 
 	 display: block !important; 
 	 width: 100% !important; 
 	 box-sizing: border-box !important; 
 	 padding: 10px 20px !important; 
 	 color: #374151 !important; 
 	 text-decoration: none !important; 
 	 font-size: 14px !important; 
 	 white-space: nowrap !important; 
 	 background: transparent !important; 
 	 border-radius: 0 !important; /* No rounded corners for list items to allow full-width hover */ 
 	 transition: background 0.2s ease !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .menu-item a:hover { 
 	 background: #f8fafc !important; 
 	 color: #111827 !important; 
 } 
 
 /* Sub-menu styling within the profile dropdown - Accordion style */ 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-parent { 
 	 position: relative !important; 
 	 width: 100% !important; 
 	 overflow: visible !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-toggle { 
 	 display: flex !important; 
 	 justify-content: space-between !important; 
 	 align-items: center !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-parent .ac-esl-sub-menu { 
 	 display: none !important; /* Force hide by default */ 
 	 position: static !important; 
 	 width: 100% !important; 
 	 background: #fcfdfe !important; /* Very subtle different background for sub-menu area */ 
 	 border: none !important; 
 	 padding: 0 !important; 
 	 margin: 0 !important; 
 	 list-style: none !important; 
 	 box-shadow: none !important; 
 	 visibility: visible !important; 
 	 opacity: 1 !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-parent.ac-esl-submenu-open > .ac-esl-sub-menu { 
 	 display: block !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-sub-menu .menu-item { 
 	 display: block !important; 
 	 width: 100% !important; 
 	 margin: 0 !important; 
 	 padding: 0 !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-sub-menu .menu-item a { 
 	 padding: 10px 20px 10px 36px !important; /* Indent sub-menu items */ 
 	 font-size: 13px !important; 
 	 color: #64748b !important; 
 	 width: 100% !important; 
 	 display: block !important; 
 	 box-sizing: border-box !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-sub-menu .menu-item a:hover { 
 	 color: #0f172a !important; 
 	 background: #f1f5f9 !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-toggle .dropdown-arrow, 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-toggle i, 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-toggle::after { 
 	 display: none !important; /* Hide ALL icons on the Profile toggle to avoid double icons */ 
 } 
 /* Re-add a single clean icon if needed, or let the theme handle it. 
    Since the user sees double, we'll strip them all and add one strictly controlled one */ 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-toggle span::after { 
 	 content: "\f078"; 
 	 font-family: "Font Awesome 6 Free"; 
 	 font-weight: 900; 
 	 font-size: 10px; 
 	 margin-left: 8px; 
 	 display: inline-block; 
 	 transition: transform 0.2s ease; 
 	 color: #94a3b8; 
 } 
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-submenu-parent.ac-esl-submenu-open .ac-esl-submenu-toggle span::after { 
 	 transform: rotate(180deg); 
 } 
/* Standalone plugin header menu - profile toggle (Desktop Pill) */ 
 .ac-esl-header-menu .ac-esl-profile-menu { 
 	 position: relative; 
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     background: #ffffff !important;
     border: 1.5px solid #e2e8f0 !important;
     border-radius: 9999px !important;
     padding: 4px 12px 4px 6px !important;
     height: 40px !important;
     transition: all 0.2s ease !important;
 } 
 .ac-esl-header-menu .ac-esl-profile-menu:hover {
     border-color: #6B8E23 !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
 }
 .ac-esl-header-menu .ac-esl-profile-toggle { 
 	 display: inline-flex !important; 
 	 align-items: center !important; 
 	 gap: 8px !important; 
 	 width: auto !important; 
 	 box-sizing: border-box !important; 
 	 padding: 0 !important;
     text-decoration: none !important;
     color: #1e293b !important;
 } 
 .ac-esl-header-menu .ac-esl-profile-toggle:hover { 
 	 background: transparent !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-name { 
 	 font-weight: 500; 
 }
 .ac-esl-header-menu .ac-esl-profile-toggle-main {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
     flex: 1 1 auto;
 }
 .ac-esl-header-menu .ac-esl-profile-chevron {
     display: none;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: #64748b;
     font-size: 12px;
 }
 /* Mobile-only profile card at top of dropdown (desktop keeps compact list) */
 .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-profile-dropdown-hero {
     display: none !important;
 }
 .ac-esl-header-menu .ac-esl-profile-sep {
     display: inline-block;
     width: 1px;
     height: 18px;
     margin: 0 4px 0 0;
     background: #cbd5e1;
     overflow: hidden;
     text-indent: -9999px;
     flex-shrink: 0;
 }
 
 /* Profile avatar - ensure image/initials are visible */ 
 .ac-esl-header-menu .ac-esl-profile-avatar { 
 	 display: inline-flex !important; 
 	 align-items: center !important; 
 	 justify-content: center !important; 
 	 width: 32px !important; 
 	 height: 32px !important; 
 	 min-width: 32px !important; 
 	 flex-shrink: 0 !important; 
 	 overflow: hidden !important; 
 	 border-radius: 50% !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-avatar img { 
 	 width: 100% !important; 
 	 height: 100% !important; 
 	 object-fit: cover !important; 
 	 display: block !important; 
 } 
 .ac-esl-header-menu .ac-esl-profile-avatar-initials { 
 	 background: #e5e7eb !important; 
 	 color: #374151 !important; 
 	 font-size: 14px !important; 
 	 font-weight: 600 !important; 
 } 
 
 /* 
    REFINED MOBILE/TABLET PROFILE BAR LAYOUT 
    Full-width Green Bar Style as per User Image 
 */ 
 @media (max-width: 1023px) { 
   /* IMPORTANT: Don't touch the theme mobile menu globally.
      Only style our plugin header elements to avoid forcing menus open outside dashboard. */
   body .ac-esl-header-menu,
   body .ac-esl-header-menu .sc_layouts_menu,
   body .ac-esl-header-menu .sc_layouts_menu_nav,
   body .ac-esl-header-user-wrap,
   body .account-links-container-mobile {
       display: flex !important;
       flex-direction: column !important;
       align-items: center !important;
       justify-content: center !important;
       width: 100% !important;
       max-width: 100% !important;
       text-align: center !important;
       float: none !important;
       margin: 0 auto !important;
       padding: 0 !important;
       border: none !important;
       background: transparent !important;
       overflow: visible !important;
       position: relative !important;
   }

    /* Profile pill row: override ID-heavy .menu-item rules (was forcing column + clipping the name) */
    body #mobile-primary-navigation .menu-item.ac-esl-profile-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 2. The Green Pill Container - MATCHING USER IMAGE */
    body .ac-esl-profile-menu {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 240px !important; 
        max-width: 90% !important;
        margin: 15px auto !important;
        padding: 8px 14px !important;
        background: #ffffff !important; /* WHITE PILL BG */
        border: solid 3px #16a34a !important; /* USER REQUESTED BORDER COLOR */
        border-radius: 50px !important; /* USER REQUESTED RADIUS */
        overflow: visible !important;
        position: relative !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        z-index: 10000 !important;
        min-height: 48px !important;
        height: auto !important;
    }

    /* 3. The Toggle Link (Avatar | Name) */
    body .ac-esl-profile-toggle,
    body .ac-esl-profile-toggle.mobile-menu-parent-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 2px 4px 2px 2px !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: auto !important;
        color: #4b4646 !important; /* DARK TEXT */
        text-decoration: none !important;
        background: transparent !important;
        border: none !important; /* Remove individual border as it's on parent */
        box-sizing: border-box !important;
    }

    body #mobile-primary-navigation .ac-esl-profile-toggle-main,
    body .ac-esl-header-menu .ac-esl-profile-toggle-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 10px !important;
    }

    body #mobile-primary-navigation .ac-esl-profile-chevron,
    body .ac-esl-header-menu .ac-esl-profile-chevron {
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }

    body .ac-esl-profile-avatar {
        width: 34px !important;
        height: 34px !important;
        background: #f1f5f9 !important;
        border-radius: 50% !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    body .ac-esl-profile-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body .ac-esl-profile-sep { 
        display: inline-block !important; 
        width: 1px !important; 
        height: 20px !important; 
        background: #cbd5e1 !important; /* DARKER SEPARATOR */ 
        margin: 0 8px !important; 
        text-indent: -9999px !important; 
        flex-shrink: 0 !important;
    }

    body .ac-esl-profile-name { 
        font-size: 16px !important; 
        font-weight: 700 !important; 
        color: #4b4646 !important; /* UPDATED FROM USER REQUEST */ 
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* 4. Keep a single arrow: hide theme-injected extra toggle button on mobile */ 
    body .ac-esl-profile-menu > button { 
        display: none !important; 
        align-items: center !important; 
        justify-content: center !important; 
        background: transparent !important; 
        border: none !important; 
        box-shadow: none !important;
        outline: none !important;
        color: #4b4646 !important; 
        margin-left: 8px !important; 
        padding: 0 !important; 
        width: 24px !important; 
        height: 24px !important; 
        cursor: pointer !important;
        flex-shrink: 0 !important;
    } 
 
    body .ac-esl-profile-menu > button svg,
    body .ac-esl-profile-menu > button i { 
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important; 
        color: #4b4646 !important; 
        stroke-width: 3 !important;
    }

    /* 5. UNIVERSAL DROPDOWN CENTERING - FOR ALL MOBILE/TABLET SCREENS */
    body .ac-esl-profile-menu .ac-esl-profile-dropdown,
    body .ac-esl-profile-menu .sub-menu.ac-esl-profile-dropdown,
    body #mobile-primary-navigation .ac-esl-profile-menu .ac-esl-profile-dropdown,
    body #mobile-primary-navigation .ac-esl-profile-menu .sub-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 50% !important;
        right: auto !important; 
        transform: translateX(-50%) !important;
        width: 100% !important;
        min-width: 300px !important;
        max-width: 90vw !important;
        background: #ffffff !important;
        border: 2px solid #16a34a !important;
        border-radius: 20px !important;
        box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
        z-index: 10001 !important;
        padding: 15px 0 !important;
        margin: 0 !important;
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        list-style: none !important;
    }

    /* Mobile nav fix: render dropdown in flow to avoid clipping behind nav containers */
    body #mobile-primary-navigation .ac-esl-profile-menu .ac-esl-profile-dropdown {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        border-radius: 16px !important;
        z-index: auto !important;
    }

    /* Show dropdown when active */
    body .ac-esl-profile-menu.ac-esl-dropdown-open .ac-esl-profile-dropdown,
    body #mobile-primary-navigation .ac-esl-profile-menu.ac-esl-dropdown-open .ac-esl-profile-dropdown,
    body #mobile-primary-navigation .ac-esl-profile-menu.ac-esl-dropdown-open .ac-esl-profile-dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    body .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-profile-dropdown-hero {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #e2e8f0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .ac-esl-header-menu .ac-esl-profile-dropdown .ac-esl-profile-dropdown-hero .ac-esl-dropdown-hero-inner {
        text-align: center !important;
        padding: 0 12px 16px 12px !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        background: #16a34a !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        padding: 12px 16px !important;
        margin: -15px -2px 16px -2px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-avatar {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 72px !important;
        height: 72px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        margin: 0 auto 12px auto !important;
        background: #ecfdf5 !important;
        border: 3px solid #bbf7d0 !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-avatar-initials {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #15803d !important;
        line-height: 1 !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-name {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
        white-space: normal !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-role {
        font-weight: 600 !important;
        color: #16a34a !important;
        white-space: nowrap !important;
    }

    body .ac-esl-header-menu .ac-esl-dropdown-hero-id {
        font-size: 14px !important;
        color: #64748b !important;
        font-weight: 500 !important;
    }
}

/* 
   Specific Tablet Fixes (768px - 1023px)
*/
@media (min-width: 768px) and (max-width: 1023px) {
    /* Improve Tablet Header Layout */
    body #mobile-primary-navigation .rounded-2xl {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 30px !important;
    }

    body .ac-esl-profile-menu {
        min-width: 280px !important;
        min-height: 52px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    body .ac-esl-profile-name {
        font-size: 18px !important;
    }

    body .ac-esl-profile-menu .ac-esl-profile-dropdown {
        min-width: 380px !important;
        top: calc(100% + 12px) !important;
    }
}

/* Common Mobile/Tablet styles to clean up and avoid repetition */
@media (max-width: 1023px) {
    /* Submenu Items - PERFECTLY CENTERED */
    body .ac-esl-profile-dropdown .menu-item:not(.ac-esl-profile-dropdown-hero) {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative !important;
    }

    body .ac-esl-profile-dropdown .menu-item:not(.ac-esl-profile-dropdown-hero):last-child {
        border-bottom: none !important;
    }

    body .ac-esl-profile-dropdown .menu-item a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 16px 40px !important; /* Extra horizontal padding for safety */
        color: #4b4646 !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    /* Nested Submenu Toggle Icon - Move to right absolute to keep text centered */
    body .ac-esl-profile-dropdown .menu-item > button {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        width: 30px !important;
        height: 30px !important;
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
    }

    body .ac-esl-profile-dropdown .menu-item a:hover {
        background: #f8fafc !important;
        color: #16a34a !important;
    }

    /* Nested Submenu styling */
    body .ac-esl-profile-dropdown .ac-esl-sub-menu {
        display: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fcfcfc !important;
        list-style: none !important;
    }

    body .ac-esl-profile-dropdown .menu-item.is-open > .ac-esl-sub-menu,
    body .ac-esl-profile-dropdown .menu-item.open > .ac-esl-sub-menu {
        display: block !important;
    }

    body .ac-esl-profile-dropdown .ac-esl-sub-menu .menu-item a {
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: #f8fafc !important;
    }
}

    /* 9. Centering the Search Form in Mobile Menu */
    body #mobile-primary-navigation form.search-form {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 1.5rem auto !important;
        display: block !important;
    }

    body #mobile-primary-navigation form.search-form input.search-field {
        width: 100% !important;
        height: 48px !important;
        border-radius: 9999px !important;
        padding: 0 20px !important;
        border: 1px solid #e2e8f0 !important;
        text-align: center !important;
    }

    /* 10. Centering the Mobile Login/Register Buttons */
    body .account-links-container-mobile {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin-top: 1rem !important;
        overflow: visible !important;
    }

    body .ac-esl-header-user-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        overflow: visible !important;
    }

    body .ac-esl-header-user-wrap a.btn {
        width: auto !important;
        min-width: 180px !important;
        padding: 12px 24px !important;
        border-radius: 9999px !important;
        text-align: center !important;
        background: #6B8E23 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }