/**
 * Secudeal V2 - Modales
 * 
 * Styles pour les modales réutilisables (success, error, confirm)
 * 
 * @package SecudealV2
 * @since 2.0.0
 */

/* Modal backdrop plus visible */
.modal-backdrop.show {
	opacity: 0.6;
}

/* Modal content arrondi */
.modal-content {
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Modal header - Plus d'espace pour la croix */
.modal-header {
	padding-top: 1.5rem;
	padding-right: 1.5rem;
}

/* Bouton close personnalisé avec couleur rose */
.modal-header .btn-close.global-color-rose {
	opacity: 1;
	background-size: 20px;
	width: 1em;
	height: 1em;
	font-weight: 900;
	transition: transform 0.2s ease;
	/* Filtre CSS pour transformer le noir en rose #E0014F */
	filter: invert(17%) sepia(97%) saturate(6477%) hue-rotate(337deg) brightness(91%) contrast(106%);
}

.modal-header .btn-close.global-color-rose:hover {
	transform: scale(1.1);
}

/* Icônes des modales - 22x22px exactement */
#modalSuccess .bi-check-circle,
#modalError .bi-exclamation-circle,
#modalConfirm .bi-question-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px !important;
	width: 22px !important;
	height: 22px !important;
	animation: modalIconPop 0.3s ease-out;
}

/* Conteneur avec fond pour l'icône de succès - 54x54px */
#modalSuccess .bi-check-circle {
	width: 54px !important;
	height: 54px !important;
	border-radius: 50%;
	background-color: #0070E0;
	font-size: 22px !important;
	color: #ffffff !important;
}

/* Conteneur avec fond pour l'icône d'erreur - 54x54px */
#modalError .bi-exclamation-circle {
	width: 54px !important;
	height: 54px !important;
	border-radius: 50%;
	background-color: #dc3545;
	font-size: 22px !important;
	color: #ffffff !important;
}

/* Conteneur avec fond pour l'icône de confirmation - 54x54px */
#modalConfirm .bi-question-circle {
	width: 54px !important;
	height: 54px !important;
	border-radius: 50%;
	background-color: #0070E0;
	font-size: 22px !important;
	color: #ffffff !important;
}

@keyframes modalIconPop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Message des modales */
#modalSuccessMessage,
#modalErrorMessage,
#modalConfirmMessage {
	line-height: 1.6;
	color: var(--secudeal-text-grey);
}

/* Boutons des modales */
.modal-footer .btn {
	min-width: 100px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.modal-footer .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Animation d'entrée de la modale */
.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translateY(-50px);
}

.modal.show .modal-dialog {
	transform: translateY(0);
}

/* Responsive */
@media (max-width: 575px) {
	.modal-dialog {
		margin: 1rem;
	}
	
	.modal-body {
		padding: 1.5rem 1rem;
	}
	
	/* Garde la taille des icônes à 22px même sur mobile */
	#modalSuccess .bi-check-circle,
	#modalError .bi-exclamation-circle,
	#modalConfirm .bi-question-circle {
		font-size: 22px !important;
		width: 22px !important;
		height: 22px !important;
	}
	
	/* Conteneurs restent 54x54px sur mobile */
	#modalSuccess .bi-check-circle,
	#modalError .bi-exclamation-circle,
	#modalConfirm .bi-question-circle {
		width: 54px !important;
		height: 54px !important;
	}
}