/* WajdQuran guided coach marks: dim everything, spotlight one control with a
   pulse, and a bubble that says what it does. Author: WAJD AI */
/* Coach sits above the page but BELOW modals (sheet z300, onboarding z400), so a
   Settings sheet is never trapped behind the coach's click blocker. */
.coach-block { position: fixed; inset: 0; z-index: 200; }
.coach-ring { position: fixed; z-index: 201; border-radius: 12px; pointer-events: none; transition: top .25s, left .25s, width .25s, height .25s;
  box-shadow: 0 0 0 4px #e6c878, 0 0 0 9999px rgba(0,0,0,.32); animation: coachPulse 1.7s ease-out infinite; }
@keyframes coachPulse {
  0%, 100% { box-shadow: 0 0 0 4px #e6c878, 0 0 0 9999px rgba(0,0,0,.32); }
  50% { box-shadow: 0 0 0 9px rgba(230,200,120,.5), 0 0 0 9999px rgba(0,0,0,.32); }
}
.coach-tip { position: fixed; z-index: 202; left: 14px; right: 14px; max-width: 520px; margin: 0 auto;
  background: radial-gradient(135% 135% at 100% 100%, rgba(244,214,180,.65), rgba(224,246,240,.55) 42%, #ffffff 78%);
  border-radius: 16px; padding: 16px 18px; box-shadow: 0 14px 36px rgba(0,0,0,.3); }
.coach-tip h4 { font-family: 'Poppins',sans-serif; font-weight: 800; margin: 0 0 4px; color: #123f2c; font-size: 1.05rem; }
.coach-tip p { margin: 0; color: #5c6b62; font-size: .92rem; line-height: 1.5; }
.coach-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.coach-dots { display: flex; gap: 6px; }
.coach-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cfe0d6; transition: all .3s; }
.coach-dots i.on { width: 18px; border-radius: 4px; background: #c99a2e; }
.coach-skip { border: none; background: none; color: #9aa8a0; font-family: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; padding: 8px 6px; }
.coach-next { border: none; background: radial-gradient(circle at 50% 24%, #f4de92, #c99a2e); color: #3a2c07; font-family: inherit; font-weight: 800; font-size: .95rem; border-radius: 999px; padding: 10px 22px; cursor: pointer; }
html[dir="rtl"] .coach-tip { text-align: right; }
html.dark .coach-tip { background: radial-gradient(135% 135% at 100% 100%, rgba(90,110,80,.5), rgba(30,46,40,.6) 42%, #1a211d 80%); }
html.dark .coach-tip h4 { color: #eaf3ee; }
html.dark .coach-tip p { color: #b6c0ba; }