/* Header ของ themes/default/layouts/app.php ใช้ร่วมกันทุกหน้า
   ระยะ/ขนาดตามเทมเพลตหลัก ต่างกันเฉพาะสี Light และ Dark */
@font-face{font-family:TemplateHeaderInter;src:url('../vendor/inter/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
#header-main-wrapper{
    --header-bg:#fff;--header-text:#1f2937;--header-nav:#4b5563;--header-muted:#6b7280;--header-icon:#6b7280;
    --header-line:#e5e7eb;--header-hover:rgba(0,0,0,.05);--header-menu-bg:#fff;
    --header-avatar-bg:#f3f4f6;--header-avatar-border:#fbcfe8;--header-avatar-text:#4b5563;
    position:fixed;top:0;left:0;z-index:50;width:100%;height:64px;padding:0 16px;
    display:flex;align-items:center;justify-content:space-between;
    font-family:TemplateHeaderInter,Inter,sans-serif;font-size:16px;line-height:24px;-webkit-font-smoothing:auto;text-rendering:auto;
    color:var(--header-text);background:var(--header-bg);border:0;border-bottom:1px solid var(--header-line);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#header-main-wrapper[data-header-theme='dark']{
    --header-bg:#151519;--header-text:#f3f4f6;--header-nav:#d1d5db;--header-muted:#9ca3af;--header-icon:#d1d5db;
    --header-line:rgba(255,255,255,.1);--header-hover:rgba(255,255,255,.08);--header-menu-bg:#1f2026;
    --header-avatar-bg:#26272d;--header-avatar-border:#4b4c56;--header-avatar-text:#f3f4f6;
}
#header-main-wrapper *,#header-main-wrapper *::before,#header-main-wrapper *::after{box-sizing:border-box}
#header-main-wrapper>div{display:flex;align-items:center;gap:16px}
#header-main-wrapper [data-header-actions='admin']{gap:4px}
#header-main-wrapper a{text-decoration:none}
#header-main-wrapper button{font-family:inherit;cursor:pointer}
#header-main-wrapper :is(#header-hamburger,#toggleBtn){
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:8px;margin:0;border:0;border-radius:4px;background:transparent;
    color:var(--header-icon);font-size:20px;line-height:28px;box-shadow:none;
}
#header-main-wrapper :is(#header-hamburger,#toggleBtn):hover,#header-main-wrapper :is(#header-profile-block,#userProfileBtn):hover{background:var(--header-hover)}
#header-main-wrapper #header-logo{display:inline-flex;align-items:center;gap:12px;min-height:32px;color:var(--header-text)}
#header-main-wrapper #header-logo img{display:block;height:28px;width:auto;object-fit:contain;transform:translateY(-3px)}
#header-main-wrapper #header-logo>span{font-size:20px;font-weight:700;color:var(--header-text);background:none;filter:none;letter-spacing:normal;line-height:28px}
#header-main-wrapper #header-navbar{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px}
#header-main-wrapper #header-navbar a{font-size:16px;font-weight:500;line-height:24px;color:var(--header-nav);white-space:nowrap;filter:none}
#header-main-wrapper #header-navbar a:hover{color:var(--header-icon)}
#header-main-wrapper #header-cart{position:relative;display:inline-block;padding:0;color:var(--header-icon);line-height:24px;filter:none}
#header-main-wrapper #header-cart>.fa-shopping-cart{font-size:20px}
#header-main-wrapper .cart-count{position:absolute;top:-8px;right:-8px;min-width:18px;padding:0 6px;border-radius:9999px;background:#f299ca;color:#020617;font-size:10px;font-weight:900;line-height:15px;text-align:center;box-shadow:none}
#header-main-wrapper .cart-count.hidden{display:none}
#header-main-wrapper #userProfile{position:relative}
#header-main-wrapper :is(#header-profile-block,#userProfileBtn){display:flex;align-items:center;gap:12px;padding:8px;border:0;border-radius:4px;cursor:pointer}
#header-main-wrapper :is(#header-profile-block,#userProfileBtn)>.text-right{display:block;text-align:right}
#header-main-wrapper #profile-user-name{font-size:14px;font-weight:600;line-height:20px;color:var(--header-text);filter:none;max-width:none}
#header-main-wrapper #profile-user-role{font-size:12px;font-weight:400;line-height:16px;color:var(--header-muted);max-width:none}
#header-main-wrapper #profile-user-icon{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--header-avatar-border);border-radius:50%;overflow:hidden;background:var(--header-avatar-bg);color:var(--header-avatar-text);font-size:18px;font-weight:700;line-height:28px;box-shadow:none}
#header-main-wrapper #profile-user-icon img{display:block;width:100%;height:100%;object-fit:cover}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu){display:none;position:absolute;top:100%;right:0;z-index:165;width:200px;max-height:calc(100dvh - 80px);overflow-y:auto;margin-top:8px;padding:0;border:1px solid var(--header-line);border-radius:8px;background:var(--header-menu-bg);color:var(--header-text);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu).show{display:block}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu)>.md\:hidden{display:none}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .dropdown-item{display:block;padding:12px 16px;font-size:16px;line-height:24px;color:var(--header-text);border-radius:0;transition:background-color .2s}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .dropdown-item:hover{background:var(--header-hover)}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .language-item{display:flex;align-items:center;justify-content:space-between}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .language-check{font-size:12px}
#header-main-wrapper #header-language-switcher>.switcher-divider{margin:4px 0;border:0;border-top:1px solid var(--header-line)}
#header-main-wrapper #language-switcher-label{padding:8px 16px;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--header-muted)}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .logout-link{color:#ef4444}
#header-main-wrapper :focus-visible{outline:2px solid var(--header-icon);outline-offset:3px}
@media(max-width:767px){
    #header-main-wrapper #header-navbar{display:none}
    #header-main-wrapper :is(#header-profile-block,#userProfileBtn)>.text-right{display:none}
    #header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu)>.md\:hidden{display:block;border-bottom:1px solid var(--header-line);margin-bottom:4px;padding-bottom:4px}
    #header-main-wrapper #header-logo>span:not(.aroi-header-wordmark){display:none}
}

/* สีของสถานะภาษาเดิมใน Header ของ Auth/Admin */
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .bg-blue-50{background:var(--header-hover);color:var(--header-text)}
#header-main-wrapper :is(#header-dropdown-menu,#dropdownMenu) .border-gray-100{border-color:var(--header-line)}
@media(min-width:640px){#header-main-wrapper [data-header-actions='admin']{gap:12px}}