/* ===============================
   قسم واحة النجوم - Wahaa Stars
   =============================== */

/* ===== تحسين الأداء ===== */
body {
  font-family: 'Tajawal', sans-serif;
  background: radial-gradient(circle at top, #000, #111 60%, #000);
  overflow-x: hidden;
  margin: 0;
}

/* ==== واحة النجوم ==== */
.wahaa-stars-wrap {
  text-align: center;
  padding: 60px 0;
  position: relative;
  color: #fff;
}

.title-with-crown {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
}

.wahaa-title {
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  color: #fff;
  margin: 0;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 25px rgba(255, 215, 0, 0.4);
  animation: glowText 5s infinite ease-in-out;
  font-display: swap;
}

.crown-icon {
  width: 70px;
  height: auto;
  animation: crownShine 6s infinite ease-in-out;
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.7));
}

@keyframes glowText {
  0%,100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8),0 0 30px rgba(255, 215, 0,0.5); transform: scale(1); }
  50% { text-shadow:0 0 25px rgba(255, 215, 0,1),0 0 40px rgba(255, 215, 0,0.7); transform: scale(1.05); }
}
@keyframes crownShine {
  0%,100%{transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 10px gold);}
  50%{transform: rotate(-3deg) scale(1.1); filter: drop-shadow(0 0 20px gold);}
}
@keyframes fadeUp {0%{opacity:0;transform:translateY(40px);}100%{opacity:1;transform:translateY(0);}}

.star {
  position: absolute;
  color: #FFD700;
  opacity: 0.85;
  z-index: 1;
  animation: twinkle 7s infinite ease-in-out;
}

.s1  { top: 10%; left: 25%; font-size: 16px; animation-delay: 1s; }
.s2  { top: 0; left: 50%; font-size: 24px; animation-delay: 2s; }
.s3  { top: 20%; right: 20%; font-size: 12px; animation-delay: 3s; }
.s4  { bottom: 25%; left: 15%; font-size: 20px; animation-delay: 4s; }
.s5  { bottom: 5%; left: 45%; font-size: 14px; animation-delay: 5s; }
.s6  { top: 50%; right: 10%; font-size: 18px; animation-delay: 1.5s; }
.s7  { bottom: 35%; right: 30%; font-size: 22px; animation-delay: 2.5s; }
.s8  { top: -10px; right: 40%; font-size: 13px; animation-delay: 3.5s; }
.s9  { bottom: 0; left: 30%; font-size: 19px; animation-delay: 4.5s; }
.s10 { top: 40%; left: 5%; font-size: 15px; animation-delay: 6s; }

@keyframes twinkle {0%,100%{opacity:0.9;transform:scale(1);}50%{opacity:0.4;transform:scale(1.2);}}

/* ==== السلايدر ==== */
.container-slider {
  width: 100%;
  overflow: hidden;
  perspective: 1000px;
  background: transparent;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

.slider-track {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  transform-style: preserve-3d;
  animation: pingPong 20s linear infinite alternate;
  transition: transform 0.3s ease-out;
}

.img-wrapper {
  flex-shrink: 0;
  width: 180px;
  height: 300px;
  border-radius: 25px;
  border: 0.7px solid gold;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center center;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.img-wrapper:hover {
  transform: scale(1.1) rotateY(10deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.img-wrapper:hover img {
  transform: scale(1.1);
}

@keyframes pingPong {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% + 360px)); }
}

@media (max-width: 1024px) {
  .img-wrapper { width: 150px; height: 250px; border-radius: 20px; }
}

@media (max-width: 768px) {
  .img-wrapper { width: 120px; height: 200px; border-radius: 15px; }
}



/* ===============================
   قسم الصواني - Wahaa 
   =============================== */

.tray-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(20px);
    opacity: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tray-item.show {
    transform: translateY(0);
    opacity: 1;
}

.tray-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.branch-btn {
    transition: all 0.3s ease;
}

.branch-btn.active {
    background-color: #BB151B;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Wahet slider */
.wahet-slider-container {
  position: relative;
  width: 100%;
  text-align: center;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  flex-wrap: wrap;
}

.wahet-slider-title {
  font-size: clamp(22px, 6vw, 50px);
  font-weight: bold;
  color: #A02222;
  white-space: nowrap;
  margin: 0 15px;
  position: relative;
  display: inline-block;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.wahet-slider-title::after {
  content: "";
  display: block;
  width: 150%;
  height: 10px;
  background-color: #ee131b;
  border-radius: 8px;
  margin-top: 5px;
  margin-right: -70px;
}

.wahet-icon-left {
  width: clamp(120px, 25vw, 250px);
  height: auto;
  animation: wahet-spin-left 120s linear infinite;
  z-index: 1;
}

@keyframes wahet-spin-left {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* ===============================
   Media Queries
   =============================== */
@media (max-width: 1024px) {
  .img-wrapper {
    width: 150px;
    height: 250px;
    border-radius: 20px;
  }
}

@media (max-width: 768px) {
  /* Tray Images */
  .tray-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .img-wrapper {
    width: 120px;
    height: 200px;
    border-radius: 15px;
  }

  /* Slider */
  .wahet-icon-left {
    width: clamp(95px, 30vw, 180px);
  }

  .wahet-slider-title {
    font-size: clamp(14px, 8vw, 28px); /* أصغر للموبايل */
    white-space: normal; /* يسمح بالكسر */
    left: 0; /* إزالة الإزاحة */
    margin: 0 auto; /* توسيط */
    text-align: center;
  }

  .wahet-slider-title::after {
    height: 6px;
    margin-top: 3px;
    margin-right: -30px;
  }
}

@media (min-width: 1200px) {
  .wahet-icon-left {
    width: clamp(180px, 20vw, 300px);
  }

  .wahet-slider-title {
    font-size: clamp(28px, 3vw, 48px);
  }
}