/* ==========================================================================
   footer.css — التذييل (Footer)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   WC-NOTE: القوائم عبر wp_nav_menu؛ أيقونات الدفع والشهادة الضريبية ثابتة.
   ========================================================================== */

.footer {
  background: var(--gradient-brand);
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

/* ---- الأعمدة (5): شعار + روابط سريعة + الخدمات + خدماتنا + تواصل ---- */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  padding-block: var(--space-32) var(--space-8);
  border-block-end: var(--border-width) solid var(--color-glass-fill);
}

@media (min-width: 640px) {
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__cols {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
    gap: var(--space-48);
    padding-block-start: var(--space-64);
  }
}

/* ---- عنوان العمود مع خط عنابي متلاشٍ ---- */
.footer__col-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* start = يمين في RTL */
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
  color: var(--color-text-invert);
}

.footer__col-line {
  width: 36px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to left, var(--color-primary), transparent);
}

/* ---- العمود الأول: الشعار + الوصف + جهات الاتصال ---- */
.footer__brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* start = يمين في RTL */
  gap: var(--space-16);
  text-align: start;
}

.footer__logo-img {
  width: 200px;
  max-width: 70%;
  height: auto;
  display: block;
}

.footer__logo-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-gold) 38%, transparent), transparent);
}

.footer__desc {
  font-size: var(--fs-xs);
  line-height: 2;
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
  max-width: 320px;
}

.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.footer__contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-xs);
}

/* أيقونة داخل مربّع عنابي شفّاف */
.footer__contact-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: color-mix(in srgb, var(--color-text-invert) 85%, transparent);
  font-size: var(--fs-2xs);
}

.footer__contact-list a,
.footer__contact-list span {
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

.footer__contact-list a:hover {
  color: var(--color-text-invert);
}

.footer__tax {
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

/* ---- قوائم الروابط مع سهم في البداية ---- */
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* start = يمين في RTL */
  gap: var(--space-12);
}

/* نستهدف <a> داخل القائمة مباشرةً (وليس كلاسًا مخصّصًا) ليعمل تلقائيًا مع
   wp_nav_menu — قوائم ووردبريس الديناميكية تُخرج <a> بلا كلاس .footer__link */
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

.footer__links a:hover {
  color: var(--color-text-invert);
}

/* السهم كعنصر زائف ::before في بداية الرابط (start = يمين في RTL) — بدل <i>
   المحقون يدويًا، ليظهر تلقائيًا على روابط القائمة دون تعديل الماركب.
   يشير يسارًا (\f177) نحو النص = اتجاه القراءة في RTL. */
.footer__links a::before {
  content: "\f177";
  /* fa-arrow-left-long */
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  font-size: 0.85em;
  opacity: 0.4;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
}

/* شهادة التسجيل الضريبي */
.footer__vat-img {
  width: 150px;
  height: auto;
  display: block;
  margin-block-start: var(--space-24);
  align-self: flex-start;
  /* start = يمين في RTL */
}

/* ---- أزرار التواصل الاجتماعي — بطاقة بعنوان وأيقونة ---- */
.footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* الأزرار تقدّ محتواها ومركونة يمين (start) كالتصميم */
  gap: var(--space-12);
}

.footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* المحتوى مُجمّع ناحية البداية = يمين في RTL */
  gap: var(--space-16);
  min-width: 150px;
  padding: var(--space-12) var(--space-16);
  background: color-mix(in srgb, var(--color-text-invert) 4%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text-invert) 8%, transparent);
  border-radius: var(--radius-lg);
  color: var(--color-text-invert);
  transition: background 0.2s ease;
}

.footer__social-btn:hover {
  background: color-mix(in srgb, var(--color-text-invert) 9%, transparent);
}

.footer__social-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* start = يمين في RTL */
  gap: 1px;
  text-align: start;
}

.footer__social-btn__text strong {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-invert);
}

.footer__social-btn__text span {
  font-size: var(--fs-2xs);
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

.footer__social-btn__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-text-invert) 13%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text-invert) 25%, transparent);
  color: var(--color-text-invert);
  font-size: var(--fs-base);
}

/* ---- شريط وسائل الدفع ---- */
.footer__payments {
  padding-block: var(--space-40);
  text-align: center;
  border-block-end: var(--border-width) solid var(--color-glass-fill);
}

.footer__payments-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-block-end: var(--space-24);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

.footer__pay-line {
  width: 110px;
  max-width: 20vw;
  height: 1px;
}

.footer__pay-line:first-child {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text-invert) 12%, transparent));
}

.footer__pay-line:last-child {
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--color-text-invert) 12%, transparent));
}

.footer__payments-img {
  height: 42px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}

/* ---- الشريط القانوني السفلي ---- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-20);
  font-size: var(--fs-2xs);
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

/* الجوال: توسيط الشريط السفلي وروابطه */
@media (max-width: 767px) {
  .footer__bottom {
    justify-content: center;
    text-align: center;
  }

  .footer__legal-links {
    justify-content: center;
  }
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.footer__legal-links a {
  color: color-mix(in srgb, var(--color-text-invert) 72%, transparent);
}

.footer__legal-links a:hover {
  color: var(--color-text-invert);
}

/* فاصل بين الرابطين */
.footer__legal-links a+a {
  padding-inline-start: var(--space-16);
  border-inline-start: var(--border-width) solid var(--color-glass-fill);
}