/**
 * Alert Component Styles
 *
 * Uses --cmc-theme-* CSS variables from CM Core Library for theme style inheritance.
 *
 * @package Codemoy_Social_Login
 * @since 1.4.0
 * @updated 2.1.0 - Migrated to --cmc-theme-* variables
 */

.cmsl-alert-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: color-mix(in srgb, #000 50%, transparent) !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
}

.cmsl-alert-overlay.cmsl-show {
	display: flex !important;
}

.cmsl-alert-box {
	background: var(--cmc-theme-background-color) !important;
	padding: var(--cmsl-space-lg) !important;
	border-radius: var(--cmsl-radius-md) !important;
	max-width: 400px !important;
	width: 90% !important;
	box-shadow: 0 4px 12px color-mix(in srgb, #000 15%, transparent) !important;
	position: relative !important;
}

.cmsl-alert-message {
	margin: 0 0 var(--cmsl-space-md) 0;
	font-size: var(--cmsl-text-base);
	line-height: var(--cmsl-leading-normal);
	color: var(--cmc-theme-text-color);
}

.cmsl-alert-close-btn {
	width: 100%;
	cursor: pointer;
}