/* ============================================================
   نظام التصميم — مجمع الماسة المشرقة الطبي
   لوحة تركوازية هادئة على خلفية فاتحة، بطاقات بيضاء وحدود رفيعة.
   ============================================================ */

:root {
  /* ── الهوية ── */
  --brand: #47b6ed;
  --brand-hover: #2ea3e0;
  --brand-deep: #0d6ea6;
  /* درجة أغمق من نفس اللون للنصوص والأيقونات فوق الخلفيات الفاتحة —
     #47b6ed على الأبيض تباينه 2.29:1 وهو غير مقروء (المطلوب 4.5:1) */
  --brand-text: #0d6ea6;
  --brand-tint: #e8f5fd;
  --brand-tint-2: #cfe8fa;

  /* ── الأسطح ── */
  --surface: #f4f9fc;
  --surface-lowest: #ffffff;
  --surface-low: #f9fcfe;
  --surface-container: #eef5fa;
  --surface-high: #e6f1f8;
  --surface-highest: #dceaf4;
  --surface-variant: #e2edf5;
  --surface-dim: #dbe8f1;
  --surface-bright: #ffffff;

  /* ── النصوص ── */
  --on-surface: #0f2430;
  --on-surface-variant: #5a6b78;
  --inverse-surface: #0e3a55;
  --inverse-on-surface: #e9f4fb;

  /* ── الحدود ── */
  --outline: #8ba3b5;
  --outline-variant: #dde8f1;

  /* ── الألوان الوظيفية ── */
  --primary: #47b6ed;
  --on-primary: #ffffff;
  --primary-container: #cfe8fa;
  --on-primary-container: #084767;
  --primary-fixed: #e8f5fd;
  --primary-fixed-dim: #b3daf3;

  --secondary: #47606f;
  --secondary-container: #dbe9f2;
  --tertiary: #3f5a77;
  --tertiary-container: #d6e2ef;
  --tertiary-fixed: #e6eef5;

  --error: #b3261e;
  --on-error: #ffffff;
  --error-container: #fce8e6;
  --on-error-container: #8c1d18;
  --success: #1f7a52;
  --success-container: #dcf1e7;
  --warning: #8a5a12;
  --warning-container: #fdefd9;
  --info: #2d5b78;
  --info-container: #dcebf5;

  /* ── تدرجات وأسطح مساعدة (تستخدمها لوحة التحكم) ── */
  --metal: linear-gradient(135deg, #e8f5fd 0%, #cfe8fa 100%);
  --metal-hover: linear-gradient(135deg, #f1f9fe 0%, #dcf0fc 100%);
  --metal-dark: linear-gradient(135deg, #47b6ed 0%, #0d6ea6 100%);
  --metal-text: var(--brand);

  /* ── الظلال ── */
  --shadow-xs: 0 1px 2px rgba(15, 36, 48, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 36, 48, 0.05);
  --shadow-md: 0 8px 24px -8px rgba(15, 36, 48, 0.10);
  --shadow-lg: 0 20px 48px -16px rgba(15, 36, 48, 0.16);

  /* ── الأشكال ── */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── المسافات ── */
  --unit: 8px;
  --gutter: 16px;
  --container-margin: 24px;
  --section-padding: 72px;
  --max-width: 1180px;

  /* ── الطباعة ── */
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --display-lg: 52px;
  --headline-lg: 34px;
  --headline-md: 22px;
  --body-lg: 17px;
  --body-md: 15px;
  --label-md: 14px;

  --transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── إعادة الضبط ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--body-md);
  line-height: 1.75;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 { line-height: 1.28; font-weight: 700; text-wrap: balance; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-tint-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── أدوات مساعدة ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

.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;
}

.metallic-text { color: var(--brand-text); }

/* ── الأزرار ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: var(--body-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--brand-hover); box-shadow: 0 6px 18px -6px rgba(71, 182, 237, 0.55); }

.btn-dark { background: var(--inverse-surface); color: var(--inverse-on-surface); }
.btn-dark:not(:disabled):hover { background: #0a2c42; }

.btn-outline { border-color: var(--outline-variant); color: var(--on-surface); background: var(--surface-lowest); }
.btn-outline:not(:disabled):hover { border-color: var(--brand-text); color: var(--brand-text); }

.btn-tint { background: var(--brand-tint); color: var(--brand-text); }
.btn-tint:hover { background: var(--brand-tint-2); }

.btn-white { background: #fff; color: var(--brand-text); }
.btn-white:hover { background: var(--brand-tint); }

.btn-ghost { color: var(--on-surface-variant); padding: 10px 16px; }
.btn-ghost:hover { background: var(--surface-container); color: var(--on-surface); }

.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1fbf5a; }

.btn-sm { padding: 9px 18px; font-size: var(--label-md); }
.btn-lg { padding: 16px 32px; font-size: var(--body-lg); }
.btn-block { width: 100%; }

/* ── البطاقات ──────────────────────────────────────────────── */
.card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
}

/* ── حقول الإدخال ──────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: var(--label-md);
  font-weight: 500;
  color: var(--on-surface);
}
.field label .req { color: var(--error); margin-inline-start: 2px; }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-size: var(--body-md);
}

.input::placeholder, .textarea::placeholder { color: #9aaba7; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px rgba(71, 182, 237, 0.28);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b78' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-inline-end: 40px;
}

.textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.field-error .input, .field-error .select, .field-error .textarea { border-color: var(--error); }

.error-msg { font-size: 13px; color: var(--error); display: none; }
.field-error .error-msg { display: block; }

.hint { font-size: 12.5px; color: var(--on-surface-variant); }

/* ── الشارات ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-new            { background: var(--info-container);    color: var(--info); }
.badge-contacting     { background: var(--warning-container); color: var(--warning); }
.badge-no_answer      { background: var(--surface-highest);   color: var(--on-surface-variant); }
.badge-booked         { background: var(--success-container); color: var(--success); }
.badge-not_interested { background: var(--error-container);   color: var(--on-error-container); }

/* ── الرسائل ───────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: var(--label-md);
  border: 1px solid transparent;
}
.alert-error   { background: var(--error-container);   color: var(--on-error-container); border-color: #f3ccc8; }
.alert-success { background: var(--success-container); color: var(--success); border-color: #bfe3d2; }
.alert-info    { background: var(--info-container);    color: var(--info); border-color: #c8dded; }

/* ── مؤشر التحميل ──────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }