/**
 * MASAF Components
 * المكونات البصرية القابلة لإعادة الاستخدام.
 *
 * جميع أسماء الأصناف مسبوقة بـ masaf لتقليل التعارض
 * مع Kadence والإضافات الأخرى.
 */

/* ========================================
   الأزرار
======================================== */

.masaf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--masaf-space-2);

	min-height: var(--masaf-control-height);
	padding: var(--masaf-button-padding-y) var(--masaf-button-padding-x);

	border: 1px solid transparent;
	border-radius: var(--masaf-radius-sm);

	font-family: var(--masaf-font-body);
	font-size: var(--masaf-font-size-md);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;

	cursor: pointer;

	transition:
		color var(--masaf-transition-fast),
		background-color var(--masaf-transition-fast),
		border-color var(--masaf-transition-fast),
		box-shadow var(--masaf-transition-fast),
		transform var(--masaf-transition-fast);
}

.masaf-btn:hover {
	text-decoration: none;
}

.masaf-btn:active {
	transform: translateY(1px);
}

.masaf-btn--primary {
	background: var(--masaf-color-primary);
	border-color: var(--masaf-color-primary);
	color: var(--masaf-color-white);
}

.masaf-btn--primary:hover {
	background: var(--masaf-color-primary-dark);
	border-color: var(--masaf-color-primary-dark);
	color: var(--masaf-color-white);
}

.masaf-btn--accent {
	background: var(--masaf-color-accent);
	border-color: var(--masaf-color-accent);
	color: var(--masaf-color-white);
}

.masaf-btn--accent:hover {
	background: var(--masaf-color-accent-hover);
	border-color: var(--masaf-color-accent-hover);
	color: var(--masaf-color-white);
}

.masaf-btn--outline {
	background: transparent;
	border-color: var(--masaf-color-primary);
	color: var(--masaf-color-primary);
}

.masaf-btn--outline:hover {
	background: var(--masaf-color-primary-light);
	border-color: var(--masaf-color-primary-dark);
	color: var(--masaf-color-primary-dark);
}

.masaf-btn--white {
	background: var(--masaf-color-white);
	border-color: var(--masaf-color-white);
	color: var(--masaf-color-primary);
}

.masaf-btn--white:hover {
	background: var(--masaf-color-background);
	border-color: var(--masaf-color-background);
	color: var(--masaf-color-primary-dark);
}

.masaf-btn--sm {
	min-height: var(--masaf-control-height-sm);
	padding: 8px 16px;
	font-size: var(--masaf-font-size-sm);
}

.masaf-btn--lg {
	min-height: var(--masaf-control-height-lg);
	padding: 15px 30px;
	font-size: var(--masaf-font-size-lg);
}

.masaf-btn--block {
	display: flex;
	width: 100%;
}

.masaf-btn:disabled,
.masaf-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}


/* ========================================
   البطاقات
======================================== */

.masaf-card {
	min-width: 0;
	padding: var(--masaf-space-6);
	border: 1px solid var(--masaf-color-border);
	border-radius: var(--masaf-radius-lg);
	background: var(--masaf-color-white);
	box-shadow: var(--masaf-shadow-sm);

	transition:
		border-color var(--masaf-transition-normal),
		box-shadow var(--masaf-transition-normal),
		transform var(--masaf-transition-normal);
}

.masaf-card--interactive:hover {
	border-color: var(--masaf-color-border-strong);
	box-shadow: var(--masaf-shadow-md);
	transform: translateY(-2px);
}

.masaf-card--soft {
	background: var(--masaf-color-background);
}

.masaf-card--paper {
	background: var(--masaf-color-paper);
}

.masaf-card--primary {
	background: var(--masaf-color-primary);
	border-color: var(--masaf-color-primary);
	color: var(--masaf-color-white);
}

.masaf-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--masaf-space-4);
	border-radius: var(--masaf-radius-md);
	background: var(--masaf-color-primary-light);
	color: var(--masaf-color-primary);
	font-size: 1.5rem;
}

.masaf-card__title {
	margin: 0 0 var(--masaf-space-3);
	color: var(--masaf-color-text);
	font-size: var(--masaf-font-size-xl);
	font-weight: 800;
	line-height: var(--masaf-line-height-tight);
}

.masaf-card__text {
	margin: 0;
	color: var(--masaf-color-muted);
	line-height: var(--masaf-line-height-relaxed);
}

.masaf-card--primary .masaf-card__title,
.masaf-card--primary .masaf-card__text {
	color: var(--masaf-color-white);
}


/* ========================================
   عناوين الأقسام
======================================== */

.masaf-section-heading {
	max-width: 760px;
	margin: 0 auto var(--masaf-space-10);
	text-align: center;
}

.masaf-section-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--masaf-space-2);
	margin-bottom: var(--masaf-space-3);
	color: var(--masaf-color-primary);
	font-size: var(--masaf-font-size-sm);
	font-weight: 800;
}

.masaf-section-heading__title {
	margin: 0 0 var(--masaf-space-4);
	color: var(--masaf-color-text);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 900;
	line-height: var(--masaf-line-height-tight);
}

.masaf-section-heading__description {
	margin: 0;
	color: var(--masaf-color-muted);
	font-size: var(--masaf-font-size-lg);
	line-height: var(--masaf-line-height-relaxed);
}


/* ========================================
   الشارات
======================================== */

.masaf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid transparent;
	border-radius: var(--masaf-radius-pill);
	font-size: var(--masaf-font-size-xs);
	font-weight: 800;
	line-height: 1.5;
}

.masaf-badge--primary {
	background: var(--masaf-color-primary-light);
	color: var(--masaf-color-primary-dark);
}

.masaf-badge--accent {
	background: var(--masaf-color-accent-light);
	color: #93400E;
}

.masaf-badge--success {
	background: var(--masaf-color-success-light);
	color: var(--masaf-color-success);
}

.masaf-badge--warning {
	background: var(--masaf-color-warning-light);
	color: var(--masaf-color-warning);
}

.masaf-badge--danger {
	background: var(--masaf-color-danger-light);
	color: var(--masaf-color-danger);
}


/* ========================================
   القوائم
======================================== */

.masaf-list {
	display: grid;
	gap: var(--masaf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.masaf-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--masaf-space-3);
	color: var(--masaf-color-text);
	line-height: var(--masaf-line-height-relaxed);
}

.masaf-list__marker {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--masaf-color-primary-light);
	color: var(--masaf-color-primary);
	font-size: var(--masaf-font-size-sm);
	font-weight: 900;
}


/* ========================================
   شريط الدعوة إلى الإجراء
======================================== */

.masaf-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--masaf-space-8);
	padding: var(--masaf-space-8);
	border-radius: var(--masaf-radius-xl);
	background: var(--masaf-color-primary);
	color: var(--masaf-color-white);
}

.masaf-cta__content {
	flex: 1 1 auto;
}

.masaf-cta__title {
	margin: 0 0 var(--masaf-space-3);
	color: var(--masaf-color-white);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: var(--masaf-line-height-tight);
}

.masaf-cta__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	line-height: var(--masaf-line-height-relaxed);
}

.masaf-cta__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: var(--masaf-space-3);
}


/* ========================================
   رسائل التنبيه
======================================== */

.masaf-alert {
	padding: var(--masaf-space-4) var(--masaf-space-5);
	border: 1px solid var(--masaf-color-border);
	border-radius: var(--masaf-radius-md);
	background: var(--masaf-color-white);
	color: var(--masaf-color-text);
}

.masaf-alert--success {
	border-color: #B9E0C8;
	background: var(--masaf-color-success-light);
	color: var(--masaf-color-success);
}

.masaf-alert--warning {
	border-color: #F1D69A;
	background: var(--masaf-color-warning-light);
	color: var(--masaf-color-warning);
}

.masaf-alert--danger {
	border-color: #F2C2BE;
	background: var(--masaf-color-danger-light);
	color: var(--masaf-color-danger);
}

.masaf-alert--info {
	border-color: #C7DDF4;
	background: var(--masaf-color-info-light);
	color: var(--masaf-color-info);
}


/* ========================================
   الخطوات
======================================== */

.masaf-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--masaf-space-6);
	counter-reset: masaf-step;
}

.masaf-step {
	position: relative;
	padding: var(--masaf-space-6);
	border: 1px solid var(--masaf-color-border);
	border-radius: var(--masaf-radius-lg);
	background: var(--masaf-color-white);
	counter-increment: masaf-step;
}

.masaf-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--masaf-space-4);
	border-radius: 50%;
	background: var(--masaf-color-primary);
	color: var(--masaf-color-white);
	font-weight: 900;
}

.masaf-step__title {
	margin: 0 0 var(--masaf-space-3);
	color: var(--masaf-color-text);
	font-size: var(--masaf-font-size-lg);
	font-weight: 800;
}

.masaf-step__text {
	margin: 0;
	color: var(--masaf-color-muted);
	line-height: var(--masaf-line-height-relaxed);
}


/* ========================================
   الأكورديون
======================================== */

.masaf-accordion {
	display: grid;
	gap: var(--masaf-space-3);
}

.masaf-accordion__item {
	overflow: hidden;
	border: 1px solid var(--masaf-color-border);
	border-radius: var(--masaf-radius-md);
	background: var(--masaf-color-white);
}

.masaf-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--masaf-space-4);
	width: 100%;
	padding: var(--masaf-space-5);
	border: 0;
	background: transparent;
	color: var(--masaf-color-text);
	font-family: var(--masaf-font-body);
	font-weight: 800;
	text-align: start;
}

.masaf-accordion__trigger:hover {
	background: var(--masaf-color-background);
}

.masaf-accordion__icon {
	flex: 0 0 auto;
	transition: transform var(--masaf-transition-fast);
}

.masaf-accordion__trigger[aria-expanded="true"] .masaf-accordion__icon {
	transform: rotate(180deg);
}

.masaf-accordion__panel {
	padding: 0 var(--masaf-space-5) var(--masaf-space-5);
	color: var(--masaf-color-muted);
	line-height: var(--masaf-line-height-relaxed);
}


/* ========================================
   تجاوب الشاشات
======================================== */

@media (max-width: 767px) {
	.masaf-card {
		padding: var(--masaf-space-5);
	}

	.masaf-cta {
		align-items: stretch;
		flex-direction: column;
		padding: var(--masaf-space-6);
	}

	.masaf-cta__actions {
		flex-direction: column;
	}

	.masaf-cta__actions .masaf-btn {
		width: 100%;
	}

	.masaf-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.masaf-accordion__trigger {
		padding: var(--masaf-space-4);
	}

	.masaf-accordion__panel {
		padding-inline: var(--masaf-space-4);
	}
}/* ========================================
   Dark surface text overrides
======================================== */

.masaf-section--primary,
.masaf-section--primary .masaf-section-heading,
.masaf-section--primary .masaf-section-heading__eyebrow,
.masaf-section--primary .masaf-section-heading__title,
.masaf-section--primary .masaf-section-heading__description,
.masaf-section--primary .masaf-text,
.masaf-section--primary .masaf-text-muted {
	color: var(--masaf-color-white);
}

.masaf-section--primary .masaf-section-heading__eyebrow {
	color: rgba(255, 255, 255, 0.78);
}

.masaf-section--primary .masaf-section-heading__description,
.masaf-section--primary .masaf-text-muted {
	color: rgba(255, 255, 255, 0.82);
}

.masaf-on-dark,
.masaf-on-dark h1,
.masaf-on-dark h2,
.masaf-on-dark h3,
.masaf-on-dark h4,
.masaf-on-dark p,
.masaf-on-dark .masaf-text-muted {
	color: var(--masaf-color-white);
}

.masaf-on-dark .masaf-text-muted {
	color: rgba(255, 255, 255, 0.82);
}