/* =====================================================
   home.css — الصفحة الرئيسية
   حباش حمدي | Mobile-First | RTL
   ===================================================== */

/* ─────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────── */
.home-hero { position: relative; }

/* Slider */
.hero-slider {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 55vw, 520px);
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-slide__bg {
  position: absolute; inset: 0;
  background: center/cover no-repeat var(--color-brown);
}
.hero-slide--fallback .hero-slide__bg {
  background: var(--grad-brown);
}
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(90,36,24,.85) 0%,
    rgba(90,36,24,.45) 50%,
    rgba(90,36,24,.20) 100%);
}
.hero-slide__content {
  position: absolute; bottom: 0; right: 0; left: 0;
  padding: 2rem 1rem 4.5rem;
  text-align: center;
}
.hero-slide__title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.2;
  margin-bottom: .5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hero-slide__desc {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  color: rgba(255,255,255,.85);
  margin-bottom: 1.25rem;
  line-height: 1.65;
  max-width: 500px;
  margin-left: auto; margin-right: auto;
}
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.75rem;
  background: var(--color-golden); color: var(--color-brown);
  font-weight: 700; border-radius: 9999px; text-decoration: none;
  border: none; cursor: pointer; font-family: var(--font-main);
  font-size: var(--fs-base);
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 4px 16px rgba(232,154,45,.4);
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,154,45,.5); }
.btn-hero:active { transform: scale(.97); }

/* Slider Dots */
.hero-dots {
  position: absolute; bottom: 1rem; right: 0; left: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 5;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: rgba(255,255,255,.45); border: none; cursor: pointer;
  /* skill: touch-target — extend */
  padding: 8px; box-sizing: content-box;
  transition: background 200ms ease, transform 200ms ease;
}
.hero-dot.is-active {
  background: var(--color-golden);
  transform: scale(1.2);
}

/* Hero CTA Bar */
.hero-cta-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(90,36,24,.06);
}
.hero-cta-bar__inner {
  display: flex; flex-wrap: wrap;
  gap: .5rem; justify-content: center;
  padding: .75rem 0;
}
.hero-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 44px; padding: 0 1.25rem;
  font-family: var(--font-main); font-size: var(--fs-sm); font-weight: 700;
  border-radius: 9999px; text-decoration: none; border: 2px solid transparent;
  transition: all 150ms ease; white-space: nowrap; cursor: pointer;
}
.hero-cta-btn--primary {
  background: var(--color-golden); color: var(--color-brown);
  box-shadow: 0 3px 12px rgba(232,154,45,.3);
}
.hero-cta-btn--primary:hover  { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(232,154,45,.4); }
.hero-cta-btn--secondary {
  background: transparent; color: var(--color-brown);
  border-color: var(--color-brown);
}
.hero-cta-btn--secondary:hover { background: var(--color-brown); color: var(--color-white); }
.hero-cta-btn--wa {
  background: #22C55E; color: #fff;
  box-shadow: 0 3px 12px rgba(34,197,94,.25);
}
.hero-cta-btn--wa:hover { background: #16A34A; color: #fff; }

/* ─────────────────────────────────────────────────────
   SECTION COMMON STYLES
   ───────────────────────────────────────────────────── */
.section { padding: 3rem 0; }
@media (min-width: 768px) { .section { padding: 4rem 0; } }

.section--warm    { background: var(--color-surface); }
.section--brown   { background: var(--color-brown); }
.section--brown * { color-scheme: dark; }

.section-head { text-align: center; margin-bottom: 2rem; }

.section-eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700;
  color: var(--color-golden); letter-spacing: .08em;
  text-transform: none; margin-bottom: .4rem;
}
.section-title {
  font-size: clamp(1.35rem, 4vw, 1.875rem);
  font-weight: 700; color: var(--color-brown);
  margin-bottom: .5rem; line-height: 1.25;
}
.section--brown .section-title { color: var(--color-gold); }

.section-line {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--color-golden), var(--color-gold));
  border-radius: 9999px; margin: 0 auto;
}

.section-cta-row {
  display: flex; justify-content: center;
  margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────
   PRODUCTS GRID
   ───────────────────────────────────────────────────── */
/* shared product-card styles already in style.css — مكملين هنا */
.product-card__name a {
  color: var(--color-brown); text-decoration: none;
}
.product-card__name a:hover { color: var(--color-golden); }
.product-card__price { color: var(--color-golden); font-weight: 700; font-size: var(--fs-lg); }

.btn-add-cart {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 44px; width: 100%;
  background: var(--color-golden); color: var(--color-brown);
  font-family: var(--font-main); font-size: var(--fs-sm); font-weight: 700;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  margin-top: auto;
}
.btn-add-cart:hover  { background: var(--color-gold); }
.btn-add-cart:active { transform: scale(.97); }
.btn-add-cart:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ─────────────────────────────────────────────────────
   OFFERS
   ───────────────────────────────────────────────────── */
.offers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .offers-grid { grid-template-columns: repeat(4, 1fr); } }

.offer-card { display: flex; flex-direction: column; }
.offer-card__img-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--color-bg);
}
.offer-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.offer-card:hover .offer-card__img-wrap img { transform: scale(1.04); }
.offer-card__badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--color-red); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 9999px;
}
.offer-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.offer-card__title a { color: var(--color-brown); font-weight: 700; font-size: var(--fs-md); text-decoration: none; }
.offer-card__title a:hover { color: var(--color-golden); }
.offer-card__desc { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.65; }
.offer-card__price { display: flex; align-items: center; gap: .5rem; }
.offer-card__price-before { font-size: var(--fs-sm); color: var(--color-muted); text-decoration: line-through; }
.offer-card__price-after  { font-size: var(--fs-lg); font-weight: 700; color: var(--color-golden); }
.offer-card__duration {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; color: var(--color-muted);
}
.btn-offer {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 1.25rem; margin-top: auto;
  background: transparent; border: 1.5px solid var(--color-golden);
  color: var(--color-golden); font-family: var(--font-main);
  font-size: var(--fs-sm); font-weight: 700; border-radius: 9999px;
  text-decoration: none; transition: all 150ms ease;
}
.btn-offer:hover { background: var(--color-golden); color: var(--color-brown); }

/* ─────────────────────────────────────────────────────
   OCCASIONS
   ───────────────────────────────────────────────────── */
.occasions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 480px) { .occasions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .occasions-grid { grid-template-columns: repeat(6, 1fr); } }

.occasion-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1.25rem .5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  /* skill: touch-target */
  min-height: 100px;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.occasion-card:hover {
  background: var(--color-bg);
  border-color: var(--color-golden);
  transform: translateY(-3px);
}
.occasion-card:active { transform: scale(.97); }
.occasion-card__icon {
  width: 44px; height: 44px;
  background: var(--color-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brown);
  transition: background 150ms ease;
}
.occasion-card:hover .occasion-card__icon { background: var(--color-golden); color: #fff; }
.occasion-card__icon svg { width: 22px; height: 22px; }
.occasion-card__label {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-brown); text-align: center; line-height: 1.3;
}
.occasion-card:hover .occasion-card__label { color: var(--color-golden); }

/* ─────────────────────────────────────────────────────
   COMBOS
   ───────────────────────────────────────────────────── */
.combos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .combos-grid { grid-template-columns: repeat(3, 1fr); } }

.combo-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  display: flex; flex-direction: column; gap: .75rem;
}
.combo-card__products {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
}
.combo-tag {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-brown);
  font-weight: 700; font-size: var(--fs-sm);
  padding: 4px 14px; border-radius: 9999px;
}
.combo-plus {
  font-size: 1.25rem; font-weight: 700;
  color: var(--color-golden);
}
.combo-card__desc { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.6; }
.btn-combo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.25rem; margin-top: auto;
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  color: var(--color-brown); font-family: var(--font-main);
  font-size: var(--fs-sm); font-weight: 700; border-radius: 9999px;
  text-decoration: none; transition: all 150ms ease;
}
.btn-combo:hover { background: var(--color-brown); color: var(--color-white); border-color: var(--color-brown); }

/* ─────────────────────────────────────────────────────
   STEPS
   ───────────────────────────────────────────────────── */
.steps-row {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
@media (min-width: 640px) {
  .steps-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
}
.step-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .6rem; max-width: 200px;
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-golden); color: #fff;
  font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(232,154,45,.35);
  flex-shrink: 0;
}
.step-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brown);
}
.step-icon svg { width: 26px; height: 26px; }
.step-title { font-size: var(--fs-md); font-weight: 700; color: var(--color-brown); }
.step-desc  { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.6; }

.step-arrow {
  color: var(--color-gold); flex-shrink: 0;
  transform: rotate(90deg); /* vertical on mobile */
}
@media (min-width: 640px) {
  .step-arrow { transform: rotate(0deg); } /* horizontal on desktop */
}
.step-arrow svg { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────
   TRUST SECTION
   ───────────────────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
}
.trust-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(232,154,45,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-golden);
}
.trust-icon svg { width: 24px; height: 24px; }
.trust-title { font-size: var(--fs-sm); font-weight: 700; color: var(--color-gold); line-height: 1.3; }
.trust-desc  { font-size: var(--fs-xs); color: rgba(255,255,255,.65); line-height: 1.65; }

/* ─────────────────────────────────────────────────────
   ABOUT HOME
   ───────────────────────────────────────────────────── */
.about-home-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; align-items: center;
}
@media (min-width: 768px) { .about-home-grid { grid-template-columns: 200px 1fr; } }

.about-home__img-side { display: flex; justify-content: center; }
.about-home__logo-wrap {
  width: 160px; height: 160px; border-radius: 50%;
  border: 4px solid var(--color-gold-light, var(--color-gold));
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  box-shadow: 0 8px 32px rgba(90,36,24,.12);
}
.about-home__logo-wrap img { width: 100%; height: 100%; object-fit: contain; }

.about-home__text-side { display: flex; flex-direction: column; gap: 1rem; }
.about-home__text {
  font-size: var(--fs-base); color: var(--color-text);
  line-height: 1.8; max-width: 560px;
}
.about-home__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }

/* ─────────────────────────────────────────────────────
   CONTACT CTA
   ───────────────────────────────────────────────────── */
.contact-cta-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 560px; margin: 0 auto;
  box-shadow: var(--shadow-card);
}
.contact-cta__title {
  font-size: clamp(1.35rem, 4vw, 1.875rem);
  font-weight: 700; color: var(--color-brown); margin-bottom: .5rem;
}
.contact-cta__sub {
  font-size: var(--fs-base); color: var(--color-muted);
  margin-bottom: 1.75rem; line-height: 1.6;
}
.btn-wa-large {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 54px; padding: 0 2rem;
  background: #22C55E; color: #fff;
  font-family: var(--font-main); font-size: var(--fs-md); font-weight: 700;
  text-decoration: none; border-radius: 9999px; border: none;
  box-shadow: 0 4px 18px rgba(34,197,94,.3);
  transition: background 150ms ease, transform 150ms ease;
  margin-bottom: 1.5rem; width: 100%; max-width: 320px;
}
.btn-wa-large:hover  { background: #16A34A; color: #fff; transform: translateY(-2px); }
.btn-wa-large:active { transform: scale(.97); }

.contact-cta__phones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem; margin-bottom: 1rem;
}
.contact-cta__phone {
  font-size: var(--fs-md); font-weight: 700;
  color: var(--color-brown); text-decoration: none;
  padding: 4px 0; min-height: 44px; display: flex; align-items: center;
  transition: color 150ms ease;
}
.contact-cta__phone:hover { color: var(--color-golden); }

.contact-cta__address {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; font-size: var(--fs-sm); color: var(--color-muted);
}

/* ─────────────────────────────────────────────────────
   SHARED BUTTONS
   ───────────────────────────────────────────────────── */
.btn-outline-brown {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 48px; padding: 0 1.75rem;
  background: transparent;
  border: 2px solid var(--color-brown); color: var(--color-brown);
  font-family: var(--font-main); font-size: var(--fs-sm); font-weight: 700;
  border-radius: 9999px; text-decoration: none;
  transition: all 150ms ease;
}
.btn-outline-brown:hover { background: var(--color-brown); color: var(--color-white); }
.btn-outline-brown svg { transition: transform 150ms ease; }
.btn-outline-brown:hover svg { transform: translateX(-3px); }

.btn-text-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .5rem;
  color: var(--color-golden); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: color 150ms ease;
}
.btn-text-link:hover { color: var(--color-brown); text-decoration: underline; }

/* ─────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ───────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .hero-cta-bar__inner { gap: .35rem; }
  .hero-cta-btn { font-size: .75rem; padding: 0 .9rem; }
  .trust-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────
   OFFERS — عرض واحد فقط على الديسكتوب (Featured Layout)
   تحديث 2026-07-01: إصلاح ديسكتوب فقط، الموبايل لم يتغيّر إطلاقًا —
   كل القواعد هنا محصورة داخل @media (min-width: 992px) فقط.
   السبب الأصلي للمشكلة: .offers-grid كانت تتحول لـ 4 أعمدة من 960px
   فأكثر، فكارت واحد يطلع صغير وملتصق بجهة واحدة مع فراغ ضخم حواليه.
   الحل: لو .offer-card هو العنصر الوحيد داخل .offers-grid (:only-child)،
   نلغي شكل الشبكة ونعرضه كبنر Featured عريض في المنتصف. لو المتصفح
   قديم ومايدعمش :has()، الشكل الحالي يفضل زي ما هو تمامًا — صفر كسر. ───── */
@media (min-width: 992px) {
  .offers-grid:has(.offer-card:only-child) {
    grid-template-columns: 1fr;
    max-width: 1140px;
    margin: 0 auto;
  }

  .offer-card:only-child {
    flex-direction: column;
  }
  .offer-card:only-child .offer-card__img-wrap {
    aspect-ratio: 21 / 8;
  }
  .offer-card:only-child .offer-card__body {
    padding: 2rem 3rem 2.5rem;
    align-items: center;
    text-align: center;
  }
  .offer-card:only-child .offer-card__title a {
    font-size: 1.7rem;
  }
  .offer-card:only-child .offer-card__desc {
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
  }
  .offer-card:only-child .offer-card__price {
    justify-content: center;
  }
  .offer-card:only-child .btn-offer {
    margin: .5rem auto 0;
    min-width: 200px;
  }
}