/* ConvertaFlow — Clerk CSS overrides
   Separate file to prevent Tailwind CSS purging.
   Matches DESIGN.md Soft Structuralism tokens v1.4 */

/* ── Reset card container — remove qualquer box/padding/overflow ── */
.cl-cardBox,
.cl-card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

.cl-rootBox {
  width: 100% !important;
}

/* Remove header interno do Clerk (usamos o nosso) */
.cl-headerTitle,
.cl-headerSubtitle {
  display: none !important;
}

/* Espaçamento entre elementos */
.cl-main {
  gap: 20px !important;
}

/* ── Social button — DESIGN.md btn-google ── */
.cl-socialButtonsBlockButton {
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid #c2c6d3 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #02174a !important;
  transition: all 200ms ease !important;
  box-shadow: none !important;
  outline: none !important;
}
.cl-socialButtonsBlockButton:hover {
  background: #f4f3fa !important;
  background-color: #f4f3fa !important;
  border-color: #a8b0c0 !important;
}
/* Remove qualquer borda interna do Clerk no social button */
.cl-socialButtonsBlockButton > * {
  border: none !important;
}

/* Container dos social buttons — remove padding extra */
.cl-socialButtons {
  gap: 8px !important;
}
.cl-socialButtonsProviders {
  gap: 8px !important;
}

/* ── Divider ── */
.cl-dividerLine {
  background: #efedf4 !important;
  background-color: #efedf4 !important;
}
.cl-dividerText {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #727782 !important;
}
.cl-dividerRow {
  margin: 4px 0 !important;
}

/* ── Labels — DESIGN.md input-label ── */
.cl-formFieldLabel {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #424751 !important;
}

/* ── Inputs — DESIGN.md .input ── */
.cl-formFieldInput,
.cl-formFieldInput[type="email"],
.cl-formFieldInput[type="password"],
.cl-formFieldInput[type="text"] {
  height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  background: #e8f0fd !important;
  background-color: #e8f0fd !important;
  font-size: 14px !important;
  color: #02174a !important;
  transition: all 200ms ease !important;
  box-shadow: none !important;
}
.cl-formFieldInput:focus,
.cl-formFieldInput[type="email"]:focus,
.cl-formFieldInput[type="password"]:focus,
.cl-formFieldInput[type="text"]:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(5, 83, 160, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(5, 83, 160, 0.08) !important;
}

/* ── Primary button — DESIGN.md btn-primary ── */
.cl-formButtonPrimary {
  height: 44px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #1e7fd4 0%, #1a6bbf 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 8px rgba(2, 23, 74, 0.06) !important;
  transition: all 200ms ease !important;
}
.cl-formButtonPrimary:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* ── Footer ── */
.cl-footer {
  background: transparent !important;
  background-color: transparent !important;
}
.cl-footerActionText {
  font-size: 14px !important;
  color: #727782 !important;
}
.cl-footerActionLink {
  color: #1e7fd4 !important;
  font-weight: 500 !important;
}
.cl-footerPages {
  opacity: 0.5 !important;
}
.cl-formFieldAction {
  font-size: 12px !important;
  color: #1e7fd4 !important;
}

/* ── Identity preview (tela de senha após email) ── */
.cl-identityPreview {
  border-radius: 10px !important;
  background: #f4f3fa !important;
  background-color: #f4f3fa !important;
  border: none !important;
}
.cl-identityPreviewText {
  color: #02174a !important;
}
.cl-identityPreviewEditButton {
  color: #1e7fd4 !important;
}

/* ── OTP code input ── */
.cl-otpCodeFieldInput {
  border-radius: 8px !important;
  border: 1.5px solid #c2c6d3 !important;
  background: #e8f0fd !important;
  background-color: #e8f0fd !important;
  color: #02174a !important;
}

/* ── Alerts ── */
.cl-alert {
  border-radius: 10px !important;
  border: none !important;
}

/* ── Internal sections — forçar fundo branco ── */
.cl-formField,
.cl-socialButtonsBlockButtonText,
.cl-formFieldInputGroup {
  background: transparent !important;
  background-color: transparent !important;
}