/* =========================
   VP Doctors Cards – Full CSS (Dark Wrap = Card Color)
   ========================= */



/* ===== ترويسة كل سكشن + السطر التوضيحي ===== */
#vpdc-wrap .vpdc-sec{ margin-block:22px }
#vpdc-wrap .vpdc-sec h3{
 margin: 0;
font-weight: 600;
line-height: 1.9;
font-size: clamp(18px, 1.8vw, 20px);
letter-spacing: .1px;
position: relative;
padding-inline-start: 12px;
color: #fff;
}
#vpdc-wrap .vpdc-sec h3::before{
  content:""; position:absolute; inset-inline-start:0; inset-block:.2em;
  inline-size:4px; block-size:calc(100% - .4em); border-radius:6px;
  background:linear-gradient(180deg, #fa607c, #1bffb5 55%, #3300ff);
  box-shadow:0 0 8px rgba(96,165,250,.35);
}
#vpdc-wrap .vpdc-sec > small{
  display:block; margin:6px 0 14px; color:#656c79;
  font-weight:600; font-size:clamp(15px, 1.8vw, 18px); line-height:1.5;
}

/* ===== شبكة البطاقات: 1 → 2 → 3 أعمدة ===== */
#vpdc-wrap .vpdc-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items:stretch;
}
/* تصحيح أي CSS قديم يفرض عرضاً كاملاً */
#vpdc-wrap .vpdc-grid > .vpdc-card{ width:auto; max-width:none; margin:0; border-radius: 11px; }
@media (min-width:680px){
  #vpdc-wrap .vpdc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width:1020px){
  #vpdc-wrap .vpdc-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

/* =====================
   البطاقة ومكوّناتها
   ===================== */

/* متغيرات وأساسيات البطاقة (Grid ثلاثي الصفوف لتثبيت الفوتر بالأسفل) */
.vpdc-card{
  --vp-bg:#0b111b; --vp-card:#121a2a; /* نفس لون الغلاف */
  --vp-border:#1b2636; --vp-text:#eaf0ff; --vp-muted:#9fb0c6; --vp-accent:#ff376c;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);

  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto; /* رأس/محتوى مرن/فوتر */
  min-height:100%;
  overflow:hidden; /* لقص اللمعة/الهالة داخل البطاقة */
  color:var(--vp-text);

  /* تفتيح طفيف لتمييز البطاقة فوق الغلاف المتطابق اللون */
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) padding-box,
    var(--vp-card);
  border:1px solid rgba(96,165,250,.28); /* حدود مزرّقة لتمييز أقوى */
  box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.08) inset;

  padding:16px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.vpdc-card:hover{
  transform:translateY(-2px);
  border-color:#27405f;
  box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08) inset;
}
.vpdc-card:focus-within{ outline:2px solid #7ae0b6; outline-offset:2px }

/* “موف إفّكت” (لمعة تمسح البطاقة عند التحويم) */
.vpdc-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.10) 18%,
      rgba(255,255,255,.16) 22%,
      transparent 38%);
  transform:translateX(-160%);
  transition:transform .8s ease;
  opacity:.75;
}
.vpdc-card:hover::after{ transform:translateX(160%) }

/* هالة حدود خفيفة (اختياري) */
.vpdc-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    conic-gradient(from 220deg,
      rgba(96,165,250,.22),
      rgba(255,55,108,.18),
      rgba(122,224,182,.18),
      rgba(96,165,250,.22));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
  padding:1px; opacity:0; transition:opacity .35s ease, filter .35s ease;
  filter:saturate(1.05);
}
.vpdc-card:hover::before{ opacity:.9 }

/* الصف العلوي: الصورة ثم المعلومات */
.vpdc-row{
  display:grid; gap:12px;
  grid-template-columns:86px 1fr;
  align-items:start;
}

/* الصورة (حلقة تدرّج) */
.vpdc-avatar{
  inline-size:86px; block-size:86px; aspect-ratio:1/1;
  border-radius:50% !important; object-fit:cover; padding:2px;
  background:
    linear-gradient(#ff0047, #ffb300) padding-box,
    conic-gradient(from 210deg,
      rgba(255,55,108,.9) 0deg, rgba(255,55,108,.55) 80deg,
      rgba(122,224,182,.45) 160deg, rgba(59,130,246,.45) 260deg,
      rgba(255,55,108,.9) 360deg) border-box;
  border:1px solid transparent;
  transition:transform .25s ease, filter .25s ease, background .35s ease;
}
.vpdc-card:hover .vpdc-avatar{
  transform:translateY(-1px) scale(1.02);
  filter:saturate(1.05);
  background:
    linear-gradient(#a9ff00, #ff0050) padding-box,
    conic-gradient(from 210deg,
      rgba(255,55,108,.9) 0deg, rgba(255,55,108,.55) 80deg,
      rgba(122,224,182,.45) 160deg, rgba(59,130,246,.45) 260deg,
      rgba(255,55,108,.9) 360deg) border-box;
}
.vpdc-card:focus-within .vpdc-avatar{ outline:2px solid rgba(255,55,108,.35); outline-offset:2px }

/* الاسم والتخصّص */
.vpdc-name{ margin:0; font-weight:800; font-size:1.02rem; line-height:1.5; color:#fff }
.vpdc-spec{
  margin:.25rem 0 0; color:#e7efff; font-size:.96rem; font-weight:800; line-height:1.45;
  letter-spacing:0; text-wrap:balance; padding-inline-start:.75rem; position:relative;
}
.vpdc-spec::before{
  content:""; position:absolute; inset-inline-start:0; inset-block:.25em;
  block-size:calc(100% - .5em); inline-size:3px; border-radius:6px;
  background:linear-gradient(180deg,#ff6a96, #ff376c 55%, #7ae0b6);
  box-shadow:0 0 8px rgba(255,55,108,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.vpdc-card:hover .vpdc-spec::before{ transform:scaleX(1.25); box-shadow:0 0 10px rgba(255,55,108,.45) }

/* التقييم */
.vpdc-rating{ display:flex; align-items:center; gap:8px; margin-top:6px; color:#ffd3e0 }
.vpdc-stars{ display:inline-flex; gap:2px }
.vpdc-stars svg{ inline-size:16px; block-size:16px }
.vpdc-avg{ font-weight:800; color:#fff }
.vpdc-rev{ color:var(--vp-muted); font-size:.9rem }

/* فيديوهات */
.vpdc-videos{ margin-top:8px; color:#d3d9e4; font-size:.92rem }

/* الشرائح/الأسعار */
.vpdc-prices-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.vpdc-chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:#162336; border:1px solid #223149; color:#d3d9e4;
  border-radius:999px; padding:.28rem .6rem; font-size:.82rem; line-height:1.2;
}

/* أسفل البطاقة (زر الحجز) – كامل العرض وبالمنتصف وثابت أسفل البطاقة */
.vpdc-foot{
  grid-row:3;           /* الصف الأخير من شبكة البطاقة */
  margin-top:auto;
  padding-top:12px;
}
.vpdc-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  inline-size:100%;                     /* عرض كامل البطاقة */
  padding:14px 16px;                    /* مساحة لمس مريحة */
  border-radius:14px;
  text-decoration:none; cursor:pointer;
  font-size:15px; font-weight:800; letter-spacing:.2px; line-height:1;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) padding-box,
    var(--vp-accent);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.vpdc-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
.vpdc-btn:active{ transform:translateY(0); filter:brightness(0.98) }
.vpdc-btn:focus-visible{ outline:2px solid #7ae0ب6; outline-offset:2px }

/* شارات (متصل/خصم) */
.vpdc-online-dot{
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  inline-size:10px; block-size:10px; border-radius:50%; background:#16c784;
  box-shadow:0 0 0 3px rgba(22,199,132,.18);
}
.vpdc-badge-discount{
  position:absolute; inset-block-start:10px; inset-inline-end:10px;
  background:#ff376c; color:#fff; border-radius:999px;
  padding:.22rem .55rem; font-size:.78rem; box-shadow:0 6px 16px rgba(255,55,108,.35);
}

/* =====================
   الاستجابة والتيسير
   ===================== */

/* ≤ 679px — تكديس عمودي: الصورة بالأعلى */
@media (max-width:679px){
  .vpdc-row{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:10px }
  .vpdc-avatar{ inline-size:80px; block-size:80px; margin:0 auto 8px; justify-self:start }
  .vpdc-name{ text-align:center; font-size:1.0rem }
  .vpdc-spec{ font-size:.9rem }
  .vpdc-chip{ padding:.24rem .5rem; font-size:.78rem }
  .vpdc-foot{ margin-top:10px }
  .vpdc-btn{ inline-size:100% }        /* يبقى كامل العرض على الموبايل */
}

/* 680–1019px — عمودان (الصورة + المحتوى) */
@media (min-width:680px) and (max-width:1019px){
  .vpdc-row{ grid-template-columns:86px 1fr }
  .vpdc-avatar{ inline-size:86px; block-size:86px }
  .vpdc-name{ font-size:1.04rem }
  .vpdc-spec{ font-size:.92rem }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .vpdc-card::after{ transition:none; transform:none; opacity:.08 }
  .vpdc-card:hover::after{ transform:none }
  .vpdc-card::before{ transition:none }
}@media (max-width: 768px) {
  .vpdc-avatar-link {
    display: block;        /* الرابط يصير بلوك */
    text-align: center;    /* يوسّط محتواه */
  }

  .vpdc-avatar-link img {
    display: block;        /* الصورة تصير بلوك */
    margin: 0 auto;        /* الصورة بالنص */
    max-width: 100%;       /* مرونة على الشاشات */
    height: auto;
  }
}