/* CSS for the given HTML structure START */

.background {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  text-align: center;
  background-image: url("/wp-content/uploads/2025/05/madinah.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  margin-bottom: 2rem;
  border-radius: 1.5rem;
  background-blend-mode: overlay;
  background-color: rgba(18, 18, 18, 0.7);
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5) inset;
}

.current-info {
  text-align: center;
  padding: 1rem;
  border-radius: 2rem;
  border: 0.7rem solid #c07900;
  box-shadow: 0 0 2rem rgba(192, 122, 0, 0.3);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.current-time {
  display: flex;
  justify-content: center;
  line-height: 1;
  gap: 2rem;
  font-size: 10rem;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgb(0, 0, 0);
  padding-bottom: 1rem;
  border-bottom: 0.3rem solid #555;
}

.time-suffix {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #ddd;
}

.seconds {
  font-size: 5rem;
  opacity: 0.8;
}

.ampm {
  font-size: 4rem;
}

.current-date {
  word-spacing: -1.8rem;
  font-size: 6rem;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgb(0, 0, 0);
}

.year {
  font-size: 4rem;
}

.anima-box {
  position: relative;
}

.anima-text {
  position: absolute;
  left: 0;
  width: 100%;
  transition: opacity 0.5s ease;
}

#hijri-date {
  direction: rtl;
  line-height: 7rem;
  font-family: "roboto mono", monospace, sans-serif;
  padding: 0 1.5rem;
}

.current-namaz {
  box-shadow: 0 0 2rem rgba(79, 195, 247, 0.3);
  border: 0.5rem solid rgba(79, 195, 247, 0.7);
  border-radius: 2rem;
  background-color: #000;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.current-namaz-name {
  display: flex;
  background-color: #4fc3f755;
  font-size: 6rem;
  justify-content: center;
  align-items: center;
}

.current-namaz-time {
  font-size: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CSS for the given HTML structure END */

@font-face {
  font-family: "AlQalam";
  src: url("/wp-content/uploads/2025/05/Al-Qalam-Quran-Majeed-Web-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: 0.75vw !important;
}

/* .prayer-container .urdu {
            font-family: 'AlQalam', sans-serif;
        } */

@media (max-width: 768px) {
  html {
    font-size: 1.5vw !important;
  }
}

* {
  box-sizing: border-box;
}

.jt-container {
  color: #fff;
  font-family: "Roboto Mono", monospace;
  background-color: #000;
  padding: 3rem;
}

/* Base styles for prayer grid */
.prayer-container {
  color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  /* border: 0.3rem solid rgba(79, 195, 247, 0.3); */
  border-radius: 1rem;
  padding: 1rem;
}

/* Prayer header row */
.prayer-header {
  display: grid;
  grid-template-columns: 5fr 5fr 6fr;
  margin-bottom: 1rem;
  background-color: rgba(79, 194, 247, 0.3);
  border-radius: 1rem;
  line-height: 8rem;
}

.header-label {
  font-size: 4rem;
  color: #ffcc4d;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

.header-label:nth-child(2) {
  border-left: 0.5rem solid rgba(79, 194, 247, 0.3);
  border-right: 0.5rem solid rgba(79, 194, 247, 0.3);
}

/* Prayer items */
.prayer-item {
  display: grid;
  grid-template-columns: 5fr 5fr 6fr;
  border-radius: 2rem;
  margin-bottom: 1.3rem;
  border: 0.5rem solid rgba(255, 255, 255, 0.1);
  line-height: 8rem;
}

/* Time and name cells */
.azan-time,
.prayer-name,
.jamat-time {
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prayer-name {
  background-color: #4fc3f755;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

.jamat-time {
  font-size: 6rem;
}

.azan-time {
  color: #bbbbbb;
  font-size: 5rem;
}

/* Language toggles */
.anima-box {
  position: relative;
}

.anima-text {
  position: absolute;
  left: 0;
  width: 100%;
  transition: opacity 0.5s ease;
}

.lang-en .english,
.lang-ur .urdu {
  opacity: 1;
}

.lang-en .urdu,
.lang-ur .english {
  opacity: 0;
}

/* Prayer name variations */
/* .prayer-name.decr {
            background: linear-gradient(90deg, #f74f4f63 50%, #4fc3f755 50%);
        }

        .prayer-name.incr {
            background: linear-gradient(90deg, #84f74f63 50%, #4fc3f755 50%);
        } */

.incr-one {
  background: linear-gradient(90deg, #84f74f63 50%, #84f74f20 50%);
}

.incr-two {
  background-color: #84f74f63;
}

.decr-one {
  background: linear-gradient(90deg, #f74f4f63 50%, #f74f4f20 50%);
}

.decr-two {
  background-color: #f74f4f63;
}

/* Mosque info */
.masjid-info {
  background-color: #fff1;
  font-size: 3.5rem;
  line-height: 8rem;
  border-radius: 1rem;
}

/* .masjid-info .urdu {
            font-size: 4rem;
            padding-top: 1rem;
        } */

/* Text styles */
.english {
  font-weight: bold;
}

.urdu {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 5rem;
}

.hidden {
  visibility: hidden;
}

/* custom */
.separate-containers .inside-article {
  background-color: #000;
}

.entry-content {
  margin: 0 !important;
}

.current-prayer {
  border-color: rgba(79, 195, 247, 0.7);
  box-shadow: 0 0 2rem rgba(79, 195, 247, 0.3);
}

/* .prayer-item {
  border: 5px solid transparent;
  border-radius: 2rem;
  background-clip: padding-box;
  position: relative;
} */

/* .prayer-item {
  position: relative;
  border-radius: 2rem;
  border: 0.3rem solid rgba(255, 255, 255, 0.1);
  background-clip: padding-box; 
} */

/* Alternative approach using clip-path for better browser support */
.prayer-item {
  position: relative;
}

.prayer-item::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  border: 0.5rem solid #c07900;
  border-radius: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* .prayer-item.current-prayer::after {
  border-color: rgba(79, 195, 247, 0.7);
  opacity: 1;
  clip-path: inset(0); 
} */

/* Fully visible at 15 minutes, completely hidden at 0 minutes */
.prayer-item.current-prayer-15::after {
  opacity: 1;
  clip-path: inset(0); /* 15/15 (100% visible) */
}

.prayer-item.current-prayer-14::after {
  opacity: 1;
  clip-path: inset(0 6.67% 0 0); /* 14/15 (93.33% visible) */
}

.prayer-item.current-prayer-13::after {
  opacity: 1;
  clip-path: inset(0 13.33% 0 0); /* 13/15 (86.67% visible) */
}

.prayer-item.current-prayer-12::after {
  opacity: 1;
  clip-path: inset(0 20% 0 0); /* 12/15 (80% visible) */
}

.prayer-item.current-prayer-11::after {
  opacity: 1;
  clip-path: inset(0 26.67% 0 0); /* 11/15 (73.33% visible) */
}

.prayer-item.current-prayer-10::after {
  opacity: 1;
  clip-path: inset(0 33.33% 0 0); /* 10/15 (66.67% visible) */
}

.prayer-item.current-prayer-9::after {
  opacity: 1;
  clip-path: inset(0 40% 0 0); /* 9/15 (60% visible) */
}

.prayer-item.current-prayer-8::after {
  opacity: 1;
  clip-path: inset(0 46.67% 0 0); /* 8/15 (53.33% visible) */
}

.prayer-item.current-prayer-7::after {
  opacity: 1;
  clip-path: inset(0 53.33% 0 0); /* 7/15 (46.67% visible) */
}

.prayer-item.current-prayer-6::after {
  opacity: 1;
  clip-path: inset(0 60% 0 0); /* 6/15 (40% visible) */
}

.prayer-item.current-prayer-5::after {
  opacity: 1;
  clip-path: inset(0 66.67% 0 0); /* 5/15 (33.33% visible) */
}

.prayer-item.current-prayer-4::after {
  opacity: 1;
  clip-path: inset(0 73.33% 0 0); /* 4/15 (26.67% visible) */
}

.prayer-item.current-prayer-3::after {
  opacity: 1;
  clip-path: inset(0 80% 0 0); /* 3/15 (20% visible) */
}

.prayer-item.current-prayer-2::after {
  opacity: 1;
  clip-path: inset(0 86.67% 0 0); /* 2/15 (13.33% visible) */
}

.prayer-item.current-prayer-1::after {
  opacity: 1;
  clip-path: inset(0 93.33% 0 0); /* 1/15 (6.67% visible) */
}

/* .prayer-item.current-prayer-5::after,
.prayer-item.current-prayer-4::after,
.prayer-item.current-prayer-3::after,
.prayer-item.current-prayer-2::after,
.prayer-item.current-prayer-1::after {
  border-color: rgb(255, 0, 0);
} */

/* .current-prayer-15 .azan-time,
.current-prayer-14 .azan-time,
.current-prayer-13 .azan-time,
.current-prayer-12 .azan-time,
.current-prayer-11 .azan-time,
.current-prayer-10 .azan-time,
.current-prayer-9 .azan-time,
.current-prayer-8 .azan-time,
.current-prayer-7 .azan-time,
.current-prayer-6 .azan-time,
.current-prayer-5 .azan-time,
.current-prayer-4 .azan-time,
.current-prayer-3 .azan-time,
.current-prayer-2 .azan-time,
.current-prayer-1 .azan-time {
  color: #c07900;
} */