/* Digimax — refinements mobile-first para PWA standalone.
 * Inclui:
 *   - Safe-area iOS (notch, gesture bar)
 *   - Bottom-nav fixa (só mobile)
 *   - Suporte a touch (44x44 min, no-callout, no-zoom no input focus)
 *   - Map fullscreen viewport
 *   - Bottom-sheet sliding card
 */

/* Variáveis de safe-area para iPhone notch/gesture */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --bn-h: 64px;   /* altura bottom-nav */
  --brand-blue: #0078ff;
  --brand-blue-dark: #0055cc;
  --brand-blue-deep: #0a1f4d;
}

/* iOS PWA standalone: usar a tela inteira atrás da status bar */
@supports (-webkit-touch-callout: none) {
  body { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}

/* Evita zoom no foco de input em iOS (font-size < 16px causa zoom) */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="search"],
  input[type="tel"], input[type="password"], input[type="number"],
  input[type="url"], input[type="date"], input[type="time"],
  input[type="month"], textarea, select {
    font-size: 16px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   Bottom navigation (só mobile, só em páginas com .has-bottom-nav)
   ─────────────────────────────────────────────────────────────── */
.bottom-nav {
  display: none;
}
@media (max-width: 768px) {
  .has-bottom-nav { padding-bottom: calc(var(--bn-h) + var(--safe-bottom) + 8px); }
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(var(--bn-cols, 4), 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 6px var(--safe-right) calc(var(--safe-bottom) + 6px) var(--safe-left);
    z-index: 90;
    box-shadow: 0 -4px 16px rgba(0, 30, 80, 0.05);
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px;
    text-decoration: none; color: #888;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.2px;
    min-height: 50px;
    transition: color 0.15s;
    position: relative;
  }
  .bn-item svg { width: 22px; height: 22px;
                 stroke: currentColor; stroke-width: 2; fill: none;
                 stroke-linecap: round; stroke-linejoin: round; }
  .bn-item.active { color: var(--brand-blue); }
  .bn-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 3px;
    background: var(--brand-blue); border-radius: 0 0 4px 4px;
  }
  .bn-item:active { transform: scale(0.95); }
  .bn-badge {
    position: absolute; top: 4px; right: 50%; margin-right: -16px;
    background: #ef4444; color: white;
    font-size: 9.5px; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────
   Bottom-sheet (card desliza de baixo)
   ─────────────────────────────────────────────────────────────── */
.bs-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(10,31,77,0.35);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.bs-overlay.open { opacity: 1; pointer-events: auto; }
.bs-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: white; border-radius: 18px 18px 0 0;
  padding: 12px 20px calc(24px + var(--safe-bottom));
  box-shadow: 0 -10px 40px rgba(0,30,80,0.18);
  max-height: 80vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.bs-sheet.open { transform: translateY(0); }
.bs-handle {
  width: 40px; height: 4px;
  background: rgba(0,0,0,0.15); border-radius: 99px;
  margin: 0 auto 12px;
}
.bs-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--brand-blue-deep); }
.bs-sub   { font-size: 13px; color: #666; margin-bottom: 16px; }

/* ───────────────────────────────────────────────────────────────
   Map fullscreen container
   ─────────────────────────────────────────────────────────────── */
.map-fullscreen {
  position: fixed; inset: 0;
  padding-top: var(--safe-top);
  z-index: 1;
}
.map-fullscreen.has-bottom-nav { padding-bottom: calc(var(--bn-h) + var(--safe-bottom)); }
.map-canvas { width: 100%; height: 100%; }

/* Floating action button (FAB) padrão */
.fab {
  position: fixed; right: 16px;
  bottom: calc(var(--bn-h, 0px) + var(--safe-bottom) + 16px);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: white; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 120, 255, 0.45);
  z-index: 50;
  transition: transform 0.15s ease, box-shadow 0.15s;
}
.fab:active { transform: scale(0.94); }
.fab:hover  { box-shadow: 0 12px 32px rgba(0, 120, 255, 0.55); }
.fab svg { width: 24px; height: 24px;
           stroke: currentColor; stroke-width: 2.4; fill: none;
           stroke-linecap: round; stroke-linejoin: round; }

/* Touch-friendly: botões mín. 44x44 em mobile */
@media (max-width: 768px) {
  button, .btn, a.btn, [role="button"] {
    min-height: 40px;
  }
  /* Topbar mais compacta */
  .topbar { padding: 10px 16px !important; }
}

/* Esconde topbar no mapa fullscreen (mais imersivo) */
.map-fullscreen-active .topbar { display: none; }