/* =========================================================
   BESBASETO — MODERN E-COMMERCE
   SALLA / RAED THEME
   Arabic + English / RTL + LTR
   ========================================================= */

:root {
  --bs-primary: #f47b20;
  --bs-primary-dark: #d9620b;
  --bs-black: #111111;
  --bs-dark: #191919;
  --bs-text: #222222;
  --bs-muted: #777777;
  --bs-light: #f7f7f7;
  --bs-border: #e8e8e8;
  --bs-white: #ffffff;
  --bs-radius: 18px;
  --bs-shadow: 0 12px 35px rgba(0,0,0,.07);

  --color-primary: #f47b20;
  --color-primary-dark: #d9620b;
}

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

html {
  scroll-behavior: smooth;
}

body {
  color: var(--bs-text);
  background: #fff;
  font-family: "Tajawal", "Cairo", Arial, sans-serif;
}

/* Arabic */
html[dir="rtl"] body {
  direction: rtl;
}

/* English */
html[dir="ltr"] body {
  direction: ltr;
}

/* =========================================================
   TOP PROMO BAR
   ========================================================= */

.s-promotion-bar,
.promotion-bar {
  background: var(--bs-black) !important;
  color: #fff !important;
  font-weight: 700;
  min-height: 38px;
}

.s-promotion-bar a,
.promotion-bar a {
  color: #fff !important;
}

.s-promotion-bar strong,
.promotion-bar strong {
  color: var(--bs-primary);
}

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

header,
.s-header,
.store-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--bs-border);
  backdrop-filter: blur(12px);
  transition: .3s ease;
  z-index: 100;
}

header:hover,
.s-header:hover {
  box-shadow: 0 5px 25px rgba(0,0,0,.06);
}

/* Header links */

header a,
.s-header a {
  font-weight: 600;
  transition: .25s ease;
}

header a:hover,
.s-header a:hover {
  color: var(--bs-primary) !important;
}

/* =========================================================
   LOGO
   ========================================================= */

header img,
.s-header img {
  transition: transform .3s ease;
}

header img:hover,
.s-header img:hover {
  transform: scale(1.04);
}

/* =========================================================
   HERO / BANNERS
   ========================================================= */

.s-block--banners,
.s-block--slider,
.s-slider,
.banner {
  border-radius: var(--bs-radius);
  overflow: hidden;
}

.s-block--banners img,
.s-block--slider img,
.s-slider img,
.banner img {
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

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

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

.s-block-title h2,
.section-title {
  font-weight: 800;
  position: relative;
  letter-spacing: -.5px;
}

.s-block-title h2::after,
.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 9px;
  background: var(--bs-primary);
  border-radius: 20px;
}

/* RTL */
html[dir="rtl"] .s-block-title h2::after,
html[dir="rtl"] .section-title::after {
  margin-right: 0;
  margin-left: auto;
}

/* LTR */
html[dir="ltr"] .s-block-title h2::after,
html[dir="ltr"] .section-title::after {
  margin-left: 0;
  margin-right: auto;
}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.s-block--categories .category-card,
.s-block--categories .s-category-card {
  border-radius: var(--bs-radius);
  overflow: hidden;
  transition: .35s ease;
}

.s-block--categories .category-card:hover,
.s-block--categories .s-category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--bs-shadow);
}

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

.s-product-card {
  background: var(--bs-white);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius) !important;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.s-product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(244,123,32,.35);
  box-shadow: var(--bs-shadow);
}

/* Product image */

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

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

/* Product title */

.s-product-card h3,
.s-product-card .product-title {
  font-weight: 700;
}

/* Price */

.s-product-card .price,
.s-product-card__price,
.product-price {
  color: var(--bs-primary) !important;
  font-weight: 800 !important;
}

/* =========================================================
   ADD TO CART
   ========================================================= */

.s-product-card button,
.s-product-card .s-button-primary,
.s-product-card .add-to-cart {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  font-weight: 700;
  transition: .25s ease;
}

.s-product-card button:hover,
.s-product-card .s-button-primary:hover,
.s-product-card .add-to-cart:hover {
  background: var(--bs-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(244,123,32,.25);
}

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

button,
.btn,
.s-button-primary,
.s-button-element {
  border-radius: 11px !important;
  font-weight: 700;
  transition: .25s ease;
}

.s-button-primary {
  background: var(--bs-primary) !important;
  color: #fff !important;
}

.s-button-primary:hover {
  background: var(--bs-primary-dark) !important;
  transform: translateY(-2px);
}

/* =========================================================
   BADGES
   ========================================================= */

.s-product-card-badge,
.product-badge,
.badge {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700;
}

/* =========================================================
   STORE FEATURES
   ========================================================= */

.s-block--features {
  background: var(--bs-light);
  border-radius: var(--bs-radius);
  padding: 20px;
}

.s-block--features > * {
  transition: transform .3s ease;
}

.s-block--features > *:hover {
  transform: translateY(-4px);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.s-block--testimonials .testimonial-item,
.s-block--testimonials .s-testimonial {
  background: #fff;
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  transition: .3s ease;
}

.s-block--testimonials .testimonial-item:hover,
.s-block--testimonials .s-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-shadow);
}

/* =========================================================
   INPUTS
   ========================================================= */

input,
select,
textarea {
  border: 1px solid var(--bs-border) !important;
  border-radius: 11px !important;
  transition: .25s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.12) !important;
  outline: none;
}

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

footer,
.s-footer {
  background: var(--bs-black) !important;
  color: #fff !important;
}

footer a,
.s-footer a {
  color: rgba(255,255,255,.78);
  transition: .25s ease;
}

footer a:hover,
.s-footer a:hover {
  color: var(--bs-primary) !important;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

footer svg,
.s-footer svg {
  transition: .25s ease;
}

footer a:hover svg,
.s-footer a:hover svg {
  transform: translateY(-3px);
}

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

@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 23px;
  }

  .s-block-title h2 {
    font-size: 22px;
  }

  .s-product-card {
    border-radius: 13px !important;
  }

  .s-product-card button {
    font-size: 13px;
  }

  .s-block--banners,
  .s-block--slider,
  .s-slider,
  .banner {
    border-radius: 12px;
  }

}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .s-product-card {
    border-radius: 11px !important;
  }

  .s-product-card h3 {
    font-size: 13px;
  }

  .s-product-card .price {
    font-size: 15px;
  }

}

/* =========================================================
   SMOOTH MOTION
   ========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

}