/* ════════════════════════════════════════════════════════════════════
   Search_Box.css — کادرِ جستجو و پنلِ پیشنهادِ آن، روی **هر** صفحه‌ی سایت
   مسیر روی سرور: <docroot>/Search_Page/Search_Box.css

   ⛔ چرا فایلِ جدا — ۲۲ شهریور ۱۴۰۵، اندازه‌گیری‌شده:
      Search.js از روزِ اول روی همه‌ی صفحه‌ها تزریق می‌شد، ولی استایلِ
      پنلش داخلِ Search_Page.css بود که **فقط صفحه‌ی نتایج** لودش می‌کرد.
      پس روی صفحه‌ی اصلی — جایی که بیشترِ جستجوها شروع می‌شود — پنل
      بی‌هیچ استایلی باز می‌شد: `.gd-ac` با position: static، پنل در
      y = -39 روی هدر، و عکسِ کالاها در اندازه‌ی واقعیِ خودشان.
      آزمونِ روزِ ساخت فقط روی صفحه‌ی نتایج انجام شده بود، جایی که CSS
      تصادفاً حاضر بود.

      حالا جاوااسکریپت و استایلش از **یک نقطه** با هم تزریق می‌شوند
      (Home_Page.php، پیش از بستنِ head) و Tests/Storefront_Shell.py هر
      صفحه‌ای را که یکی را بدونِ دیگری دارد قرمز می‌کند.

   ⚠ تزریق در انتهای head است، یعنی این فایل **بعد از** GD_Mobile.css
     می‌نشیند. پس کفِ لمسیِ ۴۴px را خودش رعایت می‌کند (پایینِ فایل،
     pointer: coarse) و به کفِ دیزاین سیستم تکیه نمی‌کند.

   ⛔ هیچ مقدارِ خامی اینجا نوشته نمی‌شود جز اندازه‌ی لمسی و عکس؛ رنگ،
      فاصله، شعاع، سایه و حرکت همه از var(--gd-*) می‌آیند.
   ════════════════════════════════════════════════════════════════════ */

/* برای متنی که فقط صفحه‌خوان باید بشنود. اگر لایه‌ی مشترک روزی خودش
   این را تعریف کرد، این تعریف بی‌ضرر تکرار می‌شود. */
.gd-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;
}

.gd-noscroll { overflow: hidden; }

/* ════════════════════════════════════════════════════════════
   ۱. تکمیلِ خودکار
   ════════════════════════════════════════════════════════════ */
.gd-search { position: relative; }

.gd-ac {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--gd-z-dropdown);
}

.gd-ac__panel {
    margin-top: var(--gd-space-2);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    box-shadow: var(--gd-shadow-3);
    /* بلندتر از این، فهرست خودش صفحه می‌شود. اسکرول داخلِ خودش
       می‌ماند تا صفحه‌ی پشتش تکان نخورد. */
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--gd-space-1) 0;
}

/* ── در حالِ گرفتنِ پیشنهاد ────────────────────────────────────────
   نوارِ باریکِ بالای پنل. لازم است چون رفت‌وبرگشت تا سرورِ ایران روی
   شبکه‌ی موبایل چند صد میلی‌ثانیه است و بدونِ هیچ نشانه‌ای، کادر
   «خراب» به نظر می‌رسد نه «منتظر». محتوای قبلی سرِ جایش می‌ماند تا
   فهرست زیرِ انگشت خالی و پر نشود. */
.gd-ac__panel { position: relative; }

.gd-ac__panel.is-loading::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--gd-primary);
    transform-origin: 0 50%;
    animation: gd-ac-bar 1s var(--gd-ease) infinite;
}

@keyframes gd-ac-bar {
    0%   { transform: scaleX(0);   opacity: 1; }
    70%  { transform: scaleX(1);   opacity: 1; }
    100% { transform: scaleX(1);   opacity: 0; }
}

/* کسی که حرکت را کم کرده، نوارِ متحرک نبیند — یک خطِ ثابت کافی است */
@media (prefers-reduced-motion: reduce) {
    .gd-ac__panel.is-loading::before { animation: none; transform: scaleX(1); }
}

.gd-ac__group + .gd-ac__group {
    border-top: 1px solid var(--gd-line-subtle);
    margin-top: var(--gd-space-1);
    padding-top: var(--gd-space-1);
}

.gd-ac__group ul { list-style: none; margin: 0; padding: 0; }

.gd-ac__grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-space-2);
    padding: var(--gd-space-2) var(--gd-space-4) var(--gd-space-1);
    font-size: var(--gd-text-xs);
    color: var(--gd-muted);
}

.gd-ac__forget {
    background: none;
    border: 0;
    padding: var(--gd-space-1) var(--gd-space-2);
    font: inherit;
    color: var(--gd-primary);
    cursor: pointer;
    border-radius: var(--gd-radius-sm);
}
.gd-ac__forget:hover { background: var(--gd-primary-soft); }

.gd-ac__row {
    display: flex;
    align-items: center;
    gap: var(--gd-space-3);
    /* ۴۴px کفِ هدفِ لمسی است و اینجا با padding تأمین می‌شود نه با
       ارتفاعِ ثابت، تا عنوانِ دوخطی هم جا شود. */
    min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-4);
    cursor: pointer;
    color: var(--gd-ink);
    transition: background var(--gd-dur-fast) var(--gd-ease);
}

.gd-ac__row.is-active,
.gd-ac__row:hover { background: var(--gd-surface-hover); }

/* ردیفِ انتخاب‌شده باید بدونِ رنگ هم تشخیص‌پذیر باشد — برای کسی که
   رنگ را نمی‌بیند، و برای حالتِ کنتراستِ بالا. */
.gd-ac__row.is-active {
    box-shadow: inset 3px 0 0 0 var(--gd-primary);
}

.gd-ac__row > i {
    flex: none;
    width: 1.25rem;
    text-align: center;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
}

.gd-ac__row img {
    flex: none;
    width: 40px; height: 40px;
    object-fit: contain;
    border-radius: var(--gd-radius-sm);
    background: var(--gd-surface-sunken);
}

.gd-ac__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--gd-text-sm);
    /* عنوانِ کالا بلند است؛ دو خط سقفِ منطقی است */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gd-ac__row--nav .gd-ac__label { font-weight: 500; }

.gd-ac__meta,
.gd-ac__price {
    flex: none;
    font-size: var(--gd-text-xs);
    color: var(--gd-muted);
    white-space: nowrap;
}
.gd-ac__price { color: var(--gd-price); font-weight: 600; }

.gd-ac__none {
    padding: var(--gd-space-4);
    font-size: var(--gd-text-sm);
    color: var(--gd-muted);
    text-align: center;
}
.gd-ac__none a { color: var(--gd-primary); }

/* دکمه‌ی پاک‌کردن، سرِ دیگرِ کادر نسبت به دکمه‌ی ذره‌بین */
.gd-ac__clear {
    position: absolute;
    inset-inline-end: var(--gd-space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--gd-muted);
    border-radius: var(--gd-radius-full);
    cursor: pointer;
}
.gd-ac__clear:hover { background: var(--gd-surface-sunken); color: var(--gd-ink); }

/* ── چیپ‌ها: «جستجوهای اخیر» و «جستجوهای پرطرفدار» ─────────────────
   الگوی دیجی‌کالای موبایل، به خواسته‌ی کاربر (۲۲ شهریور ۱۴۰۵). چیپ
   جای کمتری از ردیف می‌گیرد، پس هشت پیشنهاد بدونِ اسکرول جا می‌شوند. */
.gd-ac__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gd-space-2);
    list-style: none;
    margin: 0;
    padding: var(--gd-space-1) var(--gd-space-4) var(--gd-space-3);
}

.gd-ac__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gd-space-2);
    max-width: 100%;
    min-height: 36px;
    padding: 0 var(--gd-space-3);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface);
    color: var(--gd-ink);
    font-size: var(--gd-text-sm);
    cursor: pointer;
    transition: background var(--gd-dur-fast) var(--gd-ease),
                border-color var(--gd-dur-fast) var(--gd-ease);
}
.gd-ac__chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gd-ac__chip > i { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-ac__chip:hover,
.gd-ac__chip.is-active {
    background: var(--gd-surface-hover);
    border-color: var(--gd-line-strong);
}
/* انتخاب با کیبورد باید بدونِ رنگ هم دیده شود — قابِ دوم، نه لهجه‌ی یک‌ضلعی */
.gd-ac__chip.is-active { box-shadow: 0 0 0 2px var(--gd-primary-border); }

/* «وستا در رنگ‌های نقاشی» — پرسش به رنگِ متن، «در …» به رنگِ برند؛
   همان تمایزی که دیجی‌کالا با آبیِ «در انواع …» می‌گذارد. */
.gd-ac__q  { color: var(--gd-ink); }
.gd-ac__in { color: var(--gd-primary); }

/* گوشی: پنل تا نزدیکِ ته صفحه باز می‌شود، شبیهِ صفحه‌ی جستجوی دیجی‌کالا.
   dvh نه vh — روی موبایل vh نوارِ آدرس را حساب نمی‌کند و ته پنل زیرش
   می‌رفت. */
@media (max-width: 767px) {
    .gd-ac__panel { max-height: calc(100dvh - 9rem); }
}

/* دکمه‌ی پاک‌کردنِ خودِ مرورگر. ما دکمه‌ی خودمان را داریم (بالا)؛ بدونِ
   این، روی کروم دو «×» کنارِ هم دیده می‌شد. */
.gd-search input[type="search"]::-webkit-search-cancel-button,
.gd-search input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* لمس: ۴۴px کفِ هدفِ لمسی است. ۳۲px روی موس کافی است و روی انگشت نه. */
@media (pointer: coarse) {
    .gd-ac__clear { width: 44px; height: 44px; }
    /* چیپ‌ها روی موس ۳۶px کافی‌اند؛ روی انگشت کفِ پروژه ۴۴px است.
       اندازه‌گیریِ ۲۲ شهریور روی گوشی: ۳۶px — زیرِ کف. */
    .gd-ac__chip  { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .gd-ac__row { transition: none; }
}