/**
 * @file
 * Integration of the Dynamics 365 Marketing forms (ensam_crm_forms module).
 *
 * Selectors are prefixed with .crm-form to override the styles embedded by
 * the Dynamics FormLoader. They target the generic Dynamics classes so they
 * apply to every CRM form.
 */

.crm-form {
  margin: 4rem 0;
  padding: 3rem 3rem 2rem;
  background: #eae0eb;
}

.crm-form .marketingForm,
.crm-form .marketingForm h1,
.crm-form .marketingForm h2,
.crm-form .marketingForm h3,
.crm-form .marketingForm p,
.crm-form .marketingForm a,
.crm-form .marketingForm li,
.crm-form .marketingForm label,
.crm-form .marketingForm label *,
.crm-form .marketingForm input,
.crm-form .marketingForm select,
.crm-form .marketingForm textarea,
.crm-form .marketingForm button {
  font-family: "DINPro", sans-serif;
  color: #2b2d36;
}

.crm-form [data-layout="true"] {
  max-width: none;
}

.crm-form .marketingForm h1,
.crm-form .marketingForm h2,
.crm-form .marketingForm h3 {
  text-align: left;
  font-weight: bold;
  color: #8d2363;
}

/* The 10px margin of text blocks is set inline by Dynamics */
.crm-form [data-editorblocktype="Text"] {
  margin: 10px 0 !important;
}

.crm-form .marketingForm h1 {
  font-size: 3.2rem;
}

.crm-form .marketingForm h2 {
  font-size: 2.6rem;
}

.crm-form .marketingForm h3 {
  font-size: 2.2rem;
}

.crm-form .marketingForm p,
.crm-form .marketingForm li {
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: left;
}

.crm-form .marketingForm a {
  font-size: inherit;
  color: #8d2363;
  text-decoration: underline;
}

/* Field blocks */
.crm-form .textFormFieldBlock,
.crm-form .dateTimeFormFieldBlock,
.crm-form .twoOptionFormFieldBlock,
.crm-form .optionSetFormFieldBlock,
.crm-form .multiOptionSetFormFieldBlock,
.crm-form .lookupFormFieldBlock,
.crm-form .phoneFormFieldBlock {
  padding: 1rem 0;
  gap: 0.8rem;
}

.crm-form .consentBlock {
  padding: 0.5rem 0;
}

/* Labels */
.crm-form .textFormFieldBlock label,
.crm-form .dateTimeFormFieldBlock label,
.crm-form .lookupFormFieldBlock label,
.crm-form .phoneFormFieldBlock label,
.crm-form .twoOptionFormFieldBlock label.block-label,
.crm-form .optionSetFormFieldBlock label.block-label,
.crm-form .multiOptionSetFormFieldBlock label.block-label {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
}

.crm-form .textFormFieldBlock label::after,
.crm-form .dateTimeFormFieldBlock label::after,
.crm-form .lookupFormFieldBlock label::after,
.crm-form .phoneFormFieldBlock label::after,
.crm-form .twoOptionFormFieldBlock label.block-label::after,
.crm-form .optionSetFormFieldBlock label.block-label::after,
.crm-form .multiOptionSetFormFieldBlock label.block-label::after {
  color: #8d2363;
}

/* Inputs, aligned on .form-text / .form-select */
.crm-form .textFormFieldBlock input,
.crm-form .dateTimeFormFieldBlock input,
.crm-form .lookupFormFieldBlock input,
.crm-form .phoneFormFieldBlock input,
.crm-form .optionSetFormFieldBlock select,
.crm-form .marketingForm textarea {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  height: 5rem;
  padding: 0 18px;
  font-size: 2rem;
  font-weight: 300;
  background-color: white;
  border: solid 2px white;
  border-radius: 0;
  transition: all 0.1s ease-in-out;
}

.crm-form .marketingForm textarea {
  height: auto;
  padding: 10px 18px;
}

.crm-form .phoneFormFieldBlock .phoneCountryCode {
  height: auto;
  border: 0;
}

.crm-form .textFormFieldBlock input:focus,
.crm-form .dateTimeFormFieldBlock input:focus,
.crm-form .lookupFormFieldBlock input:focus,
.crm-form .phoneFormFieldBlock input:focus,
.crm-form .optionSetFormFieldBlock select:focus,
.crm-form .marketingForm textarea:focus {
  border-color: #8d2363;
  outline: none;
}

.crm-form .marketingForm input::placeholder,
.crm-form .marketingForm textarea::placeholder {
  font-style: italic;
  color: inherit;
}

/* Checkboxes and radios */
.crm-form .twoOptionFormFieldBlock div.radiobuttons div input,
.crm-form .twoOptionFormFieldBlock div.twooption_checkbox div input,
.crm-form .optionSetFormFieldBlock div.radiobuttons div input,
.crm-form .multiOptionSetFormFieldBlock fieldset input,
.crm-form .consentBlock input {
  accent-color: #8d2363;
}

.crm-form .twoOptionFormFieldBlock div.radiobuttons div label,
.crm-form .optionSetFormFieldBlock div.radiobuttons div label,
.crm-form .twoOptionFormFieldBlock div.twooption_checkbox div label,
.crm-form .twoOptionFormFieldBlock div.twooption_checkbox div label div,
.crm-form .multiOptionSetFormFieldBlock fieldset > div > label,
.crm-form .consentBlock div label p {
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: left;
}

/* Error messages */
.crm-form .marketingForm .error {
  font-size: 1.4rem;
  font-weight: normal;
  color: #c33400;
}

/* Submit button, aligned on .form-submit. Dynamics sets its height inline. */
.crm-form .submitButtonWrapper .submitButton,
.crm-form .marketingForm .primaryButton {
  min-width: 259px;
  max-width: 100%;
  height: 5rem !important;
  padding: 0 20px;
  font-family: "DINPro", sans-serif;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 4.6rem;
  text-transform: uppercase;
  color: white;
  background: #f29400;
  border: solid 2px transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

.crm-form .submitButtonWrapper .submitButton:hover,
.crm-form .submitButtonWrapper .submitButton:focus,
.crm-form .marketingForm .primaryButton:hover,
.crm-form .marketingForm .primaryButton:focus {
  color: #f29400;
  background: white;
  border-color: #f29400;
}

/* Feedback displayed after submission, or on loading errors */
.crm-form .onFormSubmittedFeedback {
  width: auto !important;
  height: auto !important;
}

.crm-form div[data-cached-form-url] .onFormSubmittedFeedback .onFormSubmittedFeedbackMessage {
  font-family: "DINPro", sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #2b2d36;
}