/* SmartMuslim Home Redesign V1 — 2026-09-19
   Visual target: approved Calendario Islamico / forest-green / ivory / soft-gold system.
   Scope: Home, Explore hub, top actions on Home, primary bottom navigation. */

:root{
  --sm26-ivory:#fbf7ef;
  --sm26-paper:#fffdf8;
  --sm26-paper-2:#f8f1e5;
  --sm26-forest:#0d513f;
  --sm26-forest-deep:#083c30;
  --sm26-ink:#143b32;
  --sm26-gold:#b58a3b;
  --sm26-gold-soft:#d9bd7a;
  --sm26-line:#ded2bf;
  --sm26-muted:#707975;
  --sm26-mint:#e4f2eb;
}

body:not(.sm-dark-v2){
  background:
    radial-gradient(circle at 0 0, rgba(181,138,59,.055), transparent 24rem),
    radial-gradient(circle at 100% 32%, rgba(13,81,63,.035), transparent 22rem),
    var(--sm26-ivory);
}

#view-home{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* HOME HEADER — exact hierarchy from approved render */
body:has(#view-home[style*="display: block"]) .app-container{
  padding-top:calc(18px + env(safe-area-inset-top,0px));
}

body:has(#view-home[style*="display: block"]) .app-container > .home-main-header{
  display:block!important;
  padding:0 4px 8px!important;
  min-height:104px!important;
  pointer-events:auto!important;
}

body:has(#view-home[style*="display: block"]) .home-header-brand{
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  width:calc(100% - 112px);
  margin:0;
  text-align:left;
}

body:has(#view-home[style*="display: block"]) .home-header-logo-mark{
  grid-column:1;
  grid-row:1 / span 2;
  width:62px!important;
  height:62px!important;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 7px 17px rgba(21,62,50,.16);
}

body:has(#view-home[style*="display: block"]) .app-container > .home-main-header .home-header-brand > h1{
  grid-column:2;
  grid-row:1;
  align-self:end;
  margin:0!important;
  color:var(--sm26-forest-deep)!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:clamp(1.65rem,7.7vw,2.25rem)!important;
  font-weight:700!important;
  line-height:.96!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
  white-space:nowrap;
}

body:has(#view-home[style*="display: block"]) .app-container > .home-main-header .home-header-brand > .brand-desc{
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin:5px 0 0!important;
  color:#9a722f!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:.53rem!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:.28em!important;
  text-transform:uppercase;
  text-align:left!important;
  white-space:nowrap;
}

body:has(#view-home[style*="display: block"]) .home-main-header .home-header-actions{
  position:fixed!important;
  z-index:1305!important;
  top:max(16px,env(safe-area-inset-top,0px))!important;
  left:auto!important;
  right:max(14px,calc((100vw - 430px)/2 + 14px))!important;
  width:auto!important;
  margin:0!important;
  transform:none!important;
  justify-content:flex-end!important;
}

body:has(#view-home[style*="display: block"]) .home-main-header .home-header-back,
body:has(#view-home[style*="display: block"]) .home-main-header .home-gender-control,
body:has(#view-home[style*="display: block"]) .global-destination-icon[data-global-destination="school"],
body:has(#view-home[style*="display: block"]) .global-destination-icon[data-global-destination="community"],
body:has(#view-home[style*="display: block"]) .global-destination-icon[data-global-destination="panel"],
body:has(#view-home[style*="display: block"]) .global-destination-icon[data-global-destination="travel"]{
  display:none!important;
}

body:has(#view-home[style*="display: block"]) .global-destination-nav{
  display:flex!important;
  align-items:center;
  gap:8px!important;
}

body:has(#view-home[style*="display: block"]) .home-header-icon-button{
  display:grid!important;
  place-items:center;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:10px!important;
  border:1.25px solid rgba(181,138,59,.58)!important;
  border-radius:50%!important;
  background:rgba(255,253,248,.94)!important;
  color:var(--sm26-forest)!important;
  box-shadow:0 5px 16px rgba(55,45,27,.075)!important;
}

body:has(#view-home[style*="display: block"]) .home-header-icon-button svg,
body:has(#view-home[style*="display: block"]) .home-header-icon-button img{
  width:27px!important;
  height:27px!important;
}

body:has(#view-home[style*="display: block"]) .home-header-bell svg{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}

body:has(#view-home[style*="display: block"]) .global-notice-badge{
  top:-5px!important;
  right:-5px!important;
  min-width:22px!important;
  height:22px!important;
  border:2px solid var(--sm26-paper)!important;
  background:#c7352f!important;
  color:#fff!important;
  font:800 .72rem/18px var(--sm-sans)!important;
  box-shadow:none!important;
}

/* CALENDAR HERO */
#view-home .home-islamic-calendar{
  position:relative;
  order:-10;
  margin:0!important;
  padding:14px!important;
  overflow:hidden;
  border:1.35px solid rgba(181,138,59,.72)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 90% 90%, rgba(13,81,63,.07), transparent 38%),
    linear-gradient(135deg,#fffdf8 0%,#fbf4e8 100%)!important;
  box-shadow:0 11px 26px rgba(71,55,31,.075)!important;
}

#view-home .home-islamic-calendar::before{
  inset:5px!important;
  border:1px solid rgba(181,138,59,.24)!important;
  border-radius:19px!important;
}

#view-home .home-islamic-calendar::after{
  content:'';
  position:absolute;
  pointer-events:none;
  right:-34px;
  bottom:-36px;
  width:185px;
  height:185px;
  opacity:.18;
  background:
    radial-gradient(circle at 50% 58%,var(--sm26-forest) 0 6%,transparent 6.5%),
    radial-gradient(ellipse at 50% 82%,var(--sm26-forest) 0 33%,transparent 33.5%);
  border-radius:50%;
}

#view-home .home-calendar-body{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:minmax(104px,31%) minmax(0,1fr)!important;
  gap:17px!important;
  align-items:stretch!important;
}

#view-home .home-calendar-date{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0;
  padding:4px 12px 4px 2px!important;
  border-right:1px solid rgba(181,138,59,.72)!important;
  color:var(--sm26-forest)!important;
  text-align:center;
}

#view-home .home-calendar-emblem{
  position:relative;
  width:48px!important;
  height:28px!important;
  margin:0 0 5px!important;
  color:var(--sm26-gold)!important;
}
#view-home .home-calendar-emblem::before{
  content:'☾';
  position:absolute;
  left:2px;
  top:-11px;
  font:400 2.6rem/1 Georgia,serif;
}
#view-home .home-calendar-emblem span{
  position:absolute;
  right:4px;
  top:1px;
  font-size:.78rem;
}
#view-home .home-calendar-date h2{
  margin:0 0 7px!important;
  color:var(--sm26-forest)!important;
  font:700 .62rem/1.1 Georgia,serif!important;
  letter-spacing:.07em!important;
  text-transform:uppercase;
}
#view-home .home-calendar-rule{display:none!important;}
#view-home #home-calendar-weekday{
  margin:1px 0 4px!important;
  color:var(--sm26-forest)!important;
  font:700 .72rem/1 Georgia,serif!important;
  letter-spacing:.28em!important;
  text-transform:uppercase;
}
#view-home #home-calendar-day{
  color:var(--sm26-forest-deep)!important;
  font:500 clamp(4.7rem,20vw,6.25rem)/.82 Georgia,'Times New Roman',serif!important;
  letter-spacing:-.08em!important;
}
#view-home #home-calendar-month{
  margin-top:7px!important;
  color:var(--sm26-forest)!important;
  font:700 .77rem/1.05 Georgia,serif!important;
  letter-spacing:.23em!important;
  text-transform:uppercase;
}
#view-home #home-calendar-year{
  margin:7px 0 8px!important;
  padding:8px 13px 0;
  border-top:1px solid rgba(181,138,59,.6);
  color:#9a722f!important;
  font:600 .72rem/1 Georgia,serif!important;
  letter-spacing:.28em!important;
  font-style:normal!important;
}
#view-home #home-calendar-hijri{
  color:var(--sm26-ink)!important;
  font:600 .56rem/1.2 Georgia,serif!important;
  white-space:nowrap;
}

#view-home .home-calendar-message{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0;
  padding:10px 6px 10px 2px!important;
  text-align:left!important;
}
#view-home .home-calendar-message-rule{display:none!important;}
#view-home .home-calendar-greeting{
  margin:0 0 8px!important;
  color:var(--sm26-forest-deep)!important;
  font:700 clamp(1.18rem,5.4vw,1.55rem)/1.05 Georgia,serif!important;
}
#view-home #home-calendar-phrase{
  margin:0!important;
  color:var(--sm26-ink)!important;
  font:500 clamp(.84rem,3.6vw,1rem)/1.28 Georgia,serif!important;
}
#view-home #home-calendar-source-box{display:none!important;}

/* PRIMARY: SCHOOL + COMMUNITY */
.sm-home-primary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.sm-home-feature{
  position:relative;
  min-height:255px;
  padding:19px 16px 15px;
  overflow:hidden;
  border-radius:24px;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.sm-home-feature:active{transform:scale(.985)}
.sm-home-feature--school{
  border:1px solid #947331;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(145deg,#0d5a45,#08402f);
  color:#fffdf7;
  box-shadow:0 12px 26px rgba(8,60,48,.16);
}
.sm-home-feature--school::before,
.sm-home-feature--school::after{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:6px;
  border:1px solid rgba(217,189,122,.72);
  border-radius:18px;
}
.sm-home-feature--school::after{
  inset:10px;
  border-color:rgba(217,189,122,.28);
}
.sm-home-feature--community{
  border:1px solid rgba(181,138,59,.66);
  background:
    radial-gradient(circle at 100% 15%,rgba(13,81,63,.08),transparent 34%),
    linear-gradient(145deg,#fffdf8,#f8f1e5);
  color:var(--sm26-ink);
  box-shadow:0 10px 24px rgba(71,55,31,.07);
}
.sm-home-feature-icon{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:13px;
  border:1px solid rgba(217,189,122,.82);
  border-radius:50%;
}
.sm-home-feature--school .sm-home-feature-icon{color:#f4d898}
.sm-home-feature--community .sm-home-feature-icon{color:var(--sm26-forest)}
.sm-home-feature-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sm-home-feature h2{
  position:relative;
  z-index:2;
  margin:0 0 7px;
  font:700 clamp(1.55rem,7vw,2rem)/.95 Georgia,serif;
  letter-spacing:-.035em;
}
.sm-home-feature p{
  position:relative;
  z-index:2;
  margin:0;
  max-width:15ch;
  font:500 .82rem/1.28 Georgia,serif;
}
.sm-home-feature-meta{
  position:absolute;
  z-index:2;
  left:16px;
  right:15px;
  bottom:15px;
  padding-top:10px;
  border-top:1px solid currentColor;
  opacity:.86;
  font:700 .52rem/1 var(--sm-sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.sm-home-feature-arrow{
  position:absolute;
  z-index:3;
  right:14px;
  top:50%;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#ead59d;
  color:var(--sm26-forest-deep);
  font:700 1.25rem/1 var(--sm-sans);
}

/* INSPIRATION */
.sm-home-inspiration{
  position:relative;
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:136px;
  padding:16px 17px;
  overflow:hidden;
  border:1px solid rgba(181,138,59,.68);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(255,253,248,.98),rgba(248,241,229,.94));
  box-shadow:0 9px 22px rgba(71,55,31,.06);
}
.sm-home-inspiration[hidden]{display:none!important}
.sm-home-inspiration::before{
  content:'';
  position:absolute;
  inset:5px;
  border:1px solid rgba(181,138,59,.2);
  border-radius:17px;
  pointer-events:none;
}
.sm-home-inspiration-art{
  position:relative;
  z-index:1;
  width:82px;
  height:82px;
  object-fit:contain;
  filter:drop-shadow(0 4px 3px rgba(65,49,27,.12));
}
.sm-home-inspiration-copy{
  position:relative;
  z-index:1;
  min-width:0;
  text-align:center;
}
.sm-home-inspiration-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:8px;
  color:#7c6b4b;
  font:700 .5rem/1 var(--sm-sans);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.sm-home-inspiration-arabic{
  margin:0 0 5px;
  color:var(--sm26-forest);
  font-family:Amiri,'Noto Naskh Arabic',serif;
  font-size:1.56rem;
  line-height:1.45;
}
.sm-home-inspiration-text{
  margin:0;
  color:var(--sm26-ink);
  font:500 .75rem/1.3 Georgia,serif;
}
.sm-home-inspiration-source{
  display:block;
  margin-top:5px;
  color:#9a722f;
  font:700 .58rem/1 var(--sm-sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* TOOLS */
.sm-home-tools{margin:0}
.sm-home-tools-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 2px 9px;
}
.sm-home-tools-head h3{
  margin:0;
  color:#6c624f;
  font:700 .66rem/1 var(--sm-sans);
  letter-spacing:.24em;
  text-transform:uppercase;
}
.sm-home-tools-head span{
  color:var(--sm26-muted);
  font:500 .68rem/1 var(--sm-sans);
}
.sm-home-tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.sm-home-tool{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 12px;
  gap:8px;
  align-items:center;
  min-width:0;
  min-height:78px;
  padding:10px 9px;
  border:1px solid rgba(222,210,191,.9);
  border-radius:17px;
  background:rgba(255,253,248,.92);
  color:var(--sm26-ink);
  text-align:left;
  box-shadow:0 7px 17px rgba(71,55,31,.055);
}
.sm-home-tool-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#f4eedf;
  color:var(--sm26-forest);
}
.sm-home-tool-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sm-home-tool-copy{min-width:0}
.sm-home-tool strong{
  display:block;
  overflow:hidden;
  color:var(--sm26-forest-deep);
  font:700 .78rem/1.08 Georgia,serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sm-home-tool small{
  display:block;
  margin-top:3px;
  color:var(--sm26-muted);
  font:500 .53rem/1.15 var(--sm-sans);
}
.sm-home-tool-chevron{color:#596660;font-size:1rem}

/* legacy home blocks remain available below the redesigned priority surface */
#view-home .home-shortcuts{display:none!important}
#view-home .home-continue-section{display:none!important}
#view-home .home-location-setup-card,
#view-home #home-location-panel,
#view-home #home-next-prayer-container,
#view-home #home-mosque-feed{
  margin-top:0!important;
}

/* EXPLORE HUB */
.sm-explore-shell{
  padding:10px 0 20px;
}
.sm-explore-header{
  margin:0 0 20px;
}
.sm-explore-kicker{
  display:block;
  margin-bottom:6px;
  color:#9a722f;
  font:700 .59rem/1 var(--sm-sans);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.sm-explore-header h1{
  margin:0;
  color:var(--sm26-forest-deep);
  font:700 2.05rem/.95 Georgia,serif;
}
.sm-explore-header p{
  margin:8px 0 0;
  color:var(--sm26-muted);
  font:.82rem/1.35 var(--sm-sans);
}
.sm-explore-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}
.sm-explore-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:92px;
  padding:14px;
  border:1px solid var(--sm26-line);
  border-radius:19px;
  background:var(--sm26-paper);
  color:var(--sm26-ink);
  text-align:left;
  box-shadow:0 7px 18px rgba(71,55,31,.055);
}
.sm-explore-card-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#f3ecdf;
  color:var(--sm26-forest);
}
.sm-explore-card-icon svg{
  width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.sm-explore-card strong{display:block;color:var(--sm26-forest-deep);font:700 .95rem/1.05 Georgia,serif}
.sm-explore-card small{display:block;margin-top:4px;color:var(--sm26-muted);font:.62rem/1.2 var(--sm-sans)}

/* PREMIUM BOTTOM TAB — Home / School / Community / Routine / Explore */
#view-tabs.bottom-nav--smart-premium{
  position:fixed!important;
  z-index:1400!important;
  left:50%!important;
  right:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  width:min(calc(100% - 18px),430px)!important;
  height:78px!important;
  margin:0!important;
  padding:6px 4px 5px!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
  border:1px solid rgba(222,210,191,.94)!important;
  border-radius:27px!important;
  background:rgba(255,253,248,.965)!important;
  box-shadow:0 9px 26px rgba(38,51,45,.12)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#view-tabs.bottom-nav--smart-premium .bottom-nav-item{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  width:100%!important;
  min-width:0!important;
  height:66px!important;
  padding:5px 2px!important;
  border:0!important;
  border-radius:21px!important;
  background:transparent!important;
  color:#858987!important;
  box-shadow:none!important;
  transform:none!important;
}

#view-tabs.bottom-nav--smart-premium .bottom-nav-item::before{
  content:'';
  position:absolute;
  inset:2px 4px;
  z-index:-1;
  border-radius:20px;
  background:transparent;
}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active::before,
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.active::before{
  background:var(--sm26-mint);
}

#view-tabs.bottom-nav--smart-premium .home-nav-icon{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#view-tabs.bottom-nav--smart-premium .home-nav-icon svg{
  display:block!important;
  width:27px!important;
  height:27px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item[data-nav-key="home"].is-active .home-nav-icon svg,
#view-tabs.bottom-nav--smart-premium .bottom-nav-item[data-nav-key="home"].active .home-nav-icon svg{
  fill:var(--sm26-forest)!important;
  stroke:var(--sm26-forest)!important;
}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active,
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.active{color:var(--sm26-forest)!important}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item > span:last-child{
  color:inherit!important;
  font:650 .64rem/1 var(--sm-sans)!important;
  white-space:nowrap;
}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active > span:last-child,
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.active > span:last-child{font-weight:800!important}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item::after{
  content:'';
  width:4px;
  height:4px;
  margin-top:2px;
  border-radius:50%;
  background:transparent;
}
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active::after,
#view-tabs.bottom-nav--smart-premium .bottom-nav-item.active::after{background:var(--sm26-forest)!important}

.app-container{padding-bottom:112px!important}

/* DARK MODE remains coherent without changing the existing internal screen palette */
body.sm-dark-v2 #view-home .home-islamic-calendar,
body.sm-dark-v2 .sm-home-feature--community,
body.sm-dark-v2 .sm-home-inspiration,
body.sm-dark-v2 .sm-home-tool,
body.sm-dark-v2 .sm-explore-card{
  background:#0d2018!important;
  border-color:#394840!important;
  color:#f2eddf!important;
}
body.sm-dark-v2 #view-home .home-calendar-date{border-color:#5a6d63!important}
body.sm-dark-v2 #view-home .home-calendar-date h2,
body.sm-dark-v2 #view-home #home-calendar-weekday,
body.sm-dark-v2 #view-home #home-calendar-month,
body.sm-dark-v2 #view-home .home-calendar-greeting,
body.sm-dark-v2 #view-home #home-calendar-phrase,
body.sm-dark-v2 .sm-home-feature--community h2,
body.sm-dark-v2 .sm-home-feature--community p,
body.sm-dark-v2 .sm-home-inspiration-arabic,
body.sm-dark-v2 .sm-home-inspiration-text,
body.sm-dark-v2 .sm-home-tool strong,
body.sm-dark-v2 .sm-explore-card strong{color:#f2eddf!important}
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium{
  background:rgba(13,32,24,.97)!important;
  border-color:#394840!important;
}
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium .bottom-nav-item{color:#a7b2ac!important}
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium .bottom-nav-item.active,
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active{color:#82c7ad!important}
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium .bottom-nav-item.active::before,
body.sm-dark-v2 #view-tabs.bottom-nav--smart-premium .bottom-nav-item.is-active::before{background:rgba(121,183,149,.13)!important}

/* compact phones */
@media(max-width:400px){
  body:has(#view-home[style*="display: block"]) .home-header-brand{
    grid-template-columns:54px minmax(0,1fr);
    column-gap:10px;
    width:calc(100% - 105px);
  }
  body:has(#view-home[style*="display: block"]) .home-header-logo-mark{width:54px!important;height:54px!important;border-radius:14px}
  body:has(#view-home[style*="display: block"]) .app-container > .home-main-header .home-header-brand > h1{font-size:1.62rem!important}
  body:has(#view-home[style*="display: block"]) .app-container > .home-main-header .home-header-brand > .brand-desc{font-size:.44rem!important;letter-spacing:.21em!important}
  body:has(#view-home[style*="display: block"]) .home-header-icon-button{width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important;padding:8px!important}
  #view-home .home-islamic-calendar{padding:11px!important}
  #view-home .home-calendar-body{grid-template-columns:minmax(93px,31%) minmax(0,1fr)!important;gap:12px!important}
  #view-home #home-calendar-day{font-size:4.55rem!important}
  .sm-home-primary-grid{gap:9px}
  .sm-home-feature{min-height:238px;padding:16px 13px 13px}
  .sm-home-feature p{font-size:.74rem}
  .sm-home-feature-meta{left:13px;right:12px;font-size:.44rem;letter-spacing:.08em}
  .sm-home-feature-arrow{right:11px;width:34px;height:34px}
  .sm-home-inspiration{grid-template-columns:70px minmax(0,1fr);gap:8px;padding:13px}
  .sm-home-inspiration-art{width:68px;height:68px}
  .sm-home-tools-grid{gap:7px}
  .sm-home-tool{grid-template-columns:37px minmax(0,1fr) 9px;gap:6px;padding:8px 6px}
  .sm-home-tool-icon{width:37px;height:37px}
  .sm-home-tool strong{font-size:.7rem}
  .sm-home-tool small{font-size:.47rem}
  #view-tabs.bottom-nav--smart-premium{width:calc(100% - 14px)!important;height:74px!important;border-radius:25px!important}
  #view-tabs.bottom-nav--smart-premium .bottom-nav-item{height:62px!important}
  #view-tabs.bottom-nav--smart-premium .home-nav-icon{width:28px!important;height:28px!important}
  #view-tabs.bottom-nav--smart-premium .home-nav-icon svg{width:25px!important;height:25px!important}
  #view-tabs.bottom-nav--smart-premium .bottom-nav-item > span:last-child{font-size:.58rem!important}
}

/* desktop/tablet keeps the mobile composition centered rather than stretching it */
@media(min-width:700px){
  #view-home .home-islamic-calendar,
  #view-home .sm-home-primary-grid,
  #view-home .sm-home-inspiration,
  #view-home .sm-home-tools{max-width:660px;margin-left:auto!important;margin-right:auto!important}
  .sm-explore-shell{max-width:720px;margin:0 auto}
}

/* Redesign ordering overrides the legacy home priority order. */
#view-home[style*="display: block"] .sm-home-primary-grid{order:-9!important}
#view-home[style*="display: block"] .sm-home-inspiration{order:-8!important}
#view-home[style*="display: block"] .sm-home-tools{order:-7!important}
#view-home[style*="display: block"] #home-location-panel{order:0!important}
#view-home[style*="display: block"] .home-prayer-priority{order:1!important}
#view-home[style*="display: block"] .home-mosque-feed{order:2!important}
#view-home[style*="display: block"] #home-daily-times-container{order:3!important}
#view-home[style*="display: block"] #home-notifications-container{order:4!important}
#view-home[style*="display: block"] #home-settings-container{order:5!important}

/* iPhone/Safari visual correction V1 — based on physical screenshot 2026-09-19. */
body:has(#view-home[style*="display: block"]) .app-container{
  padding-top:calc(10px + env(safe-area-inset-top,0px))!important;
  gap:10px!important;
}
body:has(#view-home[style*="display: block"]) .app-container > .home-main-header{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:92px!important;
  min-height:92px!important;
  max-height:92px!important;
  margin:0 0 8px!important;
  padding:0 4px!important;
}
body:has(#view-home[style*="display: block"]) .home-header-brand{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  width:calc(100% - 104px)!important;
  height:68px!important;
  min-height:68px!important;
  margin:0!important;
  padding:0!important;
}
body:has(#view-home[style*="display: block"]) .home-header-logo-mark{
  margin:0!important;
}
body:has(#view-home[style*="display: block"]) #view-home{
  margin:0!important;
  padding-top:0!important;
}
body:has(#view-home[style*="display: block"]) .home-header-notification{order:1!important}
body:has(#view-home[style*="display: block"]) .home-header-icon-button[data-global-destination="profile"]{order:2!important}

/* The approved reference has no extra "Calendario islamico" line inside the date column. */
#view-home .home-calendar-date h2{display:none!important}
#view-home .home-calendar-emblem{margin-bottom:9px!important}

/* Remove the temporary geometric blob seen in the physical screenshot. */
#view-home .home-islamic-calendar::after{display:none!important}

/* Defeat the old icon-mask rule: the new nav uses real inline SVGs. */
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item .home-nav-icon{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  background:transparent!important;
  background-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  opacity:1!important;
}
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item .home-nav-icon svg{
  display:block!important;
  width:27px!important;
  height:27px!important;
  color:inherit!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item.is-active .home-nav-icon,
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item.active .home-nav-icon{
  background:transparent!important;
  background-color:transparent!important;
}
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item[data-nav-key="home"].is-active .home-nav-icon svg,
#view-tabs.bottom-nav.bottom-nav--smart-premium[class] .bottom-nav-item[data-nav-key="home"].active .home-nav-icon svg{
  fill:var(--sm26-forest)!important;
  stroke:var(--sm26-forest)!important;
}