/**
 * طبقة التحسينات البصرية — "نيون هادي"
 *
 * الفلسفة: الوهج له معنى فقط لو نادر. الحواف بتولّع عند التفاعل بس، مش طول
 * الوقت، والعناصر بتظهر بهدوء مع النزول بدل ما تنطّ. كل الألوان من التوكنز
 * فتتبع براند أي متجر.
 *
 * كل شيء هنا يحترم prefers-reduced-motion.
 */

/* ---------------------------------------------------------------------
   1) الظهور التدريجي مع النزول — CSS خالص
   مبني على scroll-driven animations، وكله داخل @supports.
   ليه كده؟ لأن أي طريقة بتخفي المحتوى أولًا وتعتمد على جافاسكريبت في
   إظهاره معناها إن أي خلل = محتوى مش ظاهر للعميل. هنا لو المتصفح
   ما بيدعمش الخاصية، القاعدة كلها مش بتتقري أصلًا والمحتوى ظاهر طبيعي.
--------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #fp .fp-sec,
    #fp .fp-card,
    #fp .fp-review,
    .hkm-section,
    .store-reviews-section,
    .review-card,
    .woocommerce ul.products li.product,
    .product-related__card,
    .hkm-catsection,
    .product-longdesc,
    .product-reviews-block {
      animation: hkmRise linear both;
      animation-timeline: view();
      /* يبدأ وهو داخل من تحت ويخلص وهو لسه في أول ثلث الشاشة */
      animation-range: entry 0% entry 42%;
    }
  }
}

@keyframes hkmRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   2) حافة نيون بتتبع الماوس
   بدل وهج ثابت حوالين الكارت، الضوء بيتحرك مع مكان المؤشر — الإحساس
   إن الكارت بيرد على الحركة، وده أرقى من glow دايم.
--------------------------------------------------------------------- */
.hkm-glow {
  position: relative;
  isolation: isolate;
}
.hkm-glow::after {
  position: absolute;
  inset: -1px;
  z-index: -1;
  content: '';
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--hkm-primary) 45%, transparent),
    transparent 70%
  );
  transition: opacity .35s ease;
}
.hkm-glow:hover::after,
.hkm-glow:focus-within::after { opacity: 1; }

/* ---------------------------------------------------------------------
   3) كروت المنتجات — رفعة خفيفة وحدّ بيولّع، والصورة بتقرب بهدوء
--------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.product-related__card {
  transition: transform .35s cubic-bezier(.22,.8,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.woocommerce ul.products li.product:hover,
.product-related__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--hkm-primary) 55%, var(--hkm-border));
  box-shadow: 0 18px 42px -18px color-mix(in srgb, var(--hkm-primary) 55%, transparent),
              0 0 0 1px color-mix(in srgb, var(--hkm-primary) 22%, transparent);
}
.woocommerce ul.products li.product a img,
.product-related__media img {
  transition: transform .5s cubic-bezier(.22,.8,.3,1);
}
.woocommerce ul.products li.product:hover a img,
.product-related__card:hover .product-related__media img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   4) الأزرار — لمعة بتعدّي مرة واحدة عند المرور
--------------------------------------------------------------------- */
.hkm-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
#fp .fp-btn--primary {
  position: relative;
  overflow: hidden;
}
.hkm-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.single_add_to_cart_button::after,
#fp .fp-btn--primary::after {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -140%;
  width: 55%;
  content: '';
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
}
.hkm-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.single_add_to_cart_button:hover::after,
#fp .fp-btn--primary:hover::after {
  animation: hkmSheen .75s ease;
}
@keyframes hkmSheen { to { inset-inline-start: 140%; } }

/* ---------------------------------------------------------------------
   5) التقييمات — الجزء اللي طلبته بالتحديد
--------------------------------------------------------------------- */

/* 5-أ) كروت تقييمات الصفحة الرئيسية */
#fp .fp-review {
  transition: transform .4s cubic-bezier(.22,.8,.3,1), border-color .4s ease, box-shadow .4s ease;
}
#fp .fp-review:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--primary2) 45%, transparent);
  box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--primary2) 55%, transparent);
}
/* النجوم بتلمع واحدة ورا التانية، دورة هادية كل ٦ ثواني */
#fp .fp-review__stars,
.review-card__stars {
  position: relative;
  background: linear-gradient(90deg,
    var(--hkm-warning, #ffb23f) 0%,
    #fff6d8 18%,
    var(--hkm-warning, #ffb23f) 36%,
    var(--hkm-warning, #ffb23f) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hkmStarSweep 6s ease-in-out infinite;
}
@keyframes hkmStarSweep {
  0%, 70%, 100% { background-position: 100% 50%; }
  85%           { background-position: 0% 50%; }
}

/* 5-ب) كروت تقييمات المتجر (الرئيسية + صفحة المنتج) */
.review-card {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,.8,.3,1), border-color .4s ease, box-shadow .4s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--hkm-primary) 50%, var(--hkm-border));
  box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--hkm-primary) 50%, transparent);
}
/* خط نيون رفيع بيتمدّ على حافة الكارت العلوية عند المرور */
.review-card::before {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  content: '';
  transform: scaleX(0);
  transform-origin: var(--hkm-edge-origin, right);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--hkm-primary) 90%, transparent),
    color-mix(in srgb, var(--hkm-primary-light, var(--hkm-primary)) 90%, transparent),
    transparent);
  transition: transform .45s cubic-bezier(.22,.8,.3,1);
}
.review-card:hover::before { transform: scaleX(1); }

/* حلقة نيون حوالين صورة صاحب التقييم */
.review-card__avatar {
  position: relative;
  transition: box-shadow .4s ease;
}
.review-card:hover .review-card__avatar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hkm-primary) 60%, transparent),
              0 0 18px -2px color-mix(in srgb, var(--hkm-primary) 70%, transparent);
}

/* 5-ج) بلوك مراجعات ووكومرس في صفحة المنتج */
.single-product .product-reviews-block__body ol.commentlist .comment_container {
  transition: transform .35s cubic-bezier(.22,.8,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.single-product .product-reviews-block__body ol.commentlist .comment_container:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hkm-primary) 45%, var(--hkm-border));
  box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--hkm-primary) 50%, transparent);
}
.single-product .product-reviews-block__body .star-rating span::before,
.single-product .product-reviews-block__body .stars a { color: var(--hkm-warning, #ffb23f); }

/* ---------------------------------------------------------------------
   6) عناوين الأقسام — الخط تحت العنوان بيتمدّ مع النزول
--------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #fp .fp-head .fp-u,
    .hkm-section__head h2::after {
      animation: hkmUnderline linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
  }
}
@keyframes hkmUnderline {
  from { transform: scaleX(.2); opacity: .4; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------------------------------------------------------------------
   7) الفوكس — حلقة نيون واضحة للكيبورد (وصولية + شكل أنضف)
--------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hkm-primary) 85%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   8) أيقونات الهيدر + السلة
--------------------------------------------------------------------- */
.maher-header-icon,
.maher-fixed-cart,
.maher-header-menu { transition: color .25s ease, filter .25s ease, transform .25s ease; }
.maher-header-icon:hover,
.maher-fixed-cart:hover,
.maher-header-menu:hover {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hkm-primary) 65%, transparent));
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   9) الأسئلة الشائعة — رقم السؤال بيولّع لما يتفتح
--------------------------------------------------------------------- */
#fp .hkm-acc__item { transition: border-color .35s ease, box-shadow .35s ease; }
#fp .hkm-acc__item.is-open {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary2) 30%, transparent),
              0 18px 40px -22px color-mix(in srgb, var(--primary2) 60%, transparent);
}
#fp .hkm-acc__num { transition: color .3s ease, text-shadow .3s ease; }
#fp .hkm-acc__item.is-open .hkm-acc__num {
  color: var(--primary2);
  text-shadow: 0 0 14px color-mix(in srgb, var(--primary2) 70%, transparent);
}

/* ---------------------------------------------------------------------
   احترام تقليل الحركة: كل شيء يوقف، ولا شيء يفضل مخفي
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #fp .fp-review__stars, .review-card__stars { animation: none; }
  .hkm-btn::after, .woocommerce a.button::after, .woocommerce button.button::after,
  .single_add_to_cart_button::after, #fp .fp-btn--primary::after { display: none; }
  .woocommerce ul.products li.product,
  .product-related__card,
  .review-card,
  #fp .fp-review { transition: none; }
  .woocommerce ul.products li.product:hover,
  .product-related__card:hover,
  .review-card:hover,
  #fp .fp-review:hover { transform: none; }
}

/* =====================================================================
   نيون خفي دائم + توحيد شكل التقييمات
   ===================================================================== */

/* ---------------------------------------------------------------------
   10) الهيدر — خيط نيون رفيع على الحافة السفلية + هالة خافتة تحته.
   دايم بس خافت جدًا: بيدي إحساس إن الهيدر طايف فوق الصفحة من غير ما
   ياخد انتباه من المحتوى.
--------------------------------------------------------------------- */
.maher-fixed-header {
  position: sticky;
}
.maher-fixed-header::before {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  z-index: 2;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--hkm-primary) 55%, transparent) 22%,
    color-mix(in srgb, var(--hkm-primary-light, var(--hkm-primary)) 75%, transparent) 50%,
    color-mix(in srgb, var(--hkm-primary) 55%, transparent) 78%,
    transparent);
  opacity: .55;
}
/* الهالة الخافتة تحت الخط — بتزيد شوية لما الصفحة تنزل */
.maher-fixed-header::after {
  display: block !important;
  position: absolute;
  inset-inline: 0;
  bottom: -18px;
  height: 18px;
  content: '';
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hkm-primary) 16%, transparent),
    transparent);
  opacity: .5;
  transition: opacity .4s ease;
}
.maher-fixed-header.is-sticky::after { opacity: 1; }

/* ---------------------------------------------------------------------
   11) الفوتر — نفس الخيط على الحافة العلوية + توهج خفيف من تحت الصفحة
--------------------------------------------------------------------- */
.maher-footer-shell,
.hkm-footer {
  position: relative;
}
.maher-footer-shell::before,
.hkm-footer::before {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--hkm-primary) 50%, transparent) 25%,
    color-mix(in srgb, var(--hkm-primary-light, var(--hkm-primary)) 70%, transparent) 50%,
    color-mix(in srgb, var(--hkm-primary) 50%, transparent) 75%,
    transparent);
  opacity: .5;
}
/* ضوء واسع جدًا وخافت جاي من أسفل الصفحة — بيدي عمق من غير ما يبان كتأثير */
.hkm-footer::after {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  z-index: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 100%,
    color-mix(in srgb, var(--hkm-primary) 12%, transparent),
    transparent 70%);
}
.hkm-footer > * { position: relative; z-index: 1; }

/* أيقونات السوشيال في الفوتر */
.hkm-footer .maher-social a,
.hkm-footer .hkm-social a {
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.hkm-footer .maher-social a:hover,
.hkm-footer .hkm-social a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hkm-primary) 60%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--hkm-primary) 70%, transparent);
}

/* ---------------------------------------------------------------------
   12) نيون خفي دائم على كروت التقييمات (مش عند المرور بس)
--------------------------------------------------------------------- */
#fp .fp-review,
.review-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hkm-primary) 10%, transparent),
              0 14px 34px -22px color-mix(in srgb, var(--hkm-primary) 45%, transparent);
}
#fp .fp-review:hover,
.review-card:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hkm-primary) 30%, transparent),
              0 22px 48px -20px color-mix(in srgb, var(--hkm-primary) 60%, transparent);
}

/* ---------------------------------------------------------------------
   13) توحيد شكل التقييمات: كروت صفحة المنتج تاخد نفس لغة الرئيسية
   نفس التدرّج، نفس علامة التنصيص الكبيرة، نفس المثلث في الركن،
   ونفس فاصل السطر فوق اسم صاحب التقييم.
--------------------------------------------------------------------- */
.review-card {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 20px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--hkm-border) 85%, var(--hkm-primary));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hkm-surface) 92%, var(--hkm-primary)),
    var(--hkm-surface-2));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* علامة التنصيص الكبيرة */
.review-card::after {
  position: absolute;
  top: 2px;
  inset-inline-end: 20px;
  content: '\201D';
  font: 700 54px/1 Georgia, "Times New Roman", serif;
  color: var(--hkm-primary-light, var(--hkm-primary));
  opacity: .22;
  pointer-events: none;
}
/* المثلث في الركن — نفس اللي في الرئيسية */
.review-card > p {
  position: relative;
  margin: 0;
  color: var(--hkm-text);
  font-size: 14.5px;
  line-height: 1.9;
}
/* بيانات صاحب التقييم تنزل تحت النص وياخد فاصل فوقه */
.review-card__top {
  order: 2;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hkm-border);
  gap: 11px;
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  color: var(--hkm-on-primary, #fff);
  font-weight: 800;
  font-size: 15px;
  background: linear-gradient(180deg,
    var(--hkm-primary-light, var(--hkm-primary)),
    var(--hkm-primary-dark, var(--hkm-primary)));
}
.review-card__top strong { font-size: 14.5px; }
.review-card__stars { font-size: 15px; letter-spacing: 3px; }

@media (max-width: 700px) {
  .review-card { padding: 22px 18px 18px; }
  .review-card::after { font-size: 44px; }
}

/* ---------------------------------------------------------------------
   14) تجاوز طبقة liquid-glass
   الملف ده بيفرض box-shadow و border-radius بـ!important على كروت
   التقييمات وكروت المنتجات، فبيمسح النيون الخفي. القواعد دي بتاخد نفس
   السلاح عشان النيون يفضل ظاهر مع الحفاظ على لمعة الزجاج الداخلية.
--------------------------------------------------------------------- */
.maher-liquid-glass .review-card,
.maher-liquid-glass #fp .fp-review {
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .10),
    0 0 0 1px color-mix(in srgb, var(--hkm-primary) 12%, transparent),
    0 14px 34px -22px color-mix(in srgb, var(--hkm-primary) 50%, transparent) !important;
}
.maher-liquid-glass .review-card:hover,
.maher-liquid-glass #fp .fp-review:hover {
  border-color: color-mix(in srgb, var(--hkm-primary) 55%, var(--hkm-border)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .14),
    0 0 0 1px color-mix(in srgb, var(--hkm-primary) 32%, transparent),
    0 22px 48px -20px color-mix(in srgb, var(--hkm-primary) 65%, transparent) !important;
}

/* نفس المعالجة لكروت المنتجات عشان الحد بتاعها يولّع فعلًا عند المرور */
.maher-liquid-glass .woocommerce ul.products li.product:hover,
.maher-liquid-glass .product-related__card:hover {
  border-color: color-mix(in srgb, var(--hkm-primary) 55%, var(--hkm-border)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    0 0 0 1px color-mix(in srgb, var(--hkm-primary) 26%, transparent),
    0 20px 44px -20px color-mix(in srgb, var(--hkm-primary) 60%, transparent) !important;
}