/**
 * Caldera UK stage — HMC quiz skin (Form 25).
 * Values mirror www.calderaspas.com/shop/help-me-choose (wp-cs2 theme) measured 2026-09-04.
 * Scoped to #gform_24 so nothing else on the site is affected.
 */

/* ---------- layout ---------- */
#gform_wrapper_24 { max-width: 696px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
#gform_24 .gform_page_fields { margin: 0 0 2px; }

/* ---------- "Question X of 7" (GF-native #gf_step_counter_24) ---------- */
#gform_24 .gf_page_steps_info {
    font-size: 15px; font-weight: 500; line-height: 22.5px;
    color: #696969; text-align: center; margin: 10px 0 16px; padding: 0;
}
/* safety net: never show two counters, and never show the legacy injected one */
#gform_24 .gf_page_steps_info ~ .gf_page_steps_info, .hmc-cal-step-counter { display: none !important; }

/* ---------- progress dots ---------- */
#gform_24 #gf_page_steps_24 {
    display: flex; justify-content: center; align-items: flex-start;
    height: 18px; margin: 0 0 48px; padding: 0; list-style: none; border: 0; background: none;
}
/* flex-centred so dot and connector share the same vertical centre regardless of font metrics */
#gform_24 #gf_page_steps_24 .gf_step {
    position: relative; display: flex; align-items: center; justify-content: flex-start;
    flex: 0 0 12px; width: 12px; height: 18px; margin: 0 32px 0 0; padding: 0;
    line-height: 0; font-size: 0; background: none; border: 0; opacity: 1;
}
#gform_24 #gf_page_steps_24 .gf_step:last-child { margin-right: 0; }
#gform_24 #gf_page_steps_24 .gf_step_number,
#gform_24 #gf_page_steps_24 .gf_step_active .gf_step_number,
#gform_24 #gf_page_steps_24 .gf_step_completed .gf_step_number,
#gform_24 #gf_page_steps_24 .gf_step_pending .gf_step_number {
    display: inline-block !important; width: 12px !important; height: 12px !important;
    min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important;
    background: #d9d9d9 !important; background-image: none !important;
    color: transparent !important; font-size: 0 !important; line-height: 0 !important;
    vertical-align: top; padding: 0 !important; margin: 0 !important;
    border: 0 !important; box-shadow: none !important; outline: 0 !important;
    position: static !important; transform: none !important;
}
#gform_24 #gf_page_steps_24 .gf_step_active .gf_step_number,
#gform_24 #gf_page_steps_24 .gf_step_completed .gf_step_number { background: #f47a55 !important; }
/* Gravity Forms' gravity-theme draws a big #607d8b circle + white tick on completed
   steps via pseudo-elements on .gf_step_number — kill them (we keep our own
   connector line on .gf_step::after below). */
#gform_24 #gf_page_steps_24 .gf_step_number::before,
#gform_24 #gf_page_steps_24 .gf_step_number::after,
#gform_24 #gf_page_steps_24 .gf_step::before,
#gform_24 #gf_page_steps_24 .gf_step_completed::before,
#gform_24 #gf_page_steps_24 .gf_step_completed .gf_step_number::before,
#gform_24 #gf_page_steps_24 .gf_step_completed .gf_step_number::after {
    content: none !important; display: none !important;
    background: none !important; border: 0 !important; width: 0 !important; height: 0 !important;
}
#gform_24 #gf_page_steps_24 .gf_step_label { display: none !important; }
/* connector line: starts 5px right of the dot, spans 24px (3px short of the next dot),
   vertically centred on the dot. margin:0 !important — a theme rule was adding 6px
   and pushing the line under the dot. */
#gform_24 #gf_page_steps_24 .gf_step::after {
    content: "" !important; display: block !important; position: absolute;
    top: 50%; left: 17px; 
    width: 24px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
    background: #d9d9d9 !important; border: 0 !important;
}
#gform_24 #gf_page_steps_24 .gf_step.gf_step_completed::after {
       background: #f47a55 !important;
}
#gform_24 #gf_page_steps_24 .gf_step:last-child::after,
#gform_24 #gf_page_steps_24 .gf_step_last::after { display: none !important; content: none !important; }

/* ---------- question heading + subtitle (HTML field: <h4> + <h6>) ---------- */
#gform_24 .gfield_html { margin: 0 0 15px; padding: 0; text-align: center; }
#gform_24 .gfield_html h4 {
    font-size: 20px; font-weight: 700; line-height: 30px;
    color: #696969; margin: 0; padding: 0; text-align: center;
}
#gform_24 .gfield_html h6 {
    font-size: 15px; font-weight: 500 !important; line-height: 22px;
    color: #696969; margin: 4px 0 0; padding: 0; text-align: center;
}
/* GF's own field label duplicates the <h4>; keep it for screen readers only */
#gform_24 .gfield--type-choice > legend.gfield_label,
#gform_24 .gfield--type-choice > label.gfield_label,
#gform_24 .hidden_label .gfield_label {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- choices (checkbox + radio) ---------- */
#gform_24 .ginput_container_checkbox,
#gform_24 .ginput_container_radio { width: 100%; max-width: 400px; margin: 10px auto 20px; padding: 0; }
#gform_24 .gfield_checkbox, #gform_24 .gfield_radio { margin: 0; padding: 0; list-style: none; }
#gform_24 .gchoice {
    position: relative; display: flex; align-items: center; gap: 16px;
    margin: 0 0 20px; padding: 0; min-height: 30px; font-size: 20px; line-height: 30px;
}
#gform_24 .gchoice:last-child { margin-bottom: 0; }
/* native input stays in flow (20px wide) but invisible; it remains the click target */
#gform_24 .gchoice input[type="checkbox"],
#gform_24 .gchoice input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    position: relative; z-index: 2; flex: 0 0 20px; width: 20px; height: 30px;
    margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; background: none;
}
/* the visible box */
#gform_24 .gchoice::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; box-sizing: border-box;
    border: 1px solid #a9a9a9; border-radius: 3px; background: #fff; pointer-events: none;
}
#gform_24 .gchoice.hmc-radio::before { border-radius: 50%; }
/* the tick / dot */
#gform_24 .gchoice::after {
    content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; opacity: 0; pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23ffffff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg>") center / 12px 12px no-repeat;
}
#gform_24 .gchoice.hmc-radio::after { left: 7px; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
#gform_24 .gchoice:has(input:checked)::before, #gform_24 .gchoice.is-checked::before { background: #f47a55; border-color: #f47a55; }
#gform_24 .gchoice:has(input:checked)::after,  #gform_24 .gchoice.is-checked::after  { opacity: 1; }
#gform_24 .gchoice input:focus-visible ~ label { outline: 2px solid #f47a55; outline-offset: 2px; }
#gform_24 .gchoice label {
    font-size: 20px; font-weight: 400; line-height: 30px; color: #696969;
    margin: 0; padding: 0; cursor: pointer; display: block;
}


@media (min-width: 767px) {
    #gform_24 #gform_page_24_1 .gform_page_footer[data-hmc-cal]{
        margin-left: 29%;
    }
}
/* ---------- validation ---------- */
#gform_24 .validation_error, #gform_24 .gform_validation_errors { text-align: center; max-width: 560px; margin: 0 auto 16px; }
#gform_24 .gfield_validation_message, #gform_24 .validation_message { max-width: 400px; margin: 8px auto 0; }

/* ---------- footer / buttons ---------- */
/* Once the controller has injected its own footer, hide GF's native one (inputs). */
#gform_24.hmc-cal-ready .gform_page_footer:not([data-hmc-cal]),
#gform_24 .gform_page_footer.hide-it { display: none !important; }

#gform_24 .gform_page_footer[data-hmc-cal] {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; max-width: 390px; margin: 0 auto; padding: 0; border: 0; background: none;
}
#gform_24 #formNext, #gform_24 #formPrev {
    font-family: inherit; font-size: 20px; font-weight: 700; line-height: 23px;
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 40px; padding: 8px 18px; cursor: pointer;
    text-decoration: none; box-shadow: none; outline: none; appearance: none; -webkit-appearance: none;
    transition: background-color .15s ease, color .15s ease;
}
#gform_24 #formNext { background: #f47a55; color: #fff; margin: 10px 0 10px 4px; }
#gform_24 #formNext:hover, #gform_24 #formNext:focus-visible { background: #bc4b2a; color: #fff; }
#gform_24 #formNext[disabled] { background: #d9d9d9; color: #696969; cursor: not-allowed; pointer-events: none; }
#gform_24 #formPrev { background: transparent; color: #f47a55; padding: 8px 18px 8px 4px; margin: 10px 10px 10px 0; }
#gform_24 #formPrev:hover, #gform_24 #formPrev:focus-visible { background: transparent; color: #bc4b2a; }
#gform_24 #formPrev + #formNext { margin-left: 12px; }

/* chevrons (inline SVG — stage only has Elementor's FA5, not FA6 Pro) */
#gform_24 .hmc-cal-chev { width: 11px; height: 18px; display: inline-block; flex: 0 0 auto; fill: currentColor; }

/* loading state */
#gform_24 .is-loading { pointer-events: none; }
#gform_24 .is-loading .hmc-cal-chev { display: none; }
#gform_24 .hmc-cal-spin {
    display: inline-block; width: 16px; height: 16px; flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
    animation: hmccal-spin .7s linear infinite;
}
#gform_24 #formPrev .hmc-cal-spin { border-color: rgba(244,122,85,.35); border-top-color: #f47a55; }
@keyframes hmccal-spin { to { transform: rotate(360deg); } }

/* ---------- last step (page 7): intro above a shadowed card, Previous centred below ---------- */
#gform_page_24_7 .custom-html-field { margin: 0 0 40px; padding: 0; text-align: center; }
#gform_page_24_7 .custom-html-field p,
#gform_page_24_7 .custom-html-field h4 { font-size: 20px; font-weight: 400; line-height: 30px; color: #696969; margin: 0; text-align: center; }
#gform_page_24_7 .form-wrapper {
    width: 451px; max-width: 100%; margin: 0 auto; padding: 28px 40px 30px !important; box-sizing: border-box;
    background: #fff; border-radius: 4px; box-shadow: 0 0 18px 0 rgba(0,0,0,.16);
}
#gform_page_24_7 .form-wrapper .gform_page_fields { margin: 0 0 2px; }
#gform_page_24_7 .gfield--type-section { margin: 12px 0 0; padding: 0; border: 0; }
#gform_page_24_7 .gfield--type-section .gsection_title { display: none; }
#gform_page_24_7 .gfield--type-section .gsection_description { font-size: 15px; font-style: italic; line-height: 20px; color: #696969; margin: 0; padding: 0; }
#gform_page_24_7 .gfield--type-text, #gform_page_24_7 .gfield--type-email { margin: 12px 0 0; padding: 0; }
#gform_page_24_7 .gfield--type-text .gfield_label, #gform_page_24_7 .gfield--type-email .gfield_label {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#gform_page_24_7 .form-wrapper input[type="text"],
#gform_page_24_7 .form-wrapper input[type="email"],
#gform_page_24_7 .form-wrapper input[type="tel"] {
    display: block; width: 100%; max-width: 100%; height: 47px; box-sizing: border-box;
    padding: 8px 15px 7px 12px; font-size: 20px; line-height: 30px; color: #55595c;
    background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 5px; box-shadow: none; outline: none;
}
#gform_page_24_7 .form-wrapper input:focus { border-color: rgba(0,0,0,.35); }
#gform_page_24_7 .form-wrapper input::placeholder { color: #757575; font-size: 20px; opacity: 1; }
#gform_page_24_7 .form-wrapper .gfield_validation_message { max-width: none; margin: 6px 0 0; }
/* submit footer INSIDE the card */
#gform_24 .gform_page_footer.formNext7[data-hmc-cal] { width: 100%; max-width: 100%; margin: 0; justify-content: flex-start; }
#gform_24 .formNext7 #formNext { margin: 14px 0 10px; }
/* Previous in its own footer BELOW the card, centred */
#gform_24 .gform_page_footer.formPrev7[data-hmc-cal] { width: 451px; max-width: 100%; margin: 22px auto 0; padding: 0 0 0 40px; box-sizing: border-box; justify-content: center; }
#gform_24 .formPrev7 #formPrev { margin: 6px auto 8px; }

/* ---------- results page ([help-me-choose-result] on /success/) ---------- */
/* hide the plain-template page title; the JS-injected hero replaces it (same as .com's Elementor hero) */
body.page-id-73953 .page-header, body.page-id-73955 .page-header, body.page-id-73957 .page-header, body.hmc-cal-results .page-header { display: none; }
.hmc-cal-hero { max-width: 736px; margin: 0 auto 32px; text-align: center; margin-top: 50px;}
.hmc-cal-hero-icon { margin: 0 0 20px; line-height: 48px; }
.hmc-cal-hero-icon i { font-size: 48px; line-height: 48px; color: #f47a55; }
.hmc-cal-hero h1 { font-size: 50px !important; font-weight: 600 !important; line-height: 60px !important; color: #696969 !important; margin: 0 0 48px !important; padding: 0; text-align: center; }
.hmc-cal-hero h2 { font-size: 30px !important; font-weight: 700 !important; line-height: 38px !important; color: #f47a55 !important; margin: 0 0 20px !important; padding: 0; text-align: center; }
.hmc-cal-hero p  { font-size: 20px; font-weight: 400; line-height: 30px; color: #696969; margin: 0; padding: 0; text-align: center; }
.hmc-cal-shop-all { text-align: center; font-size: 20px; font-weight: 700; line-height: 30px; margin: 0 0 60px; }
.hmc-cal-shop-all a { color: #696969; text-decoration: underline; }
.hmc-cal-shop-all a:hover { color: #f47a55; }
.help-me-choose-result { position: relative; max-width: 1015px; margin: 0 auto 20px; padding: 0 60px; box-sizing: border-box; }
.help-me-choose-result .result-items { display: flex; justify-content: center; }
.help-me-choose-result .result-item { margin: 0 auto 24px; max-width: fit-content; font-size: 20px; line-height: 30px; color: #696969; }
.help-me-choose-result .swiper-product { position: relative; margin: 0 auto; overflow: hidden; }
.help-me-choose-result .swiper-product .model-card { padding: 0 10px; flex-shrink: 0; text-align: center; box-sizing: border-box; background: none; border: 0; }
/* stage custom.css locks the image link to 270px (.swiper-slide > a:first-of-type) → 77px empty band under the tub; .com has no such rule */
.help-me-choose-result .swiper-product .model-card > a,
.help-me-choose-result .swiper-product .swiper-slide > a:first-of-type { display: block !important; min-height: 0 !important; max-height: none !important; }
.help-me-choose-result .swiper-product .model-card img { max-height: 250px; width: auto; max-width: 100%; margin: 0 auto; }
.help-me-choose-result .swiper-product .card-body { padding: 15px 0 0; }
.help-me-choose-result .swiper-product .card-body .card-series { line-height: 27px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #757575; }
.help-me-choose-result .swiper-product .card-body .card-title { display: block; margin-bottom: 5px; font-size: 24px; line-height: 1.5em; font-weight: 700; color: #f47a55; text-decoration: none; }
.help-me-choose-result .swiper-product .card-body .card-title:hover { color: #bc4b2a; }
.help-me-choose-result .swiper-product .card-body .card-rating { margin-bottom: 5px; }
.help-me-choose-result .swiper-product .card-body .delimeter { margin: 0 5px; color: #abadaf; }
.help-me-choose-result .swiper-product .card-body .card-capacity-cost { margin-bottom: 25px; color: #696969; }
.help-me-choose-result .swiper-product .card-body .total-reviews { font-weight: 700; }
.help-me-choose-result .swiper-pagination { display: none; }
/* orange chevron arrows in the gutters, vertically centred on the images */
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev,
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next {
    position: absolute; top: 44.5% !important; transform: translateY(-50%); margin: 0;
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    color: #f47a55; background: none; border-radius: 0; box-shadow: none; cursor: pointer; z-index: 5;
}
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev { left: 4%; }
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next { right: 4%; }
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev i,
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next i { font-size: 45px; line-height: 1; color: #f47a55; transition: color .3s ease-in-out; }
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev:hover i,
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next:hover i { color: #bc4b2a; }
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev::after,
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next::after { content: none; }
.help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-disabled { display: none; }

/* ---------- small screens ---------- */
@media screen and (max-width: 767px) {
	#gform_wrapper_24 #gform_page_24_1 .gform_page_footer .formNext {
    	margin-left: 0px;
	}
	#gform_24 .gchoice label, 
	#gform_24 .gchoice {
        font-size: 18px;
		line-height:24px;
    }
	#gform_24 .gchoice {
		margin: 0 0 15px;
	}
	#gform_page_24_7 .form-wrapper {
		padding:10px 20px 20px !important;
	}
}
@media (max-width: 480px) {
    #gform_24 #gf_page_steps_24 .gf_step { margin-right: 22px; }
    #gform_24 #gf_page_steps_24 .gf_step::after { width: 14px !important; }
    #gform_24 .gchoice label, #gform_24 .gchoice {  font-size: 18px;
		line-height:24px; }
    #gform_24 .gform_page_footer[data-hmc-cal] { max-width: 100%; }
    #gform_page_24_7 .form-wrapper { padding: 22px 20px 24px; }
    #gform_24 .gform_page_footer.formPrev7[data-hmc-cal] { padding-left: 0; }
    .help-me-choose-result { padding: 0 36px; }
    .help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev { left: 0; }
    .help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next { right: 0; }
    .help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-prev i,
    .help-me-choose-result .swiper-product + .swiper-buttons .swiper-button-next i { font-size: 30px; }
}