/* VouchBee mobile app shell — phones and tablets (< 992 px). Desktop is untouched. */
:root {
  --vb-bg: #000033;
  --vb-surface: rgba(15, 2, 50, 0.92);
  --vb-line: rgba(255, 255, 255, 0.08);
  --vb-text: #ffffff;
  --vb-muted: rgba(255, 255, 255, 0.6);
  --vb-accent: #cf15f8;
  --vb-accent-2: #5c27fe;
  --vb-bar-h: 64px;
  --vb-top-h: 56px;
}
.vb-appbar, .vb-tabbar, .vb-drawer, .vb-scrim { display: none; }

@media (max-width: 991.98px) {
  /* hide the desktop header; the app bar replaces it */
  header.header { display: none !important; }
  body { padding-top: var(--vb-top-h); padding-bottom: calc(var(--vb-bar-h) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
  .scroll-to-top, .scrollToTop { bottom: calc(var(--vb-bar-h) + 16px) !important; }

  /* top app bar */
  .vb-appbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: var(--vb-top-h);
    padding: 0 12px 0 16px; padding-top: env(safe-area-inset-top);
    background: var(--vb-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--vb-line);
  }
  .vb-appbar__logo img { height: 30px; width: auto; display: block; }
  .vb-appbar__title { color: var(--vb-text); font-weight: 600; font-size: 17px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vb-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
    background: transparent; border: 0; color: var(--vb-text); font-size: 24px; cursor: pointer;
  }
  .vb-iconbtn:focus-visible, .vb-tab:focus-visible, .vb-drawer a:focus-visible { outline: 2px solid var(--vb-accent); outline-offset: 2px; }

  /* bottom tab bar */
  .vb-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    height: calc(var(--vb-bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--vb-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--vb-line);
  }
  .vb-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--vb-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-decoration: none;
    background: transparent; border: 0; cursor: pointer; position: relative;
  }
  .vb-tab i { font-size: 24px; line-height: 1; }
  .vb-tab:hover { color: var(--vb-text); text-decoration: none; }
  .vb-tab.is-active { color: var(--vb-text); }
  .vb-tab.is-active i {
    background: linear-gradient(135deg, var(--vb-accent), var(--vb-accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .vb-tab.is-active::before {
    content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--vb-accent), var(--vb-accent-2));
  }

  /* drawer */
  .vb-scrim { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 20, .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .vb-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1060;
    width: min(84vw, 320px); background: #0f0232; border-right: 1px solid var(--vb-line);
    transform: translateX(-100%); transition: transform .25s ease; padding-top: env(safe-area-inset-top);
    overflow-y: auto;
  }
  body.vb-drawer-open .vb-drawer { transform: none; }
  body.vb-drawer-open .vb-scrim { opacity: 1; pointer-events: auto; }
  body.vb-drawer-open { overflow: hidden; }
  .vb-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--vb-line); }
  .vb-drawer__head img { height: 32px; }
  .vb-drawer nav { padding: 8px; }
  .vb-drawer a, .vb-drawer .vb-soon {
    display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px;
    color: var(--vb-text); font-size: 15px; text-decoration: none;
  }
  .vb-drawer a i, .vb-drawer .vb-soon i { font-size: 22px; width: 24px; text-align: center; color: var(--vb-muted); }
  .vb-drawer a:hover { background: rgba(255,255,255,.05); text-decoration: none; color: var(--vb-text); }
  .vb-drawer a.is-active { background: linear-gradient(135deg, rgba(207,21,248,.18), rgba(92,39,254,.18)); }
  .vb-drawer a.is-active i { color: var(--vb-accent); }
  .vb-drawer .vb-soon { color: var(--vb-muted); cursor: default; }
  .vb-drawer .vb-soon small { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--vb-line); text-transform: uppercase; letter-spacing: .06em; }
  .vb-drawer__label { padding: 14px 14px 6px; color: var(--vb-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
  .vb-drawer__foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--vb-line); color: var(--vb-muted); font-size: 12px; }

  /* app-like content spacing */
  .inner-hero, .hero { padding-top: 40px !important; }
  .cmn-btn { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
  .vb-drawer, .vb-scrim { transition: none; }
}