/*
 * Mashin Irani — Mobile Mega Menu (drawer redesign). Mobile-only (≤1080px), replaces the CR-002
 * drawer when body carries .mi-mega-on. Clean light drawer, mega panels for برند/خودرو.
 * --mi-* tokens with hex fallbacks.
 */

.mi-mega, .mi-mega-scrim { display: none; }
.mi-mega *, .mi-mega *::before, .mi-mega *::after { box-sizing: border-box; }

@media (max-width: 1080px) {
  /* Retire the old drawer. */
  body.mi-mega-on #miDrawer,
  body.mi-mega-on .mi-drawer-scrim { display: none !important; }

  .mi-mega-scrim {
    display: block; position: fixed; inset: 0; z-index: 1340;
    background: rgba(16, 33, 52, .5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity var(--mi-motion-duration-300, 300ms);
  }
  .mi-mega-scrim.is-open { opacity: 1; pointer-events: auto; }

  .mi-mega {
    display: flex; flex-direction: column;
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1345;
    width: min(90vw, 400px); max-width: 400px;
    background: var(--mi-color-bg-base, #f5f0e9);
    color: var(--mi-color-text-primary, #102134);
    direction: rtl; font-family: var(--mi-font-sans, "Vazirmatn", Tahoma, sans-serif);
    transform: translateX(100%);
    transition: transform var(--mi-motion-duration-300, 300ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1));
    box-shadow: var(--mi-shadow-e4, 0 16px 40px rgba(16, 33, 52, .14));
    will-change: transform;
  }
  .mi-mega.is-open { transform: translateX(0); }
}

/* ---- Head ---- */
.mi-mega__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mi-space-4, 16px); flex: 0 0 auto;
  border-bottom: 1px solid var(--mi-color-border, #d9cbc2);
  background: var(--mi-color-bg-elevated, #fff);
}
.mi-mega__brand { display: inline-flex; align-items: center; gap: var(--mi-space-2, 8px); text-decoration: none; color: inherit; }
.mi-mega__brand img { width: 34px; height: 34px; border-radius: var(--mi-radius-md, 8px); }
.mi-mega__brand b { font-weight: 700; font-size: 1rem; }
.mi-mega__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--mi-radius-pill, 999px); background: var(--mi-color-bg-sunken, #ece4da);
  color: var(--mi-color-text-secondary, #404751);
}
.mi-mega__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- Body ---- */
.mi-mega__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--mi-space-3, 12px); }
.mi-mega__search { margin-bottom: var(--mi-space-3, 12px); }
.mi-mega__search .mi-finder__dropdown { position: static; margin-top: var(--mi-space-2, 8px); max-height: none; box-shadow: none; }

/* ---- Nav ---- */
.mi-mega__nav { display: flex; flex-direction: column; }
.mi-mega__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mi-space-4, 16px) var(--mi-space-2, 8px);
  border-bottom: 1px solid var(--mi-color-border, #d9cbc2);
  color: var(--mi-color-text-primary, #102134); text-decoration: none;
  font-weight: 600; font-size: 1rem;
}
.mi-mega__link:active { background: var(--mi-color-bg-sunken, #ece4da); }
.mi-mega__chev { width: 18px; height: 18px; fill: none; stroke: var(--mi-color-n-300, #c0b2a6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Mega groups (accordion) ---- */
.mi-mega__group { border-bottom: 1px solid var(--mi-color-border, #d9cbc2); }
.mi-mega__gh {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--mi-space-4, 16px) var(--mi-space-2, 8px);
  border: 0; background: transparent; cursor: pointer;
  color: var(--mi-color-text-primary, #102134); text-align: start;
  font-family: inherit; font-weight: 700; font-size: 1rem;
}
.mi-mega__gchev { width: 22px; height: 22px; fill: none; stroke: var(--mi-color-brand-accent, #896f3d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--mi-motion-duration-300, 300ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1)); }
.mi-mega__gh[aria-expanded="true"] .mi-mega__gchev { transform: rotate(180deg); }

.mi-mega__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mi-motion-duration-300, 300ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1)); }
.mi-mega__gh[aria-expanded="true"] + .mi-mega__panel { grid-template-rows: 1fr; }
.mi-mega__panelin { overflow: hidden; }

.mi-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mi-space-2, 8px); padding: 0 0 var(--mi-space-3, 12px); }
.mi-mega__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mi-space-1, 4px);
  padding: var(--mi-space-3, 12px) var(--mi-space-2, 8px);
  border: 1px solid var(--mi-color-border, #d9cbc2); border-radius: var(--mi-radius-md, 8px);
  background: var(--mi-color-bg-elevated, #fff); text-decoration: none; color: var(--mi-color-text-primary, #102134);
}
.mi-mega__tile:active { border-color: var(--mi-color-gold-300, #e0c58f); }
.mi-mega__tlogo { display: flex; align-items: center; justify-content: center; height: 34px; width: 100%; }
.mi-mega__tlogo img { max-width: 90%; max-height: 100%; object-fit: contain; display: block; }
.mi-mega__tico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--mi-radius-md, 8px); background: var(--mi-color-bg-sunken, #ece4da); }
.mi-mega__tico svg { width: 22px; height: 22px; fill: none; stroke: var(--mi-color-navy-800, #112250); stroke-width: 1.7; }
.mi-mega__tname { font-size: var(--mi-font-size-caption, .8125rem); font-weight: 600; text-align: center; line-height: 1.2; }

.mi-mega__all {
  display: inline-flex; align-items: center; gap: var(--mi-space-1, 4px);
  padding: var(--mi-space-2, 8px) 0 var(--mi-space-3, 12px);
  color: var(--mi-color-link, #3c507d); font-weight: 600; font-size: var(--mi-font-size-body-sm, .875rem); text-decoration: none;
}
.mi-mega__achev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transform: scaleX(-1); }

/* ---- Foot ---- */
.mi-mega__foot {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mi-space-2, 8px);
  padding: var(--mi-space-3, 12px);
  border-top: 1px solid var(--mi-color-border, #d9cbc2); background: var(--mi-color-bg-elevated, #fff);
}
.mi-mega__acct, .mi-mega__gift, .mi-mega__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mi-space-2, 8px);
  min-height: 44px; padding: 0 var(--mi-space-3, 12px); border-radius: var(--mi-radius-md, 8px);
  text-decoration: none; font-weight: 600; font-size: var(--mi-font-size-body-sm, .875rem);
}
.mi-mega__acct { background: var(--mi-color-action-buy, #112250); color: var(--mi-color-ivory-50, #f5f0e9); }
.mi-mega__gift { background: var(--mi-color-action-lead-magnet, #896f3d); color: var(--mi-color-navy-900, #102134); }
.mi-mega__phone { grid-column: 1 / -1; background: var(--mi-color-bg-sunken, #ece4da); color: var(--mi-color-text-primary, #102134); }
.mi-mega__foot svg { width: 18px; height: 18px; }
.mi-mega__acct svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.mi-mega__gift svg { fill: currentColor; }
.mi-mega__phone svg { fill: var(--mi-color-brand-accent, #896f3d); }

@media (prefers-reduced-motion: reduce) {
  .mi-mega, .mi-mega-scrim, .mi-mega__panel, .mi-mega__gchev { transition: none !important; }
}

/* ---- Account (prominent, top of drawer) ---- */
.mi-mega__account { margin-bottom: var(--mi-space-4, 16px); }
.mi-mega__ucard,
.mi-mega__login {
  display: flex; align-items: center; gap: var(--mi-space-3, 12px);
  padding: var(--mi-space-3, 12px);
  border-radius: var(--mi-radius-lg, 12px);
  text-decoration: none; color: var(--mi-color-text-primary, #102134);
}
/* Logged-in: user card on an elevated surface. */
.mi-mega__ucard {
  border: 1px solid var(--mi-color-border, #d9cbc2);
  background: var(--mi-color-bg-elevated, #fff);
}
.mi-mega__ucard:active { border-color: var(--mi-color-gold-300, #e0c58f); background: var(--mi-color-bg-sunken, #ece4da); }
.mi-mega__uav {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--mi-radius-pill, 999px);
  background: var(--mi-color-action-buy, #112250); color: var(--mi-color-ivory-50, #f5f0e9);
  font-weight: 700; font-size: 1.15rem;
}
.mi-mega__uinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mi-mega__uname { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-mega__uwallet { font-size: var(--mi-font-size-caption, .8125rem); color: var(--mi-color-text-secondary, #404751); }
.mi-mega__uchev { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--mi-color-n-300, #c0b2a6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Logged-out: clear primary login button. */
.mi-mega__login {
  justify-content: center; font-weight: 700; min-height: 50px;
  background: var(--mi-color-action-buy, #112250); color: var(--mi-color-ivory-50, #f5f0e9);
}
.mi-mega__login:active { background: var(--mi-color-navy-900, #102134); }
.mi-mega__login svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Foot now holds only gift + phone — stack them full-width. */
.mi-mega__foot--2 { grid-template-columns: 1fr; }