/* static/css/events_search.css
 * =============================================================================
 * مربع البحث في صفحة الأحداث التاريخية (events_public.html) — لاصقٌ أعلى عند
 * التمرير، بأسلوبٍ زجاجي متّسق مع بقيّة التطبيق. مُحمَّل عبر extra_css فهو
 * خاصٌّ بهذه الصفحة فقط (لا يُثقل بقيّة الصفحات بقواعد لا تخصّها).
 *
 * الوضع الليلي: تُستعمل متغيّرات الثيم الذاتية التبديل من style.css
 * (--main-bg-glass, --glass-border, --main-shadow, --text-main) فلا حاجة
 * لقواعد [data-theme="dark"] منفصلة هنا — نظير city_picker.css حيث تُستعمل
 * فيه متغيّرات مماثلة.
 *
 * موضع اللصق (top): القيمة هنا احتياطية فقط (قبل تحميل JS)؛ يضبطها
 * events_public.js فعلياً على الارتفاع الحقيقي للشريط العلوي (fixed
 * وارتفاعه متغيّر جوّالاً)، فلا يُغطّى مربع البحث ولا يختفي خلف الشريط.
 * =============================================================================
 */

.events-search-sticky {
    position: sticky;
    top: 60px; /* احتياطي قبل قياس events_public.js لارتفاع الشريط الفعلي */
    z-index: 40; /* أسفل الشريط العلوي (50) والقائمة الجانبية (100)، فوق البطاقات */
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--main-bg-glass);
    backdrop-filter: blur(var(--main-blur, 16px)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--main-blur, 16px)) saturate(150%);
    border: var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--main-shadow);
    transition: box-shadow 0.2s, background 0.3s;
}

.events-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.events-search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-main);
    opacity: 0.5;
    font-size: 0.95em;
    pointer-events: none;
}

.events-search-input {
    width: 100%;
    padding: 11px 42px 11px 40px;
    border: 1px solid rgba(120, 140, 180, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-main);
    font: inherit;
    font-size: 1rem;
    direction: rtl;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

:root[data-theme='dark'] .events-search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(120, 140, 180, 0.28);
}

.events-search-input::placeholder {
    color: var(--text-main);
    opacity: 0.5;
}

.events-search-input:focus {
    outline: none;
    border-color: rgba(40, 110, 220, 0.55);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px rgba(40, 110, 220, 0.15);
}

:root[data-theme='dark'] .events-search-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* إخفاء أيقونة "x" الأصلية في Chrome/Safari لحقول type="search" — نستعمل
   زرّ المسح المخصّص .events-search-clear بدلاً منها لتحكّمٍ بصريّ موحّد. */
.events-search-input::-webkit-search-cancel-button {
    display: none;
}

.events-search-clear {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-main);
    opacity: 0.55;
    padding: 6px 8px;
    font-size: 0.9em;
    border-radius: 50%;
    transition: opacity 0.15s, background 0.15s;
}

.events-search-clear:hover {
    opacity: 0.9;
    background: rgba(120, 140, 180, 0.15);
}

.events-search-count {
    margin: 8px 4px 0;
    font-size: 0.82em;
    color: var(--text-main);
    opacity: 0.65;
}