/* ================================================
   YALLA HIKE — SALLA CUSTOM CSS
   Brand Primary  : #F55800 (Orange)
   Brand Secondary: #B5152E (Crimson)
   ================================================ */


/* ---- 1. CSS VARIABLES (Namo theme overrides) ---- */
:root {
  --color-primary:        #F55800;
  --color-secondary:      #B5152E;
  --primary:              #F55800;
  --secondary:            #B5152E;
  --color-primary-hover:  #d44e00;
  --color-btn-primary-bg: #F55800;
  --color-btn-text:       #ffffff;
  --theme-primary:        #F55800;
}


/* ---- 2. HEADER ---- */
header,
.header,
#header {
  background: #ffffff !important;
  border-bottom: 2.5px solid #F55800 !important;
  box-shadow: none !important;
}

/* Nav links */
.header a,
header nav a,
.nav__link {
  color: #333333 !important;
  font-weight: 500 !important;
}

.header a:hover,
header nav a:hover,
.nav__link:hover {
  color: #F55800 !important;
}

/* Login / register button */
header .btn,
.header__actions .btn,
[class*="login-btn"],
[class*="register-btn"] {
  background:   #B5152E !important;
  border-color: #B5152E !important;
  color:        #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}


/* ---- 3. PRIMARY BUTTONS ---- */
.btn-primary,
.btn--primary,
.button--primary,
[class*="add-to-cart"],
[class*="checkout"],
salla-add-product-button::part(button),
salla-button[color="primary"]::part(button) {
  background:    #F55800 !important;
  border-color:  #F55800 !important;
  color:         #ffffff !important;
  font-weight:   700 !important;
  border-radius: 6px !important;
}

.btn-primary:hover,
[class*="add-to-cart"]:hover,
salla-add-product-button::part(button):hover {
  background:   #d44e00 !important;
  border-color: #d44e00 !important;
}

/* Secondary / outline buttons */
.btn-secondary,
.btn--secondary,
.button--secondary {
  border-color: #F55800 !important;
  color:        #F55800 !important;
}

.btn-secondary:hover {
  background: #F55800 !important;
  color:      #ffffff !important;
}


/* ---- 4. PRODUCT CARDS ---- */
.product-card,
[class*="product-card"],
salla-product-card {
  border-radius: 10px !important;
  border: 0.5px solid #E0D8CC !important;
  overflow: hidden !important;
  transition: transform 0.18s ease !important;
  background: #ffffff !important;
}

.product-card:hover,
[class*="product-card"]:hover {
  transform: translateY(-3px) !important;
}

/* Card title */
.product-card__title,
[class*="product-card"] h3,
[class*="product-card"] [class*="title"],
salla-product-card::part(title) {
  font-weight: 700 !important;
  color:       #111111 !important;
  line-height: 1.4 !important;
}

/* Card price */
.product-card__price,
[class*="product-card"] [class*="price"],
salla-price::part(amount),
.price .amount {
  color:       #111111 !important;
  font-weight: 800 !important;
}

/* Card category / location label */
.product-card__category,
[class*="product-card"] [class*="category"],
[class*="product-card"] [class*="subtitle"] {
  color:       #B5152E !important;
  font-weight: 700 !important;
  font-size:   11px !important;
  text-transform: uppercase;
}


/* ---- 5. LABELS & BADGES ---- */
/* Date badge / active labels */
.label,
.badge,
.product-label,
[class*="label--primary"],
[class*="badge--primary"] {
  background:    #F55800 !important;
  color:         #ffffff !important;
  font-weight:   700 !important;
  border-radius: 4px !important;
}

/* Sold out */
[class*="sold-out"],
[class*="out-of-stock"],
[class*="label--danger"],
.label--secondary {
  background:    #B5152E !important;
  color:         #ffffff !important;
  border-radius: 4px !important;
}


/* ---- 6. SECTION HEADINGS ---- */
.section__title,
[class*="section-title"],
[class*="section__title"],
.block-title {
  font-weight:    700 !important;
  color:          #111111 !important;
  border-right:   4px solid #F55800 !important;
  padding-right:  12px !important;
  border-radius:  2px !important;
}


/* ---- 7. FILTER / CATEGORY TABS ---- */
.filter-tab,
.category-filter,
[class*="filter-btn"],
[class*="tab-btn"] {
  border-radius: 20px !important;
  font-weight:   600 !important;
  transition:    all 0.15s ease !important;
}

.filter-tab.active,
.category-filter.active,
[class*="filter-btn"].active,
[class*="tab-btn"].active {
  background:   #F55800 !important;
  border-color: #F55800 !important;
  color:        #ffffff !important;
}


/* ---- 8. LINKS & ACCENT ---- */
a {
  color: #F55800 !important;
}

a:hover {
  color: #B5152E !important;
}

/* Keep header logo link unstyled */
.header__logo a,
.logo a {
  color: inherit !important;
}


/* ---- 9. PAGE BACKGROUND ---- */
body,
.page-content,
main,
.main-content {
  background: #F8F6F3 !important;
}


/* ---- 10. STAR RATINGS ---- */
salla-rating::part(star),
.star-rating .star,
[class*="rating"] .icon,
[class*="stars"] {
  color: #F55800 !important;
}


/* ---- 11. FOOTER ---- */
footer,
.footer {
  background: #0a0a0a !important;
}

.footer,
.footer p,
.footer span {
  color: rgba(255, 255, 255, 0.35) !important;
}

.footer a {
  color: rgba(255, 255, 255, 0.35) !important;
}

.footer a:hover {
  color: #F55800 !important;
}


/* ---- 12. WHATSAPP FLOATING BUTTON ---- */
/* Note: add your WhatsApp number in href below via Salla's
   custom HTML section or use the Salla WhatsApp App */
.whatsapp-float {
  position:      fixed !important;
  bottom:        24px !important;
  left:          24px !important;
  width:         52px !important;
  height:        52px !important;
  background:    #25D366 !important;
  border-radius: 50% !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  z-index:       9999 !important;
  box-shadow:    0 4px 12px rgba(0,0,0,0.25) !important;
  transition:    transform 0.2s ease !important;
}

.whatsapp-float:hover {
  transform: scale(1.08) !important;
}

.whatsapp-float svg {
  width:  28px !important;
  height: 28px !important;
  fill:   #ffffff !important;
}


/* ---- 13. TRUST BAR (add via Salla custom HTML block) ---- */
.yh-trust-bar {
  background:  #1a1a1a;
  padding:     12px 22px;
  display:     flex;
  justify-content: center;
  gap:         28px;
  flex-wrap:   wrap;
  direction:   rtl;
}

.yh-trust-bar__item {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       rgba(255,255,255,0.6);
  font-size:   13px;
  font-weight: 500;
}

.yh-trust-bar__item svg {
  color:    #F55800;
  width:    18px;
  height:   18px;
  flex-shrink: 0;
}


/* ---- 14. HOW IT WORKS (add via Salla custom HTML block) ---- */
.yh-hiw {
  background:  #ffffff;
  padding:     32px 24px;
  direction:   rtl;
}

.yh-hiw__title {
  font-size:    18px;
  font-weight:  700;
  color:        #111111;
  border-right: 4px solid #F55800;
  padding-right:12px;
  margin-bottom:24px;
}

.yh-hiw__steps {
  display:               grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items:           start;
  gap:                   0;
}

.yh-hiw__step { text-align: center; padding: 8px; }

.yh-hiw__step-num {
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      #F55800;
  color:           #ffffff;
  font-size:       18px;
  font-weight:     800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 12px;
}

.yh-hiw__step-title {
  font-size:   14px;
  font-weight: 700;
  color:       #111111;
  margin-bottom: 6px;
}

.yh-hiw__step-desc {
  font-size:   12px;
  color:       #777777;
  line-height: 1.6;
}

.yh-hiw__arrow {
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #cccccc;
  font-size:   22px;
  padding-top: 20px;
}





/* ---- 16. MOBILE TWEAKS ---- */
@media (max-width: 768px) {
  .yh-hiw__steps,
  .yh-hiw__steps-wrap {
    grid-template-columns: 1fr !important;
  }

  .yh-hiw__arrow {
    transform: rotate(90deg);
    padding:   0 !important;
    margin:    4px 0 !important;
  }

  .yh-trust-bar {
    gap: 14px !important;
  }
}