/* =========================================================
   صالوني — لوحة ألوان وردية/ذهبية فوق نفس هيكل عيادتي.

   لا نكرّر ورقة أنماط كاملة: نعيد تعريف متغيّرات الـ teal فقط،
   فيتلوّن كل شيء بُني عليها (الأزرار، الشرائط، الشارات، المخططات)
   بلا لمس أي قاعدة تخطيط. أي تحسين لاحق في app.css يرثه المنتجان.
   ========================================================= */

body.theme-rose {
  --teal-50:  #fdf2f6;
  --teal-100: #fce7ef;
  --teal-200: #fbcfe0;
  --teal-300: #f9a8c8;
  --teal-400: #f472a8;
  --teal-500: #e0407f;
  --teal-600: #be1558;   /* اللون الأساسي — وردي عميق */
  --teal-700: #9d1148;
  --teal-800: #7d0e39;
  --teal-900: #650b2e;

  /* لمسة ذهبية للتفاصيل: الباقات والنقاط */
  --gold-100: #fdf3e0;
  --gold-300: #f0cf9a;
  --gold-500: #c99a4b;
  --gold-700: #8f6a2c;
}

/* الترويسة العلوية بتدرّج وردي-ذهبي */
body.theme-rose .topbar {
  background: linear-gradient(135deg, #9d1148 0%, #be1558 55%, #c99a4b 160%);
}

body.theme-rose .auth-wrap {
  background: linear-gradient(150deg, #9d1148, #be1558 60%, #e0407f);
}

/* ---------- الباقات ---------- */
.pkg-card {
  border: 1px solid var(--gold-300); background: var(--gold-100);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pkg-name { font-weight: 800; color: var(--gold-700); }
.pkg-left {
  font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--teal-700); line-height: 1;
}
.pkg-bar { height: 7px; border-radius: 4px; background: #fff; overflow: hidden; margin: 8px 0 4px; }
.pkg-bar i { display: block; height: 100%; background: var(--teal-500); }
.pkg-meta { font-size: .76rem; color: var(--ink-500); display: flex; gap: 10px; flex-wrap: wrap; }
.pkg-expired { opacity: .6; }
.pkg-expired .pkg-left { color: var(--ink-400); }

/* ---------- نقاط الولاء ---------- */
.pts-badge {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 800;
  background: var(--gold-100); color: var(--gold-700);
  border: 1px solid var(--gold-300); border-radius: 999px; padding: 4px 12px;
}
.pts-value { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ---------- معرض قبل/بعد ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ba-item {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff;
}
.ba-item img { width: 100%; height: 150px; object-fit: cover; display: block; cursor: zoom-in; }
.ba-tag {
  display: block; text-align: center; font-size: .76rem; font-weight: 800; padding: 5px;
}
.ba-before { background: var(--ink-100); color: var(--ink-600); }
.ba-after  { background: var(--teal-50); color: var(--teal-700); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba-consent { font-size: .72rem; color: var(--ink-500); padding: 4px 6px; border-top: 1px dashed var(--border); }

/* ---------- مدّة الخدمة في شبكة الأوقات ---------- */
.svc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.svc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px;
  background: #fff; cursor: pointer; font-family: inherit; text-align: start; width: 100%;
}
.svc-btn:hover { border-color: var(--teal-400); background: var(--teal-50); }
.svc-btn.selected { border-color: var(--teal-500); background: var(--teal-50); }
.svc-btn .nm { font-weight: 700; color: var(--ink-900); font-size: .92rem; }
.svc-btn .mt { font-size: .76rem; color: var(--ink-500); }
.svc-btn .pr { font-weight: 800; color: var(--teal-700); font-variant-numeric: tabular-nums; white-space: nowrap; }