/* ==============================
   WAREQA x SALLA ANGEL / MALAK
   Final Custom CSS - Mobile First
================================= */

:root{
  --w-ivory:#F3F0E7;
  --w-gold:#C5A15A;
  --w-maroon:#5A1E2C;
  --w-maroon-dark:#42101c;
  --w-olive:#6B6F3A;
  --w-taupe:#D8D0C4;
  --w-gray:#8A8176;
  --w-dark:#2B221E;
  --w-radius:20px;
  --w-shadow:0 10px 28px rgba(43,34,30,.08);
  --w-max:1180px;
}

/* ==============================
   SAFE RESET
================================= */

html,
body{
  overflow-x:hidden!important;
  max-width:100%!important;
  scroll-behavior:smooth;
}

body{
  background:var(--w-ivory)!important;
  color:var(--w-dark)!important;
  font-family:var(--font-main), "Tajawal", "Cairo", sans-serif!important;
}

img,
video,
iframe{
  max-width:100%!important;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

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

.store-header,
.store-header .header-inner,
.store-header .main-nav-container,
.store-header .bottom-header{
  background:var(--w-maroon)!important;
}

.store-header .header-inner{
  min-height:76px!important;
  border-bottom:1px solid rgba(243,240,231,.12)!important;
}

.store-header .header-container{
  max-width:var(--w-max)!important;
  margin:auto!important;
}

.store-header a,
.store-header span,
.store-header p,
.store-header button,
.store-header i,
.store-header .sicon,
.store-header .header-btn,
.store-header .mburger{
  color:#fff!important;
}

.store-header svg,
.store-header svg path,
.store-header .s-cart-summary-wrapper svg,
.store-header .s-cart-summary-wrapper path{
  fill:#fff!important;
  stroke:#fff!important;
}

.navbar-brand{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}

.navbar-brand img{
  max-height:56px!important;
  width:auto!important;
  object-fit:contain!important;
}

.store-header .s-cart-summary-count{
  background:var(--w-gold)!important;
  color:var(--w-maroon)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  font-weight:800!important;
}

/* ==============================
   MOBILE BOTTOM NAV
================================= */

.bottom-header{
  height:68px!important;
  box-shadow:0 -10px 24px rgba(0,0,0,.12)!important;
  border-top:1px solid rgba(243,240,231,.14)!important;
}

.bottom-header-buttons{
  max-width:520px!important;
  margin:auto!important;
  height:100%!important;
}

.bottom-header-button,
.bottom-header-icon{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  color:#fff!important;
}

.bottom-header i,
.bottom-header svg,
.bottom-header svg path{
  color:#fff!important;
  fill:#fff!important;
}

.bottom-header span{
  color:#fff!important;
  font-size:11px!important;
  font-weight:600!important;
}

.bottom-header-button:hover i,
.bottom-header-button:hover span{
  color:var(--w-gold)!important;
}

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

.mobile-menu{
  background:var(--w-ivory)!important;
}

.mobile-menu .sidemenu-link,
.mobile-menu .menu_title,
.mobile-menu p,
.mobile-menu h5{
  color:var(--w-maroon)!important;
  font-weight:700!important;
}

.mobile-menu .sidemenu-link{
  border-bottom:1px solid rgba(90,30,44,.08)!important;
}

/* ==============================
   PAGE LAYOUT
================================= */

.container,
.md\:container{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

.s-block{
  width:100%!important;
  margin:0 auto!important;
  padding-inline:clamp(14px,4vw,32px)!important;
  box-sizing:border-box!important;
}

.s-block > *,
salla-custom-component{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

/* ==============================
   HOMEPAGE CUSTOM SECTIONS
================================= */

.s-block--bundle-hero-slider,
.s-block--bundle-cta-banner,
.s-block--bundle-brand-story{
  background:var(--w-olive)!important;
  color:var(--w-ivory)!important;
}

.s-block--bundle-hero-slider :is(h1,h2,h3,p,span,a),
.s-block--bundle-cta-banner :is(h1,h2,h3,p,span,a),
.s-block--bundle-brand-story :is(h1,h2,h3,p,span,a){
  color:var(--w-ivory)!important;
}

.s-block--bundle-hero-slider :is(.badge,small),
.s-block--bundle-cta-banner :is(.badge,small),
.s-block--bundle-brand-story :is(.badge,small){
  color:var(--w-gold)!important;
}

.s-block--bundle-wareqa-products,
.s-block--bundle-wholesale-cta,
.s-block--bundle-subscription-cta,
.s-block--bundle-testimonials-section{
  background:var(--w-ivory)!important;
  color:var(--w-dark)!important;
}

/* ==============================
   HERO - NO GLASS EFFECT
================================= */

.s-block--bundle-hero-slider,
.s-block--bundle-hero-slider *::before,
.s-block--bundle-hero-slider *::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.s-block--bundle-hero-slider{
  background:
    radial-gradient(circle at 16% 18%, rgba(197,161,90,.12), transparent 26%),
    linear-gradient(145deg,#6B6F3A 0%,#606536 52%,#50542c 100%)!important;
}

.s-block--bundle-hero-slider .overlay,
.s-block--bundle-hero-slider [class*="overlay"],
.s-block--bundle-hero-slider [class*="glass"],
.s-block--bundle-hero-slider [class*="blur"]{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.s-block--bundle-hero-slider .hero-content,
.s-block--bundle-hero-slider .slide-content{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
}

/* Hero buttons */
.s-block--bundle-hero-slider .actions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:20px auto 0!important;
  text-align:center!important;
}

.s-block--bundle-hero-slider .actions .btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  min-height:42px!important;
  min-width:145px!important;
  padding:10px 18px!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

.s-block--bundle-hero-slider .actions .btn-primary{
  background:var(--w-gold)!important;
  color:var(--w-maroon)!important;
  border:1px solid var(--w-gold)!important;
}

.s-block--bundle-hero-slider .actions .btn-secondary{
  background:transparent!important;
  color:var(--w-ivory)!important;
  border:1px solid rgba(243,240,231,.9)!important;
}

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

.s-button-element,
.s-button-btn,
button[type="submit"],
a[class*="btn"]{
  border-radius:999px!important;
  transition:.25s ease!important;
}

.s-button-primary,
.s-button-primary-outline:hover,
button[type="submit"]{
  background:var(--w-maroon)!important;
  border-color:var(--w-maroon)!important;
  color:#fff!important;
}

.s-button-primary *,
button[type="submit"] *{
  color:#fff!important;
}

.s-button-primary:hover,
button[type="submit"]:hover{
  background:var(--w-gold)!important;
  border-color:var(--w-gold)!important;
  color:var(--w-maroon)!important;
}

.s-button-primary:hover *,
button[type="submit"]:hover *{
  color:var(--w-maroon)!important;
}

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

.s-product-card-entry{
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(197,161,90,.35)!important;
  background:#fffaf0!important;
  box-shadow:var(--w-shadow)!important;
  margin-inline:auto!important;
}

.s-product-card-image{
  background:linear-gradient(145deg,#f6f0e4,#efe5d4)!important;
}

.s-product-card-image img{
  object-fit:contain!important;
  padding:8px!important;
}

.s-product-card-content{
  padding:14px!important;
  text-align:center!important;
}

.s-product-card-content-title,
.s-product-card-content-title a{
  color:var(--w-maroon)!important;
  font-weight:800!important;
  line-height:1.45!important;
  text-align:center!important;
}

.s-product-card-content-subtitle{
  color:var(--w-gray)!important;
  font-size:13px!important;
  line-height:1.7!important;
  text-align:center!important;
}

.s-product-card-price{
  color:var(--w-maroon)!important;
  font-size:18px!important;
  font-weight:900!important;
}

.s-product-card-price-before{
  color:rgba(43,34,30,.42)!important;
}

.s-product-card-content-footer{
  margin-top:10px!important;
}

.s-product-card-content-footer .s-button-element{
  min-height:42px!important;
  font-weight:800!important;
  background:var(--w-maroon)!important;
  border-color:var(--w-maroon)!important;
  color:#fff!important;
}

.s-product-card-content-footer .s-button-element *{
  color:#fff!important;
}

.s-product-card-actions .s-button-element{
  background:rgba(243,240,231,.94)!important;
  border-color:rgba(197,161,90,.45)!important;
  color:var(--w-maroon)!important;
}

.s-product-card-actions .s-button-element i,
.s-product-card-actions .s-button-element svg,
.s-product-card-actions .s-button-element path{
  color:var(--w-maroon)!important;
  fill:var(--w-maroon)!important;
}

/* ==============================
   PRODUCT PAGE
================================= */

.breadcrumbs,
.breadcrumbs *{
  color:var(--w-maroon)!important;
}

.md\:container > .flex,
#product-tabs,
.product-form{
  max-width:var(--w-max)!important;
  margin-inline:auto!important;
}

.details-slider,
.details-slider .swiper,
.details-slider .swiper-wrapper,
.details-slider .swiper-slide{
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fffaf0!important;
}

.details-slider img{
  object-fit:contain!important;
  background:#fffaf0!important;
}

.main-content{
  color:var(--w-dark)!important;
}

.main-content h1{
  color:var(--w-maroon)!important;
  font-weight:900!important;
  line-height:1.45!important;
}

.product-entry__sub-title{
  color:var(--w-gray)!important;
  line-height:1.8!important;
}

.short__description,
.short__description p{
  color:var(--w-dark)!important;
  line-height:1.9!important;
}

.more-details,
.link--primary,
.main-categoty a{
  color:var(--w-maroon)!important;
  font-weight:800!important;
}

.price .total-price{
  color:var(--w-maroon)!important;
  font-size:24px!important;
  font-weight:900!important;
}

.price .before-price{
  color:rgba(43,34,30,.45)!important;
}

.product-availablity strong{
  color:var(--w-olive)!important;
}

.product-available-dot{
  background:var(--w-olive)!important;
}

.wish-share .s-button-element,
.s-social-share-btn{
  background:rgba(243,240,231,.96)!important;
  border:1px solid rgba(197,161,90,.45)!important;
  color:var(--w-maroon)!important;
}

.wish-share i,
.wish-share svg,
.wish-share path{
  color:var(--w-maroon)!important;
  fill:var(--w-maroon)!important;
}

.product-form,
.product-form *{
  max-width:100%;
}

.product-form .s-button-element{
  min-height:48px!important;
  font-weight:900!important;
}

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

.store-footer,
.store-footer__inner{
  background:var(--w-maroon)!important;
}

.store-footer .container{
  max-width:var(--w-max)!important;
}

.store-footer :is(p,span,a,li,strong,h4),
.store-footer .footer-description,
.store-footer .footer-description *,
.store-footer .copyrights,
.store-footer .copyrights *{
  color:#fff!important;
}

.store-footer h3,
.store-footer .menu-list h3{
  color:var(--w-gold)!important;
  font-weight:900!important;
}

.store-footer a:hover{
  color:var(--w-gold)!important;
}

.store-footer .footer-description,
.store-footer .footer-description *{
  line-height:1.9!important;
  font-weight:700!important;
}

.store-footer .footer-middle,
.store-footer .footer-bottom{
  border-color:rgba(243,240,231,.18)!important;
}

.store-footer .footer-social a,
.store-footer .social-links a,
.store-footer [class*="contact"] a{
  background:rgba(243,240,231,.96)!important;
  color:var(--w-maroon)!important;
  border-radius:14px!important;
  border:1px solid rgba(197,161,90,.45)!important;
}

.store-footer .footer-social i,
.store-footer .social-links i,
.store-footer [class*="contact"] i{
  color:var(--w-maroon)!important;
}

.store-footer .footer-bottom li[class*="pay-"]{
  background:#fff!important;
  border-radius:7px!important;
  padding:4px!important;
}

/* ==============================
   WHATSAPP FLOAT
================================= */

#wa-angel,
.wa-angel{
  z-index:50!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}

#wa-angel a,
.wa-angel a{
  width:52px!important;
  height:52px!important;
}

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

@media(max-width:768px){

  body{
    padding-bottom:78px!important;
  }

  .container,
  .md\:container,
  .mob\:container{
    width:100%!important;
    padding-inline:14px!important;
  }

  .store-header .header-inner{
    min-height:70px!important;
  }

  .store-header .header-container{
    padding-inline:10px!important;
  }

  .navbar-brand img{
    max-height:46px!important;
  }

  .header-btn{
    width:38px!important;
    height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .store-header .flex.items-stretch{
    align-items:center!important;
  }

  .bottom-header{
    height:70px!important;
  }

  .bottom-header i{
    font-size:20px!important;
  }

  .bottom-header span{
    font-size:10.5px!important;
  }

  .s-block{
    padding-inline:14px!important;
    padding-block:22px!important;
  }

  .s-block :is(h1){
    font-size:clamp(28px,8vw,40px)!important;
    text-align:center!important;
  }

  .s-block :is(h2){
    font-size:clamp(22px,6vw,30px)!important;
    text-align:center!important;
  }

  .s-block :is(p,span){
    font-size:clamp(13px,3.9vw,16px)!important;
    line-height:1.85!important;
  }

  .s-block--bundle-hero-slider,
  .s-block--bundle-cta-banner,
  .s-block--bundle-brand-story,
  .s-block--bundle-wholesale-cta,
  .s-block--bundle-subscription-cta,
  .s-block--bundle-testimonials-section{
    text-align:center!important;
  }

  .s-block--bundle-hero-slider{
    padding-inline:16px!important;
    padding-block:30px!important;
  }

  .s-block--bundle-hero-slider :is(h1,h2,h3,p,span){
    text-align:center!important;
    margin-inline:auto!important;
  }

  .s-block--bundle-hero-slider .actions{
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    margin-top:18px!important;
  }

  .s-block--bundle-hero-slider .actions .btn{
    min-width:128px!important;
    max-width:150px!important;
    min-height:39px!important;
    font-size:12px!important;
    padding:9px 12px!important;
  }

  .md\:container > .flex{
    align-items:center!important;
  }

  .sidebar{
    width:100%!important;
    padding-inline:0!important;
    margin-inline:auto!important;
  }

  .details-slider{
    max-width:430px!important;
    margin-inline:auto!important;
    border-radius:22px!important;
  }

  .main-content{
    width:100%!important;
    padding:18px 14px 24px!important;
    text-align:center!important;
  }

  .main-content h1,
  .product-entry__sub-title,
  .short__description,
  .short__description p,
  .main-categoty{
    text-align:center!important;
    justify-content:center!important;
  }

  .price-wrapper{
    justify-content:center!important;
    flex-wrap:wrap!important;
  }

  .product-availablity{
    justify-content:center!important;
  }

  .main-categoty{
    flex-wrap:wrap!important;
  }

  .product-form .s-button-element,
  .product-form button[type="submit"]{
    width:100%!important;
    min-height:50px!important;
    font-size:15px!important;
  }

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

  .s-product-card-content{
    padding:12px!important;
  }

  .s-product-card-content-title a{
    font-size:14px!important;
  }

  .s-product-card-content-subtitle{
    font-size:12px!important;
  }

  .s-product-card-price{
    font-size:16px!important;
  }

  .store-footer,
  .store-footer *{
    text-align:center!important;
  }

  .store-footer .footer-middle{
    align-items:center!important;
    justify-content:center!important;
    gap:24px!important;
  }

  .store-footer .footer-profile,
  .store-footer .menu-list,
  .store-footer .footer-list{
    align-items:center!important;
    justify-content:center!important;
    margin-inline:auto!important;
  }

  .store-footer .logo-footer{
    justify-content:center!important;
  }

  .store-footer .footer-description{
    max-width:360px!important;
    margin-inline:auto!important;
  }

  .store-footer .footer-bottom{
    padding-bottom:88px!important;
  }

  .store-footer ul{
    justify-content:center!important;
  }

  #wa-angel,
  .wa-angel{
    bottom:86px!important;
    left:14px!important;
  }
}

/* Very small phones */
@media(max-width:390px){

  .container,
  .md\:container,
  .mob\:container{
    padding-inline:12px!important;
  }

  .navbar-brand img{
    max-height:42px!important;
  }

  .s-block{
    padding-inline:12px!important;
  }

  .s-block--bundle-hero-slider .actions{
    gap:8px!important;
  }

  .s-block--bundle-hero-slider .actions .btn{
    min-width:122px!important;
    max-width:142px!important;
    font-size:12px!important;
    padding-inline:10px!important;
  }

  .bottom-header span{
    font-size:10px!important;
  }

  .bottom-header i{
    font-size:19px!important;
  }

  .price .total-price{
    font-size:22px!important;
  }
}

/* Desktop polish */
@media(min-width:769px){

  .store-footer .footer-middle{
    justify-content:space-between!important;
    align-items:flex-start!important;
  }

  .main-content{
    padding-inline:24px!important;
  }

  .details-slider{
    box-shadow:var(--w-shadow)!important;
  }
}
/* ==============================
   Footer Social Icons - Visible Fix
================================= */

.store-footer .footer-social,
.store-footer .footer-social *,
.store-footer .social-links,
.store-footer .social-links *,
.store-footer salla-social,
.store-footer salla-social *{
  opacity:1 !important;
  filter:none !important;
}

/* ترتيب أيقونات السوشيال */
.store-footer .social-links,
.store-footer .s-social-list{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:12px auto 0 !important;
  padding:0 !important;
}

/* زر الأيقونة */
.store-footer .s-social-link a,
.store-footer .footer-social a,
.store-footer .social-links a{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#C5A15A !important;
  border:1px solid rgba(243,240,231,.35) !important;
  border-radius:50% !important;
  color:#5A1E2C !important;
  opacity:1 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}

/* SVG داخل الأيقونة */
.store-footer .s-social-link svg,
.store-footer .s-social-link svg path,
.store-footer .s-social-icon svg,
.store-footer .s-social-icon svg path{
  width:22px !important;
  height:22px !important;
  fill:#5A1E2C !important;
  stroke:#5A1E2C !important;
  color:#5A1E2C !important;
  opacity:1 !important;
}

/* Hover */
.store-footer .s-social-link a:hover,
.store-footer .footer-social a:hover{
  background:#F3F0E7 !important;
  border-color:#C5A15A !important;
  transform:translateY(-2px);
}

/* موبايل */
@media(max-width:768px){
  .store-footer .s-social-link a,
  .store-footer .footer-social a{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .store-footer .s-social-link svg,
  .store-footer .s-social-link svg path{
    width:21px !important;
    height:21px !important;
  }
}
/* ==============================
   Footer Contact Icons - Visible Fix
================================= */

.store-footer .s-contacts-list,
.store-footer .s-contacts-list *{
  opacity:1 !important;
  filter:none !important;
}

/* ترتيب بيانات التواصل */
.store-footer .s-contacts-list,
.store-footer .s-contacts-list-horizontal{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:12px auto 0 !important;
  padding:0 !important;
}

/* عنصر التواصل بالكامل */
.store-footer .s-contacts-item{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:#F3F0E7 !important;
  text-decoration:none !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* دائرة الأيقونة */
.store-footer .s-contacts-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#C5A15A !important;
  border:1px solid rgba(243,240,231,.35) !important;
  border-radius:50% !important;
  color:#5A1E2C !important;
  opacity:1 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}

/* SVG داخل أيقونات الواتساب والجوال */
.store-footer .s-contacts-icon svg,
.store-footer .s-contacts-icon svg path{
  width:22px !important;
  height:22px !important;
  fill:#5A1E2C !important;
  stroke:#5A1E2C !important;
  color:#5A1E2C !important;
  opacity:1 !important;
}

/* رقم الجوال */
.store-footer .s-contacts-item .unicode{
  color:#0a0a0a !important;
  opacity:1 !important;
  font-size:14px !important;
  direction:ltr !important;
  unicode-bidi:embed !important;
}

/* Hover */
.store-footer .s-contacts-item:hover .s-contacts-icon{
  background:#F3F0E7 !important;
  border-color:#C5A15A !important;
  transform:translateY(-2px);
}

/* موبايل */
@media(max-width:768px){
  .store-footer .s-contacts-list,
  .store-footer .s-contacts-list-horizontal{
    align-items:center !important;
    text-align:center !important;
  }

  .store-footer .s-contacts-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .store-footer .s-contacts-icon svg,
  .store-footer .s-contacts-icon svg path{
    width:21px !important;
    height:21px !important;
  }

  .store-footer .s-contacts-item .unicode{
    font-size:13px !important;
  }
}