/**
 * IELTSPro Shared Global Styles
 */

:root {

	--ieltspro-primary: #2563eb;
	--ieltspro-primary-dark: #1d4ed8;

	--ieltspro-success: #16a34a;
	--ieltspro-warning: #d97706;
	--ieltspro-danger: #dc2626;

	--ieltspro-text: #111827;
	--ieltspro-text-light: #6b7280;

	--ieltspro-border: #e5e7eb;
	--ieltspro-background: #ffffff;
	--ieltspro-background-light: #f9fafb;

	--ieltspro-shadow:
		0 4px 12px rgba(0, 0, 0, 0.04);

	--ieltspro-radius-sm: 8px;
	--ieltspro-radius: 12px;
	--ieltspro-radius-lg: 16px;

	--ieltspro-transition:
		all 0.2s ease;
}

/**
 * Universal box sizing.
 */
.ieltspro-wrapper *,
.ieltspro-wrapper *::before,
.ieltspro-wrapper *::after {
	box-sizing: border-box;
}

/**
 * Utility spacing classes.
 */
.ieltspro-mt-0 {
	margin-top: 0 !important;
}

.ieltspro-mb-0 {
	margin-bottom: 0 !important;
}

.ieltspro-mt-10 {
	margin-top: 10px !important;
}

.ieltspro-mt-20 {
	margin-top: 20px !important;
}

.ieltspro-mb-10 {
	margin-bottom: 10px !important;
}

.ieltspro-mb-20 {
	margin-bottom: 20px !important;
}

.ieltspro-p-0 {
	padding: 0 !important;
}

.ieltspro-p-10 {
	padding: 10px !important;
}

.ieltspro-p-20 {
	padding: 20px !important;
}

/**
 * Flex utilities.
 */
.ieltspro-flex {
	display: flex;
}

.ieltspro-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.ieltspro-flex-column {
	display: flex;
	flex-direction: column;
}

/**
 * Text utilities.
 */
.ieltspro-text-center {
	text-align: center;
}

.ieltspro-text-left {
	text-align: left;
}

.ieltspro-text-right {
	text-align: right;
}

.ieltspro-text-primary {
	color: var(--ieltspro-primary);
}

.ieltspro-text-success {
	color: var(--ieltspro-success);
}

.ieltspro-text-danger {
	color: var(--ieltspro-danger);
}

.ieltspro-text-muted {
	color: var(--ieltspro-text-light);
}

/**
 * Badge utilities.
 */
.ieltspro-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.ieltspro-badge-primary {
	background: #dbeafe;
	color: #1d4ed8;
}

.ieltspro-badge-success {
	background: #dcfce7;
	color: #166534;
}

.ieltspro-badge-warning {
	background: #fef3c7;
	color: #92400e;
}

.ieltspro-badge-danger {
	background: #fee2e2;
	color: #991b1b;
}

/**
 * Card utilities.
 */
.ieltspro-box {
	background: var(--ieltspro-background);
	border: 1px solid var(--ieltspro-border);
	border-radius: var(--ieltspro-radius-lg);
	box-shadow: var(--ieltspro-shadow);
}

/**
 * Responsive helpers.
 */
.ieltspro-hide-mobile {
	display: block;
}

.ieltspro-show-mobile {
	display: none;
}

/**
 * Image responsiveness.
 */
.ieltspro-wrapper img {
	max-width: 100%;
	height: auto;
}

/**
 * Table responsiveness.
 */
.ieltspro-responsive-table {
	width: 100%;
	overflow-x: auto;
}

.ieltspro-responsive-table table {
	min-width: 700px;
}

/**
 * Form controls.
 */
.ieltspro-input,
.ieltspro-select,
.ieltspro-textarea {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid var(--ieltspro-border);
	border-radius: var(--ieltspro-radius-sm);
	background: #ffffff;
	font-size: 15px;
	transition: var(--ieltspro-transition);
}

.ieltspro-textarea {
	min-height: 140px;
	resize: vertical;
}

.ieltspro-input:focus,
.ieltspro-select:focus,
.ieltspro-textarea:focus {
	border-color: var(--ieltspro-primary);
	outline: none;
	box-shadow: 0 0 0 1px var(--ieltspro-primary);
}

/**
 * Loading state.
 */
.ieltspro-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

.ieltspro-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	margin-left: -11px;
	border: 2px solid #d1d5db;
	border-top-color: var(--ieltspro-primary);
	border-radius: 50%;
	animation: ieltspro-spin 0.8s linear infinite;
}

@keyframes ieltspro-spin {

	to {
		transform: rotate(360deg);
	}
}

/**
 * Mobile styles.
 */
@media screen and (max-width: 768px) {

	.ieltspro-hide-mobile {
		display: none !important;
	}

	.ieltspro-show-mobile {
		display: block !important;
	}

	.ieltspro-flex-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ieltspro-badge {
		font-size: 11px;
		padding: 5px 10px;
	}
}

@media screen and (max-width: 480px) {

	.ieltspro-input,
	.ieltspro-select,
	.ieltspro-textarea {
		font-size: 14px;
	}

	.ieltspro-responsive-table table {
		min-width: 600px;
	}
}