/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Child theme for Divi
Author: Your Name
Author URI: https://yourwebsite.com
Template: Divi
Version: 1.0.0
*/

/* =========================================================
   Gravity Forms Configurator - Clean Image Choice Styling
   Form ID: 1
   ========================================================= */


/* ---------------------------------------------------------
   Main variables
   --------------------------------------------------------- */

#gform_wrapper_1 {
  --bat-card-width: 330px;
  --bat-card-height: 330px;
  --bat-image-height: 225px;
  --bat-card-gap: 32px;
}


/* ---------------------------------------------------------
   Image choice field heading
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gfield_label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}


/* ---------------------------------------------------------
   Choice row
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gfield_radio,
#gform_wrapper_1 .gfield--type-image_choice .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: var(--bat-card-gap) !important;
  width: 100% !important;
}


/* ---------------------------------------------------------
   Choice card wrapper
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice {
  position: relative !important;

  flex: 0 0 var(--bat-card-width) !important;
  width: var(--bat-card-width) !important;
  min-width: var(--bat-card-width) !important;
  max-width: var(--bat-card-width) !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}


/* ---------------------------------------------------------
   Actual clickable card
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice > label,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label.gfield-image-choice-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  height: var(--bat-card-height) !important;
  min-height: var(--bat-card-height) !important;
  max-height: var(--bat-card-height) !important;

  padding: 14px 14px 22px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* ---------------------------------------------------------
   Image wrapper - general image choice fields
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .gfield-image-choice-wrapper-outer,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .gfield-choice-image-wrapper,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .image-choices-choice-image,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .image-choices-choice-image-wrap,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 var(--bat-image-height) !important;

  width: 100% !important;
  height: var(--bat-image-height) !important;
  min-height: var(--bat-image-height) !important;
  max-height: var(--bat-image-height) !important;

  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#gform_wrapper_1 .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   Actual image - general image choice fields
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice img,
#gform_wrapper_1 .gfield--type-image_choice .gchoice img.gfield-choice-image,
#gform_wrapper_1 .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-inner img,
#gform_wrapper_1 .gfield--type-image_choice .gchoice .gfield-choice-image img,
#gform_wrapper_1 .gfield--type-image_choice .gchoice .image-choices-choice-image img,
#gform_wrapper_1 .gfield--type-image_choice .gchoice .image-choices-choice-image-wrap img,
#gform_wrapper_1 .gfield--type-image_choice .gchoice picture img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  transform: none !important;
  position: static !important;
  border: 0 !important;
}


/* ---------------------------------------------------------
   Radio buttons - general image choice fields
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice input[type="radio"],
#gform_wrapper_1 .gfield--type-image_choice .gchoice input[type="checkbox"] {
  position: absolute !important;
  left: 18px !important;
  bottom: 24px !important;
  top: auto !important;
  right: auto !important;

  z-index: 5 !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   Choice text - general image choice fields
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .gfield-image-choice-label,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .gchoice_label,
#gform_wrapper_1 .gfield--type-image_choice .gchoice label > .gfield-choice-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 1 1 auto !important;

  width: 100% !important;
  min-height: 0 !important;

  text-align: center !important;
  box-sizing: border-box !important;

  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;

  margin: 0 !important;
  padding: 0 0 0 34px !important;
}


/* =========================================================
   Timezone field override
   Form ID: 1
   Field ID: 28
   ========================================================= */

#gform_wrapper_1 #field_1_28 {
  --bat-card-width: 330px;
  --bat-card-height: 330px;
  --bat-image-height: 235px;
  --bat-card-gap: 32px;
}

#gform_wrapper_1 #field_1_28 .gfield_label {
  text-align: center !important;
}

#gform_wrapper_1 #field_1_28 .gfield_radio,
#gform_wrapper_1 #field_1_28 .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 32px !important;
  width: 100% !important;
}


/* ---------------------------------------------------------
   Timezone cards
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice {
  position: relative !important;

  flex: 0 0 330px !important;
  width: 330px !important;
  min-width: 330px !important;
  max-width: 330px !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#gform_wrapper_1 #field_1_28 .gchoice > label,
#gform_wrapper_1 #field_1_28 .gchoice label.gfield-image-choice-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;

  padding: 14px 14px 22px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* ---------------------------------------------------------
   Timezone map image wrapper
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-wrapper-outer,
#gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-image-wrapper,
#gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image,
#gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image-wrap,
#gform_wrapper_1 #field_1_28 .gchoice label > picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 235px !important;

  width: 100% !important;
  height: 235px !important;
  min-height: 235px !important;
  max-height: 235px !important;

  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#gform_wrapper_1 #field_1_28 .gchoice .gfield-image-choice-wrapper-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   Timezone actual map images
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice img,
#gform_wrapper_1 #field_1_28 .gchoice img.gfield-choice-image,
#gform_wrapper_1 #field_1_28 .gchoice .gfield-image-choice-wrapper-inner img,
#gform_wrapper_1 #field_1_28 .gchoice .gfield-choice-image img,
#gform_wrapper_1 #field_1_28 .gchoice .image-choices-choice-image img,
#gform_wrapper_1 #field_1_28 .gchoice .image-choices-choice-image-wrap img,
#gform_wrapper_1 #field_1_28 .gchoice picture img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  transform: none !important;
  position: static !important;
  border: 0 !important;
}


/* ---------------------------------------------------------
   Timezone radio buttons
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice input[type="radio"],
#gform_wrapper_1 #field_1_28 .gchoice input[type="checkbox"] {
  position: absolute !important;
  left: 18px !important;
  bottom: 24px !important;
  top: auto !important;
  right: auto !important;

  z-index: 5 !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   Timezone choice text
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-label,
#gform_wrapper_1 #field_1_28 .gchoice label > .gchoice_label,
#gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 1 1 auto !important;

  width: 100% !important;
  min-height: 0 !important;

  text-align: center !important;
  box-sizing: border-box !important;

  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;

  margin: 0 !important;
  padding: 0 0 0 34px !important;
}


/* ---------------------------------------------------------
   Background image fallback
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice [style*="background-image"],
#gform_wrapper_1 #field_1_28 .gchoice [class*="image"][style*="background"],
#gform_wrapper_1 #field_1_28 .gchoice label[style*="background-image"],
#gform_wrapper_1 #field_1_28 .gchoice div[style*="background-image"],
#gform_wrapper_1 #field_1_28 .gchoice span[style*="background-image"] {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   Pseudo-element background fallback
   --------------------------------------------------------- */

#gform_wrapper_1 #field_1_28 .gchoice *::before,
#gform_wrapper_1 #field_1_28 .gchoice *::after {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* =========================================================
   Gravity Forms editor fallback
   Admin editor sometimes uses #field_28 instead of #field_1_28.
   ========================================================= */

#field_28 {
  --bat-card-width: 330px;
  --bat-card-height: 330px;
  --bat-image-height: 235px;
  --bat-card-gap: 32px;
}

#field_28 .gfield_radio,
#field_28 .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 32px !important;
  width: 100% !important;
}

#field_28 .gchoice {
  position: relative !important;

  flex: 0 0 330px !important;
  width: 330px !important;
  min-width: 330px !important;
  max-width: 330px !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#field_28 .gchoice > label,
#field_28 .gchoice label.gfield-image-choice-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;

  padding: 14px 14px 22px 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#field_28 .gchoice label > .gfield-image-choice-wrapper-outer,
#field_28 .gchoice label > .gfield-choice-image-wrapper,
#field_28 .gchoice label > .image-choices-choice-image,
#field_28 .gchoice label > .image-choices-choice-image-wrap,
#field_28 .gchoice label > picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 235px !important;

  width: 100% !important;
  height: 235px !important;
  min-height: 235px !important;
  max-height: 235px !important;

  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#field_28 .gchoice .gfield-image-choice-wrapper-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#field_28 .gchoice img,
#field_28 .gchoice img.gfield-choice-image,
#field_28 .gchoice .gfield-image-choice-wrapper-inner img,
#field_28 .gchoice .gfield-choice-image img,
#field_28 .gchoice .image-choices-choice-image img,
#field_28 .gchoice .image-choices-choice-image-wrap img,
#field_28 .gchoice picture img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  transform: none !important;
  position: static !important;
  border: 0 !important;
}

#field_28 .gchoice input[type="radio"],
#field_28 .gchoice input[type="checkbox"] {
  position: absolute !important;
  left: 18px !important;
  bottom: 24px !important;
  top: auto !important;
  right: auto !important;

  z-index: 5 !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}

#field_28 .gchoice label > .gfield-image-choice-label,
#field_28 .gchoice label > .gchoice_label,
#field_28 .gchoice label > .gfield-choice-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 1 1 auto !important;

  width: 100% !important;
  min-height: 0 !important;

  text-align: center !important;
  box-sizing: border-box !important;

  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;

  margin: 0 !important;
  padding: 0 0 0 34px !important;
}

#field_28 .gchoice [style*="background-image"],
#field_28 .gchoice [class*="image"][style*="background"],
#field_28 .gchoice label[style*="background-image"],
#field_28 .gchoice div[style*="background-image"],
#field_28 .gchoice span[style*="background-image"] {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   Normal checkbox/radio fields
   Do not apply image choice styling to normal options.
   --------------------------------------------------------- */

#gform_wrapper_1 .gfield:not(.gfield--type-image_choice) .gchoice {
  overflow: visible !important;
}

#gform_wrapper_1 .gfield:not(.gfield--type-image_choice) .gchoice label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
}


/* ---------------------------------------------------------
   Tooltip styling
   --------------------------------------------------------- */

.gf-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}

.gf-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  background: #29452f;
  color: #ffffff;
}

.gf-tooltip-text {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 260px;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  color: #1b2d20;
  border: 1px solid #d9dfe7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 99999;
}

.gf-tooltip-wrap:hover .gf-tooltip-text,
.gf-tooltip-wrap:focus-within .gf-tooltip-text {
  opacity: 1;
  visibility: visible;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1200px) {
  #gform_wrapper_1 {
    --bat-card-width: 300px;
    --bat-card-height: 315px;
    --bat-image-height: 205px;
    --bat-card-gap: 24px;
  }

  #gform_wrapper_1 #field_1_28,
  #field_28 {
    --bat-card-width: 300px;
    --bat-card-height: 320px;
    --bat-image-height: 225px;
  }

  #gform_wrapper_1 #field_1_28 .gchoice,
  #field_28 .gchoice {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice > label,
  #gform_wrapper_1 #field_1_28 .gchoice label.gfield-image-choice-wrapper,
  #field_28 .gchoice > label,
  #field_28 .gchoice label.gfield-image-choice-wrapper {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-wrapper-outer,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-image-wrapper,
  #gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image,
  #gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image-wrap,
  #gform_wrapper_1 #field_1_28 .gchoice label > picture,
  #field_28 .gchoice label > .gfield-image-choice-wrapper-outer,
  #field_28 .gchoice label > .gfield-choice-image-wrapper,
  #field_28 .gchoice label > .image-choices-choice-image,
  #field_28 .gchoice label > .image-choices-choice-image-wrap,
  #field_28 .gchoice label > picture {
    flex: 0 0 225px !important;
    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-label,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gchoice_label,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-label,
  #field_28 .gchoice label > .gfield-image-choice-label,
  #field_28 .gchoice label > .gchoice_label,
  #field_28 .gchoice label > .gfield-choice-label {
    font-size: 20px !important;
  }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
  #gform_wrapper_1 {
    --bat-card-width: 100%;
    --bat-card-height: 320px;
    --bat-image-height: 210px;
    --bat-card-gap: 18px;
  }

  #gform_wrapper_1 .gfield--type-image_choice .gchoice {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
  }

  #gform_wrapper_1 .gfield--type-image_choice .gchoice > label,
  #gform_wrapper_1 .gfield--type-image_choice .gchoice label.gfield-image-choice-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 360px !important;
  }

  #gform_wrapper_1 #field_1_28,
  #field_28 {
    --bat-card-width: 100%;
    --bat-card-height: 320px;
    --bat-image-height: 220px;
  }

  #gform_wrapper_1 #field_1_28 .gchoice,
  #field_28 .gchoice {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice > label,
  #gform_wrapper_1 #field_1_28 .gchoice label.gfield-image-choice-wrapper,
  #field_28 .gchoice > label,
  #field_28 .gchoice label.gfield-image-choice-wrapper {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-wrapper-outer,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-image-wrapper,
  #gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image,
  #gform_wrapper_1 #field_1_28 .gchoice label > .image-choices-choice-image-wrap,
  #gform_wrapper_1 #field_1_28 .gchoice label > picture,
  #field_28 .gchoice label > .gfield-image-choice-wrapper-outer,
  #field_28 .gchoice label > .gfield-choice-image-wrapper,
  #field_28 .gchoice label > .image-choices-choice-image,
  #field_28 .gchoice label > .image-choices-choice-image-wrap,
  #field_28 .gchoice label > picture {
    flex: 0 0 220px !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-image-choice-label,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gchoice_label,
  #gform_wrapper_1 #field_1_28 .gchoice label > .gfield-choice-label,
  #field_28 .gchoice label > .gfield-image-choice-label,
  #field_28 .gchoice label > .gchoice_label,
  #field_28 .gchoice label > .gfield-choice-label {
    font-size: 20px !important;
  }
}

/* =========================================================
   Force Attachment Type field onto one row
   Form ID: 1
   Field ID: 1
   ========================================================= */

#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gfield_radio,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gfield_checkbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Let all 4 cards shrink to fit the row */
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* Make the clickable card fill its column */
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice > label,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label.gfield-image-choice-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  box-sizing: border-box !important;
}

/* Slightly reduce image area so the cards fit better */
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label > .gfield-image-choice-wrapper-outer,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label > .gfield-choice-image-wrapper,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label > .image-choices-choice-image,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label > .image-choices-choice-image-wrap,
#gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label > picture {
  flex: 0 0 215px !important;
  height: 215px !important;
  min-height: 215px !important;
  max-height: 215px !important;
}

/* Prevent the existing mobile CSS from forcing 100% width */
@media (max-width: 767px) {
  #gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice > label,
  #gform_wrapper_1 #field_1_1.gfield--type-image_choice .gchoice label.gfield-image-choice-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

.attachment-type-title-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  color: #000000 !important;
}

.attachment-type-title-card {
  text-align: center !important;
  font-size: 13pt !important;
  line-height: 1.25 !important;
}

.attachment-type-title {
  font-size: 20pt !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.attachment-type-price {
  font-size: 19pt !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}

.select-kiln-btn {
  display: inline-block !important;
  width: 100% !important;
  max-width: 220px !important;
  margin: 0 auto 12px auto !important;
  padding: 10px 14px !important;

  background: #29452f !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;

  font-size: 13pt !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.select-kiln-btn:hover {
  background: #29452f !important;
}

.select-kiln-btn.is-selected,
.select-kiln-btn.is-selected:hover {
  background: #07260d !important;
}

.attachment-type-title-card ul {
  margin: 0 !important;
  padding-left: 22px !important;
  text-align: left !important;
  display: inline-block !important;
}

.attachment-type-title-card li {
  margin-bottom: 4px !important;
}

.kiln-selection-summary {
  width: 100% !important;
  padding: 22px !important;
  margin: 0 0 22px 0 !important;
  border: 2px solid #29452f !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #000000 !important;
  box-sizing: border-box !important;
}

.kiln-selection-summary h3 {
  margin: 0 0 16px 0 !important;
  font-size: 22pt !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.kiln-summary-row {
  margin-bottom: 12px !important;
  font-size: 14pt !important;
  line-height: 1.35 !important;
}

.kiln-summary-row strong,
.kiln-summary-total strong {
  display: inline-block !important;
  min-width: 140px !important;
}

#summary-extras {
  margin: 8px 0 0 160px !important;
  padding-left: 22px !important;
  font-size: 13pt !important;
}

#summary-extras li {
  margin-bottom: 4px !important;
}

.kiln-summary-total {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #cccccc !important;
  font-size: 18pt !important;
  font-weight: 700 !important;
}

#gform_wrapper_1 .kiln-options-locked {
  opacity: 0.55 !important;
}

#gform_wrapper_1 .kiln-options-locked input {
  cursor: not-allowed !important;
}

#gform_wrapper_1 .kiln-options-active {
  opacity: 1 !important;
}

#gform_wrapper_1 .kiln-options-active input {
  cursor: pointer !important;
}

.summary-tax-note {
  font-size: 12pt !important;
  font-weight: 400 !important;
  margin-left: 8px !important;
}

/* DG-20 / Contract options are always unavailable */
#gform_wrapper_1 .dg20-no-options {
  opacity: 0.55 !important;
}

#gform_wrapper_1 .dg20-no-options .dg20-no-options-message {
  display: inline-block !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: #eeeeee !important;
  color: #333333 !important;
  font-size: 13pt !important;
  font-weight: 600 !important;
}

/* Tooltip icon should still show clearly on available option labels */
#gform_wrapper_1 .gf-has-tooltip {
  overflow: visible !important;
}

/* Keep tooltip icon visible on greyed-out options, but disable the hover popup */
#gform_wrapper_1 .kiln-options-locked .gf-has-tooltip .gf-tooltip-wrap,
#gform_wrapper_1 .kiln-options-locked .gf-has-tooltip:hover .gf-tooltip-wrap,
#gform_wrapper_1 .kiln-options-locked .gf-has-tooltip:focus-within .gf-tooltip-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the info icon visible even when the option group is locked */
#gform_wrapper_1 .kiln-options-locked .gf-has-tooltip::after {
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Make locked tooltip labels feel inactive */
#gform_wrapper_1 .kiln-options-locked .gf-has-tooltip {
  cursor: not-allowed !important;
}

/* Active selected kiln options still show tooltips normally */
#gform_wrapper_1 .kiln-options-active .gf-has-tooltip:hover .gf-tooltip-wrap,
#gform_wrapper_1 .kiln-options-active .gf-has-tooltip:focus-within .gf-tooltip-wrap {
  opacity: 1 !important;
  visibility: visible !important;
}

.payment-schedule-text {
  color: #000000 !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}

.payment-schedule-text h3 {
  font-size: 20pt !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  color: #000000 !important;
}

.payment-schedule-text ul {
  margin: 0 !important;
  padding-left: 24px !important;
  font-size: 14pt !important;
  line-height: 1.45 !important;
}

.payment-schedule-text li {
  margin-bottom: 8px !important;
}

.payment-schedule-total {
  margin-top: 14px !important;
  font-size: 16pt !important;
  font-weight: 700 !important;
}

.payment-tax-note {
  font-size: 12pt !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}

.payment-warning-text {
  margin-top: 18px !important;
  font-size: 12pt !important;
  line-height: 1.45 !important;
  color: #000000 !important;
}

.payment-warning-text p {
  margin: 0 0 6px 0 !important;
}

.purchase-agreement-download {
  margin-top: 16px !important;
}

.purchase-agreement-download a {
  display: inline-block !important;
  padding: 10px 16px !important;
  background: #29452f !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 13pt !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.purchase-agreement-download a:hover {
  background: #1f35e8 !important;
  color: #ffffff !important;
}

.stripe-powered-wrap {
  margin-top: -8px;
  margin-bottom: 20px;
  text-align: left;
}

.stripe-powered-wrap a {
  display: inline-block;
  line-height: 0;
}

.stripe-powered-logo {
  width: 120px;
  height: auto;
  display: block;
  opacity: 0.85;
}

.stripe-powered-logo:hover {
  opacity: 1;
}

/* =========================================================
   Match step and configured cost text size
   Form ID: 1
   ========================================================= */

#gform_wrapper_1 .gf_progressbar_title,
#gform_wrapper_1 .gf_page_steps .gf_step,
#gform_wrapper_1 .gf_step_label,
#gform_wrapper_1 #field_1_25,
#gform_wrapper_1 #field_1_25 .gfield_label,
#gform_wrapper_1 #field_1_25 .ginput_container,
#gform_wrapper_1 #field_1_25 .ginput_container_singleproduct,
#gform_wrapper_1 #field_1_25 .ginput_product_price_label,
#gform_wrapper_1 #field_1_25 .ginput_product_price,
#gform_wrapper_1 #field_1_25 .ginput_total,
#gform_wrapper_1 #field_1_25 .gfield_description {
  font-size: 20pt !important;
  line-height: 1.35 !important;
}

/* Keep price underneath "Cost as configured" normal weight */
#gform_wrapper_1 #field_1_25,
#gform_wrapper_1 #field_1_25 *,
#gform_wrapper_1 #field_1_23 .ginput_container,
#gform_wrapper_1 #field_1_23 .ginput_container *,
#gform_wrapper_1 #field_1_23 .ginput_product_price_label,
#gform_wrapper_1 #field_1_23 .ginput_product_price,
#gform_wrapper_1 #field_1_23 .ginput_total {
  font-weight: 400 !important;
}

/* Force "Cost as configured" label to 20pt and bold - Field ID 23 */
#gform_wrapper_1 #field_1_23 .gfield_label,
#gform_wrapper_1 #field_1_23 label.gfield_label,
#gform_wrapper_1 #field_1_23 legend.gfield_label,
#gform_wrapper_1 #field_1_23 .gform-field-label,
#gform_wrapper_1 #field_1_23 > label,
#gform_wrapper_1 #field_1_23 > legend {
  font-size: 20pt !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}


/* =========================================================
   Reduce gap between kiln feature block and option fields
   Form ID: 1
   ========================================================= */

/* Remove bottom space from the kiln cards row */
.attachment-type-title-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any extra bottom space from the feature lists */
.attachment-type-title-card ul {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce Gravity Forms spacing above option fields */
#gform_wrapper_1 #field_1_24,
#gform_wrapper_1 #field_1_50,
#gform_wrapper_1 #field_1_49,
#gform_wrapper_1 #field_1_48 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce spacing inside the option fields themselves */
#gform_wrapper_1 #field_1_24 .gfield_label,
#gform_wrapper_1 #field_1_50 .gfield_label,
#gform_wrapper_1 #field_1_49 .gfield_label,
#gform_wrapper_1 #field_1_48 .gfield_label {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
}

/* Reduce row gap if Gravity Forms is adding spacing between rows */
#gform_wrapper_1 .gform_fields {
  row-gap: 12px !important;
}

/* =========================================================
   Option fields - feature-size text, price kept together
   Form ID: 1
   Option Fields: Urban 24, Pro 50, Agri 49, Contract 48
   ========================================================= */

#gform_wrapper_1 #field_1_24,
#gform_wrapper_1 #field_1_50,
#gform_wrapper_1 #field_1_49,
#gform_wrapper_1 #field_1_48 {
  font-size: 13pt !important;
  line-height: 1.25 !important;
}

/* Option rows */
#gform_wrapper_1 #field_1_24 .gchoice,
#gform_wrapper_1 #field_1_50 .gchoice,
#gform_wrapper_1 #field_1_49 .gchoice,
#gform_wrapper_1 #field_1_48 .gchoice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

/* Checkbox */
#gform_wrapper_1 #field_1_24 .gchoice input[type="checkbox"],
#gform_wrapper_1 #field_1_50 .gchoice input[type="checkbox"],
#gform_wrapper_1 #field_1_49 .gchoice input[type="checkbox"],
#gform_wrapper_1 #field_1_48 .gchoice input[type="checkbox"],
#gform_wrapper_1 #field_1_24 .gchoice input[type="radio"],
#gform_wrapper_1 #field_1_50 .gchoice input[type="radio"],
#gform_wrapper_1 #field_1_49 .gchoice input[type="radio"],
#gform_wrapper_1 #field_1_48 .gchoice input[type="radio"] {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
}

/* Let the option text wrap normally */
#gform_wrapper_1 #field_1_24 .gchoice label,
#gform_wrapper_1 #field_1_50 .gchoice label,
#gform_wrapper_1 #field_1_49 .gchoice label,
#gform_wrapper_1 #field_1_48 .gchoice label {
  display: inline !important;
  font-size: 13pt !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  margin: 0 !important;
}

/* Keep +£9,500.00 together */
#gform_wrapper_1 #field_1_24 .ginput_price,
#gform_wrapper_1 #field_1_50 .ginput_price,
#gform_wrapper_1 #field_1_49 .ginput_price,
#gform_wrapper_1 #field_1_48 .ginput_price,
#gform_wrapper_1 #field_1_24 .gfield_price,
#gform_wrapper_1 #field_1_50 .gfield_price,
#gform_wrapper_1 #field_1_49 .gfield_price,
#gform_wrapper_1 #field_1_48 .gfield_price {
  display: inline-block !important;
  font-size: 13pt !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  margin-left: 6px !important;
}


/* =========================================================
   Make kiln configurator form wider
   Form ID: 1
   ========================================================= */

/* Make the Divi row containing the Gravity Form wider */
.et_pb_row:has(#gform_wrapper_1) {
  width: 70vw !important;
  max-width: 2600px !important;
}

/* Make the Divi column/module use the full row width */
.et_pb_column:has(#gform_wrapper_1),
.et_pb_module:has(#gform_wrapper_1),
.et_pb_code:has(#gform_wrapper_1) {
  width: 100% !important;
  max-width: none !important;
}

/* Make the Gravity Form itself use the available width */
#gform_wrapper_1,
#gform_wrapper_1 form,
#gform_wrapper_1 .gform-body,
#gform_wrapper_1 .gform_fields {
  width: 100% !important;
  max-width: none !important;
}

/* Make the kiln option/title grid use the full form width */
.attachment-type-title-row {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Give each kiln column more usable internal width */
.attachment-type-title-card {
  width: 100% !important;
  max-width: none !important;
}



/* =========================================================
   Gravity Forms page navigation buttons
   Form ID: 1
   Bigger Next / Previous / Submit buttons
   ========================================================= */

#gform_wrapper_1 .gform_page_footer input[type="button"],
#gform_wrapper_1 .gform_page_footer input[type="submit"],
#gform_wrapper_1 .gform_page_footer button,
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_footer button {
  background-color: #073815 !important;
  border: 2px solid #073815 !important;
  color: #ffffff !important;

  font-size: 14pt !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  padding: 16px 34px !important;
  min-width: 170px !important;
  min-height: 58px !important;

  border-radius: 4px !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* Hover and focus */
#gform_wrapper_1 .gform_page_footer input[type="button"]:hover,
#gform_wrapper_1 .gform_page_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_page_footer button:hover,
#gform_wrapper_1 .gform_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_footer button:hover,
#gform_wrapper_1 .gform_page_footer input[type="button"]:focus,
#gform_wrapper_1 .gform_page_footer input[type="submit"]:focus,
#gform_wrapper_1 .gform_page_footer button:focus,
#gform_wrapper_1 .gform_footer input[type="submit"]:focus,
#gform_wrapper_1 .gform_footer button:focus {
  background-color: #07260d !important;
  border-color: #07260d !important;
  color: #ffffff !important;
}

/* Space between Previous and Next buttons */
#gform_wrapper_1 .gform_page_footer {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

/* =========================================================
   Fix cost price weight and centre divider lines
   Form ID: 1
   ========================================================= */

/* Keep "Cost as configured" bold */
#gform_wrapper_1 #field_1_23 .gfield_label,
#gform_wrapper_1 #field_1_23 label.gfield_label,
#gform_wrapper_1 #field_1_23 legend.gfield_label,
#gform_wrapper_1 #field_1_23 .gform-field-label,
#gform_wrapper_1 #field_1_23 > label,
#gform_wrapper_1 #field_1_23 > legend {
  font-size: 20pt !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Force the price line underneath to NOT be bold */
#gform_wrapper_1 #field_1_23 .ginput_container,
#gform_wrapper_1 #field_1_23 .ginput_container *,
#gform_wrapper_1 #field_1_23 .ginput_product_price_label,
#gform_wrapper_1 #field_1_23 .ginput_product_price,
#gform_wrapper_1 #field_1_23 .ginput_total,
#gform_wrapper_1 #field_1_23 .ginput_total *,
#gform_wrapper_1 #field_1_25,
#gform_wrapper_1 #field_1_25 *,
#gform_wrapper_1 #field_1_25 .ginput_container,
#gform_wrapper_1 #field_1_25 .ginput_container *,
#gform_wrapper_1 #field_1_25 .ginput_product_price_label,
#gform_wrapper_1 #field_1_25 .ginput_product_price,
#gform_wrapper_1 #field_1_25 .ginput_total,
#gform_wrapper_1 #field_1_25 .ginput_total * {
  font-weight: 400 !important;
}

/* =========================================================
   Centred vertical divider lines between kiln models
   Form ID: 1
   Page 2
   ========================================================= */

#gform_wrapper_1 #gform_page_1_2 .gform_fields {
  position: relative !important;
  isolation: isolate !important;

  /*
    Divider vertical start position.
    Increase = lines start lower.
    Decrease = lines start higher.
  */
  --kiln-divider-start: 165px;

  /*
    Divider horizontal positions.
    These can be adjusted independently.
  */
  --kiln-divider-1: calc(25% - 5px);
  --kiln-divider-2: calc(50% - 5px);
  --kiln-divider-3: 75%;
}

/* Divider lines */
#gform_wrapper_1 #gform_page_1_2 .gform_fields::before {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  top: var(--kiln-divider-start) !important;
  bottom: 0 !important;

  pointer-events: none !important;
  z-index: 0 !important;

  background-image:
    linear-gradient(
      to right,

      transparent calc(var(--kiln-divider-1) - 1px),
      #073815 calc(var(--kiln-divider-1) - 1px),
      #073815 calc(var(--kiln-divider-1) + 1px),
      transparent calc(var(--kiln-divider-1) + 1px),

      transparent calc(var(--kiln-divider-2) - 1px),
      #073815 calc(var(--kiln-divider-2) - 1px),
      #073815 calc(var(--kiln-divider-2) + 1px),
      transparent calc(var(--kiln-divider-2) + 1px),

      transparent calc(var(--kiln-divider-3) - 1px),
      #073815 calc(var(--kiln-divider-3) - 1px),
      #073815 calc(var(--kiln-divider-3) + 1px),
      transparent calc(var(--kiln-divider-3) + 1px)
    ) !important;
}

/* Keep form content above divider overlay */
#gform_wrapper_1 #gform_page_1_2 .gfield,
#gform_wrapper_1 #gform_page_1_2 .attachment-type-title-row,
#gform_wrapper_1 #gform_page_1_2 .gform_page_footer {
  position: relative !important;
  z-index: 1 !important;
}

/* Hide divider lines on smaller screens */
@media (max-width: 980px) {
  #gform_wrapper_1 #gform_page_1_2 .gform_fields::before {
    display: none !important;
  }
}