@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  /* Brand green (updated) */
  --primary: #007A33;
  --primary-contrast: #ffffff;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-heading: 'Poppins', Arial, sans-serif;
}

/* Color utilities */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.btn-primary {
  color: var(--primary-contrast) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  color: var(--primary-contrast) !important;
  background-color: var(--primary) !important;
}

/* Typography */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* Prayer schedule animations */
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseGlow { 0%{ box-shadow:0 0 0 0 rgba(0,122,51,.55);} 70%{ box-shadow:0 0 0 6px rgba(0,122,51,0);} 100%{ box-shadow:0 0 0 0 rgba(0,122,51,0);} }

#prayer-schedule table tbody tr { animation: fadeSlideIn .55s ease both; }
#prayer-schedule table tbody tr:nth-child(1){ animation-delay:.05s; }
#prayer-schedule table tbody tr:nth-child(2){ animation-delay:.10s; }
#prayer-schedule table tbody tr:nth-child(3){ animation-delay:.15s; }
#prayer-schedule table tbody tr:nth-child(4){ animation-delay:.20s; }
#prayer-schedule table tbody tr:nth-child(5){ animation-delay:.25s; }

#next-iqamah-name.pulsing { animation: pulseGlow 3s ease-in-out infinite; }

/* Smooth number flip for countdown */
#next-iqamah-eta { transition: color .4s ease, transform .4s ease; }
#next-iqamah-eta.updated { color: var(--primary); transform: scale(1.07); }

/* Utilities moved from inline styles */
.max-w-700 { max-width: 700px; }
.quote-badge-offset { top: 25px; left: -25px; }
.max-w-220 { max-width: 220px; }

/* Navbar branding and links in Madeena green */
.navbar .navbar-brand h1 { color: var(--primary) !important; }
.navbar .nav-link { color: var(--primary) !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active { color: var(--primary) !important; text-decoration: underline; }

/* Prayer panel redesign */
#prayer-schedule.prayer-panel {
  position: relative;
  background: linear-gradient(140deg,#004d20,#007a33 60%,#009e42);
  color: #fff;
  border-radius: 18px;
  padding: 0.9rem 0.9rem 1rem; /* reduced overall size */
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#prayer-schedule.prayer-panel[data-bg="image"]::before {
  content: "";
  position: absolute; inset:0;
  background: var(--prayer-bg-image, url('../img/hero.jpg')) center/cover no-repeat;
  filter: brightness(.55) saturate(.9) blur(1px);
  opacity:.4;
}
#prayer-schedule.prayer-panel::after{ /* subtle top glow */
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.35)); pointer-events:none;
}
#prayer-schedule.prayer-panel * { position: relative; }

#prayer-schedule .panel-headline { font-size:1.25rem; font-weight:700; letter-spacing:.5px; }
#prayer-schedule .date-line { font-size:1rem; opacity:.95; margin-top:-.2rem; }
#prayer-schedule .sunrise-inline { font-size:.9rem; margin-top:.25rem; }

#prayer-schedule .next-box { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:.65rem .9rem; border-radius:14px; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
#prayer-schedule .next-box .label { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; opacity:.75; }
#prayer-schedule .next-box .name { font-weight:700; }
#prayer-schedule .next-box .eta { font-family:monospace; font-size:1.05rem; font-weight:700; }

#prayer-schedule table.prayer-table { width:100%; border-collapse:separate; border-spacing:0 .25rem; /* tighter vertical spacing */ }
#prayer-schedule table.prayer-table thead th { font-size:.65rem; text-transform:uppercase; letter-spacing:1px; background:rgba(255,255,255,.15); color:#fff; padding:.4rem .55rem; border:none; }
#prayer-schedule table.prayer-table tbody th { font-weight:700; padding:.55rem .65rem; width:28%; font-size:1.08rem; }
#prayer-schedule table.prayer-table tbody td { padding:.55rem .65rem; font-weight:700; font-family:monospace; font-size:1.08rem; }
#prayer-schedule table.prayer-table tbody tr { background:rgba(255,255,255,.08); border-radius:12px; }
#prayer-schedule table.prayer-table tbody tr:hover { background:rgba(255,255,255,.13); }
#prayer-schedule table.prayer-table tbody tr th:first-child { border-top-left-radius:12px; border-bottom-left-radius:12px; }
#prayer-schedule table.prayer-table tbody tr td:last-child { border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* Column color accents similar to sample (gray + highlighted jamah) */
#prayer-schedule .adhan-cell { background:rgba(0,0,0,.38); color:#f2f2f2; font-size:1.06rem; font-weight:700; }
#prayer-schedule .iqamah-cell { background:var(--primary); color:#fff; font-weight:800; font-size:1.06rem; }
#prayer-schedule .iqamah-cell.pulsing { animation:pulseGlow 3s ease-in-out infinite; }

/* Adjust spacing for cells inside separated rows */
#prayer-schedule .prayer-table tbody tr > * { border:0; }

#prayer-schedule #sun-times { margin-top:.75rem; font-size:1rem; color:#fff; display:flex; gap:1.25rem; flex-wrap:wrap; }
#prayer-schedule #sun-times strong { font-weight:700; color:#ffe8a0; text-transform:uppercase; letter-spacing:.5px; }

/* Strong note style for monthly schedule notes */
#prayer-schedule #prayer-note.note-strong {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: .4rem .55rem;
  border-radius: 10px;
}



/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  #prayer-schedule table tbody tr { animation:none !important; }
  #next-iqamah-name.pulsing, #next-iqamah.pulsing, #next-iqamah-eta.updated, .updated { animation:none !important; transition:none !important; }
}