/* Add custom CSS styles below */ 

div.bottom-header.opacity-90.dark.bg-white.da-bgm.has-custom-bg span {
  color: yellow;
}

input.s-form-control {
  background-image: url('https://c.top4top.io/p_3548ia6281.jpg');
}

button.btn--coupon.has-not-coupon.btn--default.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
  background-color: gray;
}

button.relative.px-1.py-1.btn--wishlist.animated.lazy.rounded-tiny.s-button-element.s-button-button.s-button-outline.s-button-light-outline.s-button-loader-center {
  background-image: url('https://static.wikia.nocookie.net/colors/images/8/8e/-FF0000.png');
}
button.relative.px-1.py-1.btn--delete.rounded-tiny.s-button-element.s-button-button.s-button-solid.s-button-danger.s-button-loader-center {
  background-image: url("https://c.top4top.io/p_3548ia6281.jpg");
 } 

.container h4 {
  color: white !important;
}

/* Add custom CSS styles below */ 
.s-cart-summary-count {
    top: -0.125rem;
    --tw-bg-opacity: 1;
    background: #ea2d0f
 !important;
}

input#coupon-input {
  color: red;
}

/* Add custom CSS styles below */ 
.shadow-default.bg-white.da-bgg.p-3.xs\:p-7.rounded-md.mb-5.relative.transition-height.duration-1000 {
  background-image: url('https://c.top4top.io/p_3548ia6281.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
/* Add custom CSS styles below */
.s-product-options-option::before {
  content: url('https://b.top4top.io/p_355968wgr1.png');
  

  /* other styles for positioning */
}

.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
  background-color: GRAY !important;
}


/*hover card*/
.s-product-card-entry:hover .s-product-card-image img {
  transform: rotateY(180deg);
  transition: transform 0.6s ease;
  /* شيلنا backface-visibility */
}

.s-product-card-image img {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.s-product-card-entry.s-product-card-vertical:hover .s-product-card-image img {
  transform: rotateY(179.99deg); /* Slight variation to ensure rotation */
  transition: transform 0.6s ease;
}

.s-product-card-entry.s-product-card-vertical .s-product-card-image img {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.s-block {
    margin-top: 2rem;
}

.s-product-card-image img {
  transition: transform 0.9s ease-in-out;
  transform-style: preserve-3d;
}

.s-products-slider-card:hover .s-product-card-image img {
  transform: rotateY(360deg);
}

/*ticker*/
.custom-ticker-bar {
  width: 100%;
  background-color: WHITE;
  color: #ffea00;
  overflow: hidden;
  padding: 10px 0;
  direction: ltr; /* ✅ مهم جداً أن يكون ltr وليس rtl */
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 1; /* Changed from 999 */
}
@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.custom-ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left-to-right 170s linear infinite;
}





.s-slider-block__title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    display: flex;
    max-width: 1280px;
    align-items: center;
    justify-content: space-between;
    color: #ffea00;
}







.promotion-title {
    position: absolute;
    top: 1rem;
    z-index: 10;
    --tw-bg-opacity: 1;
    background-color: rgba(153, 27, 27, 1);
    background-color: rgba(153, 27, 27, var(--tw-bg-opacity, 1));
    background: GREEN;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.s-product-card-sale-price h4 {
    --tw-text-opacity: GREEN !important;
    color: PINK !important;
    color: #ea2d0f
 !IMPORTANT;
}




.


/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseZoom {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
}
.s-product-card-countdown {
  background-color: white; /* You can also use 'green' */
}

.s-count-down-item-value {
font-weight: bold;
  color: red
; !important;
}
TARGET Class = 0-1-0 ONLY



 /* Use a selector that matches all the elements you want to change */
    .flex-center.h-full.w-full {
      color: GREEN;
    }

    /* Or if they are within a specific container */
    .product-list .flex-center.h-full.w-full {
      color: GREEN;
    }
    .s-product-card-discount.card-discount.font-primary {
  width: 89%;
}
.s-product-card-discount.card-discount.font-primary {
  bottom: 0;
}

.s-product-card-discount.card-discount.font-primary {
  top: 88%;
  .s-product-card-discount.card-discount.font-primary {
  height: 0%;
}
.s-product-card-discount.card-discount.font-primary {
  /* Ensure the container has layout context if needed for positioning, though flex should be enough */
  /* position: relative; */ /* Uncomment if you need absolute positioning for the ::before */
}

span.off-ratio {
  visibility: hidden; /* Hide the original text visually */
  position: relative; /* Needed for absolute positioning of the pseudo-element if used */
}

span.off-ratio::before {
  content: "عروضنا من 5 لـ  50%"; /* Set the new text content */
  visibility: visible; /* Make the pseudo-element visible */
  /* You might need to adjust positioning and styling */
  position: absolute; /* Position relative to the span */
  top: 50%; /* Example positioning - centers vertically */
  left: 50%; /* Example positioning - centers horizontally */
  transform: translate(-50%, -50%); /* Example positioning - centers the pseudo-element */
  white-space: nowrap; /* Prevent wrapping */
  color: inherit; /* Inherit color from parent */
  font-size: inherit; /* Inherit font size */
  /* Ensure sufficient z-index if needed for stacking */
  z-index: 1; /* Example z-index */
  
.shadow-default.bg-white.da-bgg.p-3.xs\:p-7.rounded-md.mb-5.relative.transition-height.duration-1000 {
  background-image: url('https://tashdata.s3.me-south-1.amazonaws.com/public/dooz/UploadedFiles/20f0f15e-e9c2-42d1-8ac4-52e5da4cb5bd.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}


.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
    color: green;
}
h2.font-bold.text-xl.inline-block {
    color: WHITE;
}
button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
    background: #ffea00;
    border: none;
}



:root {
  --color-primary: #ffea00 !important; /* غيّر اللون ده لأي لون تريده */
  --ticketing-system-primary-color: #0099e5 !important; /* غيّر اللون على حسب اختيارك */
}