/* ============================================================
   home.css — Complete Homepage Visual Overhaul
   Moroccan Farm Aesthetic: Deep Forest Green + Saffron Gold
   Arabic RTL first, mobile-first, smooth animations
   ============================================================ */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cairo:wght@300;400;500;600;700;900&display=swap');

/* ===== ROOT OVERRIDES ===== */
:root {
  --home-green:       #047857;
  --home-green-mid:   #059669;
  --home-green-light: #10b981;
  --home-gold:        #ca8a04;
  --home-gold-light:  #eab308;
  --home-gold-pale:   #fef3c7;
  --home-cream:       #fafbfa;
  --home-cream-dark:  #eef1ef;
  --home-terra:       #047857;
  --home-terra-light: #059669;
  --home-sky:         #9db8c9;
  --home-white:       #ffffff;
}

/* ===== BODY & FONTS ===== */
body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--home-cream);
  color: #1a2318;
}

h1, h2, h3 {
  font-family: 'Amiri', serif;
  line-height: 1.2;
}

/* ===== NAVBAR REDESIGN ===== */
.navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  width: 100%;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(4, 120, 87, 0.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  height: 68px;
  display: flex;
  align-items: center;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 30px rgba(4, 120, 87, 0.14);
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo */
.navbar .logo {
  font-family: 'Amiri', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--home-green);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.navbar .logo:hover {
  color: var(--home-gold);
}

/* Nav Links */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2a3a2e;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.navbar-link:hover,
.navbar-link.active {
  background: rgba(4, 120, 87, 0.1);
  color: var(--home-green);
}

.navbar-link.active {
  background: rgba(4, 120, 87, 0.12);
  color: var(--home-green);
  font-weight: 700;
}

/* Language selector pill */
.language-selector {
  position: relative;
}

.language-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid rgba(4, 120, 87, 0.25);
  background: var(--home-cream);
  color: var(--home-green);
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.language-button:hover {
  border-color: var(--home-green);
  background: rgba(4, 120, 87, 0.06);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(4, 120, 87, 0.25);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--home-green);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== WHATSAPP FAB ===== */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.75), 0 0 0 12px rgba(37,211,102,0.12); }
}

.whatsapp-fab {
  position: fixed;
  bottom: 2rem;
  inset-inline-end: 2rem;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  z-index: 9999;
  animation: waPulse 2.4s ease-in-out infinite;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.1);
}
.whatsapp-fab svg {
  width: 32px;
  height: 32px;
  fill: white;
}

/* ===== HERO SECTION ===== */
.home-hero {
  position: relative;
  min-height: 100vh;
  padding-top: 68px;
  background: linear-gradient(180deg,
    #9db8c9 0%,
    #c3d4de 25%,
    #d8dfc9 60%,
    #10b981 85%,
    #047857 100%
  );
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* SVG landscape background */
.hero-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  object-fit: cover;
  object-position: bottom center;
  pointer-events: none;
  z-index: 0;
}

/* Wave divider at bottom */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 2;
  line-height: 0;
}
.hero-wave svg {
  display: block;
  width: 100%;
}

.hero-content-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-text-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(202, 138, 4, 0.4);
  color: var(--home-terra);
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  width: fit-content;
}

.hero-h1 {
  font-family: 'Amiri', serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.18;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35), 0 0 60px rgba(4,120,87,0.4);
  margin: 0;
}

.hero-desc {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.93);
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
  max-width: 52ch;
  margin: 0;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-chips span {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(4, 120, 87, 0.2);
  color: #1a3a22;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.hero-chips span:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

/* Hero CTA buttons */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--home-gold);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 20px rgba(202, 138, 4, 0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover {
  background: #b87d08;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(202, 138, 4, 0.55);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  color: var(--home-green);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(4, 120, 87, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.btn-hero-secondary:hover {
  background: white;
  transform: translateY(-3px);
}

/* Hero stats overlay */
.hero-stats-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 16px;
  padding: 0.9rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 200px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.hero-stat-card:hover {
  transform: translateY(-3px);
}
.hero-stat-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.hero-stat-num {
  font-family: 'Cairo', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--home-green);
  line-height: 1;
}
.hero-stat-label {
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  color: #3a5040;
  margin-top: 0.1rem;
}

/* ===== SECTION BASE ===== */
.home-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.home-section-sm {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.home-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

.home-eyebrow {
  display: inline-block;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-gold);
  margin-bottom: 0.6rem;
}

.home-section-title {
  font-family: 'Amiri', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  color: var(--home-green);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.home-section-desc {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: #4a5e50;
  line-height: 1.75;
  max-width: 60ch;
}

/* ===== STATS BAR ===== */
.stats-bar-section {
  background: var(--home-green);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.home-stat {
  text-align: center;
  padding: 1rem;
  border-inline-end: 1px solid rgba(255,255,255,0.15);
}
.home-stat:last-child {
  border-inline-end: none;
}

.home-stat-num {
  display: block;
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--home-gold-light);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.home-stat-label {
  display: block;
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

/* ===== EID MEGA SECTION ===== */
.eid-mega-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fcd34d 70%, #fbbf24 100%);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* Crescent decorative background */
.eid-crescent-bg {
  position: absolute;
  top: -2rem;
  inset-inline-end: -3rem;
  font-size: 18rem;
  color: rgba(202, 138, 4, 0.12);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

.eid-mega-section .home-container {
  position: relative;
  z-index: 1;
}

.eid-header {
  text-align: center;
  margin-bottom: 3rem;
}

.eid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(4, 120, 87, 0.12);
  border: 1.5px solid rgba(4, 120, 87, 0.3);
  color: var(--home-green);
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.eid-header .home-section-title {
  color: #5c3200;
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.6rem;
}

.eid-header .home-section-desc {
  color: #7a4800;
  margin: 0 auto;
  text-align: center;
}

/* Sheep breed cards */
.sheep-breeds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.sheep-breed-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(202, 138, 4, 0.3);
  border-radius: 20px;
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 16px rgba(202, 138, 4, 0.1);
}
.sheep-breed-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(202, 138, 4, 0.22);
}

.sheep-breed-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.75rem;
}

.sheep-breed-card h3 {
  font-family: 'Amiri', serif;
  font-size: 1.3rem;
  color: #5c3200;
  margin: 0 0 0.5rem;
}

.sheep-breed-card p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.84rem;
  color: #7a4800;
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

.sheep-breed-tag {
  display: inline-block;
  background: var(--home-gold);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

/* Eid guarantees row */
.eid-guarantees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.eid-guarantee-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a3000;
}

.eid-guarantee-check {
  width: 24px;
  height: 24px;
  background: var(--home-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Eid action area */
.eid-action {
  text-align: center;
}

@keyframes eidPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(4,120,87,0.4); }
  50%       { box-shadow: 0 8px 35px rgba(4,120,87,0.6), 0 0 0 10px rgba(4,120,87,0.1); }
}

.btn-eid-mega {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--home-green);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  text-decoration: none;
  animation: eidPulse 2s ease-in-out infinite;
  transition: background 0.2s, transform 0.2s;
}
.btn-eid-mega:hover {
  background: #155030;
  transform: translateY(-3px);
}

.eid-urgency {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: #7a4800;
  font-weight: 700;
  margin-top: 0.75rem;
}

/* ===== PRODUCTS SECTION ===== */
.products-section {
  background: var(--home-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.product-card {
  border-radius: 20px;
  padding: 2rem 1.5rem;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.13);
}

/* Card color themes */
.product-card--sheep {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(202, 138, 4, 0.35);
}
.product-card--cattle {
  background: linear-gradient(135deg, #f0faf4, #d8f0e3);
  border-color: rgba(4, 120, 87, 0.25);
}
.product-card--horses {
  background: linear-gradient(135deg, #fdf4ee, #fde8d5);
  border-color: rgba(4, 120, 87, 0.25);
}
.product-card--poultry {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  border-color: rgba(234, 88, 12, 0.25);
}
.product-card--rabbits {
  background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
  border-color: rgba(147, 51, 234, 0.2);
}
.product-card--land {
  background: linear-gradient(135deg, #f0f9ff, #bae6fd);
  border-color: rgba(14, 116, 144, 0.25);
}
.product-card--feed {
  background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
  border-color: rgba(22, 163, 74, 0.25);
}

.product-card-icon-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
}

/* Icon wrap colors per card */
.product-card--sheep    .product-card-icon-wrap { background: rgba(202,138,4,0.15); }
.product-card--cattle   .product-card-icon-wrap { background: rgba(4,120,87,0.12); }
.product-card--horses   .product-card-icon-wrap { background: rgba(4,120,87,0.12); }
.product-card--poultry  .product-card-icon-wrap { background: rgba(234,88,12,0.12); }
.product-card--rabbits  .product-card-icon-wrap { background: rgba(147,51,234,0.1); }
.product-card--land     .product-card-icon-wrap { background: rgba(14,116,144,0.12); }
.product-card--feed     .product-card-icon-wrap { background: rgba(22,163,74,0.12); }

.product-card-title {
  font-family: 'Amiri', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a2318;
  margin: 0;
  line-height: 1.3;
}

.product-card-desc {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: #3a4e40;
  line-height: 1.68;
  margin: 0;
  flex: 1;
}

.product-card-cta {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--home-green);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ===== HOW IT WORKS ===== */
.how-section {
  background: var(--home-cream-dark);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3rem;
  position: relative;
}

/* Connecting line */
.how-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  inset-inline-start: 12.5%;
  width: 75%;
  height: 2px;
  background: linear-gradient(to left, var(--home-green), var(--home-gold));
  z-index: 0;
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.how-step-num {
  width: 80px;
  height: 80px;
  background: var(--home-green);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 18px rgba(4,120,87,0.35);
  border: 4px solid var(--home-cream-dark);
  transition: transform 0.2s, background 0.2s;
}
.how-step:hover .how-step-num {
  transform: scale(1.1);
  background: var(--home-gold);
}

.how-step-title {
  font-family: 'Amiri', serif;
  font-size: 1.1rem;
  color: var(--home-green);
  margin: 0 0 0.5rem;
}
.how-step-desc {
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  color: #3a5040;
  line-height: 1.65;
  margin: 0;
}

/* ===== WHY US ===== */
.why-us-section {
  background: var(--home-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

.why-us-card {
  background: white;
  border: 1.5px solid rgba(4, 120, 87, 0.1);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s;
}
.why-us-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(4,120,87,0.12);
  border-color: rgba(4,120,87,0.25);
}

.why-us-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.why-us-title {
  font-family: 'Amiri', serif;
  font-size: 1.3rem;
  color: var(--home-green);
  margin: 0 0 0.6rem;
}

.why-us-desc {
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  color: #3a5040;
  line-height: 1.7;
  margin: 0;
}

/* ===== QUICK REQUEST FORM ===== */
.quick-request-section {
  background: var(--home-green);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.quick-request-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
}

.quick-request-text h2 {
  color: white;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

.quick-request-text p {
  color: rgba(255,255,255,0.8);
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
}

.quick-request-form-card {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

/* Form elements */
.hf-label {
  display: block;
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--home-green);
  margin-bottom: 0.35rem;
}

.hf-input,
.hf-select,
.hf-textarea {
  width: 100%;
  font-family: 'Cairo', sans-serif;
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid rgba(4,120,87,0.2);
  border-radius: 10px;
  background: var(--home-cream);
  color: #1a2318;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.hf-input:focus,
.hf-select:focus,
.hf-textarea:focus {
  outline: none;
  border-color: var(--home-green);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.12);
}

.hf-textarea {
  resize: vertical;
  min-height: 90px;
}

.hf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hf-form-group {
  margin-bottom: 1rem;
}

.btn-submit-home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--home-green);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-submit-home:hover {
  background: #155030;
  transform: translateY(-2px);
}

/* ===== FAQ SECTION ===== */
.faq-section {
  background: var(--home-cream-dark);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.faq-list {
  max-width: 800px;
  margin: 2.5rem auto 0;
}

.faq-item {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 16px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item:hover {
  box-shadow: 0 4px 20px rgba(4,120,87,0.1);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  font-family: 'Amiri', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--home-green);
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-caret {
  width: 28px;
  height: 28px;
  background: rgba(4,120,87,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s;
}
.faq-item[open] .faq-caret {
  transform: rotate(180deg);
  background: var(--home-green);
  color: white;
}

.faq-body {
  padding: 0 1.5rem 1.2rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #3a5040;
  border-top: 1px solid rgba(4,120,87,0.08);
}

/* ===== FOOTER REDESIGN ===== */
.footer {
  background: #0f3a22;
  color: rgba(255,255,255,0.9);
}

.footer-main {
  padding: clamp(3rem, 6vw, 5rem) 0;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand-name {
  font-family: 'Amiri', serif;
  font-size: 1.8rem;
  color: var(--home-gold-light);
  margin: 0 0 0.75rem;
}

.footer-brand-desc {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.footer-section-heading {
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--home-gold-light);
  margin: 0 0 1rem;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links-list a {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links-list a:hover {
  color: var(--home-gold-light);
}

.footer-contact-item {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.68);
  margin-bottom: 0.5rem;
}
.footer-contact-item a {
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-item a:hover {
  color: var(--home-gold-light);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 2rem;
  text-align: center;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-copyright {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
}

/* ===== FADE-IN ANIMATIONS ===== */
/* Scroll-triggered via viewport-animations.js — adds .visible on intersect */
/* Progressive enhancement: visible by default. Only hidden once JS is
   confirmed (html.js), so the page is fully readable with JS disabled. */
.fade-in-up { opacity: 1; transform: none; }

.js .fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}

.js .fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grids */
.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.19s; }
.delay-4 { transition-delay: 0.26s; }
.delay-5 { transition-delay: 0.33s; }
.delay-6 { transition-delay: 0.40s; }

/* Reduced motion: show immediately */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== MOBILE MENU FULLSCREEN ===== */
@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
  }

  .navbar-menu {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    padding: 2rem;
  }

  [dir="rtl"] .navbar-menu {
    transform: translateX(-100%);
  }

  .navbar-menu.active {
    transform: translateX(0);
  }

  .navbar-menu .navbar-link {
    font-size: 1.5rem;
    font-family: 'Amiri', serif;
    padding: 0.7rem 1.5rem;
    width: 100%;
    justify-content: center;
  }

  .hero-content-wrap {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem 6rem;
    gap: 2rem;
  }

  .hero-stats-col {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-stat-card {
    min-width: 155px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sheep-breeds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eid-guarantees {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .how-steps::before {
    display: none;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-inline: auto;
  }

  .quick-request-inner {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-stat {
    border-inline-end: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .home-stat:nth-child(even) {
    border-inline-end: none;
  }
}

@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .sheep-breeds-grid {
    grid-template-columns: 1fr;
  }

  .eid-guarantees {
    grid-template-columns: 1fr;
  }

  .how-steps {
    grid-template-columns: 1fr;
  }

  .hf-form-row {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== RTL FIXES ===== */
[dir="rtl"] .hero-chips { direction: rtl; }
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .how-steps::before {
  inset-inline-start: 12.5%;
  inset-inline-end: auto;
}

/* ===== DARK MODE SAFEGUARD ===== */
/* Ensure no [data-theme="dark"] styles bleed in */
[data-theme="dark"] .home-hero,
[data-theme="dark"] .eid-mega-section,
[data-theme="dark"] .products-section,
[data-theme="dark"] .stats-bar-section,
[data-theme="dark"] .how-section,
[data-theme="dark"] .why-us-section,
[data-theme="dark"] .quick-request-section,
[data-theme="dark"] .faq-section {
  /* These sections have explicit backgrounds — no dark mode override needed */
  background: initial;
}

/* ===== SECTION BLOCK OVERRIDE ===== */
/* Override existing .section-block padding to match home.css sections */
.home-hero ~ main .section-block {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* ===== GLASS SECTION ===== */
.glass-section {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
}

/* ===== CTA FINAL BANNER ===== */
.cta-final-section {
  background: linear-gradient(135deg, var(--home-green) 0%, #155030 100%);
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
}

.cta-final-section h2 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 0.8rem;
}

.cta-final-section p {
  color: rgba(255,255,255,0.8);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  max-width: 55ch;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.cta-final-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color: var(--home-green);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-cta-white:hover {
  background: var(--home-gold-pale);
  transform: translateY(-3px);
}

.btn-cta-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.55);
  transition: background 0.2s, transform 0.2s;
}
.btn-cta-outline-white:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}

/* ===== MOBILE STICKY CTA (bottom bar) ===== */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid rgba(4,120,87,0.15);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 800;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }

  .mobile-sticky-cta__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem;
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-sticky-cta__btn--primary {
    background: var(--home-green);
    color: white;
  }

  .mobile-sticky-cta__btn--secondary {
    background: rgba(4,120,87,0.08);
    color: var(--home-green);
    border: 1.5px solid rgba(4,120,87,0.2);
  }

  /* Move WhatsApp FAB up above mobile sticky bar */
  .whatsapp-fab {
    bottom: 5.5rem;
  }
}

/* ==========================================================
   GLOBAL INTERIOR PAGE STYLES
   Applied to business.html, contact.html, how.html, etc.
   ========================================================== */

/* Body baseline for all pages */
body {
  font-family: 'Cairo', 'Inter', sans-serif;
  background-color: var(--home-cream);
  color: #1a2318;
}

/* All pages: page-main area */
.page-main {
  background: var(--home-cream);
  padding-top: 68px;
}

/* ---- Page Hero (interior pages) ---- */
.page-hero,
.section-hero {
  background: linear-gradient(160deg, #0f3a22 0%, #047857 45%, #059669 100%) !important;
  padding-top: calc(68px + 3.5rem);
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

.page-hero::before,
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(202,138,4,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero .hero-tag,
.page-hero .hero-content .hero-tag {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
}

.page-hero h1,
.page-hero .hero-title,
.section-hero h1,
.section-hero .hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

.page-hero .hero-subtitle,
.section-hero .hero-subtitle,
.page-hero p,
.section-hero p {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(202,138,4,0.6) !important;
}

.page-hero .hero-content,
.section-hero .hero-content {
  color: white;
}

/* Consistent section backgrounds */
.section-block {
  background: var(--home-cream);
}

.bg-tertiary-50,
.bg-surface-alt,
section.bg-surface-alt {
  background: #f2faf5 !important;
}

.bg-surface,
section.bg-surface {
  background: var(--home-cream) !important;
}

/* Glass sections on interior pages */
.glass-section {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(4,120,87,0.08);
  border-bottom: 1px solid rgba(4,120,87,0.08);
}

/* ---- Section headers (interior) ---- */
.section-eyebrow {
  color: var(--home-gold) !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Amiri', serif !important;
  color: var(--home-green) !important;
  line-height: 1.2 !important;
}

.section-subtitle {
  font-family: 'Cairo', sans-serif;
  color: #3a5040 !important;
}

/* ---- Cards (interior) ---- */
.card,
.service-card,
.trust-card,
.contact-card,
.listing-card,
.feature-card {
  background: #ffffff;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover,
.service-card:hover,
.trust-card:hover,
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(4,120,87,0.12);
  border-color: rgba(4,120,87,0.2);
}

.service-title {
  font-family: 'Amiri', serif !important;
  color: var(--home-green) !important;
}

.card-icon {
  background: rgba(4,120,87,0.08) !important;
  border-color: rgba(4,120,87,0.15) !important;
  color: var(--home-green) !important;
  border-radius: 12px;
}

/* Market role cards */
.market-role-card {
  background: linear-gradient(135deg, #f0faf4, #e0f5e8) !important;
  border-color: rgba(4,120,87,0.2) !important;
}

/* ---- Buttons (interior) ---- */
.btn-primary {
  background: var(--home-green) !important;
  border-color: var(--home-green) !important;
  color: #fff !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(4,120,87,0.3);
}
.btn-primary:hover {
  background: #155030 !important;
  border-color: #155030 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4,120,87,0.4);
}

.btn-outline {
  color: var(--home-green) !important;
  border-color: rgba(4,120,87,0.4) !important;
  background: transparent !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  border-radius: 999px;
}
.btn-outline:hover {
  background: rgba(4,120,87,0.06) !important;
  border-color: var(--home-green) !important;
}

.btn-glass {
  background: rgba(255,255,255,0.85) !important;
  color: var(--home-green) !important;
  border-color: rgba(4,120,87,0.3) !important;
  border-radius: 999px;
}

/* ---- Step cards ---- */
.step-card {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 16px;
}
.step-number {
  background: var(--home-green) !important;
  color: white !important;
  font-weight: 900;
}

/* ---- Trust cards ---- */
.trust-card h3 {
  font-family: 'Amiri', serif;
  color: var(--home-green);
}

/* ---- FAQ details ---- */
details.group {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1) !important;
  border-radius: 14px !important;
}
details.group summary {
  font-family: 'Amiri', serif;
  color: var(--home-green);
}

/* ---- Related link cards ---- */
.related-link-card {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 16px;
}
.related-link-card:hover {
  border-color: rgba(4,120,87,0.25);
  box-shadow: 0 6px 24px rgba(4,120,87,0.1);
}
.related-link-card h3 {
  font-family: 'Amiri', serif;
  color: var(--home-green);
}

/* ---- Forms ---- */
.form-input,
.form-textarea,
.form-select {
  border-color: rgba(4,120,87,0.18) !important;
  background: var(--home-cream) !important;
  border-radius: 10px !important;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--home-green) !important;
  box-shadow: 0 0 0 3px rgba(4,120,87,0.12) !important;
  outline: none;
}
.form-label {
  color: var(--home-green) !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}

/* ---- CTA sections ---- */
.cta-section.section-block {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border-top: 3px solid rgba(202,138,4,0.4) !important;
  border-bottom: 3px solid rgba(202,138,4,0.4) !important;
}
.cta-section h2,
.cta-section .section-title {
  color: #5c3200 !important;
  font-family: 'Amiri', serif !important;
}

/* ---- Gallery cards ---- */
.gallery-card {
  border-radius: 16px;
  border-color: rgba(4,120,87,0.12) !important;
}

/* ---- Timeline ---- */
.timeline-badge {
  border-color: var(--home-green) !important;
  color: var(--home-green) !important;
}
.timeline-content {
  background: white;
  border-color: rgba(4,120,87,0.1) !important;
  border-radius: 14px !important;
}
.timeline-content:hover {
  border-color: rgba(4,120,87,0.25) !important;
  box-shadow: 0 6px 24px rgba(4,120,87,0.1) !important;
}

/* ---- Service area list ---- */
.service-area-list li {
  background: white;
  border-color: rgba(4,120,87,0.1) !important;
  border-radius: 10px;
}

/* ---- Map ---- */
.map-card, .map-details {
  background: white;
  border-color: rgba(4,120,87,0.1) !important;
  border-radius: 16px;
}

/* ---- Contact info ---- */
.contact-card {
  background: white;
  border-radius: 20px;
  border-color: rgba(4,120,87,0.12) !important;
}
.contact-card-eyebrow {
  color: var(--home-gold) !important;
}
.contact-card-title {
  font-family: 'Amiri', serif;
  color: var(--home-green);
}

/* Error 404 page */
.error-404-card {
  background: white;
  border-radius: 24px;
  border-color: rgba(4,120,87,0.1) !important;
}
.error-404-code {
  color: var(--home-green) !important;
}

/* ---- Stat items ---- */
.stat-item .text-4xl,
.stat-item [class*="text-4xl"] {
  color: var(--home-green) !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
}

/* ---- Logo (all pages) ---- */
.logo {
  color: var(--home-green) !important;
  font-family: 'Amiri', serif !important;
}

/* ---- Active navbar link ---- */
.navbar-link.active {
  background: var(--home-green) !important;
  color: white !important;
}

/* ---- Language dropdown ---- */
.language-dropdown {
  border-radius: 14px !important;
  border-color: rgba(4,120,87,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
.language-option:hover {
  background: rgba(4,120,87,0.06) !important;
  color: var(--home-green) !important;
}

/* ---- Quick request card (homepage) ---- */
.quick-request-card {
  background: white;
  border-color: rgba(4,120,87,0.1) !important;
  border-radius: 20px;
}

/* ---- Mobile responsive interior ---- */
@media (max-width: 900px) {
  .page-hero,
  .section-hero {
    padding-top: calc(68px + 2rem);
    padding-bottom: 2.5rem;
  }
}

/* ---- Scrollbar (brand color) ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--home-cream); }
::-webkit-scrollbar-thumb { background: rgba(4,120,87,0.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--home-green); }

/* ==========================================================
   GLOBAL CONFLICT OVERRIDES
   Neutralize old CSS classes that conflict with new design
   ========================================================== */

/* Kill old scrolling wrapper backgrounds */
.luxury-scrolling-wrapper,
[data-theme="light"] .luxury-scrolling-wrapper,
[data-theme="dark"] .luxury-scrolling-wrapper {
  background: var(--home-cream) !important;
}

/* Kill nav-tabs beige pill background — new navbar uses glass */
.navbar-menu.nav-tabs,
[data-theme="dark"] .navbar-menu.nav-tabs,
[data-theme="light"] .navbar-menu.nav-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure page-hero overrides old .page-hero and glass-section */
section.page-hero,
.section-hero.page-hero,
.section-block.page-hero {
  background: linear-gradient(160deg, #0f3a22 0%, #047857 45%, #059669 100%) !important;
  backdrop-filter: none !important;
}

/* Old hero frame image box on interior pages */
.page-hero-media,
.page-hero .hero-frame {
  display: none;
}

/* Remove old page-hero grid on interior pages so hero fills full width */
.page-hero-grid {
  display: block !important;
  max-width: 900px;
}

/* Kill body background-image from old component styles */
body {
  background-image: none !important;
}

/* Ensure main content areas don't inherit SVG background */
main {
  background: var(--home-cream) !important;
  background-image: none !important;
}

/* Fix old glass-section-alt used in some interior pages */
.glass-section-alt {
  background: #f2faf5 !important;
  backdrop-filter: none !important;
}

/* Fix .bg-tertiary-50 used as section backgrounds */
.bg-tertiary-50 {
  background: #f0faf4 !important;
}

/* Consistent section spacing */
.section-block {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Fix old hero-frame on interior pages (SVG images that are redundant) */
.page-hero .hero-frame img {
  display: none;
}

/* Make sure mobile-sticky-cta uses new brand colors */
.mobile-sticky-cta {
  background: white !important;
  border-top: 1px solid rgba(4,120,87,0.15) !important;
}
.mobile-sticky-cta__btn--primary {
  background: var(--home-green) !important;
  color: white !important;
}
.mobile-sticky-cta__btn--secondary {
  background: rgba(4,120,87,0.08) !important;
  color: var(--home-green) !important;
  border-color: rgba(4,120,87,0.2) !important;
}

/* Kill site.css CTA section styling that fights home.css */
.cta-section.section-block {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
}

/* Fix old about-content image */
.about-image {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* Section headers */
h1.hero-title,
.section-block h1 {
  font-family: 'Amiri', serif !important;
}

/* Fix old step-card numbers */
.step-number {
  background: var(--home-green) !important;
  color: white !important;
}

/* Fix gallery cards on places page */
.gallery-card {
  border-radius: 16px;
}

/* Fix listing cards */
.listing-card {
  border-radius: 16px;
  border: 1.5px solid rgba(4,120,87,0.1) !important;
}

/* Fix old market-role-card */
.market-role-card {
  background: linear-gradient(135deg, #f0faf4, #e0f5e8) !important;
  border: 1.5px solid rgba(4,120,87,0.2) !important;
}

/* service description text */
.service-description {
  color: #3a5040 !important;
  font-family: 'Cairo', sans-serif;
}

/* ==========================================================
   NEW MARKETPLACE SECTIONS — v8.0
   Categories, Listing Cards, Search, Testimonials, etc.
   ========================================================== */

/* ---- Hero H1 accent ---- */
.hero-h1-accent {
  color: var(--home-gold-light);
  display: inline;
}

/* ---- Navbar CTA button ---- */
.navbar-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--home-green);
  color: white !important;
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.navbar-cta-btn:hover {
  background: #155030;
  transform: translateY(-1px);
}

/* ---- Eid nav link (golden highlight) ---- */
.navbar-link--eid {
  color: var(--home-gold) !important;
  font-weight: 800 !important;
}
.navbar-link--eid:hover,
.navbar-link--eid.active {
  background: rgba(202,138,4,0.12) !important;
  color: #9a6700 !important;
}

/* ---- Hero Search Bar ---- */
.hero-search-wrap {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.6);
  margin-top: 0.5rem;
  max-width: 580px;
}

.search-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(4,120,87,0.1);
  padding-bottom: 0.75rem;
}

.search-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a5e50;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.search-tab:hover { background: rgba(4,120,87,0.07); color: var(--home-green); }
.search-tab.active {
  background: var(--home-green);
  color: white;
}

.search-input-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  inset-inline-start: 0.85rem;
  color: #6b8f70;
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  font-family: 'Cairo', sans-serif;
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem 0.7rem 2.8rem;
  border: 1.5px solid rgba(4,120,87,0.2);
  border-radius: 12px;
  background: var(--home-cream);
  color: #1a2318;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
[dir="rtl"] .search-input { padding: 0.7rem 2.8rem 0.7rem 0.9rem; }
.search-input:focus {
  outline: none;
  border-color: var(--home-green);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.1);
}

.search-btn {
  padding: 0.7rem 1.4rem;
  background: var(--home-green);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.search-btn:hover { background: #155030; transform: translateY(-1px); }

.search-quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  color: #5a7060;
}
.search-quicklinks span { font-weight: 700; color: #3a5040; }
.search-quicklinks a {
  color: var(--home-green);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  background: rgba(4,120,87,0.07);
  border-radius: 999px;
  transition: background 0.2s;
  font-weight: 600;
}
.search-quicklinks a:hover { background: rgba(4,120,87,0.15); }

/* ---- Hero stat card Eid variant ---- */
.hero-stat-card--eid {
  background: rgba(254,243,199,0.95) !important;
  border-color: rgba(202,138,4,0.35) !important;
}
.hero-stat-card--eid .hero-stat-num { color: #9a6700 !important; }

/* ---- CATEGORIES SECTION ---- */
.categories-section {
  background: var(--home-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.category-card {
  position: relative;
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: hidden;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(4,120,87,0.12);
  border-color: rgba(4,120,87,0.25);
}

.category-card--featured {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(202,138,4,0.35) !important;
}
.category-card--featured:hover {
  box-shadow: 0 12px 36px rgba(202,138,4,0.2) !important;
  border-color: rgba(202,138,4,0.5) !important;
}

.category-card-badge {
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  background: var(--home-gold);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.category-card-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.category-card-content h3 {
  font-family: 'Amiri', serif;
  font-size: 1.15rem;
  color: var(--home-green);
  margin: 0 0 0.4rem;
}
.category-card-content p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  color: #4a5e50;
  line-height: 1.55;
  margin: 0 0 0.7rem;
}

.category-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.category-card-tags span {
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--home-green);
  background: rgba(4,120,87,0.07);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.category-card--eid .category-card-tags span {
  color: #9a6700;
  background: rgba(202,138,4,0.1);
}

.category-card-arrow {
  font-size: 1.1rem;
  color: rgba(4,120,87,0.4);
  flex-shrink: 0;
  margin-top: 0.2rem;
  transition: transform 0.2s, color 0.2s;
}
.category-card:hover .category-card-arrow {
  color: var(--home-green);
  transform: translateX(-4px);
}
[dir="rtl"] .category-card:hover .category-card-arrow {
  transform: translateX(4px);
}

/* Category color variants */
.category-card--horses { border-color: rgba(4,120,87,0.15); }
.category-card--horses:hover { border-color: rgba(4,120,87,0.3); box-shadow: 0 12px 36px rgba(4,120,87,0.1); }
.category-card--horses .category-card-content h3 { color: #8b4500; }
.category-card--horses .category-card-tags span { color: #8b4500; background: rgba(4,120,87,0.08); }

.category-card--directory { border-color: rgba(99,102,241,0.15); }
.category-card--directory:hover { border-color: rgba(99,102,241,0.3); }
.category-card--directory .category-card-content h3 { color: #3730a3; }
.category-card--directory .category-card-tags span { color: #3730a3; background: rgba(99,102,241,0.07); }

/* ---- LISTINGS SECTION ---- */
.listings-section {
  background: var(--home-cream-dark);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.listings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.listings-tabs {
  display: flex;
  gap: 0.35rem;
  background: white;
  border: 1px solid rgba(4,120,87,0.1);
  border-radius: 999px;
  padding: 0.3rem;
  flex-shrink: 0;
}

.listings-tab {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a5e50;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.listings-tab:hover { background: rgba(4,120,87,0.07); color: var(--home-green); }
.listings-tab.active { background: var(--home-green); color: white; }

.listings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* LISTING CARD */
.listing-card {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}
.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

.listing-card-image {
  position: relative;
  height: 168px;
  overflow: hidden;
  flex-shrink: 0;
}

.listing-card-image--land    { background: linear-gradient(135deg, #c8f0d0, #a8e0b8); }
.listing-card-image--sheep   { background: linear-gradient(135deg, #fef9e7, #fef0c0); }
.listing-card-image--cattle  { background: linear-gradient(135deg, #d8f0e8, #b8e8d0); }
.listing-card-image--farm    { background: linear-gradient(135deg, #d0ead8, #b8dfc8); }
.listing-card-image--horse   { background: linear-gradient(135deg, #fdf0e8, #f8ddc8); }
.listing-card-image--villa   { background: linear-gradient(135deg, #e8f4ff, #d0e8f8); }

.listing-card-image-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-card-image-inner svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-badge {
  position: absolute;
  top: 0.65rem;
  inset-inline-start: 0.65rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: white;
  backdrop-filter: blur(4px);
  z-index: 1;
}
.listing-badge--realestate { background: rgba(4,120,87,0.9); }
.listing-badge--livestock  { background: rgba(120,70,10,0.9); }
.listing-badge--eid        { background: rgba(180,83,9,0.9); }
.listing-badge--horses     { background: rgba(146,64,14,0.9); }

.listing-badge-featured,
.listing-badge-featured--new {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  z-index: 1;
}
.listing-badge-featured { background: var(--home-gold); color: white; }
.listing-badge-featured--new { background: #dc2626; color: white; }

.listing-card-body {
  padding: 1.1rem 1.25rem 0.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.listing-card-price {
  font-family: 'Cairo', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--home-green);
  line-height: 1.1;
}

.listing-card-title {
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a2318;
  margin: 0;
  line-height: 1.3;
}

.listing-card-location {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  color: #5a7060;
  font-weight: 500;
}

.listing-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.listing-card-specs span {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #3a5040;
  background: rgba(4,120,87,0.06);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.listing-card-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(4,120,87,0.07);
  background: rgba(4,120,87,0.02);
}

.listing-card-cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--home-green);
  color: white;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}
.listing-card-cta:hover { background: #155030; }
.listing-card-cta--eid { background: #047857; }
.listing-card-cta--eid:hover { background: #9a4010; }

.listing-card-whatsapp {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,211,102,0.1);
  border-radius: 50%;
  border: 1.5px solid rgba(37,211,102,0.3);
  text-decoration: none;
  transition: background 0.2s;
  flex-shrink: 0;
}
.listing-card-whatsapp:hover { background: rgba(37,211,102,0.2); }

.listings-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---- TESTIMONIALS ---- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(4,120,87,0.1);
}

.testimonial-stars {
  color: var(--home-gold);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.testimonial-text {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: #2a3a2e;
  line-height: 1.75;
  margin: 0;
  font-style: italic;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(4,120,87,0.08);
}
.testimonial-name {
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--home-green);
}
.testimonial-city {
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  color: #6b8f70;
}
.testimonial-city::before { content: '📍 '; }

/* ---- Quick request benefits list ---- */
.quick-request-benefits {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.quick-request-benefits li {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- Sheep breed specs row ---- */
.sheep-breed-specs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  justify-content: center;
}
.sheep-breed-specs span {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  color: #7a4800;
  background: rgba(202,138,4,0.1);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}

/* ---- Mobile sticky Eid button ---- */
.mobile-sticky-cta__btn--eid {
  background: linear-gradient(135deg, var(--home-gold), #047857) !important;
  color: white !important;
}

/* ---- Footer 4-column update ---- */
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 2.5rem !important;
  }
}

/* ======================================================
   INTERIOR PAGE TEMPLATES (eid, real-estate, livestock)
   ====================================================== */

/* Page header breadcrumb */
.page-breadcrumb {
  background: #0f3a22;
  padding: calc(68px + 1rem) 0 0.75rem;
}
.breadcrumb-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
}
.breadcrumb-inner a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-inner a:hover { color: var(--home-gold-light); }
.breadcrumb-inner span { color: rgba(255,255,255,0.35); }
.breadcrumb-inner strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* Category filter bar */
.category-filter-bar {
  background: white;
  border-bottom: 1px solid rgba(4,120,87,0.1);
  padding: 0.75rem 0;
  position: sticky;
  top: 68px;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.category-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-filter-inner::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(4,120,87,0.2);
  background: transparent;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a5040;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s;
}
.filter-chip:hover, .filter-chip.active {
  background: var(--home-green);
  border-color: var(--home-green);
  color: white;
}
.filter-chip--eid.active { background: var(--home-gold); border-color: var(--home-gold); }

/* Page listings grid (interior pages) */
.page-listings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Trust banner strip */
.trust-strip {
  background: var(--home-green);
  padding: 1.25rem 0;
}
.trust-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.trust-item-icon {
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Pricing table (for eid page) */
.pricing-table {
  background: white;
  border: 1.5px solid rgba(202,138,4,0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.pricing-table-header {
  background: linear-gradient(135deg, #047857, #059669);
  padding: 1.25rem 1.75rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-align: center;
}
.pricing-table-header div:first-child { text-align: right; }
[dir="rtl"] .pricing-table-header div:first-child { text-align: right; }

.pricing-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(4,120,87,0.07);
  align-items: center;
  transition: background 0.2s;
}
.pricing-table-row:last-child { border-bottom: none; }
.pricing-table-row:hover { background: rgba(4,120,87,0.03); }

.pricing-table-breed {
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--home-green);
}
.pricing-table-detail {
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  color: #4a5e50;
  text-align: center;
}
.pricing-table-price {
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #7a4800;
  text-align: center;
}

/* Process timeline (for how/eid pages) */
.process-steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}
.process-step-v {
  display: flex;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2rem;
}
.process-step-v:last-child { padding-bottom: 0; }
.process-step-v::before {
  content: '';
  position: absolute;
  inset-inline-start: 24px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--home-green), rgba(4,120,87,0.1));
}
.process-step-v:last-child::before { display: none; }
.process-step-v-num {
  width: 50px;
  height: 50px;
  background: var(--home-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cairo', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(4,120,87,0.35);
  position: relative;
  z-index: 1;
}
.process-step-v-content {
  padding-top: 0.4rem;
  flex: 1;
}
.process-step-v-title {
  font-family: 'Amiri', serif;
  font-size: 1.15rem;
  color: var(--home-green);
  margin: 0 0 0.35rem;
}
.process-step-v-desc {
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  color: #4a5e50;
  line-height: 1.7;
  margin: 0;
}

/* ======================================================
   RESPONSIVE — NEW SECTIONS
   ====================================================== */
@media (max-width: 1024px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .listings-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .page-listings-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
  .pricing-table-header,
  .pricing-table-row { grid-template-columns: 2fr 1fr 1fr; }
  .pricing-table-row > :last-child,
  .pricing-table-header > :last-child { display: none; }
}

@media (max-width: 900px) {
  .hero-search-wrap { max-width: 100%; }
  .listings-header { flex-direction: column; align-items: flex-start; }
  .trust-strip-inner { gap: 1rem 2rem; }
}

@media (max-width: 768px) {
  .categories-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .listings-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .testimonials-grid { grid-template-columns: 1fr !important; max-width: 480px; margin-inline: auto; }
  .listings-tabs { display: none; }
  .page-listings-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr; }
  .listings-grid { grid-template-columns: 1fr; }
  .search-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .hero-search-wrap { padding: 1rem; }
  .listings-cta { flex-direction: column; align-items: center; }
}

/* RTL adjustments for new sections */
[dir="rtl"] .search-icon {
  right: auto;
  left: 0.85rem;
}
[dir="rtl"] .search-input { padding-right: 2.8rem; padding-left: 0.9rem; }
[dir="rtl"] .category-card-arrow { transform: none; }
[dir="rtl"] .listing-card-location svg { margin-left: 0.3rem; }

/* =============================================================================
   LANGUAGE SWITCHER — v8.2
   In-page translation only. Clean design, works in RTL and LTR contexts.
============================================================================= */

/* ── Wrapper ── */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Trigger button ── */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.7rem;
  background: rgba(4,120,87,0.07);
  border: 1.5px solid rgba(4,120,87,0.22);
  border-radius: 999px;
  color: var(--home-green, #047857);
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
}
.lang-btn:hover {
  background: rgba(4,120,87,0.12);
  border-color: var(--home-green, #047857);
}
.lang-btn:focus-visible {
  outline: 2px solid var(--home-green, #047857);
  outline-offset: 2px;
}
.lang-btn[aria-expanded="true"] {
  background: rgba(4,120,87,0.12);
  border-color: var(--home-green, #047857);
}

.lang-btn-flag  { font-size: 1rem; line-height: 1; }
.lang-btn-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 1.5ch;
  text-align: center;
}

.lang-chevron {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.lang-btn[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* ── Dropdown list ── */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;              /* always align to right edge of button */
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #ffffff;
  border: 1.5px solid rgba(4,120,87,0.13);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 2100;
  direction: ltr;        /* always LTR inside dropdown for consistent flag+name order */

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity   0.18s cubic-bezier(0.16,1,0.3,1),
    transform 0.2s  cubic-bezier(0.16,1,0.3,1),
    visibility 0s   linear 0.2s;
  pointer-events: none;
}
[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
  transform-origin: top left;
}

.lang-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity   0.18s cubic-bezier(0.16,1,0.3,1),
    transform 0.2s  cubic-bezier(0.16,1,0.3,1),
    visibility 0s   linear 0s;
  pointer-events: auto;
}

/* ── Option buttons ── */
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a3a2e;
  cursor: pointer;
  text-align: left;
  direction: ltr;
  transition: background 0.14s, color 0.14s;
}
.lang-option:hover {
  background: rgba(4,120,87,0.07);
  color: var(--home-green, #047857);
}
.lang-option:focus-visible {
  outline: 2px solid var(--home-green, #047857);
  outline-offset: -2px;
}

.lang-option--active {
  background: rgba(4,120,87,0.09);
  color: var(--home-green, #047857);
  font-weight: 700;
}

.lang-option-flag {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.lang-option-name {
  flex: 1;
  line-height: 1.2;
}

.lang-option-check {
  margin-left: auto;
  color: var(--home-green, #047857);
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

/* ── Navbar scrolled state: make button more visible ── */
.navbar.scrolled .lang-btn {
  background: rgba(4,120,87,0.1);
}

/* ── Mobile responsive ── */
@media (max-width: 900px) {
  .lang-dropdown {
    right: 0;
    left: auto;
    transform-origin: top right;
  }
  [dir="rtl"] .lang-dropdown {
    right: auto;
    left: 0;
    transform-origin: top left;
  }
}
@media (max-width: 480px) {
  .lang-btn-label { display: none; }
  .lang-btn { padding: 0.4rem 0.55rem; gap: 0.2rem; }
}

/* =============================================================================
   FORM STATUS (success/error messages)
============================================================================= */
.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-status--success {
  background: rgba(4,120,87,0.1);
  color: var(--home-green, #047857);
  border: 1.5px solid rgba(4,120,87,0.25);
}
.form-status--error {
  background: rgba(153,27,27,0.08);
  color: #991b1b;
  border: 1.5px solid rgba(153,27,27,0.2);
}

/* Field error */
.form-error {
  display: block;
  font-family: 'Cairo', sans-serif;
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.3rem;
  font-weight: 600;
}
.form-group.error .hf-input,
.form-group.error .hf-select,
.form-group.error .hf-textarea,
.hf-form-group.error .hf-input,
.hf-form-group.error .hf-select,
.hf-form-group.error .hf-textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1) !important;
}

/* =============================================================================
   SEARCH RESULTS OVERLAY (on homepage listings)
============================================================================= */
.listing-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.25s ease;
}
.listing-card[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  position: absolute;
  visibility: hidden;
}
.search-result-count {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  color: #4a5e50;
  font-weight: 600;
  margin-top: -1rem;
  margin-bottom: 0.5rem;
  min-height: 1.2em;
}
.search-no-results {
  text-align: center;
  padding: 3rem 1rem;
  font-family: 'Cairo', sans-serif;
  color: #6b8f70;
  font-size: 0.95rem;
  display: none;
  grid-column: 1 / -1;
}
.search-no-results.visible { display: block; }

/* Listing grid: positioned container when items are hidden */
.listings-grid {
  position: relative;
}

/* Category tab active filter indicator */
.listings-tab.active {
  background: var(--home-green);
  color: white;
}
.filter-chip.active {
  background: var(--home-green);
  border-color: var(--home-green);
  color: white;
}

/* =============================================================================
   TOURISM & REGIONAL DISCOVERY SECTION
============================================================================= */
.tourism-section {
  background: linear-gradient(160deg, #0f3a22 0%, #047857 50%, #2a7a4a 100%);
  padding: clamp(4rem,8vw,7rem) 0;
  position: relative;
  overflow: hidden;
}
.tourism-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(202,138,4,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 85%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.tourism-section .home-container { position: relative; z-index: 1; }
.tourism-section .home-eyebrow { color: var(--home-gold-light, #eab308); }
.tourism-section .home-section-title { color: white; }
.tourism-section .home-section-desc { color: rgba(255,255,255,0.78); }

.tourism-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.tourism-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: white;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tourism-card:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.35);
}
.tourism-card-icon { font-size: 2.4rem; line-height: 1; }
.tourism-card h3 {
  font-family: 'Amiri', serif;
  font-size: 1.15rem;
  color: white;
  margin: 0;
}
.tourism-card p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.tourism-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tourism-card-tags span {
  font-family: 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.15);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.tourism-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* =============================================================================
   AGRICULTURE SECTION (homepage preview)
============================================================================= */
.agri-section {
  background: #f2faf5;
  padding: clamp(4rem,8vw,7rem) 0;
}
.agri-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
.agri-text { display: flex; flex-direction: column; gap: 1.25rem; }
.agri-text p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  color: #3a5040;
  line-height: 1.78;
  margin: 0;
}
.agri-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.agri-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a5040;
  background: white;
  border: 1px solid rgba(4,120,87,0.1);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
}
.agri-feature-icon { font-size: 1.1rem; }
.agri-visual {
  background: linear-gradient(135deg, #c8f0d0, #a8e0b8);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agri-visual svg { width: 100%; height: 100%; }

/* =============================================================================
   DIRECTORY SECTION (homepage preview)
============================================================================= */
.directory-section {
  background: var(--home-cream-dark);
  padding: clamp(4rem,8vw,7rem) 0;
}
.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.directory-card {
  background: white;
  border: 1.5px solid rgba(4,120,87,0.1);
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.directory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(4,120,87,0.1);
  border-color: rgba(4,120,87,0.2);
}
.directory-card-icon {
  width: 46px;
  height: 46px;
  background: rgba(4,120,87,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.directory-card h3 {
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  color: var(--home-green);
  margin: 0;
}
.directory-card p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  color: #4a5e50;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.directory-card-count {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--home-gold);
  background: rgba(202,138,4,0.1);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  align-self: flex-start;
}

/* =============================================================================
   FAVORITES (heart button on listing cards)
============================================================================= */
.listing-card-fav {
  position: absolute;
  top: 0.6rem;
  inset-inline-end: 0.6rem;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.listing-card-fav:hover { background: white; transform: scale(1.12); }
.listing-card-fav svg { width: 16px; height: 16px; }
.listing-card-fav.faved svg { fill: #e53e3e; stroke: #e53e3e; }
.listing-card-fav:not(.faved) svg { fill: none; stroke: #6b8f70; }

/* =============================================================================
   RESPONSIVE — NEW SECTIONS
============================================================================= */
@media (max-width: 1024px) {
  .tourism-grid   { grid-template-columns: repeat(2, 1fr); }
  .directory-grid { grid-template-columns: repeat(2, 1fr); }
  .agri-grid      { grid-template-columns: 1fr; }
  .agri-visual    { max-width: 500px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .tourism-grid   { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .directory-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .agri-features  { grid-template-columns: 1fr; }
}
/* (lang-btn 480px handled inside the LANGUAGE SWITCHER block above) */



/* =============================================================================
   REAL-PHOTO DESIGN LAYER (v9)
   Replaces generated SVG scenes with real photography site-wide.
============================================================================= */

/* ---- Homepage hero: full-bleed real photo + legibility overlay ---- */
.hero-landscape {
  top: 0;
  bottom: auto;
  height: 100%;
  object-position: center 65%;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(185deg,
    rgba(8, 22, 14, 0.52) 0%,
    rgba(8, 22, 14, 0.28) 42%,
    rgba(12, 46, 27, 0.55) 82%,
    rgba(15, 58, 34, 0.72) 100%);
}

/* ---- Photo-led category cards ---- */
.category-card {
  flex-direction: column;
  padding: 0 0 1.4rem;
  gap: 0.4rem;
}
.category-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8e4da;
}
.category-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.category-card:hover .category-card-media img { transform: scale(1.06); }
.category-card-icon {
  position: relative;
  z-index: 2;
  margin: -1.7rem 1.25rem 0;
  width: 3.1rem;
  height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(4, 120, 87, 0.12);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(10, 25, 16, 0.16);
  font-size: 1.6rem;
}
.category-card-content { padding: 0 1.25rem; }
.category-card-badge { z-index: 3; }
.category-card-arrow { margin-inline-start: auto; margin-inline-end: 1.25rem; }
.category-card--featured { background: #fff; }

/* ---- Listing cards: real photos ---- */
.listing-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.listing-card:hover .listing-card-photo { transform: scale(1.05); }

/* ---- Eid photo banner ---- */
.eid-photo-banner {
  position: relative;
  max-width: 920px;
  margin: 2rem auto 2.75rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(10, 25, 16, 0.25);
}
.eid-photo-banner img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 430px);
  object-fit: cover;
}
.eid-photo-banner figcaption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 2.2rem 1.4rem 1rem;
  background: linear-gradient(0deg, rgba(8, 22, 14, 0.78), transparent);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

/* ---- Interior page heroes: real photo backgrounds ---- */
.page-hero--livestock {
  background:
    linear-gradient(180deg, rgba(8, 22, 14, 0.62), rgba(15, 58, 34, 0.78)),
    url('/assets/images/photos/cattle-sunset.jpg') center 55% / cover no-repeat !important;
}
.page-hero--eid {
  background:
    linear-gradient(180deg, rgba(8, 22, 14, 0.6), rgba(15, 58, 34, 0.8)),
    url('/assets/images/photos/ram-sardi.jpg') center 30% / cover no-repeat !important;
}
.page-hero--realestate {
  background:
    linear-gradient(180deg, rgba(8, 22, 14, 0.55), rgba(15, 58, 34, 0.78)),
    url('/assets/images/photos/olive-meadow.jpg') center 70% / cover no-repeat !important;
}
.page-hero--agri {
  background:
    linear-gradient(180deg, rgba(8, 22, 14, 0.55), rgba(15, 58, 34, 0.78)),
    url('/assets/images/photos/wheat-field.jpg') center 60% / cover no-repeat !important;
}

/* ---- Agri visual: real photo framing ---- */
.agri-visual {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(10, 25, 16, 0.18);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .category-card-media { aspect-ratio: 16 / 9; }
  .eid-photo-banner { border-radius: 18px; }
  .eid-photo-banner figcaption { font-size: 0.82rem; }
  .page-hero--livestock,
  .page-hero--eid,
  .page-hero--realestate,
  .page-hero--agri { background-attachment: scroll !important; }
}


/* =============================================================================
   DESIGN v11 — CLEAN MODERN MARKETPLACE
   White canvas, one emerald accent, photo-first cards, near-black footer.
   No orange, no beige blocks, no heavy gradients.
============================================================================= */
:root {
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f6f8f7;
  --accent: #047857;
  --accent-deep: #065f46;
  --accent-tint: #ecfdf5;
  --gold: #ca8a04;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --card-shadow-hover: 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.12);
}

body { background: var(--bg); color: var(--ink); }

/* ---- Sections: white / soft gray alternation, tighter rhythm ---- */
.categories-section          { background: var(--bg); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.listings-section            { background: var(--bg-alt); }
.how-section                 { background: var(--bg); }
.faq-section                 { background: var(--bg-alt); }
.why-us-section              { background: var(--bg); }
.stats-bar-section           { background: var(--bg); border-bottom: 1px solid var(--line); }
.agri-section                { background: var(--bg); }
.directory-section           { background: var(--bg-alt); }
.eid-mega-section            { background: #fbf7ea !important; }
.eid-crescent-bg             { opacity: 0.05; }

/* ---- Typography ---- */
.home-section-title, .section-title {
  font-size: clamp(1.65rem, 3.2vw, 2.4rem) !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em;
}
.home-section-desc { color: var(--muted); max-width: 62ch; }
.home-eyebrow {
  color: var(--accent) !important;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* ---- Navbar: pure white, crisp ---- */
.navbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.navbar.scrolled { background: #ffffff; box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(15,23,42,0.06); }
.navbar .logo { color: var(--ink); font-weight: 900; }
.navbar-link { color: var(--muted); }
.navbar-link:hover { color: var(--ink) !important; }
.navbar-link.active {
  color: var(--accent) !important;
  background: var(--accent-tint) !important;
}
.navbar-cta-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.15s ease;
}
.navbar-cta-btn:hover { background: var(--accent-deep) !important; transform: none; }

/* ---- HERO: centered, search-first ---- */
.home-hero { min-height: 88vh; }
.hero-landscape { object-position: center 70%; }
.hero-photo-overlay {
  background: linear-gradient(180deg,
    rgba(6, 18, 12, 0.58) 0%,
    rgba(6, 18, 12, 0.38) 45%,
    rgba(6, 18, 12, 0.52) 100%);
}
.hero-content-wrap {
  grid-template-columns: 1fr;
  max-width: 880px;
  text-align: center;
  padding: 5.5rem 1.5rem 7rem;
  gap: 1.5rem;
}
.hero-text-col { align-items: center; }
.hero-eyebrow {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(12px);
  font-weight: 700;
}
.hero-h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero-h1-accent { color: #86efac; }
.hero-desc { max-width: 58ch; margin-inline: auto; }
.hero-search-wrap {
  width: 100%;
  background: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(2, 12, 8, 0.35);
  text-align: start;
}
.search-btn {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.search-btn:hover { background: var(--accent-deep) !important; }
.search-tab.active {
  background: var(--ink) !important;
  color: #fff !important;
}
.search-quicklinks a { background: #f1f5f9; color: #334155; }
.search-quicklinks a:hover { background: var(--accent-tint); color: var(--accent); }
.search-quicklinks span { color: rgba(255,255,255,0.0); }
.hero-search-wrap .search-quicklinks span { color: #64748b; }

/* stats: compact glass chips row under search */
.hero-stats-col {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.hero-stat-card {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  background: rgba(10, 22, 15, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px;
  padding: 0.45rem 1rem !important;
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.hero-stat-card > div { display: flex; align-items: baseline; gap: 0.4rem; }
.hero-stat-icon { font-size: 1rem; }
.hero-stat-num { color: #fff !important; font-size: 0.95rem !important; }
.hero-stat-label { color: rgba(255, 255, 255, 0.82) !important; font-size: 0.78rem !important; }
.hero-stat-card--eid {
  background: rgba(202, 138, 4, 0.28) !important;
  border-color: rgba(234, 179, 8, 0.45) !important;
}
.hero-stat-card--eid .hero-stat-num { color: #fde68a 	!important; }

/* ---- Buttons: flat, confident, no gradients ---- */
.btn-hero-primary, .btn-submit-home, .listing-card-cta, .btn-eid-mega,
.mobile-sticky-cta__btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-hero-primary:hover, .btn-submit-home:hover, .listing-card-cta:hover,
.btn-eid-mega:hover { background: var(--accent-deep) !important; transform: translateY(-1px); }
.btn-hero-secondary {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
}
.btn-hero-secondary:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; }
.btn-cta-white { border-radius: 12px !important; }

/* ---- Cards: white, hairline border, hover lift ---- */
.category-card, .listing-card, .why-us-card, .directory-card, .tourism-card,
.sheep-breed-card, .testimonial-card, .faq-item, .how-step {
  background: #fff;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.category-card:hover, .listing-card:hover, .directory-card:hover, .tourism-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: #cbd5e1 !important;
}
.category-card-media { border-radius: 16px 16px 0 0; }
.category-card-content h3 { color: var(--ink) !important; }
.category-card-tags span {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-radius: 999px;
}
.category-card--featured { background: #fff; }
.category-card-badge {
  background: var(--gold) !important;
  color: #fff !important;
  border-radius: 999px;
}
.listing-card-price { color: var(--accent) !important; font-weight: 900; }
.listing-badge { border-radius: 999px; }
.home-stat-num { color: var(--accent) !important; }

/* ---- Interior page heroes: cleaner overlay ---- */
.page-hero, .section-hero { padding-bottom: 4.5rem; }
.page-hero--livestock {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.6), rgba(6, 18, 12, 0.66)),
    url('/assets/images/photos/cattle-sunset.jpg') center 55% / cover no-repeat !important;
}
.page-hero--eid {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.58), rgba(6, 18, 12, 0.68)),
    url('/assets/images/photos/ram-sardi.jpg') center 30% / cover no-repeat !important;
}
.page-hero--realestate {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.55), rgba(6, 18, 12, 0.64)),
    url('/assets/images/photos/olive-meadow.jpg') center 70% / cover no-repeat !important;
}
.page-hero--agri {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.55), rgba(6, 18, 12, 0.64)),
    url('/assets/images/photos/wheat-field.jpg') center 60% / cover no-repeat !important;
}

/* ---- Trust strip ---- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-item { color: var(--muted); }

/* ---- Eid section ---- */
.eid-badge {
  background: #fff !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  border-radius: 999px;
}
.sheep-breed-tag { background: #fef3c7 !important; color: #92400e !important; border-radius: 999px; }
.eid-photo-banner { box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18); }

/* ---- Dark sections -> single style: near-black slate ---- */
.quick-request-section, .cta-final-section, .tourism-section, .footer {
  background: #0f1a14 !important;
}
.quick-request-form-card {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-brand-name { color: #fff !important; }
.footer-section-heading { color: #86efac !important; }
.footer-links-list a { color: rgba(255, 255, 255, 0.66); }
.footer-links-list a:hover { color: #fff; }

/* ---- Forms ---- */
.hf-input, .hf-select, .hf-textarea {
  border-radius: 10px !important;
  border: 1.5px solid var(--line) !important;
}
.hf-input:focus, .hf-select:focus, .hf-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.14) !important;
  outline: none;
}

/* ---- FAQ ---- */
.faq-item { background: #fff; }
.faq-item[open] { border-color: var(--accent) !important; }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(4, 120, 87, 0.45);
  outline-offset: 2px;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .hero-content-wrap { padding: 4.5rem 1rem 5.5rem; }
  .hero-stats-col { gap: 0.45rem; }
  .hero-stat-card { padding: 0.35rem 0.8rem !important; }
}

/* ---- Accessibility: honor reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .fade-in, [class*="delay-"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================================================
   DESIGN v12 — "MORNING ON A MOROCCAN FARM"
   Refined olive-forest primary · warm sand & cream canvas · saffron-gold accent
   · terracotta used only as a micro-detail. Premium, calm, unmistakably Moroccan.
============================================================================= */
:root {
  /* Core palette */
  --olive:        #33663f;   /* refined forest-olive — primary */
  --olive-deep:   #234b2d;   /* deep olive — hovers, headings */
  --olive-soft:   #eef3ea;   /* pale olive wash */
  --saffron:      #c79633;   /* golden accent (Eid, highlights) */
  --saffron-deep: #9c7320;
  --terracotta:   #bd6a4a;   /* micro-accent only */
  --sand:         #faf7f0;   /* warm canvas */
  --sand-alt:     #f3ecdf;   /* section alt / wheat */
  --cream:        #fffdf8;   /* elevated cards */
  --ink:          #24291f;   /* warm near-black text */
  --ink-soft:     #56604e;   /* secondary text */
  --line:         #e7e0d2;   /* warm hairline */
  --line-strong:  #d8cfbc;

  /* Re-map v11 tokens onto the warm palette */
  --accent:       var(--olive);
  --accent-deep:  var(--olive-deep);
  --accent-tint:  var(--olive-soft);
  --gold:         var(--saffron);
  --bg:           var(--sand);
  --bg-alt:       var(--sand-alt);
  --muted:        var(--ink-soft);

  --radius:       16px;
  --shadow-sm:    0 1px 2px rgba(36, 41, 31, 0.05), 0 1px 3px rgba(36, 41, 31, 0.04);
  --shadow-md:    0 4px 12px rgba(36, 41, 31, 0.07), 0 14px 34px rgba(36, 41, 31, 0.10);
  --shadow-lg:    0 10px 24px rgba(36, 41, 31, 0.10), 0 28px 60px rgba(36, 41, 31, 0.14);
}

body { background: var(--sand); color: var(--ink); }

/* ---- Section rhythm: warm cream / sand alternation (no stark white/gray) ---- */
.categories-section, .how-section, .why-us-section, .agri-section { background: var(--sand); }
.listings-section, .faq-section, .directory-section { background: var(--sand-alt); }
.stats-bar-section { background: var(--cream); border-color: var(--line); }
.eid-mega-section { background: linear-gradient(180deg, #fbf4e2 0%, #f7ecd2 100%) !important; }

/* ---- Eyebrow: saffron rule + olive text ---- */
.home-eyebrow, .section-eyebrow {
  color: var(--olive) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.home-eyebrow::before { background: var(--saffron); }

/* ---- Headings: warm ink, tight ---- */
.home-section-title, .section-title { color: var(--ink) !important; }
.home-section-desc, .section-subtitle { color: var(--ink-soft) !important; }

/* ---- Navbar ---- */
.navbar { background: rgba(250, 247, 240, 0.9); border-bottom: 1px solid var(--line); }
.navbar.scrolled { background: rgba(250, 247, 240, 0.98); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(36,41,31,0.06); }
.navbar .logo { color: var(--olive-deep); }
.navbar .logo::after { background: var(--saffron); }
.navbar-link { color: var(--ink-soft); }
.navbar-link.active { color: var(--olive) !important; background: var(--olive-soft) !important; }
.navbar-link--eid { color: var(--saffron-deep) !important; }
.navbar-cta-btn { background: var(--olive) !important; }
.navbar-cta-btn:hover { background: var(--olive-deep) !important; }

/* ---- Hero: warm overlay, cream search card ---- */
.hero-photo-overlay {
  background: linear-gradient(180deg,
    rgba(24, 34, 22, 0.56) 0%, rgba(24, 34, 22, 0.32) 45%, rgba(20, 40, 26, 0.55) 100%);
}
.hero-h1-accent { color: #e9c877; }
.hero-search-wrap { background: var(--cream); box-shadow: var(--shadow-lg); }
.search-btn { background: var(--olive) !important; }
.search-btn:hover { background: var(--olive-deep) !important; }
.search-tab.active { background: var(--olive-deep) !important; }
.search-quicklinks a { background: var(--sand-alt); color: #5c5540; }
.search-quicklinks a:hover { background: var(--olive-soft); color: var(--olive); }
.hero-search-wrap .search-quicklinks span { color: var(--ink-soft); }
.hero-stat-card { background: rgba(24, 34, 22, 0.5) !important; border-color: rgba(255,255,255,0.24) !important; }
.hero-stat-card--eid { background: rgba(199, 150, 51, 0.3) !important; border-color: rgba(233, 200, 119, 0.5) !important; }

/* ---- Buttons ---- */
.btn-hero-primary, .btn-submit-home, .listing-card-cta, .mobile-sticky-cta__btn--primary {
  background: var(--olive) !important;
}
.btn-hero-primary:hover, .btn-submit-home:hover, .listing-card-cta:hover { background: var(--olive-deep) !important; }
.btn-eid-mega { background: linear-gradient(160deg, #d0a13f, var(--saffron) 55%, var(--saffron-deep)) !important; box-shadow: 0 6px 18px rgba(156, 115, 32, 0.32) !important; }
.btn-hero-secondary { background: var(--cream) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; }
.btn-hero-secondary:hover { background: var(--sand-alt) !important; border-color: var(--olive) !important; }

/* ---- Cards: cream surface, warm hairline, gentle lift ---- */
.category-card, .listing-card, .why-us-card, .directory-card, .tourism-card,
.sheep-breed-card, .testimonial-card, .faq-item, .how-step, .product-card {
  background: var(--cream);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.category-card:hover, .listing-card:hover, .directory-card:hover,
.tourism-card:hover, .product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong) !important;
}
.category-card-tags span, .listing-card-specs span, .product-card-tags span {
  background: var(--sand-alt) !important; color: #5c5540 !important;
}
.category-card-badge { background: var(--saffron) !important; }
.listing-card-price { color: var(--olive) !important; }
.home-stat-num { color: var(--olive) !important; }
.why-us-icon, .category-card-icon { color: var(--olive); }

/* ---- Eid section warmth ---- */
.eid-badge { background: var(--cream) !important; color: var(--saffron-deep) !important; border-color: #ecd9a5 !important; }
.sheep-breed-tag { background: #f7ecceff !important; color: var(--saffron-deep) !important; }
.eid-guarantee-check { color: var(--olive) !important; }
.pricing-table-price { color: var(--saffron-deep) !important; }

/* ---- Dark sections: deep olive night (not flat green, not slate) ---- */
.quick-request-section, .cta-final-section, .tourism-section, .footer {
  background:
    radial-gradient(ellipse at 82% 12%, rgba(199, 150, 51, 0.15) 0%, transparent 52%),
    linear-gradient(168deg, #223420 0%, #1a2a1a 58%, #16231650 100%) !important;
  background-color: #1a2a1a !important;
}
.footer-brand-name { color: #f0e6cf !important; }
.footer-section-heading { color: #dcc079 !important; }
.footer-links-list a:hover { color: #fff; }
.quick-request-form-card { background: var(--cream); }

/* ---- Trust strip ---- */
.trust-strip { background: var(--cream); border-bottom: 1px solid var(--line); }
.trust-item { color: var(--ink-soft); }

/* ---- Filter chips ---- */
.filter-chip { border-radius: 999px; border-color: var(--line-strong); color: var(--ink-soft); }
.filter-chip.active { background: var(--olive) !important; color: #fff !important; border-color: var(--olive) !important; }
.filter-chip--eid.active, .filter-chip--eid { color: var(--saffron-deep); }

/* ---- Forms ---- */
.hf-input, .hf-select, .hf-textarea { border: 1.5px solid var(--line-strong) !important; border-radius: 12px !important; background: var(--cream); }
.hf-input:focus, .hf-select:focus, .hf-textarea:focus {
  border-color: var(--olive) !important; box-shadow: 0 0 0 3px rgba(51, 102, 63, 0.15) !important;
}

/* ---- FAQ ---- */
.faq-item[open] { border-color: var(--olive) !important; }

/* ---- Focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(51, 102, 63, 0.45); outline-offset: 2px;
}

/* ---- Section title flourish: subtle saffron seed under centered titles ---- */
.categories-section .home-section-title,
.eid-mega-section .home-section-title,
.listings-section .home-section-title { position: relative; }

/* =============================================================================
   v13 — CONVERSION: price replaced by contact CTAs
============================================================================= */
.listing-card-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--olive-deep);
  background: var(--olive-soft);
  border: 1px solid #d8e4d2;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.listing-card-ask::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--olive);
  flex: none;
}
.listing-card-cta { font-weight: 800; }

/* Trust: verified badge on listing cards */
.listing-badge--verified {
  background: rgba(51, 102, 63, 0.92);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* =============================================================================
   v14 — WCAG AA CONTRAST CORRECTIONS
   Audited every foreground/background pair in the palette. Two failed AA:
     · saffron-deep on cream .... 4.23 -> 6.11  (text/badges)
     · white on saffron button .. 2.68 -> 5.41  (Eid CTA; 17.6px bold needs 4.5)
   The bright saffron is retained for large decorative fills only, never as a
   background behind small text.
============================================================================= */
:root {
  --saffron-deep: #7d5b18;  /* AA on cream (6.11) and sand (5.80) */
  --saffron-btn:  #8a6318;  /* AA with white text (5.41) */
  --saffron-btn-hover: #6f4e11; /* AA with white text (7.57) */
}

.btn-eid-mega {
  background: var(--saffron-btn) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(125, 91, 24, 0.3) !important;
}
.btn-eid-mega:hover { background: var(--saffron-btn-hover) !important; }

/* Badges/tags: dark saffron text on light grounds */
.eid-badge          { color: var(--saffron-deep) !important; }
.sheep-breed-tag    { color: var(--saffron-deep) !important; }
.navbar-link--eid   { color: var(--saffron-deep) !important; }
.category-card-badge{ background: var(--saffron-btn) !important; color: #fff !important; }

/* =============================================================================
   v15 — LANGUAGE SWITCHER (native <details>, works with JS disabled)
============================================================================= */
.lang-switcher { position: relative; }
.lang-switcher > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
}
.lang-switcher[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.lang-switcher > summary:hover { border-color: var(--olive); background: var(--olive-soft); }
.lang-switcher > summary:focus-visible { outline: 3px solid rgba(51,102,63,0.45); outline-offset: 2px; }

.lang-switcher .lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 1200;
  min-width: 190px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.lang-switcher .lang-dropdown li { list-style: none; }
.lang-switcher .lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.lang-switcher .lang-dropdown a:hover { background: var(--olive-soft); color: var(--olive-deep); }
.lang-switcher .lang-dropdown a[aria-current="true"] {
  background: var(--olive);
  color: #fff;
}
/* Close-on-click-outside needs no JS: the summary toggles natively. */
@media (max-width: 480px) {
  .lang-switcher > summary { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
}

/* Photo attribution (CC BY-SA images require credit) */
.footer-credits {
  font-family: 'Cairo', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 0.35rem;
}

/* =============================================================================
   v16 — INTERIOR HERO PHOTO FIX
   An older rule (`section.page-hero, .section-hero.page-hero, …`) sets a flat
   gradient with !important at specificity (0,2,0)/(0,1,1), which outranked the
   single-class `.page-hero--livestock` (0,1,0) regardless of source order — so
   the real photography never showed on interior heroes. Matching that weight
   here (and going one higher) restores the photos.
============================================================================= */
section.page-hero.page-hero--livestock,
.section-hero.page-hero--livestock {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.62), rgba(6, 18, 12, 0.68)),
    url('/assets/images/photos/cattle-sunset.jpg') center 55% / cover no-repeat !important;
}
section.page-hero.page-hero--eid,
.section-hero.page-hero--eid {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.6), rgba(6, 18, 12, 0.7)),
    url('/assets/images/photos/ram-sardi.jpg') center 30% / cover no-repeat !important;
}
section.page-hero.page-hero--realestate,
.section-hero.page-hero--realestate {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.58), rgba(6, 18, 12, 0.66)),
    url('/assets/images/photos/olive-meadow.jpg') center 70% / cover no-repeat !important;
}
section.page-hero.page-hero--agri,
.section-hero.page-hero--agri {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.58), rgba(6, 18, 12, 0.66)),
    url('/assets/images/photos/wheat-field.jpg') center 60% / cover no-repeat !important;
}

/* =============================================================================
   v17 — PREMIUM MARKETPLACE REDESIGN
   ---------------------------------------------------------------------------
   Fixes three real defects found in review, then rebuilds the visual language
   into an image-led, dense, editorial marketplace (Airbnb/luxury-property feel)
   rather than centered boxes floating in whitespace.
============================================================================= */

/* ── FIX 1 ─ Tourism cards rendered white-on-cream (invisible until hover).
   They live on the dark section and were always meant to be glass. ───────── */
.tourism-section .tourism-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.tourism-section .tourism-card:hover {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(233, 200, 119, 0.5) !important;
  transform: translateY(-5px);
}
.tourism-card h3 { color: #fff !important; }
.tourism-card p { color: rgba(255, 255, 255, 0.84) !important; }
.tourism-card-tags span {
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── FIX 2 ─ Language dropdown was inert: opacity/visibility left behind by the
   removed JS switcher. The native <details> must control visibility now. ─── */
.lang-switcher .lang-dropdown,
.lang-switcher[open] .lang-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}
[dir="rtl"] .lang-switcher .lang-dropdown { right: auto; left: 0; }
[dir="ltr"] .lang-switcher .lang-dropdown { left: auto; right: 0; }

/* ── FIX 3 ─ .listing-card-cta { flex:1 } stretched into a tall bar whenever it
   sat outside a footer row. Scope the growth to the footer. ─────────────── */
.listing-card-cta { flex: none; }
.listing-card-footer .listing-card-cta { flex: 1; }
.listing-card > .listing-card-cta { align-self: center; padding-inline: 1.6rem; }

/* ── DENSITY ─ close the dead space; editorial rhythm ───────────────────── */
.categories-section,
.listings-section,
.how-section,
.why-us-section,
.directory-section,
.agri-section,
.faq-section { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.home-container { max-width: 1240px; }
.categories-grid { gap: 1rem; margin-top: 1.75rem; }

/* ── TYPOGRAPHY ─ stronger hierarchy, tighter headings ──────────────────── */
.home-section-title, .section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}
.home-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Section headers: editorial left-aligned rule instead of centered islands */
.categories-section .text-center,
.listings-section .listings-header,
.faq-section .text-center,
.why-us-section .text-center,
.directory-section .text-center {
  text-align: start !important;
  border-top: 2px solid var(--olive);
  padding-top: 1.1rem;
  max-width: none;
}
.categories-section .home-section-title,
.faq-section .home-section-title,
.why-us-section .home-section-title,
.directory-section .home-section-title {
  text-align: start !important;
  margin-inline: 0 !important;
}
.categories-section .home-section-desc,
.faq-section .home-section-desc,
.why-us-section .home-section-desc,
.directory-section .home-section-desc {
  text-align: start !important;
  margin-inline: 0 !important;
}

/* ── CATEGORY CARDS ─ full-bleed photo, copy over a scrim (marketplace feel) */
.category-card {
  position: relative;
  min-height: 300px;
  padding: 0;
  border: none !important;
  border-radius: 18px;
  overflow: hidden;
  justify-content: flex-end;
  box-shadow: 0 2px 8px rgba(36,41,31,0.10), 0 18px 40px rgba(36,41,31,0.14);
}
.category-card-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}
.category-card-media img { width: 100%; height: 100%; object-fit: cover; }
.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(12, 22, 14, 0.10) 0%,
    rgba(12, 22, 14, 0.42) 45%,
    rgba(10, 20, 12, 0.88) 100%);
  transition: background 0.35s ease;
}
.category-card:hover::after {
  background: linear-gradient(180deg,
    rgba(12, 22, 14, 0.22) 0%,
    rgba(12, 22, 14, 0.55) 45%,
    rgba(10, 20, 12, 0.92) 100%);
}
.category-card:hover { transform: translateY(-6px); }
.category-card:hover .category-card-media img { transform: scale(1.08); }
.category-card-icon {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 3;
  margin: 0;
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.94);
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.category-card-content {
  position: relative;
  z-index: 3;
  padding: 1.25rem 1.25rem 1.4rem;
}
.category-card-content h3 {
  color: #fff !important;
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.category-card-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.84rem;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.category-card-tags span {
  background: rgba(255, 255, 255, 0.17) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}
.category-card-arrow {
  position: absolute;
  bottom: 1.35rem;
  inset-inline-end: 1.1rem;
  z-index: 3;
  color: #fff;
  opacity: 0.9;
  margin: 0;
}
.category-card-badge {
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 3;
}

/* ── LISTING CARDS ─ deeper, richer, stronger CTA ───────────────────────── */
.listing-card { overflow: hidden; }
.listing-card-image { height: 200px; }
.listing-card-body { padding-top: 0.9rem; }
.listing-card-title { font-size: 1.02rem; line-height: 1.35; }
.listing-card:hover { box-shadow: 0 4px 12px rgba(36,41,31,0.08), 0 24px 50px rgba(36,41,31,0.16); }
.listing-card-cta::after {
  content: '←';
  margin-inline-start: 0.4rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
[dir="ltr"] .listing-card-cta::after { content: '→'; }
.listing-card-cta:hover::after { transform: translateX(-3px); }
[dir="ltr"] .listing-card-cta:hover::after { transform: translateX(3px); }

/* ── MOROCCAN TEXTURE ─ subtle zellige geometry, never loud ─────────────── */
.eid-mega-section,
.stats-bar-section {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%2333663f' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Cpath d='M30 12 L48 30 L30 48 L12 30 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #fbf4e2 0%, #f7ecd2 100%);
  background-size: 60px 60px, auto;
}
.stats-bar-section {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%2333663f' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #fffdf8, #faf7f0);
}

/* ── OVERLAP ─ stats bar rides up over the hero wave ────────────────────── */
.stats-bar-section {
  position: relative;
  z-index: 5;
  margin-top: -3.5rem;
  margin-inline: auto;
  max-width: 1120px;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(36,41,31,0.10), 0 28px 60px rgba(36,41,31,0.12);
  padding: 1.5rem 1rem !important;
}
.home-hero { margin-bottom: 0; }

/* ── MICRO-INTERACTIONS ─────────────────────────────────────────────────── */
.category-card, .listing-card, .directory-card, .tourism-card, .product-card {
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.32s cubic-bezier(0.16,1,0.3,1),
              border-color 0.2s ease, background 0.3s ease;
}
.btn-hero-primary, .btn-eid-mega, .search-btn, .navbar-cta-btn { will-change: transform; }
.btn-hero-primary:active, .btn-eid-mega:active, .search-btn:active { transform: translateY(1px); }

@media (max-width: 768px) {
  .stats-bar-section { margin-top: -2rem; border-radius: 16px; }
  .category-card { min-height: 250px; }
}

/* =============================================================================
   v18 — DARK-SECTION LEGIBILITY + RICHER TOURISM CARDS
   The global heading colour (--ink) was being inherited by sections with dark
   backgrounds, producing dark-on-dark headings (the tourism block). Dark
   sections now explicitly claim light type.
============================================================================= */
.tourism-section .home-section-title,
.tourism-section .section-title,
.quick-request-section .home-section-title,
.quick-request-section h2,
.cta-final-section h2,
.cta-final-section .home-section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.tourism-section .home-section-desc,
.quick-request-section .home-section-desc,
.quick-request-section p,
.cta-final-section p {
  color: rgba(255, 255, 255, 0.86) !important;
}
.tourism-section .home-eyebrow,
.quick-request-section .home-eyebrow,
.cta-final-section .home-eyebrow {
  color: #e9c877 !important;
}
.tourism-section .home-eyebrow::before,
.quick-request-section .home-eyebrow::before { background: #e9c877; }
.tourism-section .text-center {
  text-align: start !important;
  border-top: 2px solid rgba(233, 200, 119, 0.55);
  padding-top: 1.1rem;
}
.tourism-section .home-section-title,
.tourism-section .home-section-desc { text-align: start !important; margin-inline: 0 !important; }

/* Tourism cards: photo-backed, so the block stops feeling like empty boxes */
.tourism-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.tourism-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.tourism-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,20,12,0.42) 0%, rgba(8,16,10,0.86) 100%);
}
.tourism-card:hover::before { transform: scale(1.1); }
.tourism-grid > .tourism-card:nth-child(1)::before { background-image: url('/assets/images/photos/olive-meadow.jpg'); }
.tourism-grid > .tourism-card:nth-child(2)::before { background-image: url('/assets/images/photos/souk-square.jpg'); }
.tourism-grid > .tourism-card:nth-child(3)::before { background-image: url('/assets/images/photos/barn-farm.jpg'); }
.tourism-grid > .tourism-card:nth-child(4)::before { background-image: url('/assets/images/photos/kasbah-ait.jpg'); }
.tourism-grid > .tourism-card:nth-child(5)::before { background-image: url('/assets/images/photos/couscous.jpg'); }
.tourism-grid > .tourism-card:nth-child(6)::before { background-image: url('/assets/images/photos/crop-rows.jpg'); }
.tourism-section .tourism-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: none;
}
.tourism-section .tourism-card:hover {
  background: transparent !important;
  border-color: rgba(233,200,119,0.6) !important;
}
.tourism-card-icon {
  position: absolute;
  top: 0.9rem;
  inset-inline-start: 0.9rem;
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.tourism-card h3 { text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.tourism-card p { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* =============================================================================
   v19 — CARD LAYOUT CORRECTIONS
   · components.css:522 gives .listing-card `padding: var(--space-lg)` + a flex
     gap, from the era when the card was a plain text box. The photo-led card
     has its own body/footer padding, so that outer padding inset every image by
     ~40px and left a white gutter. Zero it here; the inner blocks own spacing.
   · The tourism icon was absolutely positioned onto the title. Put it back in
     flow so it can never collide.
============================================================================= */
.listing-card {
  padding: 0 !important;
  gap: 0 !important;
}
.listing-card-image {
  border-radius: 16px 16px 0 0;
  margin: 0;
}
.listing-card-footer {
  padding: 0 1.25rem 1.15rem;
  margin-top: auto;
}
.listing-card-body { padding: 1rem 1.25rem 0.75rem; }
/* the dashed "add your listing" card keeps its own inner padding */
.listing-card[id="other"],
.listing-card[style*="dashed"] { padding: 2.25rem 1.5rem !important; gap: 1rem !important; }

/* Tourism icon back into normal flow, above the heading */
.tourism-card-icon {
  position: static !important;
  margin-bottom: 0.5rem;
  font-size: 1.7rem;
}
.tourism-card { padding: 1.25rem 1.25rem 1.35rem; }

/* =============================================================================
   v20 — ABOUT PAGE REBUILD
   Was: flat gradient hero (the old .hero-frame is display:none, so its photo
   never rendered), a raw un-framed image slab, and value cards containing only
   a heading. Now: photo hero, overlapping trust band, editorial story split
   with a ratio-locked frame, and value cards with real substance.
============================================================================= */
section.page-hero.page-hero--about,
.section-hero.page-hero--about {
  background:
    linear-gradient(180deg, rgba(6, 18, 12, 0.55) 0%, rgba(6, 18, 12, 0.72) 100%),
    url('/assets/images/photos/souk-square.jpg') center 42% / cover no-repeat !important;
  padding-bottom: 5.5rem;
}
.about-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.about-hero-inner .hero-h1 { margin: 0.75rem 0 0.6rem; }
.about-hero-inner .hero-desc { margin-inline: 0; }
.about-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Trust band rides up over the hero */
.about-stats {
  position: relative;
  z-index: 5;
  margin: -3rem auto 0;
  max-width: 1080px;
  padding: 1.4rem 1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(36,41,31,0.10), 0 28px 60px rgba(36,41,31,0.12);
}
.about-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.about-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.about-stat + .about-stat { border-inline-start: 1px solid var(--line); }
.about-stat-num {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--olive);
  line-height: 1;
}
.about-stat-label { font-family: 'Cairo', sans-serif; font-size: 0.78rem; color: var(--ink-soft); }

/* Story: editorial split, image locked to a sane ratio */
.about-story { background: var(--sand); padding: clamp(3.5rem, 6vw, 5rem) 0; }
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.about-story-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.about-story-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;         /* was rendering as a giant portrait slab */
  object-fit: cover;
  object-position: center 55%;
}
.about-story-media figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 1rem 0.85rem;
  background: linear-gradient(0deg, rgba(8,18,10,0.82), transparent);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 0.78rem;
  text-align: center;
}
.about-story-text .home-section-title { margin: 0.4rem 0 0.7rem; }
.about-story-text p {
  font-family: 'Cairo', sans-serif;
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 0 0 0.9rem;
}
.about-story-sub {
  font-family: 'Amiri', serif;
  font-size: 1.3rem;
  color: var(--olive-deep);
  margin: 1.4rem 0 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.about-disclaimer {
  font-size: 0.78rem !important;
  color: #7a8478 !important;
  background: var(--sand-alt);
  border-inline-start: 3px solid var(--saffron);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  margin-top: 1.2rem !important;
}

/* Values: cards with icon + copy */
.about-values { background: var(--cream); padding: clamp(3.5rem, 6vw, 5rem) 0; }
.about-values .text-center { text-align: start !important; border-top: 2px solid var(--olive); padding-top: 1.1rem; }
.about-values .home-section-title { text-align: start !important; margin: 0.3rem 0 0 !important; }
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.about-value-card {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease;
}
.about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--olive);
}
.about-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem; height: 2.9rem;
  font-size: 1.4rem;
  background: var(--olive-soft);
  border-radius: 12px;
  margin-bottom: 0.9rem;
}
.about-value-card h3 {
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.about-value-card p {
  font-family: 'Cairo', sans-serif;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

/* Closing CTA */
.about-cta {
  background:
    radial-gradient(ellipse at 82% 12%, rgba(199,150,51,0.15) 0%, transparent 52%),
    linear-gradient(168deg, #223420 0%, #1a2a1a 60%, #162316 100%);
  padding: clamp(3rem, 5vw, 4rem) 0;
}
.about-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.about-cta h2 {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: #fff;
  margin: 0 0 0.4rem;
}
.about-cta p { font-family: 'Cairo', sans-serif; color: rgba(255,255,255,0.84); margin: 0; max-width: 56ch; }
.about-cta-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .about-story-grid, .about-values-grid { grid-template-columns: 1fr; }
  .about-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .about-stat:nth-child(3) { border-inline-start: none; }
  .about-stats { margin-top: -2rem; }
}

/* =============================================================================
   v21 — LEGACY SECTION HARMONISATION
   The older pages lean on .bg-surface-alt / .glass-section, which still resolved
   to a pale mint (#f2faf5) that clashes with the warm sand palette. Re-point
   them at the design system so every page reads as one product.
============================================================================= */
.bg-tertiary-50,
.bg-surface-alt,
section.bg-surface-alt { background: var(--sand-alt) !important; }
.bg-surface,
section.bg-surface { background: var(--sand) !important; }
.glass-section {
  background: var(--cream) !important;
  backdrop-filter: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.glass-section-alt { background: var(--sand-alt) !important; }

/* Legacy FAQ/disclosure blocks -> match the marketplace FAQ */
.section-block .group,
details.group {
  background: var(--cream) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
}
details.group[open] { border-color: var(--olive) !important; }
details.group summary { font-family: 'Cairo', sans-serif; font-weight: 700; color: var(--ink); }

/* Legacy headings/eyebrows adopt the system */
.section-block .section-title { color: var(--ink) !important; }
.section-block .section-subtitle { color: var(--ink-soft) !important; }
.section-eyebrow { color: var(--olive) !important; }
.glass-service-card {
  background: var(--sand) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
}