/*
 * Plunk Ebook Download — estilos frontend MÍNIMOS.
 * Filosofía: el formulario NO impone diseño propio; hereda los estilos del
 * contenedor/tema donde se inserte. Lo único con estilo propio es el BOTÓN
 * (colores definidos en el admin + ancho 100%).
 *
 * Variables (inyectadas inline por cada formulario desde el backend):
 *   --pe-accent    color del botón
 *   --pe-btn-text  color del texto del botón
 *   --pe-radius    radio de bordes del botón
 */

.plunk-ebook-form {
	--pe-accent: #111827;
	--pe-btn-text: #ffffff;
	--pe-radius: 8px;
}

/* Colocación de los campos: apilados con una separación discreta.
   Sin fondo, sin borde, sin sombra, sin centrado: se adapta al div. */
.plunk-ebook-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Los inputs solo ocupan el 100% del ancho; su aspecto lo pone el tema. */
.plunk-ebook-input {
	width: 100%;
	box-sizing: border-box;
}

/* Consentimiento: distribución básica, tipografía heredada del tema. */
.plunk-ebook-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* ---- Lo único realmente estilizado: el botón ---- */
.plunk-ebook-button {
	width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: var( --pe-accent );
	color: var( --pe-btn-text );
	border: none;
	border-radius: var( --pe-radius );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.plunk-ebook-button:hover {
	filter: brightness( 1.08 );
}

.plunk-ebook-button:disabled,
.plunk-ebook-button.is-loading {
	opacity: 0.65;
	cursor: default;
}

.plunk-ebook-button.is-loading::after {
	content: "";
	width: 1em;
	height: 1em;
	margin-left: 0.5rem;
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	border-top-color: currentColor;
	border-radius: 50%;
	animation: plunk-ebook-spin 0.7s linear infinite;
}

@keyframes plunk-ebook-spin {
	to { transform: rotate( 360deg ); }
}

/* Mensaje de estado: solo color, sin caja. */
.plunk-ebook-message {
	margin: 8px 0 0;
}

.plunk-ebook-message.is-success {
	color: #0c8a3e;
}

.plunk-ebook-message.is-error {
	color: #d63638;
}

/* Aviso que solo ven los administradores (config incompleta). */
.plunk-ebook-error {
	padding: 8px 12px;
	border: 1px solid #f0c33c;
	background: #fcf9e8;
	color: #7a5b00;
}