/*
 * «مِقَص» — قسم التصفّح في تطبيق الزبون: الرئيسية والبحث والفلاتر، منقولة من الأنماط المضمّنة في
 * customer-app.dc.html (الرئيسية ~92-195، البحث ~196-235، الفلاتر ~236-291) بعرض 412px.
 * تُحمَّل من صفحات القسم وحدها بعد organic.css و app.css و customer.css. كل لون من متغيّرات
 * organic.css، والاتجاه بخصائص منطقية ليعمل RTL و LTR. البادئات: hm- الرئيسية، srch- البحث، flt- الفلاتر.
 */

/* ── الشرائح السريعة (الرئيسية والبحث): صف أفقي يتمرر ── */
.qchips { display: flex; gap: 8px; margin-top: 12px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.qchips .chip { flex: none; padding: 8px 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; }

/* ══ الرئيسية ══ */
.hm { padding-bottom: 18px; animation: scrIn .22s ease both; }
.hm-head { padding: 18px 20px 16px; border-radius: 0 0 30px 30px; background: var(--color-surface); }
.hm-row { display: flex; align-items: center; gap: 12px; }
.hm-hello { flex: 1; min-width: 0; }
.hm-greet { font-size: 12.5px; color: var(--color-neutral-700); }
.hm-name { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
.hm-round { position: relative; width: 44px; height: 44px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text); }
.hm-round:hover { color: var(--color-text); background: var(--color-neutral-100); }
.hm-dot { position: absolute; top: 9px; inset-inline-end: 11px; width: 9px; height: 9px; border-radius: 999px; background: var(--color-accent); border: 2px solid var(--color-bg); }
.hm-search { display: flex; align-items: center; gap: 10px; min-height: 50px; margin-top: 14px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-neutral-600); }
.hm-search:focus-within { border-color: var(--color-accent); }
.hm-search svg { flex: none; }
.hm-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; font-size: 14.5px; color: var(--color-text); }
/* type="search": Safari يرسمه بإطاره الأبيض المستدير ما لم يُلغَ مظهره الأصلي */
.hm-search input, .srch-bar input { -webkit-appearance: none; appearance: none; }
.hm-search input::placeholder, .srch-bar input::placeholder { color: var(--color-neutral-600); opacity: 1; }
.hm-body { padding: 18px 20px 0; }

/* «أبي أحلق الحين» */
.hm-instant { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border-radius: 26px; background: var(--color-accent); color: var(--color-bg); box-shadow: var(--shadow-md); text-align: start; text-decoration: none; }
.hm-instant:hover { color: var(--color-bg); background: var(--color-accent-600); }
.hm-instant-ico { width: 52px; height: 52px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(245, 234, 216, .22); }
.hm-instant-main { flex: 1; min-width: 0; }
.hm-instant-t { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.25; }
.hm-instant-s { display: block; font-size: 12.5px; opacity: .92; }

/* اختصارا الخريطة والمفضلة */
.hm-links { display: flex; gap: 10px; margin-top: 12px; }
.hm-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-radius: 20px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.hm-link svg { flex: none; color: var(--color-accent-700); }
.hm-link:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* «قريبون منك» */
.hm-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 0 10px; }
.hm-sec h2, .hm-offers-title { margin: 0; font-size: 20px; }
.hm-sec .btn-ghost { font-size: 12.5px; }
.hm-tip { margin-bottom: 12px; text-decoration: none; }
.hm-tip:hover { color: var(--color-accent-2-800); }
.hm-list { display: flex; flex-direction: column; gap: 12px; }

/* «عروض هذا الأسبوع» */
.hm-offers-title { margin: 22px 0 10px; }
.hm-offers { display: flex; gap: 12px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.hm-offer { flex: none; width: 224px; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 24px; text-decoration: none; }
.hm-offer.t0 { background: var(--color-accent); color: var(--color-bg); }
.hm-offer.t1 { background: var(--color-accent-2-700); color: var(--color-bg); }
.hm-offer.t2 { background: var(--color-surface); color: var(--color-text); }
.hm-offer.t0:hover, .hm-offer.t1:hover { color: var(--color-bg); }
.hm-offer.t2:hover { color: var(--color-text); }
.hm-offer-big { font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 1; }
.hm-offer-t { font-size: 13.5px; font-weight: 600; }
.hm-offer-s { font-size: 11.5px; opacity: .85; }

/* ══ البحث / النتائج ══ */
.srch { padding: 18px 20px; animation: scrIn .22s ease both; }
.srch-title { margin: 0 0 12px; font-size: 22px; }
.srch-bar { display: flex; align-items: center; gap: 9px; }
.srch-bar .search { flex: 1; min-width: 0; color: var(--color-neutral-600); }
.srch-bar .search:focus-within { border-color: var(--color-accent); }
.srch-bar .search svg { flex: none; }
.srch-filter { position: relative; width: 48px; height: 48px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-bg); }
.srch-filter:hover { color: var(--color-bg); background: var(--color-accent-600); }
/* نقطة حين تُفعَّل فلاتر من شاشة "الفلاتر" غير الشرائح السريعة */
.srch-filter.is-active::after { content: ""; position: absolute; top: 8px; inset-inline-end: 8px; width: 10px; height: 10px; border-radius: 999px; background: var(--color-bg); border: 2px solid var(--color-accent); }
.srch .qchips { padding-bottom: 0; }
.srch-results { transition: opacity .15s; }
.srch-results.is-loading { opacity: .55; }
/* سطر العدد: "N نتيجة مطابقة" ثم رابطا الموقع والخريطة (تبديل القائمة ← الخريطة بنفس الفلاتر) */
.srch-meta { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; font-size: 12.5px; color: var(--color-neutral-700); }
.srch-count { flex: 1; min-width: 0; }
.srch-loc, .srch-map { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--color-accent-700); }
.srch-loc { max-width: 42%; }
.srch-loc span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.srch-map { flex: none; white-space: nowrap; }
.srch-list { display: flex; flex-direction: column; gap: 12px; }
.srch-list .cb-av { width: 54px; height: 54px; font-size: 21px; }
.srch-pages { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
/* بلا روابط (آخر صفحة): Blade يترك مسافات بيضاء فلا يطابق :empty، فالإخفاء بغياب الروابط */
.srch-pages:not(:has(a)) { display: none; }
.srch-more { width: 100%; min-height: 46px; }

/* ══ الفلاتر ══ */
.flt { flex: 1; display: flex; flex-direction: column; animation: scrIn .22s ease both; }
.topbar.flt-top { margin: 0; padding: 16px 18px; }
.flt-body { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 4px 20px 20px; }
.flt-label { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--color-text); }
.flt-range-head { display: flex; justify-content: space-between; gap: 10px; }
.flt-range-head output { color: var(--color-accent-700); }
.flt .chip { padding: 8px 15px; font-weight: 600; line-height: 1.25; }
.flt-ratings { display: flex; gap: 8px; }
.flt-ratings .chip { flex: 1; min-width: 0; padding: 10px 0; }
.flt-toggles { display: flex; flex-direction: column; gap: 2px; }
.flt-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.flt-toggle input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.flt-toggle-t { font-size: 14px; font-weight: 600; color: var(--color-text); }
/* المفتاح: المقبض يمينًا حين يعمل في الاتجاهين، كما في التصميم */
.flt-sw { direction: ltr; width: 48px; height: 28px; flex: none; padding: 3px; border-radius: 999px; display: flex; justify-content: flex-start; background: var(--color-neutral-300); transition: background .2s; }
.flt-sw::after { content: ""; width: 22px; height: 22px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-sm); }
.flt-toggle input:checked + .flt-sw { justify-content: flex-end; background: var(--color-accent); }
.flt-toggle input:focus-visible + .flt-sw { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.flt-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--color-surface); }
.flt-clear { min-height: 50px; padding-inline: 20px; }
.flt-apply { flex: 1; min-height: 50px; font-size: 15px; }