/* ============================================================================
   📝 CIRCUIT SAGE 2030 — FORMS (REGISTRATION)
   Dependência: main.css carregado ANTES deste ficheiro
   Página:      register.html  (formulário multi-passo)
   NÃO inclui:  header, footer, .btn — definidos em main.css
   ============================================================================ */

/* ─── Página de Registo ──────────────────────────────────────────────────────── */
.registration-section {
  padding: 7rem 0 4rem;
  background: var(--darker-bg);
}

.registration-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.registration-header h1 { margin-bottom: var(--spacing-xs); }

.registration-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Barra de Progresso ─────────────────────────────────────────────────────── */
/* NOTA: .progress-bar aqui é scoped dentro do formulário — não conflitua com
   qualquer .progress-bar do Bootstrap ou de outras páginas, porque este
   ficheiro só é carregado em register.html */
.registration-card .progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  width: 20%;
  transition: width var(--transition-base);
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
  margin-bottom: var(--spacing-md);
}

/* ─── Indicadores de Passo ───────────────────────────────────────────────────── */
.step-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.step-indicator {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.step-indicator.active {
  color: var(--primary-color);
  border-color: rgba(0, 102, 255, 0.35);
  background: rgba(0, 102, 255, 0.12);
  font-weight: 600;
}

.step-indicator.completed {
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
}

/* ─── Passos do Formulário ───────────────────────────────────────────────────── */
.form-step        { display: none; }
.form-step.active { display: block; animation: fadeIn 0.3s ease; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.form-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* ─── Cards de Plano (selecção no formulário) ────────────────────────────────── */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.plan-card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.plan-card:hover         { border-color: rgba(0, 102, 255, 0.4); transform: translateY(-2px); }
.plan-card.selected      { border-color: var(--primary-color); background: rgba(0, 102, 255, 0.1); box-shadow: var(--shadow-md); }
.plan-card input         { display: none; }

/* .plan-price aqui é scoped para os cards de selecção (1.5rem)
   landing.css tem .plan-price para vitrine de preços (3rem)
   Carregados em páginas diferentes — sem conflito */
.plan-card .plan-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-top: var(--spacing-xs);
}

/* ─── Acções do Formulário ───────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Botões específicos do formulário — estendem .btn do main.css */
.btn-prev   { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.btn-next   { background: var(--primary-gradient); color: white; }
.btn-submit { background: var(--success-color); color: white; }

/* ─── Resumo (passo final) ───────────────────────────────────────────────────── */
.summary-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-section h4 { margin-bottom: var(--spacing-xs); color: var(--text-primary); }

.success-icon {
  font-size: 3rem;
  display: inline-block;
  margin-bottom: var(--spacing-sm);
}

/* ─── Notificações (toast) ────────────────────────────────────────────────────── */
.notification {
  position: fixed;
  right: 20px;
  bottom: 24px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-base);
  z-index: 2000;
}

.notification.show          { opacity: 1; transform: translateY(0); }
.notification-success       { border-left: 4px solid var(--success-color); }
.notification-error         { border-left: 4px solid var(--error-color); }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .registration-card { padding: var(--spacing-lg); }
  .form-actions       { flex-direction: column; align-items: stretch; }
}