/* #region Font */
/* REGULAR */
@font-face {
  font-family: "HelveticaNowPro";
  src: url("/lp/sfsites/c/resource/HelveticaFonts/HelveticaNowProTextRegular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MEDIUM */
@font-face {
  font-family: "HelveticaNowPro";
  src: url("/lp/sfsites/c/resource/HelveticaFonts/HelveticaNowProTextMedium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* BOLD */
@font-face {
  font-family: "HelveticaNowPro";
  src: url("/lp/sfsites/c/resource/HelveticaFonts/HelveticaNowProTextBold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 
https://kpt.my.site.com/lp/sfsites/c/resource/kpt_mcnext_custom_forms?d43692d06d
https://kpt.my.site.com/resource/HelveticaFonts/HelveticaNowProTextRegular.woff2
https://kpt.my.site.com/lp/sfsites/c/resource/HelveticaFonts/HelveticaNowProTextRegular.woff2
*/
/* #endregion Font */

:root {
  --primary-color: #d8321e;
  --secondary-color: #ddc7a2;
  --secondary-light-color: #f0e5d3;
  --error-red: #b60811;
  --dark-gray: #262626;
  --mid-gray: #545454;
  --border-gray: #737373;
  --light-gray: #f2f2f2;
  --bg-gray: #fafafa;
  --focus-blue: #50a3da;
}

/* #region Body */
* {
  font-family: "HelveticaNowPro", sans-serif !important;
}

html,
body {
  font-weight: 400;
  font-size: 16px;
  color: var(--mid-gray);
  background-color: var(--bg-gray);
  outline-color: transparent;
}

/* 34px + the 2px under each field box = 36px box-to-label, as on kpt.ch */
.exp-host-component {
  margin-block-start: 34px;
}

/* Hidden form fields render empty but keep the host margin */
.exp-host-component:has(> .outer-wrapper.slds-hide) {
  display: none;
}

/* "Ich akzeptiere …" sentence (HTML block) directly under the terms checkbox */
.exp-host-component:has(.kpt-accept-terms) {
  margin-block-start: 0;
}

.kpt-accept-terms {
  margin: 0;
  padding-left: 27px; /* aligns with the checkbox label */

  a {
    color: var(--primary-color);
  }
}
/* #endregion Body */

/* #region Label */
.content label {
  overflow: hidden;
  color: var(--dark-gray);
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%; /* 21px */

  &:has(.slds-required)::after {
    content: " *";
  }
}

.slds-required {
  display: none;
}

.slds-has-error .slds-form-element__help {
  margin-top: 4px;
  color: var(--error-red);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
}
/* #endregion Label */

/* #region Input */
.slds-input {
  margin-top: 4px;
  padding: 12px 12px;
  border: none;
  outline: 1px solid var(--border-gray);

  color: var(--dark-gray);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */

  &:hover {
    outline: 1px solid var(--dark-gray);
  }

  &:focus {
    outline: 3px solid var(--focus-blue);
  }
}

.slds-has-error .slds-input {
  --slds-c-input-border-color: var(--error-red);
  --slds-c-input-shadow: var(--error-red) 0 0 0 0;
  outline: 3px solid var(--error-red);
  &:focus {
    --slds-c-input-shadow: var(--error-red) 0 0 0 0;
    outline: 3px solid var(--error-red);
  }
}

.slds-has-error .slds-input__icon {
  display: none;
}
/* #endregion Input */

/* #region Select */
.content {
  &:has(lightning-combobox) {
    label {
      font-weight: 500;
    }
  }

  .slds-grid {
    gap: 8px;
  }

  lightning-combobox {
    .slds-combobox__input,
    .slds-input_faux {
      padding: 12px;
      height: auto;
      margin-top: 4px;
      padding: 12px 12px;
      border: none;
      outline: 1px solid var(--border-gray);

      color: var(--dark-gray);
      font-size: 16px;
      font-weight: 400;
      line-height: 150%; /* 24px */
    }

    .slds-combobox__input:focus {
      outline: 3px solid var(--focus-blue);
    }

    .slds-input__icon-group_right .slds-input__icon_right {
      width: 20px;
      * {
        display: none;
      }
      &::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.25 6.875L10 13.125L3.75 6.875' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
    .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
      box-shadow: inset 0 0 0 0px var(--focus-blue);
      background-color: var(--light-gray);
    }
  }
}

/* #endregion Select */

/* #region Calendar */
.formInputDate {
  /* The date component ignores the form's width setting; match the 223px fields */
  max-width: 223px;

  .slds-input-has-icon .slds-input__icon {
    width: 20px;
    * {
      display: none;
    }
    &::before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.87665 3.125H18.1266C18.1266 3.125 19.3766 3.125 19.3766 4.375V18.125C19.3766 18.125 19.3766 19.375 18.1266 19.375H1.87665C1.87665 19.375 0.626648 19.375 0.626648 18.125V4.375C0.626648 4.375 0.626648 3.125 1.87665 3.125Z' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.626648 8.125H19.3766' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.62665 5V0.625' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.3766 5V0.625' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.87665 3.125H18.1266C18.1266 3.125 19.3766 3.125 19.3766 4.375V18.125C19.3766 18.125 19.3766 19.375 18.1266 19.375H1.87665C1.87665 19.375 0.626648 19.375 0.626648 18.125V4.375C0.626648 4.375 0.626648 3.125 1.87665 3.125Z' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.626648 8.125H19.3766' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.62665 5V0.625' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.3766 5V0.625' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  opacity: 1;
}

/* Empty date: the browser's format hint (dd.mm.yyyy / TT.MM.JJJJ) in placeholder grey.
   Only required fields are :invalid while empty, so optional dates stay dark. */
input[type="date"]:invalid::-webkit-datetime-edit {
  color: rgb(116, 116, 116);
}
/* #endregion Calendar */

/* #region Checkbox */
.content {
  &:has(lightning-primitive-input-checkbox) {
    label.slds-visible {
      font-size: 16px;
      font-weight: 400;
    }
  }
}

.slds-checkbox {
  .slds-checkbox_faux {
    margin-top: -6px;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    box-sizing: border-box;
  }

  .slds-checkbox__label .slds-form-element__label {
    font-weight: 400;
    line-height: 150%; /* 24px */
  }

  input[type="checkbox"] {
    &:focus,
    &:focus-visible {
      & + .slds-checkbox__label .slds-checkbox_faux {
        box-shadow:
          0 0 0 2px #ffffff,
          0 0 0 4px var(--focus-blue) !important;
        outline: 0;
      }
    }

    &:checked {
      & + .slds-checkbox__label {
        .slds-checkbox_faux {
          background-color: var(--dark-gray);
          border: 1px solid var(--dark-gray);

          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;

            border: none !important;
            transform: none !important;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.8684 0.365983C11.1027 0.600393 11.2344 0.918278 11.2344 1.24973C11.2344 1.58119 11.1027 1.89907 10.8684 2.13348L4.61839 8.38348C4.38398 8.61782 4.06609 8.74947 3.73464 8.74947C3.40318 8.74947 3.0853 8.61782 2.85089 8.38348L0.35089 5.88348C0.123192 5.64773 -0.00280077 5.33198 4.72533e-05 5.00423C0.00289528 4.67649 0.134356 4.36297 0.366117 4.13121C0.597877 3.89945 0.911392 3.76799 1.23914 3.76514C1.56688 3.76229 1.88264 3.88829 2.11839 4.11598L3.73464 5.73223L9.10089 0.365983C9.3353 0.131644 9.65318 0 9.98464 0C10.3161 0 10.634 0.131644 10.8684 0.365983Z' fill='white'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 60%; /* Scales the SVG perfectly inside your 20px box */
          }
        }
      }
    }
  }
}
/* #endregion Checkbox */

/* #region Button */
.slds-button {
  font-size: 16px;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

/* The submit button is an <a class="slds-button"> whose component styles win
   over the rule above; 11/15px + the 1px border = 48px high, as on kpt.ch */
es_base_components-button .link-wrapper a.slds-button {
  padding: 11px 15px;
  font-weight: 500;
  line-height: 24px;
}
/* #endregion Button */

/* #region Toast */
.kpt-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 4px;
}

.kpt-toast--success {
  background-color: #c9e7ca;
}

.kpt-toast__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;

  &::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 12.75L11.25 15L15 9.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%23545454' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.kpt-toast__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpt-toast__title {
  margin: 0;
  color: var(--dark-gray);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.kpt-toast__message {
  margin: 0;
  color: var(--mid-gray);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
}
/* #endregion Toast */