/*
  ========================================
  MOJO Health - Clerk.com Component Overrides
  Styles Clerk authentication components to match MOJO branding
  ========================================
*/

/* ===========================================
   CLERK COMPONENT ROOT STYLING
   =========================================== */

/* Root container for all Clerk components */
.mojo-auth-root {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;

  --cl-color-primary: #0047BA !important;
  --cl-color-primary-50: #E6F0FF !important;
  --cl-color-primary-100: #CCE0FF !important;
  --cl-color-primary-200: #99C2FF !important;
  --cl-color-primary-300: #66A3FF !important;
  --cl-color-primary-400: #3385FF !important;
  --cl-color-primary-500: #0047BA !important;
  --cl-color-primary-600: #003B9E !important;
  --cl-color-primary-700: #002F82 !important;
  --cl-color-primary-800: #002366 !important;
  --cl-color-primary-900: #00174A !important;

  --cl-color-accent: #28BCB4 !important;
  --cl-color-accent-50: #E6F9F8 !important;
  --cl-color-accent-100: #CCF3F1 !important;
  --cl-color-accent-200: #99E7E3 !important;
  --cl-color-accent-300: #66DBD5 !important;
  --cl-color-accent-400: #33CFC7 !important;
  --cl-color-accent-500: #28BCB4 !important;
  --cl-color-accent-600: #209B93 !important;
  --cl-color-accent-700: #187A72 !important;
  --cl-color-accent-800: #105951 !important;
  --cl-color-accent-900: #083830 !important;

  --cl-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --cl-font-weight-light: 300 !important;
  --cl-font-weight-normal: 400 !important;
  --cl-font-weight-medium: 500 !important;
  --cl-font-weight-semibold: 600 !important;
  --cl-font-weight-bold: 700 !important;
  --cl-font-weight-heavy: 800 !important;

  --cl-border-radius: 1rem !important;
  --cl-border-radius-sm: 0.5rem !important;
  --cl-border-radius-md: 1rem !important;
  --cl-border-radius-lg: 1rem !important;

  --cl-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
  --cl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  --cl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  --cl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ===========================================
   CLERK CARD STYLING
   =========================================== */

.mojo-auth-card {
  background: white !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  border: none !important;
}

/* Remove default Clerk shadows and borders */
.cl-card,
.cl-formContainer,
.cl-signIn-root,
.cl-signUp-root {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ===========================================
   CLERK HEADER STYLING
   =========================================== */

.mojo-auth-header,
.cl-header {
  background: linear-gradient(135deg, #0047BA, #28BCB4) !important;
  color: white !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  border-radius: 0 !important;
}

.cl-headerTitle {
  color: white !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

.cl-headerSubtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ===========================================
   FORM ELEMENTS
   =========================================== */

/* Form container */
.cl-main {
  padding: 2rem !important;
}

/* Form fields */
.cl-formFieldInput {
  border: 2px solid #E5E7EB !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  transition: all 0.3s ease !important;
  background: white !important;
}

.cl-formFieldInput:focus {
  outline: none !important;
  border-color: #0047BA !important;
  box-shadow: 0 0 0 3px rgba(0, 71, 186, 0.1) !important;
}

.cl-formFieldInput::placeholder {
  color: #9CA3AF !important;
  font-weight: 300 !important;
}

/* Form field labels */
.cl-formFieldLabel {
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ===========================================
   BUTTONS
   =========================================== */

/* Primary action buttons */
.mojo-auth-button,
.cl-formButtonPrimary {
  background: linear-gradient(135deg, #0047BA, #28BCB4) !important;
  color: white !important;
  border: none !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.mojo-auth-button:hover,
.cl-formButtonPrimary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 71, 186, 0.3) !important;
}

.mojo-auth-button:disabled,
.cl-formButtonPrimary:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Secondary buttons */
.cl-formButtonSecondary {
  background: transparent !important;
  color: #0047BA !important;
  border: 2px solid #0047BA !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

.cl-formButtonSecondary:hover {
  background: #0047BA !important;
  color: white !important;
}

/* Link buttons */
.cl-button__link,
.cl-formButtonLink,
.link-button {
  color: #0047BA !important;
  font-weight: 500 !important;
  font-family: 'Montserrat', sans-serif !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: inherit !important;
}

.cl-button__link:hover,
.cl-formButtonLink:hover,
.link-button:hover {
  color: #28BCB4 !important;
  text-decoration: underline !important;
}

/* ===========================================
   SOCIAL BUTTONS
   =========================================== */

.mojo-social-button,
.cl-socialButtonsBlockButton {
  background: white !important;
  border: 2px solid #E5E7EB !important;
  color: #374151 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.mojo-social-button:hover,
.cl-socialButtonsBlockButton:hover {
  border-color: #0047BA !important;
  background: #F8FAFC !important;
  transform: translateY(-1px) !important;
}

/* ===========================================
   DIVIDERS
   =========================================== */

.cl-divider {
  display: flex !important;
  align-items: center !important;
  margin: 1.5rem 0 !important;
}

.cl-divider::before,
.cl-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #E5E7EB !important;
}

.cl-dividerText {
  padding: 0 1rem !important;
  color: #6B7280 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ===========================================
   ERROR AND SUCCESS MESSAGES
   =========================================== */

.cl-formFieldErrorText {
  color: #DC2626 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0.25rem !important;
}

.cl-formFieldSuccessText {
  color: #059669 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0.25rem !important;
}

.cl-formFieldInfoText {
  color: #0047BA !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 0.25rem !important;
}

/* ===========================================
   VERIFICATION CODES
   =========================================== */

.cl-formFieldInputShowPasswordButton {
  color: #6B7280 !important;
}

.cl-formFieldInputShowPasswordButton:hover {
  color: #0047BA !important;
}

/* ===========================================
   FOOTER ELEMENTS
   =========================================== */

.cl-footer {
  padding-top: 1.5rem !important;
  border-top: 1px solid #E5E7EB !important;
  margin-top: 1.5rem !important;
}

.cl-footerText {
  color: #6B7280 !important;
  font-size: 0.875rem !important;
  font-family: 'Montserrat', sans-serif !important;
  text-align: center !important;
}

/* ===========================================
   LOADING STATES
   =========================================== */

.cl-spinner {
  border-color: #0047BA !important;
}

.cl-loading {
  color: #0047BA !important;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 640px) {
  .mojo-auth-root {
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .mojo-auth-card {
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .mojo-auth-header,
  .cl-header {
    padding: 1.5rem 1rem !important;
  }

  .cl-main {
    padding: 1.5rem !important;
  }

  .cl-headerTitle {
    font-size: 1.5rem !important;
  }
}

/* ===========================================
   HIDE CLERK'S BUILT-IN FOOTER
   =========================================== */

/* Hide Clerk's footer to avoid redundant "Already have an account?" links */
.cl-footer,
.cl-footerAction {
  display: none !important;
}

/* ===========================================
   AUTH TOGGLE CONTROLS
   =========================================== */

.auth-toggle-controls {
  padding: 1.5rem 2rem !important;
  text-align: center !important;
  border-top: 1px solid #E5E7EB !important;
  background: #F8FAFC !important;
}

.auth-toggle-controls p {
  color: #6B7280 !important;
  font-size: 0.875rem !important;
  font-family: 'Montserrat', sans-serif !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .auth-toggle-controls {
    padding: 1rem !important;
  }
}