/* Alfalah Quran, Athan & Prayer — Smarty-style layout + Alfalah brand palette */
body.page-smarty-men-jacket-edit.page-alfalah-quran{
  --primary:#34843c;
  --primary-dark:#216b31;
  --primary-rgb:52,132,60;
  --soft:#edf7ef;
  --soft-2:#dcefe0;
  --ink:#132018;
  --muted:#647168;
  --line:#e1ebe3;
  --white:#fff;
}

body.page-alfalah-quran .hero{
  background:linear-gradient(135deg,#f8fcf8 0%,#edf7ef 58%,#dcefe0 100%)!important;
}
body.page-alfalah-quran .hero:before{
  background:radial-gradient(circle,rgba(52,132,60,.20),transparent 68%)!important;
}
body.page-alfalah-quran .hero h1 span,
body.page-alfalah-quran .eyebrow,
body.page-alfalah-quran .theme-check{color:var(--primary)!important}

body.page-alfalah-quran .hero-copy .eyebrow{
  background:rgba(52,132,60,.10)!important;
  color:var(--primary-dark)!important;
}

body.page-alfalah-quran .nav nav .nav-download{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;
  box-shadow:0 10px 24px rgba(33,107,49,.22)!important;
}
body.page-alfalah-quran .nav nav .nav-download:hover{
  box-shadow:0 14px 30px rgba(33,107,49,.30)!important;
}

body.page-alfalah-quran .brand img,
body.page-alfalah-quran .download-inner>img,
body.page-alfalah-quran .footer-brand img{
  object-fit:cover!important;
}

/* Hero screenshot in a clean mobile dummy frame */

body.page-alfalah-quran .hero-phone-shell{
  position:relative;
  width:268px;
  aspect-ratio:548/1184;
  padding:8px;
  overflow:hidden;
  border-radius:42px;
  background:#101713;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 68px rgba(24,76,36,.25),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(2.2deg);
}
body.page-alfalah-quran .hero-phone-shell:before{
  content:"";
  position:absolute;
  z-index:3;
  top:12px;
  left:50%;
  width:72px;
  height:18px;
  transform:translateX(-50%);
  border-radius:0 0 12px 12px;
  background:#101713;
}
body.page-alfalah-quran .hero-phone-shell .hero-first-screenshot{
  display:block!important;
  position:static!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:34px!important;
  background:#fff!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
body.page-alfalah-quran .alfalah-floating-logo{
  display:block!important;
  position:absolute!important;
  z-index:4;
  right:8%!important;
  bottom:9%!important;
  width:104px!important;
  height:104px!important;
  margin:0!important;
  object-fit:cover!important;
  border:5px solid rgba(255,255,255,.95)!important;
  border-radius:27px!important;
  box-shadow:0 20px 46px rgba(24,76,36,.28)!important;
  filter:none!important;
  transform:rotate(-7deg)!important;
}

/* Feature cards keep the same Smarty layout, recolored to Alfalah green */
body.page-alfalah-quran .cards article{
  border-color:rgba(52,132,60,.14)!important;
  background:linear-gradient(155deg,#fff,#f4faf5)!important;
}
body.page-alfalah-quran .cards article:hover{
  border-color:rgba(52,132,60,.42)!important;
  box-shadow:0 18px 55px rgba(33,107,49,.08)!important;
}
body.page-alfalah-quran .cards .icon{
  width:58px!important;
  height:58px!important;
  border-radius:17px!important;
  background:#2c7937!important;
  color:#fff!important;
}
body.page-alfalah-quran .cards article:hover .icon{
  background:#216b31!important;
  color:#fff!important;
}
body.page-alfalah-quran .cards .icon svg,
body.page-alfalah-quran .cards .icon svg *{
  stroke:currentColor!important;
}

/* Screenshot carousel — each screenshot sits inside a mobile dummy border */
body.page-alfalah-quran .screens{background:#f7faf7!important}
body.page-alfalah-quran .screens .section-head{
  margin-bottom:30px!important;
}
body.page-alfalah-quran .rail{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  padding:4px 0 18px!important;
}
body.page-alfalah-quran .rail::-webkit-scrollbar{display:none}
body.page-alfalah-quran .phone-shot{
  position:relative;
  flex:0 0 calc((100% - 30px) / 4);
  width:calc((100% - 30px) / 4);
  aspect-ratio:1548 / 3000;
  padding:0!important;
  overflow:visible;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
body.page-alfalah-quran .phone-shot:before{
  display:none!important;
}
body.page-alfalah-quran .phone-shot img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
body.page-alfalah-quran .slide-btn{
  background:var(--primary)!important;
  box-shadow:0 10px 25px rgba(33,107,49,.28)!important;
}

/* Supporting section screenshots use the same phone-frame feeling */
body.page-alfalah-quran .stack img{
  border:8px solid #111713!important;
  border-radius:34px!important;
  background:#111713!important;
  box-shadow:0 25px 60px rgba(17,36,22,.16)!important;
}

body.page-alfalah-quran .download{
  background:linear-gradient(135deg,#eff8f1,#dcefe0)!important;
}
body.page-alfalah-quran .download-inner>img{
  box-shadow:0 18px 42px rgba(33,107,49,.22)!important;
}
body.page-alfalah-quran .inner-contact-card{
  background:linear-gradient(135deg,#34843c,#216b31)!important;
}
body.page-alfalah-quran .inner-contact-email-icon{
  background:linear-gradient(135deg,#43994b,#216b31)!important;
}

body.page-alfalah-quran footer{
  background:linear-gradient(145deg,#101a12 0%,#17331d 58%,#1f5c2d 100%)!important;
}
body.page-alfalah-quran footer:before{
  background:radial-gradient(circle,rgba(95,177,104,.28),transparent 68%)!important;
}
body.page-alfalah-quran .footer-links a:hover{color:#a9d9ae!important}

@media(max-width:900px){
  body.page-alfalah-quran .hero-phone-shell{width:258px}
  body.page-alfalah-quran .alfalah-floating-logo{right:20%!important;bottom:8%!important}
}

@media(max-width:620px){
  body.page-alfalah-quran .hero{
    background:linear-gradient(160deg,#f8fcf8 0%,#edf7ef 66%,#dcefe0 100%)!important;
  }
  body.page-alfalah-quran .hero-art{
    min-height:560px!important;
    height:560px!important;
    padding:24px 20px 0!important;
  }
  body.page-alfalah-quran .hero-phone-shell{width:242px;border-radius:38px;padding:7px}
  body.page-alfalah-quran .hero-phone-shell .hero-first-screenshot{border-radius:31px!important}
  body.page-alfalah-quran .alfalah-floating-logo{
    width:84px!important;
    height:84px!important;
    right:10%!important;
    bottom:10%!important;
    border-radius:23px!important;
  }
  body.page-alfalah-quran .screens .container{width:100%!important}
  body.page-alfalah-quran .screens .section-head{padding:0 20px;margin-bottom:24px!important}
  body.page-alfalah-quran .slider-wrap{width:100%;overflow:hidden}
  body.page-alfalah-quran .rail{
    gap:10px!important;
    padding:6px 18px 20px!important;
    scroll-padding-inline:18px;
  }
  body.page-alfalah-quran .phone-shot{
    flex:0 0 100%;
    width:100%;
    max-width:none;
    aspect-ratio:1548 / 3000;
    padding:0!important;
    border-radius:0;
  }
  body.page-alfalah-quran .phone-shot img{
    border-radius:0!important;
    object-fit:contain!important;
  }
  body.page-alfalah-quran .slide-btn{display:none!important}
}

/* =========================================================
   Alfalah final color fixes
   ========================================================= */
/* Override the Smarty page fallback tick color with Alfalah green. */
body.page-smarty-men-jacket-edit.page-alfalah-quran .trust span b.theme-check,
body.page-smarty-men-jacket-edit.page-alfalah-quran .checks span b.theme-check {
  color: var(--primary) !important;
}

/* White email glyph on the green icon tile. */
body.page-smarty-men-jacket-edit.page-alfalah-quran .inner-contact-email-icon {
  background: linear-gradient(135deg, #43994b, #216b31) !important;
  color: #fff !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .inner-contact-email-icon svg,
body.page-smarty-men-jacket-edit.page-alfalah-quran .inner-contact-email-icon svg * {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Keep every footer label readable on the dark Alfalah footer. */
body.page-smarty-men-jacket-edit.page-alfalah-quran footer,
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .footer-grid {
  color: #fff !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .footer-brand strong,
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .footer-links a {
  color: #fff !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .footer-brand p,
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .copyright {
  color: rgba(255,255,255,.78) !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .copyright {
  border-top-color: rgba(255,255,255,.12) !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran footer .footer-links a:hover {
  color: #ccebcf !important;
  opacity: 1 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .hero h1{
   color: #132018 !important;
   text-shadow: none !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .section h2{
  color: #132018 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .download h2{
  color: #132018 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .cards h3{
  color: #132018 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .cards p{
  color: #647168 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .hero p{
   color: #647168 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .download p{
   color: #647168 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .hero .trust span{
   color: #647168 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .section-head p{
   color: #647168 !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .real-work .checks span{
   color: #647168 !important;
   font-size: 14px !important;
}
body.page-smarty-men-jacket-edit.page-alfalah-quran .download .store-actions .store-btn, body.page-smarty-men-jacket-edit.page-alfalah-quran .hero .store-actions .store-btn {
    box-shadow: none !important;
}
/* =========================================================
   Alfalah screenshot count: 4 desktop / 1 mobile
   ========================================================= */
@media (min-width: 621px) {
  body.page-alfalah-quran .screens .rail {
    gap: 22px !important;
  }

  body.page-alfalah-quran .screens .phone-shot {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 66px) / 4) !important;
    width: calc((100% - 66px) / 4) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }
}

@media (max-width: 620px) {
  body.page-alfalah-quran .screens .slider-wrap {
    padding: 0 !important;
  }

  body.page-alfalah-quran .screens .rail {
    gap: 0 !important;
    padding: 10px 0 28px !important;
    scroll-padding-inline: 0 !important;
  }

  body.page-alfalah-quran .screens .phone-shot {
    box-sizing: border-box;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-align: start !important;
  }

  body.page-alfalah-quran .screens .phone-shot:before {
    top: 3px;
  }

  body.page-alfalah-quran .screens .phone-shot img {
    flex: 0 0 auto;
    width: min(76vw, 265px) !important;
    height: auto !important;
    aspect-ratio: 634 / 1184;
    margin: 0 auto !important;
  }
}

/* =========================================================
   Alfalah mobile screenshot slider fix
   Keeps exactly one complete, centered screenshot per mobile slide.
   ========================================================= */
@media (max-width: 620px) {
  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens {
    overflow: hidden !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .container,
  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .slider-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .slider-wrap {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .rail {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 0 18px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .rail::-webkit-scrollbar {
    display: none !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .phone-shot {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: start center !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: visible !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .phone-shot img {
    display: block !important;
    flex: none !important;
    width: min(72vw, 270px) !important;
    max-width: calc(100vw - 44px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.page-smarty-men-jacket-edit.page-alfalah-quran .screens .slide-btn {
    display: none !important;
  }
}