/* Hide the default radio button input */
#edit-field-es-csat-q1-1,
#edit-field-es-csat-q1-2,
#edit-field-es-csat-q1-3,
#edit-field-es-csat-q1-4,
#edit-field-es-csat-q1-5 {
  display: none;
}

#edit-field-es-csat-q1 {
  display: flex;
  flex-flow: wrap;
  margin-top: 16px;
}

.js-form-item-field-es-csat-q1 {
  text-align: center;
  position: relative;
  border: solid transparent 1px;
  background-color: white;
  flex: 0 0 calc(100% / 2 - 10px);
  margin: 0 10px 10px 0;
  gap: 0;
  flex-flow: column;
  padding: 0 .5rem .5rem;
}

@media (min-width: 768px) {

  .js-form-item-field-es-csat-q1 {
    flex: 1;
  }
}

.js-form-item-field-es-csat-q1:hover {
  background-color: rgba(121, 172, 66, .3);
  border-color: rgba(121, 172, 66, .3);
  color: white;
}

.webform-submission-content-satisfaction-survey-form #edit-field-es-csat-q1--wrapper-legend {
  text-align: center;
  margin: 0 auto;
  font-weight: bold;
}


.js-form-item-field-es-csat-q1.selected-radio {
  background-color: rgba(121, 172, 66, .3);
}

/* Optional: Add some transition effect */
.js-form-item-field-es-csat-q1 .option {
  transition: background-color 0.3s ease;
}

/* Add the images using the ::before pseudo-element */
.js-form-item-field-es-csat-q1:nth-child(1)::before {
  content: url('../images/cust-sat-image1.png');
  display: block;
  margin: 0 auto 5px auto;
}

.js-form-item-field-es-csat-q1:nth-child(2)::before {
  content: url('../images/cust-sat-image2.png');
  display: block;
  margin: 0 auto 5px auto;
}

.js-form-item-field-es-csat-q1:nth-child(3)::before {
  content: url('../images/cust-sat-image3.png');
  display: block;
  margin: 0 auto 5px auto;
}

.js-form-item-field-es-csat-q1:nth-child(4)::before {
  content: url('../images/cust-sat-image4.png');
  display: block;
  margin: 0 auto 5px auto;
}

.js-form-item-field-es-csat-q1:nth-child(5)::before {
  content: url('../images/cust-sat-image5.png');
  display: block;
  margin: 0 auto 5px auto;
}

/* Ensure the label is below the image */
.js-form-item-field-es-csat-q1 .option {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}

/* Different background positions for each rating */
#edit-field-es-csat-q1-1 + label {
  background-position: 0 0; /* Position for the 1st star */
}
#edit-field-es-csat-q1-2 + label {
  background-position: -32px 0; /* Position for the 2nd star */
}
#edit-field-es-csat-q1-3 + label {
  background-position: -64px 0; /* Position for the 3rd star */
}
#edit-field-es-csat-q1-4 + label {
  background-position: -96px 0; /* Position for the 4th star */
}
#edit-field-es-csat-q1-5 + label {
  background-position: -128px 0; /* Position for the 5th star */
}

/* Change the background when the radio button is checked */
#edit-field-es-csat-q1-1:checked + label,
#edit-field-es-csat-q1-2:checked + label,
#edit-field-es-csat-q1-3:checked + label,
#edit-field-es-csat-q1-4:checked + label,
#edit-field-es-csat-q1-5:checked + label {
  filter: brightness(1.2); /* Brighten or change color when selected */
}

#edit-actions {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
}

.form-actions {
  display: flex;
  clear: both;
  justify-content: center;
}

/* Apply Bootstrap-like styling to the submit button */
.webform-submission-content-satisfaction-survey-form .webform-button--next,
.webform-submission-content-satisfaction-survey-form .webform-button--submit {
  display: inline-block;
  font-weight: bold;
  color: #0B0F22;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  border-color: #00EEA3;
  border: 2px solid #00EEA3;
  padding: 0.75rem 1.5rem;
  height: auto;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.webform-submission-content-satisfaction-survey-form .webform-button--next:hover,
.webform-submission-content-satisfaction-survey-form .webform-button--submit:hover {
  background-color: #00EEA3;
  border-color: #00EEA3;
}

/* Add focus state */
#edit-wizard-next:focus {
  outline: 0;
}

.messages {
  padding: 15px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.messages--status {
  background-color: #deecce;
  border-color: #d8e5bb;
  color: #456226;
  text-align: center;
}


/* Target the specific form items and make them flex containers */
@media (min-width: 768px) {
  .js-form-item-field-es-csat-q2,
  .js-form-item-field-es-csat-q3 {
    width: 50%;
    float: left;
    padding: 0 .5rem;
  }
}

.js-form-item-field-es-csat-q2 label,
.js-form-item-field-es-csat-q3 label {
  text-align: center;
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.custom-no-thanks {
  background-color: transparent !important;
  border: none !important;
  color: #7CA04A !important;
}

.custom-no-thanks:hover {
  color: #8bb154;
  text-decoration: underline;
}

.webform-confirmation {
  background-color: #deecce;
  color: #456226;
  text-align: center;
  padding: 15px;
  border: 1px solid #d8e5bb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: -8px 0 0 #77b259;
  margin-left: 8px;
}

.webform-confirmation .webform-confirmation__message {
  margin: 0;
}