/* Credit Assessment Form Component - EXACT CSS from memorial-campaign-template.css */
/* @import url('');
@import url('');
@import url(''); */

.credit-assessment-section {
  padding-top: 24px;
  padding-bottom: 80px;
  background: var(--color-primitive-primary-on-primary, #fff);
  overflow: hidden;
}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.credit-score {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.credit-score-icon {
  display: flex;
  height: 24px;
  align-items: center;
  gap: var(--spacing-alias-grid-columns, 12px);
}
.credit-assessment-title {
  color: var(--color-alias-text-primary, #1a1a1a);
  text-align: center;
  font-size: var(--typography-font-size-title, 36px);
  font-weight: 600;
  line-height: var(--typography-line-height-title, 44px);
  max-width: 843px;
  align-self: center;
  margin: 0px;
}
.credit-score-text {
  color: var(--color-primitive-secondary-secondary, #424242);
  font-size: var(--typography-font-size-body-sm, 16px);
  font-weight: var(--typography-font-weight-body, 400);
  line-height: 24px;
  margin: 0px;
}
.credit-info-text {
  color: var(--color-alias-text-primary, #1a1a1a);
  text-align: center;
  font-size: var(--typography-font-size-body-lg, 24px);
  font-weight: 600;
  line-height: var(--typography-line-height-body-lg, 34px);
  max-width: 539px;
  align-self: center;
  margin: 0px;
}
.credit-info-text-1 {
  color: var(--color-alias-text-primary, #1a1a1a);
  text-align: center;
  font-size: var(--typography-font-size-body-md, 20px);
  font-weight: var(--typography-font-weight-body, 400);
  line-height: var(--typography-line-height-body-md, 28px);
  align-self: stretch;
  margin: 0px;
}
.check-icon {
  width: 19.5px;
  height: 19.5px;
  flex-shrink: 0;
}

/* Form Layout */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.form-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.text-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  align-self: stretch;
  flex-direction: column;
}

/* MUI Field Customization for this template */
.mui-field {
  padding: 16px 12px;
  border-radius: var(--radius-alias-container, 0);
  border: 1px solid var(--color-primitive-surface-outline, #424242);
  background: var(--color-primitive-surface-surface, #fff);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.mui-field:hover {
  border-color: #9ca3af;
}

.mui-field:focus-within {
  border-color: var(--color-primitive-primary-primary, #2562ff);
  box-shadow: 0 0 0 2px rgba(37, 98, 255, 0.1);
  border: 2px solid #2562ff;
}

.mui-label {
  color: #6b7280;
  font-family: var(--typography-font-label, "Noto Sans Display");
  font-size: var(--typography-font-size-body-sm, 16px);
  font-style: normal;
  font-weight: var(--typography-font-weight-title, 500);
  line-height: 24px;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  pointer-events: none;
  background: #fff;
  padding: 0 4px;
}

.mui-input {
  color: var(--color-alias-text-primary, #1A1A1A);
  font-size: var(--typography-font-size-body-sm, 16px);
  line-height: 24px;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0px 32px 0px 5px;
  font-weight: var(--typography-font-weight-body-xs, 300);
  font-family: var(--typography-font-label, "Noto Sans Display");
  -webkit-background-clip: text;
}

.error {
    padding: 0px 67px 0px 5px; !important;
}

.mui-input::placeholder {
  color: #9ca3af;
}

.mui-input:focus + .mui-label,
.mui-input:not(:placeholder-shown) + .mui-label {
  top: 0;
  font-size: 16px;
  color: var(--color-primitive-primary-primary, #2562ff);
}



/* Clear button styling */
.mui-action {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mui-action:hover {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
}

/* Helper text styling for error/success messages */
.mui-helper {
  width: 100%;
  font-size: 12px;
  margin: 6px 0px 0;
  transition: all 0.3s ease;
}

/* Error state */
.mui-field.is-error {
  border-color: #E25656;
}

.mui-field.is-error .mui-label {
  color: #913737;
}

/* Error State Styling - handled by .mui-field.is-error */
.mui-field {
  --error-icon-gap: 16px;
  --button-width: 20px;
  --button-right: 16px;
}

.error-icon {
  position: absolute;
  right: 16px; /* Same position as clear button by default */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #E25656;
  display: none;
  z-index: 1;
  pointer-events: none;
}

.mui-field.is-error .error-icon {
  display: block;
}

/* When field has value AND error, position error icon to the left of clear button */
.mui-field.is-error.has-value .error-icon {
  right: calc(var(--button-right) + var(--button-width) + var(--error-icon-gap));
}

.mui-field.is-error .mui-action {
  right: 12px;
  display: flex;
}

/* Success state */


.mui-field.is-success .mui-label {
  color: #424242;
}

/* Submit Button - 3 Layer Structure */
.submit-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  max-width: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.button-container {
  display: flex;
  justify-content: center !important;
  align-items: center;
}


.submit-button {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  background: var(--color-primitive-primary-primary, #2562ff);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--typography-font-label, "Noto Sans Display");
  font-size: var(--typography-font-size-body-sm, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  width: 100%;
  max-width: 300px;
}

.submit-button:hover {
  opacity: 0.9;
}

.submit-button:active {
  opacity: 0.8;
}

/* Legal Disclaimer */
.legal-disclaimer {
  color: var(--color-alias-text-tertiary, #595959);
  font-size: var(--typography-font-size-body-xs, 12px);
  font-weight: var(--typography-font-weight-body, 400);
  line-height: var(--typography-line-height-body-xs, 16px);
  max-width: 720px;
  align-self: center;
}

.legal-link {
  color: var(--brand-brand-primary, #2562ff);
  font-size: var(--typography-font-size-body-xs, 12px);
  font-weight: var(--typography-font-weight-body, 400);
  line-height: var(--typography-line-height-body-xs, 16px);
}

.legal-link:hover {
  text-decoration: underline;
}

/* Memorial Button - Separate from form button */
.memorial-button-section {
  display: flex;
  padding: var(--spacing-alias-padding-md, 16px)
    var(--spacing-alias-padding-xl, 32px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-alias-button-container, 0);
  background: var(--color-primitive-primary-primary, #2562ff);
  max-width: 100%;
  width: fit-content;
  align-self: flex-start;
}

.memorial-button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alias-horizontal-gap-sm, 12px);
  border-radius: 8px;
  width: 100%;
}

.memorial-button {
  display: flex;
  min-width: 100px;
  padding: var(--spacing-alias-padding-0, 0);
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-alias-button-outline, 0);
  color: var(--color-primitive-primary-on-primary, #fff);
  text-align: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  width: 100%;
  font-family: var(--typography-font-label, "Noto Sans Display");
  font-size: var(--typography-font-size-label-sm, 16px);
  font-style: normal;
  font-weight: var(--typography-font-weight-label, 500);
  line-height: var(--typography-line-height-label-sm, 24px);
}

.memorial-button:hover {
  opacity: 0.9;
}

.memorial-button:active {
  opacity: 0.8;
}

.expiration-text {
  color: var(--color-alias-text-secondary, #484f4c);
  font-family: var(--typography-font-body, "Noto Sans Display");
  font-size: var(--typography-font-size-body-xs, 12px);
  font-style: normal;
  font-weight: var(--typography-font-weight-body, 400);
  line-height: var(--typography-line-height-body-xs, 16px);
  margin: 0;
}

/* Responsive Design - EXACT same as template */
@media (max-width: 768px) {
  .credit-assessment-section {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .button-container {
    width: 100%;
  }

  .button-container .btn-filled {
    width: 100%;
  }
  .credit-score .main {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .credit-score {
    display: flex;
    flex-direction: column;
    align-items: baseline !important;
    gap: 16px;
    width:100%
  }

  .credit-assessment-title {
    text-align: center;
    font-size: var(--typography-font-size-title-sm, 28px);
    line-height: 36px;
    align-self: stretch;
  }
  .credit-info-text {
    font-size: var(--typography-font-size-body-md, 20px);
    line-height: var(--typography-line-height-body-md, 28px);
  }
  .credit-info-text-1 {
    font-size: var(--typography-font-size-body-sm, 16px);
    line-height: 24px;
  }
  .form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mui-field {
    --error-icon-gap: 16px;
    --button-width: 20px;
    --button-right: 16px;
  }
  
  .error-icon {
    right: 16px; /* Same position as clear button by default */
    width: 18px;
    height: 18px;
  }
  
  /* When field has value AND error, position error icon to the left of clear button */
  .mui-field.is-error.has-value .error-icon {
    right: calc(var(--button-right) + var(--button-width) + var(--error-icon-gap));
  }
}
/* button */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--color-alias-button-button-container-radius, 0px);
  color: var(--color-alias-text-secondary, #484848);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  min-width: 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Filled Button - Exact match to Sign Up image */
.btn-filled {
  background: var(--color-primitive-primary-primary, #2562ff);
  color: white;
  font-weight: var(--typography-font-weight-title, 500);
  letter-spacing: 0.5px;
}

/* Outline Button - Exact match to Log In image */
.btn-outline {
  color: var(--color-alias-button-button-text-outline-primary, #2562ff);
  border: 2px solid
    var(--color-alias-button-button-text-outline-primary, #2562ff);
  background-color: var(--color-primitive-surface-surface, #fff);
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
}

.btn-no-padding-outline {
  color: #3b82f6;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
}

.btn-no-outline {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
}

.btn-outline-white-text {
  color: var(--color-primitive-primary-on-primary, #fff);
  border: 1.5px solid #3b82f6;
  font-weight: var(--typography-font-weight-title, 500);
  background: transparent;
  border-color: var(--color-primitive-primary-on-primary, #fff);
  font-size: var(--typography-font-size-body-sm, 16px);
  line-height: 24px;
}

.btn-outline-view-more {
  color: var(--color-alias-button-button-text-outline-primary, #2562ff);
  border: 1.5px solid
    var(--color-alias-button-button-text-outline-primary, #2562ff);
  font-weight: var(--typography-font-weight-title, 500);
  font-size: var(--typography-font-size-body-sm, 16px);
  line-height: 24px;
}

.btn-outline.btn-outline-none {
  border: none;
  box-shadow: none;
  padding-left: 0;
}

.btn-outline.btn-outline-padding-none {
  border: none;
  box-shadow: none;
}

.mui-field .mui-action {
  display: none;
}

.mui-field.has-value .mui-action {
  display: inline-flex;
}