/* ============================================================================
   services.css — سوق الخدمات (services.html) وصفحة الخدمة (service.html)
   [FDX_FUOP_SERVICES_CSS] · يعتمد توكنات fuop.css ولا يعدّلها. مالك الملف: كلود.
   لا مكوّن عامّ هنا — العامّ مكانه fuop.css. خصائص منطقية فقط (inline-start/end).
   ========================================================================= */

/* ═════════════════ مشترك ═════════════════ */
.mkt-lead{max-inline-size:64ch}

/* شريط الأدوات: بحث + ترتيب */
.sv-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);
  align-items:center;margin-block-end:var(--s4)}
.sv-tools .input-wrap{inline-size:100%}
.sv-sort{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.sv-sort .select{inline-size:auto;min-inline-size:172px}
.sv-sort .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}

/* شريط التصنيفات — قابل للتمرير أفقياً داخل نفسه لا على الصفحة */
.cat-bar{display:flex;gap:var(--s2);overflow-x:auto;padding-block:var(--s2) var(--s3);
  scrollbar-width:thin}
.cat-bar::-webkit-scrollbar{block-size:5px}
.cat-bar::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
.cat-bar .chip{white-space:nowrap;flex:none}
.cat-bar .chip .n{font-size:var(--fs-xs);color:var(--ink-4);margin-inline-start:5px;
  font-variant-numeric:tabular-nums}
.cat-bar .chip.on .n{color:inherit;opacity:.75}

/* صفّ المرشّحات */
.sv-filters{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);margin-block-end:var(--s4)}
.sv-filters .fgrp{display:flex;align-items:center;gap:var(--s2)}
.sv-filters .fgrp>.f-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}
.sv-filters .select{inline-size:auto;min-inline-size:150px}
.price-range{display:flex;align-items:center;gap:6px}
.price-range .input{inline-size:96px;text-align:center}
.price-range .dash{color:var(--ink-4)}
.sv-filters .clear{margin-inline-start:auto}

/* سطر عدّ النتائج */
.sv-count{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-block-end:var(--s4);font-size:var(--fs-sm);color:var(--ink-3)}
.sv-count b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ═════════════════ بطاقة الخدمة ═════════════════ */
.svc-grid{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.svc-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;position:relative;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.svc-card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  box-shadow:var(--sh-2);transform:var(--lift)}
.svc-card.featured{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.svc-card.featured::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:3px;background:var(--grad-line);z-index:1}

.sv-art{position:relative;aspect-ratio:16/7;display:grid;place-items:center;
  background:var(--grad-soft);border-block-end:1px solid var(--line);overflow:hidden}
.sv-art img{inline-size:100%;block-size:100%;object-fit:cover}
.sv-art .ico{inline-size:38px;block-size:38px;color:var(--brand)}
.sv-flags{position:absolute;inset-block-start:var(--s3);inset-inline-start:var(--s3);
  display:flex;gap:6px;flex-wrap:wrap}

.sv-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.sv-cat{font-size:var(--fs-xs);font-weight:700;color:var(--brand-ink)}
.sv-name{font-size:var(--fs-lg);font-weight:700;line-height:1.35;margin:0}
.sv-desc{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-meta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--ink-3);margin-block-start:auto;padding-block-start:var(--s2)}
.sv-meta .m{display:inline-flex;align-items:center;gap:5px}
.sv-meta .ico{inline-size:14px;block-size:14px;color:var(--ink-4)}

.sv-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s3) var(--s4);border-block-start:1px solid var(--line);background:var(--surface-2)}
.sv-price{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4}
.sv-price b{display:block;font-size:var(--fs-lg);color:var(--ink);font-weight:800;
  font-variant-numeric:tabular-nums}
.sv-price .unit{font-size:var(--fs-xs);color:var(--ink-3);font-weight:500}
.sv-price.none b{font-size:var(--fs-md);color:var(--ink-2)}
.svc-card .go{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);
  font-weight:700;color:var(--brand)}
.svc-card .go .ico{inline-size:15px;block-size:15px}

/* ترقيم في وسط الصفحة */
.sv-pager{margin-block-start:var(--s6);display:flex;justify-content:center}

/* ═════════════════ صفحة الخدمة ═════════════════ */
.svc-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s6);align-items:center;margin-block-end:var(--s6)}
.svc-top .t-badges{display:flex;gap:var(--s2);flex-wrap:wrap;margin-block-end:var(--s3)}
.svc-top h1{margin:0 0 var(--s3)}
.svc-top .t-short{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.7;margin:0 0 var(--s4)}
.svc-top .t-facts{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-3)}
.svc-top .t-facts .f{display:inline-flex;align-items:center;gap:6px}
.svc-top .t-facts .ico{inline-size:16px;block-size:16px;color:var(--brand)}
.svc-figure{margin:0;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-2);aspect-ratio:4/3;display:grid;place-items:center;background:var(--grad-soft)}
.svc-figure img{inline-size:100%;block-size:100%;object-fit:cover}
.svc-figure .ico{inline-size:84px;block-size:84px;color:var(--brand)}

.sv-sec{margin-block-end:var(--s7)}
.sv-sec>h2{font-size:var(--fs-xl);margin:0 0 var(--s4)}
.sv-sec>.hint-line{color:var(--ink-3);font-size:var(--fs-sm);margin:calc(var(--s4) * -1) 0 var(--s4)}
.sv-prose{color:var(--ink-2);line-height:1.9;white-space:pre-line}

/* قوائم مع علامة صح / علامة استبعاد */
.mark-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.mark-list li{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-sm);
  color:var(--ink-2);line-height:1.7}
.mark-list .ico{inline-size:17px;block-size:17px;flex:none;margin-block-start:3px;color:var(--ok)}
.mark-list.no .ico{color:var(--ink-4)}
.mark-list.no li{color:var(--ink-3)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.two-col .card{block-size:100%}

/* الإضافات */
.addon-list{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.addon{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.addon:hover{border-color:var(--brand)}
.addon:has(input:checked){border-color:var(--brand);background:var(--brand-050)}
.addon input{position:absolute;opacity:0;pointer-events:none}
.addon .bx{inline-size:20px;block-size:20px;border-radius:6px;border:1.5px solid var(--line);
  background:var(--field);flex:none;display:grid;place-items:center;margin-block-start:2px}
.addon .bx::after{content:"";inline-size:5px;block-size:9px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform var(--dur-fast) var(--ease);
  margin-block-start:-2px}
.addon input:checked+.bx{background:var(--brand-fill);border-color:var(--brand-fill)}
.addon input:checked+.bx::after{transform:rotate(45deg) scale(1)}
.addon input:focus-visible+.bx{box-shadow:var(--ring)}
.addon .a-main{display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.addon .a-name{font-weight:700;font-size:var(--fs-sm)}
.addon .a-desc{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.addon .a-price{font-size:var(--fs-xs);color:var(--brand-ink);font-weight:700;
  font-variant-numeric:tabular-nums}

/* الباقات — اختيار */
.pkg-card{cursor:pointer}
.pkg-card.sel{border-color:var(--brand);box-shadow:var(--sh-2)}
.pkg-card .p-hours{font-size:var(--fs-xs);color:var(--ink-3);margin-block-start:-4px}

/* لوحة التخصيص الجانبية */
.cfg-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-2);overflow:hidden}
.cfg-head{padding:var(--s4) var(--s5);border-block-end:1px solid var(--line);
  background:var(--surface-2)}
.cfg-head .t{font-weight:800}
.cfg-head .s{font-size:var(--fs-xs);color:var(--ink-3);margin-block-start:2px}
.cfg-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.cfg-body .field>label{font-size:var(--fs-sm)}
.cfg-foot{padding:var(--s4) var(--s5) var(--s5);border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s2)}
.pkg-picked{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--brand-050);
  font-size:var(--fs-xs);color:var(--brand-ink);font-weight:700}

/* ملخّص السعر */
.q-box{min-block-size:120px}
.q-note{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}
.summary .ln.line-rule .v{color:var(--ink-2)}
.summary .ln.line-addon span:first-child{color:var(--ink-3)}
.q-total-per{font-size:var(--fs-xs);color:var(--ink-3);font-weight:500}
.why{border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.why>summary{cursor:pointer;list-style:none;padding:var(--s2) var(--s3);font-size:var(--fs-xs);
  font-weight:700;color:var(--brand-ink);display:flex;align-items:center;gap:6px}
.why>summary::-webkit-details-marker{display:none}
.why>summary .ico{inline-size:14px;block-size:14px;transition:transform var(--dur) var(--ease)}
.why[open]>summary .ico{transform:rotate(180deg)}
.why ol{margin:0;padding:0 var(--s5) var(--s3);font-size:var(--fs-xs);color:var(--ink-2);
  line-height:1.9}
.why li{margin-block-end:2px}

/* شريط الشراء اللاصق — للشاشات الصغيرة فقط */
.buybar{display:none}
.buybar .total .n{font-variant-numeric:tabular-nums}

.sv-count .warn-txt{color:var(--warn-ink)}

/* ═════════════════ التذييل (نفس تذييل الهبوط — home.css غير محمّل هنا) ═════ */
.foot{background:var(--surface-2);border-block-start:1px solid var(--line);
  padding-block:var(--s8) var(--s5);margin-block-start:var(--s8)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6)}
.foot-grid>div{display:flex;flex-direction:column;gap:8px}
.foot-h{font-weight:700;font-size:var(--fs-sm);margin-block-end:4px}
.foot-grid a{color:var(--ink-3);font-size:var(--fs-sm);text-decoration:none}
.foot-grid a:hover{color:var(--brand)}
.foot-brand .nm-full{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
.foot-brand .nm-full em{font-style:normal;color:var(--brand)}
.foot-bar{margin-block-start:var(--s6);padding-block-start:var(--s4);
  border-block-start:1px solid var(--line);display:flex;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap}
.foot-bar a{color:var(--ink-3)}

/* ═════════════════ متجاوب ═════════════════ */
@media (max-width:1080px){
  .svc-top{grid-template-columns:1fr;gap:var(--s5)}
  .svc-figure{max-inline-size:520px;aspect-ratio:16/9}
}
@media (max-width:980px){
  .buybar{display:flex}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sv-tools{grid-template-columns:1fr}
  .sv-sort{justify-content:space-between}
  .sv-sort .select{flex:1}
  .sv-filters{flex-direction:column;align-items:stretch}
  .sv-filters .fgrp{justify-content:space-between}
  .sv-filters .select{flex:1;min-inline-size:0}
  .sv-filters .clear{margin-inline-start:0;inline-size:100%}
  .price-range{flex:1}
  .price-range .input{inline-size:0;flex:1}
  .svc-grid{grid-template-columns:1fr}
  .addon-list{grid-template-columns:1fr}
  .svc-top .t-facts{gap:var(--s3) var(--s4)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* الوضع الداكن: التوكنات تتكفّل — هنا فقط ما يحتاج ضبطاً بصرياً */
:root[data-theme="dark"] .sv-art,
:root[data-theme="dark"] .svc-figure{background:color-mix(in srgb,var(--deep) 22%,var(--surface-2))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sv-art,
  :root:not([data-theme="light"]) .svc-figure{background:color-mix(in srgb,var(--deep) 22%,var(--surface-2))}
}