/* nav.css — the site menu (site_base.html), new-ui-ux: navy text, blue for «active»,
   one primary action. Desktop: «کاوش» / «ویترین» / «بیشتر» open as dropdowns, «ورود» opens
   the three ways in (customer, business, staff). Phones: one sheet with everything. */
.s-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  background: color-mix(in srgb, var(--sf) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--ln); }
.nv-menu { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nv-item { position: relative; }
.nv-top { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--mu);
  font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.nv-top .ic-svg { width: 17px; height: 17px; }
.nv-top .nv-car { width: 14px; height: 14px; opacity: .7; transition: transform .2s; }
.nv-top:hover, .nv-top[aria-expanded="true"] { color: var(--ink); background: var(--s2); }
.nv-top[aria-expanded="true"] .nv-car { transform: rotate(180deg); }
.nv-top.on { color: var(--br); font-weight: 700; }
.nv-pop { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 60; min-width: 300px; padding: 8px; border-radius: 16px;
  background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 22px 54px -18px rgba(15, 31, 58, .35); animation: nvIn .16s ease-out; }
.nv-pop[hidden] { display: none; }
@keyframes nvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nv-pop-explore { width: 360px; }
.nv-pop-cats { width: min(560px, calc(100vw - 40px)); padding: 12px; }
.nv-pop-sm { min-width: 240px; }
.nv-acc .nv-pop { inset-inline-start: auto; inset-inline-end: 0; width: 330px; }
.nv-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.nv-row > .ic-svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--br); }
.nv-row span { display: grid; gap: 1px; }
.nv-row b { font-size: 14px; font-weight: 700; }
.nv-row small { font-size: 12px; color: var(--mu); line-height: 1.7; }
.nv-row:hover { background: var(--s2); }
.nv-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ln); background: var(--bg); }
.nv-search .ic-svg { width: 18px; height: 18px; color: var(--mu); flex: none; }
.nv-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.nv-search:focus-within { border-color: var(--br); box-shadow: 0 0 0 3px color-mix(in srgb, var(--br) 16%, transparent); }
.nv-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.nv-cats a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.nv-cats a:hover { background: color-mix(in srgb, var(--c, var(--br)) 10%, var(--sf)); }
.nv-cats i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c, var(--br));
  background: color-mix(in srgb, var(--c, var(--br)) 14%, var(--sf)); }
.nv-cats i .ic-svg { width: 18px; height: 18px; }
.nv-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px; border-top: 1px solid var(--ln);
  color: var(--br); font-size: 13px; font-weight: 700; text-decoration: none; }
.nv-all .ic-svg { width: 15px; height: 15px; transform: scaleX(-1); }
.nv-cta { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border-top: 1px solid var(--ln);
  color: var(--br); font-size: 13px; font-weight: 700; text-decoration: none; background: var(--bs); }
.nv-cta .ic-svg { width: 16px; height: 16px; flex: none; }

.s-nav .s-auth { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.s-nav .s-login { gap: 6px; }
.s-nav .s-login .ic-svg { width: 17px; height: 17px; }
.s-login-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin: -4px 0; }
.s-nav .nv-start { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.s-nav .nv-start .ic-svg { width: 17px; height: 17px; }
.s-nav #s-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ln);
  border-radius: 12px; background: var(--sf); color: var(--ink); cursor: pointer; }
.s-nav #s-burger .ic-svg { width: 20px; height: 20px; }
.s-nav #s-burger[aria-expanded="true"] { border-color: var(--br); color: var(--br); }

/* the phone sheet */
.nv-sheet { position: fixed; inset: 61px 0 0 0; z-index: 49; overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg); display: grid; align-content: start; gap: 12px; animation: nvIn .18s ease-out; }
.nv-sheet[hidden] { display: none; }
html.nv-locked, html.nv-locked body { overflow: hidden; }
.nv-sheet .nv-search { margin: 0; background: var(--sf); }
.nv-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nv-quick a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; text-align: center; }
.nv-quick .ic-svg { width: 22px; height: 22px; color: var(--br); }
.nv-h { font-size: 12.5px; font-weight: 800; color: var(--mu); margin-top: 4px; }
.nv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--ink); font-size: 13px; text-decoration: none; }
.nv-chips .ic-svg { width: 16px; height: 16px; color: var(--c, var(--br)); }
.nv-acc-list { display: grid; gap: 6px; }
.nv-acc-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--ink); text-decoration: none; }
.nv-acc-list .ic-svg { width: 22px; height: 22px; color: var(--br); flex: none; }
.nv-acc-list span { display: grid; }
.nv-acc-list small { color: var(--mu); font-size: 12px; }
.nv-sheet-cta { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px; }
.nv-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--ln); }
.nv-more a { color: var(--mu); font-size: 13px; text-decoration: none; padding: 6px 0; }

@media (max-width: 1240px) { .s-nav .theme-toggle__label { display: none; } .s-nav .theme-toggle { padding: 6px 10px; } }
@media (max-width: 1140px) { .nv-menu > .nv-top .ic-svg, .nv-item > .nv-top > .ic-svg:first-child { display: none; } .nv-top { padding: 8px 9px; } }
@media (max-width: 1024px) {
  .nv-menu { display: none; }
  .s-nav #s-burger { display: inline-flex; }
  .s-nav .nv-start span { display: none; }
  .s-nav .nv-start { padding: 9px 11px; }
}
@media (min-width: 1025px) { .nv-sheet { display: none !important; } }
@media (max-width: 560px) {
  .s-nav { gap: 8px; padding: 10px 12px; }
  .s-nav .s-login .nv-car, .s-nav .s-login span { display: none; }
  .s-nav .s-login { padding: 8px 10px; }
  .nv-acc .nv-pop { position: fixed; top: 62px; inset-inline: 12px; width: auto; }
}