.response-form-wrap {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto;
}
.response-form-wrap label {
    display: block;
    font-size: 0.875em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.form-group {
	width: 100%;
    float: left;
    padding: 0 10px;
	margin-bottom: 15px;
}
.form-group.half-col {
	width: 50%;
	float: left;
}
.satisfaction-col {
	text-align: center;
}
.form-group .form-field {
    width: 100%;
	border-radius: 4px;
    background: transparent;
    border: 1px solid #ccc;
}
.form-group .review-submit {
  width: 200px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  display: block;
  padding: 15px 0;
  border-radius: 4px;
  margin: 15px auto 0;
  text-transform: uppercase;
  background: #000;
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
}
.skip-text {
  color: #b2b2b2;
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin: 20px auto 0;
}


@property --satisfaction-pct {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

@property --satisfaction-col {
  syntax: '<color>';
  initial-value: red;
  inherits: true;
}

@property --satisfaction-deg {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: true;
}

@keyframes animationSatisfaction1 {
  from { --satisfaction-pct: 0%; --satisfaction-col: #f000; }
  to { --satisfaction-pct: 99%; --satisfaction-col: #f008; }
}

@keyframes animationSatisfaction2 {
  from { --satisfaction-pct: 10%; --satisfaction-col: #f000; }
  to { --satisfaction-pct: 15%; --satisfaction-col: #f004; }
}

@keyframes animationSatisfaction3 {
  0%, 100% { --satisfaction-deg: 180deg;  }
  25% { --satisfaction-deg: 175deg;  }
  75% { --satisfaction-deg: 185deg;  }
}

@keyframes animationSatisfaction4 {
  0% { --satisfaction-pct: 0%; }
  80% { --satisfaction-pct: 66%; }
  100% { --satisfaction-pct: 50%; }
}

@keyframes animationSatisfaction5 {
  0% { --satisfaction-pct: 0%; --satisfaction-col: #fff0; }
  70% { --satisfaction-pct: 80%; }
  100% { --satisfaction-pct: 65%; --satisfaction-col: #fff6; }
}

.satisfaction {
  --size: 3em;
  --bg: #ddd;
  --line: #3213;
  --base: #fc0;
  --satisfaction-pct: 0%;
  --satisfaction-col: #0000;
  /* this will be used in two descendants, moving it up */
  --active-eyes:
    radial-gradient(closest-side circle at 33.5% 48.5%, #fff calc(6% - 1px), #0000 6%) 0 0 / 3em 3em,
    radial-gradient(closest-side circle at 63.5% 48.5%, #fff calc(6% - 1px), #0000 6%) 0 0 / 3em 3em,
    radial-gradient(closest-side circle at 35% 50%, #000 calc(13% - 1px), #0000 13%) 0 0 / 3em 3em,
    radial-gradient(closest-side circle at 65% 50%, #000 calc(13% - 1px), #0000 13%) 0 0 / 3em 3em;
  font-size: 1em;
  appearance: none;
  container-type: inline-size;
  height: var(--size);
  width: calc(var(--size) * 5);
  border: none; /* Firefox adds a default border */
  position: relative;
  background: 
    /* mouths */
    radial-gradient(50% 100% at 50% 105%, #0000 calc(85% - 1px),  var(--line) 85% calc(100% - 1px), #0000) 0.9em 70% / 1.2em 0.5em no-repeat,
    radial-gradient(45% 75% at 50% 110%, #0000 calc(75% - 1px), var(--line) 75% calc(100% - 1px), #0000) 4em 65% / 1em 0.35em no-repeat,
    linear-gradient(#0000 33.33%, var(--line) 0 66.66%, #0000 0) 6.9em 69% / 1.2em 0.3em no-repeat,          radial-gradient(35% 70% at 50% -10%, #0000 calc(72% - 1px), var(--line) 72% calc(100% - 1px), #0000) 9.9em 75% / 1.2em 0.35em no-repeat,
    radial-gradient(45% 100% at 50% -5%, #0000 calc(85% - 1px), var(--line) 85% calc(100% - 1px), #0000) 12.8em 75% / 1.4em 0.5em no-repeat,
    /* face + eyes */
    radial-gradient(closest-side circle at 35% 50%, var(--line) calc(13% - 1px), #0000 13%) 0 0 / 3em 3em,
    radial-gradient(closest-side circle at 65% 50%, var(--line) calc(13% - 1px), #0000 13%) 0 0 / 3em 3em,
    radial-gradient(closest-side circle, #ddd calc(90% - 1px), #0000 90%) 0 0 / 3em 3em;;
  border: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color: inherit;
  outline-offset: 5px;
}

.satisfaction::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(3em * (var(--val) - 1));
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 0.1em dashed currentcolor;
  box-sizing: border-box;
}

.satisfaction[style*="1"] {
  animation: animationSatisfaction1 0.2s forwards;
  --face: 
    radial-gradient(50% 100% at 50% 105%, #0000 calc(85% - 1px), #000 85% calc(100% - 1px), #0000) 0.9em 70% / 1.2em 0.5em no-repeat,
    radial-gradient(90% 90% at 50% 10%, var(--satisfaction-col), #f000 var(--satisfaction-pct)) 0 0 / 3em 3em;
}

.satisfaction[style*="2"] {
  animation: animationSatisfaction2 0.4s forwards;
  --face: 
    radial-gradient(45% 75% at 50% 110%, #0000 calc(75% - 1px), #000 75% calc(100% - 1px), #0000) 1em 65% / 1em var(--satisfaction-pct) no-repeat,
    radial-gradient(90% 90% at 50% 10%, var(--satisfaction-col), #f000 70%) 0 var(--satisfaction-pct) / 3em 3em;
}

.satisfaction[style*="3"] {
  animation: animationSatisfaction3 0.55s forwards;
  --face: 
    linear-gradient(var(--satisfaction-deg), #0000 33.33%, #000 0 66.66%, #0000 0) 0.9em 69% / 1.2em 0.3em no-repeat;
}

.satisfaction[style*="4"] {
  animation: animationSatisfaction4 0.35s forwards;
  --face: 
    radial-gradient(35% 70% at 50% -10%, #0000 calc(72% - 1px), #000 72% calc(100% - 1px), #0000) 0.9em 75% / 1.2em 0.35em no-repeat,
    radial-gradient(farthest-side, #f004 calc(var(--satisfaction-pct) - 1px), #0000 var(--satisfaction-pct)) 0.3em 57% / 1.1em 0.6em,
    radial-gradient(farthest-side, #f004 calc(var(--satisfaction-pct) - 1px), #0000 var(--satisfaction-pct)) 1.6em 57% / 1.1em 0.6em
    ;
}

.satisfaction[style*="5"] {
  animation: animationSatisfaction5 0.25s forwards;
  --face: 
    radial-gradient(45% 100% at 50% -5%, #0000 calc(85% - 1px), #000 85% calc(100% - 1px), #0000) 0.8em 75% / 1.4em 0.5em no-repeat,
    radial-gradient(farthest-side, #f006 calc(var(--satisfaction-pct) - 1px), #0000 var(--satisfaction-pct)) 0.25em 57% / 1em 0.65em,
    radial-gradient(farthest-side, #f006 calc(var(--satisfaction-pct) - 1px), #0000 var(--satisfaction-pct)) 1.75em 57% / 1em 0.65em,
    radial-gradient(farthest-side circle at 50% 20%, var(--satisfaction-col), #0000 60%) 0 0% / 3em 3em
    ;
}

/* Thumb for Chrome and Safari */
.satisfaction::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 3em;
  aspect-ratio: 1;
  pointer-events: none;
  mask: radial-gradient(closest-side circle, #fc0 calc(90% - 1px), #0000 90%) 0 0 / 3em 3em;
  background: 
    /* eyes */
    var(--active-eyes),
    /* mouths */
    var(--face),
    /* base color*/
    var(--base);
  ;
  background-repeat: no-repeat;
  box-shadow: none; /* Safari adds a box-shadow when using drop-shadow on iOS, remove manually */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Thumb for Firefox */
.satisfaction::-moz-range-thumb {
  --bg: #fc0;
  --line: #000;
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 3em;
  height: 3em;
  pointer-events: none;
  border: none;
  mask: radial-gradient(closest-side circle, #fc0 calc(90% - 1px), #0000 90%) 0 0 / 3em 3em;
  background: 
    /* eyes */
    var(--active-eyes),
    /* mouths */
    var(--face),
    /* base color*/
    var(--base);
  ;
  background-repeat: no-repeat;
  box-shadow: none; /* Safari adds a box-shadow when using drop-shadow on iOS, remove manually */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* if the user selected reduction motion, remove the animations */
@media (prefers-reduced-motion) {
  .satisfaction {
    animation-duration: 0s !important;
  }
}

/* preserve styles when printing */
@media print {
  .satisfaction, .satisfaction::before, .satisfaction::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (prefers-contrast: more) {
  .satisfaction {
    /* WIP */
  }
}