/* ===========================================
   FECdesk Component Overrides & Extras
   =========================================== */

/* Navbar on dark backgrounds */
.navbar-dark .navbar-logo { color: var(--white); }
.navbar-dark .navbar-links a { color: rgba(255,255,255,0.7); }
.navbar-dark .navbar-links a:hover { color: var(--white); }
.navbar-dark .menu-toggle span { background: var(--white); }
.navbar-dark .lang-toggle { border-color: rgba(255,255,255,0.2); }
.navbar-dark .lang-toggle button { color: rgba(255,255,255,0.5); }
.navbar-dark .lang-toggle button.active { background: var(--blue); color: var(--white); }

/* Signup page - wider card */
.auth-card.wide {
  max-width: 560px;
}

/* Loading overlay for forms */
.form-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

/* Pricing skeleton loading */
.pricing-skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 2rem;
  min-height: 380px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Comparison table popular header */
.comparison-table th.popular-th {
  background: var(--blue);
  color: var(--white);
}

/* Mobile auth adjustments */
@media (max-width: 480px) {
  .auth-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
  
  .auth-card.wide {
    max-width: 100%;
  }
}

/* Smooth page transition */
.page-enter {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}