/* ===== Navbar (แยกไฟล์) ===== */
.site-nav{position:sticky;top:0;z-index:1200;background:#121519;backdrop-filter:blur(8px);border-bottom:2px solid #1f2124;transition:box-shadow .25s}
.site-nav.scrolled{box-shadow:0 8px 22px rgba(0,0,0,.45)}
.nav-inner{max-width:72rem;margin:0 auto;padding:0 1.25rem;height:4.2rem;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;min-width:0;max-width:calc(100% - 3.6rem)}
.nav-logo{display:block;width:10rem;height:auto;max-width:100%;max-height:3.3rem;object-fit:contain}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nav-brand:hover .nav-logo{animation:navLogoShake .45s ease-in-out}
}
@keyframes navLogoShake{
  0%,100%{transform:translateX(0) rotate(0)}
  20%,60%{transform:translateX(-2px) rotate(-2deg)}
  40%,80%{transform:translateX(2px) rotate(2deg)}
}

.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a{position:relative;padding:.5rem .95rem;color:#b4b8bf;font-size:.95rem;transition:color .2s}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.2rem;height:3px;background:#e0a526;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:not(.nav-cta):hover,.nav-links a.active{color:#fff}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{margin-left:.7rem;background:#e0a526;color:#1f2124!important;font-weight:600;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .2s,transform .15s}
.nav-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}

.nav-toggle{display:none;width:2.6rem;height:2.6rem;border:2px solid #4a4f56;background:#383c41;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:1.2rem;height:2px;background:#d3d5d9;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{display:none}

@media (max-width:768px){
  .nav-logo{width:9rem;max-height:2.9rem}
  .nav-toggle{flex-shrink:0}
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:4.2rem;right:0;bottom:0;width:min(18rem,82vw);flex-direction:column;align-items:stretch;gap:.3rem;padding:1.25rem;background:#2e3135;border-left:3px solid #e0a526;transform:translateX(105%);visibility:hidden;pointer-events:none;overflow-y:auto;transition:transform .32s cubic-bezier(.2,.9,.3,1),visibility .32s;z-index:1210}
  .nav-links.open{transform:none;visibility:visible;pointer-events:auto}
  .nav-links a{padding:.85rem 1rem;background:#383c41}
  .nav-links a:not(.nav-cta)::after{display:none}
  .nav-links a.active{background:#4a4f56}
  .nav-cta{margin:.6rem 0 0;text-align:center}
  .nav-links.open a{animation:navin .35s both}
  .nav-links.open a:nth-child(2){animation-delay:.05s}.nav-links.open a:nth-child(3){animation-delay:.1s}.nav-links.open a:nth-child(4){animation-delay:.15s}
  @keyframes navin{from{opacity:0;transform:translateX(24px)}}
  .nav-backdrop{position:fixed;inset:4.2rem 0 0 0;background:rgba(20,21,23,.65);z-index:1205;opacity:0;pointer-events:none;display:block;transition:opacity .3s}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.nav-links,.nav-toggle span,.nav-backdrop,.nav-logo{transition:none}.nav-links.open a{animation:none}}
.nav-logout{padding:.5rem .7rem;background:none;border:0;color:#b4b8bf;font:inherit;font-size:.85rem;cursor:pointer}
.nav-logout:hover{color:#fff}
@media(max-width:768px){.nav-links form{margin-top:.3rem}.nav-logout{padding:.85rem 1rem;width:100%;text-align:left;background:#383c41}}
/* Member navigation and accessible disclosure menus. */
.nav-links{min-width:0}
.nav-dropdown{position:relative;min-width:0}
.nav-dropdown-toggle{display:flex;align-items:center;gap:10px;min-height:40px;padding:.5rem .95rem;border:0;background:transparent;color:#b4b8bf;font:inherit;font-size:.95rem;cursor:pointer;max-width:100%}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle.active,.nav-dropdown-toggle[aria-expanded="true"]{color:#fff}
.nav-chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;flex-shrink:0}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron{transform:translateY(2px) rotate(225deg)}
.nav-email{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account{margin-left:12px;border-left:1px solid #4a4f56;padding-left:12px}
.nav-account>.nav-dropdown-toggle{color:var(--hz)}
.nav-dropdown-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:185px;padding:6px;background:#2e3135;border:1px solid #4a4f56;border-top:2px solid var(--hz);box-shadow:5px 5px 0 rgba(20,22,25,.55);z-index:1220}
.nav-dropdown-panel[hidden]{display:none}
.nav-account .nav-dropdown-panel{left:auto;right:0}
.nav-dropdown-panel a,.nav-dropdown-panel .nav-logout{display:block;width:100%;padding:11px 14px;background:transparent;text-align:left;font-size:14px;color:#b4b8bf;white-space:nowrap}
.nav-dropdown-panel a::after{display:none!important}
.nav-dropdown-panel a:hover,.nav-dropdown-panel .nav-logout:hover{background:#383c41;color:var(--hz)}
.nav-dropdown-panel form{margin:0;border-top:1px solid #4a4f56}
.nav-dropdown-panel .nav-logout:disabled{opacity:.5;cursor:wait}
@media(max-width:1100px){
  .site-nav{backdrop-filter:none}
  .nav-toggle{display:flex;flex-shrink:0}
  .nav-links{position:fixed;top:4.2rem;right:0;bottom:auto;max-height:calc(100dvh - 4.2rem);width:min(20rem,86vw);display:flex;flex-direction:column;align-items:stretch;gap:.3rem;padding:1.25rem;background:#2e3135;border-left:3px solid var(--hz);transform:translateX(105%);visibility:hidden;pointer-events:none;overflow-y:auto;transition:transform .32s,visibility .32s;z-index:1210}
  .nav-links.open{transform:none;visibility:visible;pointer-events:auto}
  .nav-links>a,.nav-dropdown-toggle{width:100%;padding:.85rem 1rem;background:#383c41}
  .nav-links>a::after{display:none!important}
  .nav-cta{margin:.6rem 0 0;text-align:center}
  .nav-account{margin:8px 0 0;padding:8px 0 0;border-left:0;border-top:1px solid #4a4f56}
  .nav-email{max-width:100%;min-width:0;flex:1}
  .nav-dropdown-panel{position:static;min-width:0;width:100%;margin-top:4px;box-shadow:none}
  .nav-dropdown-panel a,.nav-dropdown-panel .nav-logout{white-space:normal}
  .nav-backdrop{position:fixed;inset:4.2rem 0 0;background:rgba(20,21,23,.65);z-index:1205;opacity:0;pointer-events:none;display:block;transition:opacity .3s}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.nav-links,.nav-chevron{transition:none}}
/* Larger labels and Font Awesome icons. Icons are hosted locally. */
.nav-links>a,.nav-dropdown-toggle{font-size:16px;font-weight:600;line-height:1.5;white-space:nowrap}
.nav-links>a{display:flex;align-items:center;justify-content:center;gap:8px;padding-inline:12px}
.nav-dropdown-toggle{gap:8px;padding-inline:12px}
.nav-links :is(.fa-solid,.fa-brands){width:18px;text-align:center;flex-shrink:0;font-size:15px}
.nav-dropdown-panel a,.nav-dropdown-panel .nav-logout{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;line-height:1.5}
.nav-dropdown-panel{min-width:210px}
.nav-account{margin-left:8px;padding-left:8px}
.nav-account>.nav-dropdown-toggle{border-radius:3px;transition:background .25s,color .25s,box-shadow .25s}
.nav-account-icon{transition:transform .3s}
.nav-email{max-width:190px;transition:text-shadow .25s}
@media(min-width:1101px){.nav-dropdown-panel::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}}
@media(hover:hover) and (pointer:fine){
  .nav-account:hover>.nav-dropdown-toggle{background:rgba(224,165,38,.08);box-shadow:inset 0 -2px 0 rgba(224,165,38,.7)}
  .nav-account:hover .nav-email{text-shadow:0 0 14px rgba(224,165,38,.4)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nav-links :is(a,button):hover>:is(.fa-solid,.fa-brands){animation:navIconBounce .42s ease-out 1}
  .nav-account:hover .nav-email{animation:navEmailLift .35s ease-out}
  .nav-dropdown-panel:not([hidden]){animation:navDropdownIn .18s ease-out}
}
@keyframes navEmailLift{0%{transform:translateY(0)}45%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes navIconBounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.08)}75%{transform:translateY(1px) scale(.98)}}
@keyframes navDropdownIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.nav-links>a{justify-content:flex-start}.nav-email{max-width:100%}.nav-dropdown-panel{min-width:0}.nav-account{margin:8px 0 0;padding:8px 0 0}}
@media(prefers-reduced-motion:reduce){.nav-account>.nav-dropdown-toggle,.nav-account-icon,.nav-email{transition:none}.nav-account:hover .nav-account-icon{transform:none}}
/* Three balanced columns keep the navigation centered independently of the account width. */
.nav-menu{display:flex;align-items:center;gap:.2rem;min-width:0}
.nav-menu>a{display:flex;align-items:center;justify-content:center;gap:8px;padding:.5rem 12px;font-size:16px;font-weight:600;line-height:1.5;white-space:nowrap}
@media(min-width:1101px){
  .nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
  .nav-brand{grid-column:1;grid-row:1;justify-self:start;max-width:100%}
  .nav-links{display:contents}
  .nav-menu{grid-column:2;grid-row:1;justify-self:center}
  .nav-account,.nav-links>.nav-cta{grid-column:3;grid-row:1;justify-self:end;min-width:0;max-width:100%}
  .nav-account .nav-email{min-width:0}
}
@media(max-width:1100px){
  .nav-menu{flex-direction:column;align-items:stretch;width:100%;gap:.3rem}
  .nav-menu>a{justify-content:flex-start;padding:.85rem 1rem;background:#383c41}
  .nav-menu>a::after{display:none!important}
}
/* Current account balances, above account actions. */
.nav-account .nav-dropdown-panel{min-width:240px}
.nav-balances{padding:10px 12px 14px;margin-bottom:5px;border-bottom:1px solid #4a4f56}
.nav-balances-title{font-size:12px;font-weight:400;color:#8d929b;margin-bottom:11px}
.nav-balances dl{display:grid;gap:10px;margin:0}
.nav-balance-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0}
.nav-balance-row dt{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:#b4b8bf}
.nav-balance-row dt .fa-solid{font-size:12px;color:var(--hz)}
.nav-currency-img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.nav-balance-row dd{margin:0;color:#e8e9ec;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.nav-balance-message{font-size:11px;font-weight:300;line-height:1.6;color:#8d929b;margin-top:12px}
@media(max-width:1100px){.nav-account .nav-dropdown-panel{min-width:0}}