/* ============================================================================
 * VIGLOW GO — sections.css
 * Content sections built in HTML (no image-stack): hero · problem · benefits ·
 * 3-step kit · before/after results · review cards · section image media.
 * Feminine, airy, conversion-focused. Graceful image fallbacks.
 * ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────────*/
.vg-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--vg-blush) 60%, var(--vg-cream) 100%); padding: 28px 0 34px; }
.vg-hero .vg-shell { display: grid; gap: 20px; }
.vg-hero-copy { display: grid; gap: 14px; text-align: center; }
.vg-hero-copy h1 { font-size: clamp(27px, 8vw, 40px); color: var(--vg-plum); }
.vg-hero-copy h1 b { color: var(--vg-rose-deep); }
.vg-hero-copy .vg-hero-sub { color: var(--vg-muted-ink); font-size: 16px; }
.vg-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vg-hero-badges span { font-size: 11.5px; font-weight: 800; color: var(--vg-rose-deep); background: var(--vg-white); border: 1px solid var(--vg-line); border-radius: 999px; padding: 6px 12px; }
.vg-hero-figure { position: relative; margin: 0; border-radius: var(--vg-radius); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(135deg, var(--vg-cream), var(--vg-cream-2)); box-shadow: var(--vg-shadow); }
.vg-hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.vg-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--vg-rose-deep); text-align: center; }
.vg-media-fallback .vg-media-emoji { font-size: 44px; }
.vg-hero-figure.is-empty img { display: none; }
.vg-hero-rating { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--vg-ink); }
.vg-hero-rating .vg-stars { color: var(--vg-gold); letter-spacing: 2px; }

/* ── Generic section heading + media (used above images/blocks) ─────────────*/
.vg-block-head { display: grid; gap: 8px; text-align: center; margin-bottom: 18px; }
.vg-block-head h2 { font-size: clamp(21px, 5.6vw, 29px); }
.vg-block-head p { color: var(--vg-muted-ink); font-size: 15px; }
.vg-figure { position: relative; margin: 0 0 4px; border-radius: var(--vg-radius); overflow: hidden; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--vg-cream), var(--vg-cream-2)); box-shadow: var(--vg-shadow-sm); }
.vg-figure.vg-figure-wide { aspect-ratio: 4 / 3; }
.vg-figure img { width: 100%; height: 100%; object-fit: cover; }
.vg-figure.is-empty img { display: none; }

/* ── Problem section ───────────────────────────────────────────────────────*/
.vg-problem-grid { display: grid; gap: 12px; }
.vg-problem-card { display: flex; gap: 12px; align-items: flex-start; background: var(--vg-white); border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 15px; box-shadow: var(--vg-shadow-sm); }
.vg-problem-card .vg-ic { font-size: 24px; flex: 0 0 auto; }
.vg-problem-card b { display: block; font-size: 14.5px; color: var(--vg-plum); font-family: var(--vg-font-heading); }
.vg-problem-card p { font-size: 13px; color: var(--vg-muted-ink); margin-top: 2px; }

/* ── Benefits cards ────────────────────────────────────────────────────────*/
.vg-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vg-benefit { background: var(--vg-white); border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px 14px; text-align: center; box-shadow: var(--vg-shadow-sm); }
.vg-benefit .vg-ic { font-size: 28px; }
.vg-benefit h3 { font-size: 14.5px; margin-top: 6px; color: var(--vg-plum); }
.vg-benefit p { font-size: 12.5px; color: var(--vg-muted-ink); margin-top: 4px; }

/* ── 3-step kit / ritual ───────────────────────────────────────────────────*/
.vg-steps { display: grid; gap: 12px; counter-reset: vgstep; }
.vg-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; background: var(--vg-white); border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 15px; box-shadow: var(--vg-shadow-sm); }
.vg-step .vg-step-num { counter-increment: vgstep; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--vg-rose), var(--vg-rose-deep)); font-family: var(--vg-font-heading); }
.vg-step .vg-step-num::before { content: counter(vgstep); }
.vg-step b { font-size: 15px; color: var(--vg-plum); font-family: var(--vg-font-heading); }
.vg-step p { font-size: 13px; color: var(--vg-muted-ink); margin-top: 2px; }

/* ── Before / after results ────────────────────────────────────────────────*/
.vg-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-ba { position: relative; border-radius: var(--vg-radius); overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(135deg, var(--vg-cream), var(--vg-cream-2)); box-shadow: var(--vg-shadow-sm); }
.vg-ba img { width: 100%; height: 100%; object-fit: cover; }
.vg-ba.is-empty img { display: none; }
.vg-ba-tag { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 900; color: #fff; padding: 4px 10px; border-radius: 999px; }
.vg-ba-tag.is-before { background: rgba(2,58,54,.78); }
.vg-ba-tag.is-after { background: var(--vg-rose-deep); }
.vg-ba-note { text-align: center; font-size: 12px; color: var(--vg-muted-ink); margin-top: 10px; }

/* ── Review cards (text testimonials) ──────────────────────────────────────*/
.vg-reviews { display: grid; gap: 12px; }
.vg-review { background: var(--vg-white); border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px; box-shadow: var(--vg-shadow-sm); }
.vg-review .vg-stars { color: var(--vg-gold); letter-spacing: 2px; font-size: 15px; }
.vg-review p { font-size: 14px; color: var(--vg-ink); margin: 8px 0 10px; }
.vg-review .vg-review-author { display: flex; align-items: center; gap: 9px; }
.vg-review .vg-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--vg-rose), var(--vg-gold)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; }
.vg-review .vg-review-name { font-size: 13px; font-weight: 800; color: var(--vg-plum); }
.vg-review .vg-review-meta { font-size: 11.5px; color: var(--vg-muted-ink); }
.vg-review .vg-verified { color: var(--vg-sage-deep); font-weight: 800; }

@media (min-width: 760px) {
  .vg-hero .vg-shell { grid-template-columns: 1fr 1fr; align-items: center; }
  .vg-hero-copy { text-align: right; }
  .vg-benefits-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================================
 * AFIQ — image-stack layout (like iq.maxirisepro.com)
 * Full-width designed reference images, one under another. Mobile-first, light,
 * fast. A one-line heading + one-line sub may sit above each image.
 * ========================================================================== */
.vg-stack-head { text-align: center; padding: 26px 18px 12px; display: grid; gap: 6px; }
.vg-stack-head h2 { font-size: clamp(20px, 5.4vw, 27px); color: var(--vg-plum); }
.vg-stack-head h2 b { color: var(--vg-rose-deep); }
.vg-stack-head p { font-size: 14.5px; color: var(--vg-muted-ink); }
.vg-stack-section { padding: 0; }
.vg-stack { max-width: var(--vg-shell); margin: 0 auto; }
.vg-stack-figure { margin: 0; position: relative; }
.vg-stack-img { width: 100%; height: auto; display: block; }
/* graceful fallback if a reference image is missing */
.vg-stack-figure.is-empty { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--vg-cream), var(--vg-cream-2)); display: grid; place-items: center; }
.vg-stack-figure.is-empty img { display: none; }
.vg-stack-figure .vg-media-fallback { display: none; }
.vg-stack-figure.is-empty .vg-media-fallback { display: grid; }

/* Hero image flush under the fixed header/countdown — guarantee ~0px gap. */
.vg-page > .vg-stack-section--first { margin-top: 0 !important; padding-top: 0 !important; }
.vg-stack-section--first .vg-stack { margin-top: 0; }
.vg-stack-section--first .vg-stack-figure { margin: 0; }
.vg-stack-section--first .vg-stack-img { display: block; margin-top: 0; vertical-align: top; }

/* ============================================================================
 * VIGLOW — Testimonials (تجارب البنات) + Comparison (المقارنة)
 * Reusable, token-driven, mobile-first RTL. Added before the offers/packages.
 * Pure HTML/CSS — no JS, no tracking. Stars use the brand teal (not gold).
 * ========================================================================== */
/* ── Testimonials ──────────────────────────────────────────────────────────*/
.vg-testi-head { text-align: center; display: grid; gap: 8px; justify-items: center; margin-bottom: 18px; }
.vg-testi-head h2 { font-size: clamp(22px, 5.6vw, 30px); color: var(--vg-plum); line-height: 1.3; }
.vg-rating-block { display: inline-flex; align-items: center; gap: 8px; }
.vg-rating-num { font-size: 30px; font-weight: 900; color: var(--vg-plum); font-family: var(--vg-font-heading); line-height: 1; }
.vg-rating-stars { color: var(--vg-rose); letter-spacing: 2px; font-size: 18px; }
.vg-rating-count { color: var(--vg-muted-ink); font-weight: 700; font-size: 14px; }
.vg-testi-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px; scrollbar-width: none;
}
.vg-testi-track::-webkit-scrollbar { display: none; }
.vg-testi-card {
  scroll-snap-align: center; background: var(--vg-white); border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); padding: 16px; box-shadow: var(--vg-shadow-sm);
  display: grid; gap: 8px; align-content: start;
}
.vg-testi-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vg-testi-card header b { font-size: 14.5px; color: var(--vg-plum); font-family: var(--vg-font-heading); }
.vg-testi-card .vg-stars { color: var(--vg-rose); letter-spacing: 1.5px; font-size: 13px; }
.vg-testi-tag {
  justify-self: start; font-size: 11px; font-weight: 800; color: var(--vg-rose-deep);
  background: rgba(47,168,160,.10); border: 1px solid rgba(47,168,160,.30);
  border-radius: 999px; padding: 3px 9px;
}
.vg-testi-card p { font-size: 13.5px; color: var(--vg-ink); line-height: 1.7; margin: 0; }
.vg-testi-card .vg-verified { font-size: 11.5px; font-weight: 800; color: var(--vg-sage-deep); }
.vg-testi-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.vg-testi-chips span {
  font-size: 11.5px; font-weight: 700; color: var(--vg-muted-ink);
  background: var(--vg-white); border: 1px dashed var(--vg-line); border-radius: 999px; padding: 5px 11px;
}
.vg-testi-chips span::before { content: "✓ "; color: var(--vg-sage-deep); }
@media (min-width: 760px) {
  .vg-testi-track { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; }
}

/* ── Comparison ────────────────────────────────────────────────────────────*/
.vg-compare-head { text-align: center; display: grid; gap: 8px; justify-items: center; margin-bottom: 18px; }
.vg-compare-head h2 { font-size: clamp(22px, 5.6vw, 30px); color: var(--vg-plum); }
.vg-compare-badge { font-size: 11.5px; font-weight: 800; color: #fff; background: var(--cta-bg); border-radius: 999px; padding: 5px 14px; }
.vg-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.vg-compare-col { border-radius: var(--vg-radius); padding: 16px 13px; box-shadow: var(--vg-shadow-sm); }
.vg-compare-col-head { font-family: var(--vg-font-heading); font-weight: 900; font-size: 16px; text-align: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--vg-line); }
.vg-compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vg-compare-col li { font-size: 12.5px; line-height: 1.5; display: grid; grid-template-columns: 16px 1fr; gap: 7px; align-items: start; }
.vg-compare-col li i { font-style: normal; font-weight: 900; font-size: 13px; line-height: 1.5; }
.vg-compare-best { background: linear-gradient(180deg, #FFFFFF, #F1FAF9); border: 2px solid var(--vg-rose); }
.vg-compare-best .vg-compare-col-head { color: var(--vg-rose-deep); }
.vg-compare-best .vg-ok { color: var(--vg-rose-deep); }
.vg-compare-best li { color: var(--vg-ink); font-weight: 600; }
.vg-compare-plain { background: #F2F5F4; border: 1px solid var(--vg-line); }
.vg-compare-plain .vg-compare-col-head { color: var(--vg-muted-ink); }
.vg-compare-plain .vg-no { color: #9AA3A2; }
.vg-compare-plain li { color: var(--vg-muted-ink); }

/* Lead heading above an image (problem intro) — no card/shadow, blends in. */
.vg-stack-head .vg-lead-sub  { font-size: 15px; font-weight: 800; color: var(--vg-rose-deep); margin: 0; }
.vg-stack-head .vg-lead-desc { font-size: 13px; color: var(--vg-muted-ink); margin: 0; }

/* ============================================================================
 * AFIQ Offer Cards — MAXIRISE-style HORIZONTAL layout (same on mobile):
 *   [ radio · صورة | معلومات العرض | السعر ]  — one row, vertically centered.
 * Inherits the base 4-col grid (22px · 72px · 1fr · auto) from components.css;
 * here we only make the package image sit cleanly in its fixed 72px cell so the
 * card height never changes and titles/prices stay aligned across all cards.
 * ========================================================================== */
.vg-offer-imgwrap {
  width: 72px; height: 72px; flex: 0 0 72px;
  display: flex; align-items: center; justify-content: center;
}
.vg-offer-card .vg-offer-imgwrap img {
  width: 100%; height: 100%;
  object-fit: contain;   /* no crop, no stretch */
  visibility: visible;
}