/* CSS Properties */
form[onsubmit*="window.kentico"] {
  --input-height: 40px;
  --radius-size: 20px;
  --input-width: 200px;
  --toggle-size: 15px;
  --gap-size: 15px;
}

.form__content {
  margin-bottom: 30px;
}

.form__subcontent {
  margin-top: 30px;
}

/* Layout */
form .ktc-default-section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-size);
  margin-bottom: var(--gap-size);
}

.form-field {
  width: var(--input-width);
}
.form-field:has(textarea) {
  width: calc(2 * var(--input-width) + var(--gap-size));
}

.page__content
  .form-field:not(:has(.control-label))
  .editing-form-control-nested-control {
  margin-left: 335px;
}

.page__content .form-field .form-control:not([type="date"]) {
  cursor: pointer;
}

/* Labels */
.form-field .control-label {
  display: inline-block;
  font-size: 15px;
  padding-left: 5px;
  margin-bottom: 5px;
}

/* Inputs */
.form-field .form-control {
  border-radius: var(--radius-size);
  border: 1px solid #aaa;
  line-height: 20px;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.form-field
  :is(input:not([type="checkbox"], [type="radio"]), select).form-control {
  height: var(--input-height);
}

.form-field .form-control:is(*:focus, *:focus-visible) {
  border: 1px solid #333;
  outline: none;
}

.page__content
  .form-field
  input.form-control:not([type="date"]):not([type="checkbox"]):not(
    [type="radio"]
  ) {
  cursor: text;
}

/* Textarea */
.form-field textarea.form-control {
  resize: none;
  padding: 10px 15px;
  min-height: 10em;
  background-clip: padding-box;
  overflow-y: scroll;
  outline: 1px solid #aaa;
  border: none;
}
.form-field textarea.form-control:focus {
  outline: 1px solid #333;
  border: none;
}

.page__content
  .form-field
  .editing-form-control-nested-control
  textarea.form-control {
  cursor: text;
}

/* Select */
.form-field select.form-control {
  appearance: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M7 10L12 15L17 10" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat;
  background-position: right 5px top 50%;
  padding-right: 35px;
}
.form-field select.form-control:focus {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17 15L12 10L7 15" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat;
  background-position: right 5px top 50%;
}

/* Radios & Checkboxes */
.ktc-radio-list,
.ktc-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ktc-radio-list .ktc-radio .form-control,
.ktc-checkbox-list .ktc-checkbox .form-control {
  margin: 0;
}
:is(.ktc-radio, .ktc-checkbox) input.form-control {
  width: unset;
}
.ktc-checkbox label p {
  margin: 0;
}

.page__content .form-field .form-control[type="checkbox"],
.page__content .form-field .form-control[type="radio"] {
  width: var(--toggle-size);
  aspect-ratio: 1;
}

/* Validation States */
.page__content .form-field .form-control.input-validation-error {
  border-color: rgb(255, 108, 108);
}
.page__content .form-field .form-control.input-validation-error:focus {
  border-color: rgb(180, 58, 58);
}

.page__content .form-field textarea.form-control.input-validation-error {
  outline-color: rgb(255, 108, 108);
}
.page__content .form-field textarea.form-control.input-validation-error:focus {
  outline-color: rgb(180, 58, 58);
}

.page__content .form-field .field-validation-error {
  color: red;
  display: flex;
  align-items: stretch;
  padding: 5px;
}
.page__content .form-field .field-validation-error::before {
  content: "";
  height: 16px;
  width: 16px;
  background: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" style="display: block;"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1c.523 0 .798.595.894.789l6.5 12.764A1 1 0 0 1 14.5 16h-13a1 1 0 0 1-.894-1.447l6.5-12.764C7.351 1.295 7.475 1 8 1Zm0 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM9.5 6h-3l.5 4h2l.5-4Z" fill="red"></path></svg>')
    no-repeat;
  display: inline-block;
  margin-right: 5px;
}

/* Submit Button */
form[onsubmit*="window.kentico"] input[type="submit"] {
  height: var(--input-height);
  border-radius: var(--radius-size);
  border: none;
  width: var(--input-width);
  cursor: pointer;
  background-color: rgb(49, 103, 156);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
}
form[onsubmit*="window.kentico"] input[type="submit"]:hover {
  filter: brightness(90%);
}

/* reCAPTCHA */
.form-field:has(div[id*="google-recaptcha"]) {
  max-width: calc(100vw - 50px);
}

/* Layout & Labels */
.page__content .form-field {
  width: 100%;
  font-size: 15px !important;
}

.page__content .form-field .control-label {
  display: inline-block;
  font-size: 15px;
  padding-left: 5px;
  vertical-align: middle;
  margin-bottom: 0;
  width: 320px;
  text-align: right;
}

.page__content .editing-form-control-nested-control {
  font-size: 15px !important;
  vertical-align: middle;
  display: inline-block;
  max-width: calc(100% - 340px);
  margin-left: 15px;
}

.explanation-text {
  margin-left: 343px;
  color: #595959;
  margin-top: 8px;
}

/* Inputs */
.page__content .form-field .form-control {
  border-radius: 0;
  border: 1px solid #c5c5c5;
}

.page__content .form-field .form-control[type="file"] {
  display: none;
}

.page__content .form-field .ktc-radio-list,
.page__content .form-field .ktc-checkbox {
  font-size: 15px;
}

.page__content .form-field .ktc-checkbox input,
.page__content .form-field .ktc-checkbox label {
  vertical-align: middle;
}

/* Textarea */
.page__content .form-field textarea.form-control {
  outline: 1px solid #c5c5c5;
  border: 0;
  overflow: auto;
  width: 450px;
  max-width: 100%;
}

/* Submit Button */
.page__content form[onsubmit*="window.kentico"] input[type="submit"] {
  margin-left: 335px;
  background-color: rgba(51, 85, 123, 1);
  color: white;
  transition: background-color 0.8s;
}
.page__content form[onsubmit*="window.kentico"] input[type="submit"]:hover {
  filter: brightness(100%);
  background-color: black;
}

/* File Upload */
.page__content .ktc-file-component-wrapper label {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #767676;
  border-radius: 2px;
  background-color: #f0f0f0;
  cursor: pointer;
}
.page__content .ktc-file-component-wrapper label:hover {
  background-color: #e0e0e0;
  border-color: #444;
}

.ktc-uploader-replacement {
  display: none;
}

.ktc-uploader-text-button {
  cursor: pointer;
}

.ktc-fieldset-wrapper {
  border: 0;
  margin-inline: 0;
  padding: 0;
}

/* File selected - remove button styles, show as plain text */
.page__content .ktc-file-component-wrapper:has([data-icon="remove"]) label {
  background-color: transparent;
  border-color: transparent;
  padding-left: 0;
  border-radius: 0;
}

/* Responsive */

@media screen and (max-width: 900px) {
  .page__content .form-field .control-label {
    width: 100%;
    text-align: left;
    display: block;
    margin-bottom: 5px;
    padding-left: 0;
  }

  .page__content .editing-form-control-nested-control {
    margin-left: 0;
    max-width: 100%;
  }

  .page__content form[onsubmit*="window.kentico"] input[type="submit"] {
    margin-left: 0;
  }

  .explanation-text {
    margin-left: 0;
    margin-top: 4px;
  }

  .page__content
    .form-field:not(:has(.control-label))
    .editing-form-control-nested-control {
    margin-left: 0;
  }
}

@media screen and (max-width: 512px) {
  .page__content .form-field textarea.form-control {
    width: calc(100vw - 47px);
  }
}

@media screen and (max-width: 500px) {
  .form-field,
  .form-field:has(textarea),
  form[onsubmit*="window.kentico"] input[type="submit"] {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .editing-form-control-nested-control:has(
    iframe[src*="google.com/recaptcha/"]
  ) {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

@media screen and (max-width: 320px) {
  .editing-form-control-nested-control:has(
    iframe[src*="google.com/recaptcha/"]
  ) {
    transform: scale(0.75);
    transform-origin: 0 0;
  }
}

@media screen and (max-width: 280px) {
  .editing-form-control-nested-control:has(
    iframe[src*="google.com/recaptcha/"]
  ) {
    transform: scale(0.65);
    transform-origin: 0 0;
  }
}