/* Shared modal and mobile bottom-navigation styles. */

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(8,28,54,.42);
  display:grid;
  place-items:end center;
  padding:20px
}

.modal {
  width:min(620px,100%);
  background:var(--paper);
  border-radius:28px;
  padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.18)
}

.age-options {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}

.age-options button {
  border:1px solid var(--line);
  background:white;
  min-height:48px;
  border-radius:16px;
  cursor:pointer
}

.bottom-nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  background:rgba(248,242,233,.95);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  display:none
}

.bottom-nav-inner {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:520px;
  margin:auto
}

.bottom-nav a {
  text-decoration:none;
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  opacity:.55;
  padding:7px;
  border-radius:12px
}

.bottom-nav a.active {
  opacity:1
}


.bottom-nav a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px}
.mobile-nav-icon {display:block;width:34px;height:30px;object-fit:contain;object-position:center;background:transparent;image-rendering:auto}
.bottom-nav a span {display:block;line-height:1.1}