/* App-følelse på mobil. Felles for nettsidene (style.css) og kundeportalen (egne variabler),
   derfor brukes fallback mellom variabelnavnene (--hero-bg / --nav osv.). */

html { -webkit-tap-highlight-color: transparent; }
body { -webkit-text-size-adjust: 100%; }
a, button, label, summary, .tab { touch-action: manipulation; }

.tabbar, .nav-call { display: none; }

@media (max-width: 760px) {
  /* Plass til navigasjonslinjen nederst (og iPhone-hjemlinjen). */
  body.has-tabbar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--hero-bg, var(--nav));
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
    padding: 4px 0; min-height: 52px;
    color: var(--hero-muted, var(--nav-muted)); text-decoration: none; font-size: 11px; font-weight: 600;
    -webkit-user-select: none; user-select: none;
  }
  .tab svg { width: 23px; height: 23px; }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab:active svg { transform: scale(.9); }
  .tab-main { color: var(--hero-text, var(--nav-text)); }
  .tab-main svg {
    width: 26px; height: 26px; padding: 11px; box-sizing: content-box; margin-top: -26px;
    background: var(--accent); color: #042420; border-radius: 50%;
    border: 4px solid var(--hero-bg, var(--nav)); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  }

  /* Navigasjonslinjen erstatter hamburgermenyen. */
  .menu-toggle, .menu { display: none !important; }

  .nav-call {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px;
    background: var(--accent); color: #042420;
  }
  .nav-call svg { width: 16px; height: 16px; }

  /* Unngå at iPhone zoomer inn når man trykker i et skjemafelt. */
  input, select, textarea { font-size: 16px !important; }
}

/* Installert app: plass til statuslinjen øverst på iPhone. */
.standalone .nav { padding-top: env(safe-area-inset-top); }
.standalone body { overscroll-behavior-y: none; }

/* Forslag om å installere appen */
.install {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 14px; border-radius: 16px;
  background: var(--card, var(--panel)); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  animation: install-in .3s ease-out;
}
.install img { border-radius: 12px; }
.install b { display: block; font-size: 15px; }
.install span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.install-actions { display: flex; align-items: center; gap: 4px; }
.install .btn { padding: 8px 14px; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; }
.install-close { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; padding: 4px 8px; cursor: pointer; }
@keyframes install-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .install { animation: none; } }