/*
 Theme Name:   Woostify Child
 Theme URI:    https://woostify.com
 Description:  SouqLebnani brand redesign — Woostify child theme
 Author:       TechBoiL
 Author URI:   https://techboil.com
 Template:     woostify
 Version:      2.0.9
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  woostify-child
*/

:root{
  /* Logo-derived palette, restrained: green is primary (small use), black ink for text,
     red is a TINY accent only (matches the thin ribbon in the logo) — no solid color blocks. */
  --souq-navy: #14231B;      /* deep ink-green, used sparingly (footer only) */
  --souq-navy-light: #1E3327;
  --souq-gold: #0B4A24;       /* CTAs use cedar green now, not red/gold */
  --souq-gold-light: #14652F;
  --souq-cedar: #0B4A24;
  --souq-red: #C8102E;        /* tiny accent only: kicker labels, one small tag */
  --souq-cream: #FFF9E6;
  --souq-white: #FFFFFF;
  --souq-ink: #1A1A1A;
  --souq-gray: #6B7280;
  --souq-gray-light: #EDEBE0;
  --souq-radius: 14px;
  --souq-font-head: 'Playfair Display', Georgia, serif;
  --souq-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --souq-shadow: 0 10px 30px rgba(11,74,36,0.10);
  --souq-shadow-lg: 0 20px 50px rgba(11,74,36,0.16);
}

body.souq-redesign{
  font-family: var(--souq-font-body);
  color: var(--souq-ink);
  background: var(--souq-cream);
}

body.souq-redesign h1,
body.souq-redesign h2,
body.souq-redesign h3,
body.souq-redesign .h1, body.souq-redesign .h2, body.souq-redesign .h3{
  font-family: var(--souq-font-head);
  color: var(--souq-navy);
  letter-spacing: -0.01em;
}

/* ---------- Header ---------- */
body.souq-redesign .site-header,
body.souq-redesign .header-mobile-full-wrapper{
  background: var(--souq-cream);
  border-bottom: 1px solid rgba(0,40,85,0.08);
}

body.souq-redesign .primary-navigation a{
  font-family: var(--souq-font-body);
  font-weight: 600;
  color: var(--souq-navy);
  transition: color .2s ease;
}
body.souq-redesign .primary-navigation a:hover{
  color: var(--souq-red);
}

body.souq-redesign .header-cart-icon .count,
body.souq-redesign .woostify-svg-cart-fill{
  color: var(--souq-navy);
}

/* Native Woostify gold utility bar ("Shop By Categories" strip) -> softened logo palette */
body.souq-redesign .header-content-bottom{
  background: var(--souq-cream) !important;
  border-top: 1px solid rgba(11,74,36,0.12);
  border-bottom: 1px solid rgba(11,74,36,0.12);
}
body.souq-redesign .header-content-bottom .toggle-vertical-menu-button,
body.souq-redesign .header-content-bottom .vertical-menu-button{
  background: transparent !important;
  border: 1.5px solid var(--souq-cedar) !important;
  color: var(--souq-cedar) !important;
}
body.souq-redesign .header-content-bottom > .woostify-container > *:not(.site-search){
  color: var(--souq-cedar) !important;
}
body.souq-redesign .header-content-bottom .toggle-vertical-menu-button svg,
body.souq-redesign .header-content-bottom .toggle-vertical-menu-button path,
body.souq-redesign .header-content-bottom > .woostify-container svg:not(.site-search svg),
body.souq-redesign .header-content-bottom > .woostify-container path:not(.site-search path){
  fill: var(--souq-cedar) !important;
}
body.souq-redesign .header-content-bottom .site-search input{
  color: var(--souq-ink) !important;
}

/* ---------- Buttons everywhere (incl. WooCommerce) ---------- */
body.souq-redesign .button,
body.souq-redesign button.button,
body.souq-redesign a.button,
body.souq-redesign input.button,
body.souq-redesign .btn,
body.souq-redesign .single_add_to_cart_button,
body.souq-redesign .add_to_cart_button,
body.souq-redesign .checkout-button,
body.souq-redesign #place_order{
  background: var(--souq-gold) !important;
  color: var(--souq-navy) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 12px 26px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  box-shadow: var(--souq-shadow);
}
body.souq-redesign .button:hover,
body.souq-redesign button.button:hover,
body.souq-redesign a.button:hover,
body.souq-redesign .btn:hover,
body.souq-redesign .single_add_to_cart_button:hover,
body.souq-redesign .add_to_cart_button:hover{
  background: var(--souq-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: var(--souq-shadow-lg);
}

/* WhatsApp contact buttons keep their brand green, just get the same radius/motion */
body.souq-redesign a.add_to_cart_button[href*="wa.me"],
body.souq-redesign a.single_add_to_cart_button[href*="wa.me"]{
  background: #25D366 !important;
  color: #fff !important;
}

/* ---------- Product / category cards ---------- */
body.souq-redesign ul.products li.product,
body.souq-redesign .woostify-product-content{
  background: var(--souq-white);
  border-radius: var(--souq-radius);
  overflow: hidden;
  box-shadow: var(--souq-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  border: none !important;
}
body.souq-redesign ul.products li.product:hover{
  transform: translateY(-6px);
  box-shadow: var(--souq-shadow-lg);
}
body.souq-redesign ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--souq-font-head);
  color: var(--souq-navy);
}
body.souq-redesign ul.products li.product .price{
  color: var(--souq-red);
  font-weight: 700;
}

/* ---------- Footer ---------- */
body.souq-redesign .site-footer,
body.souq-redesign footer.site-footer{
  background: #35513F;
  color: rgba(255,255,255,0.85);
}

/* Elementor Theme Builder footer template — hardcoded reds -> logo-aligned green */
body.souq-redesign .elementor-element-4581191e{
  background-color: #35513F !important;
}
body.souq-redesign .elementor-element-2376522f{
  background-color: #263C2E !important;
}
body.souq-redesign .elementor-element-2376522f,
body.souq-redesign .elementor-element-2376522f *{
  color: rgba(255,255,255,0.75) !important;
}
body.souq-redesign .elementor-element-2376522f a{
  color: var(--souq-white) !important;
}
body.souq-redesign .site-footer a{
  color: var(--souq-gold-light);
}
body.souq-redesign .site-footer h1,
body.souq-redesign .site-footer h2,
body.souq-redesign .site-footer h3,
body.souq-redesign .site-footer .widget-title{
  color: var(--souq-white);
}

/* ==============================================================
   HOMEPAGE (front-page.php)
   ============================================================== */

.souq-hero{
  position: relative;
  background: var(--souq-cream);
  color: var(--souq-ink);
  overflow: hidden;
  padding: 96px 6vw 110px;
}
.souq-hero-glow{
  display: none;
}
.souq-hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.souq-hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--souq-red);
  margin-bottom: 18px;
}
body.souq-redesign .souq-hero h1{
  color: var(--souq-ink);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  margin: 0 0 20px;
}
.souq-hero h1 em{
  font-style: normal;
  color: var(--souq-red);
}
.souq-hero p{
  font-size: 17px;
  line-height: 1.7;
  color: var(--souq-gray);
  max-width: 46ch;
  margin-bottom: 32px;
}
.souq-hero-ctas{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.souq-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.souq-btn-primary{
  background: var(--souq-gold);
  color: var(--souq-white);
  box-shadow: 0 10px 24px rgba(11,74,36,0.25);
}
.souq-btn-primary:hover{ transform: translateY(-3px); color: var(--souq-white); }
.souq-btn-ghost{
  background: transparent;
  color: var(--souq-ink);
  border: 1.5px solid rgba(20,35,27,0.25);
}
.souq-btn-ghost:hover{ background: rgba(20,35,27,0.05); transform: translateY(-3px); color:var(--souq-ink); }

.souq-hero-stats{
  display: flex;
  gap: 28px;
  margin-top: 42px;
}
.souq-hero-stats div{ text-align: left; }
.souq-hero-stats strong{
  display: block;
  font-family: var(--souq-font-head);
  font-size: 26px;
  color: var(--souq-cedar);
}
.souq-hero-stats span{
  font-size: 12.5px;
  color: var(--souq-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.souq-hero-visual{
  position: relative;
  border-radius: 24px;
  overflow: visible;
  aspect-ratio: 4/3.4;
}
.souq-hero-img-back{
  width: 100%; height: 100%; object-fit: cover; display:block;
  border-radius: 24px;
  box-shadow: var(--souq-shadow-lg);
}
.souq-hero-img-front{
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 58%;
  aspect-ratio: 4/3.2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(11,74,36,0.28);
  border: 4px solid var(--souq-cream);
  will-change: transform;
}
.souq-hero-img-front img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.souq-hero-img-tag{
  position: absolute;
  left: 12px; bottom: 12px;
  background: var(--souq-red);
  color: var(--souq-white);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 900px){
  .souq-hero-visual{ overflow: visible; margin-bottom: 40px; }
}

@media (max-width: 900px){
  .souq-hero-inner{ grid-template-columns: 1fr; }
  .souq-hero{ padding: 64px 6vw 80px; }
}

/* ---- Section shell ---- */
.souq-section{ padding: 88px 6vw; max-width: 1240px; margin: 0 auto; }
.souq-section-head{ text-align: center; max-width: 620px; margin: 0 auto 48px; }
.souq-section-head .souq-kicker{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color: var(--souq-red); margin-bottom: 12px;
}
.souq-section-head h2{ font-size: clamp(26px,3vw,38px); margin: 0 0 12px; }
.souq-section-head p{ color: var(--souq-gray); font-size: 15.5px; line-height:1.7; }

/* ---- Bento verticals grid (Buy&Sell / Hire a Fixer) ---- */
.souq-verticals{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.souq-vertical-card{
  position: relative;
  border-radius: 22px;
  padding: 40px 34px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: var(--souq-shadow);
}
.souq-vertical-card.buy{ background: var(--souq-white); border: 1.5px solid rgba(20,35,27,0.12); }
.souq-vertical-card.hire{ background: var(--souq-white); border: 1.5px solid rgba(11,74,36,0.14); }
.souq-vertical-card i{ font-size: 40px; color: var(--souq-cedar); margin-bottom: 16px; }
body.souq-redesign .souq-vertical-card h3{ color: var(--souq-ink); font-size: 26px; margin: 0 0 8px; }
.souq-vertical-card p{ color: var(--souq-gray); margin: 0 0 20px; max-width: 34ch; }
.souq-vertical-card a{
  align-self: flex-start;
  color: var(--souq-cedar);
  font-weight: 700;
  text-decoration: none;
  display:inline-flex; align-items:center; gap:8px;
}
.souq-vertical-card a i{ font-size: 18px; margin: 0; color: var(--souq-cedar); transition: transform .2s ease; }
.souq-vertical-card a:hover i{ transform: translateX(4px); }

@media (max-width: 800px){ .souq-verticals{ grid-template-columns: 1fr; } }

/* ---- Category cards grid ---- */
.souq-cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap: 20px;
}
.souq-cat-card{
  background: var(--souq-white);
  border-radius: var(--souq-radius);
  padding: 26px 18px;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--souq-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.souq-cat-card:hover{ transform: translateY(-5px); box-shadow: var(--souq-shadow-lg); }
.souq-cat-card i{ font-size: 30px; color: var(--souq-cedar); }
.souq-cat-card span{
  display:block; margin-top:12px; font-weight:700; color: var(--souq-ink); font-size: 14.5px;
}

/* ---- How it works ---- */
.souq-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.souq-step{ text-align:center; padding: 8px 12px; }
.souq-step .souq-step-num{
  width:52px; height:52px; border-radius:50%;
  background: var(--souq-gold); color: var(--souq-navy);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--souq-font-head); font-weight:700; font-size:20px;
  margin: 0 auto 18px;
}
.souq-step h3{ font-size:18px; margin: 0 0 8px; }
.souq-step p{ color: var(--souq-gray); font-size: 14.5px; line-height:1.6; }
@media (max-width: 800px){ .souq-steps{ grid-template-columns: 1fr; } }

/* ---- Vendor CTA band ---- */
.souq-vendor-cta{
  background: var(--souq-white);
  border: 1.5px solid rgba(11,74,36,0.16);
  border-radius: 26px;
  padding: 56px 6vw;
  color: var(--souq-ink);
  display:flex; align-items:center; justify-content:space-between; gap: 32px;
  flex-wrap: wrap;
}
body.souq-redesign .souq-vendor-cta h2{ color: var(--souq-ink); margin:0 0 8px; font-size: 28px; }
.souq-vendor-cta p{ color: var(--souq-gray); margin:0; max-width: 50ch; }

/* ---- Trust bar ---- */
.souq-trust{
  display:flex; flex-wrap:wrap; gap: 34px; justify-content:center;
  padding: 30px 6vw; background: var(--souq-white); border-top:1px solid var(--souq-gray-light); border-bottom:1px solid var(--souq-gray-light);
}
.souq-trust div{ display:flex; align-items:center; gap:10px; color: var(--souq-navy); font-weight:600; font-size:14px; }
.souq-trust i{ color: var(--souq-red); font-size: 20px; }