@import "../form/form.css";
@import "../components/loader.css";
@import "../components/hero.css";

/*
    Sommaire:
	2. Intro
	3. Progress
	4. Phase 1 - Données utilisateur
	5. Phase 2 - Cursus
	6. Phase 3 - Mode de paiement
	7. Phase 4 - Récapitulatif
	8. Phase 5 - Contrat
	9. Phase 6 - Paiement
	10. Phase 7 - Fin
*/

/*
    ==============================
    📱 Mobile
    ==============================
*/

.register-form-container {
	display: grid;
	gap: 1.25rem;
}

/* 3. Progress */

.register-progress {
	margin-bottom: 1.25rem;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 1.875rem;
}

.register-progress-step-container {
	aspect-ratio: 1/1;
}
.register-progress-step-container.active .step-value {
	color: var(--color-primary);
}

.step-label {
	display: none;
	visibility: hidden;
}

/* 4. Phase 1 - Données utilisateur */

.register {
	padding: var(--space-vertical) var(--space-horizontal);
}

.register-intro {
	display: flex;
	justify-content: center;
	margin-bottom: 1.875rem;
}

.register-form {
	display: grid;
	gap: var(--space-m);
}

.register-form-fields-container {
	display: grid;
	gap: 0.9375rem;
}

.register-form-progress {
	margin-bottom: 1.25rem;
}

.register-form-progress-label {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.register-form-progress-label span:last-child {
	color: var(--color-grey-700);
}

.radio-inputs-container,
.checkbox-inputs-container {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.payment .radio-inputs-container,
.payment .checkbox-inputs-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-form-field-container,
.register-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}

.register-form-field-radio-container label,
.register-form-consent label {
	cursor: pointer;
}

.register-form-field-input {
	border: none;
	border-radius: 5px;
	padding: 0.625rem;
	height: 100%;
	font-size: var(--font-label);
	background-color: var(--color-grey-100);
}

.register-form-field-input:not(input[type="radio"]):focus,
.register-form-consent input:focus {
	outline: 1px solid var(--color-primary);
}

.register-form-button {
	margin: auto;
}

.register-form-field-flag {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.3125rem;
}

.register-form-field-flag-select {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.register-form-field-radio-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.register-form-field-radio-container div {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
}

.register-form-field-radio-container[type="radio"] {
	color: var(--color-primary);
}

.register-form-consent {
	display: flex;
	align-items: baseline;
	color: var(--color-grey-700);
	gap: 0.3125rem;
}

.register-form-indication {
	font-size: var(--font-label);
	text-align: center;
	margin: auto;
}

/* 5. Phase 2 - Cursus */

.previous-cursus-container,
.highest-degree-inputs-container {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1.25rem;
}

/* 6. Phase 3 - Mode de paiement */

.register-form-distance,
.register-form-alternance,
.register-form-presentiel {
	display: grid;
	gap: 1.25rem;
}

.payment-method-container {
	display: grid;
	gap: 0.9375rem;
}

.payment-method-description {
	display: grid;
	gap: 0.625rem;
}

.payment-method-description p {
	font-size: var(--font-label);
}

.payment-method-warning {
	font-weight: 700;
}

.checkbox-inputs-container {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 7. Phase 4 - Récapitulatif */

.register-recap-loader-container {
	display: flex;
}

.register-recap {
	display: grid;
	gap: 1.25rem;
}

.register-recap-details-container {
	display: grid;
	gap: 0.9375rem;
}

.register-recap-details {
	height: fit-content;
	display: grid;
	gap: 0.625rem;
}

/* 8. Phase 5 - Contrat */

.register-contract-intro {
	display: grid;
	gap: 0.9375rem;
}

.register-contract-infos {
	display: inherit;
	color: var(--color-grey-700);
	list-style: decimal inside;
}

.register-contract-pdf {
	width: 100%;
	height: 75vh;
	border-radius: 5px;
}

/* 9. Phase 6 - Paiement */

.register-payment {
	display: grid;
	gap: 1.25rem;
}

.payments-container {
	display: grid;
	gap: 5vw;
}

.payment-title {
	text-align: center;
}

.payment-container {
	display: grid;
	gap: 0.9375rem;
	padding: 1.25rem;
	outline: 1px solid var(--color-primary);
	border-radius: 5px;
}

.cost-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.payment-details {
	display: grid;
	gap: 0.3125rem;
}

.cost-value,
.cost-label {
	font-size: var(--font-label);
}

.cost-container.total .cost-label,
.cost-container.total .cost-value {
	font-size: var(--font-text);
	font-weight: 600;
}

.payment-button-container {
	display: flex;
	justify-content: center;
}

.register-cic-logo-container {
	display: flex;
	justify-content: center;

	img {
		width: 200px;
	}
}

.payment-container-divider {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.divider-text {
	font-weight: 700;
	text-transform: uppercase;
}

.divider-stroke {
	width: 100%;
	height: 1px;
	background-color: var(--color-grey-500);
}

/* 10. Phase 7 - Fin */

.register-end {
	display: grid;
	gap: 1.25rem;
}

.register-end-button-container {
	display: flex;
}

/* Popup overlay masqué par défaut, centré et plein écran */
#custom-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

/* Pour afficher le popup, ajoutez la classe “show” sur l'overlay */
#custom-popup-overlay.show {
	display: flex;
}

/* Fenêtre du popup */
#custom-popup {
	background: #fff;
	padding: 2rem;
	max-width: 500px;
	width: 90%;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.4;
}

/* Bouton de fermeture */
#custom-popup-close {
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	border: none;
	border-radius: 4px;
	background: var(--color-primary);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#custom-popup-close:hover {
	background: var(--color-primary-dark);
}

/*
    ==============================
    💻 Laptop / tablet
    ==============================
*/
@media only screen and (min-width: 768px) {
	.register-form-button,
	.register-form-indication {
		width: 100%;
		text-align: center;
	}

	/* 2.f Phase 4 */

	.register-recap-details-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
    ==============================
    🖥️ Desktop
    ==============================
*/
@media only screen and (min-width: 1024px) {
	/* 2. Formulaire */

	.register-form {
		width: 100%;
		gap: var(--space-l);
	}

	.register-form-field-container,
	.register-form-field {
		gap: 0.625rem;
	}

	.register-form-fields-container.user-data {
		grid-template:
			"civility ."
			"lastname firstname"
			"birthdate adrese"
			"zipcode city"
			"mail phone" / 1fr 1fr;
		gap: var(--space-m);
	}

	.register-form-fields-container.course-data {
		grid-template:
			"format rythme"
			"school school"
			"course course"
			"formule formule" / 1fr 1fr;
		gap: var(--space-m);
	}

	.civility {
		grid-area: civility;
	}

	.lastname {
		grid-area: lastname;
	}

	.firstname {
		grid-area: firstname;
	}

	.birthdate {
		grid-area: birthdate;
	}

	.adrese {
		grid-area: adrese;
	}

	.zipcode {
		grid-area: zipcode;
	}

	.city {
		grid-area: city;
	}

	.mail {
		grid-area: mail;
	}

	.phone {
		grid-area: phone;
	}

	.format {
		grid-area: format;
	}

	.rhythm {
		grid-area: rythme;
	}

	.school {
		grid-area: school;
	}

	.course {
		grid-area: course;
	}

	.formule {
		grid-area: formule;
	}

	/* 2.e Phase 3 */

	.payment .radio-inputs-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 2.f Phase 4 */

	.register-recap-details-container {
		gap: 1.25rem;
	}

	/* 2.g Phase 5 */

	.contract-data {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2.h Phase 6 */

	.payments-container {
		grid-template-columns: 5fr 1fr 5fr;
		align-items: center;
	}

	.payment-container-divider {
		display: flex;
		flex-direction: column;
		place-items: center;
	}

	.divider-stroke {
		width: 1px;
		height: 50px;
	}

	.divider-text {
		padding: var(--space-s) 0;
		display: flex;
		place-content: center;
	}

	/* 1) Même grille 2 colonnes pour format + rythme */
	.register-form-fields-container.course-data .radio-inputs-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-m);
	}

	/* 2) Chaque label “bouton” prend toute la largeur de sa case */
	.register-form-fields-container.course-data .radio-input-container > label {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.75rem 1rem;
		white-space: normal; /* pour gérer le retour à la ligne sur “100% distance” */
	}

	/* 3) Séparateur vertical entre format et rythme */
	.register-form-fields-container.course-data .rhythm {
		border-left: 1px solid var(--color-grey-500);
		padding-left: var(--space-m);
		display: flex; /* on passe en flex simplement pour centrer verticalement */
		align-items: center;
	}
}