/* دليل الخدمات — الحزمة 18: قائمة مضغوطة + شاشة التصفية + صفحة الجهة + لوحة صاحب الجهة.
   يستعمل متغيرات الثيم فقط (يتبع الوضعين الليلي والنهاري). لا style="" في القوالب (CSP). الحد الأدنى للمس 44px. */

.dx-main{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:100%}
.dx-layout{min-width:0}
.dx-row[hidden],.dx-ad[hidden],.dx-more[hidden],.dx-empty[hidden]{display:none!important}

/* ---------- شريط البحث + زر التصفية ---------- */
.dx-bar{position:sticky;top:0;z-index:5;display:flex;gap:10px;padding:10px 0;background:var(--bg)}
.dx-search{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border-strong);color:var(--muted)}
.dx-search:focus-within{border-color:var(--gold)}
.dx-search input{flex:1 1 auto;width:100%;min-width:0;height:46px;border:0;background:none;color:var(--text);font:inherit;font-size:15px;outline:0}
.dx-search input::placeholder{color:var(--muted)}
.dx-fbtn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.dx-fbtn:hover{border-color:var(--gold)}
.dx-fbtn b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:12px;line-height:20px;text-align:center}
.dx-fbtn b[hidden]{display:none}

/* ---------- التصنيفات ---------- */
.dx-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;min-width:0;max-width:100%}
.dx-chips::-webkit-scrollbar{display:none}
.dx-count{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.dx-count b{color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- الصف المضغوط ---------- */
.dx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dx-row{display:block}
.dx-row__a{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:border-color .2s ease,transform .12s ease}
.dx-row__a:hover{border-color:var(--gold);color:var(--text)}
.dx-row__a:active{transform:scale(.99)}
.dx-row--f .dx-row__a{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.dx-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--raised);color:var(--gold)}
.dx-row__m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.dx-row__n{display:flex;align-items:center;gap:8px;min-width:0}
.dx-row__n b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-row__s{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-row__e{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--muted)}
.dx-star{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dx-star svg{color:var(--gold)}
.dx-new{padding:2px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-weight:700;font-size:11px;border:1px solid var(--gold-line)}
.dx-fl{padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:11px}

/* ---------- شارات التوثيق ---------- */
.dx-lv{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--border-strong);color:var(--text-2);background:var(--surface-2)}
.dx-lv--ph{color:var(--up);border-color:var(--up);background:var(--up-bg)}
.dx-lv--tr{color:var(--focus);border-color:var(--focus)}
.dx-lv--dc{color:var(--up);border-color:var(--up);background:var(--up-bg)}
.dx-lv--gd{color:var(--on-gold);background:var(--gold);border-color:var(--gold)}
.dx-lv--lg{height:28px;padding:0 12px;font-size:13px}

/* ---------- عرض المزيد + الحالات الفارغة ---------- */
.dx-more{display:flex;justify-content:center;padding:6px 0}
.dx-more .rs-btn{min-height:48px;padding:0 24px}
.dx-empty{padding:28px 16px;border-radius:16px;background:var(--surface);border:1px dashed var(--border-strong);text-align:center;color:var(--text-2);line-height:1.8}
.dx-empty .rs-btn{margin-top:12px}

/* ---------- شاشة التصفية: ورقة سفلية في الهاتف، شريط جانبي على الكمبيوتر ---------- */
.dx-sheet{position:fixed;inset:0;z-index:40;display:none}
.dx-sheet.is-open{display:block}
.dx-sheet__bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.dx-sheet__p{position:absolute;inset-inline:0;bottom:0;max-height:86vh;overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:16px;animation:dx-up .22s ease}
@keyframes dx-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.dx-sheet__h{display:flex;align-items:center;justify-content:space-between}
.dx-sheet__h b{font-size:17px}
.dx-fs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.dx-fs legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--muted)}
.dx-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:14px;cursor:pointer}
.dx-opt input{width:20px;height:20px;accent-color:var(--gold);margin:0;flex:0 0 auto}
.dx-opt:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.dx-opt small{color:var(--muted);font-variant-numeric:tabular-nums}
.dx-sheet__f{display:flex;gap:10px}
.dx-sheet__f .rs-btn{flex:1 1 0;min-height:48px}
.dx-lock{overflow:hidden}

/* ---------- إعلان AdSense (مغلق افتراضياً؛ يظهر فقط بمفاتيحه) ---------- */
.dx-ad{position:relative;min-height:280px;margin:12px 0;padding:26px 12px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.dx-ad__l{position:absolute;top:6px;inset-inline-start:12px;font-size:11px;font-weight:700;color:var(--muted)}
.dx-ad ins{display:block;min-height:250px}

/* ---------- ملاحظة المستويات + الشريط ---------- */
.dx-note{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;line-height:1.8;color:var(--text-2)}
.dx-note summary{cursor:pointer;font-weight:700;color:var(--text);min-height:32px;display:flex;align-items:center}
.dx-addbar{display:flex;flex-wrap:wrap;gap:10px}
.dx-addbar .rs-btn{flex:1 1 180px;min-height:48px}

/* ---------- صفحة الجهة ---------- */
.dx-item{display:flex;flex-direction:column;gap:16px}
.dx-crumb{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dx-crumb a{color:var(--text-2)}
.dx-hero{display:flex;gap:14px;align-items:flex-start}
.dx-hero .dx-ic{width:64px;height:64px;border-radius:18px}
.dx-hero h1{font-size:24px;line-height:1.3;margin:0}
.dx-hero__m{display:flex;flex-direction:column;gap:8px;min-width:0}
.dx-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted)}
.dx-meta span{display:inline-flex;align-items:center;gap:5px}
.dx-grid{display:flex;flex-direction:column;gap:16px}
.dx-card{padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.dx-card h2{font-size:16px;font-weight:700;margin:0}
.dx-card p{margin:0;line-height:1.9;color:var(--text-2);font-size:15px;overflow-wrap:anywhere}
.dx-kv{display:flex;flex-direction:column;gap:8px}
.dx-kv div{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px solid var(--divider);padding-bottom:8px}
.dx-kv div:last-child{border-bottom:0;padding-bottom:0}
.dx-kv span:first-child{color:var(--muted)}
.dx-cta .rs-btn{min-height:54px;width:100%}
.dx-cta small{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.7;text-align:center}
.dx-warn{padding:14px 16px;border-radius:16px;background:var(--down-bg);border:1px solid var(--down);font-size:13.5px;line-height:1.9;color:var(--text)}
.dx-sum{display:flex;align-items:center;gap:14px}
.dx-sum__n{font-size:36px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dx-sum__s{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.dx-stars-ro{display:inline-flex;gap:2px;color:var(--gold)}
.dx-rev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dx-rev li{padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.dx-rev__h{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.dx-tags{display:flex;flex-wrap:wrap;gap:6px}
.dx-tags span{padding:3px 10px;border-radius:999px;font-size:12px;background:var(--raised);color:var(--text-2)}
.dx-reply{padding:10px 12px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold-line);font-size:13.5px;line-height:1.8}
.dx-reply b{display:block;font-size:12px;color:var(--gold);margin-bottom:2px}
.dx-msg{padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.7}
.dx-msg--ok{background:var(--up-bg);border:1px solid var(--up)}
.dx-msg--err{background:var(--down-bg);border:1px solid var(--down)}

/* ---------- نموذج التقييم ---------- */
.dx-rf{display:flex;flex-direction:column;gap:14px}
.dx-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;border:0;margin:0;padding:0}
.dx-stars legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:700;float:none}
.dx-stars input{position:absolute;opacity:0;width:1px;height:1px}
.dx-stars label{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:30px;line-height:1;color:var(--faint);cursor:pointer}
.dx-stars input:checked ~ label,.dx-stars label:hover,.dx-stars label:hover ~ label{color:var(--gold)}
.dx-stars input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
.dx-chk{display:flex;flex-wrap:wrap;gap:8px}
.dx-chk label{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);font-size:13.5px;cursor:pointer;color:var(--text-2)}
.dx-chk input{position:absolute;opacity:0;width:1px;height:1px}
.dx-chk label:has(input:checked){border-color:var(--gold);background:var(--gold-soft);color:var(--text)}
.dx-chk label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.dx-ta{width:100%;box-sizing:border-box;min-height:84px;padding:12px 14px;border-radius:14px;background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);font:inherit;font-size:15px;line-height:1.8;resize:vertical}
.dx-hint{font-size:13px;color:var(--muted);line-height:1.8}
.dx-sim{display:flex;flex-direction:column;gap:8px}

/* ---------- لوحة صاحب الجهة ---------- */
.dx-mgr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dx-stat{padding:12px 8px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);text-align:center;display:flex;flex-direction:column;gap:2px}
.dx-stat b{font-size:22px;font-variant-numeric:tabular-nums}
.dx-stat span{font-size:12px;color:var(--muted)}
.dx-st{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--raised);color:var(--text-2)}
.dx-st--ok{background:var(--up-bg);color:var(--up)}
.dx-st--off{background:var(--down-bg);color:var(--down)}
.dx-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.dx-docs li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--divider)}

/* ---------- نموذج الإضافة: الهاتف والإقرار ---------- */
.dx-ph{display:flex;flex-direction:column;gap:6px}
.dx-ph__s{min-height:22px;font-size:13px;line-height:1.7}
.dx-ph__s[data-s="free"]{color:var(--up)}
.dx-ph__s[data-s="taken"],.dx-ph__s[data-s="pending"],.dx-ph__s[data-s="invalid"]{color:var(--down)}
.dx-ack{padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--gold-line-2);display:flex;flex-direction:column;gap:10px}
.dx-ack[hidden]{display:none}
.dx-ack label{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.8;cursor:pointer}
.dx-ack input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}

/* ---------- الكمبيوتر ---------- */
@media (min-width:1024px){
  .dx-wrap{max-width:1120px}
  .dx-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
  .dx-fbtn{display:none}
  .dx-sheet,.dx-sheet.is-open{display:block;position:sticky;inset:auto;top:84px;z-index:1}
  .dx-sheet__bg,.dx-sheet__h button,.dx-sheet__f .dx-apply{display:none}
  .dx-sheet__p{position:static;max-height:none;border-radius:20px;animation:none}
  .dx-bar{position:static;padding:0}
  .dx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-ad{grid-column:1/-1}
  .dx-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
  .dx-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
}
@media (max-width:1023.98px){.dx-side{display:flex;flex-direction:column;gap:16px}}
@media (prefers-reduced-motion:reduce){.dx-sheet__p{animation:none}.dx-row__a{transition:none}}
@media (max-width:1023.98px){.dx-cta--d .rs-btn--cta{display:none}}
.dx-report-m{display:none}

/* زر الإرسال يظهر بعد تعليم مربع الشروط */
.dx-gate[hidden],.dx-gatehint[hidden]{display:none}
.dx-gate:not([hidden]){display:flex;flex-direction:column;gap:10px;animation:dx-gate-in .22s ease-out}
.dx-gatehint{margin:0;font-size:13px;color:var(--muted)}
.dx-terms{display:flex;gap:10px;align-items:flex-start;min-height:44px;font-size:14px;line-height:1.8}
.dx-terms input{margin-top:6px;width:20px;height:20px;flex:0 0 auto}
@keyframes dx-gate-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dx-gate:not([hidden]){animation:none}}
