/* =========================================================
   public.css — تحسينات بصرية لصفحات الموقع العام (public)
   يُحمّل بعد style.css فيرث كل التوكنات ويطوّر المظهر
   نطاقه محصور بصفحات public عبر body.page--* والحاويات العامة
   ========================================================= */

/* ---------------------------------------------------------
   1) عناوين الصفحات — لمسة بصرية مميّزة (خط سفلي متدرّج)
   --------------------------------------------------------- */
.page--drivers .page-header h1,
.page--requests .page-header h1 {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-3);
}
.page--drivers .page-header h1::after,
.page--requests .page-header h1::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

/* ---------------------------------------------------------
   2) البطاقات — ظل أنعم وانتقال موحّد (drivers / requests)
   --------------------------------------------------------- */
.page--drivers .driver-card,
.page--requests .request-card {
  border: 1px solid var(--border-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
}
.page--requests .request-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--primary-rgb), 0.25);
}
.page--drivers .driver-card:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
}

/* ---------------------------------------------------------
   3) أزرار عامة — انتقال أنعم وتفاعل لمسي واضح
   --------------------------------------------------------- */
.page--drivers .btn,
.page--requests .btn,
.contact-page .btn,
.detail-page .btn {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.page--drivers .btn--primary:hover,
.page--requests .btn--primary:hover,
.contact-page .btn--primary:hover,
.detail-page .btn--primary:hover {
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.28);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------
   4) الترقيم (pagination) — وصولية: تفاعل بلوحة المفاتيح
   العناصر مبنية كـ div؛ نمنحها مظهر تفاعلي واضح عند التركيز
   --------------------------------------------------------- */
.pagination__item { transition: transform var(--transition), border-color var(--transition), color var(--transition), background var(--transition); }
.pagination__item:hover { transform: translateY(-2px); }
.pagination__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   5) حقول الإدخال — حلقة تركيز متسقة عبر كل نماذج public
   --------------------------------------------------------- */
.contact-page .input-field:focus,
.contact-page textarea:focus,
.detail-page .input-field:focus,
.page--profile .order-form .input-field:focus,
.page--profile .order-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* ---------------------------------------------------------
   6) روابط الفوتر — تفاعل أنعم (يفيد كل صفحات public)
   --------------------------------------------------------- */
.footer__col a { transition: color var(--transition), padding-inline-start var(--transition); }
.footer__col a:hover { color: var(--primary); }

/* ---------------------------------------------------------
   7) صفحة الاتصال — بطاقات الفروع أنعم وأكثر حيوية
   --------------------------------------------------------- */
.contact-page .branch-card,
.contact-info-box,
.contact-form-box {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.contact-page .branch-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------
   8) الأسئلة الشائعة (g11 — عنصر details) — مظهر متسق
   --------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item[open] {
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ---------------------------------------------------------
   9) صور غلاف البطاقات — تحميل أنعم (منع القفزات)
   --------------------------------------------------------- */
.page--drivers .driver-card__banner > img,
.page--requests .request-card img {
  background: var(--bg-alt);
}

/* ---------------------------------------------------------
   10) تحسينات تجاوب دقيقة لصفحات public
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .page--drivers .page-header h1,
  .page--requests .page-header h1 { font-size: 1.6rem; }
}