/* ====
   Clerk Auth Styling to Match PitStopLog Design
   ==== */

body {
  background-color: var(--color-bg-primary); 
  color: var(--color-text-primary); 
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;}

/* Optional: Additional padding or margin for the content */
.container {
    padding: 10px 5px;
}


/* Import your existing color variables */
:root {
  --background: #FFFFFF;
  --textcolormuted: #6B7280;
}

body {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Additional utility classes for your layout */
.clerk-auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; 
  min-height: 100vh;
  width: 100%;
  padding: 2rem 1rem;
}

.cl-cardBox {
  max-width: 300px;
}
.cl-card {
  max-width: 300px;
}

.auth-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Back to site link */
.back-to-site {
  text-align: center;
  margin-top: 2rem;
}
.back-to-site a {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
}
.back-to-site a:hover {
  color: var(--color-accent-primary);
}

/* Clerk component overrides */
.cl-card {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  width: 100%;
}
.cl-headerTitle {
  color: var(--color-accent-primary) !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}
.cl-headerSubtitle {
  color: #6c757d !important;
  margin: 0 !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.cl-formFieldInput {
  border-radius: 8px !important;
  border: 2px solid #e9ecef !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
}
.cl-formFieldInput:focus {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(19, 132, 150, 0.25) !important;
}

.cl-formButtonPrimary {
  background: var(--color-accent-primary) !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
  color: white !important;
}
.cl-formButtonPrimary:hover {
  background: var(--color-accent-secondary) !important;
  transform: translateY(-1px) !important;
}

/* Social buttons */
.cl-socialButtonsBlockButton {
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* Divider */
.cl-dividerLine {
  background: #e9ecef !important;
}
.cl-dividerText {
  background: white !important;
  padding: 0 1rem !important;
  color: #6c757d !important;
  font-size: 0.9rem !important;
}

/* Footer links */
.cl-footerActionLink {
  color: var(--color-accent-primary) !important;
}
.cl-footerActionLink:hover {
  text-decoration: underline !important;
}
.cl-footerActionText {
  color: var(--color-text-muted) !important;
}

/* Errors */
.cl-formFieldErrorText {
  color: var(--color-error) !important;
  font-size: 0.875rem !important;
}