/* =====================================================================
   HEADER · MEGA MENUS · MOBILE MENU  (V108)
   Logical properties throughout (inline-start/end), so Persian (RTL) and
   English (LTR) are each laid out on purpose, not mirrored by accident.
   ===================================================================== */
:root { --hx-h: 72px; --hx-ease: cubic-bezier(.2, .7, .2, 1); --hx-surface: rgba(13, 14, 19, .94); --hx-line: rgba(255, 255, 255, .08); }

/* ---------- the bar ---------- */
.topbar.hx {
  position: sticky; top: 0; z-index: 90; height: auto; padding: 0; gap: 0; display: block;
  background: rgba(8, 9, 12, .72); border-bottom: 1px solid transparent;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.scrolled .topbar.hx { background: rgba(8, 9, 12, .88); border-bottom-color: var(--hx-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hx-inner {
  position: relative; max-width: 1320px; height: var(--hx-h); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
/* Sized by HEIGHT: any logo proportions display undistorted. The PNG's own
   transparent margin is kept (never cropped), so the box is a little taller. */
.hx .brand img { height: 56px; width: auto; max-width: 200px; display: block; object-fit: contain; }

/* ---------- centre navigation ---------- */
.hx-nav { justify-self: center; }
.hx-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.hx-list > li { position: relative; }
.hx-list > li:has(.hx-panel-xl), .hx-list > li:has(.hx-panel-lg) { position: static; }   /* big panels centre under the bar */
.hx-top {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 11px;
  font: inherit; font-size: 14px; font-weight: 600; color: #b9bdc9; background: none; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap; position: relative; transition: color .2s ease, background .2s ease;
}
.hx-top:hover, .hx-has.is-open > .hx-top { color: #fff; background: rgba(255, 255, 255, .05); }
.hx-top.is-cur { color: #fff; }
.hx-top.is-cur::after { content: ''; position: absolute; bottom: 3px; inset-inline-start: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); translate: -50% 0; }
[dir="rtl"] .hx-top.is-cur::after { translate: 50% 0; }
.hx-top:focus-visible, .hx-btn-ghost:focus-visible, .hx-burger:focus-visible, .hx-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hx-chev { width: 12px; height: 12px; opacity: .7; transition: transform .25s var(--hx-ease); }
.hx-has.is-open > button .hx-chev { transform: rotate(180deg); }

/* ---------- panels ---------- */
.hx-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 70;
  min-width: 300px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px) scale(.985); transform-origin: top center;
  transition: opacity .18s ease, transform .22s var(--hx-ease), visibility 0s linear .22s;
}
.hx-panel-xl, .hx-panel-lg { inset-inline-start: 50%; translate: -50% 0; }
[dir="rtl"] .hx-panel-xl, [dir="rtl"] .hx-panel-lg { translate: 50% 0; }
.hx-panel-xl { width: min(1060px, 94vw); top: calc(var(--hx-h) - 4px); }
.hx-panel-lg { width: min(780px, 94vw); top: calc(var(--hx-h) - 4px); }
.hx-panel-sm { min-width: 220px; }
.hx-panel-end { inset-inline-start: auto; inset-inline-end: 0; }
/* The forgiving bridge: an invisible strip up to the trigger, so the pointer never "falls" out. */
.hx-panel::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 18px; }
.hx-has.is-open > .hx-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .18s ease, transform .24s var(--hx-ease), visibility 0s; }
.hx-panel-in {
  /* Opaque: a menu must never compete with the page behind it. */
  background: linear-gradient(180deg, #121319 0%, #0d0e13 100%); border: 1px solid var(--hx-line); border-radius: 18px; padding: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05) inset;
}
.hx-cols { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 6px 14px; }
.hx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.hx-col h3 { margin: 6px 12px 8px; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0; opacity: .9; }
[dir="ltr"] .hx-col h3 { text-transform: uppercase; letter-spacing: .08em; }
.hx-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #e6e8ee;
  transition: background .18s ease, transform .18s ease;
}
.hx-link:hover, .hx-link:focus-visible { background: rgba(255, 255, 255, .055); outline: none; }
.hx-link:focus-visible { box-shadow: 0 0 0 2px rgba(255, 201, 40, .6) inset; }
.hx-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.hx-link:not(:has(.hx-ico)) { grid-template-columns: 1fr auto; }
.hx-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-txt b { font-size: 13.5px; font-weight: 650; line-height: 1.5; }
.hx-txt small { font-size: 11.5px; color: #8b90a0; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-meta { font-size: 11px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.hx-free { color: #7ee6a0; }
.hx-note { font-size: 12px; color: #8b90a0; line-height: 1.9; margin: 6px 12px 10px; }
.hx-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--hx-line); font-size: 12px; color: #8b90a0; }
.hx-foot a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hx-foot a:hover .hx-arrow { transform: translateX(3px); }
[dir="rtl"] .hx-arrow { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .hx-foot a:hover .hx-arrow { transform: scaleX(-1) translateX(3px); }
.hx-arrow { display: inline-block; transition: transform .2s ease; }

/* ---------- actions ---------- */
.hx-actions { display: flex; align-items: center; gap: 10px; }
.hx-actions .lang-toggle { margin: 0; }
.hx-btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 11px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #d6d9e0; background: none; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hx-btn-ghost:hover { color: #fff; border-color: var(--hx-line); }
.hx-cta { height: 40px; padding: 0 18px !important; border-radius: 12px !important; font-size: 13.5px !important; display: inline-flex; align-items: center; white-space: nowrap; }
.hx-account { position: relative; }
.hx-burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hx-line); cursor: pointer; position: relative; }
.hx-burger span, .hx-close span { position: absolute; inset-inline-start: 12px; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s var(--hx-ease); }
.hx-burger span:first-child { top: 17px; } .hx-burger span:last-child { top: 25px; width: 14px; }
[dir="rtl"] .hx-burger span:last-child { inset-inline-start: 18px; }

/* ---------- responsive: tighten, then hand over to the phone menu ---------- */
@media (max-width: 1240px) { .hx-list > li:first-child { display: none; } .hx-top { padding: 0 11px; } .hx .brand img { height: 52px; } }
@media (max-width: 1080px) {
  .hx-nav, .hx-actions .lang-toggle, .hx-actions .hx-btn-ghost, .hx-actions .hx-account { display: none; }
  .hx-inner { grid-template-columns: auto 1fr auto; padding: 0 18px; height: 64px; }
  .hx-burger { display: inline-block; }
  .hx-actions .hx-cta { height: 38px; padding: 0 14px !important; font-size: 13px !important; }
}
@media (max-width: 420px) { .hx-actions .hx-cta { display: none; } .hx .brand img { height: 48px; } }

/* =====================================================================
   PHONE MENU
   ===================================================================== */
.hx-mobile {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: #07080b; color: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .26s ease, transform .3s var(--hx-ease);
}
.hx-mobile[hidden] { display: none; }
.hx-mobile.is-open { opacity: 1; transform: none; }
.hx-mobile.is-closing { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .22s ease; }
.hx-mobile::before {                 /* one soft glow — premium, not busy */
  content: ''; position: absolute; inset: -20% -30% auto; height: 60%; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 0%, rgba(255, 30, 45, .18), transparent 70%);
}
.hx-m-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 18px; padding-top: env(safe-area-inset-top, 0px); flex: none; }
.hx-m-head .brand img { height: 48px; width: auto; display: block; }
.hx-close { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--hx-line); cursor: pointer; position: relative; }
.hx-close span { top: 21px; }
.hx-close span:first-child { transform: rotate(45deg); } .hx-close span:last-child { transform: rotate(-45deg); }
.hx-m-body { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 18px 24px; }
.hx-m-link, .hx-acc-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px;
  font: inherit; font-size: 17px; font-weight: 700; color: #f1f2f5; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-align: start; text-decoration: none; cursor: pointer; padding: 0 4px;
}
.hx-m-sub { font-size: 15px; font-weight: 600; color: #c9ccd4; min-height: 50px; }
.hx-acc-btn .hx-chev { width: 16px; height: 16px; transition: transform .3s var(--hx-ease); }
.hx-acc.is-open .hx-acc-btn .hx-chev { transform: rotate(180deg); }
.hx-acc.is-open .hx-acc-btn { color: #fff; }
/* Smooth height with no JS measuring: animate the grid row from 0fr to 1fr. */
.hx-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--hx-ease); }
.hx-acc.is-open .hx-acc-panel { grid-template-rows: 1fr; }
.hx-acc-in { overflow: hidden; visibility: hidden; transition: visibility 0s linear .32s; }
.hx-acc.is-open .hx-acc-in { visibility: visible; transition: none; }
.hx-acc-in > :first-child { margin-top: 8px; } .hx-acc-in > :last-child { margin-bottom: 12px; }
.hx-acc-in h3 { font-size: 11px; color: var(--gold); margin: 12px 8px 4px; font-weight: 700; }
.hx-acc-in .hx-link { padding: 10px 8px; gap: 10px; }
.hx-acc-in .hx-ico { width: 30px; height: 30px; font-size: 14px; }
.hx-acc-in .hx-txt b { font-size: 14.5px; font-weight: 600; }
.hx-m-account { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.hx-m-account a { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hx-line); color: #e6e8ee; text-decoration: none; font-size: 14px; text-align: center; }
.hx-m-foot { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hx-line); background: #0a0b0f; }
.hx-m-foot .lang-toggle { grid-column: 1 / -1; justify-self: center; margin: 0 0 2px; }
.hx-m-foot .lang-toggle a { padding: 8px 18px; font-size: 13px; }
.hx-m-foot .btn, .hx-m-foot .hx-btn-ghost { justify-content: center; height: 48px; display: inline-flex; align-items: center; white-space: nowrap; border-radius: 13px; font-size: 15px; }
.hx-m-foot .hx-btn-ghost { border-color: var(--hx-line); }
.hx-m-foot > .btn:only-of-type { grid-column: 1 / -1; }
/* Items arrive with a small stagger — once, gently. */
.hx-mobile.is-open .hx-m-body > * { animation: hxIn .42s var(--hx-ease) both; animation-delay: calc(var(--i, 0) * 32ms + 70ms); }
@keyframes hxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Background locked while the menu is open (JS keeps the exact scroll position). */
html.nav-open, html.nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hx-panel, .hx-has.is-open > .hx-panel, .hx-mobile, .hx-mobile.is-closing, .hx-acc-panel, .hx-chev, .hx-arrow { transition: none !important; }
  .hx-mobile.is-open .hx-m-body > * { animation: none !important; }
}