/*
 * Mashin Irani — Mobile Navigation Drawer (CR-002).
 * Mobile-only (<= 1080px, where the header hamburger shows). Desktop nav untouched. Uses the global
 * --mi-* design tokens with hex fallbacks. 60fps: only transform/opacity animate.
 */
.mi-drawer, .mi-drawer-scrim { display: none; }

@media (max-width: 1080px){
  .mi-drawer-scrim{
    display: block; position: fixed; inset: 0; z-index: 1340;
    background: rgba(16,33,52,.55);
    -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
    opacity: 0; visibility: hidden;
    transition: opacity .32s cubic-bezier(.2,0,0,1), visibility .32s;
    will-change: opacity;
  }
  .mi-drawer{
    display: flex; flex-direction: column;
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1345;
    width: min(86vw, 360px); max-width: 100vw;
    background: var(--mi-color-bg-base, #f5f0e9);
    box-shadow: 0 0 44px rgba(16,33,52,.30);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.2,0,0,1), visibility .34s;
    will-change: transform;
    overflow: hidden;
    font-family: var(--mi-font-sans, "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif);
    color: var(--mi-color-text-primary, #102134);
  }
  html[dir="rtl"] .mi-drawer{ transform: translateX(100%); }

  body.mi-drawer-open .mi-drawer-scrim{ opacity: 1; visibility: visible; }
  body.mi-drawer-open .mi-drawer{ transform: translateX(0); visibility: visible; }

  .mi-drawer__head{
    display: flex; align-items: center; justify-content: space-between; gap: var(--mi-space-3,12px);
    padding: var(--mi-space-4,16px) var(--mi-space-5,20px);
    border-bottom: 1px solid var(--mi-color-border, #d9cbc2); flex: none;
  }
  .mi-drawer__brand{ display: flex; align-items: center; gap: var(--mi-space-2,8px); text-decoration: none; color: var(--mi-color-text-primary,#102134); min-width: 0; }
  .mi-drawer__brand img{ width: 34px; height: 34px; object-fit: contain; flex: none; }
  .mi-drawer__brand b{ font-size: .95rem; font-weight: 700; white-space: nowrap; }
  .mi-drawer__close{
    width: 48px; height: 48px; min-width: 48px; border: 0; cursor: pointer;
    background: var(--mi-color-bg-sunken, #ece4da); border-radius: var(--mi-radius-pill, 999px);
    color: var(--mi-color-text-secondary,#404751);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s cubic-bezier(.2,0,0,1), transform .18s;
  }
  .mi-drawer__close:hover{ background: var(--mi-color-border, #d9cbc2); }
  .mi-drawer__close:active{ transform: scale(.9); }
  .mi-drawer__close:focus-visible{ outline: 2px solid var(--mi-color-link,#3c507d); outline-offset: 2px; }
  .mi-drawer__close svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

  .mi-drawer__body{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  .mi-drawer__account{ padding: var(--mi-space-4,16px) var(--mi-space-5,20px); border-bottom: 1px solid var(--mi-color-border,#d9cbc2); }
  .mi-drawer__user{ display: flex; align-items: center; gap: var(--mi-space-3,12px); }
  .mi-drawer__avatar{ width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: linear-gradient(140deg, var(--mi-color-navy-700,#1a293f), var(--mi-color-sapphire-500,#3c507d)); color: var(--mi-color-ivory-50,#f5f0e9); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
  .mi-drawer__uinfo{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .mi-drawer__uname{ font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mi-drawer__wallet{ font-size: .8rem; color: var(--mi-color-text-secondary,#404751); }
  .mi-drawer__login{ display: flex; align-items: center; justify-content: center; gap: var(--mi-space-2,8px); width: 100%; min-height: 48px; background: var(--mi-color-brand-primary, #112250); color: var(--mi-color-ivory-50,#f5f0e9); border-radius: var(--mi-radius-md,8px); font-weight: 600; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .15s; }
  .mi-drawer__login:hover{ filter: brightness(1.1); }
  .mi-drawer__login:active{ transform: scale(.985); }
  .mi-drawer__login svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  .mi-drawer__nav{ padding: var(--mi-space-3,12px); }
  .mi-drawer__nav ul{ list-style: none; margin: 0; padding: 0; }
  .mi-drawer__link{
    display: flex; align-items: center; gap: var(--mi-space-3,12px);
    min-height: 48px; padding: var(--mi-space-2,8px) var(--mi-space-3,12px);
    border-radius: var(--mi-radius-md,8px);
    color: var(--mi-color-text-primary,#102134); text-decoration: none;
    font-weight: 600; font-size: 1rem; line-height: 1.5; position: relative;
    transition: background .18s cubic-bezier(.2,0,0,1), color .18s;
  }
  .mi-drawer__link .lbl{ flex: 1 1 auto; }
  .mi-drawer__link .chev{ width: 18px; height: 18px; stroke: var(--mi-color-text-tertiary,#6e6a66); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .55; }
  html[dir="rtl"] .mi-drawer__link .chev{ transform: scaleX(-1); }
  .mi-drawer__link:hover{ background: var(--mi-color-bg-sunken,#ece4da); }
  .mi-drawer__link:focus-visible{ outline: 2px solid var(--mi-color-link,#3c507d); outline-offset: -2px; }
  .mi-drawer__link:active{ background: var(--mi-color-border,#d9cbc2); }
  .mi-drawer__link.is-active{ color: var(--mi-color-text-gold, #7f6220); background: rgba(224,197,143,.20); }
  .mi-drawer__link.is-active .chev{ stroke: var(--mi-color-text-gold,#7f6220); opacity: .8; }
  .mi-drawer__link.is-active::before{ content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--mi-color-gold-500,#896f3d); }
  html[dir="rtl"] .mi-drawer__link.is-active::before{ border-radius: 3px 0 0 3px; }

  /* Accordion for nested items (dormant unless an item has children). */
  .mi-drawer__submenu{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2,0,0,1); }
  .mi-drawer__submenu > div{ overflow: hidden; min-height: 0; }
  .mi-drawer__has-children.is-expanded > .mi-drawer__submenu{ grid-template-rows: 1fr; }
  .mi-drawer__has-children.is-expanded > .mi-drawer__link .chev{ transform: rotate(90deg); }
  html[dir="rtl"] .mi-drawer__has-children.is-expanded > .mi-drawer__link .chev{ transform: scaleX(-1) rotate(-90deg); }
  .mi-drawer__submenu a{ padding-inline-start: var(--mi-space-10,40px); font-weight: 500; font-size: .92rem; min-height: 44px; }

  .mi-drawer__section{ padding: var(--mi-space-2,8px) var(--mi-space-3,12px) 0; }
  .mi-drawer__section-title{ display: block; padding: var(--mi-space-2,8px) var(--mi-space-3,12px) var(--mi-space-1,4px); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--mi-color-text-tertiary,#6e6a66); }
  .mi-drawer__util{ list-style: none; margin: 0; padding: 0; }
  .mi-drawer__util a{ display: flex; align-items: center; gap: var(--mi-space-3,12px); min-height: 48px; padding: var(--mi-space-2,8px) var(--mi-space-3,12px); border-radius: var(--mi-radius-md,8px); color: var(--mi-color-text-primary,#102134); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .18s; }
  .mi-drawer__util a:hover{ background: var(--mi-color-bg-sunken,#ece4da); }
  .mi-drawer__util a:active{ background: var(--mi-color-border,#d9cbc2); }
  .mi-drawer__util a:focus-visible{ outline: 2px solid var(--mi-color-link,#3c507d); outline-offset: -2px; }
  .mi-drawer__util svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
  .mi-drawer__util .lbl{ flex: 1 1 auto; }
  .mi-drawer__ubadge{ min-width: 20px; height: 20px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--mi-color-clay-error,#b4402e); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px; }
  .mi-drawer__ubadge[hidden]{ display: none; }

  .mi-drawer__foot{ padding: var(--mi-space-4,16px) var(--mi-space-5,20px); border-top: 1px solid var(--mi-color-border,#d9cbc2); display: flex; flex-direction: column; gap: var(--mi-space-3,12px); flex: none; }
  .mi-drawer__gift{ display: flex; align-items: center; justify-content: center; gap: var(--mi-space-2,8px); min-height: 48px; background: var(--mi-color-action-lead-magnet, #896f3d); color: var(--mi-color-ivory-50,#f5f0e9); border-radius: var(--mi-radius-md,8px); font-weight: 700; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .15s; }
  .mi-drawer__gift:hover{ filter: brightness(1.08); }
  .mi-drawer__gift:active{ transform: scale(.98); }
  .mi-drawer__gift svg{ width: 20px; height: 20px; stroke: var(--mi-color-gold-300,#e0c58f); fill: none; stroke-width: 1.5; }
  .mi-drawer__contact{ display: flex; align-items: center; gap: var(--mi-space-2,8px); justify-content: center; font-size: .85rem; color: var(--mi-color-text-secondary,#404751); text-decoration: none; direction: ltr; }
  .mi-drawer__contact svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  @media (prefers-reduced-motion: reduce){
    .mi-drawer, .mi-drawer-scrim, .mi-drawer__submenu, .mi-drawer__link, .mi-drawer__close, .mi-drawer__gift{ transition: none; }
  }
}