/* ============================================================================
   Chic — الصفحات الثابتة وحالات الواجهة
   (من نحن · الأسئلة الشائعة · تواصل معنا · الشروط/الخصوصية/الاسترجاع · حجز موعد ·
    نتيجة الدفع · إلغاء الاشتراك · صفحات الخطأ · الحالات الفارغة/الخطأ/التحميل)

   المرجع: «Caretti Storefront 3» اللوحات:
     ٧ (صفحة محتوى ثابت — ديسكتوب 1440، L226-239) · ٨ (جوال 390، L250-256)
     ٩ (الحالات الفارغة، L268-277) · ١٠ (الخطأ: 404 وحقول النموذج وفشل الدفع، L286-325)
     ١١ (حالات التحميل، L332-371)
   القواعد المُلزِمة (Handoff): radius 0 · بلا ظلال/تدرّجات · حدود 1px فقط · خصائص منطقية فقط
   · لا تباعد حرفي على العربي (الرمز 404 أرقام فقط فمسموح .04em) · نقطة الانكسار 767 للنصّ والحشوة.
   ملاحظة تخصيص: القواعد الأساسية في base.css مكتوبة بـ:where(.chic-theme) (خصوصية صفر)،
   وقواعد المكوّنات هنا تسبقها بـ.chic-theme حين تحتاج التغلّب على إعادة الضبط.
   ========================================================================= */

/* ── ١ · عمود المحتوى المتمركز (اللوحة ٧: حشوة 34×32 ثم بطاقة 820 بحشوة 48×56) ── */
.chic-content { padding-bottom: var(--chic-space-section); }
.chic-content-wrap { padding: 34px var(--chic-page-pad) 0; display: flex; justify-content: center; }
.chic-content-col { width: 100%; max-width: var(--chic-content-col); }
.chic-content-card { background: rgb(var(--chic-surface-card)); padding: 48px 56px; }

/* مسار التنقّل غير مرسوم في لوحة الجوال (اللوحة ٨) — العنوان وحده */
@media (max-width: 767px) {
  .chic-content-head .chic-breadcrumb { display: none; }
  .chic-content-wrap { padding: 18px var(--chic-page-pad) 0; }
  .chic-content-card { padding: 24px 18px; }
}

/* ── ٢ · نصّ المحتوى (فقرات 16/2.1 ink-soft · عنوان داخلي 19/600 · فاصل 1px border-soft) ── */
/* ضبط النصّ من الطرفين (justify) في صفحات المحتوى والصفحات القانونية — طلب المالك */
.chic-theme .chic-prose p { margin: 0 0 20px; font-size: 16px; line-height: 2.1; color: rgb(var(--chic-ink-soft)); text-align: justify; text-justify: inter-word; }
.chic-theme .chic-prose p:last-child { margin-bottom: 0; }
.chic-theme .chic-prose h2 { margin: 0 0 16px; font-size: 19px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); color: rgb(var(--chic-ink)); }
.chic-theme .chic-prose-pre { white-space: pre-line; }
/* نصّ الإعدادات (شروط/خصوصية/استرجاع) يُطبع كما كتبه الأدمن: الأسطر والنقاط محفوظة */
.chic-theme .chic-prose-plain p { white-space: pre-line; }
.chic-content-rule { height: 1px; background: rgb(var(--chic-border-soft)); border: 0; margin: 8px 0 28px; }
/* عنوان داخلي خارج كتلة .chic-prose (أقسام صفحة «تواصل معنا») — نفس مقاس عنوان البطاقة 19/600 */
.chic-theme .chic-content-h2 { margin: 0 0 16px; font-size: 19px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); color: rgb(var(--chic-ink)); }
.chic-theme .chic-content-h2 + .chic-content-sub { margin: -8px 0 16px; font-size: 15px; line-height: 1.9; color: rgb(var(--chic-muted)); }

@media (max-width: 767px) {
  .chic-theme .chic-prose p { margin-bottom: 18px; font-size: 15px; line-height: 2; }
  .chic-theme .chic-prose h2 { margin-bottom: 12px; font-size: 17px; }
  .chic-content-rule { margin: 4px 0 22px; }
}

/* ── ٣ · صفّ أزرار الحالات (فارغة/خطأ) — يلتفّ ويتمركز ── */
.chic-state-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* الحالة الفارغة: .chic-empty في base.css (صندوق 56×32 · أيقونة مربّعة 64 · عنوان 19/600).
   هنا فقط: عنوان بوسم h1 (صفحة كاملة) وصفّ زرّين بدل زرّ واحد. */
.chic-theme .chic-empty .chic-state-empty-title { margin: 0; font-size: 19px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); }
.chic-theme .chic-empty .chic-state-actions { margin-top: 26px; }
.chic-theme .chic-empty .chic-state-actions .chic-btn { margin-top: 0; }

/* ── ٤ · حالات الخطأ (اللوحة ١٠) ── */
.chic-state-col { width: 100%; max-width: var(--chic-content-col); margin-inline: auto; }
.chic-state-error { background: rgb(var(--chic-surface-card)); text-align: center; }

/* أ) variant=code — صفحة غير موجودة/خطأ خادم: حشوة 80×32 · الرمز 64/600 (.04em أرقام فقط) */
.chic-state-error.is-code { padding: 80px 32px; }
.chic-theme .chic-state-code { margin: 0; font-size: 64px; font-weight: var(--chic-fw-semibold); line-height: 1.1; letter-spacing: .04em; color: rgb(var(--chic-ink)); }
.chic-theme .chic-state-error.is-code .chic-state-title { margin: 18px 0 0; font-size: 21px; }
.chic-state-error.is-code .chic-state-actions { margin-top: 28px; }
.chic-state-error.is-code .chic-state-actions .chic-btn-primary { padding-inline: 34px; }
.chic-state-error.is-code .chic-state-actions .chic-btn-secondary { padding-inline: 30px; height: 52px; }

/* ب) variant=alert — فشل الدفع وما يشبهه: حشوة 40×32 · دائرة 58 بحدّ 1px بلون الحالة */
.chic-state-error.is-alert { padding: 40px 32px; }
.chic-state-mark {
  width: 58px; height: 58px; border-radius: var(--chic-radius-circle);
  border: var(--chic-border-width) solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; margin-bottom: 20px;
}
.chic-state-mark.is-danger { color: rgb(var(--chic-danger)); }
.chic-state-mark.is-success { color: rgb(var(--chic-success)); }
.chic-state-mark.is-neutral { color: rgb(var(--chic-muted)); }
.chic-theme .chic-state-error.is-alert .chic-state-title { margin: 0; font-size: 19px; }
.chic-state-error.is-alert .chic-state-actions { margin-top: 24px; gap: 12px; }
.chic-state-error.is-alert .chic-state-actions .chic-btn-primary { padding-inline: 28px; }
.chic-state-error.is-alert .chic-state-actions .chic-btn-secondary { padding-inline: 24px; height: 52px; }

.chic-theme .chic-state-title { font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); color: rgb(var(--chic-ink)); }
.chic-theme .chic-state-body { margin: 12px 0 0; font-size: 15px; line-height: 1.9; color: rgb(var(--chic-muted)); }

@media (max-width: 767px) {
  .chic-state-error.is-code { padding: 56px 18px; }
  .chic-theme .chic-state-code { font-size: 52px; }
  .chic-state-error.is-alert { padding: 30px 18px; }
}

/* ── ٥ · تنبيهات النماذج وحقولها (اللوحة ١٠ «خطأ في الحقول») ── */
.chic-form-alerts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.chic-form-alert { line-height: 1.8; }
.chic-theme .chic-form-alert-line { margin: 0; color: inherit; line-height: inherit; }
.chic-form-alert-list { margin: 6px 0 0; padding-inline-start: 18px; list-style: disc; }
.chic-theme .chic-form-alert-list li { line-height: inherit; }

.chic-form-field { margin-bottom: 18px; }
.chic-field-optional { color: rgb(var(--chic-muted)); }
.chic-theme .chic-form-field .chic-field-error { margin-bottom: 0; line-height: 1.6; }
.chic-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--chic-gutter); }
.chic-form-field.is-full { grid-column: 1 / -1; }
.chic-content-submit { width: 100%; }
@media (max-width: 767px) { .chic-form-grid { grid-template-columns: 1fr; } }

/* ── ٦ · حالات التحميل (اللوحة ١١) — الومضة نفسها من .chic-skeleton في base.css ── */
.chic-state-loading.is-more { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: var(--chic-border-width) solid rgb(var(--chic-border-soft)); }
.chic-state-loading-text { font-size: 14px; line-height: 1.5; color: rgb(var(--chic-muted)); }
.chic-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--chic-gutter); max-width: var(--chic-catalog-grid-max); }
.chic-skel-media { display: block; width: 100%; aspect-ratio: 1 / 1; }
.chic-skel-row { display: flex; gap: 6px; margin-top: 8px; }
.chic-skel-swatch { display: block; width: 44px; height: 44px; }
.chic-skel-bar { display: block; height: 14px; }
.chic-skel-bar.is-title { width: 80%; margin-top: 12px; }
.chic-skel-bar.is-price { width: 40%; margin-top: 8px; }
.chic-skel-product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--chic-gutter); }
.chic-skel-pmedia { display: block; width: 100%; aspect-ratio: 687 / 641; }
.chic-skel-bar.is-ptitle { width: 90%; height: 22px; }
.chic-skel-bar.is-psub { width: 50%; margin-top: 12px; }
.chic-skel-bar.is-pprice { width: 35%; height: 20px; margin-top: 20px; }
.chic-skel-row.is-opts { gap: 8px; margin-top: 22px; }
.chic-skel-opt { display: block; width: 52px; height: 52px; }
.chic-skel-bar.is-pbtn { width: 100%; height: 38px; margin-top: 24px; }
@media (max-width: 767px) {
  .chic-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chic-skel-product { grid-template-columns: 1fr; }
}

/* ── ٧ · صفحة الخطأ المستقلة (بلا غلاف المتجر) — شريط علوي band يحمل الشعار ── */
.chic-err-doc { display: flex; flex-direction: column; min-height: 100vh; background: rgb(var(--chic-surface-page)); }
.chic-err-top { background: rgb(var(--chic-surface-band)); padding: 18px var(--chic-page-pad); display: flex; justify-content: center; }
.chic-err-logo { display: inline-flex; align-items: center; font-size: 19px; font-weight: var(--chic-fw-semibold); color: rgb(var(--chic-ink)); }
.chic-err-logo img { display: block; height: 48px; width: auto; max-width: 220px; object-fit: contain; }
.chic-err-main { flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; padding: 34px var(--chic-page-pad) var(--chic-space-section); }

/* ── ٨ · الأسئلة الشائعة — أكورديون Handoff §٥: صندوق أبيض لكل سؤال بفاصل 10 ── */
.chic-faq-group { margin-bottom: 28px; }
.chic-faq-group:last-of-type { margin-bottom: 0; }
.chic-theme .chic-faq-cat { margin: 0 0 14px; font-size: var(--chic-fs-section-title); font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); }
.chic-faq-item { background: rgb(var(--chic-surface-card)); margin-bottom: 10px; }
.chic-faq-item:last-child { margin-bottom: 0; }
.chic-theme .chic-faq-q { margin: 0; font-size: inherit; font-weight: inherit; }
.chic-faq-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; background: none; border: 0; border-radius: 0;
  font-family: inherit; font-size: 15px; font-weight: var(--chic-fw-semibold); line-height: 1.6;
  color: rgb(var(--chic-ink)); text-align: start; cursor: pointer;
}
.chic-faq-ico { flex: 0 0 auto; transition: transform var(--chic-duration-default) ease; }
.chic-faq-btn[aria-expanded="true"] .chic-faq-ico { transform: rotate(180deg); }
.chic-faq-a { padding: 0 24px 24px; }
.chic-theme .chic-faq-a p { margin: 0; font-size: 15px; line-height: 2; color: rgb(var(--chic-ink-soft)); }
.chic-faq-cta { background: rgb(var(--chic-surface-card)); padding: 40px 32px; text-align: center; margin-top: 28px; }
.chic-theme .chic-faq-cta-title { margin: 0; font-size: 19px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); }
.chic-theme .chic-faq-cta-body { margin: 12px 0 0; font-size: 15px; line-height: 1.9; color: rgb(var(--chic-muted)); }
.chic-faq-cta .chic-state-actions { margin-top: 26px; }
@media (max-width: 767px) {
  .chic-faq-btn { padding: 16px 18px; }
  .chic-faq-a { padding: 0 18px 18px; }
  .chic-faq-cta { padding: 30px 18px; }
}

/* ── ٩ · تواصل معنا / من نحن: سطور المعلومات والقنوات ── */
.chic-info-list { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.chic-info-row { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 16px; line-height: 1.9; color: rgb(var(--chic-ink-soft)); }
.chic-info-label { flex: 0 0 auto; min-width: 104px; font-size: 14px; color: rgb(var(--chic-muted)); }
.chic-info-val { min-width: 0; overflow-wrap: anywhere; }
.chic-theme a.chic-info-link { color: rgb(var(--chic-ink)); border-bottom: var(--chic-border-width) solid rgb(var(--chic-border)); }
.chic-theme a.chic-info-link:hover { border-bottom-color: rgb(var(--chic-ink)); }

/* دائرة 38 للقنوات الاجتماعية (استثناء الدوائر المسموح — Handoff §٤) بمنطقة لمس 44 دون تغيير الشكل */
.chic-social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chic-social {
  position: relative; width: 38px; height: 38px; border-radius: var(--chic-radius-circle);
  border: var(--chic-border-width) solid rgb(var(--chic-border));
  display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--chic-ink));
}
.chic-social::after { content: ''; position: absolute; inset: -3px; }
.chic-social:hover { border-color: rgb(var(--chic-ink)); }

/* سطر «زورونا»: مفصول بـ«—» على الديسكتوب وأسطر على الجوال (اللوحتان ٧ و٨) */
.chic-visit-sep { color: rgb(var(--chic-sep)); padding-inline: 4px; }
@media (max-width: 767px) {
  .chic-visit-sep { display: none; }
  .chic-visit-part { display: block; }
}

/* الفروع (Branch::onWebsite) — معلومة موجودة في النظام وغير مرسومة في اللوحات: نفس صندوق الحدود 1px */
.chic-branch-list { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.chic-branch { border: var(--chic-border-width) solid rgb(var(--chic-border-soft)); padding: 16px 18px; }
.chic-theme .chic-branch-name { margin: 0; font-size: 15px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); }
.chic-theme .chic-branch-addr { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: rgb(var(--chic-muted)); }
.chic-branch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ── ١٠ · حجز موعد: نقاط «لماذا تحجز معنا» ── */
.chic-points { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.chic-theme .chic-point-title { margin: 0; font-size: 15px; font-weight: var(--chic-fw-semibold); line-height: var(--chic-lh-heading); }
.chic-theme .chic-point-text { margin: 4px 0 0; font-size: 14px; line-height: 1.9; color: rgb(var(--chic-muted)); }

/* ── ١١ · نتيجة الدفع: صندوق تفاصيل الطلب داخل صندوق الحالة ── */
.chic-pay-box { margin: 24px 0 0; border: var(--chic-border-width) solid rgb(var(--chic-border-soft)); padding: 14px 18px; text-align: start; }
.chic-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 15px; line-height: 1.8; }
.chic-theme .chic-pay-row dt { color: rgb(var(--chic-muted)); }
.chic-theme .chic-pay-row dd { margin: 0; font-weight: var(--chic-fw-medium); color: rgb(var(--chic-ink)); }
.chic-theme .chic-pay-note { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: rgb(var(--chic-muted)); }