/*
  virtualpsy – CSS مُعاد الهيكلة (App-like)
  - ملف واحد متجاوب، RTL افتراضي، ألوان عبر متغيرات، تحسين قابلية الوصول والأداء.
  - يُحافظ على أسماء الأصناف الحالية قدر الإمكان.
*/

/* =========================
   الأساس (Variables + Reset)
   ========================= */
:root{
  --bg:#0f0f10; --card:#151517; --surface:#1b1c1f;
  --ink:#ffffff; --ink-soft:#a5a7ac; --accent:#bc6a6a;
  --border:#232428; --radius:14px; --shadow:0 6px 20px rgba(0,0,0,.18);
  --focus:2px solid #3b82f6;

  /* خريطة ألوان قديمة -> جديدة */
  --primary-color: var(--accent);
  --secondary:#27496F;
  --third:#30799E;

  /* قياسات سائلة */
  --space:clamp(12px,1.8vw,20px);
  --r:clamp(10px,1.2vw,16px);
}

*,
*::before,
*::after{ box-sizing:border-box }

html{ direction:rtl }
html,body{
  height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 clamp(14px,1.6vw,16px)/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{ max-width:100%; height:auto; display:block }

a{ color:inherit; text-decoration:none }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{ outline:var(--focus); outline-offset:2px }

::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); color:#fff }

/* تخفيف الحركة */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important }
}

/* =========================
   هيكل التطبيق (Header / Content)
   ========================= */
#header{
  position:sticky; top:0; left:0; right:0;
  z-index:1000;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--border);
  box-shadow:none;
}

#header .menu-site{
  padding:0; margin:0;
  list-style:none;
  display:flex; gap:clamp(8px,2vw,24px);
  align-items:center;
}

#header .menu-site li a{
  color:var(--ink);
  opacity:.92;
  padding:.6rem .8rem;
  border-radius:10px;
  transition:opacity .2s, background-color .2s;
}
#header .menu-site li a:hover{ background:rgba(255,255,255,.06); opacity:1 }

#header li.nav-item .btn{
  padding:.7rem 1.6rem !important;
}

.app-content{ padding:clamp(14px,2.5vw,28px) }

/* زر فتح القائمة للموبايل (إن وُجد) */
.nav-toggle{
  display:none;
  appearance:none;
  background:transparent;
  border:0;
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  padding:.4rem .6rem;
  border-radius:10px;
}
.nav-drawer{
  display:none;
  position:fixed; inset:0 0 0 auto;
  width:min(84vw,360px);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:var(--space);
  border-inline-start:1px solid var(--border);
}
.nav-drawer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.nav-drawer a{ padding:.7rem .9rem; border-radius:10px; background:rgba(255,255,255,.04) }

/* =========================
   مكوّنات عامة (Buttons / Cards / Grid)
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.65rem 1rem !important;
  border-radius:12px !important;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:color-mix(in srgb, var(--surface) 85%, #ffffff 15%) }
.btn:active{ transform:translateY(1px) }
.btn.solid{ background:var(--accent); border-color:transparent; color:#fff }
.btn.solid:hover{ filter:saturate(1.1) brightness(1.05) }
.btn.ghost{ background:transparent; border-color:var(--border) }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
}
.card-header,
.card-footer{
  border-color:var(--border);
  background:transparent;
}
.card-header{ padding:clamp(12px,1.8vw,18px) }
.card-body{ padding:clamp(14px,2vw,22px) }

.grid-cards{
  display:grid;
  gap:clamp(10px,2vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

/* =========================
   نصوص وعناوين
   ========================= */
h1,h2,h3,h4{ color:#fff; margin:0 0 .6rem }
h1{ font:800 clamp(22px,3.6vw,34px)/1.2 inherit }
h2{ font:700 clamp(18px,2.8vw,28px)/1.25 inherit }
h3{ font:700 clamp(16px,2.2vw,22px)/1.3 inherit }
p, .card-text{ color:var(--ink-soft); margin:0 0 .8rem; max-width:75ch }

/* =========================
   عناصر موروثة من الثيم الأصلي (مُنظَّفة)
   ========================= */

/* صور أفاتار التقييمات */
.rates-container .rate-head picture img,
.rate-head>img{
  width:5rem; height:5rem; border-radius:50%; object-fit:cover; display:inline-block; vertical-align:top; margin-inline-start:1rem;
}

/* Placeholder متحرك */
.img-placeholder{
  display:block; border-radius:8px; overflow:hidden; max-height:216px;
  background-image:linear-gradient(90deg,#eeeeee 0%,#dddddd 20%,#eeeeee 40%,#eeeeee 100%);
  background-size:200% 100%; animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* الشعار وروابط */
.navbar-brand{ font-weight:700; color:var(--accent) }

/* صناديق الطبيب */
.doctor-box,
.doctor-box-horizontal{
  position:relative;
  padding:clamp(12px,1.8vw,18px);
  background:color-mix(in srgb, var(--card) 86%, #ffffff 6%);
  display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,18px);
  border-radius:12px; border:1px solid var(--border);
}
.doctor-avatar{ width:100%; max-width:160px; height:160px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center }
.doctor-avatar img{ width:100%; height:100%; object-fit:cover }

.col-doctor .doctor-avatar{ max-width:90px; height:90px }

.doctor-card-meta{
  flex:1 1 auto; min-width:220px; color:#ddd; padding-inline-start:10px;
}
.doctor-name{ font-weight:700; display:flex; align-items:center; justify-content:space-between }
.doctor-name h3{ font-size:clamp(18px,2.4vw,22px); margin:0 }
.doctor-speciality{ color:#d6d6d6; margin-top:.4rem }
.doctor-card-rates .review{ display:inline-block }

.doctor-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,24px); width:100%; margin-block-start:10px;
}

.doctor-online-box{
  position:absolute; inset-block-start:clamp(8px,1.5vw,16px); inset-inline-end:clamp(8px,1.5vw,16px);
  color:#1ba259; background:#28a745; border-radius:999px; padding:.2rem .6rem; font-weight:600; display:flex; align-items:center; gap:6px;
}
.doctor-online-box::before{
  content:""; width:10px; height:10px; background:currentColor; border-radius:50%;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{ 0%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} 100%{transform:scale(1);opacity:0} }

/* شارة الخصم */
.discount-badge{
  position:absolute; top:-10px; inset-inline-end:12px;
  background:#e74c3c; color:#fff; padding:4px 10px; border-radius:8px; font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.discount-badge::before{ content:"🎉"; margin-inline-start:.4rem }

/* فلاتر الأطباء */
.doctor-filter{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
}
.doctor-filter input,
.doctor-filter select{
  background:transparent; color:var(--ink); border:1px solid var(--border);
  padding:.6rem .8rem; border-radius:10px; box-shadow:none;
}

/* بطاقات التدوين */
.post-card.card{ height:100%; border-color:var(--border); box-shadow:var(--shadow) }
.post-card.card .card-header{ padding:0 0 50%; position:relative; overflow:hidden; border:none }
.post-card.card .card-header .post-thumbnail{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.post-category a{ color:#ddd; font-weight:700; display:block; margin-bottom:.6rem }
.post-category a::before{ content:""; width:.4rem; height:.4rem; display:inline-block; background:var(--accent); border-radius:50%; margin-inline-start:.5rem }

/* شريط التنبيهات */
.important-notice{
  padding:var(--space);
  background:color-mix(in srgb, var(--accent) 90%, #000 10%);
  color:#fff; border-radius:12px; font-weight:700; opacity:.95; transition:opacity .2s;
}

/* البطل (الهيرو/اللانديغ) */
#landing-section{
  background:linear-gradient(0deg, var(--third), var(--secondary));
  position:relative; padding-block:clamp(40px,10vw,120px);
  overflow:hidden; border-radius:calc(var(--radius) + 2px);
}
#landing-body{ position:relative; color:#fff; z-index:1 }
#landing-img{ position:absolute; inset-inline-start:0; inset-block-end:-12px; height:70%; opacity:.18 }

/* التبويبات Pills/Tabs */
.nav-pills .nav-link{
  color:#cfe2ff; border:2px solid #cfe2ff; border-radius:10px; font-weight:700;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
  color:#fff; border-color:transparent;
  background-image:linear-gradient(90deg, var(--secondary), var(--third));
}

/* الأسئلة الشائعة */
.question{ display:grid; gap:17px }
.question .card{ background:var(--surface); border:1px solid var(--border) !important; border-radius:10px !important }
.question .card-header{ border:0; padding:16px 18px }
.question h3.card-link{ display:flex; align-items:center; justify-content:space-between }

/* جدول/قائمة المواعيد */
.schedule-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:clamp(16px,2.2vw,24px); box-shadow:var(--shadow); color:#fff;
  transition:transform .2s, box-shadow .2s;
}
.schedule-card:hover{ transform:translateY(-4px) }
.schedule-card h3{
  font-weight:700; color:#fff; text-align:center;
  background:linear-gradient(135deg,#3a3a8b,#2c2c72);
  border-radius:12px; padding:.75rem; margin:0 0 1rem;
}
.schedule-card h3.today{ background:linear-gradient(135deg,#1abc9c,#16a085) }
.schedule-card h3.tomorrow{ background:linear-gradient(135deg,#f39c12,#e67e22) }
.schedule-card h3.future{ background:linear-gradient(135deg,#e74c3c,#c0392b) }

.schedule-card ul{ list-style:none; margin:0; padding:0 }
.schedule-card li{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
  transition:background .2s, transform .2s;
}
.schedule-card li:hover{ background:color-mix(in srgb, var(--surface) 90%, #ffffff 10%); transform:scale(1.01) }
.schedule-card li span{ font-size:.95em; color:#ddd; margin:0 5px; text-align:center; flex:1 }
.schedule-card li span[data-currency-amount]{ font-weight:800; color:#5da8ff }

/* استبدال المحدِّد غير القياسي :contains() بمحدد سمتي */
.schedule-list [data-part="date"]{ color:#eee; font-weight:700 }
.schedule-list [data-part="time"]{ color:#c8d1ff }
.schedule-list [data-part="duration"]{ color:#a8b0c9; font-weight:500; font-size:.92em }
.schedule-list [data-part="price"]{ color:#5da8ff; font-size:1.05em; font-weight:800 }

/* أزرار الجلسات */
.book-now-trigger{
  composes: btn from none; /* توثيقي فقط */
  background:#48bb78; border:0; color:#fff; font-weight:700; border-radius:10px;
  padding:.7rem 1rem; box-shadow:0 6px 16px rgba(72,187,120,.25);
}
.book-now-trigger:hover{ background:#38a169; transform:translateY(-2px) }
.reserved{ background:rgba(245,101,101,.08); border-inline-start:6px solid #e53e3e }
.reserved-button{ background:#e53e3e; color:#fff; cursor:not-allowed; opacity:.9 }
.unavailable-button{ display:inline-block; padding:.6rem 1rem; border-radius:8px; background:#6664; color:#bbb; cursor:not-allowed; font-weight:700 }

.no-schedule-message{
  background:#2a1d21; color:#ffd7dc; border:1px solid #5b2b34; border-radius:12px;
  padding:14px; text-align:center; font-weight:800; margin:16px auto; max-width:620px;
}

/* عناصر متنوعة مُبسّطة */
.bg-primary{ background:var(--accent) !important; color:#fff }
.bg-secondary{ background:var(--surface) !important; color:#fff }
.grey-bg{ background:#1e2a30 }
.low-price{ font-weight:700; font-size:1.15rem }

/* تذييل */
#footer{
  background:var(--surface);
  color:#fff; padding:clamp(18px,3vw,28px) 0;
  border-top:1px solid var(--border);
}
.footer_ul{ list-style:none; padding:0; margin:0; color:#fff }
.footer_ul li+li{ margin-top:.35rem }
.social_footer_ul{ display:flex; gap:10px; justify-content:center; list-style:none; padding:0; margin:15px 0 0 }
.social_footer_ul a{ color:#fff; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08) }

/* أزرار المستخدم */
.user-mobile-btn,
.user-mobile > a.btn{
  display:inline-flex; align-items:center; gap:8px; background:#1d3557; color:#fff;
  padding:.6rem 1rem; height:44px; border-radius:30px; font-weight:700; border:0; transition:background .2s, transform .2s;
}
.user-mobile-btn:hover,
.user-mobile > a.btn:hover{ background:#16314a; transform:translateY(-2px) }

/* زر الأسعار */
.price-link-button{
  width:100%; text-align:center; color:#fff; background:#16a085;
  line-height:44px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:6px;
}

/* Placeholders للفيديو/الدروس */
.tutorial-item{ position:relative; border-radius:10px; overflow:hidden; background:#000 }
.tutorial-item img{ width:100%; height:100%; object-fit:cover; opacity:.7 }
.tutorial-caption{ position:absolute; inset-inline:0; inset-block-end:0; color:#fff; padding:0 1rem .8rem }

/* =========================
   إصلاحات أيقونات Font Awesome
   ========================= */
/* إلغاء عكس كل الأيقونات عالمياً لأنه يسبب أخطاء، واستخدم صنفاً اختيارياً عند الحاجة */
.fa-solid,.fas{ transform:none }
.rtl-flip{ transform:scaleX(-1) }

/* =========================
   استجابات (نقطة/نقطتان فقط)
   ========================= */

/* <= 992px */
@media (max-width: 992px){
  #header .menu-site{ gap:14px; font-size:.95rem }
  .grid-cards{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
  .post-item .post-caption a{ font-size:1rem }
}

/* <= 768px */
@media (max-width: 768px){
  .app-content{ padding:clamp(12px,3.6vw,18px) }
  .nav-toggle{ display:inline-block }
  .nav-drawer[aria-hidden="false"]{ display:block }
  #footer .ttop{ display:grid; gap:14px; justify-items:center; text-align:center }
  .items-footer{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px }
  .doctor-box-horizontal{ flex-direction:column; align-items:stretch }
  .doctor-avatar{ max-width:120px; height:120px; margin-inline:auto }
  .schedule-card li{ flex-wrap:wrap; text-align:center }
  .schedule-card li span{ flex:100% }
  .footer-mobile{ position:fixed; inset-block-end:0; inset-inline:0; z-index:1000; display:flex; background:#fff; color:#222 }
  #footer{ padding-bottom:72px } /* فسحة لشريط الموبايل */
}

/* حواف آمنة للأجهزة ذات النتوء */
.app-content,
#header,
.footer-mobile{ padding-left:calc(env(safe-area-inset-left) + 0px); padding-right:calc(env(safe-area-inset-right) + 0px) }