/* ==========================================================================
   Nikamall Karaj — sample site
   Design language adapted from iranmall.com, recoloured to the Nikamall logo.
   Designed & developed by EJS — ejsdigital.com
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The hidden attribute only reaches the browser's own stylesheet, so any rule
   here that sets display (flex, grid, block) quietly overrides it and the
   element stays on screen. That has bitten this site three times — the
   pay-again box showed on paid orders — so it is settled once, here, rather
   than patched per component. */
[hidden] { display: none !important; }

:root {
  /* Surfaces */
  --bg:        #0F1115;
  --bg-2:      #14171E;
  --bg-3:      #191D26;
  --bg-4:      #1F242F;
  --line:      rgba(255, 255, 255, .085);
  --line-2:    rgba(255, 255, 255, .16);

  /* Brand — sampled from logo.png (#F09030) */
  --accent:    #F09030;
  --accent-hi: #FFB35E;
  --accent-dim: rgba(240, 144, 48, .14);

  /* Type */
  --fg:        #F4F5F6;
  --fg-2:      #C7CBD2;
  --muted:     #8F97A3;

  --maxw:      1280px;
  --gut:       clamp(16px, 4vw, 48px);
  --r:         4px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #14100b; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A .wrap used as a grid item would be shrink-wrapped by its auto inline margins,
   which centres the copy instead of aligning it to the RTL start edge. */
.hero__in, .band__in, .pagebanner__in { width: 100%; }

/* Latin runs that start with a neutral character (@handle, +98…) need isolating,
   or bidi reorders the neutral to the wrong visual end. */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Persian numerals sit better with a touch more tracking */
.num { font-feature-settings: 'ss01'; letter-spacing: .02em; }


/* ============================ HEADER ============================ */

.utility {
  background: #0A0C10;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.utility__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 7px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.utility__facts { display: flex; gap: 22px; flex-wrap: wrap; }
.utility b { color: var(--fg-2); font-weight: 500; }
.utility a:hover { color: var(--accent); }
@media (max-width: 720px) { .utility { display: none; } }

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 17, 21, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gut);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.brand { justify-self: center; display: flex; align-items: center; gap: 12px; }
.brand img { height: 46px; width: auto; }
.brand__txt { display: none; }

.head__left, .head__right { display: flex; align-items: center; gap: 10px; }
.head__right { justify-self: end; }

.iconbtn {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  color: var(--fg-2);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.head__phone {
  font-size: 13.5px; color: var(--fg-2);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.head__phone svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
@media (max-width: 900px) { .head__phone { display: none; } }

/* Search field, revealed */
.searchbox {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gut);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s var(--ease);
}
.searchbox.open { max-height: 90px; }
.searchbox input {
  width: 100%;
  margin-bottom: 16px;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input:focus { border-color: var(--accent); outline: none; }

/* Primary nav */
.mainnav { border-top: 1px solid var(--line); }
.mainnav__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 46px);
  flex-wrap: wrap;
}
.mainnav a {
  display: block;
  padding: 15px 2px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-2);
  position: relative;
  transition: color .25s var(--ease);
}
.mainnav a::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: -1px;
  height: 2px; background: var(--accent);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.mainnav a:hover { color: var(--fg); }
.mainnav a:hover::after { transform: scaleX(1); }
.mainnav a[aria-current='page'] { color: var(--accent); }
.mainnav a[aria-current='page']::after { transform: scaleX(1); }
@media (max-width: 860px) { .mainnav { display: none; } }

.burger { display: none; }
@media (max-width: 860px) { .burger { display: inline-grid; } }

/* Mobile quick-nav: the three destinations a visitor actually wants, sitting
   under the logo so they never have to open the drawer. Hidden on desktop,
   where the full nav is already visible. */
.quicknav { display: none; }
@media (max-width: 860px) {
  .quicknav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
  }
  .quicknav a {
    position: relative;
    padding: 14px 6px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fg-2);
    border-inline-start: 1px solid var(--line);
    transition: color .22s var(--ease), background .22s var(--ease);
  }
  .quicknav a:first-child { border-inline-start: 0; }
  .quicknav a:active { background: rgba(255, 255, 255, .04); }
  .quicknav a[aria-current='page'] { color: var(--accent); }
  .quicknav a[aria-current='page']::after {
    content: '';
    position: absolute; inset-inline: 18px; bottom: 0;
    height: 2px; background: var(--accent);
  }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(6, 8, 11, .72);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(320px, 84vw);
  background: var(--bg-2);
  border-inline-start: 1px solid var(--line);
  padding: 22px;
  transform: translateX(-100%);
  transition: transform .34s var(--ease);
  display: flex; flex-direction: column; gap: 4px;
}
[dir='rtl'] .drawer__panel { transform: translateX(100%); }
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer__top img { height: 40px; width: auto; }
.drawer__panel nav a {
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer__panel nav a[aria-current='page'] { color: var(--accent); }
.drawer__foot { margin-top: auto; font-size: 13px; color: var(--muted); line-height: 2; }
.drawer__foot a { color: var(--accent); }


/* ============================ HERO ============================ */

.hero {
  position: relative;
  /* dvh second: iOS Safari counts its collapsing toolbar inside vh, which pushes
     the hero taller than the screen and cuts off the bottom row */
  min-height: clamp(460px, 76vh, 720px);
  min-height: clamp(460px, 76dvh, 720px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #06070a;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  animation: heroIn 1.6s var(--ease) both;
}
@keyframes heroIn { from { transform: scale(1.07); opacity: .35; } to { transform: scale(1); opacity: 1; } }

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8, 9, 12, .94) 0%, rgba(8, 9, 12, .55) 34%, rgba(8, 9, 12, .12) 65%, rgba(8, 9, 12, .5) 100%),
    linear-gradient(to left, rgba(8, 9, 12, .7) 0%, transparent 55%);
}
.hero__in {
  position: relative; z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(28px, 5vh, 56px);
  width: 100%;
}
.hero__kicker {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .16em;
  margin-bottom: 14px;
  animation: rise .8s .3s var(--ease) both;
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 6.2vw, 66px);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 17ch;
  animation: rise .9s .42s var(--ease) both;
}
.hero h1 b { font-weight: 600; color: var(--accent); }
.hero__sub {
  color: var(--fg-2);
  font-size: clamp(14.5px, 1.7vw, 18px);
  max-width: 46ch;
  margin: 0 0 26px;
  animation: rise .9s .54s var(--ease) both;
}
.hero__rule {
  height: 1px;
  background: linear-gradient(to left, var(--accent), transparent 72%);
  margin: 0 0 22px;
  animation: grow 1.1s .7s var(--ease) both;
  transform-origin: right;
}
[dir='ltr'] .hero__rule { transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 44px);
  animation: rise .9s .84s var(--ease) both;
}
.hero__meta div { display: flex; align-items: center; gap: 11px; }
.hero__meta svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.3; flex: none; }
.hero__meta span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.hero__meta strong { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.5; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 30px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent);
  font-size: 14.5px; font-weight: 500;
  background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--accent); color: #16100a; }
.btn--solid { background: var(--accent); color: #16100a; }
.btn--solid:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn--ghost { border-color: var(--line-2); color: var(--fg-2); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }


/* ============================ SECTIONS ============================ */

.sec { padding: clamp(56px, 9vw, 108px) 0; }
.sec--tight { padding: clamp(40px, 6vw, 68px) 0; }
.sec--alt { background: var(--bg-2); }

.eyebrow {
  color: var(--accent);
  font-size: 12.5px;
  letter-spacing: .16em;
  margin: 0 0 12px;
}
.h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.01em;
}
.lede { color: var(--muted); max-width: 62ch; margin: 0; font-size: clamp(14.5px, 1.6vw, 16.5px); }

.sec__head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head--center { text-align: center; }
.sec__head--center .lede { margin-inline: auto; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.stat {
  padding: 26px 18px;
  text-align: center;
  border-inline-start: 1px solid var(--line);
}
.stat:first-child { border-inline-start: 0; }
.stat strong {
  display: block;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 300;
  color: var(--accent);
  line-height: 1.2;
}
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) {
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
}

/* Split editorial block */
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  min-height: 420px;
}
.split__txt {
  background: var(--bg-2);
  padding: clamp(30px, 5vw, 70px);
  display: flex; flex-direction: column; justify-content: center;
}
.split__img { position: relative; overflow: hidden; background: #0b0d11; }
.split__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.split:hover .split__img img { transform: scale(1.045); }
.split .btn { align-self: flex-start; margin-top: 26px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__img { min-height: 260px; order: -1; }
}

/* Full-bleed band with overlaid copy */
.band {
  position: relative;
  min-height: clamp(300px, 46vw, 460px);
  display: grid; align-items: center;
  overflow: hidden;
  background: #0b0d11;
}
.band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(8, 9, 12, .9) 5%, rgba(8, 9, 12, .45) 55%, rgba(8, 9, 12, .2) 100%);
}
.band__in { position: relative; z-index: 2; }
.band .lede { color: var(--fg-2); }

/* Feature duo */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.feat {
  position: relative;
  min-height: clamp(280px, 34vw, 400px);
  display: grid; align-items: end;
  overflow: hidden;
  background: #0b0d11;
}
.feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.feat:hover > img { transform: scale(1.05); }
.feat::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 12, .93) 8%, rgba(8, 9, 12, .35) 58%, transparent 100%);
}
.feat__in { position: relative; z-index: 2; padding: clamp(22px, 3vw, 40px); }
.feat h3 { margin: 6px 0 8px; font-size: clamp(19px, 2.4vw, 27px); font-weight: 400; }
.feat p { margin: 0 0 18px; color: var(--fg-2); font-size: 14px; }


/* ============================ CARDS / DIRECTORY ============================ */

.filters {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 12px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 28px;
}
@media (max-width: 780px) { .filters { grid-template-columns: 1fr 1fr; } .filters .filters__reset { grid-column: 1 / -1; } }
.filters input, .filters select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit; font-size: 14px;
}
.filters input::placeholder { color: var(--muted); }
.filters input:focus, .filters select:focus { border-color: var(--accent); outline: none; }
.filters select option { background: var(--bg-3); }
.filters__reset {
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 14px;
  transition: color .25s, border-color .25s;
}
.filters__reset:hover { color: var(--accent); border-color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px;
}

/* Text-only directory card, as iranmall's own listing pages use */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: rgba(240, 144, 48, .5); transform: translateY(-3px); }
.card__plate {
  aspect-ratio: 16 / 10;
  display: grid; place-content: center;
  text-align: center;
  padding: 20px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 9px),
    var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.card__plate.has-img { padding: 0; background: #0b0d11; position: relative; }
.card__plate.has-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card__plate.has-img img { transform: scale(1.06); }
.card__fa { font-size: 19px; font-weight: 500; }
.card__en { font-size: 11px; letter-spacing: .22em; color: var(--muted); margin-top: 7px; }
.card__body { padding: 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.card__name { font-size: 15.5px; font-weight: 500; color: var(--accent); }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--fg-2);
}
.card__foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.card__foot span { display: flex; align-items: center; gap: 5px; }
.card__foot svg { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.card__foot .star { color: var(--accent); }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}

/* Page banner (inner pages) */
.pagebanner {
  position: relative;
  min-height: clamp(190px, 28vw, 320px);
  display: grid; align-items: center;
  overflow: hidden;
  background: #0b0d11;
}
.pagebanner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagebanner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,12,.92), rgba(8,9,12,.42));
}
.pagebanner__in { position: relative; z-index: 2; }
.pagebanner h1 { margin: 0; font-size: clamp(26px, 4.6vw, 46px); font-weight: 300; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.crumbs a:hover { color: var(--accent); }


/* ============================ FLOOR STACK ============================ */

.floors { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .floors { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: 5px; }
.flr {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: start;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.flr:hover { background: var(--bg-3); border-color: var(--line-2); }
.flr[aria-selected='true'] {
  border-color: var(--accent);
  background: linear-gradient(to left, var(--accent-dim), transparent 70%), var(--bg-3);
}
.flr__no {
  font-size: 13px; color: var(--muted);
  border-inline-end: 1px solid var(--line);
  padding-inline-end: 12px;
}
.flr[aria-selected='true'] .flr__no { color: var(--accent); }
.flr__use { font-size: 14.5px; font-weight: 500; }
.flr__note { font-size: 12px; color: var(--muted); }
.flr--park { background: #12151b; }
.flr--office { background: #12151b; }
.flr--gym .flr__use, .flr--food .flr__use { color: var(--accent); }

.flrinfo {
  position: sticky; top: 130px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 32px);
}
.flrinfo h3 { margin: 0 0 6px; font-size: 22px; font-weight: 400; color: var(--accent); }
.flrinfo__no { font-size: 12.5px; color: var(--muted); letter-spacing: .1em; }
.flrinfo p { color: var(--fg-2); font-size: 14.5px; }
.flrinfo ul { margin: 14px 0 0; padding: 0; list-style: none; }
.flrinfo li {
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 12px;
}
.flrinfo li b { color: var(--fg-2); font-weight: 500; }


/* ============================ FACT TABLE / CHIPS ============================ */

.facts { border-top: 1px solid var(--line); }
.facts div {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.facts dt, .facts .k { color: var(--muted); font-size: 13.5px; }
.facts .v { color: var(--fg-2); }
.facts .v b { color: var(--accent); font-weight: 500; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; gap: 3px; } }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 13px;
  padding: 8px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fg-2);
  transition: border-color .25s, color .25s;
}
.chips li:hover { border-color: var(--accent); color: var(--accent); }

.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--accent-dim);
  border: 1px solid rgba(240, 144, 48, .3);
  border-radius: var(--r);
  font-size: 13.5px; color: var(--fg-2);
}
.notice svg { width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex: none; margin-top: 4px; }


/* ============================ QR MENU ============================ */

.menuhead { display: grid; grid-template-columns: 1fr auto; gap: clamp(22px, 4vw, 48px); align-items: center; }
@media (max-width: 780px) { .menuhead { grid-template-columns: 1fr; } }

.qrcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  text-align: center;
  max-width: 260px;
  justify-self: center;
}
.qrcard__code {
  background: #fff;
  border-radius: var(--r);
  padding: 10px;
  display: block;
  line-height: 0;
}
.qrcard__code svg { width: 100%; height: auto; display: block; }
.qrcard h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 500; }
.qrcard p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

.menugroup { margin-top: clamp(30px, 4vw, 52px); }
.menugroup__title {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 18px;
  font-size: 15px; font-weight: 500; color: var(--accent);
  letter-spacing: .04em;
}
.menugroup__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.menulist { display: grid; gap: 12px; }
.menuitem {
  display: grid;
  grid-template-columns: 152px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.menuitem:hover { border-color: rgba(240, 144, 48, .45); transform: translateY(-2px); }
.menuitem__img {
  width: 152px; height: 106px;
  border-radius: var(--r);
  overflow: hidden; background: #0b0d11;
}
.menuitem__img img { width: 100%; height: 100%; object-fit: cover; }
.menuitem__name { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.menuitem__desc { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.7; }
.menuitem__price { font-size: 15px; color: var(--accent); white-space: nowrap; font-weight: 500; }
.menuitem__price small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
@media (max-width: 560px) {
  .menuitem { grid-template-columns: 84px 1fr; gap: 12px; }
  .menuitem__img { width: 84px; height: 72px; }
  .menuitem__price { grid-column: 2; justify-self: start; margin-top: 2px; }
}


/* ============================ CONTACT ============================ */

.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.infolist { display: grid; gap: 2px; }
.infoitem {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.infoitem svg { width: 21px; height: 21px; stroke: var(--accent); fill: none; stroke-width: 1.6; flex: none; margin-top: 5px; }
.infoitem h4 { margin: 0 0 3px; font-size: 13px; color: var(--muted); font-weight: 400; }
.infoitem p { margin: 0; font-size: 15px; color: var(--fg); line-height: 1.7; }
.infoitem a:hover { color: var(--accent); }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
.form input, .form textarea {
  padding: 13px 15px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit; font-size: 14.5px;
  resize: vertical;
}
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.formmsg {
  display: none;
  padding: 14px 16px;
  border-radius: var(--r);
  font-size: 13.5px;
  background: var(--accent-dim);
  border: 1px solid rgba(240, 144, 48, .32);
  color: var(--fg-2);
}
.formmsg.show { display: block; animation: rise .4s var(--ease) both; }

.mapfig {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.mapfig svg { width: 100%; height: auto; display: block; }
.mapfig figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}


/* ============================ FOOTER ============================ */

.site-foot { background: #0A0C10; border-top: 1px solid var(--line); margin-top: 0; }
.foot__brand {
  display: flex; align-items: center; gap: 22px;
  padding: 34px 0 30px;
}
.foot__brand::before, .foot__brand::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
/* width:auto is required — the <img width="186"> attribute otherwise sets the
   width while CSS sets the height, which breaks the aspect ratio. */
.foot__brand img { height: 44px; width: auto; }

.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: 40px;
}
@media (max-width: 860px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__cols { grid-template-columns: 1fr; } }
.foot__cols h5 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 500; color: var(--fg);
  letter-spacing: .04em;
}
.foot__cols ul { margin: 0; padding: 0; list-style: none; }
.foot__cols li { margin-bottom: 9px; }
.foot__cols a, .foot__cols p { font-size: 13.5px; color: var(--muted); margin: 0; }
.foot__cols a:hover { color: var(--accent); }

.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: border-color .25s, background .25s;
}
.socials a:hover { border-color: var(--accent); background: var(--accent-dim); }
.socials svg { width: 16px; height: 16px; stroke: var(--fg-2); fill: none; stroke-width: 1.6; }
.socials a:hover svg { stroke: var(--accent); }

.foot__bar {
  border-top: 1px solid var(--line);
  padding: 18px 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.credit { display: flex; align-items: center; gap: 7px; }
.credit a {
  color: var(--fg-2);
  border-bottom: 1px solid rgba(240, 144, 48, .45);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.credit a:hover { color: var(--accent); border-color: var(--accent); }
.credit a b { font-weight: 600; letter-spacing: .06em; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* Touch: enlarge the small icon buttons in the header and drawer. */
@media (pointer: coarse) {
  .iconbtn { width: 44px; height: 44px; }
  .socials a { width: 42px; height: 42px; }
  .mainnav a, .drawer__panel nav a { padding-block: 15px; }
}


/* ============================ شهربازی ============================
   Lives here, not in order.css — fun.html does not load the ordering
   stylesheet, so venue styles placed there never applied. */
.venue { margin-bottom: clamp(48px, 7vw, 92px); }
.venue:last-of-type { margin-bottom: 0; }

.venue__hero {
  position: relative;
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 1264 / 440;
  background: #0b0d11;
  margin-bottom: 26px;
}
.venue__hero img { width: 100%; height: 100%; object-fit: cover; }
.venue__hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,12,.9), rgba(8,9,12,.12) 62%);
}
.venue__name {
  position: absolute; z-index: 2;
  inset-inline-start: clamp(18px, 3vw, 38px);
  bottom: clamp(16px, 3vw, 30px);
}
.venue__name span { display: block; font-size: 12px; color: var(--accent); letter-spacing: .22em; }
.venue__name h2 { margin: 4px 0 0; font-size: clamp(24px, 4.2vw, 42px); font-weight: 400; }

.venue__body { max-width: 76ch; }
.venue__body p { color: var(--fg-2); font-size: clamp(14.5px, 1.6vw, 16px); margin: 0 0 16px; }
.venue__body p:last-child { margin-bottom: 0; }

.venue__facil { margin-top: 28px; }
.venue__facil h4 {
  margin: 0 0 14px; font-size: 14.5px; font-weight: 500; color: var(--accent);
  display: flex; align-items: center; gap: 12px;
}
.venue__facil h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* two shots side by side at a fixed ratio — previously unstyled, so they
   rendered full-width and stacked on top of each other */
.venue__shots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 30px;
}
.venue__shots img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}
@media (max-width: 620px) { .venue__shots { grid-template-columns: 1fr; } }

/* eNamad trust seal in the footer (see layouts/site) */
.foot__seal { display: inline-block; margin-top: 16px; }
.foot__seal img { width: 92px; height: auto; display: block; }