/*
 * Mashin Irani — Octane Finder UI (CR-004)
 * Premium search field + grouped results dropdown. RTL. --mi-* tokens only (hex fallbacks).
 * Three presentations: inline (default), .mi-finder-header (header panel), drawer (in-flow results).
 */

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

.mi-finder {
  position: relative;
  width: 100%;
  font-family: var(--mi-font-sans, "Vazirmatn", Tahoma, sans-serif);
  direction: rtl;
  text-align: right;
}

.mi-finder .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Field ---- */
.mi-finder__box {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2, 8px);
  min-height: 52px;
  padding-inline: var(--mi-space-4, 16px);
  background: var(--mi-color-bg-elevated, #fff);
  border: 1px solid var(--mi-color-border, #d9cbc2);
  border-radius: var(--mi-radius-pill, 999px);
  box-shadow: var(--mi-shadow-e1, 0 1px 2px rgba(16,33,52,.06));
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mi-finder__box:hover { border-color: var(--mi-color-border-strong, #c0b2a6); }
.mi-finder__box:focus-within {
  border-color: var(--mi-color-brand-accent, #896f3d);
  box-shadow: 0 0 0 3px rgba(137, 111, 61, .16), var(--mi-shadow-e2, 0 4px 12px rgba(16,33,52,.08));
  background: var(--mi-color-bg-elevated, #fff);
}

.mi-finder__icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--mi-color-text-tertiary, #6e6a66);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mi-finder__box:focus-within .mi-finder__icon { stroke: var(--mi-color-brand-accent, #896f3d); }

.mi-finder__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--mi-color-text-primary, #102134);
  font-family: inherit;
  font-size: var(--mi-font-size-body, 1rem);
  line-height: var(--mi-type-line-height-tight, 1.2);
  text-align: right;
}
.mi-finder__input::placeholder { color: var(--mi-color-text-tertiary, #6e6a66); opacity: 1; }
.mi-finder__input::-webkit-search-cancel-button { display: none; }

.mi-finder__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; margin: 0;
  border: 0;
  border-radius: var(--mi-radius-pill, 999px);
  background: var(--mi-color-bg-sunken, #ece4da);
  color: var(--mi-color-text-secondary, #404751);
  cursor: pointer;
  transition: background-color .15s ease;
}
.mi-finder__clear:hover { background: var(--mi-color-border, #d9cbc2); }
.mi-finder__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mi-finder__clear[hidden] { display: none; }

/* ---- Dropdown ---- */
.mi-finder__dropdown {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--mi-space-2, 8px));
  z-index: var(--mi-z-dropdown, 1000);
  max-height: min(64vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--mi-space-2, 8px);
  background: var(--mi-color-bg-elevated, #fff);
  border: 1px solid var(--mi-color-border, #d9cbc2);
  border-radius: var(--mi-radius-lg, 12px);
  box-shadow: var(--mi-shadow-e3, 0 8px 24px rgba(16,33,52,.1));
}
.mi-finder__dropdown[hidden] { display: none; }

.mi-finder__group + .mi-finder__group { margin-top: var(--mi-space-2, 8px); }
.mi-finder__grouphd {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2, 8px);
  padding: var(--mi-space-2, 8px) var(--mi-space-3, 12px) var(--mi-space-1, 4px);
  color: var(--mi-color-text-tertiary, #6e6a66);
  font-size: var(--mi-font-size-overline, .75rem);
  font-weight: var(--mi-type-weight-600, 600);
  letter-spacing: var(--mi-type-letter-spacing-overline, .04em);
}
.mi-finder__grouphd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mi-finder__row {
  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;
  cursor: pointer;
}
.mi-finder__row:hover,
.mi-finder__row.is-active {
  background: var(--mi-color-bg-sunken, #ece4da);
}
.mi-finder__row.is-active { outline: 2px solid rgba(137,111,61,.35); outline-offset: -2px; }

.mi-finder__rowic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--mi-radius-md, 8px);
  background: var(--mi-color-bg-sunken, #ece4da);
  color: var(--mi-color-brand-primary, #112250);
}
.mi-finder__row.is-active .mi-finder__rowic,
.mi-finder__row:hover .mi-finder__rowic { background: var(--mi-color-bg-elevated, #fff); }
.mi-finder__rowic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mi-finder__rowtx {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mi-finder__rowtitle {
  font-size: var(--mi-font-size-body-sm, .875rem);
  font-weight: var(--mi-type-weight-600, 600);
  line-height: var(--mi-type-line-height-snug, 1.25);
  color: var(--mi-color-text-primary, #102134);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-finder__rowsub {
  font-size: var(--mi-font-size-caption, .8125rem);
  color: var(--mi-color-text-tertiary, #6e6a66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-finder__rowchev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--mi-color-text-tertiary, #6e6a66);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Empty state ---- */
.mi-finder__empty {
  padding: var(--mi-space-6, 24px) var(--mi-space-4, 16px);
  text-align: center;
}
.mi-finder__empty svg { width: 34px; height: 34px; margin: 0 auto var(--mi-space-2,8px); display: block; fill: none; stroke: var(--mi-color-border-strong, #c0b2a6); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mi-finder__empty b { display: block; color: var(--mi-color-text-primary, #102134); font-size: var(--mi-font-size-body-sm, .875rem); font-weight: var(--mi-type-weight-600,600); }
.mi-finder__empty span { display: block; margin-top: 2px; color: var(--mi-color-text-tertiary, #6e6a66); font-size: var(--mi-font-size-caption, .8125rem); }

/* ---- Loading skeleton (no CLS: same row metrics) ---- */
.mi-finder__sk {
  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);
}
.mi-finder__sk i {
  display: block;
  background: linear-gradient(90deg, var(--mi-color-bg-sunken,#ece4da) 25%, var(--mi-color-n-100,#ece4da) 37%, var(--mi-color-bg-sunken,#ece4da) 63%);
  background-size: 400% 100%;
  border-radius: var(--mi-radius-sm, 4px);
  animation: mi-finder-shimmer 1.2s ease-in-out infinite;
}
.mi-finder__sk i.a { width: 38px; height: 38px; border-radius: var(--mi-radius-md,8px); flex: 0 0 auto; }
.mi-finder__sk i.b { height: 12px; width: 55%; }
.mi-finder__sk i.c { height: 10px; width: 32%; margin-top: 6px; }
.mi-finder__sk .l { flex: 1 1 auto; }
@keyframes mi-finder-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mi-finder__sk i { animation: none; } }

/* ---- Header presentation: dropdown panel toggled by the search button ---- */
.site-header .utils { position: relative; }
.mi-finder-header {
  position: absolute;
  top: calc(100% + var(--mi-space-3, 12px));
  inset-inline-end: 0;
  width: min(460px, calc(100vw - 2 * var(--mi-container-padding-inline, 24px)));
  z-index: var(--mi-z-popover, 1200);
}
.mi-finder-header[hidden] { display: none; }
.mi-finder-header .mi-finder__box { box-shadow: var(--mi-shadow-e3, 0 8px 24px rgba(16,33,52,.1)); }
.mi-finder-header .mi-finder__dropdown { box-shadow: var(--mi-shadow-e4, 0 16px 40px rgba(16,33,52,.14)); }

/* ---- Homepage section ---- */
.mi-finder-home {
  padding: var(--mi-space-10, 40px) var(--mi-container-padding-inline, 24px);
  background: var(--mi-color-bg-base, #f5f0e9);
  direction: rtl;
}
.mi-finder-home__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.mi-finder-home__eyebrow {
  margin: 0 0 var(--mi-space-2, 8px);
  color: var(--mi-color-text-gold, #7f6220);
  font-size: var(--mi-font-size-overline, .75rem);
  font-weight: var(--mi-type-weight-600, 600);
  letter-spacing: var(--mi-type-letter-spacing-overline, .04em);
}
.mi-finder-home__title {
  margin: 0 0 var(--mi-space-5, 20px);
  color: var(--mi-color-text-primary, #102134);
  font-family: var(--mi-font-sans, "Vazirmatn", Tahoma, sans-serif);
  font-size: var(--mi-font-size-h2, 1.75rem);
  font-weight: var(--mi-type-weight-700, 700);
  line-height: var(--mi-type-line-height-tight, 1.2);
}
.mi-finder-home .mi-finder { max-width: 560px; margin: 0 auto; }
.mi-finder-home .mi-finder__dropdown { text-align: right; }

/* ---- Drawer presentation: results flow in-document (no clipping inside the scroll container) ---- */
.mi-drawer__finder {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--mi-space-3, 12px) var(--mi-space-4, 16px);
  background: var(--mi-color-bg-elevated, #fff);
  border-bottom: 1px solid var(--mi-color-border, #d9cbc2);
}
.mi-drawer__finder .mi-finder__box { background: var(--mi-color-bg-base, #f5f0e9); }
.mi-drawer__finder .mi-finder__dropdown {
  position: static;
  inset-inline: auto;
  margin-top: var(--mi-space-2, 8px);
  max-height: none;
  box-shadow: none;
  border-color: var(--mi-color-border, #d9cbc2);
}