/*
   GRAVITY FORMS STAR RATING
   - 5 stars in a row
   - Outline remains (stroke #9ca3af)
   - Fill #A81663 when selected
   - Hovered star grows slightly in size
*/

/* 1) Remove any <br> tags GF or theme might insert */
.star-rating .gfield_radio br {
  display: none !important;
}

/* 2) Horizontal layout via flexbox */
.star-rating .gfield_radio {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Each .gchoice is inline-flex */
.star-rating .gfield_radio .gchoice {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* 4) Hide native radio buttons */
.star-rating .gfield_radio .gchoice input[type="radio"] {
  display: none !important;
}

/* 5) The label is our star container */
.star-rating .gfield_radio .gchoice label {
  display: inline-block !important;
  position: relative !important;
  width: 2rem !important;    /* Adjust star size */
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-indent: -9999px !important; /* Hide numeric text like “1”, “2” */
  overflow: hidden !important;
  font-size: 0 !important;
  transition: transform 0.15s ease; /* for hover scale effect */
}

/* 6) On hover, grow the star slightly (no color change) */
.star-rating .gfield_radio .gchoice label:hover {
  transform: scale(1.1) !important;
}

/*
   7) Outline star (default).
   - stroke="#9ca3af" for the outline
   - fill="none"
   - We encode '#' as '%23' to avoid URI parsing issues
*/
.star-rating .gfield_radio .gchoice label::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") 
              no-repeat center / contain !important;
}

/*
   8) Filled star (when label has .filled).
   - stroke="#9ca3af", fill="#A81663"
*/
.star-rating .gfield_radio .gchoice label.filled::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23DB3C8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='%23DB3C8E'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") 
              no-repeat center / contain !important;
}

/* Hide any star icon for the N/A choice */
.star-rating .gfield_radio .gchoice input[type="radio"][value="N/A"] + label::before {
  content: none !important;
  background: none !important;
}

/* N/A button default (unselected): white background, grey outline */
.star-rating .gfield_radio .gchoice input[type="radio"][value="N/A"] + label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem 0.5rem !important;
  background: #fff !important;   /* white background */
  color: var(--body) !important;        /* black text */
  border: 2px solid var(--line-grey) !important; /* grey outline */
  border-radius: 4px !important;
  font-size: var(--fs--2) !important;
  font-weight: 500;
  text-indent: 0 !important;   /* override star text-indent */
  transform: none !important; 
  transition: none !important; 
}

/* N/A button when selected (checked): pink background, white text */
.star-rating .gfield_radio .gchoice input[type="radio"][value="N/A"]:checked + label {
  background: var(--primary) !important; /* pink BG */
  color: #fff !important;
  border-color: var(--primary) !important;
}

.gform-theme--foundation .gform_fields {
  gap: var(--space-m) !important;
}

.gfield_label.gform-field-label {
  margin: 0 !important;
}

.gform-theme--framework .gf_progressbar .percentbar_blue {
  background-color: var(--primary) !important;
}

.gform-theme--foundation .gform_page_footer {
  justify-content: space-between !important;
}

.gform_previous_button.gform-theme-button.gform-theme-button--secondary.button,
.gform_next_button.gform-theme-button.button,
input[type=submit].gform_button.button {
  padding: var(--space-2xs) var(--space-l) !important;
	border-radius: .25rem !important;
	transition: .2s ease-in-out !important;
	line-height: var(--space-m) !important;
	font-size: var(--fs--1) !important;
	font-weight: 500 !important;
	text-transform: capitalize !important;
}

.gform_next_button.gform-theme-button.button {
  background-color: var(--body) !important;
  color: #fff !important;
}

.gform_previous_button.gform-theme-button.gform-theme-button--secondary.button {
  color: var(--body) !important;
  border-color: var(--line-grey) !important;
  box-shadow: none !important;
}

input[type=submit].gform_button.button {
  background-color: var(--pink) !important;	display: block;
}
input[type=submit].gform_button.button:hover {
  background-color: var(--primary) !important;
}