/* ============================================================
   صفحة الأذكار — النسق النوراني الهندسي
   ============================================================ */

.azkar-page-vars,
:root{
  --azkar-ink:#3b2a45;
  --azkar-line:rgba(155,89,182,.16);
  --azkar-glass:rgba(255,255,255,.72);
  --azkar-shadow:0 18px 44px rgba(112,52,140,.10);
  --azkar-shadow-lg:0 26px 60px rgba(112,52,140,.18);
  --azkar-done:#16a34a;
}

/* ===== 1) الترويسة ===== */
.azkar-hero{
  position:relative;
  padding:clamp(4.5rem,9vw,7rem) 0 clamp(3.5rem,7vw,5rem);
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(248,180,217,.30), transparent 62%),
    radial-gradient(900px 480px at 12% 108%, rgba(155,89,182,.16), transparent 60%),
    linear-gradient(180deg,#fffdfe 0%,#fdf7fb 100%);
}
.azkar-hero-inner{position:relative; z-index:3; text-align:center;}

.azkar-hero .section-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--azkar-line);
  color:var(--secondary-purple);
  font-family:var(--font-primary);
  font-size:clamp(.85rem,1.6vw,.98rem);
  box-shadow:0 6px 18px rgba(155,89,182,.10);
  backdrop-filter:blur(10px);
}
.azkar-hero .section-title{
  margin:18px 0 10px;
  font-family:var(--font-secondary);
  font-size:clamp(2.2rem,6vw,3.6rem);
  font-weight:800; line-height:1.25;
}
.text-gradient{
  background:linear-gradient(120deg,#F8B4D9,#9B59B6 45%,#6D3F8C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.azkar-hero-sub{
  margin:0 auto; max-width:620px;
  color:var(--text-light,#7a6a85);
  font-family:var(--font-primary);
  font-size:clamp(.98rem,2vw,1.12rem);
}

/* الآية */
.azkar-ayah{
  margin:26px auto 0; max-width:640px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 26px; border-radius:22px;
  background:var(--azkar-glass);
  border:1px solid var(--azkar-line);
  box-shadow:var(--azkar-shadow);
  backdrop-filter:blur(14px);
}
.azkar-ayah p{
  margin:0; font-family:var(--font-secondary);
  font-size:clamp(1.05rem,2.6vw,1.45rem);
  color:var(--secondary-purple); line-height:1.9;
}
.ayah-mark{color:#F8B4D9; font-size:1.5rem; line-height:1;}

/* حافة موجية أسفل الترويسة */
.azkar-hero-wave{
  position:absolute; inset:auto 0 -1px 0; height:70px; z-index:2;
  background:linear-gradient(180deg,transparent,#fffdfe 88%);
  -webkit-mask:radial-gradient(60% 70px at 50% 100%,#000 98%,transparent 100%);
          mask:radial-gradient(60% 70px at 50% 100%,#000 98%,transparent 100%);
}

/* ===== 3) الحاوية وشريط الأدوات ===== */
.azkar-app-container{
  position:relative; z-index:2;
  padding:clamp(1.5rem,4vw,2.5rem) 0 110px;
  min-height:60vh;
  background:linear-gradient(180deg,#fffdfe,#fdf9fc);
}
.azkar-toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:center; margin-bottom:26px;
}
.azkar-search{position:relative; flex:1 1 420px; max-width:620px;}
.azkar-search-input{
  width:100%; padding:16px 52px 16px 20px;
  border-radius:999px; border:1px solid var(--azkar-line);
  background:var(--azkar-glass); backdrop-filter:blur(14px);
  font-family:var(--font-primary); font-size:clamp(.95rem,2vw,1.05rem);
  color:var(--azkar-ink); box-shadow:var(--azkar-shadow);
  transition:.3s ease;
}
.azkar-search-input::placeholder{color:#b09cbd;}
.azkar-search-input:focus{
  outline:none; background:#fff;
  border-color:rgba(155,89,182,.5);
  box-shadow:0 0 0 5px rgba(155,89,182,.10), var(--azkar-shadow);
}
.azkar-search-icon{
  position:absolute; top:50%; right:20px; transform:translateY(-50%);
  color:var(--primary-purple); opacity:.65; pointer-events:none;
}
.azkar-reset-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:999px; cursor:pointer;
  border:1px solid var(--azkar-line); background:rgba(255,255,255,.75);
  color:var(--secondary-purple); font-family:var(--font-primary);
  font-size:.95rem; transition:.3s ease; backdrop-filter:blur(10px);
}
.azkar-reset-btn:hover{
  background:#fff; border-color:rgba(155,89,182,.45);
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(155,89,182,.16);
}

/* ===== 4) أزرار الفئات ===== */
.category-container{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px;
}
.category-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.7); backdrop-filter:blur(10px);
  border:1px solid var(--azkar-line); color:var(--azkar-ink);
  font-family:var(--font-primary); font-size:clamp(.88rem,1.6vw,1rem);
  transition:.28s cubic-bezier(.22,1,.36,1);
}
.category-btn .cat-icon{
  width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(248,180,217,.35),rgba(155,89,182,.18));
  color:var(--primary-purple); font-size:.85em; transition:.28s;
}
.category-count{
  background:rgba(155,89,182,.10); color:var(--primary-purple);
  padding:2px 9px; border-radius:999px; font-size:.8em; font-weight:700;
}
.category-btn:hover{
  transform:translateY(-3px); background:#fff;
  border-color:rgba(155,89,182,.42);
  box-shadow:0 12px 26px rgba(155,89,182,.16);
}
.category-btn.active{
  background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));
  color:#fff; border-color:transparent;
  box-shadow:0 12px 28px rgba(155,89,182,.34);
}
.category-btn.active .cat-icon{background:rgba(255,255,255,.22); color:#fff;}
.category-btn.active .category-count{background:rgba(255,255,255,.22); color:#fff;}

/* ===== 5) بطاقات الأبواب — محاريب صغيرة ===== */
.azkar-info-alert{
  display:flex; align-items:center; gap:10px;
  padding:13px 20px; margin-bottom:6px; border-radius:16px;
  background:rgba(255,255,255,.8); border:1px solid var(--azkar-line);
  color:var(--secondary-purple); font-family:var(--font-primary);
  font-size:clamp(.88rem,1.8vw,1rem); box-shadow:0 8px 22px rgba(155,89,182,.07);
}

.chapter-card{
  position:relative; height:100%; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  padding:20px 20px 20px 44px;
  border-radius:26px 26px 18px 18px;
  background:var(--azkar-glass); backdrop-filter:blur(18px);
  border:1px solid var(--azkar-line);
  box-shadow:var(--azkar-shadow);
  transition:.32s cubic-bezier(.22,1,.36,1);
  animation:azkarFadeUp .55s ease both;
}
.chapter-arch{
  position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 50% 100%, rgba(248,180,217,.35), transparent 68%);
  opacity:0; transition:.35s; pointer-events:none;
}
.chapter-corner{
  position:absolute; bottom:-22px; left:-22px; width:70px; height:70px;
  border:1px solid rgba(155,89,182,.22); transform:rotate(45deg); border-radius:12px;
  transition:.35s;
}
.chapter-card:hover{
  transform:translateY(-6px); background:#fff;
  border-color:rgba(155,89,182,.4);
  box-shadow:var(--azkar-shadow-lg);
}
.chapter-card:hover .chapter-arch{opacity:1;}
.chapter-card:hover .chapter-corner{transform:rotate(45deg) scale(1.15); border-color:rgba(248,180,217,.6);}

.chapter-number{
  flex-shrink:0; width:clamp(42px,7vw,50px); height:clamp(42px,7vw,50px);
  display:grid; place-items:center; border-radius:16px 16px 14px 14px;
  background:linear-gradient(150deg,rgba(248,180,217,.32),rgba(155,89,182,.16));
  border:1px solid rgba(155,89,182,.20);
  color:var(--secondary-purple); font-weight:800;
  font-size:clamp(.95rem,2vw,1.1rem);
  font-family:var(--font-primary);
}
.chapter-content{min-width:0;}
.chapter-title{
  margin:0; font-family:var(--font-secondary);
  font-size:clamp(1.02rem,2.3vw,1.2rem); line-height:1.55; color:var(--azkar-ink);
}
.chapter-meta{
  margin-top:7px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-primary); font-size:clamp(.74rem,1.5vw,.83rem);
  color:var(--text-light,#8a7a95);
}
.chapter-category{display:inline-flex; align-items:center; gap:5px;}
.chapter-audio-icon{color:var(--primary-purple); opacity:.7;}
.chapter-arrow{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:rgba(155,89,182,.32); transition:.3s;
}
.chapter-card:hover .chapter-arrow{color:var(--secondary-purple); transform:translateY(-50%) translateX(-5px);}

/* ألوان الفئات على البطاقات */
.chapter-card[data-category="morning"] .chapter-number{background:linear-gradient(150deg,rgba(245,158,11,.24),rgba(245,158,11,.10)); color:#b45309;}
.chapter-card[data-category="evening"] .chapter-number{background:linear-gradient(150deg,rgba(99,102,241,.22),rgba(99,102,241,.09)); color:#4338ca;}
.chapter-card[data-category="sleep"]   .chapter-number{background:linear-gradient(150deg,rgba(139,92,246,.22),rgba(139,92,246,.09)); color:#6d28d9;}
.chapter-card[data-category="wakeup"]  .chapter-number{background:linear-gradient(150deg,rgba(16,185,129,.22),rgba(16,185,129,.09)); color:#047857;}
.chapter-card[data-category="prayer"]  .chapter-number{background:linear-gradient(150deg,rgba(5,150,105,.22),rgba(5,150,105,.09)); color:#065f46;}

/* ===== 6) ترويسة الباب ===== */
.azkar-back-btn{margin-bottom:14px;}
.zikr-header-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  padding:20px 22px 26px; border-radius:26px;
  background:var(--azkar-glass); backdrop-filter:blur(18px);
  border:1px solid var(--azkar-line);
  box-shadow:var(--azkar-shadow);
}
.zikr-header-info{text-align:center; flex:1 1 240px;}
.zikr-header-title{
  margin:0; font-family:var(--font-secondary);
  font-size:clamp(1.2rem,3vw,1.7rem); color:var(--secondary-purple);
}
.zikr-header-count{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  font-family:var(--font-primary); font-size:.85rem; color:var(--text-light,#8a7a95);
}
.dot-sep{opacity:.5;}
.zikr-header-actions{display:flex; align-items:center; gap:8px;}
.chapter-progress-bar{
  position:absolute; inset:auto 0 0 0; height:5px; background:rgba(155,89,182,.10);
}
.chapter-progress-bar span{
  display:block; height:100%;
  background:linear-gradient(90deg,#F8B4D9,#9B59B6);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

/* أزرار عامة بالنسق */
.noor-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  font-family:var(--font-primary); font-size:.92rem; transition:.28s ease;
}
.noor-btn-primary{
  background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));
  color:#fff; box-shadow:0 10px 26px rgba(155,89,182,.30);
}
.noor-btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(155,89,182,.38);}
.noor-btn-primary.is-playing{background:linear-gradient(135deg,#e74c3c,#c0392b); box-shadow:0 10px 26px rgba(231,76,60,.3);}
.noor-btn-ghost{
  background:rgba(255,255,255,.75); color:var(--secondary-purple);
  border-color:var(--azkar-line);
}
.noor-btn-ghost:hover{background:#fff; border-color:rgba(155,89,182,.45); transform:translateY(-2px);}
.noor-btn-icon{
  width:44px; height:44px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.75); border-color:var(--azkar-line);
  color:var(--secondary-purple);
}
.noor-btn-icon:hover{background:#fff; transform:rotate(-45deg);}

/* ===== 7) بطاقة الذكر ===== */
.zikr-card{
  position:relative; overflow:hidden;
  padding:22px clamp(18px,3vw,26px);
  border-radius:26px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px);
  border:1px solid var(--azkar-line);
  box-shadow:var(--azkar-shadow);
  transition:.32s cubic-bezier(.22,1,.36,1);
  animation:azkarFadeUp .5s ease both;
}
.zikr-card:hover{border-color:rgba(155,89,182,.32); box-shadow:var(--azkar-shadow-lg);}
.zikr-edge{
  position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,#F8B4D9,#9B59B6);
  opacity:.55;
}
.zikr-card.completed{
  background:linear-gradient(180deg,rgba(240,253,244,.92),rgba(255,255,255,.9));
  border-color:rgba(22,163,74,.30);
}
.zikr-card.completed .zikr-edge{background:linear-gradient(180deg,#4ade80,#16a34a);}
.zikr-card.collapsed{padding-bottom:16px;}
.zikr-card.collapsed .zikr-content{display:none;}

.zikr-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.zikr-head-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.zikr-head-left{display:flex; align-items:center; gap:8px;}

.zikr-number{
  width:clamp(34px,5vw,38px); height:clamp(34px,5vw,38px);
  display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(150deg,rgba(248,180,217,.32),rgba(155,89,182,.15));
  color:var(--secondary-purple); font-weight:800;
  font-family:var(--font-primary); font-size:.92rem;
}
.zikr-number.completed{background:linear-gradient(150deg,#4ade80,#16a34a); color:#fff;}
.zikr-repeat-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  background:rgba(155,89,182,.09); color:var(--secondary-purple);
  font-family:var(--font-primary); font-size:.78rem; font-weight:700;
}
.zikr-done-badge{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--azkar-done); font-weight:700; font-size:.85rem;
  font-family:var(--font-primary);
}
.zikr-toggle-btn{
  background:none; border:none; cursor:pointer; padding:0;
  color:var(--azkar-done); font-family:var(--font-primary); font-size:.82rem;
  display:inline-flex; align-items:center; gap:6px; opacity:.85;
}
.zikr-toggle-btn:hover{opacity:1; text-decoration:underline;}

.zikr-mini-btn{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(155,89,182,.07); border:1px solid rgba(155,89,182,.16);
  color:var(--primary-purple); font-size:1rem; transition:.28s ease;
}
.zikr-mini-btn:hover{background:var(--primary-purple); color:#fff; transform:scale(1.07);}
.zikr-mini-btn.active{background:var(--secondary-purple); color:#fff;}
.zikr-audio-btn.playing{
  background:#e74c3c; color:#fff; border-color:#e74c3c;
  animation:azkarPulse 1.2s infinite;
}
@keyframes azkarPulse{
  0%{box-shadow:0 0 0 0 rgba(231,76,60,.45);}
  70%{box-shadow:0 0 0 12px rgba(231,76,60,0);}
  100%{box-shadow:0 0 0 0 rgba(231,76,60,0);}
}

/* نص الذكر */
.zikr-text{
  margin:22px 0 6px; padding:22px clamp(16px,3vw,26px);
  border-radius:22px 22px 16px 16px;
  background:linear-gradient(180deg,rgba(253,247,251,.9),rgba(255,255,255,.55));
  border:1px dashed rgba(155,89,182,.22);
  font-family:var(--font-secondary);
  font-size:clamp(1.18rem,2.6vw,1.6rem); line-height:2.15;
  color:var(--azkar-ink); text-align:justify; text-align-last:center;
}

/* العدّاد */
.zikr-footer{margin-top:18px;}
.zikr-counter{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.counter-display{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-primary);
}
.counter-current{font-size:clamp(1.7rem,4vw,2.1rem); font-weight:800; color:var(--secondary-purple);}
.counter-current.completed{color:var(--azkar-done);}
.counter-separator{font-size:.85rem; color:var(--text-light,#9b8aa5);}
.counter-total{font-size:1.15rem; color:var(--text-light,#9b8aa5); font-weight:700;}

.counter-track-wrap{width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center;}
.zikr-progress{
  width:100%; height:8px; border-radius:999px;
  background:rgba(155,89,182,.12); overflow:hidden;
}
.zikr-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,#F8B4D9,#9B59B6);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}
.zikr-card.completed .zikr-progress-fill{background:linear-gradient(90deg,#4ade80,#16a34a);}

.counter-btn{
  position:relative; margin-top:-14px;
  width:clamp(64px,12vw,76px); height:clamp(64px,12vw,76px);
  border:none; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--primary-purple),var(--secondary-purple));
  color:#fff; font-size:clamp(1.5rem,3.5vw,1.9rem);
  box-shadow:0 14px 30px rgba(155,89,182,.34);
  transition:transform .18s ease, box-shadow .28s ease;
}
.counter-btn i{position:relative; z-index:2;}
.counter-btn-halo{
  position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle,rgba(248,180,217,.55),transparent 70%);
  opacity:.7; animation:azkarHalo 2.6s ease-in-out infinite alternate;
}
.counter-btn:active:not(:disabled){transform:scale(.92);}
.counter-btn:hover:not(:disabled){box-shadow:0 20px 40px rgba(155,89,182,.42);}
.counter-btn:disabled,.counter-btn.disabled{
  background:linear-gradient(140deg,#4ade80,#16a34a); cursor:default;
  box-shadow:0 14px 30px rgba(22,163,74,.28);
}
.counter-btn:disabled .counter-btn-halo{background:radial-gradient(circle,rgba(74,222,128,.5),transparent 70%);}

/* المصدر والتخريج */
.source-content{
  display:none; margin-top:16px; padding:16px 18px;
  border-radius:18px; border:1px solid rgba(155,89,182,.16);
  background:rgba(253,247,251,.8);
  font-family:var(--font-primary); font-size:clamp(.85rem,1.8vw,.95rem);
  line-height:1.9; color:var(--text-light,#7a6a85);
  animation:azkarFadeUp .35s ease both;
}
.source-content.open{display:block;}
.source-content i{color:var(--primary-purple); margin-left:6px;}
.source-text{margin:0 0 8px;}
.source-reference{margin:0; font-weight:700; color:var(--secondary-purple);}

/* ===== 8) الحالات ===== */
.azkar-loading,.azkar-error,.azkar-empty-state{
  text-align:center; padding:60px 20px;
  color:var(--text-light,#8a7a95); font-family:var(--font-primary);
}
.state-emblem{
  width:84px; height:84px; margin:0 auto 18px; border-radius:26px;
  display:grid; place-items:center; transform:rotate(45deg);
  background:linear-gradient(150deg,rgba(248,180,217,.28),rgba(155,89,182,.12));
  border:1px solid rgba(155,89,182,.2);
}
.state-emblem i{transform:rotate(-45deg); font-size:2rem; color:var(--primary-purple);}
.azkar-error .state-emblem i{color:#e07a5f;}
.azkar-loading h5,.azkar-error h5,.azkar-empty-state h5{
  color:var(--secondary-purple); font-family:var(--font-secondary); margin-bottom:8px;
}
.noor-spinner{display:flex; gap:8px; justify-content:center; margin-bottom:18px;}
.noor-spinner span{
  width:12px; height:12px; border-radius:4px; transform:rotate(45deg);
  background:linear-gradient(135deg,#F8B4D9,#9B59B6);
  animation:noorBounce 1s ease-in-out infinite;
}
.noor-spinner span:nth-child(2){animation-delay:.15s;}
.noor-spinner span:nth-child(3){animation-delay:.3s;}
@keyframes noorBounce{
  0%,100%{transform:rotate(45deg) translateY(0); opacity:.5;}
  50%{transform:rotate(45deg) translateY(-12px); opacity:1;}
}

.azkar-footer{
  text-align:center; margin-top:10px; padding:22px;
  border-radius:22px; border:1px dashed rgba(22,163,74,.3);
  background:rgba(240,253,244,.6);
  color:var(--azkar-done); font-weight:700;
  font-family:var(--font-primary); font-size:clamp(.95rem,2vw,1.1rem);
}
.azkar-footer i{margin-left:8px;}

/* ===== 9) حركة الظهور ===== */
@keyframes azkarFadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

/* ===== 10) الاستجابة ===== */
@media (max-width:768px){
  .azkar-hero{padding:3.5rem 0 2.5rem;}
  .azkar-ayah{padding:14px 18px;}
  .azkar-hero .dia-1,.azkar-hero .dia-3{display:none;}
  .azkar-toolbar{flex-direction:column;}
  .azkar-reset-btn{width:100%; justify-content:center;}
  .zikr-header-card{flex-direction:column; text-align:center;}
  .zikr-header-actions{width:100%; justify-content:center;}
  .chapter-card{border-radius:22px; padding:16px 16px 16px 40px;}
  .zikr-text{padding:18px 14px; line-height:2;}
}

@media (prefers-reduced-motion: reduce){
  .emblem-halo,
  .counter-btn-halo,.zikr-audio-btn.playing,.noor-spinner span,
  .chapter-card,.zikr-card,.source-content{
    animation:none !important; transition:none !important;
  }
}