/* =========================================================
   مكوّناتٌ مشتركة بين الواجهة العامّة واللوحات.

   كانت بطاقةُ التخصّص ورقاقةُ المدينة وشريطُ التتبّع **معرَّفةً مرّتين**: مرّةً
   في `app.css` بمفردات اللوحات (‎--primary ‎--ink ‎--slate-2)، ومرّةً في
   `theme-site.css` بمفردات الموقع (‎--navy ‎--text ‎--muted). شكلٌ واحد
   بمصدرين، اليوم يتشابهان وغدًا يُعدَّل أحدهما فتفترق البطاقة في الصفحة
   الأولى عنها في القِمع — ولا شيء يُنذر.

   فجُمعت هنا في مصدرٍ واحد، مكتوبةً بمفردات اللوحات، وتُعلَن مرادفاتُها في
   `theme-site.css` فتعمل في الموضعين بلا نسخة ثانية.
   ========================================================= */

/* ─── بطاقة التخصّص/الخدمة: شبكةٌ تُضغط بلاطاتُها */
.specialties{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.specialties{grid-template-columns:repeat(3,1fr)}}

/*
   عددُ البلاطات متغيّر هنا: تسعةُ أعمدةٍ ثابتة كانت تُمدّد أربع بطاقاتٍ عرضًا
   أو تحشر اثنتي عشرة في صفّ. فالعرض الأدنى يقرّر العدد.
*/
@media (min-width:1024px){.specialties{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}}

/*
   وحين يكون العدد معلومًا يُقال صراحةً: `‎--cols` من القالب.

   العرضُ الأدنى وحده كان يعطي ثمانية أعمدةٍ لتسع بطاقات، فتنفرد «المزيد» في
   صفٍّ وحدها محاذيةً لحافّة الصفحة — صفٌّ مكسور لا شبكة. ومن يعرف العدد هو
   من يبنيه.
*/
@media (min-width:1024px){.specialties.fixed{grid-template-columns:repeat(var(--cols,8),1fr)}}

.spec-card{
  border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface);
  min-height:104px;padding:14px 6px;text-align:center;box-shadow:0 6px 20px rgba(11,29,61,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:border-color .2s,transform .2s;
}
.spec-card:hover{border-color:var(--gold);transform:translateY(-2px)}
/*
   الأيقونة على قرصٍ سماويّ — لا خطًّا عاريًا على بياض.

   ملفُّ التصميم يضع كلَّ أيقونةٍ في شكلٍ ليّن خلفها؛ وكانت تُرسم هنا بلا
   خلفية، فتُقرأ البلاطةُ نصًّا صغيرًا ويغيب عن الصفحة كلِّها الطابعُ الذي
   يميّزها. والقرص مفرداتٌ قائمة (‎--c-sky) لا لونٌ جديد.
*/
.spec-card .ic,.spec-card img{
  width:52px;height:52px;padding:13px;box-sizing:border-box;
  border-radius:50%;background:var(--c-sky);
  object-fit:contain;color:var(--c-accent);
}
.spec-card:hover .ic,.spec-card:hover img{background:var(--c-gold-soft)}
.spec-card b{font-size:12px;font-weight:700;color:var(--c-ink)}

/* ─── رقائق المدن: الاختيار الأوّل في الطريق، فوق الشبكة لا داخلها */
.city-chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:20px}
.city-chip{
  border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);
  padding:9px 16px;min-height:44px;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--c-ink);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.city-chip:hover{border-color:var(--gold)}
.city-chip.on{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.city-chip .num{font-size:12px;font-weight:600}

/* مدينةٌ بلا خدمة تُعرض ولا تُخفى: وجودها وعدٌ معلن، وحالها مكتوبة عليها */
.city-chip.soon{color:var(--c-muted);border-style:dashed}

/* ─── شريط التتبّع: ما اختير حتى الآن، وكلٌّ منه رجعة */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--c-muted);margin-block-end:18px}
.crumbs a{color:var(--c-accent);font-weight:700}
.crumbs a:hover{color:var(--gold-dark)}
.crumbs i{font-style:normal;color:var(--field)}

/* ─── ترقيم الصفحات: بديلُ ترقيم الإطار الذي يفترض Tailwind */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-block:22px 6px;font-size:13.5px}
.pager-pages{display:inline-flex;flex-wrap:wrap;gap:6px}
.pager-step,.pager-page{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:6px 12px;
  border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface);color:var(--c-ink);font-weight:700;
  transition:border-color .2s,background .2s,color .2s;
}
a.pager-step:hover,a.pager-page:hover{border-color:var(--gold);color:var(--gold-dark)}
.pager-page.on{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.pager-step.is-off{opacity:.45}
.pager-gap{align-self:center;color:var(--c-muted);padding-inline:4px}

/* =========================================================
   الأزرار وحقول الإدخال — مصدرٌ واحد للواجهة العامّة واللوحات (2026-10)

   كانت كلٌّ منهما معرَّفةً مرّتين بقيمٍ متباعدة: زرٌّ بارتفاع ٤٤ هنا و٣٨ هناك،
   وحقلٌ بحدٍّ كحليّ التركيز في ورقة وذهبيّه في الأخرى، وقوائمُ بلا صنفٍ تظهر
   بهيئة نظام التشغيل في شاشات الضيف. فصار التعريف هنا وحده، وتُحذف نسخ الورقتين.

   القياسات: ارتفاع ٤٦ للحقل و٤٤ للزرّ (٣٦ للصغير)، وزاوية ١٠ للاثنين، وحدّ الحقل
   ‎--field‎ (٣٫١٦:١ على الأبيض — حدُّ مكوّنٍ يقول «هنا تكتب»).
   والحركة: ضغطة ‎scale(.97)‎ في ١٦٠ms، ولمسٌ لمن يملك مؤشّرًا دقيقًا وحده.
   ========================================================= */
/*
   رموزُ الحركة والقياس (‎--ease-*‎ ‎--f-h‎ ‎--f-radius‎ ‎--c-ring‎) تُعرَّف في
   الورقة المضيفة — app.css للوحات وtheme-site.css للموقع — لأن كلتيهما
   تستعملها في قواعدها، وفاحصُ المشروع يطلب أن تعرّف كلُّ ورقةٍ ما تستعمل.
   وهنا ألوانُ الأزرار العميقة وحدها: لا تُستعمل خارج هذه الطبقة.
*/
:root{
  /* الهويّةُ الطبيّة (الإصدار الرابع، .claude/colors.jpg): أزرقُ الثقة وأخضرُ النموّ وكحليٌّ مشتقّ */
  --c-accent-deep:#0055DE;
  --c-lime:#00D149;
  --c-lime-deep:#00B840;
  --c-navy:#0B1D3D;
  --c-red:#C4262A;
  --c-red-deep:#8E1416;
  --c-red-ink:#6E0F11;
  --c-disabled:#F1F3F6;
  --c-readonly:#F6F8FB;
}

/* لقارئ الشاشة وحده: في الورقة المشتركة لأن اللوحات لا تحمّل theme-site.css */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── الأزرار ─── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:var(--f-radius);
  font:inherit;font-size:14.5px;font-weight:700;line-height:1.3;text-align:center;
  background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,box-shadow 200ms ease,color 160ms ease;
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--gold)}
}
.btn svg{width:18px;height:18px;flex:none}
.btn img{width:17px;height:17px}

.btn-primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff;box-shadow:0 8px 18px rgba(0,95,250,.24)}
.btn-gold{
  /* الدعوةُ الكبرى خضراءُ بحبرٍ كحليّ — ٨٫٥٦:١ (الأبيضُ عليها ٢٫٠٦:١ فلا يُكتب بها) */
  background:var(--c-lime);
  border-color:var(--c-lime-deep);color:var(--c-navy);box-shadow:0 8px 20px rgba(0,184,64,.24);
}
.btn-line{background:var(--c-surface);color:var(--gold-dark);border-color:var(--gold)}
.btn-ghost{background:var(--c-surface);border-color:var(--c-line);color:var(--c-ink)}
.btn-navy{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.btn-dark{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.btn-danger{background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));border-color:var(--c-red-deep);color:#fff;box-shadow:0 8px 18px rgba(172,26,29,.2)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--c-accent-deep);border-color:var(--c-accent-deep)}
  .btn-gold:hover{background:var(--c-lime-deep);border-color:var(--c-lime-deep)}
  .btn-line:hover{background:var(--gold-tint)}
  .btn-ghost:hover{border-color:var(--gold)}
  .btn-navy:hover{background:var(--c-accent);border-color:var(--c-accent)}
  .btn-danger:hover{border-color:var(--c-red-ink)}
}
.btn-sm{min-height:36px;padding:7px 14px;font-size:13px;border-radius:10px}
.btn-sm svg{width:16px;height:16px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/*
   حالُ الإرسال: الزرُّ يقول إنه سمع.

   يُعلَّم ‎.is-loading‎ لحظة الإرسال (forms.js)، فيحلّ دوّارٌ محلّ الأيقونة
   ويُمنع الضغط الثاني — ولا يُعطَّل بالخاصّية ‎disabled‎: الزرُّ المعطَّل
   لا يُرسل اسمه وقيمته، وبعض النماذج تقرأ أيّ زرٍّ ضُغط.
*/
.btn.is-loading{pointer-events:none;cursor:progress}
.btn.is-loading > svg{opacity:0}
.btn.is-loading::after{
  content:"";width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-inline-end-color:transparent;
  animation:btn-spin 640ms linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ─── الحقول ─── */
.field{margin-block-end:14px}
.field > label,.auth-field > label,.form-grid .field > label{
  display:block;margin-block-end:6px;
  font-size:13.5px;font-weight:700;line-height:1.5;color:var(--c-ink);
}

/*
   الأساسُ على العناصر نفسها بأدنى خصوصيّة (‎:where‎): كلُّ حقلٍ في المنصّة
   يحمل الهيئة ولو كُتب بلا صنف، وأيُّ مكوّنٍ له هيئته (خانة البحث في العمود،
   حقلُ الهاتف، خلايا الرمز، بطاقة البدء) يغلبه بصنفه وحده.

   والهيئة (2026-10، الإصدار الرابع): زوايا ١٢ بكسل، وحدٌّ أخفّ (‎--c-field‎ بأدنى
   ٣:١ يجتاز WCAG 1.4.11)، وظلٌّ من طبقتين يرفع الحقل عن البطاقة بدل الحدّ الداكن.
*/
:where(input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"],[type="submit"],[type="button"],[type="reset"],[type="image"]),select,textarea),
.input{
  width:100%;min-height:var(--f-h);padding:10px 14px;
  font:inherit;font-size:15px;line-height:1.5;color:var(--c-ink);
  background:var(--c-surface);border:1px solid var(--c-field);border-radius:var(--f-radius);
  box-shadow:var(--f-shadow);
  transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease;
}
:where(input,select,textarea)::placeholder,.input::placeholder{color:var(--c-muted);opacity:1}
@media (hover:hover) and (pointer:fine){
  :where(input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"]),select,textarea):hover,
  .input:hover{border-color:var(--c-field-hover)}
}
:where(input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"]),select,textarea):focus,
.input:focus{border-color:var(--c-accent);outline:none;box-shadow:var(--c-ring),var(--f-shadow)}
:where(input,select,textarea):disabled,.input:disabled{background:var(--c-disabled);color:var(--c-muted);cursor:not-allowed;box-shadow:none}
:where(input,select,textarea)[readonly],.input[readonly]{background:var(--c-readonly)}
:where(input,select,textarea)[aria-invalid="true"],.input[aria-invalid="true"],.input.is-invalid{border-color:var(--cinnabar)}
:where(input,select,textarea)[aria-invalid="true"]:focus,.input[aria-invalid="true"]:focus,.input.is-invalid:focus{box-shadow:var(--c-ring-error),var(--f-shadow)}

/* القائمة: سهمٌ من أيقوناتنا بدل سهم النظام، ويتبع اتجاه الصفحة */
:where(select),select.input{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:40px;
  background-image:url("../images/icons/chevron-field.svg");
  background-repeat:no-repeat;background-size:14px;background-position:left 14px center;
}
[dir="ltr"] :where(select),[dir="ltr"] select.input{background-position:right 14px center}
:where(select[multiple]),select.input[multiple]{background-image:none;padding-inline-end:14px}
/*
   حشوةُ القائمة الأفقيّة بخصوصيّة العنصر (‎select‎) لا بـ‎:where()‎ وحدها.

   قالبُ الضيف (‎layouts.public‎) يحمّل app.css **بعد** هذه الورقة، وأوّلُه
   ‎*{padding:0}‎ — والنجمةُ و‎:where()‎ كلتاهما بخصوصيّة صفر فيغلب المتأخّر:
   كانت كلُّ قائمةٍ بلا صنف (مرشّحات البحث، منتقي المنطقة في الحجز) تفقد
   حشوتها، فيلتصق نصُّها بالحدّ ويجري الطويلُ منه تحت السهم. ولم يظهر في
   اللوحات لأن app.css فيها يُحمَّل أوّلًا.

   والعنصرُ يغلب النجمة أينما حُمّلت، ويغلبه أيُّ صنفٍ له هيئته (‎.start-field‎
   ‎.phone-dial‎). والخاصّيّة منطقيّة فتنقلب مع الاتجاه: ١٤ في البداية كسائر
   الحقول، و٤٠ في النهاية مكانُ السهم (إزاحةٌ ١٤ وعرضٌ ١٤ وفسحةٌ ١٢).
*/
select{padding-inline:14px 40px}
select:where([multiple]){padding-inline-end:14px}
/*
   والقاعدةُ نفسُها للحقل النصّيّ ومربّع الكتابة: ‎*{padding:0}‎ في قالب الضيف كان
   يلصق نصَّ «صف حالتك» (‎#intake-text‎ في الحجز) بحدّه. والعنصرُ وحده يكفي ليغلب
   النجمة، و‎:where()‎ تُبقي خصوصيّته عند العنصر فيغلبه كلُّ صنفٍ له هيئته.

   وارتفاعُ السطر على العنصر كذلك: «font:inherit» على العناصر في app.css يعيده
   إلى ١٫٧٥ فتطول القائمةُ بلا صنفٍ في اللوحات ٢ بكسل عن أخواتها.
*/
input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"],[type="submit"],[type="button"],[type="reset"],[type="image"])),textarea{padding:10px 14px}
input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"],[type="submit"],[type="button"],[type="reset"],[type="image"])),select{line-height:1.5}

:where(textarea),textarea.input{min-height:112px;resize:vertical;line-height:1.75}

/* التاريخ والوقت والأرقام: تُقرأ من اليسار مهما كان اتجاه الصفحة */
:where(input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]){direction:ltr;text-align:start}
:where(input[type="date"],input[type="time"],input[type="datetime-local"])::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
:where(input[type="date"],input[type="time"],input[type="datetime-local"]):hover::-webkit-calendar-picker-indicator{opacity:1}
:where(input[type="number"]){font-variant-numeric:tabular-nums}

/* اختيار الملفّ: زرٌّ داخل الحقل بهويّة الأزرار لا زرُّ النظام الرماديّ */
:where(input[type="file"]),input[type="file"].input{
  width:100%;min-height:var(--f-h);padding:6px 8px;font:inherit;font-size:14px;color:var(--c-muted);
  background:var(--c-surface);border:1px dashed var(--c-field);border-radius:var(--f-radius);cursor:pointer;
}
:where(input[type="file"])::file-selector-button,input[type="file"].input::file-selector-button{
  margin-inline-end:12px;padding:7px 14px;border:1px solid var(--c-line);border-radius:8px;
  background:var(--c-sky);color:var(--c-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease;
}
:where(input[type="file"]):hover::file-selector-button{background:var(--c-accent);color:#fff}
:where(input[type="file"]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* المربّع والدائرة: لون العلامة نفسه، ومقاسٌ يُلمس */
:where(input[type="checkbox"],input[type="radio"]){
  width:18px;height:18px;margin:0;flex:none;accent-color:var(--c-accent);cursor:pointer;vertical-align:-3px;
}

/* رسالة الحقل: تحته، بلون الخطأ، وتعلّم الحقل نفسه */
.err{display:block;margin-block-start:6px;font-size:12.5px;font-style:normal;font-weight:600;color:var(--cinnabar)}
.field:has(.err) :where(input,select,textarea),.field:has(.err) .input,
.auth-field:has(.err) .input{border-color:var(--cinnabar)}

/* شبكة الحقول: أعمدةٌ متساوية تُسوّي الصفّ */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;align-items:start}
.form-grid .field{margin:0}

/* على الهاتف: ١٦ بكسل في الحقول وإلّا كبّر iOS الصفحة عند التركيز */
@media (max-width:640px){
  :where(input:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"]),select,textarea),.input{font-size:16px}
  /*
     وما كُتب بلا صنف: «font:inherit» على العنصر في app.css (وقالبُ الضيف يحمّلها
     بعد هذه الورقة) يغلب ‎:where()‎ فيبقى ١٥ بكسل. ‎:not([class])‎ يرفعه فوقها ولا
     يمسّ حقلًا له صنفٌ وهيئة.
  */
  input:not([class]):not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="color"],[type="range"],[type="submit"],[type="button"],[type="reset"],[type="image"]),
  select:not([class]),textarea:not([class]){font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
  .btn:active{transform:none}
  .btn.is-loading::after{animation-duration:1.6s}
}