/* =================================================
   ALINT UX STYLE - FINAL MERGED
   Footer Pink + WhatsApp + Banner Shine + Icon Hover
   Trust Badges Under Price
   الهيدر بدون تغيير
================================================= */

:root {
  --alint-pink: #E7AFC2;
  --alint-pink-dark: #D98BAA;
  --alint-pink-soft: #F9E4EC;
  --alint-text: #1D1F1F;
  --alint-white: #ffffff;
}

/* =========================
   لا نعدل الهيدر
========================= */

header,
.store-header,
.main-header {
  /* الهيدر يبقى كما هو */
}

/* =========================
   Footer Pink
========================= */

footer,
.store-footer,
.store-footer__inner,
.store-footer .container,
.footer,
.footer__inner,
.s-footer,
.s-footer__inner {
  background: var(--alint-pink) !important;
  background-color: var(--alint-pink) !important;
  background-image: none !important;
}

.store-footer__bottom,
.footer__bottom,
.copyright,
.footer-copyright,
footer [class*="bottom"] {
  background: #DFA6BA !important;
  background-color: #DFA6BA !important;
}

footer,
footer p,
footer span,
footer a,
footer li,
footer h1,
footer h2,
footer h3,
footer h4,
.store-footer,
.store-footer p,
.store-footer span,
.store-footer a,
.store-footer li,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
  color: var(--alint-text) !important;
}

footer svg,
footer i,
.store-footer svg,
.store-footer i {
  color: var(--alint-text) !important;
  fill: var(--alint-text) !important;
}

/* =========================
   Background عام ناعم
   باتيرن أيقونات عناية ومكياج + لمعة وردية متحركة
========================= */

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgMzIwIDMyMCI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDIzMSwxNzUsMTk0LDAuNTUpIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KCiAgICA8IS0tINmE2YrYqNiz2KrZgyAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0LDI4KSByb3RhdGUoLTE4KSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgcng9IjMiLz4KICAgICAgPHBhdGggZD0iTTIgMTYgTDE4IDE2IEwxNCA0MiBRMTAgNDggNiA0MiBaIi8+CiAgICA8L2c+CgogICAgPCEtLSDZgtmE2KggLS0+CiAgICA8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjIsMzApIiBkPSJNMTQgOQogICAgICAgICBDMTQgMiA1IC0zIDAgNAogICAgICAgICBDLTUgLTMgLTE0IDIgLTE0IDkKICAgICAgICAgQy0xNCAxOCAwIDI4IDAgMjgKICAgICAgICAgQzAgMjggMTQgMTggMTQgOSBaIi8+CgogICAgPCEtLSDYstis2KfYrNipINi52LfYsSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwOCwxNDgpIj4KICAgICAgPHJlY3QgeD0iNiIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHJ4PSIyIi8+CiAgICAgIDxyZWN0IHg9IjIiIHk9IjYiIHdpZHRoPSIxOCIgaGVpZ2h0PSI2IiByeD0iMiIvPgogICAgICA8cGF0aCBkPSJNMCAxMiBoMjIgdjIyIHEwIDkgLTExIDkgcS0xMSAwIC0xMSAtOSBaIi8+CiAgICA8L2c+CgogICAgPCEtLSDYqNix2YrZgiAtLT4KICAgIDxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1MCwxOTYpIiBkPSJNMTAgMCBMMTMgOCBMMjEgMTEgTDEzIDE0IEwxMCAyMiBMNyAxNCBMLTEgMTEgTDcgOCBaIiBmaWxsPSJyZ2JhKDIzMSwxNzUsMTk0LDAuNSkiIHN0cm9rZT0ibm9uZSIvPgoKICAgIDwhLS0g2YXZhtin2YPZitixIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgsMjI2KSI+CiAgICAgIDxyZWN0IHg9IjYiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjYiIHJ4PSIxLjUiLz4KICAgICAgPHBhdGggZD0iTTAgNiBoMjAgdjIwIHEwIDEwIC0xMCAxMCBxLTEwIDAgLTEwIC0xMCBaIi8+CiAgICA8L2c+CgogICAgPCEtLSDZgdix2LTYp9ipINmF2YPZitin2KwgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjAsMjUwKSByb3RhdGUoMjUpIj4KICAgICAgPGVsbGlwc2UgY3g9IjgiIGN5PSI2IiByeD0iOSIgcnk9IjYiLz4KICAgICAgPHJlY3QgeD0iNSIgeT0iMTEiIHdpZHRoPSI2IiBoZWlnaHQ9IjIyIiByeD0iMi41Ii8+CiAgICA8L2c+CgogICAgPCEtLSDZhtmC2KfYtyDYqNix2YrZgiDYtdi62YrYsdipIC0tPgogICAgPGNpcmNsZSBjeD0iMTcwIiBjeT0iNTUiIHI9IjIuNCIgZmlsbD0icmdiYSgyMzEsMTc1LDE5NCwwLjUpIiBzdHJva2U9Im5vbmUiLz4KICAgIDxjaXJjbGUgY3g9IjI4OCIgY3k9Ijg2IiByPSIxLjgiIGZpbGw9InJnYmEoMjMxLDE3NSwxOTQsMC41KSIgc3Ryb2tlPSJub25lIi8+CiAgICA8Y2lyY2xlIGN4PSIxOCIgY3k9IjE4OCIgcj0iMiIgZmlsbD0icmdiYSgyMzEsMTc1LDE5NCwwLjUpIiBzdHJva2U9Im5vbmUiLz4KICAgIDxjaXJjbGUgY3g9IjE2MCIgY3k9IjI4MCIgcj0iMi4yIiBmaWxsPSJyZ2JhKDIzMSwxNzUsMTk0LDAuNSkiIHN0cm9rZT0ibm9uZSIvPgogICAgPGNpcmNsZSBjeD0iMjk2IiBjeT0iMjgwIiByPSIxLjYiIGZpbGw9InJnYmEoMjMxLDE3NSwxOTQsMC41KSIgc3Ryb2tlPSJub25lIi8+CiAgPC9nPgo8L3N2Zz4K"),
    linear-gradient(180deg, #ffffff 0%, #fff8fb 45%, #ffffff 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-size: 300px 300px, 100% 100% !important;
  background-attachment: fixed, fixed !important;
  background-position: 0 0, 0 0 !important;
}

/* لمعة وردية ناعمة متحركة بالخلفية، خلف كل المحتوى ولا تمنع الضغط/التمرير */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(circle, rgba(231,175,194,.4), transparent 55%);
  background-size: 55% 55%, 60% 60%;
  background-repeat: no-repeat, no-repeat;
  background-position: 10% 15%, 85% 80%;
  animation: alintBgShine 16s ease-in-out infinite alternate;
}

@keyframes alintBgShine {
  0%   { background-position: 10% 15%, 85% 80%; }
  50%  { background-position: 32% 38%, 62% 58%; }
  100% { background-position: 10% 15%, 85% 80%; }
}

/* على الموبايل: نوقف التثبيت والأنيميشن لأداء أنعم وتوافق أفضل مع iOS Safari */
@media (max-width: 768px) {
  body {
    background-attachment: scroll, scroll !important;
    background-size: 200px 200px, 100% 100% !important;
  }

  body::before {
    animation: none;
  }
}

/* =========================
   Product Cards
   بدون تخريب أسماء المنتجات
========================= */

.s-product-card-entry,
.product-entry,
.product-item {
  transition: transform .28s ease, box-shadow .28s ease !important;
}

.s-product-card-entry:hover,
.product-entry:hover,
.product-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(217, 139, 170, 0.16) !important;
}

/* إعادة تثبيت أسماء المنتجات بمكانها الطبيعي */
.s-product-card-content-title,
.s-product-card-content-title a,
.product-title,
.product-title a {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.55 !important;
}

/* لا نخلي أي لمعة أو تأثير يدخل على اسم المنتج */
.s-product-card-content,
.product-content {
  position: relative !important;
  z-index: 2 !important;
  background: inherit;
}

/* =========================
   Trust Badges Under Price
========================= */

.alint-trust-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 12px;
  direction: rtl;
  position: relative;
  z-index: 3;
}

.alint-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff6fa;
  color: #2b2b2b;
  border: 1px solid #ffd6e7;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(217, 139, 170, 0.10);
}

.alint-trust-badge span {
  color: #e84f8a;
  font-size: 13px;
  font-weight: 900;
}

/* تصغير الشريط داخل كروت المنتجات */
.s-product-card-entry .alint-trust-badges,
.product-entry .alint-trust-badges,
.product-card .alint-trust-badges,
.product-item .alint-trust-badges {
  gap: 5px;
  margin: 8px 0 9px;
}

.s-product-card-entry .alint-trust-badge,
.product-entry .alint-trust-badge,
.product-card .alint-trust-badge,
.product-item .alint-trust-badge {
  font-size: 10px;
  padding: 5px 7px;
}

/* =========================
   Buttons Hover
   بدون التأثير على الهيدر
========================= */

main .s-button-element,
main button[type="submit"],
main .product-form button,
main button {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}

main .s-button-element:hover,
main button[type="submit"]:hover,
main .product-form button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(217, 139, 170, 0.28) !important;
  filter: brightness(.98);
}

/* =========================
   Icons Style Before/After Hover
========================= */

.alint-icon-fx,
.s-product-card-wishlist-btn,
.s-product-card-entry button[aria-label*="wishlist"],
.s-product-card-entry button[aria-label*="المفضلة"],
.s-product-card-entry button[aria-label*="favorite"],
button[class*="wishlist"],
button[class*="favorite"],
a[class*="wishlist"],
a[class*="favorite"] {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
  border: 1px solid rgba(217, 139, 170, 0.26) !important;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease !important;
}

.alint-icon-fx:hover,
.s-product-card-wishlist-btn:hover,
.s-product-card-entry button[aria-label*="wishlist"]:hover,
.s-product-card-entry button[aria-label*="المفضلة"]:hover,
.s-product-card-entry button[aria-label*="favorite"]:hover,
button[class*="wishlist"]:hover,
button[class*="favorite"]:hover,
a[class*="wishlist"]:hover,
a[class*="favorite"]:hover {
  transform: translateY(-4px) scale(1.06) !important;
  background: var(--alint-pink) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(217, 139, 170, 0.36) !important;
  border-color: var(--alint-pink-dark) !important;
}

.alint-icon-fx:hover svg,
.alint-icon-fx:hover i,
.s-product-card-wishlist-btn:hover svg,
.s-product-card-wishlist-btn:hover i,
button[class*="wishlist"]:hover svg,
button[class*="favorite"]:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* لا نعدل شكل الخصم */
.s-product-card-promotion-title,
[class*="discount"],
[class*="promotion"],
[class*="badge"] {
  /* بدون تغيير شكل الخصومات */
}

/* =========================
   Banner Shine Effect
   فقط على البنرات
========================= */

.alint-banner-fx {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  isolation: isolate;
  box-shadow: 0 14px 36px rgba(217, 139, 170, 0.16) !important;
}

.alint-banner-fx img {
  display: block !important;
  width: 100% !important;
  transition: transform .75s ease, filter .75s ease !important;
}

.alint-banner-fx:hover img {
  transform: scale(1.035);
  filter: brightness(1.04) saturate(1.07);
}

.alint-banner-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.04) 34%,
    rgba(255,255,255,0.60) 50%,
    rgba(255,255,255,0.04) 66%,
    transparent 100%
  );
  transform: translateX(-135%);
}

.alint-banner-fx:hover::before {
  animation: alintBannerShine .9s ease forwards;
}

.alint-banner-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.24),
    transparent 34%
  );
}

.alint-banner-fx:hover::after {
  opacity: 1;
}

@keyframes alintBannerShine {
  0% {
    transform: translateX(-135%);
  }
  100% {
    transform: translateX(135%);
  }
}

/* =========================
   Reveal Animation
========================= */

.alint-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease !important;
}

.alint-reveal.alint-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Button Ripple
========================= */

@keyframes alintRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.alint-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.55);
  pointer-events: none;
  animation: alintRipple .65s linear;
  z-index: 2;
}

/* =========================
   Floating WhatsApp
========================= */

.alint-whatsapp-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  animation: alintWhatsPulse 1.9s infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}

.alint-whatsapp-float:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}

.alint-whatsapp-float svg {
  width: 34px;
  height: 34px;
  fill: #fff;
}

.alint-whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.45);
  animation: alintWhatsRing 1.9s infinite;
}

.alint-whatsapp-float::after {
  content: "تواصلي معنا";
  position: absolute;
  left: 76px;
  bottom: 14px;
  background: #fff;
  color: var(--alint-text);
  border: 1px solid var(--alint-pink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: all .25s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}

.alint-whatsapp-float:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes alintWhatsPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes alintWhatsRing {
  0% {
    transform: scale(.85);
    opacity: .8;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* =========================
   Mobile
========================= */

@media (max-width: 768px) {
  .alint-banner-fx {
    border-radius: 16px !important;
  }

  .alint-whatsapp-float {
    width: 56px;
    height: 56px;
    left: 16px;
    bottom: 18px;
  }

  .alint-whatsapp-float svg {
    width: 30px;
    height: 30px;
  }

  .alint-whatsapp-float::after {
    display: none;
  }

  .s-product-card-entry:hover,
  .product-entry:hover,
  .product-item:hover {
    transform: none !important;
  }

  .alint-trust-badges {
    gap: 6px;
  }

  .alint-trust-badge {
    font-size: 11px;
    padding: 6px 8px;
  }
}