/* RIC 040 — Salah atmosphere, banner studio, language controls */

/* Islamic date */
.ric-salah-location-copy{display:grid;gap:.05rem}
.ric-salah-location-copy #ricIslamicDate{
  color:#7a6650;
  font-size:.68rem;
  margin-top:.08rem;
  white-space:nowrap;
}

/* Prayer cells become interactive */
.ric-salah-times span{
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .28s ease,
    box-shadow .28s ease;
}
.ric-salah-times span:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 50% 100%,rgba(255,255,255,.55),transparent 68%);
  opacity:0;
  transition:opacity .28s ease;
}
.ric-salah-times span:hover{
  transform:translateY(-3px) scale(1.025);
  box-shadow:0 10px 24px rgba(36,78,65,.14);
}
.ric-salah-times span:hover:after{opacity:1}
.ric-salah-times span:hover small,
.ric-salah-times span:hover strong{
  animation:ricPrayerTextZoom .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ricPrayerTextZoom{
  0%{transform:scale(1);filter:blur(0);opacity:1}
  45%{transform:scale(.72);filter:blur(.4px);opacity:.55}
  100%{transform:scale(1);filter:blur(0);opacity:1}
}

/* Full-page temporary Salah atmospheres.
   These appear only while a prayer tile is hovered/focused. */
body.ric-prayer-atmosphere:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:1;
  transition:opacity .35s ease;
  animation:ricSkyBreathe 7s ease-in-out infinite alternate;
}
body.ric-prayer-atmosphere main,
body.ric-prayer-atmosphere header,
body.ric-prayer-atmosphere .language-dropdown-shell,
body.ric-prayer-atmosphere .ric-salah-strip,
body.ric-prayer-atmosphere footer{
  position:relative;
  z-index:3;
}
body.prayer-fajr:after{
  background:
    radial-gradient(circle at 76% 10%,rgba(255,221,187,.78),transparent 24%),
    radial-gradient(circle at 28% 6%,rgba(213,208,255,.65),transparent 26%),
    linear-gradient(180deg,rgba(182,202,233,.83),rgba(226,194,190,.64) 42%,rgba(128,170,160,.34));
}
body.prayer-dhuhr:after{
  background:
    radial-gradient(circle at 72% 4%,rgba(255,250,196,.92),transparent 20%),
    linear-gradient(180deg,rgba(177,224,232,.80),rgba(215,238,224,.54) 62%,rgba(87,158,137,.30));
}
body.prayer-asr:after{
  background:
    radial-gradient(circle at 78% 18%,rgba(255,216,139,.85),transparent 24%),
    linear-gradient(180deg,rgba(224,205,152,.58),rgba(180,202,174,.53) 55%,rgba(82,145,125,.34));
}
body.prayer-maghrib:after{
  background:
    radial-gradient(circle at 70% 14%,rgba(255,172,91,.90),transparent 24%),
    radial-gradient(circle at 18% 14%,rgba(153,111,173,.50),transparent 31%),
    linear-gradient(180deg,rgba(231,139,111,.66),rgba(95,119,144,.52) 62%,rgba(40,91,79,.38));
}
body.prayer-isha:after{
  background:
    radial-gradient(circle at 77% 10%,rgba(238,226,169,.25),transparent 13%),
    radial-gradient(circle at 20% 15%,rgba(157,188,226,.18),transparent 26%),
    linear-gradient(180deg,rgba(36,73,104,.78),rgba(31,81,78,.66) 62%,rgba(17,58,50,.55));
}
body.prayer-isha:before{
  content:"✦   ·   ✧   ·   ✦   ·   ✧   ·   ✦";
  position:fixed;
  top:18%;
  left:7%;
  right:7%;
  z-index:2;
  pointer-events:none;
  color:rgba(255,244,201,.52);
  font-size:1.1rem;
  letter-spacing:2.5rem;
  animation:ricStarsDrift 9s ease-in-out infinite alternate;
}
@keyframes ricSkyBreathe{from{filter:saturate(.9) brightness(1)}to{filter:saturate(1.08) brightness(1.04)}}
@keyframes ricStarsDrift{from{transform:translateY(0);opacity:.35}to{transform:translateY(12px);opacity:.7}}

/* Home banner auto-art when image is not supplied */
.homepage-banner-shell .banner.banner-auto-art{
  --auto-green-1:#0e5847;
  --auto-green-2:#083d33;
  --auto-gold:#d6b45f;
  background-image:
    radial-gradient(circle at 78% 20%,rgba(223,192,111,.20),transparent 24%),
    linear-gradient(130deg,var(--auto-green-1),var(--auto-green-2)) !important;
}
.homepage-banner-shell .banner.banner-auto-art:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background:
    repeating-conic-gradient(from 15deg at 86% 50%,rgba(229,202,129,.38) 0 7deg,transparent 7deg 22deg),
    radial-gradient(circle at 86% 50%,transparent 0 12%,rgba(229,202,129,.26) 12.5% 13.2%,transparent 13.5% 20%,rgba(229,202,129,.18) 20.5% 21%,transparent 21.3%);
}
.homepage-banner-shell .banner.banner-auto-art:after{
  content:"☾";
  position:absolute;
  right:8%;
  top:17%;
  width:145px;
  height:145px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:rgba(244,216,138,.50);
  border:1px solid rgba(244,216,138,.22);
  font-size:5rem;
  text-shadow:0 12px 30px rgba(0,0,0,.18);
}
.homepage-banner-shell .banner.banner-auto-art.art-2{
  --auto-green-1:#176a53;--auto-green-2:#0b3f35;
}
.homepage-banner-shell .banner.banner-auto-art.art-2:before{
  background:
    linear-gradient(45deg,transparent 44%,rgba(225,194,112,.18) 45% 47%,transparent 48% 52%,rgba(225,194,112,.16) 53% 55%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,rgba(225,194,112,.14) 45% 47%,transparent 48% 52%,rgba(225,194,112,.12) 53% 55%,transparent 56%);
  background-size:72px 72px;
}
.homepage-banner-shell .banner.banner-auto-art.art-2:after{content:"✦";font-size:4rem}
.homepage-banner-shell .banner.banner-auto-art.art-3{
  --auto-green-1:#0f6250;--auto-green-2:#103d35;
}
.homepage-banner-shell .banner.banner-auto-art.art-3:before{
  right:-4%;left:auto;width:48%;
  background:
    radial-gradient(ellipse at 50% 100%,transparent 0 25%,rgba(227,197,119,.28) 25.5% 27%,transparent 27.5%),
    radial-gradient(ellipse at 50% 100%,transparent 0 44%,rgba(227,197,119,.16) 44.5% 46%,transparent 46.5%);
}
.homepage-banner-shell .banner.banner-auto-art.art-3:after{content:"◈";font-size:4.5rem}
.homepage-banner-shell .banner.banner-auto-art.art-4{
  --auto-green-1:#1d705a;--auto-green-2:#0a4136;
}
.homepage-banner-shell .banner.banner-auto-art.art-4:before{
  background:
    repeating-radial-gradient(circle at 88% 50%,transparent 0 16px,rgba(228,197,115,.13) 17px 18px,transparent 19px 34px);
}
.homepage-banner-shell .banner.banner-auto-art .banner-content{
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}
.homepage-banner-shell .banner.banner-auto-art h1,
.homepage-banner-shell .banner.banner-auto-art p{color:#fff9e9 !important}

/* Admin banner preview */
.banner-admin-columns{align-items:start}
.banner-preview-panel{position:sticky;top:145px}
.admin-banner-preview{
  min-height:310px;
  border-radius:22px;
  padding:1.3rem;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 18%,rgba(230,198,116,.24),transparent 24%),
    linear-gradient(135deg,#17624f,#0a4035);
  color:#fff9e8;
  box-shadow:0 22px 48px rgba(32,75,61,.20);
}
.admin-banner-preview:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.3;
  background:
    repeating-conic-gradient(from 0deg at 82% 45%,rgba(225,194,112,.35) 0 7deg,transparent 7deg 22deg);
}
.admin-banner-preview>div:last-child{position:relative;z-index:2}
.admin-banner-preview small{color:#e7c974;font-weight:900;letter-spacing:.12em}
.admin-banner-preview strong{display:block;font-size:2rem;line-height:1.05;margin:.35rem 0}
.admin-banner-preview p{margin:0;color:rgba(255,255,255,.82)}
.admin-banner-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Language admin */
.admin-language-manager{
  margin:1rem 0;
  padding:1.1rem;
  border:1px solid #dbe7e0;
  border-radius:18px;
  background:#f8fbf9;
}
.admin-language-heading p{color:#63776f;margin:.25rem 0 1rem}
.admin-language-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}
.admin-language-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between;
  gap:.7rem !important;
  padding:.75rem;
  border-radius:13px;
  border:1px solid #dde8e2;
  background:#fff;
}
.admin-language-card.enabled{border-color:#c9ddcf;background:#f7fcf8}
.language-switch-copy{display:flex;gap:.6rem;align-items:center}
.language-switch-copy>strong{
  width:34px;height:30px;display:grid;place-items:center;
  border-radius:9px;background:#eaf2ed;color:#17604d;font-size:.7rem;
}
.language-switch-copy>span{display:grid;font-weight:800;color:#294d42}
.language-switch-copy small{font-size:.68rem;color:#71827c;font-weight:500}
.admin-toggle{position:relative;width:43px;height:24px;flex:0 0 auto}
.admin-toggle input{position:absolute;opacity:0;pointer-events:none}
.admin-toggle i{
  position:absolute;inset:0;border-radius:999px;background:#ccd9d2;transition:.2s ease;
}
.admin-toggle i:after{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:.2s ease;
}
.admin-toggle input:checked+i{background:#218164}
.admin-toggle input:checked+i:after{transform:translateX(19px)}
.admin-toggle input:disabled+i{background:#c9a34c}

@media(max-width:1000px){
  .admin-language-grid{grid-template-columns:repeat(2,1fr)}
  .banner-preview-panel{position:relative;top:auto}
}
@media(max-width:650px){
  .admin-language-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ric-salah-times span:hover small,
  .ric-salah-times span:hover strong,
  body.ric-prayer-atmosphere:after,
  body.prayer-isha:before{animation:none}
}