/* Misbaha - Adhkar (Morning/Evening) - matches the original Misbaha palette */
.misbaha-adhkar{
  direction:rtl;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, "Cairo", "Tajawal", sans-serif;
  --bg:#fbf7ee;
  --card:#ffffff;
  --text:#202020;
  --muted:#6a6a6a;
  --accent:#d3b26d;
  --accent2:#b8923b;
  --border: rgba(0,0,0,.08);
  --shadow: 0 16px 40px rgba(0,0,0,.08);
  color:var(--text);
}

/* Page wrapper look (same vibe as Misbaha page) */
.misbaha-adhkar{
  padding: 24px 12px;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(211,178,109,.22), transparent 60%),
              radial-gradient(900px 500px at 10% 0%, rgba(184,146,59,.14), transparent 55%),
              var(--bg);
  border-radius: 16px;
}

.misbaha-adhkar__card{
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98));
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 18px;
}

.misbaha-adhkar__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.misbaha-adhkar__title{font-size:20px;font-weight:900;letter-spacing:.2px;}
.misbaha-adhkar__sub{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.7;}

.misbaha-adhkar__actions{display:flex;align-items:center;gap:10px;}
.misbaha-adhkar__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background: rgba(251,247,238,.65);font-size:12px;color:var(--muted);user-select:none;}
.misbaha-adhkar__badgeDot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(211,178,109,.18);}

/* Between box */
.misbaha-adhkar__between{margin:12px 0;padding:12px 14px;border:1px dashed rgba(0,0,0,.10);border-radius:16px;background: rgba(255,255,255,.65);} 
.misbaha-adhkar__betweenText{color:var(--muted);margin-bottom:10px;font-size:13px;}
.misbaha-adhkar__betweenBtns{display:flex;gap:10px;flex-wrap:wrap;}

.misbaha-adhkar__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 6px;}
.misbaha-adhkar__step{font-weight:900;}
.misbaha-adhkar__mini{color:var(--muted);font-size:12px;}

.misbaha-adhkar__dhikrWrap{margin:10px 0 4px;padding:14px;border:1px solid var(--border);border-radius:16px;background: rgba(251,247,238,.35);} 
.misbaha-adhkar__dhikrTitle{font-weight:900;margin-bottom:8px;}
.misbaha-adhkar__dhikr{font-size:16px;line-height:1.9;white-space:pre-line;}

/* Counter circle */
.misbaha-adhkar__counter{margin:16px 0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;user-select:none;}
.misbaha-adhkar__circle{
  width: 170px;
  height: 170px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: radial-gradient(circle at 30% 20%, rgba(211,178,109,.25), rgba(255,255,255,0) 55%),
              linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,247,238,.7));
  box-shadow: inset 0 0 0 6px rgba(211,178,109,.10), 0 10px 26px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.misbaha-adhkar__circle:active{transform: scale(.99);} 
.misbaha-adhkar__circleNum{font-size:40px;font-weight:900;color: var(--text);} 
.misbaha-adhkar__hint{color:var(--muted);font-size:13px;}
.misbaha-adhkar__repeat{color:var(--muted);font-size:13px;}

/* Buttons */
.misbaha-adhkar__nav{display:flex;gap:10px;justify-content:space-between;margin-top:10px;flex-wrap:wrap;}
.misbaha-adhkar__btn{
  border:1px solid rgba(211,178,109,.55);
  background: rgba(211,178,109,.22);
  color: var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
}
.misbaha-adhkar__btn:hover{background: rgba(211,178,109,.28);} 
.misbaha-adhkar__btn--ghost{border:1px solid var(--border);background: rgba(255,255,255,.8);} 
.misbaha-adhkar__btn--ghost:hover{background: rgba(255,255,255,1);} 
.misbaha-adhkar__btn:disabled{opacity:.45;cursor:not-allowed;}

.misbaha-adhkar__note{margin-top:10px;color:var(--muted);font-size:12px;min-height:18px;}

@media (max-width: 600px){
  .misbaha-adhkar__card{padding:14px;border-radius:18px;}
  .misbaha-adhkar__circle{width:150px;height:150px;}
  .misbaha-adhkar__circleNum{font-size:36px;}
  .misbaha-adhkar__dhikr{font-size:15px;}
}