/*
 * Sign-in block [dgs-toolkit/connexion]. Neutral on purpose: the toolkit
 * runs on many sites, so colours and fonts come from the theme (currentColor,
 * the theme's button styles through .wp-element-button). Override the
 * variables below in the theme to match a design system.
 */
.dgs-connexion-carte {
	--dgs-connexion-border: color-mix(in srgb, currentColor 20%, transparent);
	--dgs-connexion-muted: color-mix(in srgb, currentColor 70%, transparent);

	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	padding: 2.5em;
	border: 1px solid var(--dgs-connexion-border);
}

.dgs-connexion-titre {
	margin: 0 0 0.5em;
	line-height: 1.2;
}

.dgs-connexion-intro,
.dgs-connexion-deja {
	margin: 0 0 1.5em;
	color: var(--dgs-connexion-muted);
}

.dgs-connexion-deja {
	margin: 0;
}

.dgs-formulaire-connexion p {
	margin: 0 0 1em;
}

.dgs-formulaire-connexion label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.dgs-formulaire-connexion input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.65em 0.9em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--dgs-connexion-border);
}

.dgs-formulaire-connexion input[type="email"]:focus {
	border-color: currentColor;
	outline: 1px solid currentColor;
	outline-offset: 0;
}

.dgs-formulaire-connexion .dgs-connexion-turnstile {
	min-height: 65px;
	margin-bottom: 1em;
}

.dgs-connexion-bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

/* Disabled until Cloudflare Turnstile passes (when its keys are set). */
.dgs-connexion-bouton:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.dgs-connexion-carte {
		padding: 1.5em;
	}
}