/* ════════════════════════════════════════════════════════
   IASV MASJID TV DISPLAY — css/style.css
   Islamic Association of Shenandoah Valley
   1330 Country Club Rd · Harrisonburg, VA 22802
════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Oswald',sans-serif;height:100vh;overflow:hidden;display:flex;flex-direction:column;background:#020c1a;}

/* ── BACKGROUND ── */
#bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 140% 80% at 50% -10%, #0c2238 0%, #020c1a 55%),
    radial-gradient(ellipse 70% 120% at 90% 60%,  rgba(27,156,133,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 10% 80%,  rgba(201,168,76,0.05) 0%, transparent 55%);
}
/* Islamic geometric tessellation overlay */
#bg::before{
  content:'';position:absolute;inset:0;
  opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,2 98,27 98,73 50,98 2,73 2,27' fill='none' stroke='%23C9A84C' stroke-width='0.6'/%3E%3Cpolygon points='50,15 85,32 85,68 50,85 15,68 15,32' fill='none' stroke='%23C9A84C' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='14' fill='none' stroke='%231B9C85' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='6' fill='none' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='50' y1='2' x2='50' y2='15' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='50' y1='85' x2='50' y2='98' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='2' y1='27' x2='15' y2='32' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='85' y1='68' x2='98' y2='73' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='85' y1='32' x2='98' y2='27' stroke='%23C9A84C' stroke-width='0.4'/%3E%3Cline x1='2' y1='73' x2='15' y2='68' stroke='%23C9A84C' stroke-width='0.4'/%3E%3C/svg%3E");
}
#bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(2,12,26,0.9) 0%, rgba(2,12,26,0.08) 30%, rgba(2,12,26,0.08) 70%, rgba(2,12,26,0.9) 100%),
    linear-gradient(to bottom, rgba(2,12,26,0.75) 0%, rgba(2,12,26,0.04) 18%, rgba(2,12,26,0.04) 72%, rgba(2,12,26,0.85) 100%);
}

#app{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column;}

/* ── IQAMAH COUNTDOWN SCREEN (last 60 s before iqamah) ── */
#iq-countdown{display:none;position:fixed;inset:0;z-index:9100;background:#000;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;}
#iq-countdown.show{display:flex;}
#iq-cd-num{font-family:'Oswald',sans-serif;font-size:22vw;font-weight:700;color:#C9A84C;line-height:1;letter-spacing:-0.02em;animation:cdPulse 1s ease-in-out infinite;}
#iq-cd-lbl{font-family:'Oswald',sans-serif;font-size:2.8vw;color:rgba(255,255,255,0.75);letter-spacing:0.35em;text-transform:uppercase;}
@keyframes cdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(0.96)}}

/* ── BLACKOUT SCREEN ── */
#blackout{display:none;position:fixed;inset:0;z-index:9000;background:#000000;flex-direction:column;align-items:center;justify-content:center;}
#blackout.show{display:flex;}
#blackout-img{max-height:100vh;max-width:100vw;width:auto;height:100vh;object-fit:contain;display:block;}
#blackout-timer{font-family:'Oswald',sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.25);letter-spacing:0.25em;margin-top:8px;position:absolute;top:20px;right:20px;}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.hdr{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:linear-gradient(180deg, rgba(2,8,22,0.97) 0%, rgba(3,11,26,0.92) 100%);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(201,168,76,0.28);
  padding:7px 22px;flex-shrink:0;position:relative;
}
/* gold top shimmer line */
.hdr::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.6) 15%, #C9A84C 50%, rgba(201,168,76,0.6) 85%, transparent 100%);
}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{
  height:52px;width:auto;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(27,156,133,0.45));
}
.hdr-org{
  font-family:'Oswald',sans-serif;font-size:1rem;font-weight:600;
  color:#fff;letter-spacing:0.08em;line-height:1.25;
}
.hdr-addr{
  font-size:0.55rem;color:rgba(27,156,133,0.9);
  letter-spacing:0.16em;text-transform:uppercase;margin-top:2px;
}
.bismillah{
  font-family:'Amiri',serif;font-size:2rem;color:#C9A84C;
  text-shadow:0 0 28px rgba(201,168,76,0.55), 0 0 60px rgba(201,168,76,0.18);
  line-height:1;
}
.hdr-right{text-align:right;justify-self:end;}
#clock{
  font-family:'Oswald',sans-serif;font-size:2.5rem;font-weight:700;
  color:#fff;letter-spacing:0.04em;line-height:1;
  text-shadow:0 0 30px rgba(27,156,133,0.2);
  font-variant-numeric:tabular-nums;
}
#date-greg{font-size:0.62rem;color:rgba(100,210,235,0.82);letter-spacing:0.1em;margin-top:2px;}
#date-hijri{font-family:'Tajawal',sans-serif;font-size:0.62rem;color:#C9A84C;font-weight:500;}

/* ── FRIDAY BANNER ── */
#fri-banner{
  display:none;text-align:center;padding:4px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.14) 20%, rgba(201,168,76,0.2) 50%, rgba(201,168,76,0.14) 80%, transparent);
  border-bottom:1px solid rgba(201,168,76,0.22);
  font-family:'Amiri',serif;font-size:0.95rem;color:#C9A84C;
  letter-spacing:0.25em;flex-shrink:0;
}
#fri-banner.show{display:block;}

/* ══════════════════════════════════════════
   MAIN 3-COLUMN LAYOUT
══════════════════════════════════════════ */
.main{flex:1;display:grid;grid-template-columns:1fr 235px 302px;gap:0;overflow:hidden;}

/* ══════════════════════════════════════════
   COLUMN 1 — IMAGE SLIDER
══════════════════════════════════════════ */
.col-slider{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 26px;
}
/* vignette overlay on slider */
.col-slider::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(to right, rgba(2,12,26,0.55) 0%, transparent 35%, transparent 65%, rgba(2,12,26,0.4) 100%),
    linear-gradient(to bottom, rgba(2,12,26,0.45) 0%, transparent 22%, transparent 62%, rgba(2,12,26,0.75) 100%);
}

.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;}
.slide.active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;}

/* Default "no images" content */
.slide-default-content{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px 28px 36px;z-index:6;
}
/* Decorative background for default */
.slide-default-content::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(27,156,133,0.06) 0%, rgba(2,12,26,0.92) 70%);
}
.slide-quote-text{
  font-family:'Oswald',sans-serif;font-size:2.3rem;font-weight:700;color:#fff;
  line-height:1.22;text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,0.97);
  margin-bottom:9px;position:relative;
}
.slide-quote-text span{
  color:#C9A84C;
  text-shadow:0 0 35px rgba(201,168,76,0.7), 0 2px 24px rgba(0,0,0,0.95);
}
.slide-quote-sub{font-size:0.84rem;color:rgba(255,255,255,0.58);text-shadow:0 1px 12px rgba(0,0,0,0.92);position:relative;}
.slide-quote-sub strong{color:#1B9C85;}

.slide-dua{
  font-family:'Amiri',serif;font-size:1.25rem;color:rgba(201,168,76,0.6);
  text-align:center;line-height:1.8;text-shadow:0 1px 10px rgba(0,0,0,0.85);
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  white-space:nowrap;z-index:6;
}
.sdots{position:absolute;bottom:10px;left:26px;display:none !important;gap:5px;z-index:10;}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.2);}
.dot.active{background:rgba(255,255,255,0.78);}

/* ── RAMADAN BOX ── */
.ramadan-box{
  display:none;position:absolute;bottom:16px;left:14px;right:14px;z-index:20;
  background:linear-gradient(135deg, rgba(48,10,78,0.97) 0%, rgba(18,4,38,0.98) 50%, rgba(48,10,78,0.97) 100%);
  border:1px solid rgba(180,110,255,0.42);border-radius:11px;
  padding:10px 16px 8px;flex-direction:column;align-items:stretch;gap:0;
  box-shadow:0 0 32px rgba(120,40,200,0.3), 0 6px 24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ramadan-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:11px 11px 0 0;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.9), rgba(200,130,255,0.7), rgba(201,168,76,0.9), transparent);
}
.ramadan-box::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:11px;background:radial-gradient(ellipse at 50% 0%, rgba(180,100,255,0.08) 0%, transparent 65%);}
.ramadan-box.show{display:flex;}

/* ── AZAAN ANNOUNCEMENT OVERLAY (slider box only) ── */
.azaan-overlay{
  display:none;position:absolute;inset:0;z-index:60;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:24px;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, rgba(10,30,26,0.97) 0%, rgba(2,12,26,0.99) 75%);
}
.azaan-overlay.show{display:flex;}
.az-badge{
  font-family:'Oswald',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.4em;
  color:#1B9C85;text-shadow:0 0 18px rgba(27,156,133,0.6);margin-bottom:4px;
}
.az-heading{
  font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:400;letter-spacing:0.1em;
  color:rgba(255,255,255,0.8);text-transform:uppercase;
}
.az-name-en{
  font-family:'Oswald',sans-serif;font-size:3.2rem;font-weight:700;line-height:1.05;
  color:#C9A84C;text-shadow:0 0 30px rgba(201,168,76,0.55);letter-spacing:0.03em;
}
.az-name-ar{
  font-family:'Amiri',serif;font-size:2.6rem;color:rgba(255,255,255,0.92);margin-bottom:8px;
}
.az-full-text{
  display:flex;flex-direction:column;gap:5px;max-width:92%;
  border-top:1px solid rgba(201,168,76,0.25);padding-top:12px;
}
.az-line{display:flex;flex-direction:column;gap:1px;}
.az-line-ar{font-family:'Amiri',serif;font-size:1.15rem;color:rgba(255,255,255,0.9);line-height:1.4;}
.az-line-en{font-family:'Oswald',sans-serif;font-size:0.62rem;letter-spacing:0.08em;color:rgba(255,255,255,0.45);text-transform:uppercase;}
.ram-panel-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:5px;}
.ram-crescent{width:20px;height:20px;color:#C9A84C;opacity:0.9;flex-shrink:0;}
.ram-crescent-r{transform:scaleX(-1);}
.ram-title-block{text-align:center;line-height:1.1;}
.ram-ar-title{font-family:'Amiri',serif;font-size:1rem;color:#C9A84C;text-shadow:0 0 16px rgba(201,168,76,0.6);}
.ram-en-title{font-family:'Oswald',sans-serif;font-size:0.38rem;letter-spacing:0.32em;color:rgba(200,140,255,0.65);text-transform:uppercase;margin-top:1px;}
.ram-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.28),transparent);margin-bottom:6px;}
.ram-times-row{display:flex;align-items:center;justify-content:space-between;}
.ram-time-item{flex:1;text-align:center;}
.ram-time-lbl{font-size:0.4rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(200,140,255,0.65);font-weight:700;margin-bottom:1px;}
.ram-time-val{font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:700;color:#C9A84C;line-height:1;text-shadow:0 0 18px rgba(201,168,76,0.5);}
.ram-time-sub{font-size:0.37rem;letter-spacing:0.1em;color:rgba(255,255,255,0.35);text-transform:uppercase;margin-top:2px;}
.ram-times-sep{display:flex;align-items:center;justify-content:center;color:rgba(201,168,76,0.35);font-size:0.55rem;flex-shrink:0;padding:0 8px;}
.ram-dua{font-family:'Amiri',serif;font-size:0.7rem;color:rgba(200,140,255,0.45);text-align:center;margin-top:5px;border-top:1px solid rgba(200,140,255,0.1);padding-top:4px;line-height:1.45;}

/* ══════════════════════════════════════════
   COLUMN 2 — CLOCK + EVENTS
══════════════════════════════════════════ */
.col-clock{
  background:rgba(2,10,24,0.84);
  backdrop-filter:blur(22px);
  border-left:1px solid rgba(27,156,133,0.18);
  border-right:1px solid rgba(27,156,133,0.18);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:13px 11px;gap:0;
  position:relative;
}
/* teal shimmer on left edge */
.col-clock::before{
  content:'';position:absolute;top:10%;bottom:10%;left:0;width:1px;
  background:linear-gradient(180deg, transparent, rgba(27,156,133,0.4) 40%, rgba(27,156,133,0.4) 60%, transparent);
}

/* Islamic Date Display (center panel) */
.clock-big-wrap{
  text-align:center;padding-bottom:11px;
  border-bottom:1px solid rgba(27,156,133,0.15);
  margin-bottom:11px;
}
.hijri-day-name{
  font-family:'Oswald',sans-serif;font-size:1.2rem;font-weight:700;
  color:#C9A84C;letter-spacing:0.22em;text-transform:uppercase;
  margin-bottom:8px;text-shadow:0 0 16px rgba(201,168,76,0.5);
}
.hijri-date-display{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  line-height:1;width:100%;
}
.hijri-day-num{
  font-family:'Oswald',sans-serif;font-size:3.6rem;font-weight:700;
  color:#fff;letter-spacing:0.02em;
  text-shadow:0 0 40px rgba(27,156,133,0.3);
}
.hijri-sep{
  font-size:1.5rem;color:rgba(201,168,76,0.35);font-weight:300;
}
.hijri-month-yr{
  font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:500;
  color:rgba(201,168,76,0.85);letter-spacing:0.04em;
  padding-bottom:5px;
}
.clock-date{display:none;font-size:0.75rem;color:rgba(100,210,235,0.88);letter-spacing:0.16em;text-transform:uppercase;margin-top:6px;}

/* English Date Display */
.eng-date-wrap{
  text-align:center;padding:11px 0 11px;
  border-bottom:1px solid rgba(27,156,133,0.15);
  margin-bottom:11px;
}
.eng-day-name{
  font-family:'Oswald',sans-serif;font-size:1.2rem;font-weight:700;
  color:#1B9C85;letter-spacing:0.22em;text-transform:uppercase;
  margin-bottom:8px;text-shadow:0 0 16px rgba(27,156,133,0.3);
}
.eng-date-display{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  line-height:1;width:100%;
}
.eng-date-num{
  font-family:'Oswald',sans-serif;font-size:3.6rem;font-weight:700;
  color:#fff;letter-spacing:0.02em;
  text-shadow:0 0 40px rgba(100,210,235,0.2);
}
.eng-date-month-yr{
  font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:500;
  color:rgba(100,210,235,0.85);letter-spacing:0.04em;
  padding-bottom:5px;
}

/* Next Iqamah block */
.next-block{
  text-align:center;padding:9px 0;
  border-bottom:none;
  margin-bottom:4px;
}
.next-lbl{font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(27,156,133,1);font-weight:700;margin-bottom:3px;}
.next-name{
  font-family:'Oswald',sans-serif;font-size:0.9rem;font-weight:600;
  color:#1B9C85;letter-spacing:0.14em;margin-bottom:2px;
}
.next-cd{
  font-family:'Oswald',sans-serif;font-size:2.7rem;font-weight:700;
  color:#C9A84C;letter-spacing:0.03em;line-height:1;
  text-shadow:0 0 28px rgba(201,168,76,0.45);
}

/* Sunrise / Sunset */
.sun-block{
  display:flex;flex-direction:column;justify-content:center;
  gap:0;border-top:1px solid rgba(27,156,133,0.15);
  padding:8px 0;
}
.sun-item-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;flex:1;
}
.sun-divider{height:1px;background:rgba(27,156,133,0.15);margin:0 14px;}
.sun-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.sun-lbl2{font-size:0.95rem;letter-spacing:0.16em;color:rgba(255,255,255,0.72);text-transform:uppercase;}
.sun-val{font-family:'Oswald',sans-serif;font-size:1.8rem;font-weight:600;color:#C9A84C;}

/* Events / News box */
.events-box{
  display:none;
  flex:1;
  background:rgba(4,14,32,0.65);
  border:1px solid rgba(27,156,133,0.18);
  border-radius:9px;
  position:relative;overflow:hidden;min-height:0;
}
.ev-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s ease;
  display:flex;
  align-items:center;justify-content:center;
  padding:8px;overflow:hidden;
}
.ev-slide.active{opacity:1;}
.ev-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;display:block;}
.ev-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;}
.ev-lbl{font-size:0.46rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(27,156,133,0.65);font-weight:700;}
.ev-icon{color:rgba(27,156,133,0.22);margin-bottom:4px;}
.sdots#ev-dots{bottom:8px;left:50%;transform:translateX(-50%);justify-content:center;}

/* ── NEWS CARD ── */
.news-card{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.2s ease;
  display:flex;flex-direction:column;
  padding:12px 14px;
  border-radius:8px;
  overflow:hidden;
  text-align:left;
}
.news-card.active{opacity:1;}

/* Category-based gradients */
.news-card[data-cat="announcement"]{
  background:linear-gradient(150deg, rgba(27,156,133,0.18) 0%, rgba(4,16,34,0.92) 65%);
  border:1px solid rgba(27,156,133,0.32);
}
.news-card[data-cat="event"]{
  background:linear-gradient(150deg, rgba(201,168,76,0.15) 0%, rgba(4,14,30,0.93) 65%);
  border:1px solid rgba(201,168,76,0.32);
}
.news-card[data-cat="reminder"]{
  background:linear-gradient(150deg, rgba(100,155,255,0.13) 0%, rgba(4,12,30,0.93) 65%);
  border:1px solid rgba(100,155,255,0.26);
}
.news-card[data-cat="hadith"]{
  background:linear-gradient(150deg, rgba(160,110,255,0.13) 0%, rgba(6,4,30,0.93) 65%);
  border:1px solid rgba(160,110,255,0.26);
}
/* Top accent line per category */
.news-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:8px 8px 0 0;
}
.news-card[data-cat="announcement"]::before{background:linear-gradient(90deg,transparent,#1B9C85,transparent);}
.news-card[data-cat="event"]::before{background:linear-gradient(90deg,transparent,#C9A84C,transparent);}
.news-card[data-cat="reminder"]::before{background:linear-gradient(90deg,transparent,#6499ff,transparent);}
.news-card[data-cat="hadith"]::before{background:linear-gradient(90deg,transparent,#a06eff,transparent);}

/* Category badge */
.nc-badge{
  display:inline-block;font-size:0.38rem;letter-spacing:0.22em;
  text-transform:uppercase;font-weight:700;
  padding:2px 8px;border-radius:20px;
  margin-bottom:7px;align-self:flex-start;
}
.news-card[data-cat="announcement"] .nc-badge{background:rgba(27,156,133,0.22);color:#1B9C85;border:1px solid rgba(27,156,133,0.45);}
.news-card[data-cat="event"] .nc-badge{background:rgba(201,168,76,0.18);color:#C9A84C;border:1px solid rgba(201,168,76,0.45);}
.news-card[data-cat="reminder"] .nc-badge{background:rgba(100,155,255,0.14);color:#88aaff;border:1px solid rgba(100,155,255,0.35);}
.news-card[data-cat="hadith"] .nc-badge{background:rgba(160,110,255,0.14);color:#c09aff;border:1px solid rgba(160,110,255,0.35);}

/* News card content */
.nc-icon{
  font-size:1.6rem;margin-bottom:5px;opacity:0.7;
  filter:drop-shadow(0 0 8px rgba(201,168,76,0.3));
}
.nc-title{
  font-family:'Oswald',sans-serif;font-size:0.88rem;font-weight:700;
  color:#fff;line-height:1.28;letter-spacing:0.06em;
  text-transform:uppercase;margin-bottom:6px;
}
.nc-body{
  font-family:'Tajawal',sans-serif;font-size:0.72rem;
  color:rgba(255,255,255,0.68);line-height:1.55;flex:1;overflow:hidden;
  direction:auto;
}
.nc-date{
  font-size:0.4rem;letter-spacing:0.14em;
  color:rgba(255,255,255,0.28);text-transform:uppercase;
  margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════
   COLUMN 3 — PRAYER TIMES
══════════════════════════════════════════ */
.col-prayers{
  background:rgba(2,8,22,0.9);
  backdrop-filter:blur(22px);
  border-left:1px solid rgba(201,168,76,0.18);
  display:flex;flex-direction:column;
  padding:0;overflow:hidden;
}
/* Prayers header */
.prayers-header{
  display:flex;align-items:center;justify-content:center;
  padding:9px 16px 10px;
  border-bottom:1px solid rgba(201,168,76,0.2);
  margin-bottom:6px;flex-shrink:0;
  background:linear-gradient(180deg, rgba(201,168,76,0.1) 0%, transparent 100%);
  position:relative;
}
.prayers-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
}
.prayers-header-txt{
  font-family:'Oswald',sans-serif;font-size:0.85rem;font-weight:700;
  color:#C9A84C;letter-spacing:0.38em;text-transform:uppercase;
}
.prayers-list{flex:1;display:flex;flex-direction:column;padding:0 8px;gap:6px;overflow:hidden;}

/* Prayer row */
.prow{
  flex:1;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.045);
  border-left:3px solid transparent;
  border-radius:8px;padding:8px 12px;min-height:0;
  transition:all 0.55s ease;
  position:relative;overflow:hidden;
}
/* subtle inner glow on hover state */
.prow::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.55s;
  background:linear-gradient(90deg, rgba(27,156,133,0.07) 0%, transparent 55%);
}
.prow.active{
  background:rgba(27,156,133,0.11);
  border-left-color:#1B9C85;
  border-color:rgba(27,156,133,0.3);
  box-shadow:0 0 22px rgba(27,156,133,0.13), inset 0 0 20px rgba(27,156,133,0.06);
}
.prow.active::after{opacity:1;}
.prow.jumuah-row{
  background:rgba(201,168,76,0.05);
  border-color:rgba(201,168,76,0.1);
  border-left-color:rgba(201,168,76,0.35);
}
.prow.jumuah-row.active{
  background:rgba(201,168,76,0.14);
  border-left-color:#C9A84C;
  border-color:rgba(201,168,76,0.32);
  box-shadow:0 0 22px rgba(201,168,76,0.12);
}
.prow.loading{padding:16px;justify-content:center;background:transparent;border:none;}

.prow-icon{width:19px;height:19px;flex-shrink:0;margin-right:9px;color:rgba(100,175,215,0.45);display:flex;align-items:center;justify-content:center;transition:color 0.55s;}
.prow.active .prow-icon{color:#1B9C85;}
.prow.jumuah-row .prow-icon{color:rgba(201,168,76,0.6);}

.prow-name{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px;margin-right:8px;}
.prow-en{font-family:'Oswald',sans-serif;font-size:1.35rem;font-weight:700;color:rgba(255,255,255,0.78);letter-spacing:0.1em;line-height:1.0;transition:color 0.55s;}
.prow.active .prow-en{color:#fff;text-shadow:0 0 12px rgba(27,156,133,0.3);}
.prow.jumuah-row .prow-en{color:#C9A84C;}
.prow-ar{font-family:'Tajawal',sans-serif;font-size:1.1rem;color:rgba(130,190,220,0.6);font-weight:500;line-height:1.0;transition:color 0.55s;}
.prow.active .prow-ar{color:rgba(27,156,133,0.9);}
.prow.jumuah-row .prow-ar{color:rgba(201,168,76,0.72);}

.prow-iq{
  font-family:'Oswald',sans-serif;font-size:1.8rem;font-weight:700;
  color:rgba(225,225,225,0.88);letter-spacing:0.02em;
  text-align:right;white-space:nowrap;flex-shrink:0;transition:all 0.55s;
}
.prow.active .prow-iq{color:#C9A84C;text-shadow:0 0 16px rgba(201,168,76,0.42);}
.prow.jumuah-row .prow-iq{color:#C9A84C;}

.prow-badge{
  display:none;font-size:0.35rem;letter-spacing:0.14em;text-transform:uppercase;
  background:#1B9C85;color:#fff;padding:2px 5px;border-radius:3px;
  font-weight:700;margin-right:7px;flex-shrink:0;
}
.prow.active .prow-badge{display:inline-block;}

/* ── SLIDER PROGRESS BAR ── */
.slide-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.08);z-index:20;overflow:hidden;}
.slide-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#1B9C85,#C9A84C);}
@keyframes slideProgress{from{width:0%}to{width:100%}}

/* ── TICKER BAR ── */
.ticker{
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(2,8,22,0.88) 100%);
  border-top:1px solid rgba(201,168,76,0.35);
  padding:9px 0;flex-shrink:0;overflow:hidden;white-space:nowrap;
}
.ticker-inner{display:flex;width:max-content;animation:marquee 65s linear infinite;will-change:transform;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-txt{font-size:1.1rem;font-weight:500;color:rgba(255,255,255,0.92);letter-spacing:0.08em;padding:0 48px;}
.ticker-txt span{color:#C9A84C;font-weight:600;}

/* ── GEAR / ADMIN BUTTON ── */
.gear{
  position:fixed;bottom:8px;right:8px;z-index:500;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(100,180,200,0.1);
  color:rgba(255,255,255,0.16);
  width:23px;height:23px;border-radius:50%;
  font-size:0.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.25s;
}
.gear:hover{background:rgba(27,156,133,0.22);color:#fff;border-color:rgba(27,156,133,0.45);}

/* ── LOGIN OVERLAY (index.html inline admin) ── */
#login-panel{display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(2,8,22,0.97);align-items:center;justify-content:center;}
#login-panel.show{display:flex;}
.lbox{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(201,168,76,0.22);
  border-radius:14px;padding:38px 46px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  min-width:320px;position:relative;
  box-shadow:0 8px 40px rgba(0,0,0,0.7), 0 0 80px rgba(27,156,133,0.06);
}
.lbox::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#C9A84C,transparent);
  border-radius:14px 14px 0 0;
}
.lbox-title{font-family:'Oswald',sans-serif;font-size:1.15rem;color:#fff;text-align:center;letter-spacing:0.06em;}
.lbox-title span{display:block;font-size:0.5rem;color:rgba(27,156,133,0.88);letter-spacing:0.26em;text-transform:uppercase;margin-bottom:5px;}
.lbox input{
  width:100%;background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,168,76,0.22);color:#fff;
  padding:10px 14px;border-radius:7px;font-size:0.95rem;
  text-align:center;outline:none;letter-spacing:0.15em;transition:border-color 0.25s;
}
.lbox input:focus{border-color:#C9A84C;box-shadow:0 0 0 2px rgba(201,168,76,0.1);}
.lbox-btn{
  width:100%;
  background:linear-gradient(135deg, #072c1c, #1B9C85 50%, #072c1c);
  color:#fff;border:none;padding:11px;border-radius:7px;
  font-family:'Oswald',sans-serif;font-size:0.88rem;font-weight:600;
  cursor:pointer;letter-spacing:0.12em;text-transform:uppercase;
  transition:opacity 0.2s;
}
.lbox-btn:hover{opacity:0.85;}
.lbox-err{color:#ff9090;font-size:0.72rem;display:none;}

/* ── INLINE ADMIN PANEL (legacy, in index.html) ── */
#admin-panel{display:none;position:fixed;inset:0;z-index:1000;background:#020c1a;overflow-y:auto;}
.adm{max-width:900px;margin:0 auto;padding:26px 22px;}
.adm-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid rgba(27,156,133,0.22);}
.adm-title{font-family:'Oswald',sans-serif;font-size:1.2rem;color:#fff;letter-spacing:0.05em;}
.adm-title span{display:block;font-size:0.52rem;color:rgba(27,156,133,0.85);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:3px;}
.adm-close{background:rgba(255,255,255,0.05);border:1px solid rgba(27,156,133,0.22);color:rgba(27,156,133,0.7);width:34px;height:34px;border-radius:50%;font-size:0.82rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.adm-sec{margin-bottom:16px;}
.adm-sec-title{font-size:0.52rem;letter-spacing:0.22em;text-transform:uppercase;color:#1B9C85;margin-bottom:8px;font-weight:700;}
.adm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.adm-2col{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.adm-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.adm-loc{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end;}
.af{display:flex;flex-direction:column;gap:3px;}
.af label{font-size:0.5rem;letter-spacing:0.12em;color:rgba(255,255,255,0.38);text-transform:uppercase;font-weight:600;}
.af input{background:rgba(255,255,255,0.05);border:1px solid rgba(27,156,133,0.22);color:#fff;padding:6px 9px;border-radius:5px;font-size:0.87rem;font-weight:500;outline:none;}
.af input:focus{border-color:#1B9C85;}
.af input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#C9A84C;}
.apb{background:rgba(255,255,255,0.03);border:1px solid rgba(27,156,133,0.12);border-radius:7px;padding:10px;display:flex;flex-direction:column;gap:6px;}
.apn{font-family:'Oswald',sans-serif;font-size:0.82rem;color:#C9A84C;border-bottom:1px solid rgba(27,156,133,0.1);padding-bottom:5px;letter-spacing:0.04em;}
.a-fetch{background:rgba(27,156,133,0.1);border:1px solid #1B9C85;color:#1B9C85;padding:7px 12px;border-radius:5px;font-size:0.8rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.a-save{background:linear-gradient(90deg,#072c1c,#1B9C85,#072c1c);color:#fff;border:none;padding:10px 30px;border-radius:6px;font-family:'Oswald',sans-serif;font-size:0.88rem;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:0.1em;}
.anote{font-size:0.5rem;color:rgba(255,255,255,0.25);margin-top:3px;font-style:italic;}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:8px;}
.sc{background:rgba(255,255,255,0.03);border:1px solid rgba(27,156,133,0.12);border-radius:7px;padding:9px;display:flex;flex-direction:column;gap:5px;position:relative;}
.sn{font-size:0.48rem;font-weight:700;color:#1B9C85;letter-spacing:0.15em;text-transform:uppercase;}
.si{width:100%;height:65px;object-fit:cover;border-radius:4px;}
.sp{width:100%;height:65px;background:rgba(255,255,255,0.04);border-radius:4px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.18);}
.su{font-size:0.7rem!important;padding:4px 7px!important;}
.sd{position:absolute;top:7px;right:7px;background:#cc2200;color:#fff;border:none;border-radius:50%;width:17px;height:17px;font-size:0.52rem;cursor:pointer;}
.add-btn{background:rgba(27,156,133,0.06);border:2px dashed rgba(27,156,133,0.22);color:#1B9C85;border-radius:7px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-family:'Oswald',sans-serif;font-size:0.75rem;width:100%;margin-top:8px;}
.ir{display:flex;align-items:center;gap:10px;margin-top:5px;}
.ir label{font-size:0.52rem;color:rgba(255,255,255,0.38);letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.ir input{width:60px;background:rgba(255,255,255,0.05);border:1px solid rgba(27,156,133,0.2);color:#fff;padding:5px 7px;border-radius:5px;font-size:0.87rem;outline:none;}
.ram-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.toggle-lbl{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:0.8rem;color:rgba(255,255,255,0.65);}

/* Toast */
#toast{
  position:fixed;top:14px;right:14px;z-index:9999;
  background:linear-gradient(135deg, rgba(5,24,16,0.97), rgba(12,65,38,0.97));
  border:1px solid rgba(201,168,76,0.32);
  color:#C9A84C;padding:9px 18px;border-radius:8px;
  font-size:0.8rem;font-weight:600;letter-spacing:0.05em;
  transform:translateX(135%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter:blur(10px);
}
#toast.show{transform:translateX(0);}

/* ══ TV SCREEN SWITCHER ══ */
.tv-screen{display:none;flex:1;flex-direction:column;overflow:hidden;}
.tv-screen.tv-active{display:flex;}

/* Screen Nav Tabs */
.screen-nav{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:800;
  background:rgba(2,8,22,0.85);backdrop-filter:blur(12px);
  border:1px solid rgba(201,168,76,0.25);border-radius:30px;
  padding:6px 14px;
}
.snav-btn{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.5);font-family:'Oswald',sans-serif;font-size:0.85rem;
  cursor:pointer;transition:all 0.25s;display:flex;align-items:center;justify-content:center;
}
.snav-btn.active{background:#C9A84C;border-color:#C9A84C;color:#020c1a;font-weight:700;}
.snav-btn:hover{background:rgba(201,168,76,0.3);color:#C9A84C;}

/* ── Shared prayer row for all new screens ── */
.s-prow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-left:3px solid transparent;margin-bottom:5px;}
.s-prow.s-jumuah{border-left-color:rgba(201,168,76,0.5);background:rgba(201,168,76,0.05);}
.s-psvg{width:18px;height:18px;flex-shrink:0;color:rgba(100,175,215,0.5);}
.s-pname{flex:1;}.s-pen{font-family:'Oswald',sans-serif;font-size:0.95rem;font-weight:700;color:rgba(255,255,255,0.85);letter-spacing:0.08em;}
.s-par{font-family:'Tajawal',sans-serif;font-size:0.75rem;color:rgba(130,190,220,0.6);}
.s-ptime{font-family:'Oswald',sans-serif;font-size:1.3rem;font-weight:700;color:rgba(225,225,225,0.9);}
.s-prow-lg .s-pen{font-size:1.1rem;}.s-prow-lg .s-ptime{font-size:1.6rem;}

/* Shared events list */
.s-ev-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.s-ev-icon{font-size:1.4rem;flex-shrink:0;}
.s-ev-title{font-family:'Oswald',sans-serif;font-size:0.9rem;font-weight:700;color:#fff;letter-spacing:0.05em;}
.s-ev-body{font-size:0.72rem;color:rgba(255,255,255,0.55);margin-top:2px;line-height:1.4;}

/* ══ SCREEN 1 — Verse + Programs ══ */
.s1-layout{flex:1;display:grid;grid-template-columns:1fr 280px;overflow:hidden;}
.s1-left{
  position:relative;overflow:hidden;padding:32px 36px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(160deg, rgba(2,8,22,0.7) 0%, rgba(2,8,22,0.4) 100%);
}
.s1-left::before{content:'';position:absolute;inset:0;background:url('assets/image1.webp') center/cover no-repeat;z-index:-1;filter:brightness(0.35);}
.s1-verse-wrap{z-index:1;}
.s1-ar{font-family:'Amiri',serif;font-size:3.2rem;color:#C9A84C;line-height:1.5;text-align:center;text-shadow:0 0 40px rgba(201,168,76,0.4);margin-bottom:18px;}
.s1-en{font-family:'Oswald',sans-serif;font-size:1.6rem;color:#fff;text-align:center;line-height:1.4;font-style:italic;font-weight:400;}
.s1-ref{font-family:'Oswald',sans-serif;font-size:1rem;color:#1B9C85;text-align:center;margin-top:10px;letter-spacing:0.1em;}
.s1-programs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;z-index:1;}
.s1-prog{background:rgba(0,0,0,0.6);border:1px solid rgba(201,168,76,0.2);border-radius:10px;padding:14px 10px;text-align:center;}
.s1-prog-icon{font-size:1.8rem;margin-bottom:6px;}
.s1-prog-name{font-family:'Oswald',sans-serif;font-size:0.78rem;font-weight:700;color:#C9A84C;letter-spacing:0.06em;margin-bottom:4px;}
.s1-prog-detail{font-size:0.65rem;color:rgba(255,255,255,0.7);}
.s1-prog-time{font-family:'Oswald',sans-serif;font-size:0.8rem;color:#1B9C85;font-weight:600;margin-top:3px;}

.s1-right{background:rgba(2,8,22,0.92);padding:16px 12px;display:flex;flex-direction:column;border-left:1px solid rgba(201,168,76,0.2);}
.s1-prayers-hdr,.s2-prayers-hdr,.s3-prayers-hdr,.s4-sec-hdr{font-family:'Oswald',sans-serif;font-size:0.62rem;font-weight:700;color:#C9A84C;letter-spacing:0.35em;text-transform:uppercase;text-align:center;padding:8px 0 12px;border-bottom:1px solid rgba(201,168,76,0.2);margin-bottom:10px;}
.s1-prayers,.s2-prayers,.s3-prayers{flex:1;display:flex;flex-direction:column;overflow:hidden;}

.s1-footer{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(0,0,0,0.7);border-top:2px solid rgba(201,168,76,0.4);flex-shrink:0;}
.s1-jum-badge{background:#C9A84C;color:#020c1a;font-family:'Oswald',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.15em;padding:4px 10px;border-radius:4px;margin-right:10px;}
.s1-jum-time{font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:700;color:#C9A84C;}
.s1-footer-topic{font-family:'Oswald',sans-serif;font-size:0.8rem;color:#fff;letter-spacing:0.05em;}
.s1-footer-speaker{font-size:0.65rem;color:rgba(255,255,255,0.5);margin-top:2px;}
.s1-donate-lbl{font-size:0.55rem;letter-spacing:0.2em;color:rgba(201,168,76,0.7);text-transform:uppercase;}
.s1-donate-url{font-family:'Oswald',sans-serif;font-size:0.8rem;color:#1B9C85;}

/* ══ SCREEN 2 — Events ══ */
.s2-layout{flex:1;display:grid;grid-template-columns:260px 1fr 260px;overflow:hidden;}
.s2-left{background:rgba(2,8,22,0.92);padding:16px 12px;display:flex;flex-direction:column;border-right:1px solid rgba(27,156,133,0.2);}
.s2-center{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.s2-center::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(48,10,78,0.8) 0%, rgba(2,8,22,0.95) 100%);}
.s2-featured{position:relative;z-index:1;text-align:center;padding:20px;}
.s2-feat-title{font-family:'Oswald',sans-serif;font-size:3.5rem;font-weight:700;color:#C9A84C;letter-spacing:0.1em;text-shadow:0 0 40px rgba(201,168,76,0.5);}
.s2-feat-sub{font-size:1rem;color:rgba(255,255,255,0.75);margin-top:12px;line-height:1.6;font-style:italic;}
.s2-feat-ar{font-family:'Amiri',serif;font-size:2.2rem;color:rgba(200,140,255,0.7);margin-top:16px;}
.s2-right{background:rgba(2,8,22,0.92);padding:16px 14px;display:flex;flex-direction:column;border-left:1px solid rgba(27,156,133,0.2);}
.s2-ev-hdr{font-family:'Oswald',sans-serif;font-size:0.62rem;font-weight:700;color:#C9A84C;letter-spacing:0.35em;text-transform:uppercase;text-align:center;padding:8px 0 12px;border-bottom:1px solid rgba(201,168,76,0.2);margin-bottom:10px;}
.s2-footer{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(3,11,26,0.95);border-top:1px solid rgba(201,168,76,0.3);flex-shrink:0;}
.s2-dua-lbl{font-size:0.5rem;letter-spacing:0.3em;color:#1B9C85;text-transform:uppercase;font-weight:700;margin-bottom:3px;}
.s2-dua-ar{font-family:'Amiri',serif;font-size:1.1rem;color:#C9A84C;}
.s2-dua-en{font-size:0.7rem;color:rgba(255,255,255,0.6);font-style:italic;margin-top:2px;}
.s2-dua-ref{font-size:0.6rem;color:#1B9C85;margin-top:2px;}
.s2-donate-lbl{font-family:'Oswald',sans-serif;font-size:0.72rem;font-weight:700;color:#C9A84C;letter-spacing:0.12em;}
.s2-donate-url{font-size:0.68rem;color:rgba(255,255,255,0.5);margin-top:3px;}

/* ══ SCREEN 3 — Hadith ══ */
.s3-layout{flex:1;display:grid;grid-template-columns:1fr 280px;overflow:hidden;}
.s3-left{position:relative;overflow:hidden;padding:32px 40px;display:flex;flex-direction:column;justify-content:center;}
.s3-left::before{content:'';position:absolute;inset:0;background:url('assets/image2.webp') center/cover no-repeat;z-index:-1;filter:brightness(0.2) sepia(0.3);}
.s3-hadith-lbl{font-size:0.6rem;letter-spacing:0.4em;color:#1B9C85;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
.s3-ar{font-family:'Amiri',serif;font-size:2.8rem;color:#C9A84C;line-height:1.6;text-shadow:0 0 30px rgba(201,168,76,0.3);margin-bottom:20px;}
.s3-en{font-family:'Oswald',sans-serif;font-size:1.45rem;color:#fff;line-height:1.55;font-weight:400;font-style:italic;}
.s3-ref{font-size:0.95rem;color:rgba(27,156,133,0.9);font-style:italic;margin-top:14px;}
.s3-right{background:rgba(2,8,22,0.92);padding:16px 12px;display:flex;flex-direction:column;border-left:1px solid rgba(201,168,76,0.2);}
.s3-footer{height:90px;display:flex;align-items:stretch;background:rgba(3,11,26,0.95);border-top:1px solid rgba(27,156,133,0.25);flex-shrink:0;}
.s3-box{flex:1;padding:10px 16px;border-right:1px solid rgba(27,156,133,0.15);}
.s3-box:last-child{border-right:none;}
.s3-box-hdr{font-family:'Oswald',sans-serif;font-size:0.52rem;font-weight:700;color:#C9A84C;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:5px;}
.s3-box-title{font-family:'Oswald',sans-serif;font-size:0.8rem;color:#fff;margin-bottom:3px;}
.s3-box-body{font-size:0.68rem;color:rgba(255,255,255,0.58);line-height:1.45;}

/* ══ SCREEN 4 — Full Info ══ */
.s4-layout{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(27,156,133,0.12);overflow:hidden;}
.s4-col{background:rgba(2,8,22,0.95);padding:18px 16px;display:flex;flex-direction:column;overflow:hidden;}
.s4-sec-hdr{font-family:'Oswald',sans-serif;font-size:0.6rem;font-weight:700;color:#C9A84C;letter-spacing:0.35em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(201,168,76,0.2);margin-bottom:12px;}
.s4-quote{font-family:'Oswald',sans-serif;font-size:1.35rem;color:#fff;line-height:1.5;font-style:italic;font-weight:400;flex:1;}
.s4-quote-ref{font-size:0.82rem;color:#1B9C85;margin-top:10px;font-style:italic;}
.s4-social-hdr{font-family:'Oswald',sans-serif;font-size:0.52rem;letter-spacing:0.3em;color:rgba(255,255,255,0.5);text-transform:uppercase;margin:16px 0 8px;}
.s4-social{display:flex;gap:12px;}
.s4-soc-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;font-size:1.1rem;text-decoration:none;transition:all 0.2s;}
.s4-soc-btn:hover{background:rgba(201,168,76,0.2);color:#C9A84C;}
.s4-weather-wrap{margin-top:auto;padding-top:14px;border-top:1px solid rgba(27,156,133,0.15);}
.s4-weather-temp{font-family:'Oswald',sans-serif;font-size:2.4rem;font-weight:700;color:#C9A84C;}
.s4-weather-desc{font-size:0.82rem;color:rgba(255,255,255,0.6);}
.s4-weather-loc{font-size:0.68rem;color:rgba(27,156,133,0.8);margin-top:3px;}
.s4-footer{height:72px;display:flex;align-items:stretch;background:rgba(3,11,26,0.97);border-top:1px solid rgba(201,168,76,0.25);flex-shrink:0;}
.s4-footer-left,.s4-footer-right{flex:1;padding:10px 20px;display:flex;flex-direction:column;justify-content:center;}
.s4-footer-right{border-left:1px solid rgba(27,156,133,0.2);text-align:right;}
.s4-support-hdr{font-family:'Oswald',sans-serif;font-size:0.82rem;font-weight:700;color:#C9A84C;letter-spacing:0.1em;}
.s4-support-sub{font-size:0.65rem;color:rgba(255,255,255,0.5);margin-top:3px;}
.s4-dua-hdr{font-size:0.5rem;letter-spacing:0.25em;color:#1B9C85;text-transform:uppercase;font-weight:700;margin-bottom:3px;}
.s4-dua-ar{font-family:'Amiri',serif;font-size:1rem;color:#C9A84C;}
.s4-dua-en{font-size:0.62rem;color:rgba(255,255,255,0.5);margin-top:2px;}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — TV DISPLAY
   Stacks the fixed TV layout into a scrollable
   single-column view for phones/tablets.
══════════════════════════════════════════ */
@media (max-width:900px) {
  body{height:auto;min-height:100vh;overflow:auto;}
  #app{height:auto;min-height:100vh;}

  /* Header — stack */
  .hdr{grid-template-columns:1fr;gap:8px;padding:10px 14px;text-align:center;}
  .hdr-left{justify-content:center;gap:10px;}
  .hdr-logo{height:42px;}
  .hdr-org{font-size:0.88rem;}
  .hdr-addr{font-size:0.5rem;}
  .bismillah{font-size:1.4rem;justify-self:center;}
  .hdr-right{justify-self:center;text-align:center;}
  #clock{font-size:2rem;}

  /* Friday banner */
  #fri-banner{font-size:0.75rem;letter-spacing:0.15em;padding:6px 8px;}

  /* MAIN 3-col → 1-col stack */
  .main{display:flex;flex-direction:column;height:auto;overflow:visible;}
  .col-slider{min-height:240px;padding:16px;order:2;}
  .col-clock{order:1;padding:14px 12px;border:none;border-bottom:1px solid rgba(27,156,133,0.18);}
  .col-prayers{order:3;border-left:none;border-top:1px solid rgba(201,168,76,0.18);}

  .col-clock::before{display:none;}
  .hijri-day-num,.eng-date-num{font-size:2.8rem;}
  .hijri-day-name,.eng-day-name{font-size:1rem;}
  .hijri-month-yr,.eng-date-month-yr{font-size:0.95rem;}
  .next-cd{font-size:2.2rem;}
  .sun-val{font-size:1.4rem;}
  .sun-lbl2{font-size:0.8rem;}

  .slide-quote-text{font-size:1.5rem;}
  .slide-dua{font-size:0.95rem;white-space:normal;padding:0 12px;}

  /* Azaan overlay */
  .az-name-en{font-size:1.9rem;}
  .az-name-ar{font-size:1.5rem;}
  .az-heading{font-size:1rem;}
  .az-line-ar{font-size:0.9rem;}
  .az-full-text{gap:2px;padding-top:8px;}

  /* Prayer rows */
  .prayers-list{padding:8px;gap:8px;}
  .prow{padding:10px 12px;}
  .prow-en{font-size:1.1rem;}
  .prow-ar{font-size:0.95rem;}
  .prow-iq{font-size:1.5rem;}

  /* Ticker */
  .ticker-txt{font-size:0.85rem;padding:0 24px;}

  /* Ramadan box */
  .ram-time-val{font-size:1.2rem;}

  /* Hide secondary TV screens on mobile — keep only main (s0) */
  #s1,#s2,#s3,#s4{display:none !important;}

  /* Admin panel scroll-friendly */
  .adm{padding:18px 14px;}
  .adm-grid,.adm-3col{grid-template-columns:1fr;}
  .adm-2col{grid-template-columns:1fr;}
  .adm-loc{grid-template-columns:1fr;}
  .sg{grid-template-columns:1fr 1fr;}

  /* Login box */
  .lbox{min-width:0;width:calc(100% - 32px);padding:28px 22px;}

  /* Iqamah countdown */
  #iq-cd-lbl{font-size:0.9rem;letter-spacing:0.2em;}

  /* Blackout image */
  #blackout-img{height:auto;max-height:100vh;max-width:100vw;}
}

@media (max-width:480px) {
  .hdr-org{font-size:0.74rem;letter-spacing:0.04em;}
  .hdr-addr{font-size:0.46rem;}
  .bismillah{font-size:1.15rem;}
  #clock{font-size:1.6rem;}
  .hijri-day-num,.eng-date-num{font-size:2.2rem;}
  .next-cd{font-size:1.8rem;}
  .slide-quote-text{font-size:1.2rem;}
  .prow-en{font-size:0.95rem;}
  .prow-iq{font-size:1.25rem;}
  .sg{grid-template-columns:1fr;}
}