/* =========================
   LUXURY SALLA THEME
   Modern Clean UI
========================= */

:root{
  --primary:#7CCBC4;
  --primary-dark:#5fb8b0;
  --black:#111111;
  --text:#2B2B2B;
  --gray:#777777;
  --light:#F8F8F8;
  --white:#FFFFFF;
  --border:#ECECEC;

  --radius:18px;
  --radius-sm:12px;

  --shadow:
  0 10px 30px rgba(0,0,0,.05);

  --transition:.35s ease;
}

/* =========================
   BODY
========================= */

body{
  background:var(--white);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

/* =========================
   GLOBAL SECTIONS
========================= */

section,
.s-block{
  padding:70px 0;
  position:relative;
}

/* مسافات فخمة */
.container,
.container-fluid{
  padding-left:24px;
  padding-right:24px;
}

/* =========================
   TITLES
========================= */

.section-title,
h2,
h3{
  font-weight:700;
  letter-spacing:-0.5px;
  color:var(--black);
}

.section-title{
  font-size:34px;
  margin-bottom:14px;
}

.section-subtitle{
  color:var(--gray);
  font-size:15px;
}

/* =========================
   HERO BANNER
========================= */

.main-slider,
.hero-slider,
.s-slider-block{
  border-radius:28px;
  overflow:hidden;
  margin-top:20px;
  box-shadow:var(--shadow);
}

.main-slider img,
.hero-slider img{
  transition:transform 5s ease;
}

.main-slider:hover img,
.hero-slider:hover img{
  transform:scale(1.04);
}

/* =========================
   CATEGORY BOXES
========================= */

.categories-grid .category-item,
.s-block-categories .category{
  border-radius:22px;
  overflow:hidden;
  background:var(--white);
  transition:var(--transition);
  border:1px solid var(--border);
  box-shadow:0 5px 20px rgba(0,0,0,.03);
}

.categories-grid .category-item:hover,
.s-block-categories .category:hover{
  transform:translateY(-8px);
  box-shadow:
  0 20px 40px rgba(0,0,0,.08);
}

/* =========================
   PRODUCT CARDS
========================= */

.product,
.product-entry,
.s-product-card{
  background:var(--white);
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:var(--transition);
  box-shadow:0 5px 20px rgba(0,0,0,.03);
}

.product:hover,
.product-entry:hover,
.s-product-card:hover{
  transform:translateY(-10px);
  box-shadow:
  0 25px 50px rgba(0,0,0,.10);
}

/* صورة المنتج */
.product img,
.s-product-card-image img{
  transition:transform .6s ease;
}

.product:hover img,
.s-product-card:hover img{
  transform:scale(1.06);
}

/* اسم المنتج */
.product-title,
.s-product-card-name{
  font-size:16px;
  font-weight:600;
  line-height:1.7;
  color:var(--black);
}

/* السعر */
.price,
.s-product-card-price{
  color:var(--primary-dark);
  font-size:18px;
  font-weight:700;
}

/* =========================
   BUTTONS
========================= */

button,
.btn,
.s-button-element{
  border-radius:14px !important;
  transition:var(--transition);
  font-weight:600;
  border:none;
}

.btn-primary,
button.primary{
  background:var(--primary);
  color:#fff;
}

.btn-primary:hover,
button.primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

/* =========================
   OFFERS BANNERS
========================= */

.banner,
.promo-banner,
.s-block-banner{
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.banner img,
.promo-banner img{
  transition:transform .7s ease;
}

.banner:hover img,
.promo-banner:hover img{
  transform:scale(1.03);
}

/* =========================
   HEADER
========================= */

header,
.store-header{
  backdrop-filter:blur(14px);
  background:
  rgba(255,255,255,.82);
  border-bottom:
  1px solid rgba(0,0,0,.05);
}

/* القائمة */
.navbar a{
  font-weight:600;
  transition:var(--transition);
}

.navbar a:hover{
  color:var(--primary-dark);
}

/* =========================
   SEARCH
========================= */

.search-box input{
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--light);
}

/* =========================
   FOOTER
========================= */

footer{
  background:#111;
  color:#fff;
  padding:70px 0 30px;
  margin-top:70px;
}

footer h3,
footer h4{
  color:#fff;
}

footer a{
  color:#ccc;
  transition:var(--transition);
}

footer a:hover{
  color:var(--primary);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  section,
  .s-block{
    padding:45px 0;
  }

  .section-title{
    font-size:26px;
  }

  .product-title{
    font-size:14px;
  }

  .main-slider,
  .hero-slider{
    border-radius:20px;
  }

  .product,
  .s-product-card{
    border-radius:18px;
  }
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:20px;
}

/* =========================
   FADE ANIMATION
========================= */

.product,
.category-item,
.banner{
  animation:fadeUp .7s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}