/**
 * Minimal default styling for [ecp_password_form]. Intentionally lightweight
 * so an Elementor template can override or replace it entirely.
 */

.ecp-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 24rem;
	margin: 0 auto;
}

.ecp-form__error {
	color: #b00020;
	margin: 0;
	font-size: 0.9rem;
}

.ecp-form__label {
	font-weight: 600;
	font-size: 0.95rem;
}

.ecp-form__input {
	padding: 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
}

.ecp-form__input:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.ecp-form__submit {
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.ecp-form__submit:hover,
.ecp-form__submit:focus {
	background: #135e96;
}

/**
 * Built-in fallback shown when the widget has no locked-state template
 * configured. Intentionally simple so a theme can override.
 */

.ecp-fallback {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 1.5rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fafafa;
	text-align: center;
}

.ecp-fallback__heading {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.ecp-fallback__message {
	margin: 0 0 1rem;
	color: #555;
}

/**
 * JS-controlled visibility states.
 *
 * Server emits both the actual content and the locked overlay with
 * `data-ecp-state="locked"` on the wrapper. unlock.js flips the attribute
 * to "unlocked" once the REST verify endpoint accepts the password.
 *
 * Hiding strategy: `max-height: 0` + `overflow: hidden` collapses the
 * content's visual height to nothing while keeping the element in the DOM
 * and the layout tree. Elementor's frontend script still initialises
 * widgets inside (display:none would have skipped them on some installs),
 * and there's no display-mode toggle for Elementor's `!important` flex/grid
 * rules to fight with on reveal.
 *
 * On unlock every property is reverted with `!important` because Elementor
 * uses `!important` liberally on `.e-con` and `.elementor-element`.
 */

.ecp-protected .ecp-content {
	overflow: hidden;
}

.ecp-protected[data-ecp-state="locked"] .ecp-content,
.ecp-protected:not([data-ecp-state]) .ecp-content {
	max-height: 0;
	visibility: hidden;
	pointer-events: none;
}

.ecp-protected[data-ecp-state="unlocked"] .ecp-content {
	max-height: none !important;
	visibility: visible !important;
	pointer-events: auto !important;
	overflow: visible !important;
}

.ecp-protected[data-ecp-state="unlocked"] .ecp-overlay {
	display: none !important;
}