:root {
  --preventieOrange: #E98300;
  --preventieGreen: #359B3C;
  --preventiePurple: #9C1981;
  --preventieRed: #DD3734;
  --preventieLightBlue: #196BB2;
  --preventieYellow: #F6C547;
  --preventieDefault: #17445B;
}

.modal-header h1 {
  text-transform: capitalize
}

.modal-header h1 .modal-content, form.webform-submission-form, form.webform-submission-form .webform-button--submit {
  color: #494949;
}

form.webform-submission-form .webform-button--submit {
  border: transparent !important;
  background-color: var(--preventieDefault);
  color: white;
}

form.webform-submission-form .webform-button--submit,
form.webform-submission-form input,
form.webform-submission-form textarea,
.modal-content {
  border-radius: 0;
}

.modal-content {
  border: none;
}

.rating-field legend {
  font-size: 16px;
  line-height: 22px;
}

.rating-field .webform-options-display-buttons-wrapper {
  display: flex;
  justify-content: center;
  flex: none;
  margin: 0 4px !important;
}

.rating-field .js-form-item label {
  display: flex;
  cursor: pointer;
  text-indent: -9999px;
  border: none;
  padding: 0;
  margin: 0 !important;
}

.rating-field .js-form-item label:after {
  content: '';
  display: block;
  background-image: url('/themes/custom/preventiemethodieken/images/icons/star-regular.svg');
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(21%) sepia(14%) saturate(2344%) hue-rotate(156deg) brightness(94%) contrast(90%);
  width: 20px;
  height: 20px;
  transition: .5s all ease;
}

.rating-field .webform-options-display-buttons .form-check-input:checked ~ .form-check-label:after,
.rating-field .webform-options-display-buttons label.selected:after {
  content: '';
  display: block;
  background-image: url('/themes/custom/preventiemethodieken/images/icons/star-solid.svg');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}


form.webform-submission-form fieldset:not(:last-of-type).rating-field {
  margin-bottom: 8px !important;
}

.webform-confirmation__back {
  display: none;
}

#page-wrapper.orange {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(64%) sepia(52%) saturate(5824%) hue-rotate(9deg) brightness(101%) contrast(101%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventieOrange);
  }
}

#page-wrapper.green {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(5560%) hue-rotate(74deg) brightness(107%) contrast(78%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventieGreen);
  }
}

#page-wrapper.purple {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(14%) sepia(80%) saturate(3199%) hue-rotate(297deg) brightness(102%) contrast(95%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventiePurple);
  }
}

#page-wrapper.red {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(50%) sepia(50%) saturate(2789%) hue-rotate(326deg) brightness(78%) contrast(129%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventieRed);
  }
}

#page-wrapper.light-blue {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(34%) sepia(75%) saturate(811%) hue-rotate(171deg) brightness(91%) contrast(92%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventieLightBlue);
  }
}

#page-wrapper.yellow {
  .rating-field .js-form-item label:after {
    filter: brightness(0) saturate(100%) invert(82%) sepia(11%) saturate(2562%) hue-rotate(349deg) brightness(103%) contrast(93%);
  }
  form.webform-submission-form .webform-button--submit {
    background-color: var(--preventieYellow);
  }
}

.formModalToggle {
  position: fixed;
  bottom: 8px;
  right: 65px;
  padding: 5px;
  width: 50px;
  height: 48px;
  //background-color: var(--preventieDefault);
  background-color: white;
  border-radius: 50%;
  border: 1px solid var(--preventieDefault);
  img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(360%) hue-rotate(154deg) brightness(96%) contrast(93%);
  }
}

/* Popup animate effect */
/* Smooth transition for modal content */
.modal-content {
  transition: transform 0.7s ease, opacity 0.3s ease;
}

/* Minimized state: move to bottom-right and scale down */
.modal-content.minimized {
  transform: translate(calc(100vw - 120px), calc(100vh - 80px)) scale(0.3);
  opacity: 0.5;
  pointer-events: none;
}


@media screen and (max-width: 600px) {
  form.webform-submission-form .js-webform-radios {
    display: flex;
    margin: 0 -5px
  }
  .rating-field .js-form-item label:after,
  .rating-field .webform-options-display-buttons .form-check-input:checked ~ .form-check-label:after,
  .rating-field .webform-options-display-buttons label.selected:after {
    width: 16px;
    height: 16px;
  }
}