/* ═══════════════════════════════════════════════════════════════════════════
   BNA Brasil - CSS de Páginas Específicas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Página de Contato - Grid Responsivo ────────────────────────────────── */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .about-grid {
    grid-template-columns: 1fr !important;
  }
  .services-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .mvv-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Animação de Gradiente Dinâmico ─────────────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animated {
  background: linear-gradient(-45deg, #020617, #0c1a2e, #0d2137, #0a1628);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* ─── Efeito Glow em Hover ───────────────────────────────────────────────── */
.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(14,165,233,0.3), 0 0 60px rgba(14,165,233,0.1);
}

/* ─── Linha de Progresso no Topo ─────────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-btn);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─── Tabela Responsiva ──────────────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.table-dark {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-dark th {
  background: var(--dark-3);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table-dark td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.table-dark tr:hover td {
  background: rgba(14,165,233,0.03);
}

.table-dark tr:last-child td {
  border-bottom: none;
}

/* ─── Skeleton Loading ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--dark-3) 25%, var(--dark-4) 50%, var(--dark-3) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  max-width: 500px;
  width: 100%;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal-box {
  transform: scale(1);
}

/* ─── Cookie Banner ──────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 500px;
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  z-index: 1500;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner.show {
  transform: translateY(0);
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .whatsapp-float, .scroll-top, .navbar { display: none !important; }
  .dashboard-layout { grid-template-columns: 1fr !important; }
  .dashboard-main { padding: 0 !important; }
  body { background: white !important; color: black !important; }
  .glass-card { border: 1px solid #ddd !important; background: white !important; }
}