/* =========================================================
   layout.css — app shell, screens, headers, bottom nav,
   scroll-areas, slide transitions.
   ========================================================= */

/* ----- App frame ----- */
.app{
  width:100%;
  max-width:500px;
  height:100%;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

/* ----- Screens ----- */
.screen{
  display:none;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:100%;
}
.screen.is-active{ display:flex; }
.screen.enter-forward{ animation: slideInRight var(--dur) var(--ease-out) both; }
.screen.enter-back   { animation: slideInLeft  var(--dur) var(--ease-out) both; }
.screen.enter-fade   { animation: fadeIn       var(--dur) var(--ease-out) both; }

/* ----- Independent scroll areas ----- */
.scroll-area{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ----- Home header ----- */
.home-header{
  position:sticky; top:0; z-index:20;
  background:var(--surface-glass);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px 18px 12px;
  padding-top:calc(14px + var(--safe-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* ----- Generic top bar (Category / Detail / Discover / Favorites / Nearby / Emergency) ----- */
.top-bar{
  position:sticky; top:0; z-index:20;
  background:var(--surface-glass-strong);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  padding-top:calc(12px + var(--safe-top));
  display:flex; align-items:center; gap:10px;
  min-height:54px;
}
.top-bar .title{
  flex:1;
  text-align:center;
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.top-bar .spacer{ width:38px; }

/* ----- Bottom nav ----- */
.bottom-nav{
  position:sticky; bottom:0;
  background:var(--surface-glass-strong);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex; align-items:stretch;
  padding:8px 6px calc(8px + var(--safe-bottom));
  z-index:30;
}
.nav-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px;
  color:var(--muted);
  font-size:10.5px; font-weight:600;
  border-radius:12px;
  transition:color var(--dur-fast);
  min-height:44px;
  position:relative;
}
.nav-item i{ font-size:18px; }
.nav-item:nth-child(2) i{
  font-size: 25px;
  line-height: 22px ;
}
.nav-item:nth-child(3) i{
  font-size: 25px;
  line-height: 22px ;
}
.nav-item:nth-child(4) i{
  font-size: 25px;
  line-height: 22px ;
}


.nav-item.active{ color:var(--orange); }
.nav-item.active i{ transform:translateY(-1px); }
/* .nav-item.active::before{
  content:"";
  position:absolute; top:2px; left:50%;
  transform:translateX(-50%);
  width:18px; height:3px;
  border-radius:2px;
  background:var(--orange);
} */
.nav-item .nav-fav-count{
  position:absolute;
  top:2px; right:calc(50% - 18px);
  background:var(--orange);
  color:#fff;
  font-size:9px; font-weight:800;
  padding:1px 5px;
  border-radius:999px;
  display:none;
  line-height:1;
}
.nav-item .nav-fav-count.visible{ display:inline-block; }

/* ----- Sticky CTA bar (Detail) ----- */
.cta-bar{
  position:sticky; bottom:0;
  background:linear-gradient(180deg, transparent, var(--surface) 30%);
  padding:14px 18px calc(16px + var(--safe-bottom));
  z-index:30;
}

/* ----- Section spacing ----- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:24px 18px 12px;
}
.section-head h2{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0;
  letter-spacing:-.01em;
  color:var(--ink);
}
.section-head .more{
  font-size:12px; color:var(--orange); font-weight:700;
  cursor:pointer;
}
.section-label{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:15px;
  margin:18px 18px 10px;
  letter-spacing:-.005em;
  display:flex; align-items:center; gap:6px;
  color:var(--ink);
}
.section{
  padding:18px 18px 0;
}
.section h3{
  font-family:'Outfit', sans-serif;
  font-weight:700;
  font-size:17px;
  margin:0 0 8px;
  letter-spacing:-.005em;
  color:var(--ink);
}
.section p{
  font-size:13.5px;
  color:var(--ink-2);
  margin:0;
  line-height:1.55;
}

/* ----- Page tonal backgrounds ----- */
.page-cream{ background:var(--cream); }
.page-white{ background:var(--bg); }