/**
 * VSM P-Med assessment — Draft 4 questionnaire styling (presentation ONLY).
 *
 * Restyles the Gravity Forms 2.5+ div/fieldset markup on /p-med-assessment/ into the
 * approved branded panels: green gradient question header, numbered condition rows
 * (from the field description), large tappable answer buttons. The form definitions,
 * validation and the pharmacist answer sheet are untouched — a wrong answer still
 * routes server-side exactly as today.
 *
 * SCOPING: every selector is prefixed .vsm-pmed-styled (the wrapper the assessment
 * shortcode emits around gravity_form()), so legacy forms 21/22/16, THWEPO sections
 * and any other Gravity Form on the site never match a rule in this file.
 *
 * FAIL-SAFE: this stylesheet must look correct WITHOUT the stepper JS — all panels
 * render stacked. Nothing here hides a step; .vsm-step-hidden only takes effect when
 * the stepper script applies it.
 *
 * Palette/fonts from the approved design (pmed-question-designs.html); Poppins and
 * Roboto are already loaded by the site — no font imports here.
 */

/* ---------- base ------------------------------------------------------------------ */

.vsm-pmed-styled .gform_wrapper {
	font-family: 'Roboto', Arial, sans-serif;
	color: #334155;
}

/* GF renders "* indicates required fields" above the fields — keep it, quietly. */
.vsm-pmed-styled .gform_required_legend {
	color: #64748b;
	font-size: 13px;
	margin: 0 0 6px;
}

.vsm-pmed-styled .gform_fields {
	row-gap: 18px !important;
	grid-row-gap: 18px !important;
}

/* ---------- the panel (each .gfield) ---------------------------------------------- */

/* Flex column + CSS order gives the visual order label → description → inputs even
 * though GF puts the description LAST in the DOM (the DOM is never changed). For the
 * fieldset-based choice fields the legend needs float to opt out of the browser's
 * special "rendered legend" placement and become an ordinary flex child. */
.vsm-pmed-styled .gform_fields > .gfield {
	background: #fff;
	border: 1px solid #dbe4ec;
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	min-inline-size: 0; /* fieldset intrinsic min-width quirk */
	box-shadow: 0 1px 3px rgba(13, 38, 59, 0.06);
}

/* Question header — green gradient bar. */
.vsm-pmed-styled .gfield > .gfield_label,
.vsm-pmed-styled .gfield > legend.gfield_label {
	order: 1;
	float: left; /* legend: escape rendered-legend anchoring (no-op for flex layout) */
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 20px;
	background: linear-gradient(135deg, #35b45f 0%, #2c9a50 100%);
	color: #fff !important;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
}

/* Required asterisk/(Required) — white inside the header. */
.vsm-pmed-styled .gfield .gfield_label .gfield_required {
	color: #fff !important;
	opacity: 0.9;
	padding-left: 3px;
}

/* ---------- description = numbered condition rows --------------------------------- */

.vsm-pmed-styled .gfield > .gfield_description:not(.validation_message) {
	order: 2;
	margin: 0;
	padding: 12px 20px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #334155;
}

/* A description that is the clinical <ul> list gets full-bleed numbered rows. */
.vsm-pmed-styled .gfield > .gfield_description:has(ul) {
	padding: 6px 0 0;
}

.vsm-pmed-styled .gfield_description ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	counter-reset: vsm-row;
}

.vsm-pmed-styled .gfield_description ul li {
	list-style: none !important;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 10px 20px;
	font-size: 15px;
	line-height: 1.5;
	counter-increment: vsm-row;
}

.vsm-pmed-styled .gfield_description ul li + li {
	border-top: 1px dashed #e2e8f0;
}

/* The small round tint circle carrying the row number. */
.vsm-pmed-styled .gfield_description ul li::before {
	content: counter(vsm-row);
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #eef7f1;
	color: #2c9a50;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 13px;
	display: grid;
	place-items: center;
	margin-top: 1px;
}

/* ---------- inputs area ------------------------------------------------------------ */

.vsm-pmed-styled .gfield > .ginput_container {
	order: 3;
	margin: 0;
	padding: 16px 20px 20px;
}

/* When a condition list precedes the answers, the answer strip gets the demo's
 * panel-foot treatment (soft ground + separator). Progressive enhancement via :has. */
.vsm-pmed-styled .gfield:has(> .gfield_description:not(.validation_message)) > .ginput_container_radio {
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	margin-top: 14px;
}

/* Radio choices → large tappable buttons (any number of choices; they wrap). */
.vsm-pmed-styled .ginput_container_radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.vsm-pmed-styled .ginput_container_radio .gchoice {
	flex: 1 1 120px;
	min-width: 0;
	position: relative;
	margin: 0;
	padding: 0;
}

/* Native input stays in the document (accessible, focusable) — just not painted. */
.vsm-pmed-styled .ginput_container_radio .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
	margin: 0;
}

.vsm-pmed-styled .ginput_container_radio .gchoice label {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 0;
	padding: 15px 10px;
	border: 2px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: #0d263b;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.vsm-pmed-styled .ginput_container_radio .gchoice label:hover {
	border-color: #a7d8b8;
}

.vsm-pmed-styled .ginput_container_radio .gchoice:has(input:checked) label {
	background: #2c9a50;
	border-color: #2c9a50;
	color: #fff;
}

.vsm-pmed-styled .ginput_container_radio .gchoice:has(input:focus-visible) label {
	outline: 3px solid #a7d8b8;
	outline-offset: 2px;
}

/* ---------- selects, textareas, text-ish inputs ------------------------------------ */

.vsm-pmed-styled .ginput_container select,
.vsm-pmed-styled .ginput_container textarea,
.vsm-pmed-styled .ginput_container input[type="text"],
.vsm-pmed-styled .ginput_container input[type="tel"],
.vsm-pmed-styled .ginput_container input[type="email"],
.vsm-pmed-styled .ginput_container input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px;
	font-size: 16px;
	font-family: 'Roboto', Arial, sans-serif;
	border: 2px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	color: #0d263b;
}

.vsm-pmed-styled .ginput_container select:focus-visible,
.vsm-pmed-styled .ginput_container textarea:focus-visible,
.vsm-pmed-styled .ginput_container input[type="text"]:focus-visible,
.vsm-pmed-styled .ginput_container input[type="tel"]:focus-visible,
.vsm-pmed-styled .ginput_container input[type="email"]:focus-visible,
.vsm-pmed-styled .ginput_container input[type="number"]:focus-visible {
	border-color: #35b45f;
	outline: 3px solid #a7d8b8;
	outline-offset: 1px;
}

.vsm-pmed-styled .ginput_container textarea {
	min-height: 90px;
	font-size: 15px;
}

/* Stepper "answer this first" nudge on an empty required select — and, since v1.3.1,
 * on empty required text / date / phone / email / number inputs, an empty required
 * address group and an unticked required checkbox group. The message band mirrors the
 * server-side validation_message so both errors look the same to the customer. */
.vsm-pmed-styled .gfield.vsm-missing select,
.vsm-pmed-styled .gfield.vsm-missing textarea,
.vsm-pmed-styled .gfield.vsm-missing input[type="text"],
.vsm-pmed-styled .gfield.vsm-missing input[type="tel"],
.vsm-pmed-styled .gfield.vsm-missing input[type="email"],
.vsm-pmed-styled .gfield.vsm-missing input[type="number"] {
	border-color: #c00000 !important;
}

.vsm-pmed-styled .gfield.vsm-missing {
	border: 1px solid #c00000;
}

.vsm-pmed-styled .gfield > .vsm-missing-msg {
	order: 4;
	margin: 0;
	padding: 12px 20px;
	background: #fbeaea;
	border-top: 1px solid #f3c6c6;
	color: #c00000;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
}

/* Identity block sub-labels (address lines, date/phone hints) under their inputs. */
.vsm-pmed-styled .ginput_complex label,
.vsm-pmed-styled .ginput_container_address label,
.vsm-pmed-styled .ginput_container_date .gfield_description {
	font-size: 13px;
	color: #64748b;
	font-family: 'Roboto', Arial, sans-serif;
	margin: 4px 0 0;
	display: block;
}

/* GF lays complex (address) sub-inputs out itself — just give the rows air. The
 * markup is untouched so the GF datepicker and Ideal Postcodes lookup keep working. */
.vsm-pmed-styled .ginput_container_address span {
	margin-bottom: 10px;
}

/* ---------- declaration checkboxes (NOT button style) ------------------------------ */

.vsm-pmed-styled .gfield > .ginput_container_checkbox {
	padding: 8px 20px 18px;
}

.vsm-pmed-styled .ginput_container_checkbox .gfield_checkbox {
	display: block;
	margin: 0;
	padding: 0;
}

.vsm-pmed-styled .ginput_container_checkbox .gchoice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 0;
	margin: 0;
}

.vsm-pmed-styled .ginput_container_checkbox .gchoice input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 1px 0 0;
	accent-color: #2c9a50;
	cursor: pointer;
}

.vsm-pmed-styled .ginput_container_checkbox .gchoice label {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: #334155;
	cursor: pointer;
}

/* ---------- consent fields (service forms — NOT button style) ---------------------- */

.vsm-pmed-styled .gfield > .ginput_container_consent {
	padding: 8px 20px 18px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.vsm-pmed-styled .ginput_container_consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 1px 0 0;
	accent-color: #2c9a50;
	cursor: pointer;
}

.vsm-pmed-styled .ginput_container_consent label {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: #334155;
	cursor: pointer;
}

/* ---------- error state ------------------------------------------------------------ */

/* Form-level validation summary (GF 2.5+). */
.vsm-pmed-styled .gform_validation_errors {
	background: #fff;
	border: 2px solid #c00000;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 18px;
	box-shadow: none;
}

.vsm-pmed-styled .gform_validation_errors h2 {
	color: #c00000;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	margin: 0;
}

/* Errored panel: red header bar variant + clear message below the inputs. */
.vsm-pmed-styled .gform_fields > .gfield.gfield_error {
	background: #fff !important;
	border: 1px solid #c00000 !important;
	padding: 0 !important;
}

.vsm-pmed-styled .gfield.gfield_error > .gfield_label,
.vsm-pmed-styled .gfield.gfield_error > legend.gfield_label {
	background: #c00000;
}

.vsm-pmed-styled .gfield > .validation_message {
	order: 4;
	margin: 0;
	padding: 12px 20px;
	background: #fbeaea;
	border-top: 1px solid #f3c6c6;
	color: #c00000;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
}

/* ---------- submit (genuine GF footer) --------------------------------------------- */

.vsm-pmed-styled .gform_footer {
	margin: 16px 0 0;
	padding: 0;
	display: block;
}

.vsm-pmed-styled .gform_footer input[type="submit"],
.vsm-pmed-styled .gform_footer button[type="submit"] {
	/* !important: beat Gravity Forms' Orbital theme button variables on service forms
	 * (see .vsm-step-continue note). */
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 26px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #2c9a50 !important;
	color: #fff !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: background 0.15s;
}

.vsm-pmed-styled .gform_footer input[type="submit"]:hover,
.vsm-pmed-styled .gform_footer button[type="submit"]:hover {
	background: #35b45f !important;
}

.vsm-pmed-styled .gform_footer input[type="submit"]:disabled,
.vsm-pmed-styled .gform_footer button[type="submit"]:disabled {
	background: #cbd5e1 !important;
	cursor: not-allowed;
}

.vsm-pmed-styled img.gform_ajax_spinner {
	display: block;
	margin: 12px auto 0;
}

/* GF multi-PAGE service forms keep GF's own paging (the stepper stands down) — its
 * Next/Previous buttons just take the same button language as the submit. */
.vsm-pmed-styled .gform_page_footer {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	display: flex;
	gap: 12px;
}

.vsm-pmed-styled .gform_page_footer input[type="button"],
.vsm-pmed-styled .gform_page_footer input[type="submit"],
.vsm-pmed-styled .gform_page_footer button {
	flex: 1;
	box-sizing: border-box;
	padding: 14px 26px;
	border: 0;
	border-radius: 10px;
	background: #2c9a50;
	color: #fff;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.vsm-pmed-styled .gform_page_footer .gform_previous_button {
	background: #fff;
	color: #0d263b;
	border: 2px solid #cbd5e1;
}

/* ---------- pass confirmation screen ("Assessment complete") ------------------------ */

/* The confirm div carries .vsm-pmed-styled itself (non-ajax render) AND sits inside
 * the shortcode wrapper on the ajax path — both selector shapes are covered. */
.vsm-pmed-styled .vsm-pmed-confirm,
.vsm-pmed-confirm.vsm-pmed-styled {
	background: #fff;
	border: 1px solid #dbe4ec;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(13, 38, 59, 0.06);
	padding: 40px 20px;
	text-align: center;
	font-family: 'Roboto', Arial, sans-serif;
	color: #334155;
}

.vsm-pmed-styled .vsm-confirm-badge {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #eef7f1;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
}

.vsm-pmed-styled .vsm-confirm-title {
	margin: 0 0 6px;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	color: #0d263b;
}

.vsm-pmed-styled .vsm-confirm-sub {
	margin: 0 0 22px;
	color: #64748b;
	font-size: 14.5px;
	line-height: 1.5;
}

/* Two buttons side by side (they stay side by side on mobile too). */
.vsm-pmed-styled .vsm-confirm-actions {
	display: flex;
	gap: 12px;
	max-width: 420px;
	margin: 0 auto;
}

.vsm-pmed-styled .vsm-confirm-actions a {
	flex: 1 1 0;
	display: block;
	box-sizing: border-box;
	padding: 14px 10px;
	border-radius: 10px;
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.vsm-pmed-styled a.vsm-confirm-primary {
	background: #2c9a50;
	border: 2px solid #2c9a50;
	color: #fff !important;
}

.vsm-pmed-styled a.vsm-confirm-primary:hover {
	background: #35b45f;
	border-color: #35b45f;
}

.vsm-pmed-styled a.vsm-confirm-secondary {
	background: #fff;
	border: 2px solid #cbd5e1;
	color: #0d263b !important;
}

.vsm-pmed-styled a.vsm-confirm-secondary:hover {
	border-color: #a7d8b8;
}

/* ---------- stepper chrome (elements the JS injects) -------------------------------- */

/* Applied by JS ONLY — with no JS this class never appears and every panel shows. */
.vsm-pmed-styled .vsm-step-hidden {
	display: none !important;
}

.vsm-pmed-styled .vsm-stepper-nav {
	margin-top: 16px;
}

.vsm-pmed-styled .vsm-step-continue {
	/* !important throughout: Gravity Forms' Orbital theme framework paints buttons via its
	 * own variable-driven rules (#204ce5 primary) that out-cascade plain class selectors on
	 * the service forms — the assessment page uses the basic theme and never fought us. */
	/* display deliberately NOT !important — the stepper hides this button via
	 * .vsm-step-hidden and that rule must always win (an !important display here
	 * broke hiding: Continue appeared on unanswered questions, 11 Sep). */
	display: block;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 26px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #2c9a50 !important;
	color: #fff !important;
	font-family: 'Poppins', Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: background 0.15s;
}

.vsm-pmed-styled .vsm-step-continue:hover {
	background: #35b45f !important;
}

.vsm-pmed-styled .vsm-step-back {
	display: inline-block;
	margin: 14px 0 2px;
	color: #64748b;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.vsm-pmed-styled .vsm-step-back:hover {
	color: #334155;
	text-decoration: underline;
}

/* Bottom progress bar. */
.vsm-pmed-styled .vsm-progress {
	margin-top: 20px;
	padding: 14px 2px 4px;
	border-top: 1px solid #eef2f6;
}

.vsm-pmed-styled .vsm-progress-meta {
	display: flex;
	justify-content: space-between;
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 13px;
	color: #64748b;
	margin-bottom: 7px;
}

.vsm-pmed-styled .vsm-progress-track {
	height: 8px;
	border-radius: 6px;
	background: #e2e8f0;
	overflow: hidden;
}

.vsm-pmed-styled .vsm-progress-fill {
	height: 100%;
	width: 0;
	border-radius: 6px;
	background: linear-gradient(90deg, #35b45f, #2c9a50);
	transition: width 0.35s;
}

/* ---------- mobile ----------------------------------------------------------------- */

@media (max-width: 480px) {
	.vsm-pmed-styled .gfield > .gfield_label,
	.vsm-pmed-styled .gfield > legend.gfield_label {
		padding: 13px 14px;
		font-size: 16px;
	}
	.vsm-pmed-styled .gfield > .gfield_description:not(.validation_message) {
		padding: 10px 14px 0;
	}
	.vsm-pmed-styled .gfield > .gfield_description:has(ul) {
		padding: 4px 0 0;
	}
	.vsm-pmed-styled .gfield_description ul li {
		padding: 9px 14px;
	}
	.vsm-pmed-styled .gfield > .ginput_container {
		padding: 12px 14px 16px;
	}
	.vsm-pmed-styled .gfield > .ginput_container_checkbox {
		padding: 6px 14px 14px;
	}
	.vsm-pmed-styled .gfield > .validation_message {
		padding: 10px 14px;
	}
	/* Yes/No stay side by side: zero basis instead of 120px. */
	.vsm-pmed-styled .ginput_container_radio .gchoice {
		flex: 1 1 0;
	}
	.vsm-pmed-styled .ginput_container_radio .gchoice label {
		padding: 13px 8px;
		font-size: 16px;
	}
}

/* Honeypot: GF's own stylesheet hides .gform_validation_container; keep that guarantee even
   if GF's CSS is dequeued by a theme/optimiser (belt-and-braces — never a visible step). */
.vsm-pmed-styled .gfield.gform_validation_container{display:none !important;}

/* Fallback for the alternative GF markup shape (a div .gfield wrapping an inner
 * <fieldset>): promote the fieldset's children to flex items of the .gfield panel so
 * the same order rules (header 1, list 2, inputs 3, validation 4) apply. Harmless on
 * the primary shape (no inner fieldset there). */
.vsm-pmed-styled .gform_fields > .gfield > fieldset {
	display: contents;
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}
.vsm-pmed-styled .gform_fields > .gfield > fieldset > .gfield_label { order: 1; }
.vsm-pmed-styled .gform_fields > .gfield > fieldset > .gfield_description:not(.validation_message) { order: 2; }
.vsm-pmed-styled .gform_fields > .gfield > fieldset > .ginput_container { order: 3; }
.vsm-pmed-styled .gform_fields > .gfield > fieldset > .validation_message { order: 4; }


/* Final guarantee (must stay the LAST display rules in this file): stepper-hidden
 * chrome and fields are hidden regardless of any earlier !important display. */
.vsm-pmed-styled .vsm-step-continue.vsm-step-hidden,
.vsm-pmed-styled .gform_footer.vsm-step-hidden,
.vsm-pmed-styled .vsm-step-hidden {
	display: none !important;
}