/*
=============================================================
 RIC HOMEPAGE 2026 — STAGE J
 Reference visual consolidation
=============================================================
*/

/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */

body.ric-j-ready{
  --ric-j-green:#004c3a;
  --ric-j-green-2:#006049;
  --ric-j-green-3:#08745a;
  --ric-j-gold:#efb846;
  --ric-j-cream:#faf8f0;
  --ric-j-ink:#063c30;
}

body.ric-j-ready main{
  overflow:hidden;
}

.ric-j-hide-reference{
  display:none !important;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.ric-j-hero{
  position:relative;
  isolation:isolate;
}

.ric-j-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(0,49,39,.88) 0%,
      rgba(0,49,39,.58) 43%,
      rgba(0,49,39,.17) 72%,
      rgba(0,49,39,.08) 100%
    );
}

.ric-j-hero > *{
  position:relative;
  z-index:2;
}

.ric-j-original-hero-copy{
  display:none !important;
}

.ric-j-hero-static{
  position:absolute;

  left:
    clamp(28px,4.5vw,78px);

  top:50%;

  transform:translateY(-50%);

  z-index:4;

  width:
    min(650px,48vw);

  color:#fff;
}

.ric-j-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-bottom:14px;

  padding:6px 11px;

  border-radius:999px;

  border:
    1px solid rgba(255,255,255,.32);

  background:
    rgba(0,70,54,.48);

  color:#fff;

  font-size:11px;
  font-weight:850;
}

.ric-j-hero-kicker::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:#eeb749;

  box-shadow:
    0 0 0 4px rgba(238,183,73,.14);
}

.ric-j-hero-static h1{
  max-width:680px;

  margin:0;

  color:#fff;

  font-size:
    clamp(2.7rem,4.6vw,5rem);

  line-height:.96;

  letter-spacing:-.035em;
}

.ric-j-hero-lead{
  max-width:630px;

  margin:
    17px 0 0;

  color:#f6d75f;

  font-size:
    clamp(1.05rem,1.55vw,1.42rem);

  font-weight:800;

  line-height:1.3;
}

.ric-j-hero-copy{
  max-width:610px;

  margin:
    11px 0 0;

  color:
    rgba(255,255,255,.92);

  font-size:
    clamp(.92rem,1.05vw,1.08rem);

  line-height:1.52;
}

.ric-j-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:20px;
}

.ric-j-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-height:44px;

  padding:
    10px 16px;

  border-radius:8px;

  text-decoration:none !important;

  font-size:12px;
  font-weight:850;
}

.ric-j-button.primary{
  background:#04694f;
  color:#fff;

  border:
    1px solid rgba(255,255,255,.65);
}

.ric-j-button.secondary{
  background:#fff;
  color:#064735;
}

.ric-j-button.gold{
  background:var(--ric-j-gold);
  color:#153d31;
}


/* ---------------------------------------------------------
   SIX VALUES
--------------------------------------------------------- */

.ric-j-values{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1500px
  );

  margin:
    clamp(12px,2vw,24px)
    auto
    clamp(16px,2.2vw,28px);

  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap:
    clamp(8px,1.1vw,16px);
}

.ric-j-value{
  min-width:0;

  text-align:center;

  padding:
    5px 6px 11px;
}

.ric-j-value-icon{
  width:
    clamp(58px,5.5vw,82px);

  aspect-ratio:1;

  display:grid;
  place-items:center;

  margin:
    0 auto 8px;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #05624a,
      #003e31
    );

  box-shadow:
    0 7px 18px rgba(0,65,49,.16);
}

.ric-j-value:nth-child(even)
.ric-j-value-icon{
  background:
    linear-gradient(
      145deg,
      #f2bd53,
      #df9825
    );
}

.ric-j-value-icon svg{
  width:48%;
  height:48%;

  stroke:#fff;

  fill:none;

  stroke-width:1.8;
}

.ric-j-value h3{
  margin:0;

  color:#104ba0;

  font-size:
    clamp(.92rem,1.2vw,1.17rem);
}

.ric-j-value p{
  margin:4px 0 0;

  color:#405f77;

  font-size:
    clamp(.72rem,.85vw,.87rem);

  line-height:1.25;
}


/* ---------------------------------------------------------
   PRAYER SYSTEM
--------------------------------------------------------- */

.ric-j-prayer-surface{
  position:relative;

  margin-top:
    clamp(8px,1vw,14px) !important;

  padding:
    clamp(14px,1.8vw,23px) !important;

  color:#fff !important;

  border-radius:0 !important;

  background:
    radial-gradient(
      circle at 65% 20%,
      rgba(34,138,101,.24),
      transparent 32%
    ),
    linear-gradient(
      115deg,
      #003e31,
      #00513e
    ) !important;
}

.ric-j-prayer-surface h1,
.ric-j-prayer-surface h2,
.ric-j-prayer-surface h3{
  color:#fff !important;
}

.ric-j-prayer-surface p,
.ric-j-prayer-surface small{
  color:
    rgba(255,255,255,.78) !important;
}

.ric-j-prayer-surface
[data-prayer]{
  border:
    1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.13) !important;
}

.ric-j-prayer-lower{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1550px
  );

  margin:
    0 auto
    clamp(16px,2vw,28px);

  display:grid;

  grid-template-columns:
    minmax(210px,.30fr)
    minmax(0,1.7fr);

  gap:10px;
}

.ric-j-prayer-lower
.ric-d-next-panel,
.ric-j-prayer-lower
.ric-e-quran{
  width:100%;
  margin:0;

  border-radius:14px;

  box-shadow:
    0 8px 24px rgba(0,62,47,.12);
}

.ric-j-prayer-lower
.ric-d-next-panel{
  min-width:0;

  background:
    linear-gradient(
      150deg,
      #00583f,
      #004232
    );
}

.ric-j-prayer-lower
.ric-e-quran{
  min-width:0;

  background:
    linear-gradient(
      110deg,
      #006247,
      #004836
    );
}


/* ---------------------------------------------------------
   KNOWLEDGE + GENERATIONS
--------------------------------------------------------- */

.ric-j-knowledge{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1500px
  );

  margin:
    clamp(18px,2.5vw,34px)
    auto;

  display:grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(320px,.9fr);

  gap:
    clamp(15px,2vw,26px);
}

.ric-j-knowledge-panel{
  min-width:0;
}

.ric-j-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;
}

.ric-j-section-head h2{
  margin:0;

  color:#134ca1;

  font-size:
    clamp(1.55rem,2.3vw,2.35rem);
}

.ric-j-section-head a{
  color:#134ca1;

  font-size:11px;
  font-weight:800;

  text-decoration:none;
}

.ric-j-resource-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:10px;
}

.ric-j-resource{
  overflow:hidden;

  border-radius:14px;

  background:#fff;

  border:
    1px solid #dde7e2;

  box-shadow:
    0 8px 20px rgba(0,60,46,.08);
}

.ric-j-resource-visual{
  height:
    clamp(95px,10vw,145px);

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(242,194,81,.24),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #174b3c,
      #08362d
    );

  color:#fff;
}

.ric-j-resource-visual svg{
  width:54px;
  height:54px;

  stroke:#f2c252;

  fill:none;

  stroke-width:1.5;
}

.ric-j-resource-body{
  padding:11px;
}

.ric-j-resource-body h3{
  margin:0;

  color:#124da1;

  font-size:1rem;
}

.ric-j-resource-body p{
  margin:5px 0 9px;

  color:#546a62;

  font-size:11px;
  line-height:1.4;
}

.ric-j-resource-body a{
  display:inline-flex;

  padding:7px 11px;

  border-radius:6px;

  background:#086448;
  color:#fff;

  text-decoration:none;

  font-size:10px;
  font-weight:800;
}

.ric-j-generation{
  padding:
    clamp(18px,2.4vw,27px);

  border-radius:16px;

  background:#fff;

  border:
    1px solid #dde7e2;

  box-shadow:
    0 8px 20px rgba(0,60,46,.08);
}

.ric-j-generation h2{
  margin:0;

  color:#134ca1;

  font-size:
    clamp(1.55rem,2.3vw,2.35rem);
}

.ric-j-generation > p{
  margin:
    8px 0 17px;

  color:#24589c;

  font-size:
    clamp(.88rem,1vw,1rem);

  line-height:1.45;
}

.ric-j-generation-stats{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:7px;
}

.ric-j-generation-stat{
  padding:10px 6px;

  text-align:center;

  border-radius:9px;

  background:#f6f8fb;

  border:
    1px solid #e2e8ee;
}

.ric-j-generation-stat strong{
  display:block;

  color:#114da2;

  font-size:
    clamp(1rem,1.5vw,1.45rem);
}

.ric-j-generation-stat span{
  display:block;

  margin-top:3px;

  color:#546b82;

  font-size:9px;
}

.ric-j-generation-link{
  display:flex;
  justify-content:center;

  margin-top:12px;
}

.ric-j-generation-link a{
  width:min(100%,340px);

  padding:9px 14px;

  text-align:center;

  border-radius:7px;

  border:
    1px solid #087158;

  color:#075340;

  text-decoration:none;

  font-size:11px;
  font-weight:850;
}


/* ---------------------------------------------------------
   SEASONAL EXPERIENCE
--------------------------------------------------------- */

body.ric-j-ready
.ric-f-season{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1500px
  );

  min-height:
    clamp(185px,18vw,265px);

  margin:
    clamp(16px,2.4vw,30px)
    auto;

  border-radius:0;

  display:flex;

  align-items:center;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(237,184,69,.18),
      transparent 27%
    ),
    linear-gradient(
      110deg,
      #003d30,
      #005641
    ) !important;
}

body.ric-j-ready
.ric-f-inner{
  width:100%;

  grid-template-columns:
    minmax(240px,.9fr)
    minmax(300px,1.25fr)
    auto !important;

  padding:
    clamp(22px,3vw,38px) !important;
}

body.ric-j-ready
.ric-f-title{
  font-size:
    clamp(1.8rem,3vw,3rem);
}

.ric-j-season-tools{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-top:13px;
}

.ric-j-season-tool{
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:6px 9px;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.12);

  color:#fff;

  font-size:9px;
  font-weight:750;
}


/* ---------------------------------------------------------
   EXPANSION
--------------------------------------------------------- */

body.ric-j-ready
.ric-g-expansion{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1500px
  );

  margin:
    clamp(16px,2.3vw,28px)
    auto;

  border-radius:0;

  box-shadow:none;

  border:
    0;

  border-top:
    1px solid #e0e9e4;

  border-bottom:
    1px solid #e0e9e4;
}

body.ric-j-ready
.ric-g-title{
  color:#124da1;
}

body.ric-j-ready
.ric-g-card{
  box-shadow:
    0 8px 20px rgba(0,60,46,.06);
}


/* ---------------------------------------------------------
   CONTRIBUTION
--------------------------------------------------------- */

.ric-j-contribute{
  width:min(
    calc(100% - clamp(24px,5vw,80px)),
    1500px
  );

  margin:
    clamp(16px,2.2vw,28px)
    auto;
}

.ric-j-contribute h2{
  margin:0;

  color:#124da1;

  font-size:
    clamp(1.45rem,2vw,2rem);
}

.ric-j-contribute-intro{
  margin:
    4px 0 13px;

  color:#456574;

  font-size:11px;
}

.ric-j-contribute-grid{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap:8px;
}

.ric-j-contribute-card{
  padding:
    10px 7px;

  text-align:center;

  border-radius:11px;

  background:#fff;

  border:
    1px solid #e0e7e4;
}

.ric-j-contribute-icon{
  width:42px;
  height:42px;

  margin:0 auto 6px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#fff6df;

  color:#dd8b17;

  font-size:20px;
}

.ric-j-contribute-card strong{
  display:block;

  color:#124da1;

  font-size:12px;
}

.ric-j-contribute-card span{
  display:block;

  margin-top:2px;

  color:#5d7180;

  font-size:9px;
  line-height:1.3;
}


/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.ric-j-final-cta{
  position:relative;
  overflow:hidden;

  margin-top:
    clamp(20px,3vw,40px);

  padding:
    clamp(28px,4vw,50px)
    clamp(24px,5vw,80px);

  text-align:center;

  color:#fff;

  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(13,121,85,.45),
      transparent 42%
    ),
    linear-gradient(
      110deg,
      #003d30,
      #00513e
    );
}

.ric-j-final-cta h2{
  margin:0;

  color:#fff;

  font-size:
    clamp(1.7rem,2.6vw,2.8rem);
}

.ric-j-final-cta p{
  max-width:720px;

  margin:
    7px auto 16px;

  color:
    rgba(255,255,255,.84);

  font-size:
    clamp(.9rem,1vw,1rem);
}

.ric-j-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:9px;
}

.ric-j-final-actions a{
  min-width:150px;

  padding:10px 15px;

  border-radius:7px;

  text-decoration:none;

  font-size:11px;
  font-weight:850;
}

.ric-j-final-actions
a:first-child{
  background:#eeb84a;
  color:#133c30;
}

.ric-j-final-actions
a:last-child{
  color:#fff;

  border:
    1px solid rgba(255,255,255,.55);
}


/* ---------------------------------------------------------
   FOOTER COMPACT
--------------------------------------------------------- */

body.ric-j-ready footer{
  margin-top:0 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media(max-width:1100px){

  .ric-j-values{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .ric-j-knowledge{
    grid-template-columns:1fr;
  }

  .ric-j-prayer-lower{
    grid-template-columns:1fr;
  }

  body.ric-j-ready
  .ric-f-inner{
    grid-template-columns:
      1fr 1fr !important;
  }

  body.ric-j-ready
  .ric-f-actions{
    grid-column:1 / -1;
  }

  .ric-j-contribute-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:720px){

  .ric-j-hero-static{
    left:22px;
    right:22px;

    width:auto;
  }

  .ric-j-hero-static h1{
    font-size:
      clamp(2.15rem,10vw,3.4rem);
  }

  .ric-j-hero-copy{
    display:none;
  }

  .ric-j-values{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ric-j-resource-grid{
    grid-template-columns:1fr;
  }

  .ric-j-generation-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body.ric-j-ready
  .ric-f-inner{
    grid-template-columns:
      1fr !important;
  }

  .ric-j-contribute-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:430px){

  .ric-j-values{
    grid-template-columns:1fr 1fr;
  }

  .ric-j-contribute-grid{
    grid-template-columns:1fr 1fr;
  }

}


/* RIC-STAGE-J1-REPAIR:START */

/* ---------------------------------------------------------
   REMOVE LEGACY DUPLICATE CONTENT
--------------------------------------------------------- */

.ric-j-old-copy-hidden,
.ric-j-legacy-banner-hidden{
  display:none !important;
}


/* ---------------------------------------------------------
   HERO CLEANUP
--------------------------------------------------------- */

.ric-j-hero{
  position:relative !important;
  overflow:hidden !important;

  min-height:
    clamp(455px,35vw,620px) !important;
}

.ric-j-hero-static{
  position:absolute !important;

  left:
    clamp(28px,4.5vw,78px) !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;

  width:min(46%,660px) !important;
  max-width:660px !important;

  z-index:30 !important;
}

.ric-j-hero-static h1{
  position:relative !important;

  margin:0 !important;

  max-width:650px !important;

  color:#fff !important;

  font-size:
    clamp(2.7rem,4.4vw,4.9rem) !important;

  line-height:.97 !important;

  letter-spacing:-.035em !important;

  text-shadow:
    0 2px 14px rgba(0,0,0,.22);
}

.ric-j-hero-static
.ric-j-hero-lead{
  color:#f3cf59 !important;
}

.ric-j-hero-static
.ric-j-hero-copy{
  color:
    rgba(255,255,255,.93) !important;
}


/* ---------------------------------------------------------
   QUR'AN VERSE CARD — RIGHT SIDE
--------------------------------------------------------- */

.ric-j-hero-verse-card{
  position:absolute !important;

  left:auto !important;

  right:
    clamp(24px,4vw,70px) !important;

  top:50% !important;

  transform:
    translateY(-46%) !important;

  width:
    min(42%,620px) !important;

  max-width:620px !important;

  z-index:26 !important;

  margin:0 !important;
}


/* ---------------------------------------------------------
   PRAYER SECTION VISUAL CONTINUITY
--------------------------------------------------------- */

.ric-j-prayer-repaired{
  position:relative;

  width:100% !important;

  padding:
    clamp(16px,2vw,24px) !important;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(35,144,104,.22),
      transparent 34%
    ),
    linear-gradient(
      115deg,
      #003d30,
      #005541
    ) !important;

  color:#fff !important;
}

.ric-j-prayer-repaired h1,
.ric-j-prayer-repaired h2,
.ric-j-prayer-repaired h3{
  color:#fff !important;
}

.ric-j-prayer-repaired p,
.ric-j-prayer-repaired small{
  color:
    rgba(255,255,255,.80) !important;
}


/* ---------------------------------------------------------
   MOBILE HERO
--------------------------------------------------------- */

@media(max-width:900px){

  .ric-j-hero-static{
    left:24px !important;
    right:24px !important;

    width:auto !important;
    max-width:none !important;
  }

  .ric-j-hero-verse-card{
    display:none !important;
  }

}


@media(max-width:620px){

  .ric-j-hero{
    min-height:500px !important;
  }

  .ric-j-hero-static h1{
    font-size:
      clamp(2.25rem,10vw,3.5rem) !important;
  }

}

/* RIC-STAGE-J1-REPAIR:END */



/* RIC-STAGE-J2:START */

/*
=============================================================
 STAGE J.2
 Controlled hero layer.
 Native prayer structure.
=============================================================
*/


/* ---------------------------------------------------------
   DISABLE THE EARLIER J HERO COPY
--------------------------------------------------------- */

.ric-j-hero-static{
  display:none !important;
}

.ric-j2-legacy-hide{
  display:none !important;
}


/* ---------------------------------------------------------
   CONTROLLED HERO
--------------------------------------------------------- */

.ric-j-hero{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  min-height:
    clamp(470px,36vw,640px) !important;
}

.ric-j-hero::after{
  content:"";

  position:absolute !important;
  inset:0 !important;

  z-index:8 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,44,35,.90) 0%,
      rgba(0,44,35,.72) 35%,
      rgba(0,44,35,.35) 57%,
      rgba(0,44,35,.08) 82%
    ) !important;
}

.ric-j2-hero-copy{
  position:absolute !important;

  left:
    clamp(30px,4.6vw,78px) !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;

  z-index:40 !important;

  width:
    min(48%,690px) !important;

  color:#fff !important;
}

.ric-j2-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;

  margin-bottom:13px;

  padding:6px 11px;

  border-radius:999px;

  color:#fff;

  background:
    rgba(0,82,62,.60);

  border:
    1px solid rgba(255,255,255,.32);

  font-size:11px;
  font-weight:850;
}

.ric-j2-kicker::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:#efbd4f;
}

.ric-j2-title{
  margin:0 !important;

  color:#fff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.75rem,4.55vw,5rem) !important;

  font-weight:800;

  letter-spacing:-.035em;

  line-height:.96 !important;

  text-shadow:
    0 3px 18px rgba(0,0,0,.24);
}

.ric-j2-lead{
  max-width:650px;

  margin:
    16px 0 0 !important;

  color:#f1cd56 !important;

  font-size:
    clamp(1.03rem,1.45vw,1.4rem);

  font-weight:850;

  line-height:1.3;
}

.ric-j2-description{
  max-width:620px;

  margin:
    10px 0 0 !important;

  color:
    rgba(255,255,255,.92) !important;

  font-size:
    clamp(.88rem,1vw,1.03rem);

  line-height:1.5;
}

.ric-j2-actions{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:18px;
}

.ric-j2-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:43px;

  padding:
    9px 15px;

  border-radius:7px;

  text-decoration:none !important;

  font-size:11px;
  font-weight:850;
}

.ric-j2-actions
a:nth-child(1){
  color:#fff;

  background:#00654c;

  border:
    1px solid rgba(255,255,255,.62);
}

.ric-j2-actions
a:nth-child(2){
  color:#064735;
  background:#fff;
}

.ric-j2-actions
a:nth-child(3){
  color:#173c30;
  background:#efbb4c;
}


/* ---------------------------------------------------------
   CONTROLLED QUR'AN VERSE CARD
--------------------------------------------------------- */

.ric-j2-verse{
  position:absolute !important;

  right:
    clamp(28px,4.6vw,78px) !important;

  top:50% !important;

  transform:
    translateY(-47%) !important;

  z-index:38 !important;

  width:
    min(40%,610px) !important;

  padding:
    clamp(20px,2.4vw,32px);

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(0,65,50,.96),
      rgba(0,48,39,.95)
    );

  border:
    1px solid rgba(229,190,89,.36);

  box-shadow:
    0 12px 35px rgba(0,0,0,.18);

  color:#fff;
}

.ric-j2-verse-ar{
  direction:rtl;

  margin:0;

  color:#efcb68;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(1.65rem,2.55vw,3rem);

  line-height:1.55;

  text-align:right;
}

.ric-j2-verse-en{
  margin:
    12px 0 0;

  color:
    rgba(255,255,255,.92);

  font-size:
    clamp(.82rem,.95vw,.98rem);

  line-height:1.5;
}

.ric-j2-verse-ref{
  display:block;

  margin-top:9px;

  color:#efbd4f;

  font-size:11px;
  font-weight:850;
}


/* ---------------------------------------------------------
   REMOVE EMPTY LEGACY STRIPS INSIDE HERO
--------------------------------------------------------- */

.ric-j2-empty-hero-strip{
  display:none !important;
}


/* ---------------------------------------------------------
   VALUES
--------------------------------------------------------- */

.ric-j-values{
  position:relative;

  z-index:5;

  background:#fff;

  margin-top:0 !important;

  padding-top:
    clamp(14px,1.8vw,23px);

  padding-bottom:
    clamp(14px,1.8vw,23px);
}


/* ---------------------------------------------------------
   PRAYER — DO NOT MOVE ORIGINAL COMPONENTS
--------------------------------------------------------- */

.ric-j-prayer-lower{
  display:contents !important;
}

.ric-j2-prayer-root{
  width:100% !important;

  margin-top:0 !important;

  padding:
    clamp(14px,1.8vw,23px) !important;

  color:#fff !important;

  background:
    radial-gradient(
      circle at 72% 8%,
      rgba(41,151,110,.22),
      transparent 33%
    ),
    linear-gradient(
      112deg,
      #003b2f,
      #005642
    ) !important;
}

.ric-j2-prayer-root h1,
.ric-j2-prayer-root h2,
.ric-j2-prayer-root h3{
  color:#fff !important;
}

.ric-j2-prayer-root p,
.ric-j2-prayer-root small{
  color:
    rgba(255,255,255,.78) !important;
}

.ric-j2-prayer-root
[data-prayer]{
  border:
    1px solid rgba(255,255,255,.21) !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.15) !important;
}


/* Next Salah + Live Qur'an stay native, but visually coordinate */

.ric-d-next-panel{
  border-radius:13px !important;
}

.ric-e-quran{
  border-radius:13px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE HERO
--------------------------------------------------------- */

@media(max-width:980px){

  .ric-j2-hero-copy{
    width:
      min(56%,660px) !important;
  }

  .ric-j2-verse{
    width:
      min(37%,480px) !important;
  }

}


@media(max-width:760px){

  .ric-j-hero{
    min-height:
      clamp(500px,100vw,650px) !important;
  }

  .ric-j2-hero-copy{
    left:22px !important;
    right:22px !important;

    width:auto !important;
    max-width:none !important;
  }

  .ric-j2-title{
    font-size:
      clamp(2.35rem,10.5vw,3.7rem) !important;
  }

  .ric-j2-description{
    display:none;
  }

  .ric-j2-verse{
    display:none !important;
  }

}


@media(max-width:450px){

  .ric-j2-actions a{
    flex:
      1 1 125px;
  }

}

/* RIC-STAGE-J2:END */



/* RIC-STAGE-J3:START */

/*
=============================================================
 STAGE J.3
 Exact Prayer Times surface
 Anchor: #ric-prayer-title
=============================================================
*/


/* ---------------------------------------------------------
   REAL PRAYER ROOT
--------------------------------------------------------- */

.ric-j3-prayer-root{
  position:relative !important;

  width:100% !important;

  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  margin:
    clamp(12px,1.6vw,22px)
    0
    0 !important;

  padding:
    clamp(17px,2vw,26px)
    clamp(18px,2.5vw,34px)
    clamp(19px,2.2vw,30px) !important;

  overflow:visible !important;

  align-content:start !important;

  color:#fff !important;

  background:
    radial-gradient(
      circle at 72% 10%,
      rgba(50,163,119,.25),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 95%,
      rgba(1,91,68,.42),
      transparent 30%
    ),
    linear-gradient(
      112deg,
      #003a2e 0%,
      #00503d 54%,
      #004332 100%
    ) !important;

  border-top:
    1px solid rgba(239,190,77,.35) !important;

  border-bottom:
    1px solid rgba(239,190,77,.25) !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 10px 30px rgba(0,55,42,.10) !important;
}


/* ---------------------------------------------------------
   REMOVE LEGACY LARGE EMPTY HEIGHT
--------------------------------------------------------- */

.ric-j3-prayer-root,
.ric-j3-prayer-root > div,
.ric-j3-prayer-root > section{
  min-height:0 !important;
}

.ric-j3-prayer-root{
  justify-content:start !important;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.ric-j3-prayer-root
#ric-prayer-title{
  margin:
    0 0 4px !important;

  color:#fff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(1.85rem,2.65vw,3rem) !important;

  line-height:1 !important;

  text-shadow:
    0 2px 12px rgba(0,0,0,.13);
}


/* ---------------------------------------------------------
   PRAYER TEXT
--------------------------------------------------------- */

.ric-j3-prayer-root p,
.ric-j3-prayer-root small,
.ric-j3-prayer-root label,
.ric-j3-prayer-root li{
  color:
    rgba(255,255,255,.80) !important;
}

.ric-j3-prayer-root strong{
  color:#fff;
}


/* ---------------------------------------------------------
   LOCATION / DATE META
--------------------------------------------------------- */

.ric-j3-prayer-root
[data-location],
.ric-j3-prayer-root
[class*="location"],
.ric-j3-prayer-root
[class*="date"]{
  color:
    rgba(255,255,255,.78) !important;
}


/* ---------------------------------------------------------
   CARD CONTAINER
--------------------------------------------------------- */

.ric-j3-prayer-cards{
  min-height:0 !important;

  margin-top:
    clamp(11px,1.4vw,18px) !important;

  padding-top:0 !important;

  align-content:start !important;
  align-items:stretch !important;
}


/* ---------------------------------------------------------
   SIX PRAYER CARDS
--------------------------------------------------------- */

.ric-j3-prayer-root
[data-prayer]{
  min-height:0 !important;

  border:
    1px solid rgba(255,255,255,.22) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.18) !important;
}


/* Next Salah visual priority */

.ric-j3-prayer-root
[data-prayer].is-next,
.ric-j3-prayer-root
[data-prayer][data-next="true"],
.ric-j3-prayer-root
[data-prayer].next{
  border-color:
    rgba(240,194,77,.90) !important;

  box-shadow:
    0 0 0 2px rgba(240,194,77,.20),
    0 0 24px rgba(240,194,77,.25) !important;
}


/* ---------------------------------------------------------
   CONTROLS
--------------------------------------------------------- */

.ric-j3-prayer-root select,
.ric-j3-prayer-root input{
  color:#173e33 !important;
}


/* ---------------------------------------------------------
   PRAYER AUDIO PANEL
--------------------------------------------------------- */

.ric-j3-prayer-root
[class*="prayer-audio"],
.ric-j3-prayer-root
[id*="prayer-audio"]{
  border:
    1px solid rgba(255,255,255,.15) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.12) !important;
}


/* ---------------------------------------------------------
   NEXT SALAH + LIVE QUR'AN
--------------------------------------------------------- */

.ric-d-next-panel,
.ric-e-quran{
  box-shadow:
    0 8px 25px rgba(0,60,45,.12) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:760px){

  .ric-j3-prayer-root{
    padding:
      16px 14px 19px !important;
  }

  .ric-j3-prayer-root
  #ric-prayer-title{
    font-size:
      clamp(1.75rem,8vw,2.4rem) !important;
  }

}

/* RIC-STAGE-J3:END */



/* RIC-STAGE-J4:START */

/*
=============================================================
 STAGE J.4
 Final unified Prayer Times presentation

 Exact direct children confirmed in browser:
 - .ric-prayer-intro
 - .ric-d-next-panel
 - .ric-e-quran
 - .ric-prayer-grid
 - .ric-adhan-box.ric-prayer-audio-compact
 - .ric-jumuah-strip
=============================================================
*/


/* =========================================================
   PRAYER ROOT — ONE UNIFIED DARK SURFACE
========================================================= */

.ric-j3-prayer-root{
  position:relative !important;
  isolation:isolate !important;

  display:grid !important;

  grid-template-columns:
    minmax(185px,235px)
    minmax(0,1fr)
    minmax(190px,215px) !important;

  grid-template-areas:
    "intro cards audio"
    "next  quran quran"
    "jumua  jumua jumua" !important;

  align-items:stretch !important;
  align-content:start !important;

  column-gap:
    clamp(8px,1vw,13px) !important;

  row-gap:
    clamp(8px,1vw,12px) !important;

  width:100% !important;

  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  margin:
    clamp(12px,1.5vw,20px)
    0
    clamp(12px,1.6vw,22px) !important;

  padding:
    clamp(14px,1.7vw,22px)
    clamp(14px,2vw,28px)
    clamp(13px,1.6vw,20px) !important;

  overflow:hidden !important;

  color:#fff !important;

  background:
    radial-gradient(
      circle at 72% 14%,
      rgba(48,163,119,.27),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 95%,
      rgba(10,113,82,.31),
      transparent 31%
    ),
    linear-gradient(
      112deg,
      #00392d 0%,
      #004d3b 48%,
      #005943 72%,
      #003d30 100%
    ) !important;

  border-top:
    1px solid rgba(238,187,72,.34) !important;

  border-bottom:
    1px solid rgba(238,187,72,.28) !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 12px 30px rgba(0,57,43,.11) !important;
}


/*
 Strong internal overlay so legacy cream/background
 artwork cannot visually win over the 2026 surface.
*/
.ric-j3-prayer-root::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:0 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      105deg,
      rgba(0,54,42,.96),
      rgba(0,82,62,.94)
    ) !important;

  opacity:1 !important;
}


.ric-j3-prayer-root > *{
  position:relative !important;
  z-index:1 !important;
}


/* =========================================================
   LEFT — PRAYER INTRO
========================================================= */

.ric-j3-prayer-root
.ric-prayer-intro{
  grid-area:intro !important;

  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;

  align-self:stretch !important;

  padding:
    clamp(7px,.8vw,11px)
    clamp(3px,.5vw,8px) !important;

  background:
    transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


.ric-j3-prayer-root
#ric-prayer-title{
  margin:
    0 0 7px !important;

  color:#fff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(1.75rem,2.35vw,2.65rem) !important;

  line-height:.98 !important;
}


.ric-j3-prayer-root
.ric-prayer-intro p,
.ric-j3-prayer-root
.ric-prayer-intro small,
.ric-j3-prayer-root
.ric-prayer-intro span,
.ric-j3-prayer-root
.ric-prayer-intro label{
  color:
    rgba(255,255,255,.78) !important;
}


.ric-j3-prayer-root
.ric-prayer-intro select{
  width:100% !important;

  max-width:170px;

  min-height:30px;

  margin-top:5px;

  color:#154538 !important;

  background:
    rgba(255,255,255,.94) !important;

  border:
    1px solid rgba(255,255,255,.35) !important;

  border-radius:6px;
}


/* =========================================================
   CENTER — SIX PRAYER CARDS
========================================================= */

.ric-j3-prayer-root
.ric-prayer-grid{
  grid-area:cards !important;

  width:auto !important;
  min-width:0 !important;

  min-height:0 !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  align-self:stretch !important;
  align-content:stretch !important;

  background:
    transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


.ric-j3-prayer-root
.ric-prayer-grid{
  gap:
    clamp(5px,.6vw,9px) !important;
}


.ric-j3-prayer-root
[data-prayer]{
  min-width:0 !important;

  min-height:
    clamp(175px,14vw,220px) !important;

  height:
    clamp(175px,14vw,220px) !important;

  overflow:hidden !important;

  border-radius:10px !important;

  border:
    1px solid rgba(255,255,255,.23) !important;

  box-shadow:
    0 7px 19px rgba(0,0,0,.20) !important;
}


/*
 Preserve existing Next Salah intelligence,
 but strengthen the visual priority.
*/
.ric-j3-prayer-root
[data-prayer].is-next,
.ric-j3-prayer-root
[data-prayer].next,
.ric-j3-prayer-root
[data-prayer][data-next="true"]{
  border-color:
    rgba(242,193,68,.95) !important;

  box-shadow:
    0 0 0 2px rgba(242,193,68,.19),
    0 0 21px rgba(242,193,68,.24),
    0 8px 20px rgba(0,0,0,.18) !important;
}


/* =========================================================
   RIGHT — PRAYER AUDIO
========================================================= */

.ric-j3-prayer-root
.ric-adhan-box.ric-prayer-audio-compact{
  grid-area:audio !important;

  width:auto !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;

  padding:
    clamp(10px,1vw,14px) !important;

  align-self:stretch !important;

  color:#fff !important;

  background:
    linear-gradient(
      150deg,
      rgba(0,94,70,.97),
      rgba(0,63,49,.97)
    ) !important;

  border:
    1px solid rgba(255,255,255,.17) !important;

  border-radius:10px !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.15) !important;
}


.ric-j3-prayer-root
.ric-adhan-box *,
.ric-j3-prayer-root
.ric-prayer-audio-compact *{
  color:inherit;
}


/* =========================================================
   SECOND ROW — NEXT SALAH
========================================================= */

.ric-j3-prayer-root
.ric-d-next-panel{
  grid-area:next !important;

  width:auto !important;
  min-width:0 !important;

  min-height:125px !important;
  height:auto !important;

  margin:0 !important;

  padding:
    clamp(12px,1.25vw,17px) !important;

  align-self:stretch !important;

  border:
    1px solid rgba(239,188,71,.34) !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      145deg,
      rgba(0,94,68,.99),
      rgba(0,58,45,.99)
    ) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.14) !important;
}


/* =========================================================
   SECOND ROW — LIVE QUR'AN
========================================================= */

.ric-j3-prayer-root
.ric-e-quran{
  grid-area:quran !important;

  width:auto !important;
  min-width:0 !important;

  min-height:125px !important;
  height:auto !important;

  margin:0 !important;

  padding:
    clamp(12px,1.25vw,17px)
    clamp(14px,1.5vw,21px) !important;

  align-self:stretch !important;

  border:
    1px solid rgba(255,255,255,.14) !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      110deg,
      rgba(0,99,72,.99),
      rgba(0,68,52,.99)
    ) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.13) !important;
}


/*
 Keep Live Qur'an horizontally useful instead
 of creating another tall vertical section.
*/
.ric-j3-prayer-root
.ric-e-quran{
  grid-template-columns:
    minmax(190px,.75fr)
    minmax(300px,1.6fr) !important;
}


.ric-j3-prayer-root
.ric-e-title{
  font-size:
    clamp(1.35rem,1.9vw,1.9rem) !important;
}


.ric-j3-prayer-root
.ric-e-copy{
  margin-top:5px !important;
}


.ric-j3-prayer-root
.ric-e-status{
  margin-top:5px !important;
}


.ric-j3-prayer-root
.ric-e-volume{
  margin-top:6px !important;
}


.ric-j3-prayer-root
.ric-e-chips{
  margin-top:5px !important;
}


/* =========================================================
   JUMU'AH STRIP
========================================================= */

.ric-j3-prayer-root
.ric-jumuah-strip{
  grid-area:jumua !important;

  width:auto !important;

  min-height:28px !important;
  height:auto !important;

  margin:0 !important;

  padding:
    6px 10px !important;

  border-radius:7px !important;

  text-align:center;

  color:
    rgba(255,255,255,.88) !important;

  background:
    rgba(255,255,255,.07) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  box-shadow:none !important;
}


/* =========================================================
   TEXT CONTRAST
========================================================= */

.ric-j3-prayer-root p,
.ric-j3-prayer-root small,
.ric-j3-prayer-root label{
  color:
    rgba(255,255,255,.79) !important;
}


.ric-j3-prayer-root h1,
.ric-j3-prayer-root h2,
.ric-j3-prayer-root h3,
.ric-j3-prayer-root strong{
  color:#fff !important;
}


/* =========================================================
   MEDIUM
========================================================= */

@media(max-width:1150px){

  .ric-j3-prayer-root{
    grid-template-columns:
      minmax(180px,.7fr)
      minmax(0,1.5fr) !important;

    grid-template-areas:
      "intro audio"
      "cards cards"
      "next quran"
      "jumua jumua" !important;
  }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:760px){

  .ric-j3-prayer-root{
    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "intro"
      "cards"
      "next"
      "quran"
      "audio"
      "jumua" !important;

    padding:
      14px 12px !important;
  }


  .ric-j3-prayer-root
  .ric-e-quran{
    grid-template-columns:
      1fr !important;
  }


  .ric-j3-prayer-root
  .ric-prayer-grid{
    overflow-x:auto !important;

    scroll-snap-type:
      x proximity;
  }


  .ric-j3-prayer-root
  [data-prayer]{
    scroll-snap-align:start;
  }

}

/* RIC-STAGE-J4:END */



/* RIC-STAGE-J4-1:START */

/*
=============================================================
 STAGE J.4.1
 Reset legacy absolute/fixed positioning inherited by the
 existing Prayer Times children.

 No DOM changes.
 No prayer JavaScript changes.
=============================================================
*/


/* =========================================================
   ALL SIX DIRECT CHILDREN PARTICIPATE IN THE GRID
========================================================= */

.ric-j3-prayer-root > .ric-prayer-intro,
.ric-j3-prayer-root > .ric-prayer-grid,
.ric-j3-prayer-root > .ric-adhan-box,
.ric-j3-prayer-root > .ric-d-next-panel,
.ric-j3-prayer-root > .ric-e-quran,
.ric-j3-prayer-root > .ric-jumuah-strip{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  transform:none !important;
  translate:none !important;

  float:none !important;

  width:auto !important;
  max-width:none !important;

  min-width:0 !important;

  height:auto !important;
  max-height:none !important;

  margin:0 !important;

  opacity:1 !important;

  filter:none !important;
  backdrop-filter:none !important;
}


/* =========================================================
   ROOT GRID — REASSERT EXACT LAYOUT
========================================================= */

.ric-j3-prayer-root{
  display:grid !important;

  grid-template-columns:
    minmax(195px,225px)
    minmax(0,1fr)
    minmax(190px,215px) !important;

  grid-template-rows:
    auto
    auto
    auto !important;

  grid-template-areas:
    "intro cards audio"
    "next  quran quran"
    "jumua jumua jumua" !important;

  gap:
    10px !important;

  min-height:0 !important;
  height:auto !important;

  align-items:stretch !important;
  align-content:start !important;
}


/* =========================================================
   INTRO
========================================================= */

.ric-j3-prayer-root > .ric-prayer-intro{
  grid-area:intro !important;

  display:block !important;

  align-self:stretch !important;

  padding:
    8px 4px !important;

  background:transparent !important;
}


/* =========================================================
   SIX PRAYER CARDS — FORCE A TRUE 6-COLUMN GRID
========================================================= */

.ric-j3-prayer-root > .ric-prayer-grid{
  grid-area:cards !important;

  display:grid !important;

  grid-template-columns:
    repeat(6,minmax(0,1fr)) !important;

  grid-template-rows:
    1fr !important;

  grid-auto-flow:column !important;

  gap:
    clamp(5px,.55vw,9px) !important;

  align-items:stretch !important;
  align-content:stretch !important;

  justify-items:stretch !important;

  width:100% !important;

  overflow:visible !important;

  padding:0 !important;

  background:transparent !important;
}


.ric-j3-prayer-root
.ric-prayer-grid > [data-prayer]{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  transform:none !important;

  width:100% !important;
  max-width:none !important;

  min-width:0 !important;

  height:
    clamp(180px,14vw,220px) !important;

  min-height:
    clamp(180px,14vw,220px) !important;

  flex:none !important;

  margin:0 !important;

  overflow:hidden !important;
}


/*
 Images/background layers inside individual prayer cards
 must continue filling the complete card.
*/
.ric-j3-prayer-root
[data-prayer] img{
  max-width:100% !important;
}


/* =========================================================
   PRAYER AUDIO — STOP FLOATING / OVERLAYING
========================================================= */

.ric-j3-prayer-root > .ric-adhan-box.ric-prayer-audio-compact{
  grid-area:audio !important;

  position:relative !important;

  display:block !important;

  width:100% !important;
  max-width:none !important;

  min-width:0 !important;

  height:auto !important;
  min-height:100% !important;

  overflow:hidden !important;

  z-index:2 !important;

  transform:none !important;

  filter:none !important;
  backdrop-filter:none !important;

  opacity:1 !important;
}


/* Neutralize fixed-position descendants if legacy audio
   styles attached positioning to an inner shell. */

.ric-j3-prayer-root
.ric-prayer-audio-compact > *{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  transform:none !important;

  max-width:100% !important;
}


/* =========================================================
   SECOND ROW
========================================================= */

.ric-j3-prayer-root > .ric-d-next-panel{
  grid-area:next !important;

  position:relative !important;

  display:block !important;

  width:100% !important;

  min-height:125px !important;

  overflow:hidden !important;
}


.ric-j3-prayer-root > .ric-e-quran{
  grid-area:quran !important;

  position:relative !important;

  display:grid !important;

  width:100% !important;

  grid-template-columns:
    minmax(200px,.75fr)
    minmax(280px,1.5fr) !important;

  min-height:125px !important;

  overflow:hidden !important;
}


/* =========================================================
   JUMU'AH
========================================================= */

.ric-j3-prayer-root > .ric-jumuah-strip{
  grid-area:jumua !important;

  position:relative !important;

  width:100% !important;

  min-height:30px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1150px){

  .ric-j3-prayer-root{
    grid-template-columns:
      minmax(180px,220px)
      minmax(0,1fr) !important;

    grid-template-areas:
      "intro audio"
      "cards cards"
      "next quran"
      "jumua jumua" !important;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid{
    grid-template-columns:
      repeat(6,minmax(120px,1fr)) !important;

    overflow-x:auto !important;

    padding-bottom:4px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .ric-j3-prayer-root{
    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-areas:
      "intro"
      "cards"
      "next"
      "quran"
      "audio"
      "jumua" !important;

    gap:9px !important;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid{
    grid-template-columns:
      repeat(6,minmax(145px,1fr)) !important;

    grid-auto-flow:column !important;

    overflow-x:auto !important;

    scroll-snap-type:
      x proximity;
  }


  .ric-j3-prayer-root
  .ric-prayer-grid
  > [data-prayer]{
    height:190px !important;
    min-height:190px !important;

    scroll-snap-align:start;
  }


  .ric-j3-prayer-root
  > .ric-e-quran{
    grid-template-columns:
      1fr !important;
  }

}

/* RIC-STAGE-J4-1:END */



/* RIC-STAGE-J5:START */

/*
=============================================================
 STAGE J.5 — FINAL PRAYER LAYOUT

 Confirmed direct children:
   .ric-j-intro
   .ric-d-next-panel
   .ric-e-quran
   .ric-prayer-grid
   .ric-adhan-box.ric-prayer-audio-compact
   .ric-jumuah-strip

 We deliberately give the six prayer cards a FULL-WIDTH row.
 This prevents them from collapsing into narrow strips at
 medium widths or while browser DevTools are docked.
=============================================================
*/


/* =========================================================
   ROOT
========================================================= */

.ric-j3-prayer-root{
  position:relative !important;
  isolation:isolate !important;

  display:grid !important;

  grid-template-columns:
    minmax(220px,280px)
    minmax(0,1fr) !important;

  grid-template-areas:
    "intro audio"
    "cards cards"
    "next  quran"
    "jumua jumua" !important;

  grid-template-rows:
    auto
    auto
    auto
    auto !important;

  gap:
    clamp(8px,1vw,12px) !important;

  align-items:stretch !important;
  align-content:start !important;

  width:100% !important;

  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  margin:
    clamp(12px,1.5vw,20px)
    0
    clamp(12px,1.6vw,22px) !important;

  padding:
    clamp(14px,1.7vw,22px)
    clamp(14px,2vw,28px)
    clamp(14px,1.8vw,22px) !important;

  overflow:hidden !important;

  color:#fff !important;

  background:
    radial-gradient(
      circle at 72% 12%,
      rgba(55,165,122,.24),
      transparent 32%
    ),
    linear-gradient(
      112deg,
      #003a2e 0%,
      #004d3b 50%,
      #005943 72%,
      #003d30 100%
    ) !important;

  border:
    1px solid rgba(238,187,72,.23) !important;

  border-radius:
    18px !important;

  box-shadow:
    0 12px 30px rgba(0,57,43,.11) !important;
}


/*
 Keep the dark surface authoritative.
*/
.ric-j3-prayer-root::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:0 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      105deg,
      rgba(0,55,43,.97),
      rgba(0,83,63,.95)
    ) !important;
}


.ric-j3-prayer-root > *{
  position:relative !important;

  z-index:1 !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  transform:none !important;
  translate:none !important;

  float:none !important;

  min-width:0 !important;

  margin:0 !important;
}


/* =========================================================
   REAL INTRO CLASS
========================================================= */

.ric-j3-prayer-root > .ric-j-intro,
.ric-j3-prayer-root > .ric-prayer-intro{
  grid-area:intro !important;

  display:block !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;

  padding:
    8px 5px !important;

  background:
    transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


.ric-j3-prayer-root
#ric-prayer-title{
  margin:
    0 0 7px !important;

  color:#fff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(1.8rem,2.5vw,2.8rem) !important;

  line-height:.98 !important;
}


.ric-j3-prayer-root
.ric-j-intro p,
.ric-j3-prayer-root
.ric-j-intro span,
.ric-j3-prayer-root
.ric-j-intro small,
.ric-j3-prayer-root
.ric-j-intro label{
  color:
    rgba(255,255,255,.80) !important;
}


.ric-j3-prayer-root
.ric-j-intro select{
  width:100% !important;

  max-width:180px !important;

  min-height:31px !important;

  color:#16483a !important;

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid rgba(255,255,255,.45) !important;

  border-radius:6px !important;
}


/* =========================================================
   PRAYER AUDIO — TOP RIGHT
========================================================= */

.ric-j3-prayer-root
> .ric-adhan-box.ric-prayer-audio-compact{
  grid-area:audio !important;

  justify-self:end !important;

  width:
    min(100%,380px) !important;

  max-width:380px !important;

  height:auto !important;
  min-height:0 !important;

  padding:
    clamp(10px,1vw,14px) !important;

  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(0,94,70,.98),
      rgba(0,59,46,.98)
    ) !important;

  border:
    1px solid rgba(255,255,255,.16) !important;

  border-radius:10px !important;

  box-shadow:
    0 7px 19px rgba(0,0,0,.14) !important;

  filter:none !important;
  backdrop-filter:none !important;

  opacity:1 !important;
}


.ric-j3-prayer-root
.ric-prayer-audio-compact > *{
  position:relative !important;

  inset:auto !important;

  transform:none !important;

  max-width:100% !important;
}


/* =========================================================
   SIX CARDS — FULL-WIDTH ROW
========================================================= */

.ric-j3-prayer-root
> .ric-prayer-grid{
  grid-area:cards !important;

  display:grid !important;

  grid-template-columns:
    repeat(6,minmax(0,1fr)) !important;

  grid-auto-flow:row !important;

  gap:
    clamp(6px,.65vw,10px) !important;

  width:100% !important;

  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;

  background:
    transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


.ric-j3-prayer-root
> .ric-prayer-grid
> [data-prayer]{
  position:relative !important;

  display:block !important;

  width:100% !important;
  max-width:none !important;

  min-width:0 !important;

  height:
    clamp(180px,13vw,220px) !important;

  min-height:
    clamp(180px,13vw,220px) !important;

  margin:0 !important;

  overflow:hidden !important;

  flex:none !important;

  border-radius:
    10px !important;

  border:
    1px solid rgba(255,255,255,.23) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.19) !important;
}


/*
 Preserve full image layers inside prayer cards.
*/
.ric-j3-prayer-root
[data-prayer] img{
  width:100% !important;

  max-width:100% !important;

  height:100% !important;

  object-fit:cover !important;
}


/* =========================================================
   NEXT SALAH
========================================================= */

.ric-j3-prayer-root
> .ric-d-next-panel{
  grid-area:next !important;

  display:block !important;

  width:100% !important;

  height:auto !important;

  min-height:
    125px !important;

  padding:
    clamp(12px,1.2vw,17px) !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      145deg,
      #005e45,
      #003d30
    ) !important;

  border:
    1px solid rgba(239,188,71,.33) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.13) !important;
}


/* =========================================================
   LIVE QUR'AN
========================================================= */

.ric-j3-prayer-root
> .ric-e-quran{
  grid-area:quran !important;

  display:grid !important;

  grid-template-columns:
    minmax(190px,.7fr)
    minmax(280px,1.5fr) !important;

  width:100% !important;

  height:auto !important;

  min-height:
    125px !important;

  padding:
    clamp(12px,1.2vw,17px)
    clamp(14px,1.5vw,21px) !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      110deg,
      #00664a,
      #004534
    ) !important;

  border:
    1px solid rgba(255,255,255,.14) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.12) !important;
}


/* =========================================================
   JUMU'AH
========================================================= */

.ric-j3-prayer-root
> .ric-jumuah-strip{
  grid-area:jumua !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:100% !important;

  min-height:
    30px !important;

  height:auto !important;

  padding:
    6px 10px !important;

  color:
    rgba(255,255,255,.90) !important;

  background:
    rgba(255,255,255,.07) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  border-radius:
    7px !important;
}


/* =========================================================
   CONTRAST
========================================================= */

.ric-j3-prayer-root h1,
.ric-j3-prayer-root h2,
.ric-j3-prayer-root h3,
.ric-j3-prayer-root strong{
  color:#fff !important;
}


.ric-j3-prayer-root p,
.ric-j3-prayer-root small,
.ric-j3-prayer-root label{
  color:
    rgba(255,255,255,.80) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

  .ric-j3-prayer-root{
    grid-template-columns:
      1fr 1fr !important;

    grid-template-areas:
      "intro audio"
      "cards cards"
      "next quran"
      "jumua jumua" !important;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid
  > [data-prayer]{
    height:
      210px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

  .ric-j3-prayer-root{
    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "intro"
      "cards"
      "next"
      "quran"
      "audio"
      "jumua" !important;

    padding:
      13px 11px !important;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid{
    grid-template-columns:
      repeat(6,minmax(145px,1fr)) !important;

    grid-auto-flow:column !important;

    overflow-x:auto !important;

    scroll-snap-type:
      x proximity;
  }


  .ric-j3-prayer-root
  > .ric-prayer-grid
  > [data-prayer]{
    height:195px !important;

    scroll-snap-align:start;
  }


  .ric-j3-prayer-root
  > .ric-e-quran{
    grid-template-columns:
      1fr !important;
  }


  .ric-j3-prayer-root
  > .ric-adhan-box.ric-prayer-audio-compact{
    justify-self:stretch !important;

    width:100% !important;

    max-width:none !important;
  }

}

/* RIC-STAGE-J5:END */