/* 1080Forms — public styles */

.tenf-form {
	max-width: 640px;
	margin: 0 0 2em;
	font-family: inherit;
}

.tenf-form-title {
	margin: 0 0 1em;
	font-size: 1.5em;
}

.tenf-field {
	margin-bottom: 1.25em;
}

.tenf-field-label {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 600;
}

.tenf-required {
	color: #d63638;
	margin-left: 2px;
}

.tenf-field-input,
.tenf-field textarea,
.tenf-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1em;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	line-height: 1.4;
}

.tenf-field-input:focus,
.tenf-field textarea:focus,
.tenf-field select:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.tenf-field-desc {
	margin: 0.4em 0 0;
	font-size: 0.9em;
	color: #646970;
}

.tenf-form-columns-2 {
	max-width: 900px;
}

.tenf-form-columns-2 .tenf-fields-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 1.5em;
}

.tenf-form-columns-2 .tenf-fields-wrap .tenf-field-full-width {
	grid-column: 1 / -1;
}

@media (max-width: 1024px) {
	.tenf-form-columns-2 .tenf-fields-wrap {
		column-gap: 1em;
	}
}

@media (max-width: 768px) {
	.tenf-form-columns-2 .tenf-fields-wrap {
		grid-template-columns: 1fr;
	}
}

.tenf-radio-group,
.tenf-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.tenf-radio-group.tenf-columns-2,
.tenf-checkbox-group.tenf-columns-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4em 1.5em;
}

.tenf-radio-group.tenf-columns-3,
.tenf-checkbox-group.tenf-columns-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4em 1.5em;
}

@media (max-width: 480px) {
	.tenf-radio-group.tenf-columns-2,
	.tenf-checkbox-group.tenf-columns-2,
	.tenf-radio-group.tenf-columns-3,
	.tenf-checkbox-group.tenf-columns-3 {
		grid-template-columns: 1fr;
	}
}

.tenf-radio-label,
.tenf-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: normal;
	cursor: pointer;
}

/* ----------------------------------------------------------------
 * Custom checkbox / radio — appearance override, ticked on select,
 * shape controlled by tenf-options-round / tenf-options-square class.
 * ---------------------------------------------------------------- */
/* Acceptance field */
.tenf-acceptance-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: normal;
	cursor: pointer;
	line-height: 1.5;
}

.tenf-acceptance-label input[type="checkbox"] {
	flex-shrink: 0;
	border-radius: 3px; /* always square */
}

.tenf-acceptance-text a {
	color: #2271b1;
	text-decoration: underline;
}

.tenf-acceptance-text a:hover {
	color: #135e96;
}

.tenf-radio-label    input[type="radio"],
.tenf-checkbox-label input[type="radio"],
.tenf-checkbox-label input[type="checkbox"],
.tenf-acceptance-label input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 2px solid #8c8f94;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0;
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease, background-size 0.1s ease;
}

/* Default shapes when no explicit class is set */
.tenf-radio-label    input[type="radio"],
.tenf-checkbox-label input[type="radio"]   { border-radius: 50%; }
.tenf-checkbox-label input[type="checkbox"] { border-radius: 3px; }

/* Explicit shape overrides */
.tenf-options-round  input[type="radio"],
.tenf-options-round  input[type="checkbox"] { border-radius: 50%; }
.tenf-options-square input[type="radio"],
.tenf-options-square input[type="checkbox"] { border-radius: 3px; }

/* Hover */
.tenf-radio-label:hover      input,
.tenf-checkbox-label:hover   input,
.tenf-acceptance-label:hover input { border-color: #2271b1; }

/* Checked: blue fill + white SVG tick */
.tenf-radio-label      input:checked,
.tenf-checkbox-label   input:checked,
.tenf-acceptance-label input:checked {
	border-color: #2271b1;
	background-color: #2271b1;
	background-size: 70%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.5L5.5 11L12 3' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Focus ring */
.tenf-radio-label      input:focus-visible,
.tenf-checkbox-label   input:focus-visible,
.tenf-acceptance-label input:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.tenf-submit-row {
	margin-top: 1.5em;
}

.tenf-submit-btn {
	background: #2271b1;
	color: #fff;
	border: 0;
	padding: 0.7em 1.5em;
	font-size: 1em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tenf-submit-btn:hover {
	background: #135e96;
}

.tenf-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tenf-messages {
	margin-top: 1em;
}

.tenf-messages.tenf-success {
	padding: 0.8em 1em;
	background: #edfaef;
	border-left: 4px solid #00a32a;
	color: #1d2327;
}

.tenf-messages.tenf-error {
	padding: 0.8em 1em;
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #1d2327;
}

.tenf-field-error {
	display: block;
	margin-top: 0.3em;
	color: #d63638;
	font-size: 0.9em;
}

.tenf-field.tenf-has-error .tenf-field-input,
.tenf-field.tenf-has-error textarea,
.tenf-field.tenf-has-error select {
	border-color: #d63638;
}

/* Draft form admin notice */
.tenf-draft-notice {
	background: #fffce0;
	border: 1px solid #f0d050;
	border-left: 4px solid #dba617;
	padding: 10px 14px;
	border-radius: 4px;
	color: #50575e;
	font-style: italic;
	margin: 0 0 1em;
}

/* ----------------------------------------------------------------
 * Name field
 * ---------------------------------------------------------------- */

.tenf-name-group {
	display: flex;
	gap: 1.5em;
}

.tenf-name-part {
	flex: 1;
	min-width: 0;
}

.tenf-name-sublabel {
	display: block;
	margin-top: 0.3em;
	font-size: 0.82em;
	color: #646970;
}

.tenf-name-sublabel em {
	font-style: italic;
}

.tenf-name-middle {
	flex: 0.75; /* slightly narrower than first/last */
}

@media (max-width: 480px) {
	.tenf-name-group { flex-direction: column; }
}

/* ----------------------------------------------------------------
 * Confirmation step
 * ---------------------------------------------------------------- */

.tenf-confirmation {
	max-width: 640px;
	margin: 0 0 2em;
	font-family: inherit;
}

.tenf-confirm-title {
	margin: 0 0 0.6em;
	font-size: 1.5em;
	line-height: 1.25;
}

.tenf-confirm-content {
	margin-bottom: 1.5em;
	line-height: 1.65;
	color: #3c434a;
}

.tenf-confirm-content p { margin: 0 0 0.75em; }
.tenf-confirm-content p:last-child { margin-bottom: 0; }
.tenf-confirm-content a { color: #2271b1; }
.tenf-confirm-content a:hover { color: #135e96; }

.tenf-confirm-download {
	margin-top: 1.25em;
}

.tenf-confirm-download .tenf-field-label {
	margin-bottom: 0.5em;
}

/* ----------------------------------------------------------------
 * Wizard / multi-step form
 * ---------------------------------------------------------------- */

.tenf-form-wizard .tenf-wizard-step {
	display: none;
}

.tenf-form-wizard .tenf-wizard-step.is-active {
	display: block;
}

.tenf-wiz-hidden {
	display: none !important;
}

/* Progress track */
.tenf-wizard-progress {
	margin-bottom: 2em;
}

.tenf-wizard-progress-track {
	height: 4px;
	background: #dcdcde;
	border-radius: 2px;
	margin-bottom: 1em;
	overflow: hidden;
}

.tenf-wizard-progress-fill {
	height: 100%;
	background: #2271b1;
	border-radius: 2px;
	transition: width 0.3s ease;
}

/* Step indicator dots */
.tenf-wizard-indicators {
	display: flex;
	gap: 0;
}

.tenf-wizard-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
	font-size: 0.8em;
	color: #787c82;
	text-align: center;
}

.tenf-wizard-indicator + .tenf-wizard-indicator::before {
	content: '';
	position: absolute;
	top: 14px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: #dcdcde;
	z-index: 0;
}

.tenf-wizard-indicator.is-complete + .tenf-wizard-indicator::before,
.tenf-wizard-indicator.is-active + .tenf-wizard-indicator::before {
	background: #2271b1;
}

.tenf-wizard-indicator-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #dcdcde;
	color: #646970;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: 0.4em;
	position: relative;
	z-index: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.tenf-wizard-indicator.is-active .tenf-wizard-indicator-dot {
	background: #2271b1;
	color: #fff;
}

.tenf-wizard-indicator.is-complete .tenf-wizard-indicator-dot {
	background: #00a32a;
	color: #fff;
}

.tenf-wiz-check { display: none; }
.tenf-wiz-num   { display: inline; }

.tenf-wizard-indicator.is-complete .tenf-wiz-check { display: inline; }
.tenf-wizard-indicator.is-complete .tenf-wiz-num   { display: none; }

.tenf-wizard-step-label {
	font-size: 0.8em;
	color: #787c82;
	line-height: 1.3;
	max-width: 80px;
	word-break: break-word;
}

.tenf-wizard-indicator.is-active .tenf-wizard-step-label {
	color: #2271b1;
	font-weight: 600;
}

.tenf-wizard-indicator.is-complete .tenf-wizard-step-label {
	color: #00a32a;
}

@media (max-width: 480px) {
	.tenf-wizard-step-label { display: none; }
}

/* Wizard nav buttons */
.tenf-wizard-nav {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

/* 50/50 split only when Back is visible — JS adds --paired class when targetIdx > 0 */
.tenf-wizard-nav--paired .tenf-wizard-back,
.tenf-wizard-nav--paired .tenf-wizard-next,
.tenf-wizard-nav--paired .tenf-submit-btn {
	flex: 1;
}

.tenf-wizard-back {
	background: transparent;
	color: #2271b1;
	border: 1px solid #2271b1;
	padding: 0.7em 1.5em;
	font-size: 1em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.tenf-wizard-back:hover {
	background: #f0f6fc;
}

.tenf-wizard-next {
	background: #2271b1;
	color: #fff;
	border: 0;
	padding: 0.7em 1.5em;
	font-size: 1em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tenf-wizard-next:hover {
	background: #135e96;
}

/* CAPTCHA field */
.tenf-captcha-widget { display: inline-block; }
.tenf-captcha-notice {
	font-size: 0.875em;
	color: #9a5b00;
	background: #fbf0da;
	border-left: 3px solid #f0dba8;
	padding: 8px 12px;
	margin: 0;
}

/* Google Places autocomplete dropdown — ensure it appears above everything */
.pac-container {
	z-index: 100000 !important;
}

/* Download field */
.tenf-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.7em 1.5em;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tenf-download-btn.tenf-download-unlocked {
	background: #2271b1;
	color: #fff;
}

.tenf-download-btn.tenf-download-unlocked:hover {
	background: #135e96;
	color: #fff;
}

.tenf-download-btn.tenf-download-locked {
	background: #dcdcde;
	color: #787c82;
	cursor: not-allowed;
	/* disabled attribute on <button> already blocks interaction — no CSS hack needed */
}

.tenf-download-hint {
	margin: 0.5em 0 0;
	font-size: 0.875em;
	color: #646970;
}

.tenf-download-conditional {
	display: inline-block;
}

/* Download image mode */
.tenf-download-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.tenf-download-img--locked {
	opacity: 0.65;
	cursor: not-allowed;
	filter: grayscale( 20% );
}

.tenf-download-img--unlocked {
	cursor: pointer;
	opacity: 1;
	filter: none;
}

.tenf-download-img-link {
	display: inline-block;
	line-height: 0;
}

.tenf-download-img-link:hover .tenf-download-img {
	opacity: 0.88;
	transition: opacity 0.15s ease;
}