/* Smart Search on the Rawaj website: the instant results under the search boxes (smartsearch-rawaj.js). */
.ssr-box {
  position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 6px);
  max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ink, #222); border: 1px solid var(--line, #ebebeb); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14); padding: 6px; text-align: start; font-size: 14px; line-height: 1.4;
}
.ssr-box[hidden] { display: none; }
.ssr-sec + .ssr-sec, .ssr-row + .ssr-sec, .ssr-read + .ssr-sec { margin-top: 4px; border-top: 1px solid var(--line, #ebebeb); padding-top: 4px; }
.ssr-title { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted, #6a6a6a); }
.ssr-row, .ssr-item, .ssr-all {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.ssr-row svg, .ssr-all svg { flex: none; color: var(--muted, #6a6a6a); }
.ssr-row:hover, .ssr-item:hover, .ssr-all:hover, .ssr-row.is-active, .ssr-item.is-active, .ssr-all.is-active { background: var(--surface-2, #f7f7f7); }
.ssr-row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssr-dym b { color: var(--accent, #f2542d); }
.ssr-thumb { flex: none; width: 52px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f2f2f2); }
.ssr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssr-item-text { display: grid; gap: 2px; min-width: 0; }
.ssr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ssr-meta { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted, #6a6a6a); }
.ssr-meta b { color: var(--ink, #222); font-weight: 600; }
.ssr-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px; color: var(--muted, #6a6a6a); }
.ssr-tag { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft, #fff1ec); color: var(--accent-2, #d9431d); font-weight: 500; }
.ssr-none { padding: 12px 10px 6px; color: var(--muted, #6a6a6a); }
.ssr-all { justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--line, #ebebeb); border-radius: 0 0 10px 10px; font-weight: 600; color: var(--accent-2, #d9431d); }
.ssr-all svg { color: currentColor; }
[dir="rtl"] .ssr-flip { transform: scaleX(-1); }

/* the assistant's button inside the search box (next to the microphone) */
.ssr-has-smart > input { padding-inline-end: 76px !important; }
.ssr-has-smart:not(.vwrap) > input { padding-inline-end: 42px !important; }
.ssr-smart {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 40px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--accent, #f2542d); cursor: pointer;
}
.ssr-has-smart:not(.vwrap) > .ssr-smart { inset-inline-end: 4px; }
.ssr-smart:hover { background: var(--accent-soft, #fff1ec); }
@media (max-width: 640px) { .ssr-box { max-height: 65vh; } .ssr-thumb { width: 44px; height: 36px; } }