/**
 * Generic Modal System Styles
 *
 * Provides styling for reusable modal/popup system with:
 * - Dark overlay background
 * - Centered content container
 * - Scrollable content with hidden scrollbars
 * - Responsive design for all devices
 *
 * @package HelloElementorChild
 */

/* ===================================
   MODAL OVERLAY
   ================================ */

/**
 * Overlay background - covers entire viewport
 * Dark black with 85% opacity
 * Hidden by default, shown when .modal-active class is added
 */
.modal-overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 2147483647;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/**
 * Active state - display as flexbox for centering
 */
.modal-overlay.modal-active {
	display: flex;
}

/* ===================================
   MODAL CONTENT CONTAINER
   ================================ */

/**
 * Main content container
 * White background, centered, rounded corners
 * Max width 600px, scrollable if content exceeds viewport
 */
.modal-content {
	position: relative;
	background-color: #ffffff;
	border-radius: 8px;
	max-width: 600px;
	width: 100%;
	max-height: calc(100vh - 40px); /* Account for padding */
	overflow-y: auto; /* Enable vertical scrolling */
	overflow-x: hidden; /* Prevent horizontal scroll */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	padding: 40px 30px 30px 30px; /* Content padding */
}

/**
 * Hide scrollbars but maintain scroll functionality
 * Works across all modern browsers
 */
.modal-content {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.modal-content::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* ===================================
   MODAL INNER CONTENT
   ================================ */

/**
 * Inner wrapper for modal content
 * No additional padding needed - handled by modal-content
 */
.modal-inner {
	/* Padding removed - now on modal-content */
}

/* ===================================
   CLOSE BUTTON
   ================================ */

/**
 * Close button - positioned top-right
 * Circular black div with white X
 * Absolute positioning keeps it out of content flow
 */
.modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 36px;
	height: 36px;
	background-color: var(--e-global-color-7501ff5);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background-color 0.2s ease;
	user-select: none; /* Prevent text selection */
}

/**
 * Close button hover state
 */
.modal-close:hover {
	opacity: 0.9;
}

/**
 * Close button X icon
 */
.modal-close::before,
.modal-close::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 2px;
	background-color: #ffffff;
}

.modal-close::before {
	transform: rotate(45deg);
}

.modal-close::after {
	transform: rotate(-45deg);
}

/* ===================================
   BODY SCROLL LOCK
   ================================ */

/**
 * Prevent body scroll when modal is open
 * Applied via JavaScript
 */
body.modal-open {
	overflow: hidden;
}

/* ===================================
   RESPONSIVE STYLES
   ================================ */

/**
 * Tablet and below - adjust padding
 */
@media (max-width: 768px) {
	.modal-overlay {
		padding: 15px;
	}

	.modal-content {
		padding: 35px 20px 20px 20px;
		max-height: calc(100vh - 30px);
	}
}

/**
 * Mobile devices - further adjustments
 * Larger close button for touch-friendly interaction
 */
@media (max-width: 480px) {
	.modal-overlay {
		padding: 10px;
	}

	.modal-content {
		width: 100% !important;
		padding: 30px 15px 15px 15px;
		max-height: calc(100vh - 20px);
	}

	/* Larger close button for mobile */
	.modal-close {
		width: 42px;
		height: 42px;
		top: 10px;
		right: 10px;
	}

	.modal-close::before,
	.modal-close::after {
		width: 18px;
		height: 2.5px;
	}
}

/* ===================================
   MODAL TRIGGER STYLES (Optional)
   ================================ */

/**
 * Optional styling for elements with data-modal attribute
 * Makes it clear the element is clickable
 */
[data-modal] {
	cursor: pointer;
}