/* Clerk-specific presentation is isolated here so vendor overrides do not leak into the site theme. */
.clerk-panel {
  background: transparent;
  color: var(--ink);
  padding: 0;
}

.clerk-auth-frame {
  min-width: 0;
  width: 100%;
}

.clerk-auth-frame > #clerkAuth,
.clerk-auth-frame .cl-rootBox,
.clerk-auth-frame .cl-cardBox,
.clerk-auth-frame .cl-card {
  max-width: none;
  width: 100% !important;
}

.auth-loading {
  border: 1px solid var(--line);
  color: var(--slate);
  display: grid;
  font-size: 15px;
  margin: 0;
  min-height: 380px;
  padding: 36px;
  place-items: center;
}

.clerk-panel .cl-cardBox,
.clerk-panel .cl-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.clerk-panel .cl-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--pink) !important;
  font-family: var(--sans) !important;
}

.clerk-panel .cl-headerTitle {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.clerk-panel .cl-headerSubtitle,
.clerk-panel .cl-footerActionText {
  color: var(--slate) !important;
}

.clerk-panel .cl-socialButtonsBlockButton,
.clerk-panel .cl-formFieldInput {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 48px;
}

.clerk-panel .cl-socialButtonsBlockButton:hover,
.clerk-panel .cl-formFieldInput:focus {
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 1px var(--rose) !important;
}

.clerk-panel .cl-formFieldLabel {
  color: var(--charcoal) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.clerk-panel .cl-formFieldAction,
.clerk-panel .cl-footerActionLink {
  color: var(--rose) !important;
  font-weight: 700 !important;
}

.clerk-panel .cl-dividerLine {
  background: var(--line) !important;
}

.clerk-panel .cl-footer {
  border-top: 1px solid var(--line);
}

.auth-legal {
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0 0;
}

.auth-legal a {
  border-bottom: 1px solid currentColor;
  color: var(--rose);
}

.clerk-panel .form-note {
  color: var(--rose);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
}

.clerk-panel .form-note.is-error {
  color: #9e2424;
}

.clerk-panel .form-note:empty {
  display: none;
}

@media (max-width: 560px) {
  .auth-loading {
    min-height: 340px;
    padding: 24px;
  }

  .clerk-panel .cl-card {
    padding: 24px !important;
  }
}

@media (max-width: 380px) {
  .clerk-panel .cl-socialButtons {
    grid-template-columns: 1fr !important;
  }
}