/*
 * Mashin Irani — Desktop Mega Menu. Desktop-only (>1080px): برند / خودرو open an elevated
 * dropdown panel under the header (brand-logo grid / vehicle grid + a highlighted CTA aside).
 * --mi-* tokens with hex fallbacks. Mobile drawer is untouched.
 */

/* Hidden by default everywhere (mobile/tablet use the drawer); shown only on desktop below. */
.mi-dm { display: none; }
.mi-dm *, .mi-dm *::before, .mi-dm *::after { box-sizing: border-box; }

@media (min-width: 1081px) {
  body.mi-dmega-on .mi-dm {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(6px);
    width: min(1040px, calc(100vw - 40px));
    z-index: 60;
    direction: rtl;
    padding: var(--mi-space-5, 24px);
    background: var(--mi-color-bg-elevated, #ffffff);
    border: 1px solid var(--mi-color-border, #d9cbc2);
    border-radius: var(--mi-radius-lg, 16px);
    box-shadow: var(--mi-shadow-e4, 0 24px 60px rgba(16, 33, 52, .18));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mi-motion-duration-200, 180ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1)),
                transform var(--mi-motion-duration-200, 180ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1)),
                visibility var(--mi-motion-duration-200, 180ms);
  }
  body.mi-dmega-on .mi-dm.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* Hover bridge across the header→card gap so the pointer doesn't drop the hover. */
  body.mi-dmega-on .mi-dm::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 18px;
  }

  /* ---- Panels ---- */
  .mi-dm-panel { }
  .mi-dm-panel:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: var(--mi-space-5, 24px);
    align-items: stretch;
  }
  .mi-dm-h { margin-bottom: var(--mi-space-4, 16px); }
  .mi-dm-h b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--mi-color-text-primary, #102134); }
  .mi-dm-h span { display: block; margin-top: 2px; font-size: var(--mi-font-size-body-sm, .875rem); color: var(--mi-color-text-secondary, #5b6672); }

  /* ---- Brand grid ---- */
  .mi-dm-grid--brands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mi-space-3, 12px); }
  .mi-dm-bcard {
    display: flex; flex-direction: column; align-items: center; gap: var(--mi-space-2, 8px);
    padding: var(--mi-space-4, 16px) var(--mi-space-2, 8px);
    border: 1px solid var(--mi-color-border, #d9cbc2); border-radius: var(--mi-radius-md, 10px);
    background: var(--mi-color-bg-base, #f7f2ec); text-decoration: none;
    transition: border-color var(--mi-motion-duration-200, 180ms), transform var(--mi-motion-duration-200, 180ms), box-shadow var(--mi-motion-duration-200, 180ms);
  }
  .mi-dm-bcard:hover {
    border-color: var(--mi-color-gold-300, #e0c58f);
    transform: translateY(-2px);
    box-shadow: var(--mi-shadow-e2, 0 8px 20px rgba(16, 33, 52, .10));
  }
  .mi-dm-blogo { height: 42px; width: 100%; display: flex; align-items: center; justify-content: center; }
  .mi-dm-blogo img { max-width: 88%; max-height: 100%; object-fit: contain; display: block; }
  .mi-dm-bt { text-align: center; }
  .mi-dm-bt b { display: block; font-size: var(--mi-font-size-body-sm, .875rem); font-weight: 700; color: var(--mi-color-text-primary, #102134); }
  .mi-dm-bt em { display: block; margin-top: 2px; font-style: normal; font-size: var(--mi-font-size-caption, .75rem); color: var(--mi-color-text-secondary, #5b6672); }

  /* ---- Vehicle grid ---- */
  .mi-dm-grid--veh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mi-space-3, 12px); }
  .mi-dm-vcard {
    display: flex; align-items: center; gap: var(--mi-space-3, 12px);
    padding: var(--mi-space-3, 12px) var(--mi-space-4, 16px);
    border: 1px solid var(--mi-color-border, #d9cbc2); border-radius: var(--mi-radius-md, 10px);
    background: var(--mi-color-bg-base, #f7f2ec); text-decoration: none;
    transition: border-color var(--mi-motion-duration-200, 180ms), transform var(--mi-motion-duration-200, 180ms), box-shadow var(--mi-motion-duration-200, 180ms);
  }
  .mi-dm-vcard:hover {
    border-color: var(--mi-color-gold-300, #e0c58f);
    transform: translateY(-2px);
    box-shadow: var(--mi-shadow-e2, 0 8px 20px rgba(16, 33, 52, .10));
  }
  .mi-dm-vico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--mi-radius-md, 10px);
    display: grid; place-items: center; background: var(--mi-color-bg-sunken, #ece4da);
  }
  .mi-dm-vico svg { width: 24px; height: 24px; fill: none; stroke: var(--mi-color-navy-800, #112250); stroke-width: 1.7; }
  .mi-dm-vt b { display: block; font-size: .9375rem; font-weight: 700; color: var(--mi-color-text-primary, #102134); }
  .mi-dm-vt em { display: block; margin-top: 2px; font-style: normal; font-size: var(--mi-font-size-caption, .75rem); color: var(--mi-color-text-secondary, #5b6672); }

  /* ---- Aside CTA ---- */
  .mi-dm-aside {
    display: flex; flex-direction: column; justify-content: center; gap: var(--mi-space-1, 4px);
    padding: var(--mi-space-5, 24px); border-radius: var(--mi-radius-md, 12px);
    background: linear-gradient(150deg, #1a2f52, var(--mi-color-navy-900, #102134));
    color: var(--mi-color-ivory-50, #f5f0e9); text-decoration: none; position: relative; overflow: hidden;
    transition: transform var(--mi-motion-duration-200, 180ms), box-shadow var(--mi-motion-duration-200, 180ms);
  }
  .mi-dm-aside:hover { transform: translateY(-2px); box-shadow: var(--mi-shadow-e3, 0 12px 30px rgba(16, 33, 52, .22)); }
  .mi-dm-aside__ic { display: inline-flex; margin-bottom: var(--mi-space-2, 8px); }
  .mi-dm-aside__ic svg { width: 28px; height: 28px; fill: none; stroke: var(--mi-color-brand-accent, #c9a24b); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mi-dm-aside b { font-size: 1.0625rem; font-weight: 800; }
  .mi-dm-aside em { font-style: normal; font-size: var(--mi-font-size-body-sm, .8125rem); opacity: .82; line-height: 1.5; }
  .mi-dm-aside__go { margin-top: var(--mi-space-3, 12px); display: inline-flex; }
  .mi-dm-aside__go svg { width: 20px; height: 20px; fill: none; stroke: var(--mi-color-brand-accent, #c9a24b); stroke-width: 2; }

  /* ---- Trigger chevron on برند / خودرو ---- */
  body.mi-dmega-on .mi-dm-trigger { display: inline-flex; align-items: center; gap: 5px; }
  .mi-dm-tchev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--mi-motion-duration-200, 180ms) var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1)); opacity: .8; }
  body.mi-dmega-on .mi-dm-trigger[aria-expanded="true"] .mi-dm-tchev { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.mi-dmega-on .mi-dm, .mi-dm-bcard, .mi-dm-vcard, .mi-dm-aside, .mi-dm-tchev { transition: none !important; }
}