/* ===========================================================================
 * Granzia Landing page — pink standalone landing.
 * Matches Figma "Landing page" (desktop 8404-18454 / mobile 8079-29884).
 * Exact text colours are the Figma brand pinks (Pink-2/*). Global chrome
 * (header/footer/logo) is themed via the injected :root --primary (#c04a65).
 * Single markup; desktop ⇄ mobile switch at 768px.
 * ======================================================================== */

/* Background = the palette's deepest shade so any area below .landing-rest
   (e.g. the mobile sticky-bar padding) matches the FAQ end instead of going white. */
/* TASK gradient + parallax: تدرّج أبيض (#FFFFFF) أعلى → بنك غامق (#C96B8A) أسفل،
   مثبّت على الـ viewport (background-attachment: fixed) فالمحتوى بيعدّي فوقه = parallax.
   الهيرو + الترست + الموجة خلفياتهم opaque فبيغطّوا التدرّج، فالـ parallax بيبان من
   أول سيكشن تحت الموجة (المحتوى شفاف). في الـ screenshot الكامل بيتعرض ممتد على
   طول الصفحة (أبيض فوق → غامق تحت). */
/* الخلفية الأساسية = نهاية التدرّج (#C96B8A) عشان أي منطقة مش مغطّاة تحت (فوق الفوتر)
   متبقاش بيضا. الهيرو/المحتوى opaque فوقها فمش بتبان غير عند آخر الصفحة. */
.landing { direction: rtl; position: relative; background: #C96B8A; }

/* Pinned group: hero + trust + wave يثبتوا فوق مع بعض والمحتوى بيعدّي فوقهم. */
.landing-pinned { position: sticky; top: 0; z-index: 0; }
.landing * { box-sizing: border-box; }

/* The global body{overflow-x:hidden} makes body a scroll container and breaks the
   sticky hero. `clip` still hides horizontal overflow but keeps sticky working.
   Scoped to landing pages only (this stylesheet loads on the template alone). */
body { overflow-x: clip; }

/* ---- Sticky hero + scroll colour transition --------------------------------
   The hero is pinned (sticky) while .landing-rest scrolls up and over it; its
   background fades through the palette (--landing-bg set per scroll in main.js). */
.landing-rest {
  position: relative;
  z-index: 1;
  /* TASK gradient: من أول سيكشن محتوى (تحت الموجة) أبيض → بنك غامق آخر الصفحة.
     opaque + z فوق الـ pinned group فالمحتوى بيعدّي فوقهم (parallax). */
  z-index: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #C96B8A 100%);
  padding-bottom: 0;
  margin-bottom: 0;
}
.landing-faq { padding-bottom: 0; margin-bottom: 0; }

/* ---- Section 3: Hero --------------------------------------------------- */
/* TASK: الهيرو بيسكروول عادي (مش sticky) — الـ parallax مابيبدأش منه. */
.landing-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Never collapse to a blank strip if the scene image is slow/missing — the
     absolutely-positioned title + CTA always have a real box to sit in. */
  min-height: 320px;
  overflow: hidden;
}
.landing-hero__pic, .landing-hero__img { display: block; width: 100%; }
.landing-hero__img { height: auto; }

.landing-hero__content {
  position: absolute;
  top: 50%;
  right: 80px;                     /* Figma physical right:80 (over the curtain) */
  left: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;           /* children hug the right edge */
  text-align: right;
  gap: 16px;
}
.landing-hero__title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;               /* text-3xl/bold */
  font-weight: 700;
  color: #782e3f;                  /* Pink-2/50 */
  white-space: nowrap;
}
/* Optional hero subtitle — only present when the admin adds one. */
.landing-hero__subtitle {
  margin: 0;
  max-width: 460px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--landing-hero-subtitle, #602532);
  text-align: right;
}
.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 10px 32px;
  border-radius: 99px;
  background: #f05c7e;             /* Pink-2/base */
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.landing-cta:hover { background: #e34d6f; }

/* ---- Section 4: Trust bar --------------------------------------------- */
.landing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 80px;
  background: #FFD6DC;            /* TASK: الترست + الموجة وحدة واحدة بخلفية #FFD6DC */
}
.landing-trust__list {
  display: flex;
  align-items: center;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #782e3f;                  /* Pink-2/50 */
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}
/* Trust icons: fixed square box; object-fit:contain keeps each icon's real aspect
   ratio inside it, so nothing is stretched or squished. flex-shrink:0 stops the
   flex row from compressing them. */
.landing-trust__icon { display: block; width: 40px !important; height: 40px !important; max-width: 40px !important; object-fit: contain; flex-shrink: 0; }

/* TASK wave: امتداد للترست بار (#FFD6DC) بحافة سفلية متموّجة تنزل للأبيض (بداية المحتوى)
   — لاصقة في أسفل الترست بدون أي فراغ، فالاتنين وحدة واحدة. */
.landing-hero__band {
  height: 56px;
  /* The wave is painted with the EXACT trust-bar colour (same CSS variable), and
     a mask carves the wavy bottom edge — everything below the wave is transparent
     so the section colour shows through. Result: wave colour always matches the
     trust bar and there is zero white gap to the section below. */
  background-color: var(--landing-trust-bg, #FFD6DC);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,26 C1200,54 960,2 720,22 C480,42 240,0 0,26 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,26 C1200,54 960,2 720,22 C480,42 240,0 0,26 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ---- Shared section title -------------------------------------------- */
.landing-section-title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #481c26;                  /* Pink-2/70 */
  text-align: center;
}

/* ---- Section 5: Categories ------------------------------------------- */
.landing-cats { padding: 64px 80px 0; }
.landing-cats__title {
  margin: 0 0 24px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #481c26;                  /* Pink-2/70 */
  text-align: center;
}
.landing-cats__grid {
  display: flex;
  flex-wrap: wrap;                 /* TASK: 4 في الصف، أي زيادة تلتف لصف تاني متوسّط */
  gap: 16px;
  justify-content: center;
}
.landing-cat {
  flex: 0 0 calc((100% - 4 * 16px) / 5);   /* 5 كروت في صف واحد زي Figma (≈243px) */
  max-width: 243px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.landing-cat__img {
  width: 100%;
  aspect-ratio: 243 / 279;         /* Figma: نسبة الصورة بالظبط */
  border-radius: 8px;              /* Figma: radius 8 */
  object-fit: cover;              /* Figma: image fill (cover) */
  background: #fce9ee;
}
.landing-cat__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #262626;                  /* Soft black */
  text-align: center;
}
.landing-cat__count {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #a1a1a1;                  /* neutral/400 */
  text-align: center;
}

/* ---- Section 6: Best sellers ----------------------------------------- */
.landing-bestsellers { padding: 64px 80px 0; }
.landing-bestsellers .landing-fp-grid { margin-top: 24px; }
.landing-fp-grid--mobile { display: none; }

/* =======================================================================
 * Mobile  ≤ 768px  (Figma mobile 8079-29884, 375 wide)
 * ==================================================================== */
@media (max-width: 768px) {
  /* Hero — cover image 430px tall, centered title + CTA near the top */
  .landing-hero__img { height: 430px; object-fit: cover; object-position: center; }
  .landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(200deg,
      rgba(251,206,216,.6) 7%,
      rgba(251,206,216,.6) 31%,
      rgba(251,206,216,0) 59%);
  }
  .landing-hero__content {
    right: auto;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 248px;
  }
  .landing-hero__title { font-size: 24px; line-height: 32px; text-align: center; }
  .landing-cta { height: 38px; padding: 8px 24px; }

  /* Trust — compact scrolling strip */
  .landing-trust { padding: 8px 16px; justify-content: flex-start; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .landing-trust::-webkit-scrollbar { display: none; }
  .landing-trust__list { gap: 24px; }

  /* TASK: الموجة تظهر على الموبايل زي الديسكتوب بنفس اللون البنك */
  .landing-hero__band { display: block; height: 40px; }

  /* Section titles */
  .landing-section-title,
  .landing-cats__title { font-size: 24px; line-height: 32px; }

  /* Categories — TASK: 2 كروت في صف على الموبايل (16px جوانب) */
  .landing-cats { padding: 40px 16px 0; }
  .landing-cats__title { margin-bottom: 24px; }
  .landing-cats__grid { flex-wrap: wrap; gap: 16px; }
  .landing-cat { flex: 0 0 calc((100% - 16px) / 2); max-width: none; width: auto; gap: 8px; }
  .landing-cat__img { aspect-ratio: 243 / 279; }

  /* Best sellers / offers — 2 منتجات في الصف زي Figma موبايل */
  .landing-bestsellers { padding: 40px 16px 0; }
  .landing-fp-grid { display: none; }
  .landing-fp-grid--mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
  }
  .landing-fp-grid--mobile .fp-card { width: 100%; min-width: 0; }
}

/* =======================================================================
 * Sections 7–14
 * ==================================================================== */

/* ---- Section 7: Two banners (quiz + comparison) ---------------------- */
.landing-banners {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 64px 80px 0;
  direction: ltr;                  /* quiz left, comparison right (Figma) */
}
.landing-banner {
  position: relative;
  flex: 0 0 631px;
  width: 631px;
  height: 393px;
  border-radius: 16px;
  overflow: hidden;
}
.landing-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-banner__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-banner__content {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100% - 48px);
  text-align: right;               /* RTL-safe right alignment */
  direction: rtl;
}
.landing-banner__title { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 700; color: #481c26; }
.landing-banner__text  { margin: 0 0 16px; font-size: 16px; line-height: 24px; font-weight: 500; color: #602532; }
.landing-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 10px 32px;
  border-radius: 99px;
  border: 1px solid #90374c;
  background: transparent;
  color: #90374c;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.landing-banner__cta:hover { background: #90374c; color: #fff; }

/* ---- Section 8: Big banner + hotspot (reuses homepage hotspot JS) ----- */
.landing-bigbanner { margin-top: 64px; padding: 0; }
.landing-bigbanner .hotspot-discovery__viewport { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; }
.landing-bigbanner .hotspot-discovery__track { display: block; width: 100%; margin: 0; padding: 0; overflow: visible; }
.landing-bigbanner__card { position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none; flex: none; }
.landing-bigbanner__frame { position: relative; width: 100%; aspect-ratio: 1440 / 800; overflow: hidden; }
.landing-bigbanner__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-bigbanner__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-bigbanner__tint { position: absolute; inset: 0; background: rgba(168, 64, 88, .15); }
/* spot dot positioning is inherited from .hotspot-discovery__spot (home) */

/* ---- Section 9: Offers ----------------------------------------------- */
.landing-offers { padding: 64px 80px 0; }
.landing-offers__head { text-align: center; }
.landing-offers__sub { margin: 8px 0 0; font-size: 16px; line-height: 28px; color: #602532; text-align: center; }
.landing-offers .landing-fp-grid { margin-top: 24px; }
.landing-fp-grid--wrap { flex-wrap: wrap; row-gap: 24px; justify-content: center; }

/* ---- Section 10: Doctors "شاهدنا في الواقع" -------------------------- */
.landing-doctors { padding: 64px 80px 0; }
.landing-doctors__grid { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.landing-doctor { margin: 0; width: 249.6px; display: flex; flex-direction: column; gap: 8px; }
.landing-doctor__media { position: relative; width: 100%; aspect-ratio: 249.6 / 397; border-radius: 12px; overflow: hidden; background: #f4dfe5; }
.landing-doctor__img { width: 100%; height: 100%; object-fit: cover; }
.landing-doctor__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .85);
}
.landing-doctor__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #90374c;
}
.landing-doctor__name { font-size: 16px; line-height: 24px; font-weight: 500; color: #262626; text-align: center; }

/* ---- Section 11: Usage guide ----------------------------------------- */
.landing-guide { display: flex; gap: 40px; align-items: center; justify-content: flex-end; padding: 64px 80px 0; }
.landing-guide__media { flex: 0 0 509px; width: 509px; height: 380px; border-radius: 8px; overflow: hidden; }
.landing-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.landing-guide__text { max-width: 599px; text-align: right; direction: rtl; }
.landing-guide__lead { margin: 0 0 16px; font-size: 18px; line-height: 28px; font-weight: 500; color: #301219; }
.landing-guide__list { margin: 0; padding: 0; list-style: none; }
.landing-guide__list li { margin-bottom: 13px; font-size: 16px; line-height: 24px; font-weight: 500; color: #602532; text-align: right; }
.landing-guide__list li:last-child { margin-bottom: 0; }
.landing-guide__link { display: inline-block; margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 500; color: #90374c; text-decoration: underline; }

/* ---- Section 12: Reviews "منكم ولنا" --------------------------------- */
.landing-reviews { padding-top: 64px; }
.landing-reviews .trust-proof__title.landing-section-title { font-size: 24px; line-height: 32px; color: #481c26; }

/* smaller (24px) section titles: doctors + reviews */
.landing-section-title--sm { font-size: 24px; line-height: 32px; }

/* ---- Section 13: FAQ — reuses themed homepage section ---------------- */
.landing-faq { padding-top: 24px; }

/* ---- Section 14: Mobile sticky bar (hidden on desktop) --------------- */
.landing-sticky { display: none; }

/* =======================================================================
 * Mobile  ≤ 768px  — sections 7–14
 * ==================================================================== */
@media (max-width: 768px) {
  /* Banners — stacked, comparison first */
  .landing-banners { flex-direction: column; gap: 16px; padding: 40px 16px 0; direction: rtl; }
  .landing-banner { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 343 / 301; }
  .landing-banner--compare { order: -1; }
  .landing-banner__content { top: 16px; right: 24px; left: 24px; width: auto; max-width: none; }
  .landing-banner--quiz .landing-banner__content { text-align: right; }       /* Figma: quiz right */
  .landing-banner--compare .landing-banner__content { text-align: center; }   /* Figma: comparison centered */
  /* smaller mobile type (Figma): compare title 18px, quiz title 16px, text 14px */
  .landing-banner__title { font-size: 18px; line-height: 28px; margin-bottom: 6px; }
  .landing-banner--quiz .landing-banner__title { font-size: 16px; line-height: 24px; }
  .landing-banner__text { font-size: 14px; line-height: 20px; margin-bottom: 12px; }

  /* ---- banner bg framing + centered content (from home promo-cta values) ---- */
  /* الكارد الأول (compare) */
  .landing-banner--compare {
    height: 301px !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;
  }
  .landing-banner--compare .landing-banner__bg img {
    position: absolute !important;
    width: 127.07% !important;
    height: 127.06% !important;
    left: -27.02% !important;
    top: -4.52% !important;
    object-fit: fill !important;
    max-width: none !important;
  }
  .landing-banner--compare .landing-banner__content {
    left: 50% !important;
    right: unset !important;
    transform: translateX(-50%) !important;
    width: 295px !important;
    text-align: center !important;
    top: 16px !important;
  }

  /* الكارد التاني (quiz) */
  .landing-banner--quiz {
    height: 301px !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;
  }
  .landing-banner--quiz .landing-banner__bg img {
    position: absolute !important;
    width: 117.36% !important;
    height: 125.55% !important;
    left: -8.62% !important;
    top: -3.77% !important;
    object-fit: fill !important;
    max-width: none !important;
  }
  .landing-banner--quiz .landing-banner__content {
    left: 50% !important;
    right: unset !important;
    transform: translateX(-50%) !important;
    width: 295px !important;
    text-align: center !important;
    top: 16px !important;
  }

  .landing-banner__cta {
    position: static !important;
    display: inline-block !important;
  }

  /* Big banner — taller mobile crop; spots keep their % positions (home style) */
  .landing-bigbanner { margin-top: 40px; }
  .landing-bigbanner__frame { aspect-ratio: 375 / 550; }

  /* Offers */
  .landing-offers { padding: 40px 16px 0; }

  /* Doctors — horizontal scroll */
  .landing-doctors { padding: 40px 0 0; }
  .landing-doctors__grid {
    justify-content: flex-start; gap: 12px; margin-top: 24px;
    padding: 0 16px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  }
  .landing-doctors__grid::-webkit-scrollbar { display: none; }
  .landing-doctor { width: 193px; flex: 0 0 193px; }
  .landing-doctor__media { aspect-ratio: 193 / 326; }

  /* Guide — image on top, text below */
  .landing-guide { flex-direction: column; gap: 16px; align-items: stretch; padding: 40px 16px 0; }
  .landing-guide__media { order: -1; flex: 0 0 auto; width: 100%; height: 357px; }
  .landing-guide__text { align-items: flex-end; }

  /* Reviews */
  .landing-reviews { padding-top: 40px; }

  /* Sticky bottom bar */
  .landing-sticky {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: #fff; padding: 12px 16px; box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  .landing-sticky__btn {
    display: flex; align-items: center; justify-content: center; height: 44px;
    border-radius: 99px; background: #f05c7e; color: #fff;
    font-size: 16px; font-weight: 700; text-decoration: none;
  }
  /* keep content clear of the sticky bar */
  .landing { padding-bottom: 68px; }
}

/* TASK: شيل السيكشن الأبيض الفاضي فوق الفوتر — أعلى الفوتر الشفاف كان بيكشف خلفية
   الـ body البيضاء. نلوّنه بنهاية تدرّج المحتوى فيختفي الأبيض. (landing فقط) */
.elementor-909 { background-color: #C96B8A; }

/* TASK: سيكشن "منكم ولنا" شفاف عشان يكمل مع تدرّج الصفحة (landing فقط) */
.landing-reviews { background: transparent; }

/* ===========================================================================
 * FULL LANDING PALETTE — every colour on /landing/ mapped to a --landing-*
 * variable fed by the page's "ألوان صفحة اللاندينج" meta box (injected on :root
 * by wp_head, landing template only). THIS stylesheet loads on the landing
 * template alone, so even the global-component selectors below (header, footer,
 * product cards, reviews, FAQ, mini-cart) only ever repaint on /landing/ —
 * nothing here affects any other page. Inline fallbacks = the current defaults.
 * ======================================================================== */

/* ---- Header ---------------------------------------------------------------- */
.header-desktop,
.header-mobile,
.site-header.is-condensed .header-desktop { background: var(--landing-header-bg, #FFFFFF); }
.announcement { background: var(--landing-announce-bg, #008ED4); }
.header-icon,
.search-desktop__icon,
.search-mobile__icon,
.header-account__menu-icon { color: var(--landing-header-icons, #003896); }
.g-logo { background-color: var(--landing-logo, #002F87); }

/* ---- Wave / trust bar ------------------------------------------------------ */
.landing-trust { background: var(--landing-trust-bg, #FFD6DC); }
.landing-trust__item { color: var(--landing-trust-text, #003896); }
/* Wave = EXACTLY the trust-bar colour (same variable); the mask (above) makes
   everything below the wave transparent, so there is no white gap. */
.landing-hero__band { background-color: var(--landing-trust-bg, #FFD6DC); }

/* ---- Hero + section titles ------------------------------------------------- */
.landing-hero__title { color: var(--landing-hero-title, #003896); }
.landing-section-title { color: var(--landing-section-title, #003896); }
.landing-cats__title { color: var(--landing-cat-title, #003896); }
.landing-cta { background: var(--landing-cta-bg, #E40045); color: var(--landing-cta-text, #FFFFFF); }
.landing-cta:hover { background: var(--landing-cta-hover, #C0003B); }

/* ---- Page background + gradient -------------------------------------------- */
/* The Elementor landing page renders widgets directly inside .landing (there is
   no legacy .landing-rest wrapper), so the FULL-PAGE white→yellow gradient must
   live on .landing itself — otherwise only the solid end colour shows. */
.landing {
  background: linear-gradient(to bottom, var(--landing-grad-start, #ffffff) 0%, var(--landing-grad-end, #fbe8a1) 100%);
}
.landing-rest { background: linear-gradient(180deg, var(--landing-grad-start, #FFFFFF) 0%, var(--landing-grad-end, #C96B8A) 100%); }
.elementor-909 { background-color: var(--landing-grad-end, #C96B8A); }

/* ---- Categories ------------------------------------------------------------ */
.landing-cat__img { background: var(--landing-cat-img-bg, #FCE9EE); }
.landing-cat__name { color: var(--landing-cat-name, #003896); }
.landing-cat__count { color: var(--landing-cat-count, #A6A5A5); }

/* ---- Product cards (sliders) ---------------------------------------------- */
.landing .fp-card,
.landing .fp-media-frame { background: var(--landing-card-bg, #FBFCFE); }
.landing .fp-name { color: var(--landing-card-name, #003896); }
.landing .fp-amount { color: var(--landing-card-price, #003896); }
.landing .fp-currency { color: var(--landing-card-currency, #667796); }
.landing .fp-price--old .fp-amount { color: var(--landing-card-old-price, #B5BFD0); }
.landing .fp-price--old .fp-currency { color: var(--landing-card-old-currency, #9EABBE); }
.landing .fp-price--sale .fp-amount,
.landing .fp-price--sale .fp-currency { color: var(--landing-card-sale-price, #E40045); }
.landing .fp-stars { color: var(--landing-card-stars, #E40045); }
.landing .fp-rating,
.landing .fp-count { color: var(--landing-card-rating, #8C98AD); }
.landing .fp-divider { background: var(--landing-card-divider, #D8E0ED); }
.landing .fp-cta { background: var(--landing-card-cta-bg, #002F87); color: var(--landing-card-cta-text, #FFFFFF); }
.landing .fp-action { color: var(--landing-card-action, #003896); }
.landing .fp-wishlist.is-active { color: var(--landing-card-wishlist, #E0245E); }

/* ---- Card badges ----------------------------------------------------------- */
.landing .fp-badge--best { background: var(--landing-badge-best-bg, #FBCC0F); color: var(--landing-badge-best-text, #003896); }
.landing .fp-badge--limited { background: var(--landing-badge-limited-bg, #E40045); color: var(--landing-badge-limited-text, #FFFFFF); }
.landing .fp-badge--new { background: var(--landing-badge-new-bg, #17A56B); color: var(--landing-badge-new-text, #FFFFFF); }
.landing .fp-badge--featured { background: var(--landing-badge-featured-bg, #003896); color: var(--landing-badge-featured-text, #FFFFFF); }
.landing .fp-discount { background: var(--landing-discount-bg, #E40045); color: var(--landing-discount-text, #FFFFFF); }

/* ---- Banners --------------------------------------------------------------- */
.landing-banner__title { color: var(--landing-banner-title, #481C26); }
.landing-banner__text { color: var(--landing-banner-text, #602532); }
.landing-banner__cta { color: var(--landing-banner-cta-text, #90374C); border-color: var(--landing-banner-cta-border, #90374C); }
.landing-banner__cta:hover { background: var(--landing-banner-cta-hover-bg, #90374C); color: var(--landing-banner-cta-hover-text, #FFFFFF); }
.landing-bigbanner__tint { background: var(--landing-bigbanner-tint, #A84058); opacity: .15; }

/* ---- Doctors ("شاهدنا في الواقع") ----------------------------------------- */
.landing-doctor__media { background: var(--landing-doctor-media-bg, #F4DFE5); }
.landing-doctor__play { border-left-color: var(--landing-doctor-play-triangle, #90374C); }
.landing-doctor__name { color: var(--landing-doctor-name, #003896); }

/* ---- Usage guide ----------------------------------------------------------- */
/* Transparent so the full-page .landing gradient shows through (a solid fill
   here would tile the page yellow). Admin can still set a colour via the
   widget's bg control, which is applied inline when non-empty. */
.landing-guide { background: transparent; }
.landing-guide__lead { color: var(--landing-guide-lead, #003896); }
.landing-guide__list li { color: var(--landing-guide-list, #003896); }
.landing-guide__link { color: var(--landing-guide-link, #90374C); }

/* ---- Reviews (منكم ولنا) --------------------------------------------------- */
/* Transparent so the page gradient shows through (was a solid yellow fill). */
.landing-reviews { background: transparent; }
.landing-reviews .trust-proof__title.landing-section-title,
.landing-reviews .trust-proof__title,
.landing-reviews .landing-section-title { color: var(--landing-reviews-title, #003896); }
.landing .trust-proof__card { background: var(--landing-review-card-bg, #FFFFFF); }
.landing .trust-proof__body { color: var(--landing-review-text, #481C26); }
.landing .trust-proof__name,
.landing .trust-proof__product-name { color: var(--landing-review-name, #002F87); }
.landing .trust-proof__stars { color: var(--landing-review-stars, #E40045); }

/* ---- FAQ ------------------------------------------------------------------- */
.landing-faq .faq__title { color: var(--landing-faq-title, #002363); }
.landing-faq .faq__item { border-bottom-color: var(--landing-faq-item-border, #D9DDE4); }
.landing-faq .faq__item[open],
.landing-faq .faq__item.is-open { background: var(--landing-faq-open-bg, #F8FAFC); }
.landing-faq .faq__question { color: var(--landing-faq-question, #090832); }
.landing-faq .faq__question::before,
.landing-faq .faq__question::after { background: var(--landing-faq-icon, #090832); }
.landing-faq .faq__answer,
.landing-faq .faq__answer p { color: var(--landing-faq-answer, #606971); }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--landing-footer-bg, #004189); color: var(--landing-footer-text, #FFFFFF); }
/* body-scoped to out-rank compound footer rules (e.g. legal-links a). */
body.page-template-page-landing .site-footer__title { color: var(--landing-footer-heading, #FFFFFF); }
body.page-template-page-landing .site-footer a { color: var(--landing-footer-link, #FFFFFF); }
.site-footer__divider,
.site-footer__brand-rule,
.site-footer__locale-divider { background: var(--landing-footer-divider, #FFFFFF); border-color: var(--landing-footer-divider, #FFFFFF); }

/* ---- Mini-cart sidebar ----------------------------------------------------- */
.mini-cart-overlay {
  --mini-cart-blue: var(--landing-cart-blue, #002F87);
  --mini-cart-blue-dark: var(--landing-cart-blue-dark, #001640);
  --mini-cart-text: var(--landing-cart-text, #000000);
  --mini-cart-muted: var(--landing-cart-muted, #71717B);
  --mini-cart-border: var(--landing-cart-border, #E5E5E5);
}
.mini-cart { background: var(--landing-cart-bg, #FFFFFF); }
.mini-cart__qty span { background: var(--landing-cart-qty-bg, #F5F5F5); }

/* ---- Mobile-only: hero image tint + sticky bottom bar --------------------- */
@media (max-width: 768px) {
  .landing-hero::before {
    background: linear-gradient(200deg, var(--landing-hero-overlay, #FBCED8) 7%, var(--landing-hero-overlay, #FBCED8) 31%, transparent 59%);
    opacity: .6;
  }
  .landing-sticky { background: var(--landing-sticky-bar-bg, #FFFFFF); }
  .landing-sticky__btn { background: var(--landing-sticky-btn-bg, #E40045); color: var(--landing-sticky-btn-text, #FFFFFF); }
}

/* Landing FAQ renders as ONE responsive block (not desktop+mobile variants),
   so it appears exactly once in the DOM and on screen. */
.faq-landing-solo { display: block; width: 100%; margin-inline: auto; padding: 24px 16px 0; box-sizing: border-box; }
@media (min-width: 768px) { .faq-landing-solo { padding: 34px 24px 0; } }