/**
 * Markivo Forms — public frontend theme.
 *
 * One clean default look. All tunable values are CSS custom properties on
 * .markivo-form, so a future per-form style customizer can override them
 * (inline on the wrapper, or a scoped stylesheet) without touching this file.
 * All selectors are scoped under .markivo-* so nothing bleeds into the theme.
 */

.markivo-form {
	/* -- Design tokens (override these to restyle) -- */
	--markivo-primary: #2271b1;
	--markivo-primary-hover: #1a5c94;
	--markivo-text: #1e1e1e;
	--markivo-muted: #646970;
	--markivo-border: #c3c4c7;
	--markivo-border-focus: var( --markivo-primary );
	--markivo-error: #b32d2e;
	--markivo-bg: #fff;
	--markivo-radius: 6px;
	--markivo-space: 20px;
	--markivo-field-bg: #fff;

	box-sizing: border-box;
	color: var( --markivo-text );
	max-width: 720px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.markivo-form *,
.markivo-form *::before,
.markivo-form *::after {
	box-sizing: inherit;
}

/* -- Field grid: widths collapse to full-width on small screens -- */
.markivo-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --markivo-space );
}

.markivo-field {
	flex: 1 1 100%;
	min-width: 0;
}

.markivo-width-25 { flex-basis: calc( 25% - var( --markivo-space ) ); }
.markivo-width-33 { flex-basis: calc( 33.333% - var( --markivo-space ) ); }
.markivo-width-50 { flex-basis: calc( 50% - var( --markivo-space ) ); }
.markivo-width-66 { flex-basis: calc( 66.666% - var( --markivo-space ) ); }
.markivo-width-75 { flex-basis: calc( 75% - var( --markivo-space ) ); }
.markivo-width-100 { flex-basis: 100%; }

@media ( max-width: 600px ) {
	.markivo-field[class*='markivo-width-'] {
		flex-basis: 100%;
	}
}

/* -- Labels -- */
.markivo-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.markivo-field__required {
	color: var( --markivo-error );
	margin-left: 2px;
}

.markivo-field__help {
	margin: 6px 0 0;
	font-size: 0.85em;
	color: var( --markivo-muted );
}

/* -- Controls -- */
.markivo-form input[type='text'],
.markivo-form input[type='email'],
.markivo-form input[type='url'],
.markivo-form input[type='tel'],
.markivo-form input[type='number'],
.markivo-form input[type='date'],
.markivo-form select,
.markivo-form textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: var( --markivo-text );
	background: var( --markivo-field-bg );
	border: 1px solid var( --markivo-border );
	border-radius: var( --markivo-radius );
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.markivo-form textarea {
	min-height: 120px;
	resize: vertical;
}

.markivo-form input:focus,
.markivo-form select:focus,
.markivo-form textarea:focus {
	outline: 2px solid transparent;
	outline-offset: 1px;
	border-color: var( --markivo-border-focus );
	box-shadow: 0 0 0 2px rgba( 34, 113, 177, 0.35 );
}

/* Radio / checkbox groups */
.markivo-field__group {
	border: 0;
	margin: 0;
	padding: 0;
}

.markivo-field__group legend {
	font-weight: 600;
	margin-bottom: 6px;
	padding: 0;
}

.markivo-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}

.markivo-choice input {
	width: auto;
	margin: 0;
}

.markivo-choice label {
	font-weight: 400;
	margin: 0;
}

/* Section break (structural heading inside a step) */
.markivo-field--section-break {
	flex-basis: 100%;
	border-top: 1px solid var( --markivo-border );
	padding-top: var( --markivo-space );
}

.markivo-section__title {
	margin: 0 0 4px;
	font-size: 1.15em;
}

.markivo-section__description {
	margin: 0;
	color: var( --markivo-muted );
}

/* -- Error state -- */
.markivo-field--error input,
.markivo-field--error select,
.markivo-field--error textarea {
	border-color: var( --markivo-error );
	box-shadow: 0 0 0 2px rgba( 179, 45, 46, 0.25 );
}

.markivo-field__error {
	margin: 6px 0 0;
	color: var( --markivo-error );
	font-size: 0.85em;
	font-weight: 600;
}

/* -- Footer / buttons -- */
.markivo-form__footer,
.markivo-form__nav {
	margin-top: var( --markivo-space );
}

.markivo-form__nav {
	display: flex;
	gap: 12px;
	align-items: center;
}

.markivo-form__nav .markivo-form__next,
.markivo-form__nav .markivo-form__submit {
	margin-left: auto;
}

.markivo-form button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 11px 22px;
	border-radius: var( --markivo-radius );
	border: 1px solid transparent;
	transition: background 0.12s ease;
}

.markivo-form__submit,
.markivo-form__next {
	background: var( --markivo-primary );
	color: #fff;
}

.markivo-form__submit:hover,
.markivo-form__next:hover {
	background: var( --markivo-primary-hover );
}

.markivo-form__prev {
	background: transparent;
	color: var( --markivo-primary );
	border-color: var( --markivo-border );
}

.markivo-form button:focus-visible {
	outline: 2px solid var( --markivo-primary );
	outline-offset: 2px;
}

.markivo-form.markivo-is-loading .markivo-form__submit {
	opacity: 0.7;
	cursor: progress;
}

/* -- Multi-step progress -- */
.markivo-form__steps {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 var( --markivo-space );
	padding: 0;
}

.markivo-form__step-dot {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var( --markivo-border );
	transition: background 0.15s ease;
}

.markivo-form__step-dot.is-active {
	background: var( --markivo-primary );
}

/* -- Notices / confirmation -- */
.markivo-form__notice {
	margin-top: var( --markivo-space );
	padding: 12px 14px;
	border-radius: var( --markivo-radius );
	font-weight: 600;
}

.markivo-form__notice--error {
	background: #fcf0f1;
	color: var( --markivo-error );
	border: 1px solid var( --markivo-error );
}

.markivo-form__success {
	padding: 16px 18px;
	border-radius: var( --markivo-radius );
	background: #edfaef;
	border: 1px solid #4ab866;
	color: #14622b;
}

.markivo-form__success:focus {
	outline: none;
}

/* -- Admin-only "form unavailable" notice -- */
.markivo-form-notice--admin {
	padding: 12px 14px;
	border: 1px dashed var( --markivo-border, #c3c4c7 );
	border-radius: 6px;
	background: #fcfcfc;
	color: #646970;
}

/*
 * Honeypot (see Submission\AntiSpam): visually removed for humans without
 * display:none — some bots skip display:none fields, defeating the trap.
 * aria-hidden + tabindex=-1 on the markup keep it out of AT/keyboard flow.
 */
.markivo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}