/* 
 * Error Page Styles
 * 
 * Brand-specific styles only. Bootstrap handles most layout and components.
 * Use Bootstrap utilities wherever possible.
 */

/* Error page body - Brand-specific gradient background */
body.error-page {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, rgba(255, 184, 233, 0.35), rgba(142, 104, 255, 0.5) 35%, #060320 90%);
  color: #f9f9fb;
}

/* Error glow - Brand-specific decorative element */
.error-glow {
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 45%),
              radial-gradient(circle at 80% 0%, rgba(86, 119, 255, 0.4), transparent 35%),
              radial-gradient(circle at 50% 80%, rgba(255, 53, 127, 0.4), transparent 40%);
  opacity: 0.5;
  filter: blur(60px);
  z-index: 0;
}

/* Error page container - Brand-specific backdrop blur */
.error-page__container {
  width: min(600px, 100%);
  padding: 3.5rem 2.5rem;
  border-radius: 24px;
  background: rgba(10, 8, 30, 0.78);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px rgba(3, 0, 20, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 1;
}

/* Error buttons - Brand-specific gradients */
.error-btn--primary {
  background: linear-gradient(120deg, #ff68c4, #fe7a8b 55%, #fbc55c) !important;
  color: #1b0a1f !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(255, 104, 196, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.error-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 104, 196, 0.5);
  color: #1b0a1f !important;
}

.error-btn--secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f9f9fb !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.error-btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.15) !important;
  color: #f9f9fb !important;
}

/* Responsive */
@media (max-width: 520px) {
  .error-page__container {
    padding: 2.5rem 1.75rem;
  }

  .error-page__actions {
    gap: 0.65rem;
  }
}