/*
 * Site5 – event registration dialog (Figma "Popup / Inscription événement", node 784:12341):
 * 1065 × 663 px, event summary on the left (391 px), form on the right.
 */

.has-dialog {
	overflow: hidden;
}

.register-dialog {
	width: min(1065px, 100% - 32px);
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 17px;
	background: var(--white);
	box-shadow: 0 20px 52px rgba(0, 0, 0, 0.2);
	color: #0b1421;
}

.register-dialog::backdrop {
	background: rgba(11, 20, 33, 0.6);
}

.register-dialog[open] {
	animation: register-in 0.2s ease-out;
}

@keyframes register-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.register-dialog[open] {
		animation: none;
	}
}

.register-dialog__panel {
	display: grid;
	grid-template-columns: 391px minmax(0, 1fr);
	min-height: 663px;
}

/* Event summary ------------------------------------------------------------ */

.register-summary {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 26px 26px 24px;
	background: #0b1421;
	color: var(--white);
}

.register-summary__tag {
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	height: 26px;
	margin: 4px 0;
	padding: 0 8px;
	border-radius: 6.5px;
	background: var(--red-bright);
	font-size: 8.7px;
	font-weight: 700;
	line-height: 10.9px;
	text-transform: uppercase;
}

.register-summary__date {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 83px;
}

.register-summary__badge {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 13px;
	background: #fdecee;
	color: var(--red-bright);
	font-weight: 700;
	text-align: center;
}

.register-summary__badge span:first-child {
	font-size: 26px;
	line-height: 29px;
}

.register-summary__badge span:last-child {
	margin-top: 4px;
	font-size: 8.7px;
	line-height: 10.9px;
}

.register-summary__label {
	color: var(--red-bright);
	font-size: 8.2px;
	font-weight: 700;
	line-height: 19.6px;
	text-transform: uppercase;
}

.register-summary__datetime {
	font-size: 10.9px;
	font-weight: 600;
	line-height: 19.6px;
}

.register-summary__venue {
	color: #bfc9d6;
	font-size: 9.2px;
	line-height: 19.6px;
}

.register-summary__title {
	min-height: 102px;
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 32.6px;
}

.register-summary__excerpt {
	margin-top: -7px;
	color: #e3e5e8;
	font-size: 9.8px;
	line-height: 15.2px;
}

.register-summary__info {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 1px;
	font-size: 9.2px;
	line-height: 12px;
}

.register-summary__info div {
	display: grid;
	grid-template-columns: 121px minmax(0, 1fr);
	align-items: center;
	min-height: 32.6px;
}

.register-summary__info dt {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.register-summary__info dd {
	color: #e3e5e8;
}

.register-summary__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fdecee;
}

.register-summary__note {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 37px;
	margin-top: auto;
	margin-bottom: 126px;
	padding: 8px 11px;
	border-radius: 9.8px;
	background: rgba(227, 229, 232, 0.14);
	font-size: 8.9px;
	line-height: 12px;
}

.register-summary__note span {
	width: 19.6px;
	color: #138a5b;
	font-size: 9.8px;
	font-weight: 700;
	text-align: center;
}

/* Form ------------------------------------------------------------------- */

.register-form-wrap {
	position: relative;
	padding: 28px 30px;
}

.register-form__kicker {
	color: var(--red-bright);
	font-size: 8.7px;
	font-weight: 700;
	line-height: 10.9px;
	text-transform: uppercase;
}

.register-form__title {
	margin-top: 21.7px;
	font-family: var(--font-serif);
	font-size: 27.2px;
	font-weight: 700;
	line-height: 33.7px;
}

.register-form__text {
	margin-top: 12.4px;
	padding-bottom: 18.6px;
	border-bottom: 1px solid #e9edf1;
	color: #667384;
	font-size: 10.3px;
	line-height: 14.1px;
}

.register-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.register-form__notice {
	margin-top: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--red-soft);
	color: #0b1421;
	font-size: 11px;
	line-height: 16px;
}

.register-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12.4px 13px;
	margin-top: 13px;
}

.register-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6.5px;
}

.register-field label {
	font-size: 10.3px;
	font-weight: 600;
	line-height: 19.6px;
}

.register-field input,
.register-field select {
	width: 100%;
	height: 45.6px;
	padding: 0 13px;
	border: 1px solid #dfe4ea;
	border-radius: 9.8px;
	background: var(--white);
	color: #0b1421;
	font: inherit;
	font-size: 10.3px;
	line-height: 14.1px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.register-field select {
	padding-right: 32px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23667384' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
	color: #667384;
	appearance: none;
}

.register-field input::placeholder {
	color: #8b96a5;
	opacity: 1;
}

.register-field input:focus-visible,
.register-field select:focus-visible {
	border-color: #0b1421;
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 20, 33, 0.08);
}

.register-field [aria-invalid="true"] {
	border-color: var(--red-bright);
}

/* Errors sit in the gap under the field, so the form keeps its height. */
.register-field__error {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 1px;
	color: var(--red-bright);
	font-size: 9.5px;
	line-height: 11px;
}

.register-form__consent,
.register-form__turnstile {
	position: relative;
	margin-top: 13px;
}

.register-form__consent label {
	display: flex;
	align-items: center;
	gap: 9.8px;
	min-height: 44px;
	padding: 8px 10.9px;
	border-radius: 8.7px;
	background: #f6f7f8;
	color: #667384;
	font-size: 8.7px;
	line-height: 12px;
	cursor: pointer;
}

.register-form__consent input {
	flex-shrink: 0;
	width: 19.6px;
	height: 19.6px;
	margin: 0;
	border: 1px solid #dfe4ea;
	border-radius: 4.3px;
	background: var(--white);
	appearance: none;
	cursor: pointer;
}

.register-form__consent input:checked {
	border-color: var(--red-bright);
	background: var(--red-bright) url("../icons/check-white.svg") no-repeat center / 14px;
}

.register-form__consent input:focus-visible {
	outline: 2px solid #0b1421;
	outline-offset: 2px;
}

.register-form__consent input[aria-invalid="true"] {
	border-color: var(--red-bright);
}

.register-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10.9px;
	margin-top: 15px;
}

.register-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 272px;
	height: 43.5px;
	padding: 0 16px;
	border: 1px solid var(--red-bright);
	border-radius: 8.7px;
	background: var(--red-bright);
	color: var(--white);
	font: inherit;
	font-size: 9.8px;
	font-weight: 700;
	line-height: 13px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.register-button:hover {
	border-color: #c70511;
	background: #c70511;
}

.register-button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.register-button--light {
	min-width: 143px;
	border-color: #dfe4ea;
	background: var(--white);
	color: #0b1421;
}

.register-button--light:hover {
	border-color: #0b1421;
	background: var(--white);
}

.register-dialog__close {
	position: absolute;
	top: 12.8px;
	right: 13.4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34.8px;
	height: 34.8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--red-bright);
	color: var(--white);
	font-size: 19.6px;
	line-height: 1;
	cursor: pointer;
}

.register-dialog__close:hover {
	background: #c70511;
}

.register-dialog__close:focus-visible,
.register-button:focus-visible {
	outline: 2px solid #0b1421;
	outline-offset: 2px;
}

/* Confirmation */

.register-success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 64px;
}

.register-success[hidden] {
	display: none;
}

.register-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--red-bright);
}

.register-success__title {
	font-family: var(--font-serif);
	font-size: 27.2px;
	font-weight: 700;
	line-height: 33.7px;
}

.register-success__text {
	max-width: 480px;
	color: #667384;
	font-size: 13px;
	line-height: 20px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.register-dialog__panel {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	/* Compact summary above the form. */
	.register-summary {
		padding: 20px 64px 20px 20px;
	}

	.register-summary__title {
		min-height: 0;
		font-size: 22px;
		line-height: 28px;
	}

	.register-summary__excerpt,
	.register-summary__info,
	.register-summary__note {
		display: none;
	}

	.register-dialog__close {
		top: 14px;
		right: 14px;
		z-index: 1;
	}

	/* The close button sits over the dark summary. */
	.register-form-wrap {
		position: static;
	}

	.register-dialog__panel {
		position: relative;
	}
}

@media (max-width: 767px) {
	.register-dialog {
		width: 100%;
		max-height: 100dvh;
		border-radius: 0;
	}

	.register-form-wrap {
		padding: 22px 20px 28px;
	}

	.register-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* The small text of the design is hard to read and type on a phone. */
	.register-field label,
	.register-form__text,
	.register-form__consent label {
		font-size: 13px;
		line-height: 18px;
	}

	.register-field input,
	.register-field select {
		font-size: 16px;
	}

	.register-form__kicker,
	.register-summary__label,
	.register-summary__tag {
		font-size: 11px;
	}

	.register-summary__datetime,
	.register-summary__venue {
		font-size: 13px;
	}

	.register-field__error {
		font-size: 11px;
		line-height: 13px;
	}

	.register-form__actions .register-button {
		flex: 1 1 100%;
		min-width: 0;
		font-size: 13px;
	}
}