/* ForumOnly Mobile Navigation 1.1.6 — ForumOnly blue edition with a lowered dock.
   Inspired by the user's reference: five equal-height actions, no raised center button.
   Scoped to .foMN, runs on XenForo 2.2 & 2.3. No font or external assets. */
.foMN { display: none; }
@media (max-width:800px) {
  body { padding-bottom: calc(101px + env(safe-area-inset-bottom,0px)) !important; }
  .foMN {
    /* ForumOnly brand blue in live site's News bar: #168ccc.
       Muted blue for idle icons; full brand blue for active state. */
    --fo-brand-blue: #168ccc;
    --fo-label: #396e92;
    --fo-icon: #397fa8;
    --fo-ink: #245174;
    --fo-menu-icon: #267bb0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    gap:0;
    position:fixed;
    left:calc(11px + env(safe-area-inset-left,0px));
    right:calc(11px + env(safe-area-inset-right,0px));
    /* 7 px lower than v1.1.5; always respect iPhone safe area */
    bottom:calc(4px + env(safe-area-inset-bottom,0px));
    height:78px;
    padding:7px 6px 6px;
    box-sizing:border-box;
    isolation:isolate;
    overflow:visible;
    z-index:9990;
    border-radius:40px;
    border:1px solid rgba(224,237,255,.77);
    /* True translucent glass. Previous 1.1.4 used ~60–70% opaque paint. */
    background:linear-gradient(108deg,
      rgba(152,178,230,.19) 0%,
      rgba(124,162,225,.14) 35%,
      rgba(149,158,229,.12) 69%,
      rgba(107,152,235,.19) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(136%);
    backdrop-filter:blur(22px) saturate(136%);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.68),
      inset 0 -1px 0 rgba(213,231,255,.13),
      0 7px 24px rgba(10,22,53,.105);
    font-family:inherit;
    color:var(--fo-label);
  }
  .foMN::before {
    content:'';
    position:absolute;
    pointer-events:none;
    inset:1px 10px auto;
    height:29px;
    border-radius:44px 44px 65% 65%;
    background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
    opacity:.74;
  }
  .foMN::after {
    content:'';
    position:absolute;
    pointer-events:none;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 23px rgba(194,216,255,.09);
  }
  .foMN__item,
  .foMN__trigger {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:6px 0 5px;
    border:0;
    box-sizing:border-box;
    background:none;
    text-align:center;
    text-decoration:none !important;
    color:var(--fo-label) !important;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    touch-action:manipulation;
    position:relative;
    z-index:1;
  }
  .foMN__item { min-height:60px; margin:0; position:static; }
  .foMN__icon {
    color:var(--fo-icon);
    width:31px;
    height:31px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex:0 0 31px;
  }
  .foMN__svg {
    display:block;
    width:28px;
    height:28px;
    flex:0 0 auto;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.91;
    overflow:visible;
  }
  /* XenForo/iO/Uniform may apply fill to SVG paths through theme rules.
     Override them to preserve original outline icons (especially Create). */
  .foMN svg.foMN__svg,
  .foMN svg.foMN__svg path,
  .foMN svg.foMN__svg rect,
  .foMN svg.foMN__svg circle,
  .foMN svg.foMN__svg line,
  .foMN svg.foMN__svg polyline,
  .foMN svg.foMN__svg polygon,
  .foMN svg.foMN__svg ellipse {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }
  .foMN__label {
    display:block;
    white-space:nowrap;
    color:inherit;
    font-size:11px;
    font-weight:500;
    line-height:1.15;
    letter-spacing:-.08px;
  }
  /* 'Create' is deliberately the same size and brightness as the other 4 icons. */
  .foMN__create .foMN__icon,
  .foMN__create .foMN__label { color:inherit; }
  .foMN__create .foMN__icon { color:var(--fo-icon); }
  .foMN__item:hover .foMN__icon,
  .foMN__trigger:hover .foMN__icon,
  .foMN__popup[open] .foMN__trigger .foMN__icon { color:var(--fo-brand-blue); }
  .foMN__item:hover,
  .foMN__trigger:hover,
  .foMN__popup[open] .foMN__trigger { color:var(--fo-brand-blue) !important; }
  .foMN__item:focus-visible,
  .foMN__trigger:focus-visible,
  .foMN__sheetLink:focus-visible { outline:2px solid #ffffff; outline-offset:2px; border-radius:11px; }
  .foMN__popup { display:flex; }
  .foMN__trigger { width:100%; min-height:60px; list-style:none; }
  .foMN__trigger::-webkit-details-marker { display:none; }
  .foMN__trigger::marker { content:''; }

  /* Floating menu: same icy lavender-white translucent glass as the mockup. */
  .foMN__sheet {
    display:block;
    position:absolute;
    bottom:calc(100% + 13px);
    left:0;
    right:0;
    max-width:520px;
    width:auto;
    max-height:min(70vh,390px);
    overflow-y:auto;
    margin:auto;
    padding:7px 12px;
    box-sizing:border-box;
    border-radius:27px;
    border:1px solid rgba(248,251,255,.83);
    background:linear-gradient(119deg,
      rgba(213,229,255,.79) 0%,
      rgba(191,216,252,.76) 43%,
      rgba(196,206,242,.74) 73%,
      rgba(223,201,238,.76) 100%);
    -webkit-backdrop-filter:blur(28px) saturate(138%);
    backdrop-filter:blur(28px) saturate(138%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78),
      0 12px 38px rgba(11,24,62,.28);
    color:var(--fo-ink);
    text-align:left;
    z-index:5;
    animation:foMNEnter .16s ease-out both;
  }
  .foMN__sheet::before {
    content:'';
    pointer-events:none;
    position:absolute;
    border-radius:inherit;
    inset:1px;
    background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 45%);
  }
  .foMN__sheetTitle { display:none; } /* The reference popover starts with an action. */
  .foMN__sheetLink {
    display:flex;
    align-items:center;
    gap:19px;
    min-height:56px;
    padding:12px 10px;
    margin:0;
    border-radius:0;
    box-sizing:border-box;
    text-align:left;
    text-decoration:none !important;
    color:var(--fo-ink) !important;
    background:transparent;
    font-size:13px;
    font-weight:500;
    line-height:1.3;
    position:relative;
    z-index:1;
  }
  .foMN__sheetLink + .foMN__sheetLink { border-top:1px solid rgba(255,255,255,.48); }
  .foMN__sheetLink:hover,
  .foMN__sheetLink:focus-visible { background:rgba(255,255,255,.19); border-radius:12px; }
  .foMN__sheetLink .foMN__svg {
    width:24px;
    height:24px;
    flex:0 0 24px;
    stroke-width:1.75;
    opacity:.96;
    color:var(--fo-menu-icon);
  }
  .foMN__hint { display:none; } /* No extra footnote in the screenshot. */
  @keyframes foMNEnter {
    from { opacity:0; transform:translateY(7px); }
    to { opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion:reduce) { .foMN__sheet { animation:none; } }
  /* Designed as the same blue glass on light and dark page themes. */
  html[data-color-scheme="dark"] .foMN,
  html.is-dark .foMN,
  body.is-dark .foMN,
  body[data-color-scheme="dark"] .foMN {
    --fo-label:#d7e2fb;
    --fo-icon:#d7e6ff;
    background:linear-gradient(108deg,
      rgba(107,144,216,.31) 0%,
      rgba(99,140,216,.23) 38%,
      rgba(132,143,221,.22) 68%,
      rgba(107,154,241,.29) 100%);
  }
  html[data-color-scheme="dark"] .foMN__item:hover,
  html[data-color-scheme="dark"] .foMN__trigger:hover,
  html[data-color-scheme="dark"] .foMN__popup[open] .foMN__trigger,
  html.is-dark .foMN__item:hover,
  html.is-dark .foMN__trigger:hover,
  body.is-dark .foMN__item:hover,
  body.is-dark .foMN__trigger:hover { color:#fff !important; }
  html[data-color-scheme="dark"] .foMN__item:hover .foMN__icon,
  html[data-color-scheme="dark"] .foMN__trigger:hover .foMN__icon,
  html.is-dark .foMN__item:hover .foMN__icon,
  body.is-dark .foMN__item:hover .foMN__icon { color:#fff; }
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .foMN { background:rgba(177,199,233,.88); }
    .foMN__sheet { background:rgba(203,219,245,.94); }
  }
}
@media (max-width:360px) {
  .foMN { left:5px; right:5px; padding-left:3px; padding-right:3px; height:76px; }
  .foMN__label { font-size:10.4px; }
  .foMN__svg { width:26px; height:26px; }
  .foMN__sheetLink { font-size:12px; gap:13px; }
}
@media (min-width:801px) { .foMN { display:none !important; } }
@media (prefers-reduced-transparency:reduce) and (max-width:800px) {
  .foMN { background:rgba(180,199,233,.92); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .foMN__sheet { background:rgba(203,219,245,.96); -webkit-backdrop-filter:none; backdrop-filter:none; }
}