/*!
 * Nabd — internet speed test (speed.doniaweb.com)
 * Copyright (c) 2026 Mahmoud Ali — doniaweb.com. All rights reserved.
 * Created: 2026-10-13
 */
/* Phone navigation (Admin → Templates): "top" keeps the links in the header; the others move them to a bar at the bottom. */
.bnav { display: none; }
.bnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bnav a { color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
html:not([data-mnav="center"]) .bnav .bn-acct { display: none !important; }

@media (max-width: 700px) {
  html:not([data-mnav="top"]) .topbar .nav { display: none !important; }
  html:not([data-mnav="top"]) .bnav { display: flex; position: fixed; z-index: 40; }
  html:not([data-mnav="top"]) body { padding-bottom: 96px; }
  html:not([data-mnav="top"]) .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* A: floating card, icon + name */
  html[data-mnav="float"] .bnav { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 4px; padding: 6px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
  html[data-mnav="float"] .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 16px; font-size: .74rem; }
  html[data-mnav="float"] .bnav a.active { color: var(--text); background: var(--track); font-weight: 600; }
  html[data-mnav="float"] .bnav a.active svg { color: var(--c1); }

  /* B: full-width bar */
  html[data-mnav="bar"] .bnav { left: 0; right: 0; bottom: 0; background: var(--card-solid); border-top: 1px solid var(--line); padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); }
  html[data-mnav="bar"] .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: .74rem; position: relative; }
  html[data-mnav="bar"] .bnav a.active { color: var(--c1); font-weight: 600; }
  html[data-mnav="bar"] .bnav a.active::before { content: ''; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
  html[data-mnav="bar"] body { padding-bottom: 84px; }

  /* C: capsule, only the current page shows its name */
  html[data-mnav="pill"] .bnav { left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); align-items: center; gap: 6px; padding: 7px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
  html[data-mnav="pill"] .bnav a { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 99px; }
  html[data-mnav="pill"] .bnav a span { display: none; }
  html[data-mnav="pill"] .bnav a.active { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); padding: 11px 18px; }
  html[data-mnav="pill"] .bnav a.active span { display: inline; font-size: .86rem; font-weight: 600; white-space: nowrap; }

  /* D: the test as a raised button in the middle, account added */
  html[data-mnav="center"] .bnav { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); align-items: flex-end; padding: 6px 6px 8px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
  html[data-mnav="center"] .bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: .72rem; }
  html[data-mnav="center"] .bnav .bn-acct { display: flex; order: 5; }
  html[data-mnav="center"] .bnav .bn-stats { order: 1; }
  html[data-mnav="center"] .bnav .bn-hist { order: 2; }
  html[data-mnav="center"] .bnav .bn-test { order: 3; }
  html[data-mnav="center"] .bnav .bn-status { order: 4; }
  html[data-mnav="center"] .bnav a.active { color: var(--c1); font-weight: 600; }
  html[data-mnav="center"] .bnav .bn-test { color: var(--text); font-weight: 600; margin-top: -30px; }
  html[data-mnav="center"] .bnav .bn-test svg { width: 30px; height: 30px; padding: 14px; box-sizing: content-box; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--c1) 40%, transparent); border: 4px solid var(--card-solid); }
  html[data-mnav="center"] body { padding-bottom: 110px; }

  /* Above a sticky bottom ad, not under it. */
  html:not([data-mnav="top"]) body.has-ad-sticky .bnav { bottom: 140px; }
  html:not([data-mnav="top"]) body.has-ad-sticky { padding-bottom: 230px; }
}