/* GMI multi-step forms — styles for .gmi-steps inside Elementor popups.
   Base input/submit styling comes from the JetElements CF7 widget;
   this file covers the stepper, cards, combobox, phone field, success block. */

/* steps */
.gmi-steps .gmi-step { display: none; }
.gmi-steps .gmi-step.is-active { display: block; animation: gmi-fade .25s ease; }
@keyframes gmi-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gmi-step-title { font-family: Lato, sans-serif; font-size: 19px; line-height: 1.35; font-weight: 700; margin: 0 0 16px; color: #fff; }

.gmi-field { margin: 0 0 18px; }
.gmi-field > label, .gmi-label {
	display: block; font-size: 17px; line-height: 1.4; font-weight: 400; color: #fff;
	margin: 0 0 8px;
}
.gmi-field .wpcf7-form-control-wrap { display: block; }

/* inputs (match the site's CF7 underline style — also enforced by the widget) */
.elementor-popup-modal input[type=text],
.elementor-popup-modal input[type=email],
.elementor-popup-modal input[type=tel],
.elementor-popup-modal input[type=number],
.elementor-popup-modal select,
.elementor-popup-modal textarea {
	width: 100%; box-sizing: border-box;
	background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.3);
	color: #fff; font: 18px/1.4 Lato, sans-serif;
	padding: 0 0 5px; border-radius: 0; outline: none;
}
.elementor-popup-modal input::placeholder { color: rgba(255,255,255,.45); }
.elementor-popup-modal input:focus,
.elementor-popup-modal select:focus,
.elementor-popup-modal textarea:focus { border-bottom-color: #fff; }
.elementor-popup-modal select { appearance: none; cursor: pointer; }
.elementor-popup-modal select option { color: #222; }

/* required mark (JS wraps the labels' trailing "*") */
.gmi-req { color: #ff6b6b; font-weight: 700; font-size: 1.15em; line-height: 1; margin-left: 3px; }

/* invalid: red outline/underline + a message saying what is missing (gmi-forms.js) */
.elementor-popup-modal .wpcf7-not-valid { border-bottom-color: #ff6b6b !important; }
.gmi-invalid input:not(.iti__search-input), .gmi-invalid select { border-bottom-color: #ff6b6b !important; border-bottom-width: 2px !important; }
.gmi-invalid .gmi-cards .wpcf7-list-item-label { border-color: #ff6b6b; }
.gmi-invalid .gmi-radio-inline .wpcf7-list-item-label, .gmi-invalid.gmi-consent .wpcf7-list-item-label, .gmi-invalid .gmi-consent .wpcf7-list-item-label { color: #ffb3b3; }
/* CF7 autop may wrap the label in a <p>: match it at any depth, but not the options' labels */
.gmi-field-invalid > label, .gmi-field-invalid > p > label, .gmi-field-invalid .gmi-label, .gmi-step-invalid .gmi-step-title { color: #ffb3b3; }
.gmi-err { display: flex; gap: 7px; align-items: center; margin: 8px 0 0; font: 400 15px/1.35 Lato, sans-serif; color: #ff8f8f; }
.gmi-err:before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ff6b6b; color: #1c2a45; font: 700 12px/18px Lato, sans-serif; text-align: center; }
.elementor-popup-modal .wpcf7-not-valid-tip { font-size: 15px; color: #ff8f8f; margin-top: 6px; font-style: normal; }
.elementor-popup-modal .wpcf7-response-output {
	border: 0 !important; margin: 14px 0 0 !important; padding: 8px 12px !important;
	font-size: 15px; color: #fff; background: rgba(255,255,255,.08);
}

/* gender radio inline */
.gmi-radio-inline .wpcf7-list-item { display: inline-block; margin: 4px 28px 6px 0; }
.gmi-radio-inline .wpcf7-list-item-label { color: rgba(255,255,255,.92); font-size: 16px; font-weight: 400; }
.elementor-popup-modal input[type=radio] { accent-color: #96f0ff; }
.gmi-radio-inline input[type=radio] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; cursor: pointer; }
.gmi-radio-inline .wpcf7-list-item label { cursor: pointer; }

/* service type cards */
.gmi-cards .wpcf7-list-item { display: block; margin: 0 0 10px; }
.gmi-cards input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.gmi-cards .wpcf7-list-item-label {
	display: block; padding: 13px 16px;
	border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
	color: #fff; font-size: 16.5px; font-weight: 400; line-height: 1.35; font-family: Lato, sans-serif; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.gmi-cards .wpcf7-list-item-label:hover { border-color: #96f0ff; }
.gmi-cards input[type=radio]:checked + .wpcf7-list-item-label,
.gmi-cards .wpcf7-list-item-label.is-checked {
	border-color: #96f0ff; background: rgba(150,240,255,.10);
}

/* conditional detail block */
.gmi-detail { display: none; margin-top: 6px; }
.gmi-detail.is-visible { display: block; animation: gmi-fade .25s ease; }

/* searchable combobox (department) */
.gmi-combo { position: relative; }
/* not a .wpcf7-form-control, so the widget padding doesn't reach it — match it */
.gmi-steps .gmi-combo input.gmi-combo-input { cursor: text; padding: 0 0 5px; }
.gmi-combo-list {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
	max-height: 220px; overflow-y: auto;
	background: #fff; color: #222;
	border-radius: 0 0 4px 4px; box-shadow: 0 10px 28px rgba(0,0,0,.35);
	display: none;
}
.gmi-combo.is-open .gmi-combo-list { display: block; }
.gmi-combo-item { padding: 10px 14px; font-size: 16px; cursor: pointer; font-family: Lato, sans-serif; }
.gmi-combo-item:hover, .gmi-combo-item.is-hl { background: #eef6f8; }
.gmi-combo-empty { padding: 10px 14px; font-size: 13px; color: #888; }

/* actions */
.gmi-actions { display: flex; gap: 14px; align-items: center; margin-top: 24px; }
/* same metrics as the CF7 widget's submit, so Continue / Back / Send request match */
.gmi-btn {
	display: inline-block; cursor: pointer;
	background: #fff; color: #1e2428; border: 3px solid #fff;
	font: 700 14px/1.1 Lato, sans-serif; letter-spacing: 1.8px; text-transform: uppercase;
	padding: 18px 48px; border-radius: 3px;
	transition: background .15s, color .15s, border-color .15s;
}
/* theme's generic [type=button]:hover/:focus is dark grey — keep the submit's look */
.elementor-popup-modal .gmi-btn:focus { background: #fff; color: #1e2428; border-color: #fff; box-shadow: none; outline: none; }
.elementor-popup-modal .gmi-btn:hover { background: #96f0ff; border-color: #96f0ff; color: #fff; }
.elementor-popup-modal .gmi-btn:focus-visible { box-shadow: 0 0 0 2px #96f0ff; }
.gmi-btn-ghost, .elementor-popup-modal .gmi-btn-ghost:focus { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.gmi-btn-ghost { border-width: 1px; padding: 20px 50px; } /* thin outline, same height */
.elementor-popup-modal .gmi-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* CF7 autop wraps Back + submit in <p> with a <br> — let them sit in the flex row */
.gmi-actions > p { display: contents; }
.gmi-actions br { display: none; }
.gmi-actions .wpcf7-submit { margin-left: auto; }
.gmi-actions .wpcf7-spinner { display: none; margin: 0 0 0 12px; }
.wpcf7-form.submitting .gmi-actions .wpcf7-spinner { display: inline-block; }
.gmi-next { width: 100%; margin-top: 6px; }

/* success: a native Elementor section (.gmi-success-view) replaces the form section
   (.gmi-form-view) once the request is sent; both stay visible in the editor */
body:not(.elementor-editor-active) .elementor-location-popup:not(.gmi-sent) .gmi-success-view,
.elementor-location-popup.gmi-sent .gmi-form-view { display: none; }

/* gender: CF7 autop inserts <br> after the label — drop the empty line */
.gmi-field br { display: none; }

/* intl-tel-input: flag · arrow · dial code sit on the input's text line,
   flag flush with the field's left edge like the other placeholders */
.elementor-popup-modal .iti {
	width: 100%;
	/* iti forces margin:0 !important on the tel input — carry the CF7 widget's
	   input margin (-1px 0 -8px) on the wrapper so the row rhythm matches */
	margin: -1px 0 -8px;
	--iti-arrow-color: rgba(255,255,255,.6);
	--iti-hover-color: transparent;
}
.elementor-popup-modal .iti__country-container { padding: 0; }
.elementor-popup-modal .iti__selected-country {
	box-sizing: border-box; padding: 0 0 5px; /* = input padding-bottom */
	background: transparent !important; border: 0; box-shadow: none; border-radius: 0;
	color: #fff; font: 18px/1 Lato, sans-serif; letter-spacing: normal; text-transform: none;
}
.elementor-popup-modal .iti__selected-country-primary { padding: 0; }
.elementor-popup-modal .iti__arrow { margin-left: 6px; }
.elementor-popup-modal .iti .iti__selected-dial-code {
	margin-left: 10px; color: #fff; font-size: 18px; line-height: 1; letter-spacing: normal;
}
.elementor-popup-modal .iti__country-list { background: #fff; color: #222; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.elementor-popup-modal .iti__country.iti__highlight { background: #eef6f8; }
.elementor-popup-modal .iti .iti__search-input {
	background: #fff; color: #222; border: 1px solid #ddd; border-bottom: 1px solid #ddd;
	padding: 9px 12px; font: 14px/1.3 Lato, sans-serif; border-radius: 3px;
}
.elementor-popup-modal .iti .iti__search-input::placeholder { color: #999; }
.elementor-popup-modal .iti input[type=tel] { border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- check-up quiz ---------- */

/* conditional blocks + result variants */
.gmi-cond, .gmi-result { display: none; }
.gmi-cond.is-visible, .gmi-result.is-visible { display: block; animation: gmi-fade .25s ease; }
.gmi-quiz .gmi-field { margin: 0 0 20px; }

/* quiz radios read better as list rows than as service cards */
.gmi-quiz .gmi-cards .wpcf7-list-item-label { padding: 12px 15px; font-size: 16.5px; line-height: 1.35; }
/* preferred contact method: three cards in a row, full-size tap targets */
.gmi-cards-row { display: flex; gap: 10px; }
.gmi-cards-row .wpcf7-list-item { flex: 1 1 0; margin: 0; }
.gmi-quiz .gmi-cards-row .wpcf7-list-item-label { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; }

/* result card */
.gmi-result-quote {
	font-family: Lato, sans-serif; font-size: 17px; font-style: italic;
	color: rgba(255,255,255,.82); margin: 0 0 6px;
}
.gmi-result-name { font-family: Lato, sans-serif; font-size: 24px; font-weight: 700; color: #96f0ff; margin: 0 0 10px; }
.gmi-result-text { font-size: 16.5px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,.9); margin: 0 0 18px; }
.gmi-result .gmi-next { margin-top: 0; }
.gmi-disclaimer {
	font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.65);
	border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; margin: 22px 0 0;
}

/* consent checkboxes */
.gmi-consent .wpcf7-list-item-label { color: rgba(255,255,255,.9); font-size: 15.5px; font-weight: 400; line-height: 1.45; }
.gmi-consent .wpcf7-list-item { margin: 0; }
.gmi-consent .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; }
.gmi-consent input[type=checkbox] { accent-color: #96f0ff; margin-top: 3px; flex: none; width: 18px; height: 18px; }
.gmi-consent-link { font-size: 15px; margin-left: 28px; display: block; }
/* the widget colours all popup links white — the policy link must read as a link */
.elementor-popup-modal .gmi-consent-link a { color: #96f0ff !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* the quiz popup is taller than the appointment one — let the pane scroll, and only the pane:
   Elementor's inner .dialog-message scrolls too, which gives phones two nested scroll areas */
.elementor-popup-modal:has(.gmi-quiz) .dialog-widget-content,
.elementor-popup-modal:has(.gmi-quiz) .dialog-lightbox-widget-content { max-height: 92vh; overflow-y: auto; }
.elementor-popup-modal:has(.gmi-quiz) .dialog-message { height: auto !important; max-height: none !important; overflow: visible !important; }

/* busy state while CF7 ajax is in flight */
.wpcf7-form.submitting .wpcf7-submit, .wpcf7-form.submitting .gmi-btn { pointer-events: none; opacity: .65; }

@media (max-width: 640px) {
	.gmi-actions { flex-direction: column-reverse; align-items: stretch; }
	/* spec: one column on phones */
	.gmi-cards-row { flex-direction: column; }
	.gmi-quiz .gmi-cards-row .wpcf7-list-item-label { justify-content: flex-start; text-align: left; padding: 12px 15px; }
	.gmi-actions .wpcf7-submit { margin-left: 0; width: 100%; }
}