/* ──────────────────────────────────────────────────────────────────────────
   Priority Way — Premium polish (overrides do style.css base)
   Carregado depois do style.css. Foco em: tipografia distintiva,
   micro-interações, hierarquia visual, sensação de qualidade.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-color-primary: 26 86 219; /* RGB do azul Priority */
  --shadow-elevated: 0 18px 40px -12px rgb(var(--shadow-color-primary) / 0.25),
                     0 8px 16px -8px rgb(var(--shadow-color-primary) / 0.15);
}

/* Tipografia premium para títulos — Plus Jakarta Sans (distintiva, moderna) */
h1, h2, h3, .hero-content h1, .dashboard-header h2,
.wiz-step-content h3, .modal h2 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
}

h1, .hero-content h1 {
  font-weight: 800;
  line-height: 1.05;
}

/* Gradient sofisticado nos números de stats / destaque */
.gradient-text {
  background-image: linear-gradient(135deg, var(--primary-light) 0%, #7ea0fb 40%, var(--accent-light) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 12s var(--ease-out) infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Botões — micro-lift + sombra colorida */
.btn {
  transition: transform 180ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              background-color 180ms var(--ease-out),
              border-color 180ms var(--ease-out);
  will-change: transform;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: 80ms;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-elevated);
}

.btn-primary {
  background-image: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
}

.btn-primary:hover:not(:disabled) {
  background-image: linear-gradient(135deg, var(--primary-light), var(--primary));
}

/* Cards — elevation on hover (lista de contratos, planos, etc.) */
.card, .pricing-card, .stat-card, .contratos-table-section, .profile-card {
  transition: transform 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}

.pricing-card:hover, .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.18);
}

/* Inputs — foco visualmente mais nítido */
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

/* Badges — pill mais polido */
.badge {
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}

/* Navbar — backdrop blur premium */
.navbar {
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background-color: rgba(7, 17, 31, 0.92) !important;
  transition: background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.navbar.scrolled {
  box-shadow: 0 4px 24px -8px rgba(7, 17, 31, 0.4);
}

/* Modal — animação de entrada */
.modal[style*="display:flex"], .modal[style*="display: flex"] {
  animation: modal-fade-in 200ms var(--ease-out);
}

.modal-content {
  animation: modal-pop-in 280ms var(--ease-bounce);
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scroll reveal — elementos animam quando entram no viewport */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tabelas — linhas com hover destacado */
table.table tbody tr {
  transition: background-color 140ms var(--ease-out);
}

table.table tbody tr:hover {
  background-color: rgba(var(--primary-rgb), 0.10);
}

/* Empty state — quando não há dados */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state-icon {
  display: block;
  margin: 0 auto 16px;
  opacity: 0.5;
}

/* Stripe-like glow no hero (subtil, não exagerado) */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center,
              rgba(59, 130, 246, 0.18) 0%,
              transparent 60%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

/* Loading skeleton — mais agradável que spinner para listas */
.skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-elev) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease-in-out infinite;
  border-radius: 6px;
}

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

/* Reduce motion — respeitar preferência do utilizador */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible — acessibilidade ARIA */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 8px;
}