/* 🌙 Companion Ramadan — overlays, countdown strip, footer note.
   Landscape-first with a portrait fallback, matching the makrooh module. */

/* ---- Iftar countdown / Suhūr warning strip (bottom band) ---- */
#ramStrip{
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  display:none; align-items:center; justify-content:center; gap:1.2vw;
  padding:1.4vh 3vw; font-family:"Poppins",system-ui,sans-serif;
  font-weight:700; color:#fff; text-align:center;
  box-shadow:0 -0.4vh 2vh rgba(0,0,0,.25);
}
#ramStrip.show{ display:flex; }
#ramStrip.iftar{ background:linear-gradient(90deg,#0e5c3f,#12805a); }
#ramStrip.suhur{ background:linear-gradient(90deg,#7a5a12,#a8791a); }
#ramStrip #ramStripLabel{ font-size:3.2vh; opacity:.92; }
#ramStrip #ramStripVal{ font-size:4.4vh; letter-spacing:1px; }

/* ---- Iftar duʿā full-screen overlay ---- */
#ramIftarOverlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;
  align-items:center; justify-content:center; text-align:center; color:#fff;
  font-family:"Poppins",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%, #12805a 0%, #0b5c40 60%, #063827 100%);
  opacity:0; transition:opacity .5s ease;
}
#ramIftarOverlay.show{ display:flex; opacity:1; }
.ram-if-inner{ display:flex; flex-direction:column; align-items:center; gap:2.2vh; padding:4vh 6vw; max-width:1100px; }
.ram-if-clock{ position:fixed; top:3vh; right:4vw; font-weight:700; font-size:4vh; color:rgba(255,255,255,.9); }
.ram-if-icon{ font-size:11vh; line-height:1; }
.ram-if-title{ font-size:6vh; font-weight:700; color:#ffe9b8; }
.ram-if-ar{ font-family:"Amiri","Noto Naskh Arabic",serif; font-weight:700; font-size:6.5vh; line-height:1.5; margin-top:1vh; }
.ram-if-tr{ font-size:3.2vh; font-weight:600; color:rgba(255,255,255,.92); }
.ram-if-en{ font-size:2.8vh; font-weight:400; color:rgba(255,255,255,.82); max-width:80%; }

/* ---- Suhūr-ending full-screen (final minutes) ---- */
#ramSuhurOverlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:9998; display:none;
  align-items:center; justify-content:center; text-align:center; color:#fff;
  font-family:"Poppins",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%, #a8791a 0%, #7a5510 60%, #4a3208 100%);
  opacity:0; transition:opacity .5s ease;
}
#ramSuhurOverlay.show{ display:flex; opacity:1; }
.ram-su-inner{ display:flex; flex-direction:column; align-items:center; gap:2vh; padding:4vh 6vw; max-width:1000px; }
.ram-su-clock{ position:fixed; top:3vh; right:4vw; font-weight:700; font-size:4vh; color:rgba(255,255,255,.9); }
.ram-su-icon{ font-size:10vh; line-height:1; }
.ram-su-title{ font-size:6vh; font-weight:700; color:#fff2cf; }
.ram-su-sub{ font-size:4vh; font-weight:600; }
.ram-su-sub #ramSuCount{ color:#ffe9b8; letter-spacing:1px; }
.ram-su-note{ font-size:2.8vh; font-weight:400; color:rgba(255,255,255,.85); max-width:80%; }

/* ---- Ramadan footer note ---- */
#ramFooterNote{
  position:fixed; left:0; right:0; bottom:0; z-index:9985;
  text-align:center; padding:0.8vh 2vw;
  font-family:"Amiri","Poppins",serif; font-weight:700; font-size:2.6vh;
  color:#0e5c3f; background:rgba(255,233,184,.14);
}
/* When the countdown strip is visible it sits above the footer note. */
#ramStrip.show ~ #ramFooterNote{ display:none; }

/* Portrait fallback */
@media (orientation:portrait){
  .ram-if-icon,.ram-su-icon{ font-size:15vw; }
  .ram-if-title,.ram-su-title{ font-size:8vw; }
  .ram-if-ar{ font-size:9vw; }
  .ram-if-tr,.ram-su-sub{ font-size:4.5vw; }
  .ram-if-en,.ram-su-note{ font-size:4vw; max-width:88%; }
  #ramStrip #ramStripLabel{ font-size:4.5vw; }
  #ramStrip #ramStripVal{ font-size:6vw; }
  .ram-if-clock,.ram-su-clock{ font-size:5vw; }
}