@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
  --main-color: #0a0a0a;
  --fantasy-black: #0a0a0a;
  --dark-accent: #1a1a1a;
  --neon-accent: #ff6bcd; /* وردي نيون */
  --neon-accent-light: rgba(255, 107, 205, 0.2);
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --wave-distortion: 0px;
  --color-primary: #fff;
}

/* General Styles */
body {
  background: 
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%),
    url('https://cdn.salla.sa/Bjxej/hair-pattern.gif') center/cover fixed;
  color: var(--text-primary);
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  min-height: 100vh;
  margin: 0;
  animation: bgFlow 20s infinite alternate;
}

@keyframes bgFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Header Styles */
#mainnav.main-nav-container {
  background: linear-gradient(145deg, #0a0a0a, #151515) !important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-scrolled {
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(10px);
}

/* Navigation */
.main-menu li a {
  color: var(--text-secondary) !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  position: relative;
  transition: all 0.3s ease;
}

.main-menu li a:hover {
  color: var(--neon-accent) !important;
}

/* Product Cards */
.s-products-list-horizontal-cards {
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--neon-accent) rgba(255,255,255,0.1);
}
.s-product-card-image {
border:0;
}

.s-product-card-horizontal {
  scroll-snap-align: start;
  min-width: 500px;
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
  backdrop-filter: blur(10px);
}

.s-product-card-horizontal:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px var(--neon-accent-light);
  border-color: var(--neon-accent);
}

/* Hair Dryer Effect */
.s-product-card-horizontal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s-product-card-horizontal:hover::after {
  opacity: 1;
  animation: hairDryer 2s infinite;
}

@keyframes hairDryer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Footer with Hair Waves */
.store-footer {
  background: linear-gradient(to top, #0a0a0a, #151515);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}

.store-footer::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 30px;
  background: 
    radial-gradient(circle at 10% 50%, transparent 15px, #0a0a0a 16px),
    radial-gradient(circle at 30% 50%, transparent 15px, #0a0a0a 16px),
    radial-gradient(circle at 50% 50%, transparent 15px, #0a0a0a 16px),
    radial-gradient(circle at 70% 50%, transparent 15px, #0a0a0a 16px),
    radial-gradient(circle at 90% 50%, transparent 15px, #0a0a0a 16px);
  background-size: 20% 100%;
  background-repeat: repeat-x;
  animation: wave 3s ease-in-out infinite alternate;
  transform: skewY(var(--wave-distortion));
}

@keyframes wave {
  0% { background-position-x: 0%; }
  100% { background-position-x: 20%; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .s-product-card-horizontal {
    min-width: 350px;
  }
  
  .store-footer::before {
    height: 20px;
    background-size: 25% 100%;
  }
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/*feature item*/

.s-block--features__item {

background-color: var(--main-color);
}
.s-block--features__item .feature-icon{
background-color: #fff;
}
.s-block--features__item h2,.s-block--features__item p{
color:#fff;
}
.navbar-brand img {
    max-height: 6rem;
    width: auto;
    max-width: 150px;
}
.copyright-text p{
color:#fff;

}
.s-reviews-testimonial__text p{
color:#fff;
}
.s-reviews-testimonial{
background-color: var(--main-color);
}
.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 80px;
}
.sicon-menu:before {
    content: "\ed7f";
    color: #fff;
}
.sicon-user-circle:before {
    content: "\f072";
    color: #fff;
}
.sicon-shopping-bag:before {
    content: "\ef36";
    color: #fff;
}
.s-product-card-horizontal .s-product-card-content-title a{
color:#333;
}
@media(max-width:720px){

.s-product-card-content-subtitle,.s-product-card-content-title,.s-product-card-content-title a{
color:#fff;
font-weight: 900;
font-size: 14px;
}
footer div.store-footer__inner div.container{

display: flex
;
    flex-direction: column;
    align-items: center;
}
div.lg\:col-span-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
}


.s-social-list {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.s-contacts.hydrated,.s-contacts-list {
    display: flex;
flex-direction: column;
    align-items: center;
}

}
.s-reviews-testimonial__icon path {
    fill: white !important;
}

.store-footer__curve path {
    fill:var(--main-color) !important;
    width:100%;
}
.store-footer,.store-footer__inner{
background-color:var(--main-color);
}
.store-footer{
padding-top:0 !important;
}
.sicon-shopping-bag:before {
    content: "\ef36";
    color:#fff;
}
.s-button-light-outline{
color:var(--main-color);
border-color:var(--main-color);
}

.s-button-primary-outline{
color:#fff;
border-radius:#fff;
background-color:var(--main-color);
}
.s-product-card-horizontal .s-product-card-content {
    margin-bottom: 0px;
    background-color: #fff;
}
.form-label,b.block ,h1{
color:#fff!important;
 }
 .bg-white,.sticky-product-bar{
 background-color: var(--main-color)!important;
    color: #fff !important;
 }
 .s-product-card-entry,.s-product-card-content,.s-comments-product {
        margin-bottom: 3.5rem;
        padding-top: 0.25rem;
  padding-bottom: 0.25rem;
        background-color: #fff;
        color: #fff;
    }
    .s-button-primary{
    background-color:#fff;
    }
  .s-fast-checkout-button.outline {
    background-color: transparent;
    border: 1px solid #fff !important;
    color:#fff !important;
}
.s-product-card-content{
padding-bottom: 0; 
}
.s-product-card-content-subtitle,.s-product-card-content-title,.s-product-card-content-title a{
color:#fff;
font-weight: 900;
font-size: 18px;
}
.main-nav-container.fixed-header .inner{
background-color: var(--main-color);

}

.s-product-card-horizontal .s-product-card-image:where([dir="rtl"], [dir="rtl"] *) {
     border-top-right-radius: 0rem; 
     border-bottom-right-radius: 0rem;
}
.s-product-card-horizontal .s-product-card-image {
    height: auto;
    width: 50%;
}

.s-user-menu-trigger {
    display: flex
;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    border-top-right-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    padding-left: 0; 
    padding-right: 0; 
     padding-top: 0; 
     padding-bottom: 0; 
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 50%;
}
.mm-spn.mm-spn--navbar ul {
    
    background-color: var(--main-color);
}
.mm-spn.mm-spn--navbar.mm-spn--main:where([dir="rtl"], [dir="rtl"] *):after {
        padding-right: 0.75rem;
        background-color: var(--main-color);
        color: #fff;
    }
    .s-contacts-header{
    display:none !important;
    }
    .is-sticky-product-bar .sticky-product-bar__quantity salla-quantity-input .s-quantity-input-input {
       
        color: #333;
    }
    .line-through {
   
    color: #fff;
}
.s-social-list {
       
        margin-top: 20px;
    }
    .s-product-card-sale-price span{
    color:var(--main-color);
    }