/* ============================================
   Hoca AI — additive polish layer
   To roll back: remove this file + additions.js + <!-- ADDITION:* --> blocks.
   ============================================ */

/* ---------- live prayer widget ---------- */
.live-widget {
  margin: 28px auto 0;
  max-width: 560px;
  padding: 14px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(16,185,129,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(52,211,153,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -40px rgba(16,185,129,0.5);
}
.lw-row {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
}
.lw-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.lw-divider {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.08);
}
.lw-next {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.lw-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.lw-next strong {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
.lw-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 16.5px;
  font-weight: 600;
  color: #34d399;
  text-shadow: 0 0 24px rgba(52,211,153,0.45);
}
.lw-times {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lw-time {
  text-align: center;
  padding: 4px 2px;
  border-radius: 8px;
  transition: background 0.3s;
}
.lw-time-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.lw-time-val {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.lw-time.is-next {
  background: rgba(52,211,153,0.1);
}
.lw-time.is-next .lw-time-val { color: #34d399; }
.lw-time.is-passed .lw-time-val { color: var(--ink-mute); }

@media (max-width: 700px) {
  .live-widget {
    max-width: calc(100vw - 40px);
    width: calc(100vw - 40px);
    padding: 12px;
    border-radius: 18px;
    overflow: hidden;
  }
  .lw-row {
    gap: 10px;
  }
  .lw-next {
    gap: 6px;
  }
  .lw-label,
  .lw-loc {
    font-size: 10.5px;
  }
  .lw-next strong,
  .lw-countdown {
    font-size: 13.5px;
  }
  .lw-times {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .lw-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .lw-divider {
    width: 100%;
    height: 1px;
  }
  .lw-next {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }
  .lw-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .live-widget {
    max-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }
}

/* ---------- splash intro ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a1612 0%, #050807 70%);
  pointer-events: none;
  animation: splashOut 1.7s ease 0.4s forwards;
}
.splash-mark {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: block;
  object-fit: cover;
  opacity: 0;
  animation: splashMarkIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s forwards, splashMarkOut 0.5s ease 1.6s forwards;
  filter: drop-shadow(0 0 32px rgba(52,211,153,0.46));
}
.splash-wordmark {
  position: absolute;
  font-size: 18px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.7);
  margin-top: 160px;
  opacity: 0;
  animation: splashWordIn 0.8s ease 0.7s forwards, splashMarkOut 0.5s ease 1.6s forwards;
}
.splash-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(52,211,153,0.4);
  opacity: 0;
  animation: splashRing 1.6s ease 0.5s forwards;
}
@keyframes splashMarkIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes splashMarkOut {
  to { opacity: 0; transform: scale(1.4); }
}
@keyframes splashWordIn {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; }
  to { opacity: 0.8; transform: translateY(0); letter-spacing: 0.32em; }
}
@keyframes splashRing {
  0% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes splashOut {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- tilavet audio sample button on Quran panel ---------- */
.scr-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 22px;
  background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.3);
  color: #34d399;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
}
.scr-audio-btn:hover {
  background: rgba(52,211,153,0.22);
  transform: translateY(-1px);
}
.scr-audio-btn.is-playing {
  background: rgba(52,211,153,0.28);
}
.scr-audio-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.scr-audio-bars span {
  display: block;
  width: 2.5px;
  height: 100%;
  background: #34d399;
  border-radius: 2px;
  animation: audioBar 0.9s ease-in-out infinite;
  transform-origin: bottom;
}
.scr-audio-bars span:nth-child(1) { animation-delay: 0s; }
.scr-audio-bars span:nth-child(2) { animation-delay: 0.18s; }
.scr-audio-bars span:nth-child(3) { animation-delay: 0.32s; }
.scr-audio-btn:not(.is-playing) .scr-audio-bars span { animation-play-state: paused; transform: scaleY(0.3); }
@keyframes audioBar {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* ---------- newsletter / notify form in footer ---------- */
.notify-form {
  margin-top: 22px;
  display: flex;
  gap: 8px;
  max-width: 420px;
  position: relative;
}
.notify-form input {
  flex: 1;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.notify-form input:focus {
  border-color: rgba(52,211,153,0.5);
  background: rgba(255,255,255,0.06);
}
.notify-form button {
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, #34d399, #10b981);
  color: #04130d;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 12px 30px -12px rgba(16,185,129,0.6);
}
.notify-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -10px rgba(16,185,129,0.8);
}
.notify-form.is-disabled input,
.notify-form.is-disabled button {
  cursor: not-allowed;
  opacity: 0.62;
}
.notify-form.is-disabled button:hover {
  transform: none;
  box-shadow: 0 12px 30px -12px rgba(16,185,129,0.6);
}
.notify-form .notify-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 18px;
  background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.4);
  border-radius: 999px;
  color: #34d399;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.4s, transform 0.4s;
}
.notify-form.is-sent .notify-success { opacity: 1; transform: scale(1); }
.notify-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .notify-form {
    max-width: 100%;
    flex-direction: column;
  }
  .notify-form input,
  .notify-form button {
    width: 100%;
  }
  .notify-form .notify-success {
    border-radius: 18px;
    padding: 12px 14px;
  }
}

/* ---------- premium plan accent ---------- */
.plan-pro { position: relative; }

/* ---------- footer mosque silhouette ---------- */
.footer-mosque {
  width: 100%;
  max-width: 1100px;
  height: 78px;
  margin: 60px auto -1px;
  display: block;
  opacity: 0.55;
}
.footer-mosque path,
.footer-mosque circle,
.footer-mosque line {
  fill: none;
  stroke: rgba(52,211,153,0.5);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.footer-mosque .glow {
  filter: drop-shadow(0 0 6px rgba(52,211,153,0.5));
}