@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700;800&display=swap');

:root{
  color-scheme: light;

  /* Brand footer colors */
  --footer-green: #556B2F;
  --active-lime: #B6FF00;

  /* Footer sizing */
  --tabbar-h: 64px;

  --bg: #ffffff;
}

*{ box-sizing: border-box; }

/* ✅ 1. The Silver Bullet: Force the body to physically fill the screen */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: -webkit-fill-available; /* Apple's secret fix */
  
  /* 🔥 Paint the "wings" on desktop dark */
  background: #0B0C0D !important; 
  
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  font-family: "Parkinsans", sans-serif;
}

/* ✅ 2. The Shell is now a perfectly centered mobile column */
.shell {
  width: 100%;
  max-width: 430px; /* 🔥 Lock everything to mobile width! */
  margin: 0 auto;   /* 🔥 This perfectly centers it safely on desktop! */
  
  height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  position: relative; 
  
  /* 🔥 Add a nice shadow so it pops off the dark background */
  box-shadow: 0 0 50px rgba(0,0,0,0.6); 
}

/* ✅ 3. Frame takes all remaining space, naturally pushing the footer to the floor */
.frame {
  flex: 1; /* This acts like a giant spring, pushing the footer down */
  width: 100%;
  border: 0;
  background: var(--bg);
  transition: none;
}

/* ✅ 4. The Footer sits at the bottom, naturally (More Transparent) */
.tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 5px) 10px;
  
  /* The Lighter Glass Effect */
  background: rgba(28, 28, 30, 0.45); /* Dropped from 0.75 to let more color through */
  backdrop-filter: blur(10px); /* Reduced from 24px so the shapes behind are more visible */
  -webkit-backdrop-filter: blur(10px); 
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Boosted the top border slightly so the edge doesn't get lost */
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 40;
}

/* ✅ 5. The Tab Button: Strip out default iOS link colors */
.tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  
  /* Kill the default Safari link blue */
  text-decoration: none !important; 
  color: rgba(255, 255, 255, 0.88) !important; 
}

/* ✅ 6. The Icons: Scaled up to native size and forced to white */
.tab i {
  font-size: 26px !important; /* Bumped up from 22px for a native feel */
  color: rgba(255, 255, 255, 0.88) !important; /* Forces white */
  transition: color 0.2s ease, transform 0.1s ease; /* Smooth color change */
}

/* ✅ 7. The Active State: Your signature lime green */
.tab.active i {
  color: var(--active-lime) !important;
}

/* ✅ icons-only (no words) */
.tab span{
  display: none;
}

.tab.active{
  opacity: 1;
}
.tab.active i{
  color: var(--active-lime);
}

/* Hide footer on index/login/location/signup */
.shell.footer-off .tabbar{
  display: none;
}

@media (prefers-reduced-motion: reduce){
  .frame{ transition: none !important; }
}


/* ===== Dark Mode (Shell) ===== */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0B0C0D;
}

:root[data-theme="dark"] .shell,
:root[data-theme="dark"] .frame{
  background: var(--bg);
}


/* ===== Global Font: Parkinsans ===== */
html, body{
  font-family: 'Parkinsans', sans-serif;
}
button, input, textarea, select, h1,h2,h3,h4,h5,h6, p, span, div, li, a, small, label{
  font-family: 'Parkinsans', sans-serif;
}


/* Parkinsans for form controls */
input, textarea, select, button{ font-family: "Parkinsans", sans-serif; }

/* ===== ScoutEat: Parkinsans text (do NOT override icon fonts) ===== */
html, body {
  font-family: "Parkinsans", sans-serif !important;
}

/* Apply Parkinsans broadly, but exclude Font Awesome icon elements/classes */
body *:not(.fa):not([class*="fa-"]) {
  font-family: "Parkinsans", sans-serif !important;
}

/* Lightweight smoothness for text scaling */
html, body,
button, input, textarea, select,
p, span, a, label, li, small, strong,
h1, h2, h3, h4, h5, h6 {
  transition: font-size 120ms ease, line-height 120ms ease;
}

/* Settings sheet: allow rows to grow nicely with larger text */
.se-settings-row {
  align-items: flex-start;
}
.se-settings-row > div {
  min-width: 0;
}
.se-settings-row h4 {
  line-height: 1.25;
}
.se-settings-row p {
  line-height: 1.35;
}

/* 1. The pulsing gray background container */
.img-skeleton-wrapper {
  background-color: rgba(0, 0, 0, 0.05); /* Light gray */
  animation: pulse-skeleton 1.5s infinite;
  overflow: hidden;
  position: relative;
  /* Make sure this wrapper matches your image's border-radius! */
  border-radius: inherit; 
}

/* Dark mode support for the skeleton */
:root[data-theme="dark"] .img-skeleton-wrapper {
  background-color: rgba(255, 255, 255, 0.05);
}

@keyframes pulse-skeleton {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* 2. The image fade-in effect */
.se-lazy-img {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

/* Added by JavaScript when the image finishes downloading */
.se-lazy-img.loaded {
  opacity: 1;
}

/* 1. The Sheet: Stops the white box from growing off the screen */
.se-settings-sheet {
  display: flex !important;
  flex-direction: column !important;
  max-height: 85vh !important; 
  overflow: hidden !important; 
}

/* 2. The Header: Locks the title and 'X' button to the top */
.se-settings-header {
  flex-shrink: 0 !important;
}

/* 3. The Content: The ONLY part of the menu allowed to scroll */
.se-settings-content {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 60px !important;
}