/* ============================================================
   Zoalk — components/crd.css
   البطاقات: أساسية · منتج/باقة · خطوة · إحصائية (لوحة التحكم)
   ============================================================ */

/* -------- البطاقة الأساسية -------- */
.crd{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
}
.crd--flat{box-shadow:none;}
.crd--hover{
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out),
             border-color var(--dur-normal) var(--ease-out);
}
.crd--hover:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.crd__title{font-size:var(--fs-h3);margin-block-end:var(--sp-2);}
.crd__desc{color:var(--text-muted);font-size:var(--fs-sm);}

/* -------- بطاقة المنتج / الباقة (رف المتجر) --------
   <article class="pkg [pkg--featured]">
     <span class="bdg bdg--float">الأكثر طلباً</span>
     <img class="pkg__img" …>
     <h3 class="pkg__name">…</h3>
     <p class="pkg__desc">…</p>
     <ul class="pkg__list">…</ul>
     <div class="pkg__price num">…</div>
     <a class="btn btn--primary btn--block">اطلب الآن</a>
   </article>                                                  */
.pkg{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  height:100%;
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out);
}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

/* الباقة المميزة: حلقة زمردية */
.pkg--featured{
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary);
}

.pkg__img{
  border-radius:var(--r-md);
  margin-block-end:var(--sp-4);
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  background:var(--surface-2);
}
.pkg__name{font-size:var(--fs-h3);margin-block-end:var(--sp-1);}
.pkg__desc{color:var(--text-muted);font-size:var(--fs-sm);margin-block-end:var(--sp-4);}

.pkg__list{margin-block-end:var(--sp-6);flex-grow:1;}
.pkg__list li{
  display:flex;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--text-muted);
  margin-block-end:var(--sp-2);
}
.pkg__list svg{
  width:1.1em;height:1.1em;
  color:var(--primary);
  flex-shrink:0;
  margin-block-start:.2em;
}

/* السعر ذهبي دائماً — إشارة قيمة */
.pkg__price{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:800;
  color:var(--accent);
  margin-block-end:var(--sp-4);
}
.pkg__price small{
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-muted);
}

/* -------- بطاقة خطوة (قسم "كيف بنشتغل") -------- */
.step{
  text-align:center;
  padding:var(--sp-4);
}
.step__num{
  width:3rem;height:3rem;
  margin:0 auto var(--sp-3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.2rem;
  color:var(--primary);
  background:var(--primary-tint);
  border-radius:var(--r-pill);
}
.step__title{font-size:var(--fs-body);font-weight:700;margin-block-end:var(--sp-1);}
.step__desc{font-size:var(--fs-sm);color:var(--text-muted);margin-inline:auto;}

/* -------- بطاقة إحصائية (لوحة التحكم) -------- */
.stat{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.stat__icon{
  width:2.8rem;height:2.8rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--primary-tint);
  color:var(--primary);
  flex-shrink:0;
}
.stat__icon svg{width:1.4rem;height:1.4rem;}
.stat--warning .stat__icon{background:var(--warning-bg);color:var(--warning);}
.stat--info .stat__icon{background:var(--info-bg);color:var(--info);}
.stat__value{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:800;
  line-height:1.1;
}
.stat__label{font-size:var(--fs-xs);color:var(--text-muted);}