/* ═══════════════════════════════════════════════════
   پویش همسنگر معنوی — v5.1 — Premium Full-Bleed
   ═══════════════════════════════════════════════════ */

/* ── Vazirmatn — self-hosted, zero external requests ── */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/vazirmatn-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/vazirmatn-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/vazirmatn-arabic-900-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/vazirmatn-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/vazirmatn-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/vazirmatn-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ── Variables ── */
:root {
  --dur:    .42s;
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.22,.64,1);
  --peek:   30px;
  --gap:    16px;
  --navy:   #0d2266;
  --gold:   #c9a227;
  --gold-l: #e6c840;
  --r:      26px;       /* card border-radius */
}
@media(min-width:480px)  { :root { --peek:44px; } }
@media(min-width:720px)  { :root { --peek:72px;  --gap:22px; } }
@media(min-width:1100px) { :root { --peek:120px; } }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
button, input, select, textarea { font-family: Vazirmatn, sans-serif; }
html, body { height:100%; }
body {
  font-family: Vazirmatn, sans-serif;
  direction: rtl; text-align: right;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* warm parchment + visible Islamic star tile */
  background-color: #f2ece0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='.6' stroke-opacity='.13'%3E%3Cpolygon points='50,6 58,17 71,13 68,27 78,35 68,43 71,57 58,53 50,64 42,53 29,57 32,43 22,35 32,27 29,13 42,17'/%3E%3Ccircle cx='50' cy='35' r='9' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
}


/* ═══════════════════════════════
   INTRO
═══════════════════════════════ */
.intro-overlay {
  position:fixed; inset:0; z-index:9999;
  background: linear-gradient(168deg,#07103a 0%,#0b1848 45%,#0f2070 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2.5rem 2rem; overflow-y:auto; overflow-x:hidden;
  transition: transform .95s cubic-bezier(.76,0,.24,1), opacity .4s ease;
}
/* صفحات کوچک‌ترین صفحه نمایش — ارتفاع کم */
@media(max-height:700px) {
  .intro-overlay {
    justify-content:flex-start;
    padding-top:1.4rem;
    padding-bottom:1.4rem;
  }
  .io  { margin-bottom:1rem; }
  .iq  { font-size:.84rem; line-height:1.9; }
  .is  { margin-top:.85rem; }
  .i-rec { margin-top:1rem; padding:.7rem .9rem; }
  .i-rec-body { font-size:.78rem; line-height:1.8; }
  .ibtn { margin-top:1.2rem; padding:.65rem 1.6rem; }
}
@media(max-height:580px) {
  .intro-overlay { padding-top:1rem; padding-bottom:1rem; }
  .io  { margin-bottom:.7rem; }
  .iq  { font-size:.8rem; line-height:1.75; }
  .i-rec { margin-top:.7rem; }
  .ibtn { margin-top:.9rem; }
}
.ip {
  position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='.45' stroke-opacity='.1'%3E%3Cpolygon points='60,6 71,20 88,16 84,33 96,44 84,55 88,72 71,68 60,82 49,68 32,72 36,55 24,44 36,33 32,16 49,20'/%3E%3Ccircle cx='60' cy='44' r='13' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.ig { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.ig1 { width:520px; height:520px; background:rgba(30,80,220,.14); top:-180px; right:-100px; }
.ig2 { width:460px; height:460px; background:rgba(201,162,39,.07); bottom:-120px; left:-80px; }
.ic  { position:relative; z-index:2; max-width:680px; width:100%; text-align:center; }
.io  {
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin-bottom:1.8rem;
  opacity:0; animation:fu .7s var(--spring) .3s forwards;
}
.iol     { flex:1; max-width:60px; height:1px; }
.iol.l   { background:linear-gradient(90deg,transparent,rgba(201,162,39,.55)); }
.iol.r   { background:linear-gradient(90deg,rgba(201,162,39,.55),transparent); }
.ist     { color:var(--gold-l); font-size:1rem; text-shadow:0 0 14px rgba(201,162,39,.4); }
.iq      { font-size:clamp(.88rem,2vw,1.05rem); line-height:2.15; color:#c8d3ee; text-align:justify; text-align-last:center; }
.il      { display:block; opacity:0; transform:translateY(12px); }
.is      { margin-top:1.4rem; color:#c09818; font-size:.84rem; font-style:italic; opacity:0; }
/* ── بلوک توصیه رهبر شهید ── */
.i-rec {
  margin-top: 1.6rem;
  padding: .95rem 1.1rem;
  background: rgba(201,162,39,.07);
  border: 1px solid rgba(201,162,39,.22);
  border-right: 3px solid rgba(201,162,39,.6);
  border-radius: 10px;
  text-align: right;
  opacity: 0;
  animation: fu .55s ease 0s forwards;
  animation-play-state: paused; /* JS زمان‌بندی را تنظیم می‌کند */
}
.i-rec-title {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: #e6c840;
  margin-bottom: .45rem;
  letter-spacing: .01em;
}
.i-rec-body {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.95;
  color: #c8d3ee;
}

.ibtn    {
  margin-top:2rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.76rem 2rem;
  background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.36);
  border-radius:50px; color:var(--gold-l);
  font-family:Vazirmatn,sans-serif; font-size:.88rem; font-weight:600;
  cursor:pointer; opacity:0;
  transition:background .2s,transform .18s,box-shadow .2s;
  backdrop-filter:blur(4px);
}
.ibtn:hover  { background:rgba(201,162,39,.18); transform:translateY(-2px); box-shadow:0 8px 22px rgba(201,162,39,.18); }
.ibtn:active { transform:scale(.97); }
.iprog {
  position:absolute; bottom:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--gold-l),rgba(201,162,39,.15));
  width:0%; transition:width linear;
}
.intro-overlay.leaving { transform:translateY(-100%); pointer-events:none; }
@keyframes fu { from{opacity:0;transform:translateY(13px);} to{opacity:1;transform:translateY(0);} }


/* ═══════════════════════════════
   APP SHELL
═══════════════════════════════ */
.app {
  height:100vh;

  height:100dvh;
  
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .6s ease .1s;
}
.app.visible { opacity:1; }


/* ═══════════════════════════════
   HEADER
═══════════════════════════════ */
.hd {
  flex-shrink:0; height:62px;
  padding:0 1.35rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(13,34,102,.08);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  position:relative; z-index:20;
  box-shadow:0 1px 0 rgba(13,34,102,.06), 0 4px 24px rgba(13,34,102,.07);
}
.hd-brand { display:flex; align-items:center; gap:.7rem; }
.hd-mark  {
  width:38px; height:38px;
  background:linear-gradient(135deg,#0d2266,#1a3a9f);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  box-shadow:0 3px 12px rgba(13,34,102,.28);
}
.hd-title { font-size:.95rem; font-weight:800; color:#0d2266; letter-spacing:-.01em; }
.hd-sub   { font-size:.6rem; color:rgba(13,34,102,.42); margin-top:.04rem; font-weight:500; }
.hd-live {
  display:flex; align-items:center; gap:.38rem;
  font-size:.7rem; font-weight:700; color:#166534;
  background:rgba(22,101,52,.09);
  border:1px solid rgba(22,101,52,.2);
  padding:.3rem .8rem; border-radius:50px;
  white-space:nowrap;
}
.hd-live::before {
  content:''; width:6px; height:6px;
  background:#22c55e; border-radius:50%;
  animation:pdot 2.2s infinite;
  flex-shrink:0;
}
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.3;transform:scale(.6);} }


/* ═══════════════════════════════
   STAGE
═══════════════════════════════ */
.stage {
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:center;
}
/* ambient glow behind cards — radial colour bleed from current card */
#stage-glow {
  position:absolute;
  width:75%; padding-bottom:65%;
  border-radius:50%;
  filter:blur(80px);
  z-index:0; pointer-events:none;
  top:10%; left:50%; transform:translateX(-50%);
  transition:background var(--dur) var(--ease);
  opacity:.28;
}


/* ═══════════════════════════════
   TRACK + CARDS
═══════════════════════════════ */
.track {
  position:absolute; top:0; bottom:0; left:0;
  display:flex; align-items:stretch;
  direction:ltr;
  z-index:2;
  will-change:transform;
  transition:transform var(--dur) var(--ease);
}

.pcard {
  flex-shrink:0;
  height:100%;
  padding:18px calc(var(--gap)/2);
  display:flex; align-items:center; justify-content:center;
  /* width set by JS */
}

/* ══ کارت ویژه — نماز و دعای استغاثه ══ */
@keyframes feat-shimmer {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}
@keyframes feat-note-blink {
  0%,100% { opacity:.78; }
  50%      { opacity:1;   }
}

/* ── کارت ویژه: سفید + طلایی + سبز ── */
.pcard--featured .pcard-inner {
  background: linear-gradient(160deg,
    #ffffff 0%, #f8fef9 35%, #edfaf1 65%, #f8fef9 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: feat-shimmer 8s ease infinite !important;
  overflow: hidden;
}

/* پترن طلایی و override های کارت ویژه */
.pcard--featured .pc-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='.7' stroke-opacity='.45'%3E%3Cpolygon points='45,4 52,14 64,10 61,23 70,31 61,39 64,52 52,48 45,58 38,48 26,52 29,39 20,31 29,23 26,10 38,14'/%3E%3C/g%3E%3C/svg%3E") !important;
  opacity: .6 !important;
}
.pcard--featured .pc-light {
  background: radial-gradient(circle,rgba(201,162,39,.22) 0%,transparent 70%) !important;
}
.pcard--featured .pc-shadow-blob {
  background: radial-gradient(circle,rgba(201,162,39,.1) 0%,transparent 70%) !important;
}
.pcard--featured .pc-title {
  color: #0a3d1e !important;
  text-shadow: 0 1px 8px rgba(201,162,39,.25) !important;
}
.pcard--featured .pc-div-line { background: rgba(201,162,39,.55) !important; }
.pcard--featured .pc-div-gem  { color: #c9a227 !important; }
.pcard--featured .pc-sub      { color: rgba(10,50,22,.62) !important; }
.pcard--featured .pc-wm       { color: rgba(201,162,39,.07) !important; }
.pcard--featured .pc-glass {
  background: rgba(10,80,30,.05) !important;
  border-top: 1px solid rgba(201,162,39,.2) !important;
}
.pcard--featured .pc-count    { color: #9a6d00 !important; }
.pcard--featured .pc-lbl      { color: rgba(10,50,22,.5) !important; }
.pcard--featured .pc-btn {
  background: linear-gradient(135deg,#28282c,#3c3c42) !important;
  color: #fff !important;
}
.pcard--featured .pc-read-btn {
  background: rgba(201,162,39,.12) !important;
  color: #7a5200 !important;
  border-color: rgba(201,162,39,.35) !important;
}
.pcard--featured .pc-preview-txt {
  color: #28282c !important;
  text-shadow: none !important;
}

/* پیام زمان روی کارت */
.pc-featured-note {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .72rem;
  padding: .32rem .9rem;
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.45);
  border-radius: 8px;
  font-size: .73rem; font-weight: 700; letter-spacing: .01em;
  color: #7a5200;
  animation: feat-note-blink 2.8s ease-in-out infinite;
}
.pc-featured-note::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c9a227;
  box-shadow: 0 0 6px rgba(201,162,39,.6);
  flex-shrink: 0;
}
.pc-featured-note-icon { display: none; }

/* آیتم ویژه در لیست */
.iml-item--featured {
  background: linear-gradient(135deg,#07421c,#0e8038,#07421c) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.iml-item--featured:hover {
  background: linear-gradient(135deg,#094f22,#119040,#094f22) !important;
}
.iml-num--featured {
  background: rgba(255,255,255,.2) !important;
  box-shadow: none;
  color: #fff;
}
.iml-num-glow { display: none; }
.iml-item--featured .iml-arrow { color: rgba(255,255,255,.5) !important; }
.iml-item--featured .iml-title { color: #fff !important; font-weight: 800; }
.iml-featured-note {
  font-size:.66rem; color: rgba(255,255,255,.75); font-weight: 600; margin-top:.04rem;
}

/* ── Card wrapper ── */
.pcard-inner {
  direction:rtl;
  width:100%; height:100%; max-height:640px;
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  /* background set by JS */
  box-shadow:
    0 16px 48px rgba(0,0,0,.24),
    0  4px 12px rgba(0,0,0,.14),
    0  0   0 1px rgba(255,255,255,.12) inset;
  transition:box-shadow .3s ease, transform .25s var(--spring);
}
.pcard-inner:hover {
  box-shadow:
    0 24px 64px rgba(0,0,0,.32),
    0  6px 18px rgba(0,0,0,.18),
    0  0   0 1px rgba(255,255,255,.15) inset;
}

/* Islamic ring pattern */
.pc-pattern {
  position:absolute; inset:0; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.55' stroke-opacity='.1'%3E%3Cpolygon points='45,4 52,14 64,10 61,23 70,31 61,39 64,52 52,48 45,58 38,48 26,52 29,39 20,31 29,23 26,10 38,14'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

/* top-right radial light */
.pc-light {
  position:absolute; z-index:0;
  width:260px; height:260px;
  top:-80px; right:-60px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 70%);
  pointer-events:none;
}
/* bottom-left subtle dark */
.pc-shadow-blob {
  position:absolute; z-index:0;
  width:200px; height:200px;
  bottom:-60px; left:-50px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.18) 0%,transparent 70%);
  pointer-events:none;
}

/* watermark number */
.pc-wm {
  position:absolute; bottom:-24px; left:0;
  font-size:clamp(8rem,25vw,13rem);
  font-weight:900; letter-spacing:-.06em;
  color:rgba(255,255,255,.06);
  line-height:1; pointer-events:none; user-select:none;
  direction:ltr; z-index:1;
}

/* ── Content area ── */
.pc-body {
  flex:1; position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding:3.4rem 1.75rem 1.4rem;
  text-align:center; gap:0;
}

/* ── Prayer text preview (top of card) ── */
.pc-preview {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:.65rem;
}
.pc-preview-txt {
  font-size:clamp(.8rem,2.2vw,.92rem);
  line-height:1.95;
  color:rgba(255,255,255,.78);
  direction:rtl; text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:pre-line;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.pc-read-btn {
  display:inline-flex; align-items:center; gap:.32rem;
  padding:.3rem .85rem;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);
  border-radius:50px;
  color:rgba(255,255,255,.88);
  font-family:Vazirmatn,sans-serif; font-size:.72rem; font-weight:600;
  cursor:pointer; letter-spacing:.03em;
  transition:background .18s,transform .12s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.pc-read-btn:hover  { background:rgba(255,255,255,.22); box-shadow:0 2px 10px rgba(0,0,0,.15); }
.pc-read-btn:active { transform:scale(.94); }

/* ── Card title + subtitle block (bottom of pc-body) ── */
.pc-meta { width:100%; display:flex; flex-direction:column; align-items:center; gap:0; }

/* card number badge — top-right corner */
.pc-num-badge {
  position:absolute; top:1.1rem; right:1.2rem;
  font-size:.62rem; font-weight:700;
  color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50px; padding:.22rem .65rem;
  direction:ltr;
}

.pc-title {
  font-size:clamp(1.8rem,5vw,2.6rem);
  font-weight:900; color:#fff;
  line-height:1.2; letter-spacing:-.025em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  margin-bottom:.9rem;
}

/* gold ornament divider */
.pc-div {
  display:flex; align-items:center; gap:.55rem;
  width:80%; max-width:200px;
  margin-bottom:.9rem;
}
.pc-div-line { flex:1; height:1px; background:rgba(255,255,255,.28); }
.pc-div-gem  { font-size:.7rem; color:rgba(255,255,255,.7); flex-shrink:0; }

.pc-sub {
  font-size:clamp(.78rem,1.9vw,.93rem);
  color:rgba(255,255,255,.72);
  font-style:italic; line-height:1.75;
}

/* ── Frosted glass bottom panel ── */
.pc-glass {
  flex-shrink:0;
  position:relative; z-index:3;
  background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:1.1rem 1.4rem 1.3rem;
  display:flex; align-items:center; gap:1rem;
}

.pc-stat {
  flex:1; min-width:0;
}
.pc-count {
  display:block;
  font-size:clamp(1.65rem,4.5vw,2.4rem);
  font-weight:900; color:#fff;
  line-height:1; direction:ltr; text-align:right;
  letter-spacing:-.03em;
  text-shadow:0 0 28px rgba(255,255,255,.35);
  transition:transform .3s var(--spring),color .3s;
}
.pc-lbl {
  font-size:.62rem; font-weight:600;
  color:rgba(255,255,255,.55);
  margin-top:.28rem;
  letter-spacing:.06em;
  display:block;
}

/* submit button — bright white */
.pc-btn {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.78rem 1.35rem;
  background:#fff; border:none; border-radius:14px;
  color:#0d2266;
  font-family:Vazirmatn,sans-serif; font-size:.92rem; font-weight:800;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .14s var(--spring),box-shadow .2s,background .16s;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:.02em;
}
.pc-btn:hover  { background:#f0f5ff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.3); }
.pc-btn:active { transform:scale(.95); box-shadow:0 2px 8px rgba(0,0,0,.2); }


/* ═══════════════════════════════
   BOTTOM NAVIGATION BAR
═══════════════════════════════ */
.app-nav {
  flex-shrink:0;
  height:68px;
  display:flex; align-items:center;
  padding:0 1rem;
  background:rgba(255,255,255,.9);
  border-top:1px solid rgba(13,34,102,.07);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  gap:.75rem;
  position:relative; z-index:20;
}

.anav-btn {
  flex-shrink:0;
  display:flex; align-items:center; gap:.35rem;
  padding:.6rem 1rem;
  border-radius:12px;
  font-family:Vazirmatn,sans-serif; font-size:.88rem; font-weight:700;
  cursor:pointer; border:none;
  transition:background .18s,transform .12s,box-shadow .18s,opacity .2s;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.anav-btn:active { transform:scale(.95); }
.anav-btn.disabled { opacity:.25; pointer-events:none; }

.anav-ghost {
  background:rgba(13,34,102,.07);
  color:rgba(13,34,102,.65);
}
.anav-ghost:hover { background:rgba(13,34,102,.12); }

.anav-primary {
  background:linear-gradient(135deg,#0d2266,#1a3a9f);
  color:#fff;
  box-shadow:0 3px 12px rgba(13,34,102,.28);
}
.anav-primary:hover { box-shadow:0 5px 18px rgba(13,34,102,.36); transform:translateY(-1px); }

.anav-arrow { font-size:.9rem; line-height:1; }

/* middle section: dots + next-label */
.anav-mid {
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  align-items:center; gap:.3rem;
}

/* dots (flat, no absolute positioning now) */
.nav-dots {
  display:flex; gap:.38rem; align-items:center;
}
.nav-dot {
  height:5px; width:5px; border-radius:50px;
  background:rgba(13,34,102,.2);
  border:none; cursor:pointer;
  transition:width .32s var(--spring),background .25s;
}
.nav-dot.active { width:22px; background:#0d2266; }

/* "بعدی: سوره نصر" label */
.anav-label {
  font-size:.64rem; font-weight:600;
  color:rgba(13,34,102,.42);
  white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:100%;
  min-height:.9em;
}

@media(max-width:400px) {
  .anav-btn { padding:.6rem .75rem; }
}






/* ═══════════════════════════════
   TICKER BAR
═══════════════════════════════ */
.ticker-bar {
  display:flex; align-items:center;
  height:44px; flex-shrink:0;
  background: linear-gradient(90deg, #07103a 0%, #0d2266 50%, #07103a 100%);
  border-bottom:1px solid rgba(201,162,39,.12);
  padding:0 .9rem;
  gap:.7rem;
}

.ticker-all-btn {
  display:flex; align-items:center; gap:.32rem;
  padding:.28rem .75rem;
  background: rgba(255,255,255,.93);
  color: #0d2266; border:none; border-radius:20px;
  font-family:Vazirmatn,sans-serif; font-size:.72rem; font-weight:700;
  white-space:nowrap; flex-shrink:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition:transform .12s, opacity .12s;
}
.ticker-all-btn:active { transform:scale(.94); opacity:.85; }

.ticker-sep {
  width:1px; height:18px; flex-shrink:0;
  background:rgba(255,255,255,.12);
}

.ticker-stage {
  flex:1; display:flex; align-items:center; gap:.42rem;
  overflow:hidden; cursor:pointer; min-width:0;
  -webkit-tap-highlight-color:transparent;
}

.ticker-dot {
  width:5px; height:5px; border-radius:50%;
  background:#c9a227; flex-shrink:0;
  animation:ticker-pulse 2.2s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%,100% { opacity:1;   transform:scale(1); }
  50%      { opacity:.35; transform:scale(.6); }
}

.ticker-lbl {
  flex:1; font-size:.8rem; font-weight:700;
  color: rgba(255,255,255,.88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}

.ticker-chevron {
  font-size:.75rem; color:rgba(255,255,255,.22); flex-shrink:0;
}

.ticker-count {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .08rem;
  flex-shrink: 0;
}
.ticker-count-num {
  font-size: .82rem; font-weight: 900;
  color: #e6c840; direction: ltr;
  letter-spacing: -.01em;
  text-shadow: 0 0 10px rgba(230,200,64,.35);
}
.ticker-count-lbl {
  font-size: .46rem; font-weight: 600;
  color: rgba(255,255,255,.73); letter-spacing: .05em;
  white-space: nowrap;
}

/* ═══════════════════════════════
   ITEMS LIST OVERLAY
═══════════════════════════════ */
#items-overlay .modal-sheet { overflow-y:auto; }

.items-modal-list {
  padding:.5rem .85rem 2rem;
  display:flex; flex-direction:column; gap:.32rem;
}

.iml-item {
  display:flex; align-items:center; gap:.65rem;
  width:100%; padding:.7rem .85rem;
  background:rgba(13,34,102,.03);
  border:1px solid rgba(13,34,102,.08);
  border-radius:12px;
  font-family:Vazirmatn,sans-serif; text-align:right; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .1s;
}
.iml-item:active { background:rgba(13,34,102,.1); transform:scale(.978); }

.iml-num {
  width:30px; height:30px; border-radius:50%;
  color:#fff; font-size:.74rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 3px 9px rgba(0,0,0,.18);
}

.iml-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.08rem; }
.iml-title {
  font-size:.86rem; font-weight:700; color:#0d2266;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iml-sub {
  font-size:.69rem; color:#8090c0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.iml-arrow {
  font-size:.8rem; color:rgba(13,34,102,.2); flex-shrink:0;
}

/* ═══════════════════════════════
   MODAL
═══════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,12,50,.5);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal-sheet {
  background:#fff; border-radius:26px 26px 0 0;
  width:100%; max-width:100%;
  box-shadow:0 -20px 70px rgba(5,12,50,.22);
  transform:translateY(110%);
  transition:transform .36s cubic-bezier(.34,1.15,.64,1);
  max-height:92vh; overflow-y:auto;
}
.modal-overlay.open .modal-sheet { transform:translateY(0); }

@media(min-width:640px) {
  .modal-overlay { align-items:center; }
  .modal-sheet {
    border-radius:24px; max-width:420px; width:100%;
    transform:scale(.88) translateY(20px); opacity:0;
    transition:transform .32s var(--spring),opacity .22s ease;
  }
  .modal-overlay.open .modal-sheet { transform:scale(1) translateY(0); opacity:1; }
}

.modal-header {
  padding:1.1rem 1.3rem .85rem;
  background:linear-gradient(148deg,#f0f5ff,#fff);
  border-bottom:1px solid rgba(13,34,102,.07);
  border-radius:26px 26px 0 0;
  position:relative;
}
.sheet-handle {
  width:32px; height:4px;
  background:rgba(13,34,102,.1); border-radius:2px;
  margin:0 auto .8rem;
}
@media(min-width:640px) { .sheet-handle { display:none; } }

.modal-close {
  position:absolute; top:.85rem; left:1rem;
  background:rgba(13,34,102,.06); border:1px solid rgba(13,34,102,.1);
  color:#8090c0; width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s,color .18s;
}
.modal-close:hover { background:#0d2266; color:#fff; }

.modal-title    { font-size:1.05rem; font-weight:800; color:#0d2266; }
.modal-subtitle { font-size:.76rem; color:#8090c0; font-style:italic; margin-top:.16rem; }

.modal-body { padding:1.1rem 1.3rem 1.6rem; }

.variant-screen {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.variant-intro {
  padding:.8rem .95rem;
  background:linear-gradient(135deg,rgba(13,34,102,.05),rgba(26,58,159,.08));
  border:1px solid rgba(13,34,102,.08);
  border-radius:12px;
}

.variant-intro-title {
  font-size:.92rem;
  font-weight:800;
  color:#0d2266;
  margin-bottom:.3rem;
}

.variant-intro-sub {
  font-size:.78rem;
  line-height:1.8;
  color:#5f74aa;
}

.variant-options {
  display:flex;
  flex-direction:column;
  gap:.65rem;
}

.variant-option {
  width:100%;
  padding:.95rem 1rem;
  background:#f8faff;
  border:1.5px solid rgba(13,34,102,.08);
  border-radius:14px;
  color:#0d2266;
  font-family:Vazirmatn,sans-serif;
  font-size:.88rem;
  font-weight:700;
  line-height:1.9;
  text-align:right;
  cursor:pointer;
  transition:transform .1s,box-shadow .18s,border-color .18s,background .18s;
  -webkit-tap-highlight-color:transparent;
}

.variant-option:hover {
  background:#eef3ff;
  border-color:rgba(26,58,159,.22);
  box-shadow:0 10px 24px rgba(13,34,102,.08);
}

.variant-option.active {
  background:linear-gradient(135deg,#0d2266,#1a3a9f);
  border-color:#0d2266;
  color:#fff;
  box-shadow:0 12px 28px rgba(13,34,102,.2);
}

.variant-option:active { transform:scale(.985); }

.variant-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.85rem;
  padding:.7rem .85rem;
  background:rgba(13,34,102,.05);
  border:1px solid rgba(13,34,102,.08);
  border-radius:11px;
}

.variant-summary-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.12rem;
}

.variant-summary-label {
  font-size:.68rem;
  color:#8090c0;
  font-weight:700;
}

.variant-summary-value {
  font-size:.82rem;
  line-height:1.7;
  color:#0d2266;
}

.variant-change-btn {
  flex-shrink:0;
  padding:.5rem .8rem;
  background:#fff;
  border:1px solid rgba(13,34,102,.1);
  border-radius:10px;
  color:#0d2266;
  font-family:Vazirmatn,sans-serif;
  font-size:.76rem;
  font-weight:700;
  cursor:pointer;
  transition:background .16s,border-color .16s;
}

.variant-change-btn:hover {
  background:#eef3ff;
  border-color:rgba(26,58,159,.2);
}

/* توضیحات اختصاصی آیتم در مودال */
.modal-item-note {
  font-size:.8rem;
  line-height:1.75;
  color:#5a6ea8;
  background:rgba(13,34,102,.05);
  border-right:2.5px solid rgba(13,34,102,.18);
  padding:.6rem .85rem;
  border-radius:7px;
  margin-bottom:.85rem;
  text-align:right;
}

.modal-lbl  {
  font-size:.68rem; color:#9aaccf; font-weight:700;
  margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.09em;
}

.quick-btns {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));
  gap:.45rem; margin-bottom:.75rem;
}
.quick-btn {
  padding:.65rem .3rem;
  background:#f2f5fc; border:1.5px solid rgba(13,34,102,.08);
  border-radius:11px; color:#0d2266;
  font-family:Vazirmatn,sans-serif; font-size:.95rem; font-weight:700;
  cursor:pointer; min-height:50px;
  transition:background .16s,border-color .16s,color .16s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.quick-btn:hover { background:#e8eeff; border-color:rgba(26,58,159,.28); }
.quick-btn.active {
  background:linear-gradient(135deg,#0d2266,#1a3a9f);
  border-color:#0d2266; color:#fff;
  box-shadow:0 4px 14px rgba(13,34,102,.28);
}
.quick-btn:active { transform:scale(.92); }

.custom-input {
  width:100%; padding:.68rem 1rem;
  background:#f2f5fc; border:1.5px solid rgba(13,34,102,.08);
  border-radius:11px; color:#0d2266;
  font-family:Vazirmatn,sans-serif; font-size:.92rem;
  direction:ltr; text-align:center;
  transition:border-color .18s,box-shadow .18s,background .18s;
  outline:none; min-height:48px; margin-bottom:.75rem;
}
.custom-input:focus {
  border-color:#0d2266; box-shadow:0 0 0 3px rgba(13,34,102,.1); background:#fff;
}
.custom-input::placeholder { color:#b8c8e0; }

.phone-wrap { margin-bottom:.75rem; }
.phone-input {
  width:100%; padding:.68rem 1rem;
  background:#f2f5fc; border:1.5px solid rgba(13,34,102,.08);
  border-radius:11px; color:#0d2266;
  font-family:Vazirmatn,sans-serif; font-size:.92rem;
  direction:ltr; text-align:center; letter-spacing:.1em;
  transition:border-color .18s,box-shadow .18s;
  outline:none; min-height:48px;
}
.phone-input:focus {
  border-color:#0d2266; box-shadow:0 0 0 3px rgba(13,34,102,.1); background:#fff;
}
.phone-input::placeholder { color:#b8c8e0; }

.form-error {
  font-size:.78rem; color:#b91c1c;
  background:#fff5f5; border:1px solid #fecaca;
  border-radius:9px; padding:.44rem .7rem;
  margin-bottom:.7rem; display:none;
}
.form-error.visible { display:block; }

.submit-btn {
  width:100%; padding:.85rem;
  background:linear-gradient(135deg,#0d2266 0%,#1a3a9f 100%);
  border:none; border-radius:12px; color:#fff;
  font-family:Vazirmatn,sans-serif; font-size:.95rem; font-weight:700;
  cursor:pointer; min-height:52px;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:0 6px 20px rgba(13,34,102,.3);
  transition:opacity .18s,transform .1s,box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.submit-btn:hover  { opacity:.92; box-shadow:0 8px 26px rgba(13,34,102,.36); }
.submit-btn:active { transform:scale(.98); }
.submit-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.spinner {
  width:16px; height:16px;
  border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff;
  border-radius:50%; animation:sp .65s linear infinite; flex-shrink:0;
}
@keyframes sp { to{transform:rotate(360deg);} }

.success-screen { text-align:center; padding:1.8rem 1rem .85rem; display:none; }
.success-screen.visible { display:block; }
.success-wrap {
  width:68px; height:68px;
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);
  border:2px solid #6ee7b7; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
  animation:pi .4s var(--spring) forwards;
  box-shadow:0 8px 24px rgba(16,185,129,.16);
}
@keyframes pi { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }
.success-check { color:#059669; font-size:1.8rem; line-height:1; }
.success-title { font-size:1.06rem; font-weight:800; color:#065f46; margin-bottom:.4rem; }
.success-msg   { font-size:.83rem; color:#8090c0; line-height:1.8; }


/* ── card top-edge shine ── */
.pcard-inner::after {
  content:'';
  position:absolute;
  top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  z-index:4; pointer-events:none;
}

/* ── zero-state counter: show dash ── */
.pc-count[data-count="0"] { opacity:.4; }

/* ── subtle inner depth on glass ── */
.pc-glass::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:rgba(255,255,255,.35);
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media(max-height:640px) {
  .pc-body  { padding:1.2rem 1.5rem .7rem; }
  .pc-icon  { font-size:2rem; margin-bottom:.7rem; }
  .pc-title { font-size:1.35rem; margin-bottom:.7rem; }
  .pc-sub   { font-size:.76rem; }
  .pc-glass { padding:.85rem 1.25rem 1rem; }
  .pc-count { font-size:1.5rem; }
}
@media(max-width:360px) {
  .pc-btn   { padding:.7rem 1rem; font-size:.84rem; }
  .pc-count { font-size:1.5rem; }
  .pc-title { font-size:1.3rem; }
}


/* ═══════════════════════════════
   READING MODAL
═══════════════════════════════ */
/* Make reading modal a flex column so footer sticks */
#read-sheet {
  display:flex;
  flex-direction:column;
  max-height:80vh;
  overflow:hidden; /* override default overflow-y:auto */
}
@media(min-width:640px) {
  #read-sheet {
    max-height:76vh;
    overflow:hidden;
  }
}

.read-modal-body {
  flex:1;
  overflow-y:auto;
  padding:1.1rem 1.3rem .5rem;
  -webkit-overflow-scrolling:touch;
}

/* Arabic/Persian prayer text */
.read-text-body p {
  font-size:clamp(1rem,2.8vw,1.12rem);
  line-height:2.25;
  color:#1a2a5e;
  text-align:center;
  direction:rtl;
  margin-bottom:.1rem;
}
.read-text-body br { display:block; margin:.4rem 0; }
.read-unavail {
  color:#8090c0 !important;
  text-align:center !important;
  font-style:italic;
}

/* Sticky footer with submit button */
.read-footer {
  flex-shrink:0;
  padding:.85rem 1.3rem 1.3rem;
  background:#fff;
  border-top:1px solid rgba(13,34,102,.07);
  box-shadow:0 -4px 16px rgba(13,34,102,.05);
}

/* ═══════════════════════════════
   APP-MAIN WRAPPER
═══════════════════════════════ */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}



/* ═══════════════════════════════
   DESKTOP SIDEBAR (hidden by default)
═══════════════════════════════ */
.desk-sidebar { display: none; }

/* ═══════════════════════════════
   DESKTOP  ≥ 1024 px
   سایدبار + کاروسل سه‌تایی
═══════════════════════════════ */
@media(min-width:1024px) {

  /* کانتینر: ردیف، ارتفاع ثابت */
  .app {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }

  /* سایدبار */
  .desk-sidebar {
    display: flex;
    flex-direction: column;
    width: 272px;
    flex-shrink: 0;
    background: #faf6ef;
    border-left: 1px solid rgba(201,162,39,.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
  }

  /* ستون اصلی */
  .app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* استیج: عرض محدود و مرکزی */
  .stage {
    max-width: 100%;
    width: 100%;
    align-self: center;
  }

  /* fade کناره‌های استیج */
  .stage::before,
  .stage::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--peek);
    z-index: 10; pointer-events: none;
  }
  .stage::before {
    right: 0;
    background: linear-gradient(to left, #f2ece0 10%, transparent);
    opacity:0.5;
  }
  .stage::after {
    left: 0;
    background: linear-gradient(to right, #f2ece0 10%, transparent);
        opacity:0.5;

  }

  /* شمارنده ticker در دسکتاپ مخفی — سایدبار آمار نمایش می‌دهد */
  .ticker-count, .ticker-sep:last-of-type { display: none; }

  /* نوار ناوبری کاروسل: نمایش */
  .app-nav { display: flex; }

  /* ── آمار سایدبار ── */
  .dsb-stats {
    padding: .9rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(201,162,39,.14);
    text-align: center;
  }
  .dsb-total-lbl {
    font-size: .62rem;
    font-weight: 600;
    color: rgba(13,34,102,.45);
    letter-spacing: .06em;
    margin-bottom: .3rem;
  }
  .dsb-total-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0d2266;
    letter-spacing: -.03em;
    direction: ltr;
  }

  /* ── لیست دعاها ── */
  .dsb-list {
    flex: 1;
    padding: .55rem 0;
    display: flex;
    flex-direction: column;
    list-style: none;
  }
  .dsb-prayer-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .62rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: right;
    transition: background .15s ease;
    position: relative;
    font-family: Vazirmatn, sans-serif;
  }
  .dsb-prayer-item:hover { background: rgba(13,34,102,.05); }
  .dsb-prayer-item.active { background: rgba(13,34,102,.08); }
  .dsb-prayer-item.active::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,#0d2266,#1a3a9f);
    border-radius: 0 2px 2px 0;
  }
  .dsb-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(13,34,102,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700;
    color: #0d2266;
  }
  .dsb-prayer-item.active .dsb-num {
    background: linear-gradient(135deg,#0d2266,#1a3a9f);
    color: #fff;
  }
  .dsb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
  }
  .dsb-name {
    font-size: .8rem;
    font-weight: 600;
    color: #1a2a5e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dsb-prayer-item.active .dsb-name {
    color: #0d2266;
    font-weight: 700;
  }
  .dsb-cnt {
    font-size: .65rem;
    color: rgba(13,34,102,.45);
    direction: ltr;
    display: block;
  }

}