/* ========================================================================== */
/* RubyRose V10.11 — Full-width section backgrounds + dynamic decorations     */
/* ========================================================================== */

/* يجعل الغلاف الخارجي للقسم بعرض الشاشة بالكامل بدل حصر اللون داخل الحاوية. */
html body main > .section.rr-bg-section,
html body main > .rr-home-category-showcase.rr-bg-section,
html body main > .rr-home-image-slider.rr-bg-section{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:hidden!important;
}

/* إلغاء الحشو الأفقي من الغلاف فقط، مع بقاء المحتوى داخل حاويته الداخلية. */
html body main > .section.rr-bg-section{
  padding-inline:0!important;
}

/* حاوية موحدة تعيد المحتوى إلى العرض الاحترافي بعد توسيع لون الخلفية. */
html body .rr-section-content-wrap,
html body .rr-home-offer-section > .rr-home-offer-card,
html body .home-tabs-section > .home-tabs{
  position:relative!important;
  z-index:3!important;
  width:var(--rr-container)!important;
  max-width:1380px!important;
  margin-inline:auto!important;
}

/* تثبيت عرض محتوى الأقسام المخصصة داخل الخلفية الممتدة. */
html body .rr-dyn-section > .rr-dyn-split{
  position:relative!important;
  z-index:3!important;
  width:var(--rr-container)!important;
  max-width:1200px!important;
  margin-inline:auto!important;
}

/* إبقاء قسم العرض الكامل ممتدًا مع حماية محتواه من طبقة الأشكال. */
html body .rr-dyn-section > .rr-dyn-full{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
}

/* طبقة صورة الخلفية تغطي كامل الغلاف الخارجي للقسم. */
html body .rr-bg-section > .rr-sec-bg-img{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
}

/* طبقة الأشكال مستقلة عن تدفق الصفحة حتى لا تغير ارتفاع السيكشن. */
html body .rr-bg-section > .rr-section-decor{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  pointer-events:none!important;
  contain:layout paint!important;
}

/* جميع عناصر المحتوى الفعلية تظهر فوق الخلفية والأشكال. */
html body .rr-bg-section > *:not(.rr-sec-bg-img):not(.rr-section-decor):not(.rr-section-bg-swatch):not(.rr-home-slide):not(.rr-home-slider-arrow):not(.rr-home-slider-dots){
  position:relative!important;
  z-index:3!important;
}

/* السلايدر يضع الأشكال داخل كل شريحة بين الصورة والنص حتى لا تغطي العنوان. */
html body .rr-home-image-slider .rr-home-slide > .rr-section-decor{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  pointer-events:none!important;
  mix-blend-mode:soft-light!important;
}
html body .rr-home-image-slider .rr-home-slide > .rr-home-default-content{z-index:20!important;}
html body .rr-home-image-slider.rr-bg-section .rr-home-slider-arrow,
html body .rr-home-image-slider.rr-bg-section .rr-home-slider-dots{
  z-index:20!important;
}

/* الشكل الأساسي وموضعه وحركته يتمان من متغيرات يولدها PHP لكل قسم. */
.rr-decor-shape{
  position:absolute!important;
  left:var(--rr-x)!important;
  top:var(--rr-y)!important;
  display:block!important;
  width:var(--rr-size)!important;
  height:var(--rr-size)!important;
  margin:var(--rr-half-size) 0 0 var(--rr-half-size)!important;
  opacity:0;
  filter:blur(var(--rr-blur));
  transform:translate3d(0,0,0) rotate(var(--rr-rotation)) scale(.35);
  transform-origin:center;
  will-change:transform,opacity;
  animation-duration:var(--rr-duration);
  animation-delay:var(--rr-delay);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}

/* دائرة ناعمة مناسبة لخلفيات مستحضرات التجميل. */
.rr-shape-circle{
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.78),var(--rr-shape-color) 48%,transparent 74%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 18px 45px rgba(71,24,48,.06);
}

/* لطخة عضوية متغيرة الحدود. */
.rr-shape-blob{
  border-radius:58% 42% 66% 34% / 45% 63% 37% 55%;
  background:linear-gradient(145deg,var(--rr-shape-color),rgba(255,255,255,.38));
  box-shadow:inset 0 0 30px rgba(255,255,255,.24);
}

/* بتلة تجميل رقيقة. */
.rr-shape-petal{
  border-radius:75% 15% 75% 15% / 72% 20% 72% 20%;
  background:linear-gradient(135deg,rgba(255,255,255,.55),var(--rr-shape-color));
  box-shadow:0 14px 32px rgba(92,31,61,.07);
}

/* لمعة رباعية بدون صورة خارجية. */
.rr-shape-sparkle{
  background:transparent;
  filter:drop-shadow(0 5px 10px rgba(102,34,69,.08));
}
.rr-shape-sparkle::before,
.rr-shape-sparkle::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:14%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(to bottom,transparent,var(--rr-shape-color),transparent);
}
.rr-shape-sparkle::after{
  transform:rotate(90deg);
}

/* ثلاث مسارات حركة مختلفة حتى لا تتحرك الأشكال بنفس الإيقاع. */
.rr-motion-1{animation-name:rrDecorDriftOne;}
.rr-motion-2{animation-name:rrDecorDriftTwo;}
.rr-motion-3{animation-name:rrDecorDriftThree;}

/* ظهور واختفاء مع حركة رأسية وأفقية هادئة. */
@keyframes rrDecorDriftOne{
  0%,100%{opacity:0;transform:translate3d(0,20px,0) rotate(var(--rr-rotation)) scale(.35);}
  18%{opacity:var(--rr-decor-opacity);}
  48%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x),var(--rr-drift-y),0) rotate(calc(var(--rr-rotation) + 70deg)) scale(1);}
  78%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x2),var(--rr-drift-y2),0) rotate(calc(var(--rr-rotation) + 145deg)) scale(.82);}
}
@keyframes rrDecorDriftTwo{
  0%,100%{opacity:0;transform:translate3d(18px,0,0) rotate(var(--rr-rotation)) scale(.25);}
  22%{opacity:var(--rr-decor-opacity);}
  55%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x2),var(--rr-drift-y),0) rotate(calc(var(--rr-rotation) - 95deg)) scale(1.08);}
  82%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x),var(--rr-drift-y2),0) rotate(calc(var(--rr-rotation) - 165deg)) scale(.68);}
}
@keyframes rrDecorDriftThree{
  0%,100%{opacity:0;transform:translate3d(-12px,24px,0) rotate(var(--rr-rotation)) scale(.42);}
  16%{opacity:var(--rr-decor-opacity);}
  42%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x2),var(--rr-drift-y2),0) rotate(calc(var(--rr-rotation) + 110deg)) scale(.9);}
  70%{opacity:var(--rr-decor-opacity);transform:translate3d(var(--rr-drift-x),var(--rr-drift-y),0) rotate(calc(var(--rr-rotation) + 210deg)) scale(1.12);}
}

/* حماية الأداء والوصول عند طلب تقليل الحركة من نظام المستخدم. */
@media(prefers-reduced-motion:reduce){
  .rr-decor-shape{
    animation:none!important;
    opacity:var(--rr-decor-opacity)!important;
    transform:rotate(var(--rr-rotation)) scale(.82)!important;
  }
}

/* تقليل عدد العناصر الظاهرة بصريًا وحجمها على الهاتف مع بقاء الإعداد محفوظًا. */
@media(max-width:760px){
  html body .rr-section-content-wrap,
  html body .rr-home-offer-section > .rr-home-offer-card,
  html body .home-tabs-section > .home-tabs,
  html body .rr-dyn-section > .rr-dyn-split{
    width:min(100% - 28px,1380px)!important;
  }
  .rr-section-decor .rr-decor-shape:nth-child(n+13){display:none!important;}
  .rr-decor-shape{max-width:120px!important;max-height:120px!important;}
}