/* الموقع بالكامل – نمط فاخر لمتجر مجوهرات مع خط Cairo */

/* ========== متغيرات عامة ========== */
:root {
  /* الألوان الأساسية */
  --brand-1: #8d7143;  /* بني-ذهبي (هوية) */
  --brand-2: #b8860b;  /* DarkGoldenRod */
  --brand-3: #daa520;  /* GoldenRod */
  --text-900: #222;
  --text-700: #444;
  --text-600: #555;
  --muted-500: rgba(0,0,0,.6);
  --surface: #ffffff;
  --surface-2: #fafafa;
  --bg: #f9f9f9;

  /* الظلال */
  --shadow-1: 0 6px 16px rgba(0,0,0,.12);
  --shadow-2: 0 12px 30px rgba(0,0,0,.16);
  --shadow-gold: 0 10px 28px rgba(212,175,55,.20);

  /* الحواف والتباعد */
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* الحركة والطباعة */
  --t-fast: 160ms cubic-bezier(.2,.7,.2,1);
  --t-base: 260ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 520ms cubic-bezier(.2,.7,.2,1);
  --font-base: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;

  /* أحجام مرنة */
  --fs-sm: clamp(.9rem, .86rem + .2vw, 1rem);
  --fs-base: clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-lg: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 1vw, 1.9rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);

  /* مسافة الأيقونة من الحواف */
  --wa-offset: 16px;
}

/* تقليل الحركة حسب التفضيلات */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ========== أساسيات عامة ========== */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  color: var(--text-900);
  background-color: var(--bg);
}

/* ========== السلايدر (Slider) ========== */
.s-slider-container {
  position: relative;
  overflow: hidden;
}

/* بطاقة السلايدر بتأثير فاخر */
.homeslider__slide {
  position: relative;
  display: inline-block;
  border-radius: var(--r-lg);
  transition: transform var(--t-base), filter var(--t-base);
  box-shadow: 0 0 14px rgba(120, 98, 54, 0.20);
  will-change: transform, filter;
}

.homeslider__slide img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  display: block;
  transition: opacity .3s ease-in-out;
}

.gallery-cursor {
  position: absolute;
  width: 50px;
  height: 50px;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

@media (hover: hover) {
  .homeslider__slide:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 10px 26px rgba(212,175,55,.18));
  }
  .homeslider__slide:hover .gallery-cursor {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .homeslider__slide { border-radius: 14px; }
}

/* ========== أيقونة السلة ========== */
#s-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
  cursor: pointer;
}

#s-cart-icon .sicon-cart {
  font-size: 16px;
  color: var(--brand-1);
  animation: cartShake 1.5s infinite ease-in-out;
}

@keyframes cartShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* إبراز مجموع السلة */
.text-store-text-primary[data-cart-total] {
  color: #ff0000;
  font-weight: bold;
}

/* ========== شبكة الروابط المربعة ========== */
.square-links-1 img {
  width: 100%;
  height: auto;
  max-width: 426px;
  max-height: 571px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform .4s ease-in-out;
}

.square-links-1 ul {
  display: grid; /* إصلاح: كان ينقصها */
}

@media (max-width: 768px) {
  .square-links-1 ul {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .square-links-1 li { margin-bottom: 20px; }
  .square-links-1 img { max-width: 100%; height: auto; }
  .square-links-1 h3 { font-size: 14px; margin-top: 8px; }
  .square-links-1 p { font-size: 12px; }
}

.square-links-1 .group:active img { animation: scaleDown .2s ease-in-out; }

@keyframes scaleDown {
  0% { transform: scale(1); }
  50% { transform: scale(.95); }
  100% { transform: scale(1); }
}

@media (hover: hover) {
  .square-links-1 .group:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
  }
}

/* ========== زر/نص تسجيل الدخول ========== */
.header-btn::after {
  content: 'تسجيل دخول';
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(90deg, var(--brand-1), #705d32);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* ========== بطاقات المنتج – نسق فاخر ========== */
.product-card {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 10px auto;
  padding: var(--sp-6);
  border: none;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base), filter var(--t-base), box-shadow var(--t-base);
  will-change: transform, filter;
}

/* إطار ذهبي ناعم عبر قناع */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212,175,55,.85), rgba(138,106,49,.35) 45%, rgba(218,165,32,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.product-card__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
  transition: transform var(--t-slow);
  will-change: transform;
}

.product-card__content { text-align: center; margin-top: 10px; }

.product-card__title a {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-900);
  text-decoration: none;
}

.product-card__price,
.product-card__discount {
  font-size: var(--fs-sm);
  color: #d9534f;
  margin-top: 6px;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 28px rgba(212,175,55,.18));
    box-shadow: var(--shadow-2);
  }
  .product-card:hover .product-card__image img { transform: scale(1.035); }
}

@media (max-width: 480px) {
  .product-card { padding: var(--sp-4); width: 95%; box-shadow: none; }
  .product-card__title { font-size: 1.2rem; }
  .product-card__price { font-size: 1rem; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .product-card { padding: 12px; width: 90%; max-width: 350px; }
  .product-card__title { font-size: 1.4rem; }
  .product-card__price { font-size: 1.2rem; }
}

/* ========== زر واتساب بشكل فاخر ومندمج (ثابت في كل الصفحات) ========== */
#wa-selia {
  position: fixed; /* تثبيت */
  bottom: max(var(--wa-offset), env(safe-area-inset-bottom));
  right: max(var(--wa-offset), env(safe-area-inset-right));
  z-index: 1000;
  box-shadow: var(--shadow-1);
  background: linear-gradient(45deg, var(--brand-1), var(--brand-3));
  border-radius: 50%;
  padding: 10px;
  transition: transform var(--t-base), filter var(--t-base), box-shadow var(--t-base);
  will-change: transform, filter;
}

#wa-selia::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(circle at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 1px));
  pointer-events: none;
}

#wa-selia .sicon-whatsapp2 {
  animation: whatsappPulse 2.4s ease-in-out infinite;
  color: #111;
  background: linear-gradient(45deg, var(--brand-1), var(--brand-3));
  padding: 6px;
  border-radius: 50%;
  font-size: 2rem;
}

@keyframes whatsappPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(212,175,55,.18)); }
}

@media (hover: hover) {
  #wa-selia:hover {
    transform: scale(1.06);
    filter: brightness(1.02) saturate(1.02);
    box-shadow: var(--shadow-2), var(--shadow-gold);
  }
}

/* تقليل الإزاحة قليلاً على الشاشات الصغيرة */
@media (max-width: 480px) {
  :root { --wa-offset: 12px; }
}

/* ========== تأثير نص متدرّج ناعم للعناوين ========== */
.heading-gradient,
.text-3xl.font-bold.tracking-tight.text-store-text-primary.sm\:text-4xl {
  background: linear-gradient(90deg, #111, color-mix(in srgb, var(--brand-2) 85%, #fff 15%), #fff, color-mix(in srgb, var(--brand-3) 80%, #fff 20%), #111);
  background-size: 220% 220%;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heading-light 8s ease-in-out infinite;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: .01em;
}

@keyframes heading-light {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== الفوتر وبعض العناصر ========== */
.footer-bottom .footer-rights {
  color: var(--muted-500);
  font-size: .875rem;
  text-align: center;
}

.footer-bottom ul li {
  display: inline-block;
  margin: 0 5px;
}

.footer-bottom ul li img {
  max-height: 50px;
  object-fit: contain;
}

/* ========== أنيميشن الظهور بالتمرير – ناعم ========== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(2px);
  transition:
    opacity var(--t-slow) var(--stagger, 0ms),
    transform var(--t-slow) var(--stagger, 0ms),
    filter var(--t-slow) var(--stagger, 0ms);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ========== بانرات داخل الحاوية ========== */
.container .banner img {
  border-radius: 10px;
  transition: transform .3s ease-in-out;
}

@media (hover: hover) {
  .container .banner img:hover { transform: scale(1.02); }
}

/* ========== قسم التفاصيل (المنتج/صفحة) بتنسيق فاخر ========== */
#details_table {
  background-color: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-2);
  padding: clamp(28px, 4vw, 40px);
  max-width: 980px;
  margin: clamp(32px, 5vw, 60px) auto;
  border: 1px solid #dedede;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#details_table:before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 8px;
  background: linear-gradient(45deg, var(--brand-2), var(--brand-3));
  border-radius: 20px 0 0 20px;
  z-index: 2;
}

#details_table h2, #details_table h3 {
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  color: var(--brand-2);
  margin: 0 0 26px;
  font-weight: 800;
  position: relative;
  letter-spacing: .01em;
}

#details_table h2:before, #details_table h3:before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3), var(--brand-2));
}

#details_table p {
  margin-bottom: 24px;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  text-align: right;
  color: var(--text-700);
  line-height: 1.9;
}

#details_table p strong {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  color: var(--brand-2);
}

#details_table ul {
  list-style: none;
  padding: 22px;
  margin: 0 0 28px;
  background-color: #f0f0f0;
  border-radius: 14px;
  border-inline-start: 6px solid var(--brand-2);
  box-shadow: inset 0 6px 12px rgba(0,0,0,.05);
}

#details_table ul li {
  text-align: right;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  color: var(--text-600);
  margin-bottom: 14px;
  padding-right: 20px;
  line-height: 1.7;
}

#details_table .tab-pane {
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  padding: 24px;
  background-color: #fbfbfb;
  box-shadow: inset 0 5px 10px rgba(0,0,0,.04);
}

#details_table .ql-align-right { text-align: right; }

#details_table .luxury-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--brand-2), var(--brand-3), var(--brand-2));
  margin: 32px 0;
}

/* نص عربي: إلغاء زيادة التباعد */
:lang(ar) #details_table h2,
:lang(ar) #details_table h3,
:lang(ar) #details_table p,
:lang(ar) #details_table p strong { letter-spacing: 0; }

/* ========== المدونة – طابع تحريري فاخر ========== */
.main-content.blog-category {
  background-color: var(--surface);
  border: 1px solid #e8e8e8;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
}

.main-content h1 {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem);
  color: var(--brand-1);
  margin-bottom: 14px;
  line-height: 1.35;
  border-bottom: 2px solid color-mix(in srgb, var(--brand-1) 70%, #fff 30%);
  padding-bottom: 10px;
  font-weight: 800;
}

.main-content .text-gray-500 {
  color: var(--brand-1);
  margin-bottom: 18px;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-content .text-gray-500 i {
  margin-inline-start: 8px; /* منطقية RTL/LTR */
}

.main-content img {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  object-fit: cover;
  transition: transform var(--t-base), box-shadow var(--t-base);
  will-change: transform;
}

@media (hover: hover) {
  .main-content img:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: var(--shadow-2);
  }
}

.main-content article {
  color: var(--text-900);
  font-size: var(--fs-base);
  line-height: 1.85;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.main-content article h2,
.main-content article h3 {
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem);
  color: var(--brand-1);
  margin-top: 22px;
  margin-bottom: 12px;
  font-weight: 800;
}

.main-content a {
  color: #0b4a54;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--t-fast), text-shadow var(--t-base);
}

.main-content a:hover {
  color: var(--brand-1);
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.main-content article p {
  margin-bottom: 16px;
  text-align: justify;
  font-size: var(--fs-base);
  line-height: 1.9;
}

.main-content article ul {
  margin-inline-start: 20px;
  margin-bottom: 16px;
  list-style-type: disc;
}

.main-content article ul li {
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--text-700);
}

/* تصنيفات */
.p-4 a {
  background-color: #f9f9f9;
  color: var(--text-900);
  border: 1px solid #e5e5e5;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
  margin: 5px;
  font-weight: 600;
}

.p-4 a:hover {
  background-color: var(--brand-1);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

/* تحسينات محمولة للمدونة */
@media (max-width: 768px) {
  .main-content.blog-category { padding: 16px; }
  .main-content h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem); }
  .main-content article p { font-size: 1rem; }
  .p-4 a { padding: 8px 12px; }
}

/* ========== إمكانية الوصول: التركيز ========== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.square-links-1 .group:focus-visible,
.product-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-2) 70%, #fff 30%);
  outline-offset: 3px;
  border-radius: 8px;
}
/* تكبير خط وصف المنتجات على الهواتف فقط */
@media (max-width: 640px) {
  /* وصف المنتجات في بطاقات المتجر وقائمة المنتجات */
  .product-card__content p,
  .product-card__desc,
  .product-item__desc,
  .product__description,
  .product-description,
  .product-summary,
  .product-single__description,
  .prose p,
  .ql-editor p,
  /* وصف المنتج داخل تبويب التفاصيل */
  #details_table p {
    font-size: clamp(1.05rem, 1rem + 1.4vw, 1.25rem);
    line-height: 1.95;
  }
  /* لمعة ذهبية ناعمة تعتمد على --lux-angle */
#details_table,
.lux-shine {
  position: relative;         /* لازم: عشان ::after يتموضع فوق العنصر */
  --lux-angle: 45deg;         /* قيمة ابتدائية */
  --lux-speed: 12;            /* deg/s (تقدر تغيّرها لكل عنصر) */
}

#details_table::after,
.lux-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* تدرّج خفيف جدًا، والزاوية تأتي من --lux-angle */
  background:
    linear-gradient(
      var(--lux-angle,45deg),
      rgba(212,175,55,0.10) 0%,
      rgba(255,255,255,0.06) 10%,
      transparent 28%,
      transparent 72%,
      rgba(255,255,255,0.06) 90%,
      rgba(212,175,55,0.10) 100%
    );
  mix-blend-mode: soft-light; /* يعطي إحساس ذهبي ناعم */
  opacity: .32;               /* لو قوية قلّلها إلى 0.22 */
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  #details_table::after,
  .lux-shine::after { opacity: 0; }
}