@charset "UTF-8";
/*!
 * YA Image Choices — trimmed subset of "Gravity Forms Image Choices" by JetSloth.
 * © JetSloth — SPDX-License-Identifier: GPL-2.0-or-later
 * Keeps only what the Core24 Enquiry form uses: circle theme, 6/3/3 responsive
 * columns, labels, selected tick badge. No lightbox / product-image / other themes.
 */

/* ---------------------------------------------------------------------------
 * Base tokens
 * ------------------------------------------------------------------------- */
.image-choices-field {
  --ic-image-background-color: transparent;
  --ic-feature-color: #0076FF;
  --ic-column-spacing: 20px;
  --ic-row-spacing: var(--ic-column-spacing);
  --ic-width: 200px;
  --ic-height: 200px;
  --ic-width-medium: var(--ic-width);
  --ic-height-medium: var(--ic-height);
  --ic-width-small: var(--ic-width);
  --ic-height-small: var(--ic-height);
  --ic-padding: 0;
  --ic-text-font: Helvetica Neue, Helvetica, Arial, sans-serif;
  --ic-text-weight: normal;
  --ic-text-size: 14px;
  --ic-text-line-height: 1.4;
  --ic-text-color: #121212;
  --ic-selected-text-color: var(--ic-feature-color);
  --ic-transition-duration: 0.2s;
  --ic-transition-easing: ease-out;
  --ic-selected-icon: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.78166 11.4512C5.07642 11.7805 5.50218 12 5.92795 12C6.35371 12 6.77948 11.8171 7.07424 11.4512L14.5087 3.14634C15.1638 2.41463 15.1638 1.28049 14.5087 0.54878C13.8537 -0.182927 12.8384 -0.182927 12.1834 0.54878L5.92795 7.57317L2.81659 4.09756C2.16157 3.36585 1.14629 3.36585 0.491266 4.09756C-0.163755 4.82927 -0.163755 5.96341 0.491266 6.69512L4.78166 11.4512Z' fill='white'/%3E%3C/svg%3E%0A");
  --ic-selected-icon-size: 36px;
}

/* ---------------------------------------------------------------------------
 * GF theme-framework layout: choices as a wrapping flex row
 * ------------------------------------------------------------------------- */
.gfield.image-choices-field .gfield_checkbox,
.gfield.image-choices-field .gfield_radio,
.gform_legacy_markup_wrapper .gfield.image-choices-field .gfield_checkbox,
.gform_legacy_markup_wrapper .gfield.image-choices-field .gfield_radio,
.gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gfield_radio,
.gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gfield_checkbox,
.gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gfield_radio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: var(--ic-column-spacing);
  row-gap: var(--ic-row-spacing);
}

.gfield.image-choices-field .gfield-choice-input + label,
.gfield.image-choices-field .gform-field-label,
.gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gfield-choice-input + label,
.gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gform-field-label,
.gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gfield-choice-input + label,
.gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gform-field-label {
  margin-left: 0;
  max-width: 100%;
}

.gfield.image-choices-field .image-choices-choice,
.gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .image-choices-choice,
.gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .image-choices-choice {
  display: inline-block;
}

.gform_legacy_markup_wrapper .image-choices-field ul.gfield_radio li,
.gform_legacy_markup_wrapper .image-choices-field ul.gfield_checkbox li {
  overflow: visible;
}

.image-choices-field .image-choices-choice {
  position: relative;
}

.image-choices-choice input[disabled] ~ label {
  opacity: 0.5;
  pointer-events: none;
}

/* Visually hide the native control and the (decorative) <img> — the icon shows
 * as a background-image on the wrap, exactly as the original does. */
.image-choices-choice input[type=radio],
.image-choices-choice input[type=checkbox],
.image-choices-field .image-choices-choice-image {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.image-choices-choice .gform-field-label {
  position: relative;
  cursor: pointer;
}

.image-choices-choice-image-wrap {
  background-color: var(--ic-image-background-color);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
}

/* Label hidden only when show-labels is off (not the case for Core24, kept for parity) */
.image-choices-field:not(.image-choices-show-labels) .image-choices-choice-text {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.image-choices-field[class*=ic-theme--] .image-choices-choice-text {
  font-family: var(--ic-text-font);
  font-weight: var(--ic-text-weight);
  font-size: var(--ic-text-size);
  line-height: var(--ic-text-line-height);
  color: var(--ic-text-color);
}
.image-choices-field[class*=ic-theme--] .image-choices-choice-selected .image-choices-choice-text {
  color: var(--ic-selected-text-color);
}

/* The active theme's style.css positions the circle's selected-tick badge with
 *   top: calc(var(--ic-height-medium) / 2.3333) !important
 * The old plugin's global inline CSS set --ic-width-medium (hence
 * --ic-height-medium) to 256px, giving a badge offset of ~110px. Feed the same
 * value here so the badge stays exactly where it is today. */
.image-choices-field[class*=ic-theme--] {
  --ic-height-medium: 256px;
}

/* ---------------------------------------------------------------------------
 * Theme: Circle
 * ------------------------------------------------------------------------- */
.ic-theme--circle {
  --ic-image-background-color: #efefef;
  --ic-padding: 10px;
  /* Max diameter of the icon circle. The original plugin nominally used 170px
     but this form clamped it to 140 via custom CSS (`max-height:140px`), which
     is what produced stretched ovals on wide viewports — the width tracked the
     column while the height stayed pinned at 140. We keep the 140 size but lock
     a 1:1 ratio below so it stays a circle at every width. */
  --ic-width: 140px;
  --ic-height: var(--ic-width);
  --ic-selected-icon-size: 36px;
}

.ic-theme--circle .image-choices-choice .gform-field-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}

/* Selected tick badge, centred on the circle */
.ic-theme--circle .image-choices-choice .gform-field-label:after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: calc(var(--ic-height) / 2);
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: var(--ic-feature-color);
  background-image: var(--ic-selected-icon);
  background-position: 50%;
  background-size: var(--ic-selected-icon-size);
  background-repeat: no-repeat;
  z-index: 3;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform var(--ic-transition-duration) var(--ic-transition-easing),
              opacity var(--ic-transition-duration) var(--ic-transition-easing);
}
.ic-theme--circle .image-choices-choice:not(.image-choices-choice-selected) .gform-field-label:after {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}

.ic-theme--circle .image-choices-choice-image-wrap {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ic-width);
  aspect-ratio: 1 / 1;   /* keep it a circle regardless of column width */
  height: auto;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: var(--ic-padding) solid #ffffff;
  box-shadow: 10px 20px 50px rgba(7, 30, 87, 0.2);
}

.ic-theme--circle .image-choices-choice-text {
  display: block;
  position: relative;
  text-align: center;
  transition: all var(--ic-transition-duration) var(--ic-transition-easing);
}

/* ---------------------------------------------------------------------------
 * Responsive columns (same breakpoints/values as the original)
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1080px) {
  .ic-cols--12 .image-choices-choice { width: calc(8.333% - var(--ic-column-spacing)); }
  .ic-cols--11 .image-choices-choice { width: calc(9.09% - var(--ic-column-spacing)); }
  .ic-cols--10 .image-choices-choice { width: calc(10% - var(--ic-column-spacing)); }
  .ic-cols--9 .image-choices-choice  { width: calc(11.111% - var(--ic-column-spacing)); }
  .ic-cols--8 .image-choices-choice  { width: calc(12.5% - var(--ic-column-spacing)); }
  .ic-cols--7 .image-choices-choice  { width: calc(14.285% - var(--ic-column-spacing)); }
  .ic-cols--6 .image-choices-choice  { width: calc(16.666% - var(--ic-column-spacing)); }
  .ic-cols--5 .image-choices-choice  { width: calc(20% - var(--ic-column-spacing)); }
  .ic-cols--4 .image-choices-choice  { width: calc(25% - var(--ic-column-spacing)); }
  .ic-cols--3 .image-choices-choice  { width: calc(33.333% - var(--ic-column-spacing)); }
  .ic-cols--2 .image-choices-choice  { width: calc(50% - var(--ic-column-spacing)); }
  .ic-cols--1 .image-choices-choice  { width: calc(100% - var(--ic-column-spacing)); }
}
@media only screen and (min-width: 640px) and (max-width: 1079px) {
  .ic-cols-md--12 .image-choices-choice { width: calc(8.333% - var(--ic-column-spacing)); }
  .ic-cols-md--11 .image-choices-choice { width: calc(9.09% - var(--ic-column-spacing)); }
  .ic-cols-md--10 .image-choices-choice { width: calc(10% - var(--ic-column-spacing)); }
  .ic-cols-md--9 .image-choices-choice  { width: calc(11.111% - var(--ic-column-spacing)); }
  .ic-cols-md--8 .image-choices-choice  { width: calc(12.5% - var(--ic-column-spacing)); }
  .ic-cols-md--7 .image-choices-choice  { width: calc(14.285% - var(--ic-column-spacing)); }
  .ic-cols-md--6 .image-choices-choice  { width: calc(16.666% - var(--ic-column-spacing)); }
  .ic-cols-md--5 .image-choices-choice  { width: calc(20% - var(--ic-column-spacing)); }
  .ic-cols-md--4 .image-choices-choice  { width: calc(25% - var(--ic-column-spacing)); }
  .ic-cols-md--3 .image-choices-choice  { width: calc(33.333% - var(--ic-column-spacing)); }
  .ic-cols-md--2 .image-choices-choice  { width: calc(50% - var(--ic-column-spacing)); }
  .ic-cols-md--1 .image-choices-choice  { width: calc(100% - var(--ic-column-spacing)); }
}
@media only screen and (max-width: 639px) {
  .ic-cols-sm--12 .image-choices-choice { width: calc(8.333% - var(--ic-column-spacing)); }
  .ic-cols-sm--11 .image-choices-choice { width: calc(9.09% - var(--ic-column-spacing)); }
  .ic-cols-sm--10 .image-choices-choice { width: calc(10% - var(--ic-column-spacing)); }
  .ic-cols-sm--9 .image-choices-choice  { width: calc(11.111% - var(--ic-column-spacing)); }
  .ic-cols-sm--8 .image-choices-choice  { width: calc(12.5% - var(--ic-column-spacing)); }
  .ic-cols-sm--7 .image-choices-choice  { width: calc(14.285% - var(--ic-column-spacing)); }
  .ic-cols-sm--6 .image-choices-choice  { width: calc(16.666% - var(--ic-column-spacing)); }
  .ic-cols-sm--5 .image-choices-choice  { width: calc(20% - var(--ic-column-spacing)); }
  .ic-cols-sm--4 .image-choices-choice  { width: calc(25% - var(--ic-column-spacing)); }
  .ic-cols-sm--3 .image-choices-choice  { width: calc(33.333% - var(--ic-column-spacing)); }
  .ic-cols-sm--2 .image-choices-choice  { width: calc(50% - var(--ic-column-spacing)); }
  .ic-cols-sm--1 .image-choices-choice  { width: calc(100% - var(--ic-column-spacing)); }
}

/* ---------------------------------------------------------------------------
 * Core24 Enquiry form's own custom CSS (was in the GF Image Choices form setting).
 * The original was `.image-choices-choice-image-wrap { max-height: 140px }`,
 * which capped only the height and left the width free — that is exactly what
 * squashed the circles into ovals on wide screens. It is superseded by the
 * `max-width: var(--ic-width)` + `aspect-ratio: 1 / 1` on the circle wrap above,
 * so it is intentionally not carried over.
 * ------------------------------------------------------------------------- */