/* =====================================================
   TURBO AREA - UNIFIED PREMIUM CSS V2
   Full replacement for previous Turbo Area CSS
   Mobile + tablet + desktop
   ===================================================== */

:root {
  --turbo-blue: #168cff;
  --turbo-cyan: #58c2ff;

  --turbo-bg: #03060b;
  --turbo-card-top: #0d141e;
  --turbo-card-bottom: #060a10;

  --turbo-text: #f7f9fc;
  --turbo-muted: #b0bccd;
  --turbo-border: rgba(55, 155, 255, .18);

  --turbo-radius: 18px;

  --turbo-glow-size: clamp(260px, 40vw, 520px);
  --turbo-glow-duration: 20s;
  --turbo-glow-opacity: .85;
}


/* =====================================================
   1. BACKGROUND - ALL SCREEN SIZES
   ===================================================== */

body {
  isolation: isolate;

  background:
    radial-gradient(
      ellipse 850px 550px at 15% 0%,
      rgba(22, 140, 255, .13),
      transparent 72%
    ),

    radial-gradient(
      ellipse 700px 500px at 95% 45%,
      rgba(0, 190, 255, .07),
      transparent 72%
    ),

    linear-gradient(
      rgba(80, 160, 255, .025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(80, 160, 255, .025) 1px,
      transparent 1px
    ),

    var(--turbo-bg) !important;

  background-size:
    auto,
    auto,
    56px 56px,
    56px 56px,
    auto !important;

  background-attachment: scroll !important;
}


/* =====================================================
   2. BLUE GLOW
   Behind content - does not block clicks
   ===================================================== */

body::after {
  content: "" !important;

  position: fixed;

  top: 12vh;
  left: 2vw;
  right: auto;
  bottom: auto;

  width: var(--turbo-glow-size);
  height: var(--turbo-glow-size);

  z-index: -1;
  pointer-events: none;

  border-radius: 50%;

  opacity: var(--turbo-glow-opacity);

  background:
    radial-gradient(
      circle,
      rgba(22, 140, 255, .24) 0%,
      rgba(22, 140, 255, .12) 30%,
      rgba(0, 170, 255, .045) 52%,
      transparent 72%
    );

  filter: none;

  transform: translate3d(0, 0, 0);
  animation: none;
}


@keyframes turboAmbientV2 {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(94vw - var(--turbo-glow-size)),
      12vh,
      0
    );
  }
}


/* Enable motion only when the visitor allows it */

@media (prefers-reduced-motion: no-preference) {
  body::after {
    animation:
      turboAmbientV2
      var(--turbo-glow-duration)
      ease-in-out
      infinite
      alternate;
  }
}


/* =====================================================
   3. PRODUCT CARDS
   ===================================================== */

.s-product-card-entry {
  color: var(--turbo-text);

  border-radius: var(--turbo-radius) !important;

  border:
    1px solid var(--turbo-border) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(70, 173, 255, .60),
      transparent
    ) top center / 70% 1px no-repeat,

    linear-gradient(
      145deg,
      var(--turbo-card-top),
      var(--turbo-card-bottom)
    ) !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, .24) !important;

  transition:
    transform .2s ease,
    border-color .2s ease;
}


/* Product image */

.s-product-card-image {
  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(22, 140, 255, .07),
      transparent 68%
    ) !important;
}


.s-product-card-image img {
  transition: transform .22s ease;
}


/* Product content */

.s-product-card-content {
  background: transparent !important;
}


.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--turbo-text) !important;

  font-weight: 700 !important;
  line-height: 1.6;
}


.s-product-card-content-subtitle {
  color: var(--turbo-muted) !important;
}


/* Current price */

.s-product-card-price,
.s-product-card-sale-price h4 {
  color: var(--turbo-cyan) !important;

  font-weight: 800 !important;
}


/* Previous price */

.s-product-card-sale-price del,
.s-product-card-price del {
  color: var(--turbo-muted) !important;
}


/* =====================================================
   4. ADD-TO-CART BUTTONS
   Inside product cards only
   ===================================================== */

.s-product-card-entry :is(
  .s-product-card-content-footer .s-button-primary,
  salla-add-product-button button
) {
  color: #fff !important;
  font-weight: 700 !important;

  border-radius: 11px !important;

  border:
    1px solid rgba(90, 180, 255, .25) !important;

  background:
    linear-gradient(
      135deg,
      #0872e0,
      #0056bd
    ) !important;

  box-shadow:
    0 5px 16px rgba(0, 110, 255, .16);

  transition: transform .18s ease;
}


/* Preserve the appearance of disabled buttons */

.s-product-card-entry :is(
  .s-product-card-content-footer .s-button-primary,
  salla-add-product-button button
):is(:disabled, [aria-disabled="true"]) {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}


/* =====================================================
   5. WISHLIST / QUICK-VIEW BUTTONS
   ===================================================== */

.s-product-card-buttons button {
  color: #fff !important;

  background:
    rgba(4, 9, 15, .94) !important;

  border:
    1px solid rgba(255, 255, 255, .13) !important;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


/* =====================================================
   6. SECTION TITLES
   ===================================================== */

.s-block__title h2,
.s-block__title h3,
.s-block__title h2 a,
.s-block__title h3 a {
  color: var(--turbo-text) !important;

  font-weight: 800 !important;
  line-height: 1.5;
}


/* Blue accent under titles */

.s-block__title h2::after,
.s-block__title h3::after {
  content: "";

  display: block;

  width: 38px;
  height: 3px;

  margin-block-start: 8px;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      var(--turbo-blue),
      var(--turbo-cyan)
    );
}


/* =====================================================
   7. BANNERS
   Keep existing dimensions and layout
   ===================================================== */

.banner img,
.s-block--banners img {
  border-radius: 16px;

  transition: transform .2s ease;
}


/* =====================================================
   8. TEXT FIELDS
   Do not reshape checkboxes or radio buttons
   ===================================================== */

:where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  select
) {
  border-radius: 10px;
}


/* Visible keyboard focus */

:where(
  input,
  textarea,
  select,
  .s-product-card-entry a,
  .s-product-card-entry button
):focus-visible {
  outline:
    2px solid var(--turbo-cyan) !important;

  outline-offset: 3px;
}


/* =====================================================
   9. FOOTER
   ===================================================== */

.store-footer {
  color: var(--turbo-muted);

  background:
    linear-gradient(
      180deg,
      #050910,
      #020408
    ) !important;

  border-top:
    1px solid rgba(35, 139, 255, .15);
}


.store-footer :is(h2, h3, h4) {
  color: var(--turbo-text);
}


.store-footer a {
  color: var(--turbo-muted);
}


/* =====================================================
   10. POINTER HOVER
   Only when supported and motion is allowed
   ===================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .s-product-card-entry:hover {
    transform: translateY(-3px);

    border-color:
      rgba(55, 165, 255, .42) !important;
  }


  .s-product-card-entry:hover
  .s-product-card-image img {
    transform: scale(1.025);
  }


  .s-product-card-entry :is(
    .s-product-card-content-footer .s-button-primary,
    salla-add-product-button button
  ):not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
  }


  .s-product-card-buttons
  button:not(:disabled):not([aria-disabled="true"]):hover {
    border-color:
      var(--turbo-blue) !important;

    transform: scale(1.04);
  }


  .banner:hover img,
  .s-block--banners a:hover img {
    transform: scale(1.008);
  }


  .store-footer a:hover {
    color: var(--turbo-cyan);
  }

}


/* =====================================================
   11. TABLET
   ===================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  :root {
    --turbo-radius: 17px;

    --turbo-glow-size: 380px;
    --turbo-glow-duration: 22s;
  }

}


/* =====================================================
   12. MOBILE
   ===================================================== */

@media (max-width: 768px) {

  :root {
    --turbo-radius: 15px;

    --turbo-glow-size: min(76vw, 320px);
    --turbo-glow-duration: 24s;
    --turbo-glow-opacity: .72;
  }


  body {
    background-size:
      auto,
      auto,
      60px 60px,
      60px 60px,
      auto !important;
  }


  .s-product-card-entry {
    box-shadow:
      0 5px 14px rgba(0, 0, 0, .18) !important;
  }


  .s-product-card-content-title,
  .s-product-card-content-title a {
    font-size: 14px !important;
  }


  .banner img,
  .s-block--banners img {
    border-radius: 13px;
  }

}


/* =====================================================
   13. REDUCED MOTION
   Applies to our effects only
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  body::after {
    animation: none !important;
    transform: none !important;
  }


  .s-product-card-entry,
  .s-product-card-image img,
  .s-product-card-entry button,
  .banner img,
  .s-block--banners img {
    transition: none !important;
  }

}
/* =====================================================
   TURBO AREA - SECTION TITLES FIX
   Blue titles without white shadows
   أضفه في نهاية الكود الحالي
   ===================================================== */

/* إزالة أي ظل أو فلتر من حاوية العنوان */
.s-block__title {
  text-shadow: none !important;
  filter: none !important;
}

/* لون عناوين الأقسام وإزالة الهالة */
.s-block__title h2,
.s-block__title h3,
.s-block__title h2 a,
.s-block__title h3 a,
.s-block__title h2 span,
.s-block__title h3 span {
  color: #41a9ff !important;

  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke-width: 0 !important;

  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;

  font-weight: 700 !important;
}

/* إبقاء الخط الأزرق تحت العنوان بدون توهج */
.s-block__title h2::after,
.s-block__title h3::after {
  background:
    linear-gradient(
      90deg,
      #168cff,
      #58c2ff
    ) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  /* =====================================================
   TURBO AREA - DESKTOP SECTION TITLE FIX
   للكمبيوتر فقط
   ===================================================== */

@media (min-width: 769px) {

  .s-block__title,
  .s-block__title *,
  .s-block__title h2,
  .s-block__title h3,
  .s-block__title a,
  .s-block__title span {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;

    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #168cff !important;

    color: #168cff !important;
  }


  /* عنوان القسم */
  .s-block__title h2,
  .s-block__title h3 {
    color: #168cff !important;

    font-weight: 800 !important;

    text-shadow: none !important;

    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #168cff !important;
  }


  /* لو العنوان داخل رابط */
  .s-block__title h2 a,
  .s-block__title h3 a {
    color: #168cff !important;

    text-shadow: none !important;

    -webkit-text-fill-color: #168cff !important;
  }


  /* الخط الصغير تحت العنوان */
  .s-block__title h2::after,
  .s-block__title h3::after {
    background:
      linear-gradient(
        90deg,
        #168cff,
        #58c2ff
      ) !important;

    box-shadow: none !important;
    filter: none !important;
  }

}
}

/* =====================================================
   END
   No header, menu or container position overrides
   ===================================================== */