/* Noor Quran v4.7 — fixed-frame broadcasting, smooth verse-only tracking,
   left WhatsApp, and the owner's editable ticker.
   Quran / timing data and audio logic are not changed. */
html:has(body.broadcast), body.broadcast {
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.broadcast .app,body.broadcast .main {
  height:100dvh!important;
  max-height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.broadcast .main-scroll {
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.broadcast .reading,
body.broadcast.mode-mini .reading,
body.broadcast.mode-vertical .reading{
  overflow:hidden!important;
  position:relative!important;
  min-height:0!important;
}
body.broadcast .reading .verses,
body.broadcast.mode-mini .reading .verses,
body.broadcast.mode-vertical .reading .verses{
  display:block!important;
  position:relative;
  min-height:0!important;
  max-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  scroll-behavior:smooth;
}
body.broadcast .reading::-webkit-scrollbar,
body.broadcast .reading .verses::-webkit-scrollbar,
body.broadcast .main-scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.broadcast.mode-mini .main-scroll{
  height:100dvh!important;
  padding:clamp(12px,2.2vh,30px) clamp(12px,4vw,62px) clamp(55px,8vh,85px)!important;
  gap:clamp(6px,1.8vh,18px)!important;
  justify-content:flex-start!important;
}
body.broadcast.mode-mini .hero{
  flex:0 0 auto!important;
  min-height:0!important;
  max-height:clamp(50px,9vh,95px)!important;
  overflow:hidden!important;
}
body.broadcast.mode-mini .hero h2{
  font-size:clamp(23px,4vh,46px)!important;
  margin:0!important;
}
body.broadcast.mode-mini .hero p{font-size:clamp(10px,1.55vh,14px)!important}
body.broadcast.mode-mini .reading{
  flex:1 1 auto!important;
  width:min(96vw,1160px)!important;
  max-width:1160px!important;
  height:auto!important;
  max-height:none!important;
  padding:clamp(33px,5vh,60px) clamp(26px,5vw,70px)!important;
  justify-content:flex-start!important;
}
body.broadcast.mode-mini .reading-title,
body.broadcast.mode-mini .basmalah{flex:0 0 auto!important}
body.broadcast.mode-mini .reading .verses{
  flex:1 1 0!important;
  height:100%!important;
  overflow-y:auto!important;
  text-align:justify!important;
  margin:0!important;
  padding:10px 10px 18px!important;
  scroll-padding-block:25%;
}
body.broadcast.mode-mini .reading .ayah{scroll-margin-block:20%}

/* TikTok view: the frame and ornamental page never move; only the current
   ayah and the inside of the text pane follow the recording. */
body.broadcast.mode-vertical .app{
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
body.broadcast.mode-vertical .main-scroll{
  width:100%!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  padding:clamp(48px,8vh,95px) 5% clamp(74px,12vh,120px)!important;
  gap:clamp(12px,3vh,38px)!important;
  justify-content:center!important;
}
body.broadcast.mode-vertical .hero{flex:0 0 auto!important}
body.broadcast.mode-vertical .reading{
  flex:0 1 auto!important;
  width:100%!important;
  height:clamp(280px,57dvh,730px)!important;
  max-height:57dvh!important;
  min-height:0!important;
  padding:clamp(33px,5vh,60px) clamp(14px,5%,32px)!important;
  justify-content:center!important;
  align-items:stretch!important;
}
body.broadcast.mode-vertical .reading .verses{
  width:100%!important;
  max-height:100%!important;
  height:100%!important;
  flex:1 1 auto!important;
  padding:10px 5px 22px!important;
  line-height:2.05!important;
  text-align:center!important;
  overflow-y:auto!important;
  scrollbar-width:none!important;
}
body.broadcast.mode-vertical .reading .ayah.current {
  line-height:2.05!important;
}

/* Left contact: label is the clickable link, digits are optional in settings. */
#whatsappFloat.whatsapp-float{
  right:auto!important;
  left:clamp(8px,2vw,28px)!important;
  bottom:clamp(112px,15vh,150px);
  transform:none!important;
  direction:rtl;
  z-index:35!important;
  background:linear-gradient(135deg,#0f6848,#16734f)!important;
  border-color:rgba(169,229,181,.52)!important;
  box-shadow:0 9px 25px #0007!important;
  text-decoration:none!important;
}
#whatsappFloat.whatsapp-float:hover{transform:translateY(-2px)!important}
#whatsappFloat .wa-caption{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  font-size:clamp(11px,.8vw,14px)!important;
  white-space:nowrap!important;
}
#whatsappFloat small[hidden]{display:none!important}
#whatsappFloat small:not([hidden]){font-size:10px;color:#e4f9e7}
body.broadcast #whatsappFloat.whatsapp-float{
  right:auto!important;left:clamp(6px,1.2vw,20px)!important;
  bottom:clamp(63px,10vh,105px)!important;
  display:flex!important;
  padding:8px 13px!important;
  background:#0b694bcf!important;
}
body.broadcast #whatsappFloat.whatsapp-float[hidden],#whatsappFloat[hidden]{
  display:none!important;
}
body.broadcast .broadcast-contact{display:none!important}

/* Editor fields */
.admin-divider {
  border-top:1px solid rgba(197,169,111,.34);
  margin-top:12px;
  padding-top:13px;
  font-weight:800;
  color:#efd4a4;
  font-size:13px;
}
#settingTickerText{
  border:1px solid #587963;
  background:#09271f;
  color:#f8f1e8;
  border-radius:10px;
  resize:vertical;
  padding:12px;
  min-height:85px;
  max-height:155px;
  width:100%;
  font:500 13px/1.9 Cairo,Tahoma,sans-serif;
}
#settingTickerSpeed{width:100%; accent-color:var(--gold)}

/* Editable, purely typographic ticker. Travel direction left-to-right. */
#noorTicker.noor-ticker {
  direction:ltr;
  position:relative;
  flex:0 0 auto;
  height:43px;
  overflow:hidden;
  display:block;
  width:100%;
  border-top:1px solid rgba(208,177,111,.45);
  border-bottom:1px solid rgba(208,177,111,.45);
  background:linear-gradient(110deg,rgba(8,32,25,.95),rgba(29,66,48,.97),rgba(8,32,25,.95));
  box-shadow:inset 0 0 15px rgba(0,0,0,.15);
  z-index:12;
}
#noorTicker[hidden]{display:none!important}
#noorTicker .ticker-motion{
  height:100%;
  white-space:nowrap;
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:none;
  min-width:max-content;
  animation:noorTickerLTR var(--ticker-duration,26s) linear infinite;
  will-change:left,transform;
}
#noorTicker #tickerText{
  font:700 clamp(13px,1.25vw,17px)/1.6 Cairo,Tahoma,sans-serif;
  color:#fff0cb;
  padding:0 24px;
  white-space:pre;
  direction:rtl;
  unicode-bidi:plaintext;
  text-shadow:0 1px 3px #0007;
}
@keyframes noorTickerLTR {
  0%{left:0;transform:translateX(-100%)}
  100%{left:100%;transform:translateX(0)}
}
body.broadcast #noorTicker.noor-ticker{
  position:fixed!important;
  bottom:clamp(8px,2.5vh,30px);
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(100vw,100%)!important;
  max-width:100%!important;
  height:clamp(32px,4.3vh,47px)!important;
  border:1px solid rgba(225,197,135,.45);
  background:rgba(7,32,25,.9)!important;
  backdrop-filter:blur(8px);
  border-radius:3px;
  z-index:30!important;
}
body.broadcast.mode-vertical #noorTicker.noor-ticker{
  width:min(100vw,56.25dvh)!important;
  max-width:100%!important;
  bottom:clamp(18px,4.5vh,52px)!important;
}
body.broadcast.mode-vertical #noorTicker #tickerText{
  font-size:clamp(12px,1.55vh,17px)!important;
}
/* Screenshot and recording mode: no scrollbar or page movement. */
body.broadcast *{scrollbar-width:none}
body.broadcast *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
@media(prefers-reduced-motion:reduce){
  #noorTicker .ticker-motion{animation-duration:var(--ticker-duration,26s)}
  body.broadcast .reading .verses{scroll-behavior:auto!important}
}

/* Owner-selectable ticker palette. */
#noorTicker[data-color="gold"] #tickerText{color:#fff0cb!important}
#noorTicker[data-color="white"] #tickerText{color:#ffffff!important}
#noorTicker[data-color="mint"] #tickerText{color:#b8f4d4!important}
#noorTicker[data-background="emerald"]{background:linear-gradient(110deg,#082019,#1d4230,#082019)!important}
#noorTicker[data-background="navy"]{background:linear-gradient(110deg,#091624,#183b57,#091624)!important}
#noorTicker[data-background="black"]{background:linear-gradient(110deg,#08090a,#222523,#08090a)!important}
body.broadcast #noorTicker[data-background="emerald"]{background:#092c22ec!important}
body.broadcast #noorTicker[data-background="navy"]{background:#0b1a32ed!important}
body.broadcast #noorTicker[data-background="black"]{background:#090909ee!important}
/* Keep WhatsApp INSIDE the 9:16 canvas, anchored to its left edge. */
body.broadcast.mode-vertical #whatsappFloat.whatsapp-float{
  left:calc((100vw - min(100vw, 56.25dvh))/2 + 8px)!important;
  right:auto!important;
  bottom:clamp(67px,10.5vh,113px)!important;
  padding:7px 10px!important;
}
body.broadcast.mode-vertical #whatsappFloat .wa-caption{font-size:clamp(9px,1.25vh,13px)!important}