/* ==========================================================================
   Hafez: Divan & Oracle product page — reuses the Hajji Journey components
   (haci.css) in the app's own palette: night blue, manuscript gold, parchment.
   Loaded after site.css and haci.css.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

.hafiz-page {
  --ink: #0b132b;
  --coral: #e5b84b;      /* gold (buttons, step numbers) */
  --coral-d: #a8802a;
  --sun: #e5b84b;
  --cream: #fbf5e6;
  --sand: #efe2c2;
  --sky: #dfe6f5;
  --mint: #b8892b;       /* check marks */
  --on-accent: #0b132b;
  --hz-line: rgba(184, 137, 43, .45);
  --h-font: 'Cormorant Garamond', 'IBM Plex Sans Arabic', Georgia, serif;
}
.hafiz-page h1, .hafiz-page h2, .hafiz-page h3, .hafiz-page h4 { font-weight: 700; letter-spacing: 0; }
html[lang="ar"] .hafiz-page { --h-font: 'IBM Plex Sans Arabic', var(--font-heading); }

/* ---------- Hero: night sky over Shiraz ---------------------------------- */
.hafiz-page .h-hero { padding-bottom: 96px; color: #f5ecd2; background:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 46% 12%, #f6e7b8 50%, transparent 51%),
  radial-gradient(1px 1px at 64% 40%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 82% 70%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 92% 24%, #f6e7b8 50%, transparent 51%),
  radial-gradient(1px 1px at 6% 84%, #fff 50%, transparent 51%),
  radial-gradient(120% 90% at 70% 0%, #22346e 0%, #121d42 45%, #0b132b 100%); }
body.dark-theme .hafiz-page .h-hero { color: #f5ecd2; }
.hafiz-page .h-sky .moon { position: absolute; top: 56px; inset-inline-end: 7%; width: 96px; height: 96px; border-radius: 50%; box-shadow: inset -22px 10px 0 0 #f1d58a; filter: drop-shadow(0 0 22px rgba(241, 213, 138, .45)); }
html[dir="rtl"] .hafiz-page .h-sky .moon { box-shadow: inset 22px 10px 0 0 #f1d58a; }
.hafiz-page .h-hero h1 { color: #f5ecd2; -webkit-text-stroke: 0; text-shadow: 0 2px 24px rgba(229, 184, 75, .25); font-size: clamp(2.6rem, 6vw, 4.6rem); }
.hafiz-page .h-hero h1 em { color: #e5b84b; font-style: italic; }
html[lang="ar"] .hafiz-page .h-hero h1 { -webkit-text-stroke-width: 0; }
html[lang="ar"] .hafiz-page .h-hero h1 em { font-style: normal; }
.hafiz-page .h-lead { opacity: .88; font-weight: 500; }
.hafiz-page .h-icon { border: 2px solid #e5b84b; box-shadow: 0 0 0 6px rgba(229, 184, 75, .18), 0 18px 40px -12px rgba(0, 0, 0, .6); }
.hafiz-page .h-status { background: #e5b84b; color: #0b132b; border: 0; font-family: var(--font-body, inherit); font-weight: 800; }
.hafiz-page .store-badge { background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(229, 184, 75, .6); box-shadow: none; }
.hafiz-page .h-points svg { color: #e5b84b; }
.hafiz-page .phone-frame.big { background: #050a1a; box-shadow: 0 0 0 2px rgba(229, 184, 75, .55), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.hafiz-page .phone-frame.big::before { background: #050a1a; }
.hafiz-page .h-bubble { background: #fbf5e6; color: #0b132b; border: 1.5px solid #b8892b; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.hafiz-page .hz-verse { margin-top: 26px; padding-inline-start: 16px; border-inline-start: 3px solid #e5b84b; max-width: 520px; }
.hafiz-page .hz-verse .fa { display: block; font: 600 1.35rem/1.9 'IBM Plex Sans Arabic', serif; direction: rtl; text-align: start; color: #f1d58a; }
.hafiz-page .hz-verse small { display: block; opacity: .75; font-size: .92rem; }

/* ---------- Sections ------------------------------------------------------ */
.hafiz-page .h-step, .hafiz-page .h-feature, .hafiz-page .h-plan, .hafiz-page .h-cta, .hafiz-page .faq {
  border: 1.5px solid var(--hz-line); box-shadow: 0 14px 34px -22px rgba(11, 19, 43, .45);
}
body.dark-theme .hafiz-page .h-step, body.dark-theme .hafiz-page .h-feature, body.dark-theme .hafiz-page .h-plan, body.dark-theme .hafiz-page .h-cta, body.dark-theme .hafiz-page .faq { border-color: rgba(229, 184, 75, .3); box-shadow: 0 14px 34px -22px #000; }
.hafiz-page .h-num { border: 0; background: #0b132b; color: #e5b84b; font-family: var(--h-font); }
body.dark-theme .hafiz-page .h-num { background: #e5b84b; color: #0b132b; }
.hafiz-page .h-ic, .hafiz-page .h-feature:nth-child(n) .h-ic { border: 0; background: #0b132b; color: #e5b84b; }
.hafiz-page .h-feature:nth-child(even) .h-ic { background: #e5b84b; color: #0b132b; }
body.dark-theme .hafiz-page .h-feature:nth-child(odd) .h-ic { background: #1c2a57; }
.hafiz-page .h-gallery .phone-frame, .hafiz-page .h-gallery .phone-frame::before { background: #050a1a; }
.hafiz-page .h-plan.pro { background: #fbf2d9; }
body.dark-theme .hafiz-page .h-plan.pro { background: #262111; }
.hafiz-page .faq summary::after { border: 0; background: #e5b84b; color: #0b132b; }
.hafiz-page .h-cta { background: linear-gradient(135deg, #121d42, #0b132b); color: #f5ecd2; }
.hafiz-page .h-cta img { border: 2px solid #e5b84b; }
.hafiz-page .h-cta .btn-primary { background: #e5b84b; color: #0b132b; border: 0; box-shadow: 0 6px 0 #a8802a; }
.hz-note { max-width: 820px; margin: 0 auto; padding: 18px 22px; border-radius: 18px; border: 1.5px dashed var(--hz-line); color: var(--text-soft); font-size: .95rem; text-align: center; }

/* Gift link landing (/apps/hafiz/gift) */
.hz-gift { max-width: 620px; margin: 0 auto; text-align: center; }
.hz-gift img { margin: 0 auto 18px; border-radius: 26px; }
.hz-gift .hz-gift-card { margin: 22px 0; padding: 26px; border-radius: 22px; background: linear-gradient(135deg, #121d42, #0b132b); color: #f5ecd2; border: 1.5px solid rgba(229, 184, 75, .5); }
.hz-gift .hz-gift-card p, .hz-gift .hz-gift-card span { color: #f5ecd2; }
.hz-gift .hz-gift-card b { color: #e5b84b; }
.hz-gift .hz-gift-to { font: 700 1.8rem var(--font-heading); color: var(--text); margin-bottom: 4px; }
.hz-gift .hz-gift-actions { margin: 8px 0 14px; }


/* Store screenshots are 1206×2622 (iPhone 6.3"), shown at 720×1566 */
.hafiz-page .phone-frame img { aspect-ratio: 720 / 1566; background: #0b132b; }