/* MellowKids — non-transparent mobile bottom menu / WebKit Safari iOS.
   Fully opaque paint is in a real DOM layer so content behind cannot bleed through.
   Uses opaque RGB gradient stops; no opacity, translucent color-mix or blur.
   File is loaded last, with PHP filemtime cache busting.
*/
@media screen and (max-width: 650px) {
  /* Room for the taller bar so the last content is not hidden under it. */
  body {
    padding-bottom: calc(95px + min(env(safe-area-inset-bottom, 0px), 14px)) !important;
  }

  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] {
    position: fixed !important;
    /* Longhands: `inset` is ignored by iOS < 14.5 / Chrome < 87. */
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* Grow with the iPhone home-bar inset instead of squeezing the buttons:
       a fixed 80px height minus a ~34px inset pushed icons above the bar. */
    height: auto !important;
    min-height: 72px !important;
    padding: 6px 5px 10px !important;
    /* Safari's bottom toolbar can report a large inset, which left a tall
       empty strip under the labels; cap it so the buttons stay low. */
    padding: 6px 5px calc(6px + min(env(safe-area-inset-bottom, 0px), 14px)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
    isolation: isolate !important;
    z-index: 1000 !important;
    border-top: 1px solid #f5bdd3 !important;
    box-shadow: 0 -6px 24px rgba(29, 69, 83, .08) !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > .bottom-nav-surface {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background-color: #ffffff !important;
    background-image: linear-gradient(90deg, #eefafb 0%, #ffffff 48%, #fce9f1 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > a {
    position: relative;
    z-index: 1;
    flex: 0 0 20%;
    height: 58px;
    opacity: 1 !important;
  }
  /* Active tab sits in line with the others: highlight only, no lift. */
  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > a.current:not(.center-action-btn) {
    -webkit-transform: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > a.current:not(.center-action-btn) svg {
    -webkit-transform: none !important;
    transform: none !important;
  }
  /* Keep the large wallet icon lifted as before. */
  html .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > a.center-action-btn .floating-btn {
    z-index: 2;
  }
  html[data-front-theme="dark"] .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] {
    background: #0a121d !important;
    border-top-color: #243449 !important;
  }
  html[data-front-theme="dark"] .bottom-nav[data-menu-fix="ios-opaque-20261012-v2"] > .bottom-nav-surface {
    background: #0a121d !important;
  }
}