/* ═══════════════════════════════════════════════════
   پویش همسنگر معنوی — v6.0 — 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:   #20b2aa;
  --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:
    radial-gradient(ellipse 100% 65% at 50% -5%, rgba(32,178,170,.3) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 12% 82%, rgba(230,200,64,.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(20,150,140,.14) 0%, transparent 50%),
    linear-gradient(170deg, #0a2f2d 0%, #104945 50%, #0a2f2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 6rem;
  overflow-y: auto; overflow-x: hidden;
  transition: transform .95s cubic-bezier(.76,0,.24,1), opacity .4s ease;
}
.intro-overlay.leaving { transform: translateY(-100%); pointer-events: none; }

/* ── گلوی محیطی (نور تیل بالا) ── */
.intro-atm {
  position: absolute;
  width: 700px; height: 520px;
  top: -160px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse,
    rgba(32,178,170,.24) 0%,
    rgba(32,178,170,.08) 40%,
    transparent 70%);
  filter: blur(55px);
  pointer-events: none;
}

/* ── پترن هندسی اسلامی ── */
.intro-geo-bg {
  position: absolute; inset: 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='%2320b2aa' stroke-width='.5' stroke-opacity='.07'%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;
}

/* ── پوسته محتوا ── */
.intro-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: auto 0;
}

/* ── شعار / لوگو ── */
.intro-emblem {
  width: 96px; height: 96px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)),
    rgba(8,32,30,.3);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 22px 54px rgba(4,22,20,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 50px rgba(32,178,170,.14);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  opacity: 0;
}
.intro-emblem-img { width: 68px; height: 68px; object-fit: contain; display: block; }
.intro-emblem-fallback {
  font-size: 2.2rem; color: #a8deda;
  text-shadow: 0 0 20px rgba(32,178,170,.45);
}

/* ── خط تزئینی طلایی ── */
.intro-orn-line {
  display: flex; align-items: center; gap: .65rem;
  width: min(240px, 65%);
  margin-bottom: 1.3rem;
  opacity: 0;
}
.intro-orn-line span:first-child,
.intro-orn-line span:last-child {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,200,64,.5), transparent);
}
.intro-orn-line span:nth-child(2) { color: rgba(230,200,64,.7); font-size: .58rem; }

/* ── نشان ── */
.intro-badge-wrap { margin-bottom: 1.05rem; opacity: 0; }
.intro-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem;
  background: rgba(230,200,64,.12);
  border: 1px solid rgba(230,200,64,.26);
  border-radius: 999px;
  color: #fce8a8;
  font-size: .77rem; font-weight: 800; letter-spacing: .01em;
}

/* ── عنوان اصلی ── */
.intro-title {
  font-size: clamp(1.85rem, 5.5vw, 2.95rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: 1.35rem;
  text-shadow: 0 4px 28px rgba(4,22,20,.5);
  opacity: 0;
}

/* ── متن اصلی ── */
.intro-primary {
  font-size: clamp(.9rem, 2.2vw, 1.05rem);
  font-weight: 700;
  line-height: 2.1;
  color: #c0e6e3;
  max-width: 560px;
  text-align: center;
  margin-bottom: .9rem;
  opacity: 0;
}

/* ── متن فرعی ── */
.intro-secondary {
  font-size: clamp(.83rem, 2vw, .96rem);
  font-weight: 600;
  line-height: 2;
  color: #8dcbc8;
  max-width: 540px;
  text-align: center;
  margin-bottom: 1.1rem;
  opacity: 0;
}

/* ── نقل قول ── */
.intro-quote {
  width: 100%; max-width: 540px;
  padding: 1.1rem 1.1rem .95rem;
  background: linear-gradient(135deg, rgba(32,178,170,.1), rgba(10,60,56,.2));
  border: 1px solid rgba(32,178,170,.2);
  border-right: 3px solid rgba(32,178,170,.55);
  border-radius: 18px;
  text-align: center;
  margin-bottom: 1rem;
  opacity: 0;
}
.intro-quote blockquote {
  font-size: clamp(.86rem, 2.1vw, 1rem);
  font-weight: 700;
  line-height: 2.2;
  color: #d8f0ee;
}
.intro-quote figcaption {
  margin-top: .75rem;
  color: rgba(32,178,170,.75);
  font-size: .77rem; font-weight: 700;
}

/* ── دکمه ورود ── */
.intro-enter-btn {
  margin-top: 1.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .65rem;
  padding: 1rem 2.4rem;
  min-width: 250px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5db7e, #d4a82c);
  color: #061c1b;
  font-family: Vazirmatn, sans-serif;
  font-size: 1rem; font-weight: 900; letter-spacing: .01em;
  cursor: pointer;
  box-shadow:
    0 22px 40px rgba(199,156,38,.36),
    0 1px 0 rgba(255,255,255,.55) inset;
  transition: transform .18s var(--spring), box-shadow .18s, filter .18s;
  opacity: 0;
}
.intro-enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 46px rgba(199,156,38,.44);
  filter: brightness(1.06);
}
.intro-enter-btn:active { transform: scale(.97); }

/* ── شبکه‌های اجتماعی اینترو ── */
.intro-social {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  opacity: 0;
}
.intro-social-label {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  margin: 0;
}
.intro-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.intro-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .15s var(--spring), background .15s, box-shadow .15s;
  text-decoration: none;
}
.intro-social-link img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
}
.intro-social-link:hover {
  transform: translateY(-3px) scale(1.08);
  background: rgba(255,255,255,.14);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.intro-social-link:active { transform: scale(.96); }

/* ── لینک پایین ── */
.intro-footer-link {
  position: absolute;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  width: min(88vw, 360px);
  min-width: 250px;
  justify-content: space-between;
  color: #fff8e6;
  text-decoration: none;
  padding: .92rem 1rem .92rem .92rem;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(10,42,40,.82), rgba(6,26,25,.72));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(4,20,19,.3), 0 1px 0 rgba(255,255,255,.07) inset;
  backdrop-filter: blur(18px);
  overflow: hidden; isolation: isolate;
  transition: transform .18s var(--spring), box-shadow .18s, filter .18s;
  opacity: 0;
}
.intro-footer-link:hover {
  transform: translateX(-50%) translateY(-2px);
  filter: brightness(1.05);
}
.intro-footer-link-icon {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(243,213,121,.96), rgba(214,166,46,.82));
  color: #081234; font-size: 1.05rem; font-weight: 900;
  box-shadow: 0 8px 20px rgba(199,156,38,.25), 0 1px 0 rgba(255,255,255,.3) inset;
}
.intro-footer-link-copy {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
}
.intro-footer-link-label {
  display: block; width: 100%;
  font-size: .88rem; font-weight: 900; line-height: 1.75;
  color: #fff7df;
}
.intro-footer-link-arrow {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #f7df9f; font-size: .92rem;
}

@media(max-width:640px) {
  .intro-overlay { padding: 1.5rem 1rem 6rem; }
  .intro-emblem { width: 84px; height: 84px; border-radius: 26px; }
  .intro-emblem-img { width: 60px; height: 60px; }
  .intro-footer-link {
    width: calc(100% - .8rem); min-width: unset;
    bottom: max(.8rem, env(safe-area-inset-bottom));
    padding: .88rem .88rem .88rem .84rem;
  }
  .intro-footer-link-label { font-size: .82rem; }
}

@keyframes fu { from{opacity:0;transform:translateY(13px);} to{opacity:1;transform:translateY(0);} }
@keyframes introReveal { from{opacity:0;transform:translateY(18px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }



/* ═══════════════════════════════
   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(10,87,82,.08);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  position:relative; z-index:20;
  box-shadow:0 1px 0 rgba(10,87,82,.06), 0 4px 24px rgba(10,87,82,.07);
}
.hd-brand { display:flex; align-items:center; gap:.7rem; }
.hd-mark  {
  width:38px; height:38px;
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  box-shadow:0 3px 12px rgba(10,87,82,.28);
}
.hd-title { font-size:.95rem; font-weight:800; color:#0a5752; letter-spacing:-.01em; }
.hd-sub   { font-size:.6rem; color:rgba(10,87,82,.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,#0a6b55,#1dab8c) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(10,107,85,.32) !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,#0a5752,#20b2aa,#0a5752) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.iml-item--featured:hover {
  background: linear-gradient(135deg,#0c6a64,#23c4bc,#0c6a64) !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-item--featured .iml-sub { color: rgba(255,255,255,.75) !important; }
.iml-item--featured .iml-count,
.iml-item--featured .iml-count--zero { color: rgba(255,255,255,.82) !important; font-weight: 600; }
.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:#0a5752;
  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:#edfafa; 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(10,87,82,.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(10,87,82,.07);
  color:rgba(10,87,82,.65);
}
.anav-ghost:hover { background:rgba(10,87,82,.12); }

.anav-primary {
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  color:#fff;
  box-shadow:0 3px 12px rgba(10,87,82,.28);
}
.anav-primary:hover { box-shadow:0 5px 18px rgba(10,87,82,.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(10,87,82,.2);
  border:none; cursor:pointer;
  transition:width .32s var(--spring),background .25s;
}
.nav-dot.active { width:22px; background:#20b2aa; }

/* "بعدی: سوره نصر" label */
.anav-label {
  font-size:.64rem; font-weight:600;
  color:rgba(10,87,82,.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:46px; flex-shrink:0;
  background: linear-gradient(90deg, #0e9e98 0%, #20b2aa 50%, #0e9e98 100%);
  border-bottom:1px solid rgba(10,80,76,.15);
  padding:0 .9rem;
  gap:.7rem;
  box-shadow: 0 2px 12px rgba(10,80,76,.18);
}

.ticker-all-btn {
  display:flex; align-items:center; gap:.32rem;
  padding:.3rem .8rem;
  background: rgba(255,255,255,.96);
  color: #0a5752; 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 10px rgba(0,0,0,.14);
  transition:transform .12s, opacity .12s, background .15s;
}
.ticker-all-btn:hover { background: #fff; }
.ticker-all-btn:active { transform:scale(.94); opacity:.85; }

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

.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;
  max-height:80vh;
}
@media(min-width:640px) {
  #items-overlay .modal-sheet {
    max-height:68vh;
  }
}

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

.items-summary-card {
  padding: 1rem 1rem 1.05rem;
  margin-bottom: .35rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(230,200,64,.18), transparent 38%),
    linear-gradient(145deg, #0a5752, #1fa8a0);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(10,87,82,.18);
  text-align: center;
}
.items-summary-label {
  color: rgba(255,255,255,.78);
  font-size: .74rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.items-summary-value {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.items-summary-sub {
  color: rgba(255,255,255,.62);
  font-size: .68rem;
  line-height: 1.8;
  margin-top: .2rem;
}

/* ── wrapper یک آیتم در فهرست ── */
.iml-item-wrap { display:flex; flex-direction:column; }
.iml-item-row  { display:flex; align-items:stretch; gap:.42rem; }
.iml-item-row .iml-item { flex:1; min-width:0; }

.iml-item {
  display:flex; align-items:center; gap:.65rem;
  width:100%; padding:.7rem .85rem;
  background:rgba(10,87,82,.03);
  border:1px solid rgba(10,87,82,.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(10,87,82,.1); transform:scale(.978); }

/* ── دکمه «+» باز کردن متن ── */
.iml-expand-btn {
  flex-shrink:0; align-self:stretch;
  width:38px;
  background:rgba(10,87,82,.09);
  border:1px solid rgba(10,87,82,.28);
  border-radius:10px;
  color:#0a5752;
  font-size:1.25rem; font-weight:700; line-height:1;
  font-family:Vazirmatn,sans-serif;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, color .14s, border-color .14s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.iml-expand-btn:hover {
  background:rgba(10,87,82,.16); color:#054038; border-color:rgba(10,87,82,.45);
}
.iml-expand-btn:active { transform:scale(.88); }
.iml-expand-btn[aria-expanded="true"] {
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  color:#fff; border-color:#0a5752;
}

/* ── expand box (grid trick برای انیمیشن روان) ── */
.iml-expand-box {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin-top:0;
  transition:grid-template-rows .32s ease, opacity .24s ease, margin-top .2s;
}
.iml-expand-box--open {
  grid-template-rows:1fr;
  opacity:1;
  margin-top:.42rem;
}
.iml-expand-box-inner { overflow:hidden; min-height:0; }

.iml-expand-scroll {
  max-height:240px;
  overflow-y:auto;
  padding:.72rem .85rem .55rem;
  background:rgba(10,87,82,.05);
  border:1px solid rgba(10,87,82,.15);
  border-radius:10px 10px 0 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,87,82,.3) transparent;
}
.iml-expand-text {
  font-size:.8rem; line-height:1.95;
  color:#1a3a30;
  margin:0; text-align:right;
}
.iml-expand-footer {
  padding:.42rem .45rem .48rem;
  background:rgba(10,87,82,.07);
  border:1px solid rgba(10,87,82,.15); border-top:none;
  border-radius:0 0 10px 10px;
}
.iml-expand-submit {
  width:100%; padding:.58rem 1rem;
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  border:none; border-radius:7px;
  color:#fff; font-size:.81rem; font-weight:700;
  font-family:Vazirmatn,sans-serif;
  cursor:pointer;
  transition:opacity .12s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.iml-expand-submit:active { transform:scale(.97); opacity:.82; }

.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:#0a5752;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iml-count {
  font-size:.69rem; font-weight:700; color:#20b2aa;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iml-count--zero { color:#b8c8c8; font-weight:600; }

/* دکمه «نمایش» در آیتم‌ها */
.iml-view-tag {
  flex-shrink:0;
  padding:.32rem .72rem;
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  border:1px solid #0a5752;
  border-radius:8px;
  color:#fff; font-size:.72rem; font-weight:700;
  pointer-events:none;
}
.iml-item:hover .iml-view-tag {
  background:linear-gradient(135deg,#0d6b64,#25c8bf);
  border-color:#0d6b64;
}

/* ═══════════════════════════════
   MODAL
═══════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,22,21,.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,22,21,.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,#edfafa,#fff);
  border-bottom:1px solid rgba(10,87,82,.07);
  border-radius:26px 26px 0 0;
  position:relative;
}
.sheet-handle {
  width:32px; height:4px;
  background:rgba(10,87,82,.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(10,87,82,.06); border:1px solid rgba(10,87,82,.1);
  color:#5a9693; 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:#0a5752; color:#fff; }

.modal-title    { font-size:1.05rem; font-weight:800; color:#0a5752; }
.modal-subtitle { font-size:.76rem; color:#5a9693; 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(10,87,82,.05),rgba(32,178,170,.08));
  border:1px solid rgba(10,87,82,.08);
  border-radius:12px;
}

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

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

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

.variant-back-btn {
  align-self:flex-start;
  padding:.5rem .8rem;
  background:#fff;
  border:1px solid rgba(10,87,82,.1);
  border-radius:10px;
  color:#0a5752;
  font-family:Vazirmatn,sans-serif;
  font-size:.77rem;
  font-weight:700;
  cursor:pointer;
  transition:background .16s,border-color .16s;
}

.variant-back-btn:hover {
  background:#e6f8f7;
  border-color:rgba(32,178,170,.2);
}

.variant-option {
  width:100%;
  padding:.95rem 1rem;
  background:#f8faff;
  border:1.5px solid rgba(10,87,82,.08);
  border-radius:14px;
  color:#0a5752;
  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:#e6f8f7;
  border-color:rgba(32,178,170,.22);
  box-shadow:0 10px 24px rgba(10,87,82,.08);
}

.variant-option.active {
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  border-color:#0a5752;
  color:#fff;
  box-shadow:0 12px 28px rgba(10,87,82,.2);
}

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

.variant-option--date {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  align-items: flex-start;
}

.variant-option-title {
  font-size: .9rem;
  font-weight: 800;
}

.variant-option-meta {
  font-size: .72rem;
  font-weight: 600;
  color: #5a9693;
}

.variant-option.active .variant-option-meta {
  color: rgba(255,255,255,.78);
}

.variant-submit-btn {
  margin-top: .15rem;
}

.variant-submit-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

.variant-empty-state {
  padding: 1rem;
  border-radius: 14px;
  background: rgba(10,87,82,.05);
  border: 1px dashed rgba(10,87,82,.15);
  color: #4a8e8a;
  font-size: .82rem;
  line-height: 1.9;
  text-align: center;
}

.variant-date-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: -.2rem;
}

.variant-date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .42rem .78rem;
  border-radius: 999px;
  background: rgba(10,87,82,.08);
  border: 1px solid rgba(10,87,82,.1);
  color: #0a5752;
  font-size: .74rem;
  font-weight: 700;
}

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

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

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

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

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

.variant-change-btn:hover {
  background:#e6f8f7;
  border-color:rgba(32,178,170,.2);
}

/* ── تمایز سوال از جواب در مراحل استغاثه ── */
.variant-intro--question {
  background: linear-gradient(135deg, #0a5752 0%, #167a74 100%);
  border-color: #0a5752;
}
.variant-intro--question .variant-intro-title {
  color: #fff;
  font-size: .97rem;
  font-weight: 900;
}
.variant-intro--question .variant-intro-sub {
  color: rgba(255,255,255,.78);
}

/* ══ تقویم شمسی ══ */
.shamsi-calendar {
  user-select: none;
  -webkit-user-select: none;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding: .55rem .6rem;
  background: linear-gradient(135deg, rgba(10,87,82,.06), rgba(32,178,170,.08));
  border: 1px solid rgba(10,87,82,.1);
  border-radius: 12px;
}

.cal-month-label {
  font-size: .92rem;
  font-weight: 800;
  color: #0a5752;
  flex: 1;
  text-align: center;
}

.cal-nav {
  width: 34px; height: 34px;
  border: 1px solid rgba(10,87,82,.1);
  border-radius: 8px;
  background: #fff;
  color: #0a5752;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.cal-nav:hover { background: #e6f8f7; border-color: rgba(32,178,170,.3); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day-hdr {
  font-size: .68rem;
  font-weight: 800;
  color: #5a9693;
  text-align: center;
  padding: .3rem 0 .45rem;
}

.cal-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: rgba(10,87,82,.03);
  color: #0a5752;
  font-family: Vazirmatn, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
.cal-cell:hover { background: rgba(32,178,170,.1); }
.cal-cell:active { transform: scale(.9); }
.cal-cell.cal-empty { background: none; cursor: default; pointer-events: none; }

.cal-cell.cal-today {
  background: linear-gradient(135deg, rgba(201,162,39,.15), rgba(230,200,64,.2));
  border: 1.5px solid rgba(201,162,39,.5);
  color: #7a5200;
  font-weight: 800;
}

.cal-cell.cal-selected {
  background: linear-gradient(135deg, #0a5752, #20b2aa);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(10,87,82,.28);
}
.cal-cell.cal-selected.cal-today {
  background: linear-gradient(135deg, #c9a227, #d4a82c);
  border-color: #c9a227;
  color: #fff;
  box-shadow: 0 3px 10px rgba(201,162,39,.35);
}

.cal-cell.cal-disabled {
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
}

.cal-phone-section { margin-top: .6rem; }

/* ── phone-input داخل تقویم ── */
.cal-phone-input { margin-top: .4rem; }

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

.count-help {
  font-size:.76rem;
  line-height:1.8;
  color:#4a8e8a;
  margin-top:.65rem;
}

.count-fixed-note {
  margin-top:.35rem;
  padding:.8rem .9rem;
  background:linear-gradient(135deg,rgba(10,87,82,.05),rgba(32,178,170,.08));
  border:1px solid rgba(10,87,82,.08);
  border-radius:12px;
  color:#0a5752;
  font-size:.82rem;
  font-weight:700;
  line-height:1.85;
}

.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:#eef9f9; border:1.5px solid rgba(10,87,82,.08);
  border-radius:11px; color:#0a5752;
  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(32,178,170,.28); }
.quick-btn.active {
  background:linear-gradient(135deg,#0a5752,#20b2aa);
  border-color:#0a5752; color:#fff;
  box-shadow:0 4px 14px rgba(10,87,82,.28);
}
.quick-btn:active { transform:scale(.92); }

.custom-input {
  width:100%; padding:.68rem 1rem;
  background:#eef9f9; border:1.5px solid rgba(10,87,82,.08);
  border-radius:11px; color:#0a5752;
  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:#0a5752; box-shadow:0 0 0 3px rgba(10,87,82,.1); background:#fff;
}
.custom-input::placeholder { color:#b8c8e0; }

.phone-wrap { margin-bottom:.75rem; }
.phone-input {
  width:100%; padding:.68rem 1rem;
  background:#eef9f9; border:1.5px solid rgba(10,87,82,.08);
  border-radius:11px; color:#0a5752;
  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:#0a5752; box-shadow:0 0 0 3px rgba(10,87,82,.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,#0a5752 0%,#20b2aa 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(10,87,82,.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(10,87,82,.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:#5a9693; line-height:1.8; }
.success-extra-copy {
  margin-top: 1rem;
  padding: 1rem .95rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10,87,82,.05), rgba(32,178,170,.08));
  border: 1px solid rgba(10,87,82,.08);
  color: #0a5752;
  font-size: .86rem;
  line-height: 2;
}
.success-link-buttons {
  display: flex;
  flex-direction: column;
  gap: .62rem;
  width: 100%;
  margin-top: 1rem;
}
.success-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .78rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a5752 0%, #20b2aa 100%);
  color: #fff;
  text-decoration: none;
  font-size: .87rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(10,87,82,.18);
  transition: transform .14s var(--spring), box-shadow .18s, opacity .18s;
}
.success-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10,87,82,.24);
  opacity: .96;
}
.success-link-btn--download {
  background: linear-gradient(135deg, #0a5752 0%, #20b2aa 100%);
}
.success-link-btn--web {
  background: linear-gradient(135deg, #155e75 0%, #0891b2 100%);
  box-shadow: 0 8px 20px rgba(8,145,178,.18);
}
.success-link-btn--web:hover {
  box-shadow: 0 12px 26px rgba(8,145,178,.26);
}


/* ── 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:#0a5752;
  text-align:center;
  direction:rtl;
  margin-bottom:.1rem;
}
.read-text-body br { display:block; margin:.4rem 0; }
.read-unavail {
  color:#5a9693 !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(10,87,82,.07);
  box-shadow:0 -4px 16px rgba(10,87,82,.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(10,87,82,.45);
    letter-spacing: .06em;
    margin-bottom: .3rem;
  }
  .dsb-total-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0a5752;
    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(10,87,82,.05); }
  .dsb-prayer-item.active { background: rgba(10,87,82,.08); }
  .dsb-prayer-item.active::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,#0a5752,#20b2aa);
    border-radius: 0 2px 2px 0;
  }
  .dsb-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(10,87,82,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700;
    color: #0a5752;
  }
  .dsb-prayer-item.active .dsb-num {
    background: linear-gradient(135deg,#0a5752,#20b2aa);
    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: #0a5752;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dsb-prayer-item.active .dsb-name {
    color: #0a5752;
    font-weight: 700;
  }
  .dsb-cnt {
    font-size: .65rem;
    color: rgba(10,87,82,.45);
    direction: ltr;
    display: block;
  }

}