/* CF7 Confirm & Validate — Frontend Styles
 *
 * Customisable via CSS custom properties on :root.
 * Selectors are kept at single-class specificity so themes can override freely.
 */

:root {
	--cf7cv-overlay-bg:        	rgba(0, 0, 0, 0.55);
	--cf7cv-overlay-padding-block:2rem;
	--cf7cv-modal-bg:          		#fff;
	--cf7cv-modal-radius:      		8px;
	--cf7cv-modal-padding-block:  2rem;
	/* min 10 - max 32, vpmin 320 - vpmax 1200 */
	--cf7cv-modal-padding-inline: clamp(0.625rem, 0.125rem + 2.5vw, 2rem);
	--cf7cv-modal-max-width:   		640px;
	--cf7cv-modal-shadow:      		0 8px 40px rgba(0, 0, 0, 0.18);
	--cf7cv-modal-title-size:  		1.25rem;
	--cf7cv-modal-note-color:  		#555;
	--cf7cv-field-value-bg:    		#f6f7f7;
	--cf7cv-field-value-color: 		#222;
	--cf7cv-field-value-radius:		4px;
	--cf7cv-error-color:       		#d63638;
	--cf7cv-error-size:        		0.85em;
	--cf7cv-actions-gap:       		0.75rem;
}

/* ── Overlay / Modal ────────────────────────────────────── */

.cf7cv-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--cf7cv-overlay-bg);
	z-index: 9999;
	padding: var(--cf7cv-overlay-padding-block) 1rem;
	box-sizing: border-box;
}

.cf7cv-overlay.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cf7cv-modal {
	background: var(--cf7cv-modal-bg);
	border-radius: var(--cf7cv-modal-radius);
	box-shadow: var(--cf7cv-modal-shadow);
	max-width: var(--cf7cv-modal-max-width);
	width: 100%;
	padding: var(--cf7cv-modal-padding-block) var(--cf7cv-modal-padding-inline);
	box-sizing: border-box;
	position: relative;
}

/* ── Modal inner sections ───────────────────────────────── */

.cf7cv-modal__inner {
	overflow-y: auto;
	max-height: calc(100vh - ( var(--cf7cv-overlay-padding-block) * 2) - var(--cf7cv-modal-padding-block));
	padding-right: 4px;
}

.cf7cv-modal__title {
	font-size: var(--cf7cv-modal-title-size);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.cf7cv-modal__note {
	color: var(--cf7cv-modal-note-color);
	margin: 0 0 1.25rem;
	white-space: pre-wrap;
}

.cf7cv-modal__fields {
	margin-bottom: 1.5rem;
}

.cf7cv-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cf7cv-actions-gap);
	align-items: center;
}

/* ── Field value display in modal ──────────────────────── */

.cf7cv-field-value {
	background: var(--cf7cv-field-value-bg);
	color: var(--cf7cv-field-value-color);
	border-radius: var(--cf7cv-field-value-radius);
	padding: 0.4em 0.6em;
	min-height: 1.8em;
	word-break: break-all;
}

.cf7cv-field-value:empty::before {
	content: '\2014';
	opacity: 0.4;
}

/* ── Validation error tip ───────────────────────────────── */

.cf7cv-not-valid-tip {
	display: block;
	color: var(--cf7cv-error-color);
	font-size: var(--cf7cv-error-size);
	margin-top: 4px;
}

/* ── Hide back button in the main form ─────────────────── */

.cf7cv-back-btn {
	display: none;
}

/* ── Pristine state: suppress CF7 error tips until confirm is clicked ── */

.cf7cv-pristine .wpcf7-not-valid-tip {
	display: none !important;
}

/* ── Accessibility ──────────────────────────────────────── */

.cf7cv-overlay:focus-within .cf7cv-modal {
	outline: none;
}

/* Focus trap helper */
.cf7cv-modal:focus {
	outline: none;
}