/* The prayer tool has its own restrained visual layer; all rules stay scoped to it. */
body.guide.prayer-app {
  background:
    linear-gradient(180deg, rgba(8, 9, 10, .78) 0%, rgba(11, 10, 8, .95) 40%, #0d0c09 100%),
    url("/static/images/guide/makkah-masjid-al-haram-cc-by-3.jpg") center top / cover fixed;
  color: #f5f0df;
}

body.guide.prayer-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 78% 11%, rgba(202, 162, 73, .14), transparent 27%);
}

body.guide.prayer-app header {
  background: rgba(10, 10, 9, .78);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(204, 169, 87, .35);
}

body.guide.prayer-app main {
  width: min(100% - 28px, 760px);
  margin: 0 auto;
  padding: 30px 0 54px;
}

body.guide.prayer-app h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.6rem);
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}

body.guide.prayer-app main > p:first-of-type {
  max-width: 47rem;
  color: #ded7c4;
  line-height: 1.6;
}

body.guide.prayer-app .status,
body.guide.prayer-app #qibla {
  margin-top: 18px;
  padding: clamp(17px, 4vw, 24px);
  border: 1px solid rgba(216, 180, 93, .42);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(27, 28, 26, .93), rgba(17, 17, 15, .84));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 244, 209, .04);
}

body.guide.prayer-app .status h2,
body.guide.prayer-app #qibla h2 {
  margin: 0 0 9px;
  color: #f5e2a1;
  font-size: clamp(1.14rem, 5vw, 1.45rem);
}

body.guide.prayer-app .status p,
body.guide.prayer-app #qibla p { color: #ddd6c5; line-height: 1.55; }

body.guide.prayer-app #persistent-prayer {
  border-color: rgba(224, 186, 88, .68);
  background:
    linear-gradient(110deg, rgba(120, 87, 31, .25), rgba(24, 25, 22, .92) 52%),
    linear-gradient(135deg, rgba(27, 28, 26, .94), rgba(17, 17, 15, .86));
}

body.guide.prayer-app #prayer-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(216, 180, 93, .32);
  background: rgba(6, 7, 7, .3);
}

body.guide.prayer-app #prayer-times h2,
body.guide.prayer-app #prayer-times > p { grid-column: 1 / -1; padding-inline: 18px; }
body.guide.prayer-app #prayer-times h2 { padding-top: 18px; }
body.guide.prayer-app #prayer-times > p { padding-bottom: 10px; }
body.guide.prayer-app #prayer-times dt,
body.guide.prayer-app #prayer-times dd {
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid rgba(216, 180, 93, .17);
}
body.guide.prayer-app #prayer-times dt { color: #eee5cc; font-weight: 700; }
body.guide.prayer-app #prayer-times dd { color: #f1cd70; font-weight: 800; text-align: right; }

body.guide.prayer-app input,
body.guide.prayer-app select {
  min-height: 44px;
  color: #f7edd8;
  border: 1px solid rgba(217, 181, 91, .5);
  border-radius: 10px;
  background: rgba(5, 6, 6, .62);
}

body.guide.prayer-app button,
body.guide.prayer-app .button {
  border-color: rgba(232, 196, 102, .9);
  background: linear-gradient(135deg, #b58a36, #e1bd6b);
  color: #19140b;
  font-weight: 800;
  box-shadow: 0 8px 19px rgba(0, 0, 0, .22);
}

body.guide.prayer-app #qibla .qibla-dial {
  margin-inline: auto;
  border-color: rgba(227, 192, 97, .75);
  background: radial-gradient(circle, rgba(53, 51, 39, .96), rgba(12, 13, 12, .96) 67%);
  box-shadow: inset 0 0 0 8px rgba(221, 181, 85, .06), 0 14px 28px rgba(0, 0, 0, .28);
}

body.guide.prayer-app .notice {
  padding: 12px 14px;
  border-left: 3px solid #d9b35d;
  border-radius: 8px;
  background: rgba(114, 80, 24, .16);
}

@media (max-width: 640px) {
  body.guide.prayer-app header { padding-inline: 14px; }
  body.guide.prayer-app header nav { gap: 10px; font-size: .8rem; }
  body.guide.prayer-app main { width: min(100% - 20px, 760px); padding-top: 21px; }
  body.guide.prayer-app .status,
  body.guide.prayer-app #qibla { border-radius: 14px; }
  body.guide.prayer-app #prayer-times dt,
  body.guide.prayer-app #prayer-times dd { padding: 12px 14px; }
}