/* =========================================================
   FOS7TY — SEARCH SUGGESTIONS (1.7.0)
   ---------------------------------------------------------
   صندوق اقتراحات البحث. الملف بيتحمّل على **كل صفحات الموقع** (مش صفحات
   فسحتي بس) عشان الاقتراحات تشتغل على أي فورم بحث — فورمنا المتقدّم أو
   فورم البحث بتاع الثيم أو أي `form[role="search"]`.

   - الصندوق `absolute` جوّه حاوية `position: relative` (الـ JS بيضيف
     الكلاس `fos7ty-suggest-anchor` على الأب).
   - الحالة النشطة: خلفية ساند + حد نيلي على الجانب المنطقي.
   - مفيش تدرّج ولا ظل ملوّن. كل المسافات منطقية (RTL/LTR).
   - التوكنز بقيم fallback لأن `frontend.css` مش مضمون تحميله هنا.
   ========================================================= */

:root {
    --f7-s-sand-50: #FAF7F1;
    --f7-s-sand-200: #E6DCCB;
    --f7-s-ink: #1C1A17;
    --f7-s-ink-60: #5A554C;
    --f7-s-nile: #0F4C5C;
    --f7-s-white: #FFFFFF;
    --f7-s-line: 1px solid #E6DCCB;
    --f7-s-radius: 8px;
    --f7-s-shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 10px 28px rgba(28, 26, 23, .06);
    --f7-s-focus: 2px solid #0F4C5C;
}

.fos7ty-suggest-anchor {
    position: relative;
}

.fos7ty-suggest {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline: 0;
    z-index: 60;

    background: var(--f7-s-white);
    color: var(--f7-s-ink);
    border: var(--f7-s-line);
    border-radius: var(--f7-s-radius);
    box-shadow: var(--f7-s-shadow);
    overflow: hidden;
    text-align: start;
}

.fos7ty-suggest[hidden] {
    display: none !important;
}

.fos7ty-suggest-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.fos7ty-suggest-head:not(:empty) {
    border-block-end: var(--f7-s-line);
}

.fos7ty-suggest-status {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--f7-s-ink-60);
}

.fos7ty-suggest-status:empty {
    padding: 0;
}

.fos7ty-suggest-spinner {
    display: inline-block;
    flex: 0 0 auto;
    inline-size: 12px;
    block-size: 12px;
    margin-inline-start: 12px;
    border: 1.5px solid var(--f7-s-sand-200);
    border-block-start-color: var(--f7-s-nile);
    border-radius: 50%;
    animation: fos7ty-suggest-spin .8s linear infinite;
}

.fos7ty-suggest-spinner[hidden] {
    display: none !important;
}

@keyframes fos7ty-suggest-spin {
    to {
        transform: rotate(360deg);
    }
}

.fos7ty-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.fos7ty-suggest-item {
    border-block-start: var(--f7-s-line);
}

.fos7ty-suggest-item:first-child {
    border-block-start: 0;
}

.fos7ty-suggest-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    min-height: 44px;
    text-decoration: none;
    color: var(--f7-s-ink);
}

.fos7ty-suggest-item.is-active .fos7ty-suggest-link,
.fos7ty-suggest-link:hover,
.fos7ty-suggest-link:focus-visible {
    background: var(--f7-s-sand-50);
    color: var(--f7-s-ink);
}

.fos7ty-suggest-link:focus-visible {
    outline: var(--f7-s-focus);
    outline-offset: -2px;
}

.fos7ty-suggest-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.fos7ty-suggest-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--f7-s-ink-60);
}

@media (prefers-reduced-motion: reduce) {
    .fos7ty-suggest-spinner {
        animation: none;
    }
}

@media print {
    .fos7ty-suggest {
        display: none !important;
    }
}