/* Responsive: phone and tablet – form stays on screen, popup centered */

/* Base: allow content to shrink on small viewports */
* {
	box-sizing: border-box;
}

/* --- Error/success popup: always centered, fits on small screens --- */
@media screen and (max-width: 520px) {
	#ResponseDiv {
		left: 50%;
		margin-left: 0;
		width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
		transform: translateX(-50%);
		top: 10%;
		max-height: 80vh;
		padding: 44px 12px 16px 12px; /* extra top so close button doesn't cover message */
	}
	#ResponseDiv #Response {
		float: none;
		width: 100%;
	}
	#ResponseDiv h2 {
		float: none;
	}
	#ResponseDiv ul.errors {
		padding-left: 20px;
	}
	#ResponseDiv .close {
		right: 8px;
		top: 8px;
	}
}

/* --- Form container: full width on small screens --- */
@media screen and (max-width: 768px) {
	.NFTextCenter {
		width: 90%;
	}
	/* Responsive form container */
	html, body {
		max-width: 100%;
		padding: 0 6px 80px 6px !important; /* minimal side padding so content uses width */
	}
	form.niceform {
		padding: 0;
	}
	fieldset {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 16px;
	}

	#submit {
		width: 100%;
		left: 0;
		right: 0;
	}

	/* Labels and values: stack or narrow so nothing overflows */
	.label {
		width: 100%;
		text-align: left;
		padding-right: 0;
		padding-bottom: 4px;
		float: none;
		display: block;
	}
	.value {
		display: block;
		width: 100%;
	}
	.no_label {
		padding-left: 0;
	}

	/* Text inputs full width – fill the value column */
	.value input[type="text"],
	.value input[type="email"],
	.value input[type="tel"],
	.value select,
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	select,
	.fake_input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
	}
	.value {
		min-width: 0;
	}
	.check input {
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
	}

	/* Signature area */
	.signature {
		width: 100% !important;
		max-width: 100%;
		margin-left: 0;
	}

	/* Provisions: full width, no fixed margins */
	.provision_title {
		font-size: 1.35em;
		margin-left: 0;
		clear: both;
		display: block;
		width: 100%;
	}
	.provision_text {
		width: 100%;
	}
	.provision_text input {
		width: 100% !important;
		max-width: 100%;
	}
	.provision_break {
		margin: 12px 0;
	}

	/* Checklist: stack items, full width */
	.checklist {
		width: 100%;
		float: none;
		display: block;
		margin-bottom: 6px;
	}
	.checklist span {
		position: static;
	}

	/* Y/N and checkbox row: keep inline but allow wrap */
	.clear_line {
		clear: both;
	}

	/* Photo area */
	.take_photo,
	.photo,
	#photo,
	#monitor {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
		min-height: 200px;
	}
	#os_photo_msg,
	#os_photo_msg img {
		width: 100% !important;
		max-width: 100%;
		min-height: 200px;
		margin-left: 0;
	}
	.snapbutton {
		position: relative;
		margin-left: 0;
		margin-top: 10px;
	}
	.please_take_photo {
		display: block;
	}

	/* Date/DOB row */
	.dob_age {
		float: none;
		margin-left: 0;
		margin-top: 4px;
	}

	/* Unhide / back link */
	.unhide {
		right: 8px;
		top: 8px;
	}
}

/* --- Phone: tighter spacing and font sizes --- */
@media screen and (max-width: 480px) {
	#ResponseDiv {
		font-size: 15px;
	}
	.provision_title {
		font-size: 1.2em;
	}
	.success {
		font-size: 1.4em;
	}
	#ResponseDiv ul.errors {
		font-size: 0.95em;
	}
}

/* --- Print: keep fixed widths for PDF --- */
@media print {
	html, body { max-width: none; }
	#ResponseDiv, .container { display: none !important; }
}