@font-face{font-family:STC;src:url("assets/fonts/STC-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Monofonto;src:url("assets/fonts/Monofonto.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --gold:#d7ae62;--gold-soft:#f2d99b;--ink:#fff7e6;--muted:#cfc6ae;
  --glass:rgba(10,14,14,.58);--glass-strong:rgba(4,7,7,.78);--border:rgba(242,217,155,.30);
  --shadow:0 18px 60px rgba(0,0,0,.45);--radius:24px;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;min-height:100%;font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#050706;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:url("assets/landscape-bg.jpg") center/cover no-repeat;z-index:-2}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 18%,rgba(214,168,86,.22),transparent 34%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.76));z-index:-1}
.app-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;gap:clamp(12px,2vh,22px);padding:clamp(12px,2.2vw,34px);padding-top:max(clamp(12px,2.2vw,34px),env(safe-area-inset-top));position:relative}
.lang-toggle{position:absolute;top:max(14px,env(safe-area-inset-top));right:clamp(12px,2vw,30px);z-index:3;min-width:70px;background:rgba(0,0,0,.58);border:1px solid var(--border);color:var(--gold-soft);border-radius:16px;padding:10px 14px;font-weight:900;font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif;box-shadow:var(--shadow)}
.lang-toggle:hover{background:rgba(80,55,24,.75)}
.weather-pill{position:absolute;top:max(14px,env(safe-area-inset-top));left:clamp(12px,2vw,30px);z-index:2;display:grid;gap:1px;text-align:center;background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:10px 16px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.weather-pill span{font-size:clamp(27px,3.6vw,45px);font-weight:800;color:var(--gold-soft);direction:ltr}.weather-pill small{font-size:18px;color:var(--muted)}
.top-header{display:grid;gap:clamp(10px,1.7vw,18px);width:min(1180px,100%);margin:0 auto;padding-inline:clamp(76px,9vw,120px)}
.date-panel{text-align:center;padding:clamp(6px,1vw,12px);display:flex;justify-content:center;align-items:baseline;gap:24px;flex-wrap:wrap}
.date-line{display:inline-block;font-size:clamp(34px,5vw,72px);font-weight:800;letter-spacing:.2px}.date-line.gregorian{display:inline-block;font-size:clamp(34px,5vw,72px);font-weight:800;color:#fff}
.info-row{display:grid;grid-template-columns:minmax(120px,160px) 1fr minmax(340px,480px) 1fr minmax(220px,320px);gap:clamp(24px,4vw,80px);align-items:stretch}
.info-box{display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,rgba(20,24,22,.72),rgba(6,8,8,.62));border:1px solid var(--border);border-radius:var(--radius);padding:clamp(10px,1.6vw,18px);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.mosque-image{width:clamp(62px,8vw,108px);height:clamp(62px,8vw,108px);object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}.box-label,.countdown-box span{font-size:clamp(20px,1.8vw,27px);color:var(--muted)}
.current-time{font-size:clamp(54px,9vw,123px);font-weight:900;color:#fff;direction:ltr;line-height:1;text-shadow:0 0 24px rgba(242,217,155,.25)}
.countdown-box{gap:6px}.countdown-box strong{font-size:clamp(33px,4.5vw,66px);color:var(--gold-soft);direction:ltr;line-height:1.05}
.content{display:grid;align-content:center;gap:clamp(16px,2.5vh,28px);width:min(1500px,100%);margin:0 auto}.prayer-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:clamp(10px,1.3vw,18px)}
.prayer-card{position:relative;text-align:center;background:linear-gradient(180deg,rgba(20,24,22,.74),rgba(6,8,8,.64));border:1px solid var(--border);border-radius:26px;padding:clamp(14px,2vw,28px) clamp(8px,1vw,18px);box-shadow:var(--shadow);backdrop-filter:blur(10px);overflow:hidden}.prayer-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(215,174,98,.20),transparent 36%);opacity:.9}.prayer-card>*{position:relative}.prayer-card h2{margin:0 0 8px;font-size:clamp(30px,3.6vw,54px);color:var(--gold-soft);font-weight:800}.prayer-card time{display:block;font-size:clamp(45px,6vw,87px);font-weight:900;direction:ltr}.prayer-card p{margin:10px 0 0;color:var(--muted);font-size:clamp(21px,2.1vw,30px)}.prayer-card p strong{color:#fff;direction:ltr}.prayer-card.active{border-color:rgba(242,217,155,.82);box-shadow:0 0 0 2px rgba(215,174,98,.22),0 22px 70px rgba(0,0,0,.55)}.prayer-card.next{border-color:rgba(109,201,194,.68)}
.last-third-card{justify-self:center;min-width:min(420px,100%);text-align:center;background:var(--glass-strong);border:1px solid var(--border);border-radius:22px;padding:12px 24px;box-shadow:var(--shadow)}.last-third-card span{display:block;color:var(--muted);font-size:clamp(18px,1.45vw,27px)}.last-third-card time{display:block;margin-top:3px;font-size:clamp(23px,3vw,45px);font-weight:900;color:var(--gold-soft);direction:ltr}
.export-panel{width:min(1180px,100%);margin:0 auto;background:rgba(0,0,0,.55);border:1px solid var(--border);border-radius:18px;padding:12px 16px;backdrop-filter:blur(8px)}.export-panel summary{cursor:pointer;color:var(--gold-soft);font-weight:800}.export-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:12px}.export-controls label{display:grid;gap:5px;color:var(--muted)}input[type=date]{padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:#0a0d0c;color:#fff}button{border:1px solid var(--border);background:#7b5221;color:#fff;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif}button:hover{background:#9d6f30}.message{color:#ffd49b}.status{color:var(--muted)}.table-wrap{max-height:38vh;overflow:auto;margin-top:10px;border:1px solid var(--border);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:880px;background:rgba(0,0,0,.4)}th,td{padding:8px;border-bottom:1px solid rgba(255,255,255,.12);text-align:center;white-space:nowrap}th{position:sticky;top:0;background:#20180d;color:var(--gold-soft)}
.footer{display:flex;justify-content:center;gap:14px;color:var(--muted);font-size:clamp(18px,1.8vw,24px);padding-bottom:env(safe-area-inset-bottom)}
html[dir=ltr] .weather-pill{left:clamp(12px,2vw,30px)}html[dir=ltr] .lang-toggle{right:clamp(12px,2vw,30px)}
@media (orientation:portrait){body:before{background-image:url("assets/portrait-bg.jpg")}.app-shell{gap:12px}.weather-pill{position:static;justify-self:start;padding:8px 12px}.lang-toggle{position:absolute}.top-header{padding-inline:0}.date-panel{border-radius:20px;padding:12px}.info-row{grid-template-columns:72px 1fr 1fr;gap:8px}.info-box{border-radius:18px;padding:10px}.mosque-image{width:54px;height:54px}.current-time{font-size:clamp(30px,9vw,52px)}.countdown-box strong{font-size:clamp(20px,6vw,34px)}.prayer-grid{grid-template-columns:1fr;gap:8px}.prayer-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;border-radius:18px;padding:12px 14px}.prayer-card h2{margin:0;text-align:right}.prayer-card time{font-size:clamp(30px,9vw,48px)}.prayer-card p{margin:0;text-align:left}.last-third-card{padding:10px 18px}.export-panel{font-size:21px}}
@media (max-width:720px) and (orientation:portrait){.info-row{grid-template-columns:1fr;}.mosque-box{display:none}.top-header{margin-top:6px}.lang-toggle{padding:8px 12px;min-width:56px}.weather-pill{max-width:120px}.prayer-card{grid-template-columns:1fr auto 1fr}}
@media (max-width:980px) and (orientation:landscape){.top-header{padding-inline:80px}.prayer-grid{grid-template-columns:repeat(6,minmax(110px,1fr))}.prayer-card{border-radius:18px;padding:12px 8px}.date-line{font-size:33px}.current-time{font-size:66px}.app-shell{gap:10px}}

#currentTime,#hijriDate,#gregorianDate,#iqamaCountdown,#temperature,.prayer-card time,.prayer-card p strong,#lastThirdTime{font-family:Monofonto,STC,Tahoma,"Segoe UI",Arial,sans-serif;letter-spacing:.04em}
.prayer-card p{line-height:1}.prayer-card p strong:after{content:" min";font-size:.45em;color:var(--muted);margin-inline-start:.15em}
html[dir=rtl] .prayer-card p strong:after{content:" د"}

/* v2.2.1 layout fixes */
.info-row{grid-template-columns:minmax(110px,.55fr) minmax(340px,1.35fr) minmax(260px,.9fr);gap:clamp(22px,3.2vw,52px)}
.prayer-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.5vw,22px)}
.prayer-card{min-width:0;overflow:hidden;padding-inline:clamp(10px,1.2vw,20px)}
.prayer-card time{font-size:clamp(42px,4.15vw,78px);line-height:1.05;white-space:nowrap;letter-spacing:.005em;max-width:100%;overflow:visible}
.prayer-card h2{font-size:clamp(30px,3.1vw,52px);line-height:1.05}.prayer-card p{font-size:clamp(21px,1.9vw,28px)}
.prayer-card p strong:after,html[dir=rtl] .prayer-card p strong:after{content:"";display:none}
#currentTime,#hijriDate,#gregorianDate,#iqamaCountdown,#temperature,.prayer-card time,.prayer-card p strong,#lastThirdTime{letter-spacing:.015em}.footer{flex-direction:column;align-items:center;gap:3px;text-align:center;line-height:1.15}
@media (orientation:portrait){.info-row{grid-template-columns:80px minmax(0,1fr) minmax(120px,.9fr);gap:clamp(12px,3vw,22px)}.prayer-card time{font-size:clamp(34px,9vw,52px)}}
@media (max-width:720px) and (orientation:portrait){.info-row{grid-template-columns:1fr;gap:10px}.mosque-box{display:none}}
@media (max-width:980px) and (orientation:landscape){.info-row{gap:18px}.prayer-card time{font-size:clamp(38px,4vw,56px)}.prayer-card h2{font-size:30px}}

.info-row{align-items:stretch}
.mosque-box{grid-column:1;justify-self:start}
.time-box{grid-column:3;min-width:0}
.countdown-box{grid-column:5;justify-self:end;min-width:0}
.time-box,.countdown-box{overflow:hidden}
.current-time,.countdown-box strong{display:block;width:100%;text-align:center;white-space:nowrap;font-size:clamp(48px,7vw,96px)}
.box-label,.countdown-box span{margin-bottom:8px}

/* v2.3.0 professional display upgrades: larger cards, glow, progress, 4K scaling */
:root{
  --tv-scale:clamp(1, calc(100vw / 1920), 1.38);
}
.app-shell{
  width:100%;
  max-width:3840px;
  margin:0 auto;
  gap:clamp(16px,2.4vh,38px);
}
.top-header{width:min(1900px,100%)}
.content{width:min(1900px,100%);gap:clamp(22px,3vh,46px)}
.info-row{
  display:grid;
  grid-template-columns:minmax(125px,210px) minmax(380px,620px) minmax(280px,440px);
  justify-content:space-between;
  align-items:stretch;
  width:100%;
  gap:clamp(36px,6vw,140px);
}
.mosque-box,.time-box,.countdown-box{grid-column:auto;min-height:clamp(130px,9vw,190px)}
.mosque-box{justify-self:start}.time-box{justify-self:center}.countdown-box{justify-self:end}
.time-box,.countdown-box{padding-inline:clamp(18px,2vw,42px)}
.current-time{font-size:clamp(62px,7.2vw,150px);line-height:.95;max-width:100%;overflow:hidden;text-overflow:clip}
.countdown-box strong{font-size:clamp(44px,4.6vw,92px);line-height:1;max-width:100%;overflow:hidden;text-overflow:clip}
.next-prayer-line{font-size:clamp(18px,1.45vw,30px);color:var(--muted);display:flex;gap:.45em;justify-content:center;align-items:center;white-space:nowrap;margin-top:4px}
.next-prayer-line b{color:var(--gold-soft);font-weight:900}
.iqama-progress{width:min(92%,360px);height:clamp(8px,.65vw,14px);border-radius:999px;border:1px solid rgba(242,217,155,.34);background:rgba(255,255,255,.08);overflow:hidden;margin-top:clamp(10px,1vw,16px);box-shadow:inset 0 0 14px rgba(0,0,0,.45)}
.iqama-progress-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,rgba(215,174,98,.55),rgba(242,217,155,.95));box-shadow:0 0 18px rgba(242,217,155,.45);transition:width .85s ease}
.prayer-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(18px,2vw,34px);
}
.prayer-card{
  min-height:clamp(210px,14vw,330px);
  border-radius:clamp(28px,2vw,40px);
  padding:clamp(22px,2.5vw,44px) clamp(14px,1.4vw,26px);
  transform:translateZ(0);
  transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease,background .45s ease,filter .45s ease;
  animation:cardEnter .8s ease both;
}
.prayer-card h2{font-size:clamp(42px,3.8vw,82px);margin-bottom:clamp(10px,1vw,18px)}
.prayer-card time{font-size:clamp(58px,5.2vw,112px);line-height:1;letter-spacing:.005em}
.prayer-card p{font-size:clamp(28px,2.4vw,46px);margin-top:clamp(14px,1.25vw,24px)}
.prayer-card.active{
  border-color:rgba(255,223,143,.98)!important;
  transform:scale(1.045);
  background:linear-gradient(180deg,rgba(58,43,18,.84),rgba(8,9,8,.72));
  box-shadow:0 0 0 3px rgba(255,220,135,.42),0 0 36px rgba(242,217,155,.50),0 26px 95px rgba(0,0,0,.78);
  z-index:2;
}
.prayer-card.active:after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 15%,rgba(255,229,159,.28),transparent 52%);
  animation:goldSweep 3.5s ease-in-out infinite;
}
.prayer-card.next:not(.active){border-color:rgba(109,201,194,.85);box-shadow:0 0 0 2px rgba(109,201,194,.18),var(--shadow)}
.value-updated{animation:valueFadeSlide .7s ease both}
.last-third-card{min-width:min(520px,100%);padding:clamp(14px,1.2vw,24px) clamp(26px,2.2vw,44px);transition:transform .45s ease,box-shadow .45s ease}.last-third-card span{font-size:clamp(18px,1.35vw,30px)}.last-third-card time{font-size:clamp(28px,2.6vw,56px)}
.footer{font-size:clamp(20px,1.5vw,34px)}
@keyframes cardEnter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes valueFadeSlide{0%{opacity:.35;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes goldSweep{0%,55%{opacity:0;transform:translateX(-65%)}70%{opacity:1}100%{opacity:0;transform:translateX(65%)}}
@media (min-width:2500px){
  .app-shell{padding:clamp(34px,2vw,78px)}
  .top-header,.content,.export-panel{width:min(2600px,92vw)}
  .prayer-card{min-height:360px}.prayer-card h2{font-size:92px}.prayer-card time{font-size:126px}.prayer-card p{font-size:50px}
  .date-line{font-size:86px}.date-line.gregorian{font-size:52px}
  .current-time{font-size:166px}.countdown-box strong{font-size:104px}
}
@media (orientation:portrait){
  .info-row{grid-template-columns:minmax(74px,110px) minmax(0,1fr) minmax(120px,.95fr);gap:clamp(12px,3vw,28px)}
  .mosque-box,.time-box,.countdown-box{min-height:auto}
  .current-time{font-size:clamp(34px,9vw,64px)}.countdown-box strong{font-size:clamp(24px,6vw,42px)}
  .next-prayer-line{font-size:clamp(14px,3.3vw,20px)}.iqama-progress{height:8px}
  .prayer-grid{grid-template-columns:1fr;gap:clamp(10px,1.4vh,18px)}
  .prayer-card{min-height:auto;grid-template-columns:1fr auto 1fr;padding:clamp(14px,3vw,24px);border-radius:22px}
  .prayer-card h2{font-size:clamp(32px,7vw,56px)}.prayer-card time{font-size:clamp(38px,8vw,62px)}.prayer-card p{font-size:clamp(24px,5vw,34px)}
  .prayer-card.active{transform:scale(1.015)}
}
@media (max-width:1100px) and (orientation:landscape){
  .info-row{grid-template-columns:100px minmax(280px,1fr) minmax(210px,.8fr);gap:24px}
  .prayer-grid{gap:12px}.prayer-card{min-height:170px;padding:16px 8px}.prayer-card h2{font-size:34px}.prayer-card time{font-size:48px}.prayer-card p{font-size:24px}
  .current-time{font-size:70px}.countdown-box strong{font-size:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* v2.3.1 fit-to-screen + fullscreen button */
.fullscreen-toggle{
  position:absolute;
  top:calc(max(14px,env(safe-area-inset-top)) + 54px);
  right:clamp(12px,2vw,30px);
  z-index:3;
  min-width:96px;
  background:rgba(0,0,0,.58);
  border:1px solid var(--border);
  color:var(--gold-soft);
  border-radius:16px;
  padding:9px 12px;
  font-weight:900;
  font-size:16px;
  font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif;
  box-shadow:var(--shadow);
}
.fullscreen-toggle:hover{background:rgba(80,55,24,.75)}
html[dir=ltr] .fullscreen-toggle{right:clamp(12px,2vw,30px)}
.app-shell{gap:clamp(10px,1.6vh,24px);padding:clamp(10px,1.7vw,28px)}
.top-header{width:min(1600px,100%);gap:clamp(8px,1.2vw,14px)}
.date-panel{padding:clamp(9px,1.3vw,18px);border-radius:24px}
.date-line{font-size:clamp(24px,3.25vw,54px);line-height:1.08}.date-line.gregorian{font-size:clamp(18px,2.05vw,34px)}
.info-row{grid-template-columns:minmax(105px,175px) minmax(310px,500px) minmax(240px,380px);gap:clamp(28px,5vw,110px)}
.mosque-box,.time-box,.countdown-box{min-height:clamp(105px,7.4vw,155px);border-radius:22px}.time-box,.countdown-box{padding-inline:clamp(14px,1.4vw,32px)}
.mosque-image{width:clamp(56px,6.2vw,94px);height:clamp(56px,6.2vw,94px)}
.box-label,.countdown-box span{font-size:clamp(16px,1.25vw,23px);margin-bottom:5px}.next-prayer-line{font-size:clamp(14px,1.05vw,22px)}
.current-time{font-size:clamp(46px,5.6vw,108px);line-height:.95}.countdown-box strong{font-size:clamp(30px,3.25vw,66px)}
.iqama-progress{height:clamp(6px,.45vw,10px);margin-top:clamp(6px,.7vw,12px)}
.content{width:min(1600px,100%);gap:clamp(14px,1.9vh,30px)}
.prayer-grid{gap:clamp(12px,1.35vw,24px)}
.prayer-card{min-height:clamp(155px,10.5vw,245px);border-radius:clamp(22px,1.6vw,32px);padding:clamp(16px,1.75vw,30px) clamp(10px,1vw,20px)}
.prayer-card h2{font-size:clamp(30px,2.85vw,62px);margin-bottom:clamp(5px,.6vw,12px);line-height:1.05}.prayer-card time{font-size:clamp(44px,4.1vw,86px);line-height:1}.prayer-card p{font-size:clamp(20px,1.75vw,34px);margin-top:clamp(8px,.8vw,16px)}
.prayer-card.active{transform:scale(1.025)}
.last-third-card{min-width:min(440px,100%);padding:clamp(10px,.85vw,18px) clamp(20px,1.6vw,34px)}.last-third-card span{font-size:clamp(15px,1.05vw,23px)}.last-third-card time{font-size:clamp(22px,2vw,42px)}
.export-panel{padding:9px 14px}.footer{font-size:clamp(16px,1.2vw,26px)}
.weather-pill{padding:8px 14px}.weather-pill span{font-size:clamp(22px,2.5vw,36px)}.weather-pill small{font-size:15px}
@media (min-width:2500px){
  .app-shell{padding:clamp(28px,1.6vw,62px)}
  .top-header,.content,.export-panel{width:min(2300px,92vw)}
  .prayer-card{min-height:300px}.prayer-card h2{font-size:78px}.prayer-card time{font-size:108px}.prayer-card p{font-size:42px}
  .date-line{font-size:74px}.date-line.gregorian{font-size:44px}.current-time{font-size:138px}.countdown-box strong{font-size:86px}
}
@media (orientation:portrait){
  .fullscreen-toggle{top:calc(max(14px,env(safe-area-inset-top)) + 46px);min-width:78px;padding:7px 10px;font-size:14px}
  .info-row{grid-template-columns:minmax(64px,96px) minmax(0,1fr) minmax(112px,.9fr);gap:clamp(8px,2.2vw,18px)}
  .current-time{font-size:clamp(28px,7.6vw,54px)}.countdown-box strong{font-size:clamp(20px,4.8vw,36px)}
  .prayer-card h2{font-size:clamp(26px,6vw,46px)}.prayer-card time{font-size:clamp(32px,7.2vw,54px)}.prayer-card p{font-size:clamp(20px,4.2vw,30px)}
}
@media (max-width:1100px) and (orientation:landscape){
  .app-shell{padding:8px 14px;gap:8px}.top-header{width:min(900px,100%);gap:7px}.date-line{font-size:30px}.date-line.gregorian{font-size:21px}
  .info-row{grid-template-columns:90px minmax(240px,330px) minmax(185px,260px);gap:20px}.mosque-box,.time-box,.countdown-box{min-height:88px;border-radius:18px}.mosque-image{width:58px;height:58px}
  .box-label,.countdown-box span{font-size:14px;margin-bottom:3px}.next-prayer-line{font-size:12px}.current-time{font-size:52px}.countdown-box strong{font-size:32px}.iqama-progress{height:5px;margin-top:5px}
  .content{width:min(980px,100%);gap:10px}.prayer-grid{gap:9px}.prayer-card{min-height:132px;border-radius:18px;padding:12px 6px}.prayer-card h2{font-size:26px}.prayer-card time{font-size:40px}.prayer-card p{font-size:20px;margin-top:6px}
  .last-third-card{padding:8px 18px}.last-third-card span{font-size:14px}.last-third-card time{font-size:26px}.footer{font-size:14px}.export-panel{font-size:13px;padding:7px 12px}.weather-pill span{font-size:22px}.weather-pill small{font-size:12px}
}

/* v2.3.2 open header layout: no surrounding boxes for dates, clock, remaining time, or mosque */
.top-header{
  width:min(1920px,100%);
  padding-inline:clamp(18px,3vw,58px);
}
.date-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  border-radius:0!important;
  padding:clamp(4px,.8vw,12px)!important;
}
.info-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(110px,220px) minmax(20px,1fr) minmax(360px,620px) minmax(20px,1fr) minmax(280px,500px);
  gap:clamp(18px,3.4vw,74px);
  align-items:center;
  direction:ltr;
}
.info-box,
.mosque-box,
.time-box,
.countdown-box{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
  min-height:0!important;
  overflow:visible!important;
}
.mosque-box{grid-column:1;justify-self:start;align-self:center;direction:rtl}
.time-box{grid-column:3;justify-self:center;align-self:center;direction:rtl;width:min(100%,620px)}
.countdown-box{grid-column:5;justify-self:end;align-self:center;direction:rtl;width:min(100%,500px);display:grid;justify-items:center;text-align:center}
#timeBoxLabel{display:none!important}
.current-time{
  font-size:clamp(52px,7.1vw,136px)!important;
  line-height:.92!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-align:center;
}
.countdown-box strong{
  font-size:clamp(36px,4.35vw,86px)!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.next-prayer-line{margin-top:0!important;margin-bottom:clamp(4px,.5vw,8px)}
.iqama-progress{width:min(90%,390px)}
.mosque-image{width:clamp(66px,7vw,128px)!important;height:clamp(66px,7vw,128px)!important}

@media (orientation:portrait){
  .top-header{padding-inline:clamp(12px,3vw,24px)}
  .info-row{grid-template-columns:1fr;gap:clamp(8px,2.4vw,18px);justify-items:center}
  .mosque-box,.time-box,.countdown-box{grid-column:1;justify-self:center;width:auto}
  .mosque-box{order:1}.time-box{order:2}.countdown-box{order:3}
  .current-time{font-size:clamp(42px,13vw,78px)!important}
  .countdown-box strong{font-size:clamp(30px,9vw,54px)!important}
  .mosque-image{width:clamp(54px,16vw,86px)!important;height:clamp(54px,16vw,86px)!important}
}
@media (max-width:1100px) and (orientation:landscape){
  .top-header{width:100%;padding-inline:18px}
  .info-row{grid-template-columns:minmax(80px,115px) minmax(12px,1fr) minmax(260px,390px) minmax(12px,1fr) minmax(210px,320px);gap:clamp(12px,2vw,28px)}
  .current-time{font-size:clamp(50px,7vw,82px)!important}
  .countdown-box strong{font-size:clamp(34px,4.5vw,52px)!important}
  .mosque-image{width:clamp(52px,6vw,76px)!important;height:clamp(52px,6vw,76px)!important}
}


/* v2.3.6: fullscreen by mosque image and picture-style current clock */
.fullscreen-toggle{display:none!important}
.mosque-image{cursor:pointer;transition:transform .25s ease,filter .25s ease}
.mosque-image:hover{transform:scale(1.06);filter:drop-shadow(0 0 16px rgba(242,217,155,.45)) drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.current-time{
  display:inline-grid!important;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  column-gap:clamp(12px,2vw,38px);
  direction:ltr!important;
  text-align:left!important;
  line-height:.82!important;
  overflow:visible!important;
  font-family:Monofonto,STC,Tahoma,"Segoe UI",Arial,sans-serif!important;
  text-shadow:0 10px 24px rgba(0,0,0,.44);
}
.clock-main{
  display:block;
  color:#fff;
  font-size:clamp(86px,13vw,260px);
  line-height:.82;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.clock-side{
  display:grid;
  grid-template-rows:auto auto;
  justify-items:end;
  align-content:center;
  row-gap:clamp(18px,2vw,46px);
  min-width:clamp(75px,7vw,150px);
}
.clock-seconds{
  color:#fff;
  font-size:clamp(38px,5vw,108px);
  line-height:.8;
  letter-spacing:-.02em;
}
.clock-period{
  color:rgba(214,196,166,.94);
  font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif;
  font-size:clamp(26px,3.3vw,78px);
  font-weight:900;
  line-height:.9;
  white-space:nowrap;
}
html[dir=rtl] .current-time{direction:ltr!important}
html[dir=rtl] .clock-side{justify-items:end}
@media (max-width:1100px) and (orientation:landscape){
  .clock-main{font-size:clamp(62px,12vw,138px)}
  .clock-seconds{font-size:clamp(28px,4.6vw,58px)}
  .clock-period{font-size:clamp(20px,3.1vw,42px)}
  .current-time{column-gap:clamp(8px,1.6vw,20px)}
}
@media (orientation:portrait){
  .current-time{column-gap:clamp(8px,2vw,18px)}
  .clock-main{font-size:clamp(54px,17vw,118px)}
  .clock-seconds{font-size:clamp(24px,7vw,50px)}
  .clock-period{font-size:clamp(17px,5vw,34px)}
  .clock-side{row-gap:clamp(8px,3vw,18px);min-width:clamp(42px,13vw,76px)}
}

.header{margin-bottom:48px !important;}
#gregorianDate{direction:ltr;unicode-bidi:embed;}


/* v2.3.9 mobile portrait rendering fixes */
@media (max-width:720px) and (orientation:portrait){
  html,body{min-height:100%;overflow-x:hidden;}
  body{overflow-y:auto;}
  .app-shell{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    gap:clamp(6px,1.1vh,10px)!important;
    padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px)!important;
  }
  .lang-toggle{
    position:absolute!important;
    top:calc(env(safe-area-inset-top) + 10px)!important;
    right:12px!important;
    left:auto!important;
    min-width:52px!important;
    padding:6px 9px!important;
    border-radius:12px!important;
    font-size:13px!important;
    line-height:1!important;
  }
  .weather-pill{
    position:absolute!important;
    top:calc(env(safe-area-inset-top) + 8px)!important;
    left:12px!important;
    right:auto!important;
    max-width:104px!important;
    padding:7px 9px!important;
    border-radius:14px!important;
    z-index:3!important;
  }
  .weather-pill span{font-size:22px!important;line-height:.95!important;}
  .weather-pill small{font-size:13px!important;line-height:1.05!important;}
  .top-header{
    width:100%!important;
    padding-inline:0!important;
    margin-top:72px!important;
    gap:clamp(8px,1.2vh,12px)!important;
  }
  .date-panel{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .date-line{
    display:block!important;
    font-size:clamp(22px,6.2vw,30px)!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:0!important;
    max-width:100%!important;
  }
  .date-line.gregorian{
    font-size:clamp(18px,5.1vw,24px)!important;
    line-height:1!important;
    color:#fff!important;
  }
  .info-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:clamp(7px,1.1vh,10px)!important;
    padding:0!important;
  }
  .mosque-box{display:none!important;}
  .time-box,.countdown-box{
    width:100%!important;
    max-width:520px!important;
    justify-self:center!important;
    text-align:center!important;
  }
  .current-time{
    display:inline-grid!important;
    column-gap:clamp(5px,1.5vw,9px)!important;
    line-height:.82!important;
  }
  .clock-main{font-size:clamp(58px,18vw,104px)!important;line-height:.8!important;}
  .clock-side{row-gap:clamp(5px,1.5vw,10px)!important;min-width:clamp(40px,11vw,62px)!important;}
  .clock-seconds{font-size:clamp(22px,7vw,38px)!important;line-height:.8!important;}
  .clock-period{font-size:clamp(14px,4.3vw,24px)!important;line-height:.9!important;}
  .countdown-box span,
  .next-prayer-line{font-size:clamp(15px,4vw,20px)!important;line-height:1.15!important;}
  .countdown-box strong{font-size:clamp(36px,10.5vw,58px)!important;line-height:.95!important;}
  .iqama-progress{width:min(70%,260px)!important;height:6px!important;margin-top:5px!important;}
  .content{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(7px,1vh,10px)!important;
    align-content:start!important;
    margin-top:6px!important;
  }
  .prayer-grid{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(7px,1vh,10px)!important;
  }
  .prayer-card{
    width:100%!important;
    min-height:clamp(82px,11.5vh,116px)!important;
    display:grid!important;
    grid-template-columns:minmax(48px,.65fr) minmax(110px,1fr) minmax(96px,.9fr)!important;
    align-items:center!important;
    column-gap:10px!important;
    padding:10px 16px!important;
    border-radius:18px!important;
    transform:none!important;
  }
  .prayer-card.active{transform:none!important;}
  .prayer-card h2{
    grid-column:3!important;
    text-align:right!important;
    margin:0!important;
    font-size:clamp(27px,7vw,38px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .prayer-card time{
    grid-column:2!important;
    text-align:center!important;
    font-size:clamp(34px,9vw,48px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .prayer-card p{
    grid-column:1!important;
    text-align:left!important;
    margin:0!important;
    font-size:clamp(18px,5vw,26px)!important;
    line-height:1!important;
  }
  html[dir=ltr] .prayer-card h2{grid-column:1!important;text-align:left!important;}
  html[dir=ltr] .prayer-card time{grid-column:2!important;}
  html[dir=ltr] .prayer-card p{grid-column:3!important;text-align:right!important;}
  .last-third-card{
    width:min(100%,420px)!important;
    min-width:0!important;
    padding:8px 14px!important;
    border-radius:16px!important;
  }
  .last-third-card span{font-size:clamp(14px,3.8vw,18px)!important;line-height:1.1!important;}
  .last-third-card time{font-size:clamp(22px,6vw,32px)!important;line-height:1!important;}
  .export-panel{width:100%!important;font-size:13px!important;padding:7px 10px!important;border-radius:12px!important;}
  .footer{font-size:clamp(13px,3.7vw,16px)!important;line-height:1.05!important;padding-bottom:0!important;margin-top:2px!important;}
}

@media (max-width:720px) and (orientation:portrait) and (max-height:760px){
  .top-header{margin-top:58px!important;}
  .date-line{font-size:22px!important}.date-line.gregorian{font-size:18px!important;}
  .clock-main{font-size:58px!important}.clock-seconds{font-size:22px!important}.clock-period{font-size:14px!important;}
  .countdown-box strong{font-size:34px!important}.next-prayer-line,.countdown-box span{font-size:14px!important;}
  .prayer-card{min-height:76px!important;padding-block:8px!important;}
  .prayer-card h2{font-size:26px!important}.prayer-card time{font-size:32px!important}.prayer-card p{font-size:18px!important;}
}


@media (max-width: 768px){
  .prayer-grid{display:flex;flex-direction:column;}
  html[dir="rtl"] .prayer-card{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    text-align:center;
    direction:rtl;
    padding:20px 24px;
  }
  html[dir="rtl"] .prayer-card .prayer-name{grid-column:1;justify-self:end;}
  html[dir="rtl"] .prayer-card .prayer-time{grid-column:2;justify-self:center;}
  html[dir="rtl"] .prayer-card .iqama-time{grid-column:3;justify-self:start;}
  html[dir="ltr"] .prayer-card{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    text-align:center;
    padding:20px 24px;
  }
  html[dir="ltr"] .prayer-card .prayer-name{grid-column:1;justify-self:start;}
  html[dir="ltr"] .prayer-card .prayer-time{grid-column:2;justify-self:center;}
  html[dir="ltr"] .prayer-card .iqama-time{grid-column:3;justify-self:end;}
}


/* v2.4.1 responsive prayer-card grid by screen width
   - Portrait phones: 1 card/row
   - Portrait tablets: 2 cards/row
   - Landscape tablets: 3 cards/row
   - Desktops/TVs: 6 cards/row
*/
.prayer-grid{
  display:grid !important;
  width:100% !important;
}
html[dir="rtl"] .prayer-grid{direction:rtl;}
html[dir="ltr"] .prayer-grid{direction:ltr;}

/* TVs / desktops */
@media (min-width:1200px){
  .prayer-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

/* Landscape tablets and smaller landscape devices */
@media (max-width:1199px) and (orientation:landscape){
  .prayer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(10px,1.6vw,18px) !important;
  }
  .prayer-card{
    min-height:clamp(118px,20vh,190px) !important;
    padding:clamp(12px,1.8vw,22px) clamp(10px,1.4vw,18px) !important;
  }
  .prayer-card h2{
    font-size:clamp(25px,3.2vw,38px) !important;
  }
  .prayer-card time{
    font-size:clamp(36px,5vw,58px) !important;
  }
  .prayer-card p{
    font-size:clamp(18px,2.6vw,26px) !important;
  }
}

/* Portrait tablets */
@media (min-width:721px) and (max-width:1199px) and (orientation:portrait){
  .prayer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:clamp(12px,2vw,22px) !important;
  }
  .prayer-card{
    display:block !important;
    min-height:clamp(150px,18vh,235px) !important;
    padding:clamp(18px,2.8vw,30px) clamp(14px,2vw,24px) !important;
    text-align:center !important;
  }
  .prayer-card h2{
    margin:0 0 clamp(6px,1vw,12px) !important;
    text-align:center !important;
    font-size:clamp(32px,5vw,56px) !important;
  }
  .prayer-card time{
    display:block !important;
    text-align:center !important;
    font-size:clamp(44px,6.6vw,74px) !important;
  }
  .prayer-card p{
    margin:clamp(8px,1.3vw,14px) 0 0 !important;
    text-align:center !important;
    font-size:clamp(22px,3.2vw,34px) !important;
  }
}

/* Portrait phones: one row per prayer, RTL/LTR aligned */
@media (max-width:720px) and (orientation:portrait){
  .prayer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:clamp(7px,1vh,10px) !important;
  }
  .prayer-card{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(50px,.65fr) minmax(110px,1fr) minmax(96px,.9fr) !important;
    align-items:center !important;
    column-gap:10px !important;
    text-align:center !important;
    direction:rtl !important;
  }
  html[dir="rtl"] .prayer-card h2{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
    margin:0 !important;
  }
  html[dir="rtl"] .prayer-card time{
    grid-column:2 !important;
    justify-self:center !important;
    text-align:center !important;
  }
  html[dir="rtl"] .prayer-card p{
    grid-column:1 !important;
    justify-self:start !important;
    text-align:left !important;
    margin:0 !important;
  }
  html[dir="ltr"] .prayer-card{
    direction:ltr !important;
  }
  html[dir="ltr"] .prayer-card h2{
    grid-column:1 !important;
    justify-self:start !important;
    text-align:left !important;
    margin:0 !important;
  }
  html[dir="ltr"] .prayer-card time{
    grid-column:2 !important;
    justify-self:center !important;
    text-align:center !important;
  }
  html[dir="ltr"] .prayer-card p{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
    margin:0 !important;
  }
}

/* v2.4.2 Arabic mobile prayer-card alignment fix
   Keeps Arabic card content in one straight physical row:
   [iqama minutes] [prayer time] [prayer name]
   and prevents CSS direction from reversing the grid columns. */
@media (max-width:720px) and (orientation:portrait){
  .prayer-card{
    direction:ltr !important;
    grid-template-columns:minmax(54px,.55fr) minmax(120px,1fr) minmax(120px,.95fr) !important;
    align-items:center !important;
    justify-items:stretch !important;
    column-gap:8px !important;
  }
  html[dir="rtl"] .prayer-card h2,
  html[dir="rtl"] .prayer-card time,
  html[dir="rtl"] .prayer-card p,
  html[dir="ltr"] .prayer-card h2,
  html[dir="ltr"] .prayer-card time,
  html[dir="ltr"] .prayer-card p{
    align-self:center !important;
    margin-block:0 !important;
    line-height:1 !important;
  }
  html[dir="rtl"] .prayer-card h2{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
    direction:rtl !important;
    padding-inline-end:2px !important;
  }
  html[dir="rtl"] .prayer-card time{
    grid-column:2 !important;
    justify-self:center !important;
    text-align:center !important;
    direction:ltr !important;
  }
  html[dir="rtl"] .prayer-card p{
    grid-column:1 !important;
    justify-self:start !important;
    text-align:left !important;
    direction:ltr !important;
    padding-inline-start:2px !important;
  }
  html[dir="ltr"] .prayer-card{
    direction:ltr !important;
  }
  html[dir="ltr"] .prayer-card h2{
    grid-column:1 !important;
    justify-self:start !important;
    text-align:left !important;
    direction:ltr !important;
  }
  html[dir="ltr"] .prayer-card time{
    grid-column:2 !important;
    justify-self:center !important;
    text-align:center !important;
    direction:ltr !important;
  }
  html[dir="ltr"] .prayer-card p{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
    direction:ltr !important;
  }
}

/* v2.4.3 Arabic mobile vertical alignment correction
   Forces prayer name, prayer time, and iqama minutes to share one visual center line. */
@media (max-width:720px) and (orientation:portrait){
  html[dir="rtl"] .prayer-card{
    direction:ltr !important;
    display:grid !important;
    grid-template-columns:minmax(54px,.56fr) minmax(118px,1fr) minmax(118px,.96fr) !important;
    align-items:center !important;
    justify-items:stretch !important;
    column-gap:8px !important;
    line-height:1 !important;
  }

  html[dir="rtl"] .prayer-card h2,
  html[dir="rtl"] .prayer-card time,
  html[dir="rtl"] .prayer-card p{
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    align-self:center !important;
    position:relative !important;
  }

  html[dir="rtl"] .prayer-card h2{
    grid-column:3 !important;
    justify-content:flex-end !important;
    justify-self:stretch !important;
    text-align:right !important;
    direction:rtl !important;
    top:.075em !important;
  }

  html[dir="rtl"] .prayer-card time{
    grid-column:2 !important;
    justify-content:center !important;
    justify-self:stretch !important;
    text-align:center !important;
    direction:ltr !important;
    top:.03em !important;
  }

  html[dir="rtl"] .prayer-card p{
    grid-column:1 !important;
    justify-content:flex-start !important;
    justify-self:stretch !important;
    text-align:left !important;
    direction:ltr !important;
    top:0 !important;
  }

  html[dir="rtl"] .prayer-card p strong{
    display:flex !important;
    align-items:center !important;
    line-height:1 !important;
  }
}

/* v2.4.5 Arabic mobile Flexbox fixed-row alignment
   Font-metric independent alignment for iPhone/Android portrait mode.
   Replaces the older Grid offsets for prayer name, prayer time, and iqama. */
@media (max-width:720px) and (orientation:portrait){
  html[dir="rtl"] .prayer-card{
    direction:rtl !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-height:74px !important;
    height:74px !important;
    padding:8px 14px !important;
    line-height:1 !important;
    text-align:initial !important;
  }

  html[dir="rtl"] .prayer-card h2,
  html[dir="rtl"] .prayer-card time,
  html[dir="rtl"] .prayer-card p{
    position:static !important;
    top:auto !important;
    transform:none !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:44px !important;
    display:block !important;
    align-self:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  /* Visual order in Arabic portrait:
     right = prayer name, center = prayer time, left = iqama minutes */
  html[dir="rtl"] .prayer-card h2{
    order:1 !important;
    flex:1 1 34% !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[dir="rtl"] .prayer-card time{
    order:2 !important;
    flex:0 0 34% !important;
    text-align:center !important;
    direction:ltr !important;
  }

  html[dir="rtl"] .prayer-card p{
    order:3 !important;
    flex:1 1 24% !important;
    text-align:left !important;
    direction:ltr !important;
  }

  html[dir="rtl"] .prayer-card p strong{
    display:inline-block !important;
    line-height:44px !important;
    vertical-align:top !important;
  }
}


/* v2.4.7 mobile header swap: weather on left, language button on right */
@media (max-width:720px){
  .weather-pill{left:12px!important;right:auto!important;}
  .lang-toggle{right:12px!important;left:auto!important;}
}

/* v2.5.4 compact top-right menu for language and fullscreen */
.app-menu{
  position:absolute;
  top:max(14px,env(safe-area-inset-top));
  right:clamp(12px,2vw,30px);
  z-index:20;
  display:grid;
  justify-items:end;
  gap:8px;
}
.menu-toggle{
  min-width:46px;
  min-height:42px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(0,0,0,.58);
  color:var(--gold-soft);
  font-size:24px;
  line-height:1;
  font-weight:900;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.menu-toggle:hover{background:rgba(80,55,24,.75)}
.menu-panel{
  min-width:150px;
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(4,7,7,.88);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.menu-panel[hidden]{display:none!important}
.menu-action,
.app-menu .lang-toggle,
.app-menu .fullscreen-toggle{
  position:static!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:9px 12px!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:rgba(215,174,98,.16)!important;
  color:var(--gold-soft)!important;
  font-family:STC,Tahoma,"Segoe UI",Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:900!important;
  text-align:center!important;
  box-shadow:none!important;
}
.app-menu .fullscreen-toggle:hover,
.app-menu .lang-toggle:hover{background:rgba(80,55,24,.75)!important}
/* Keep the weather on the left and the menu on the right on mobile and desktop. */
@media (max-width:720px){
  .app-menu{right:12px!important;left:auto!important;top:max(8px,env(safe-area-inset-top))!important}
  .weather-pill{left:12px!important;right:auto!important;top:max(8px,env(safe-area-inset-top))!important}
  .menu-toggle{min-width:44px;min-height:40px;font-size:22px;padding:5px 11px}
  .menu-panel{min-width:132px;padding:8px;gap:7px}
  .menu-action,.app-menu .lang-toggle,.app-menu .fullscreen-toggle{font-size:14px!important;padding:8px 10px!important}
}

/* v2.5.5 mosque logo background: hbg1.png sits behind logo.png.
   Both logo.png and hbg1.png are in the website root folder. */
.mosque-box{
  background-image:url("hbg1.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}
#mosqueImage.mosque-image{
  position:relative !important;
  z-index:1 !important;
}