/**
 * PROFESSIONAL MODALS STYLES
 * Complete modal styling system
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   MODAL CONTENT TYPES
   ============================================ */

.enrollment-modal-content,
.preview-modal-content,
.confirmation-modal-content {
	padding: var(--spacing-md) 0 !important;
}

.enrollment-modal-content .course-info-summary {
	margin-bottom: var(--spacing-lg) !important;
	padding-bottom: var(--spacing-lg) !important;
	border-bottom: 1px solid var(--color-border-light) !important;
}

.enrollment-modal-content .course-info-summary h3 {
	font-size: var(--font-size-xl) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-text-primary) !important;
	margin-bottom: var(--spacing-sm) !important;
}

.enrollment-modal-content .course-price-display {
	margin-top: var(--spacing-md) !important;
}

.enrollment-modal-content .course-price-display .price {
	font-size: var(--font-size-3xl) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-text-primary) !important;
}

.enrollment-modal-content .enrollment-benefits {
	margin-top: var(--spacing-lg) !important;
}

.enrollment-modal-content .enrollment-benefits h4 {
	font-size: var(--font-size-lg) !important;
	font-weight: var(--font-weight-semibold) !important;
	margin-bottom: var(--spacing-md) !important;
}

.enrollment-modal-content .enrollment-benefits ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.enrollment-modal-content .enrollment-benefits li {
	padding: var(--spacing-sm) 0 !important;
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
}

.preview-modal-content h3 {
	font-size: var(--font-size-xl) !important;
	font-weight: var(--font-weight-bold) !important;
	margin-bottom: var(--spacing-md) !important;
}

.preview-modal-content .preview-content {
	margin-bottom: var(--spacing-lg) !important;
	padding: var(--spacing-lg) !important;
	background-color: var(--color-gray-50) !important;
	border-radius: var(--radius-md) !important;
	max-height: 400px !important;
	overflow-y: auto !important;
}

.preview-modal-content .preview-cta {
	margin-top: var(--spacing-lg) !important;
	padding: var(--spacing-lg) !important;
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	border-radius: var(--radius-md) !important;
	text-align: center !important;
}

.preview-modal-content .preview-cta p {
	margin: 0 !important;
	color: var(--color-white) !important;
	font-weight: var(--font-weight-semibold) !important;
}

.confirmation-modal-content p {
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
	text-align: center !important;
	margin: 0 !important;
}

.success-modal-content,
.error-modal-content {
	text-align: center !important;
	padding: var(--spacing-xl) 0 !important;
}

.success-modal-content .success-icon,
.error-modal-content .error-icon {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto var(--spacing-lg) auto !important;
	font-size: var(--font-size-3xl) !important;
	font-weight: var(--font-weight-bold) !important;
}

.success-modal-content .success-icon {
	background-color: var(--color-success-bg) !important;
	color: var(--color-success) !important;
}

.error-modal-content .error-icon {
	background-color: var(--color-error-bg) !important;
	color: var(--color-error) !important;
}

.success-modal-content h3,
.error-modal-content h3 {
	font-size: var(--font-size-xl) !important;
	font-weight: var(--font-weight-bold) !important;
	margin-bottom: var(--spacing-sm) !important;
}

.success-modal-content p,
.error-modal-content p {
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
	margin: 0 !important;
}