/* ════════════════════════════════════════════════════════
   النسخة الكاملة v2 — متجر جودة | gawdahstore.com
   تحل محل كل الكود القديم: احذف محتوى خانة CSS المخصص
   بالكامل والصق هذا الملف بداله

   الجديد في هذي النسخة:
   حذف كل هاكات المسافات والأحجام من الهيدر
   (هوامش الشعار، الهوامش السالبة، تصفير الارتفاعات،
   مقاسات الأيقونات المفروضة، وتعويضات دفع المحتوى)
   عشان يرجع الهيدر لترتيب الثيم الافتراضي المضبوط.
   بقيت ألوان الهيدر فقط لأنها ما تأثر على المواضع.
════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1) متغيرات الهوية
───────────────────────────────────────── */
:root {
  --g-blue: #0099e5;        /* الأزرق الأساسي للمتجر */
  --g-blue-dark: #0074ba;   /* درجة أغمق للتدرجات */
  --g-blue-tint: #eaf6fd;   /* أزرق فاتح جدًا للخلفيات */
  --g-ink: #1c2b36;         /* لون النصوص الغامقة */
  --g-radius: 14px;         /* استدارة الزوايا الموحّدة */
  --g-shadow: 0 6px 20px rgba(0, 116, 186, .10);
  --g-shadow-lg: 0 16px 34px rgba(0, 116, 186, .16);
  --g-ease: cubic-bezier(.22, .8, .3, 1);
}

::selection {
  background: var(--g-blue);
  color: #fff;
}


/* ─────────────────────────────────────────
   2) بطاقات المنتجات
───────────────────────────────────────── */
.s-product-card-entry {
  border-radius: var(--g-radius) !important;
  overflow: hidden;
  border: 1px solid rgba(28, 43, 54, .06);
  box-shadow: 0 2px 10px rgba(28, 43, 54, .05);
  transition: transform .35s var(--g-ease),
              box-shadow .35s var(--g-ease);
}

.s-product-card-entry:hover {
  transform: translateY(-6px);
  box-shadow: var(--g-shadow-lg);
}

.s-product-card-image {
  overflow: hidden;
}

.s-product-card-image img {
  transition: transform .5s var(--g-ease);
}

.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.06);
}

.s-product-card-price,
.s-product-card-sale-price h4 {
  color: var(--g-blue) !important;
  font-weight: 700 !important;
}


/* ─────────────────────────────────────────
   3) شارة الخصم / العروض
───────────────────────────────────────── */
.s-product-card-promotion-title {
  background: linear-gradient(135deg, #ff5757, #d92662) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  box-shadow: 0 4px 10px rgba(217, 38, 98, .30);
}


/* ─────────────────────────────────────────
   4) الأزرار
───────────────────────────────────────── */
.s-button-element.s-button-primary,
.s-button-primary {
  background: linear-gradient(135deg, var(--g-blue), var(--g-blue-dark)) !important;
  border: none !important;
  border-radius: 12px !important;
  transition: transform .25s var(--g-ease),
              box-shadow .25s var(--g-ease),
              filter .25s var(--g-ease);
}

.s-button-element.s-button-primary:hover,
.s-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 116, 186, .30);
  filter: brightness(1.05);
}

.s-button-element.s-button-primary:active,
.s-button-primary:active {
  transform: translateY(0);
}

.s-button-primary-outline {
  background: #0099e5;
  fill: #4e9cc2;
  color: #ffffff;
  padding: 10px 0;
}


/* ─────────────────────────────────────────
   5) البنرات
───────────────────────────────────────── */
a[href*="/-/c"] img,
.banner-entry img {
  border-radius: var(--g-radius);
  transition: transform .4s var(--g-ease),
              box-shadow .4s var(--g-ease);
}

a[href*="/-/c"]:hover img,
.banner-entry:hover img {
  transform: scale(1.015);
  box-shadow: var(--g-shadow-lg);
}


/* ─────────────────────────────────────────
   6) عناوين أقسام الصفحة الرئيسية
───────────────────────────────────────── */
.s-block__title h2,
.section-title,
section > h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.s-block__title h2::after,
.section-title::after,
section > h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(270deg, transparent, var(--g-blue));
}


/* ─────────────────────────────────────────
   7) آراء العملاء
───────────────────────────────────────── */
.testimonial,
.testimonials .swiper-slide > div {
  background: #fff;
  border: 1px solid rgba(28, 43, 54, .06);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: 24px;
  transition: transform .3s var(--g-ease),
              box-shadow .3s var(--g-ease);
}

.testimonial:hover,
.testimonials .swiper-slide > div:hover {
  transform: translateY(-4px);
  box-shadow: var(--g-shadow-lg);
}

.testimonial img,
.testimonials .swiper-slide img {
  border-radius: 50%;
  border: 3px solid var(--g-blue-tint);
  box-shadow: 0 0 0 2px var(--g-blue);
}


/* ─────────────────────────────────────────
   8) سكرول بار بلون الهوية
───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f8;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--g-blue), var(--g-blue-dark));
  border-radius: 20px;
  border: 2px solid #f1f5f8;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--g-blue-dark);
}


/* ─────────────────────────────────────────
   9) الهيدر والقوائم — ألوان فقط
   (كل هاكات المسافات والأحجام محذوفة)
───────────────────────────────────────── */

.store-header {
  background: rgba(255, 255, 255, .88) !important;
}

.topnav-is-dark .top-navbar {
  background-color: #0099e5 !important;
}

.main-nav-container {
  background: #0099e5;
}

.main-menu li > a {
  background: #0099e5 !important;
  color: #fff;
}

.main-menu li > a:hover {
  color: #000000 !important;
}

.sicon-menu:before {
  content: "\ed7f";
  color: #fff;
}

/* قائمة الجوال الجانبية */
@media only screen and (max-width: 1024px) {
  .mm-spn li a,
  .mm-spn li > span {
    background: #0099e5;
  }
}


/* ─────────────────────────────────────────
   10) أيقونات الأقسام الدائرية
───────────────────────────────────────── */
.slide--cat-entry {
  border-radius: 50%;
  border-width: 1px;
  height: 11rem;
  justify-content: center;
  border-color: #f3f4f6;
  background-color: rgb(255 255 255 / 0%);
  padding: 0.75rem;
  transition-property: color, background-color, border-color,
                       text-decoration-color, fill, stroke, opacity,
                       box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ─────────────────────────────────────────
   عناوين التصنيفات فوق المنتجات — شارة
   بلون الهوية بتدرج متحرك + لمعة عابرة
───────────────────────────────────────── */
.s-slider-block__title h2 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 10px 28px;
  border-radius: 999px;
  color: #ffffff !important;
  background: linear-gradient(120deg,
              #0074ba, #0099e5, #00c6ff, #0099e5, #0074ba);
  background-size: 300% 100%;
  box-shadow: 0 8px 20px rgba(0, 153, 229, .28);
  animation: gawdah-title-flow 7s ease infinite;
}

/* حركة التدرج */
@keyframes gawdah-title-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* اللمعة العابرة (من اليمين لليسار مع اتجاه القراءة) */
.s-slider-block__title h2::after {
  content: "";
  position: absolute;
  top: 0;
  right: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg,
              transparent,
              rgba(255, 255, 255, .5),
              transparent);
  transform: skewX(-20deg) translateX(0);
  animation: gawdah-title-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gawdah-title-shine {
  0%, 55% { transform: skewX(-20deg) translateX(0); }
  100%    { transform: skewX(-20deg) translateX(-340%); }
}

/* حجم أنسب للجوال */
@media (max-width: 768px) {
  .s-slider-block__title h2 {
    padding: 8px 20px;
    font-size: 17px;
  }
}
/* ─────────────────────────────────────────
   11) ضبط السلايدر
───────────────────────────────────────── */
salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *),
salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *),
.carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
  padding-left: 14rem;
}

@media (max-width: 360px) {
  salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *),
  salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *),
  .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 11rem;
  }
}

.s-blocks-wrapper:empty + .container--product-details,
.s-blocks-wrapper:empty + .container--products-list {
  margin-top: 0 !important;
  background: #f1efef;
}


/* ─────────────────────────────────────────
   12) الفوتر
───────────────────────────────────────── */
.store-footer,
footer.store-footer {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  border-radius: 28px 28px 0 0;
  background: #0099e5 !important;
  color: #ffffff;
}

.store-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00c6ff, #0099e5, transparent);
}

.store-footer__inner {
  background-color: #0099e5;
}

.store-footer h2,
.store-footer h3,
.store-footer h4 {
  color: #ffffff !important;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.store-footer h2::after,
.store-footer h3::after,
.store-footer h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(270deg, transparent, #ffffff);
}

.store-footer p {
  line-height: 1.9;
}

.store-footer p,
.store-footer a,
.store-footer li a {
  color: #ffffff !important;
}

.store-footer a:hover {
  color: #d6f1ff !important;
}

/* شعارات الدفع — لو ما بانت واضحة بدّل #0099e5 إلى #fff */
.store-footer [class*="payment"] img,
.store-footer [class*="Payment"] img {
  background: #0099e5;
  border-radius: 8px;
  padding: 4px 6px;
}

.store-footer input {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}

.store-footer input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.store-footer input:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  outline: none;
}

.store-footer [class*="social"] a {
  border-color: rgb(255 255 255);
  background: #0099e5;
}

.store-footer .copyright,
.store-footer [class*="copyright"] {
  background: #0099e5;
  border-top: 1px solid rgba(255, 255, 255, .20);
  color: rgba(255, 255, 255, .85) !important;
  text-align: center;
  padding: 14px 0;
  margin-top: 24px;
}

.store-footer [class*="copyright"] a {
  color: #d6f1ff !important;
}

/* الفوتر في الجوال */
@media (max-width: 768px) {
  .store-footer {
    border-radius: 20px 20px 0 0;
    text-align: center;
  }

  .store-footer h2::after,
  .store-footer h3::after,
  .store-footer h4::after {
    right: 50%;
    transform: translateX(50%);
  }

  .store-footer .container > div,
  .store-footer [class*="grid"] > div {
    margin-bottom: 20px;
  }

  .s-contacts-list {
    align-items: center;
  }

  .store-footer a {
    justify-content: center;
  }

  .s-social-list {
    align-items: center;
    justify-content: center !important;
  }
}


/* ─────────────────────────────────────────
   13) تحسينات عامة للجوال
───────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --g-radius: 12px;
  }

  .s-product-card-entry:hover {
    transform: none;
  }
}


/* ─────────────────────────────────────────
   14) احترام تفضيل تقليل الحركة
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/*تحسين شعار الفوتر*/
.custom-footer-logo {
    display: block;
    width: 150px;
    height: auto;
    object-fit: contain;
    margin: 0 0 18px auto;
    filter: none !important;
}

@media (max-width: 767px) {
    .custom-footer-logo {
        width: 125px;
        margin: 0 auto 18px;
    }
}