/* محاكاة نافذة البحث «برق» في الرئيسية (index.html / index-en.html).
   تُحرّكها assets/barq-demo.js: كتابة الكلمة ثم ظهور النتائج ثم التنقل بالأسهم ثم Enter.
   الحالة النهائية للمثال الأول مكتوبة في HTML، فتظهر كما هي بلا JavaScript ولزواحف البحث. */
.brq {
    --brq-backdrop: #e9eef5;
    --brq-panel: #fff;
    --brq-line: #e2e8f0;
    --brq-ink: #0f172a;
    --brq-text: #334155;
    --brq-muted: #64748b;
    --brq-tile: #f1f5f9;
    --brq-tile-ink: #475569;
    --brq-foot: #f8fafc;
    --brq-key: #fff;
    padding: 18px;
    background: var(--brq-backdrop);
}
.dark .brq {
    --brq-backdrop: #0b1220;
    --brq-panel: #111a2c;
    --brq-line: #273349;
    --brq-ink: #e2e8f0;
    --brq-text: #cbd5e1;
    --brq-muted: #94a3b8;
    --brq-tile: #1e293b;
    --brq-tile-ink: #cbd5e1;
    --brq-foot: #0f1727;
    --brq-key: #1e293b;
}
.brq-panel {
    overflow: hidden;
    border: 1px solid var(--brq-line);
    border-radius: 18px;
    background: var(--brq-panel);
    box-shadow: 0 18px 40px -22px rgb(15 23 42 / .35);
    color: var(--brq-ink);
}
.brq-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--brq-line); }
.brq-search { flex: none; width: 22px; height: 22px; color: var(--brq-muted); }
.brq-input { flex: 1; min-width: 0; min-height: 30px; display: flex; align-items: center; font-size: 1.05rem; white-space: nowrap; overflow: hidden; }
.brq-ph { color: var(--brq-muted); font-size: .95rem; }
.brq-input.has-text .brq-ph { display: none; }
.brq-caret { display: inline-block; width: 1.5px; height: 1.25em; margin-inline: 1px; background: var(--brq-ink); animation: brq-blink 1s steps(1) infinite; }
.brq-tools { flex: none; display: flex; align-items: center; gap: 12px; color: var(--brq-muted); }
.brq-tools svg { width: 16px; height: 16px; }
.brq-tools .brq-x { width: 19px; height: 19px; margin-inline-start: 8px; }

/* بلا JavaScript تأخذ النتائج ارتفاعها؛ مع التحريك يثبت الارتفاع حتى لا تقفز الصفحة */
.brq-results { padding: 8px; }
.brq--js .brq-results { height: 304px; overflow: hidden; }
.brq-list { display: flex; flex-direction: column; gap: 4px; }
.brq-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--brq-text);
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.brq-row.is-on {
    color: #fff;
    background: linear-gradient(to right, #0ea5e9, #3b82f6);
    box-shadow: 0 10px 22px -12px rgb(37 99 235 / .6);
    transform: scale(1.015);
}
.brq-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--brq-tile); color: var(--brq-tile-ink); transition: background-color .22s ease, color .22s ease; }
.brq-row.is-on .brq-tile { background: rgb(255 255 255 / .2); color: #fff; }
.brq-tile svg { width: 22px; height: 22px; }
.brq-text { flex: 1; min-width: 0; }
.brq-title { margin: 0; overflow: hidden; font-size: .95rem; font-weight: 800; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.brq-desc { margin: 1px 0 0; overflow: hidden; font-size: .78rem; line-height: 1.5; color: var(--brq-muted); white-space: nowrap; text-overflow: ellipsis; }
.brq-row.is-on .brq-desc { color: rgb(255 255 255 / .9); }
.brq-row.is-opening { animation: brq-open .5s ease; }

.brq-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 220px; padding: 24px; text-align: center; color: var(--brq-muted); }
.brq-empty svg { width: 52px; height: 52px; margin-bottom: 6px; color: #cbd5e1; }
.dark .brq-empty svg { color: #475569; }
.brq-empty p { margin: 0; }
.brq-empty-hint { font-size: .95rem; }
.brq-empty-ex { font-size: .78rem; opacity: .8; }

.brq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 12px; border-top: 1px solid var(--brq-line); background: var(--brq-foot); font-size: .72rem; color: var(--brq-muted); }
.brq-key { display: inline-flex; align-items: center; gap: 6px; }
.brq-key kbd {
    padding: 2px 8px;
    border: 1px solid var(--brq-line);
    border-radius: 6px;
    background: var(--brq-key);
    color: var(--brq-text);
    box-shadow: 0 1px 0 var(--brq-line);
    font: 700 .7rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.brq-key kbd.k-enter { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.brq-key kbd.k-tab { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.dark .brq-key kbd.k-enter { border-color: #065f46; background: #064e3b66; color: #6ee7b7; }
.dark .brq-key kbd.k-tab { border-color: #075985; background: #0c4a6e66; color: #7dd3fc; }
.brq-key kbd.is-pressed { transform: translateY(1px) scale(.92); box-shadow: none; filter: brightness(.94); }

/* ظهور النتائج أثناء التحريك */
.brq-in { animation: brq-in .3s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes brq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes brq-open { 0% { transform: scale(1.015); } 40% { transform: scale(.985); } 100% { transform: scale(1.015); } }
@keyframes brq-blink { 50% { opacity: 0; } }

@media (max-width: 640px) {
    .brq { padding: 10px; }
    .brq-head { padding: 12px; }
    .brq-tools { gap: 9px; }
    .brq--js .brq-results { height: 292px; }
    .brq-title { font-size: .88rem; }
    .brq-tile { width: 40px; height: 40px; }
    .brq-key-tab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .brq-in, .brq-caret, .brq-row.is-opening { animation: none; }
    .brq-row, .brq-tile, .brq-key kbd { transition: none; }
}