/**
 * ============================================================
 * UI Design System — Generic Agency Framework
 * Reusable, RTL-first, Conversion-Optimised Components
 * ============================================================
 */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
	--ui-primary:         #0073aa;
	--ui-primary-dark:    #005a87;
	--ui-primary-light:   #e8f4fb;
	--ui-danger:          #c0392b;
	--ui-danger-light:    #fff5f5;
	--ui-success:         #1a7a4a;
	--ui-text:            #1a2e45;
	--ui-text-muted:      #5a6a7a;
	--ui-border:          #dde4ed;
	--ui-radius-sm:       6px;
	--ui-radius:          10px;
	--ui-radius-lg:       16px;
	--ui-radius-pill:     50px;
	--ui-shadow-sm:       0 1px 4px rgba(0,0,0,.07);
	--ui-shadow:          0 3px 14px rgba(0,0,0,.09);
	--ui-shadow-hover:    0 8px 28px rgba(0,0,0,.14);
	--ui-transition:      all .25s cubic-bezier(.4,0,.2,1);
}


/* ─────────────────────────────────────────────────────────
   1. INFO BOX
   Usage: <div class="ui-info-box">...</div>
───────────────────────────────────────────────────────── */
.ui-info-box {
	background-color: var(--ui-primary-light);
	border: 1px solid #b3d4f5;
	border-inline-start: 4px solid var(--ui-primary);  /* RTL-aware accent */
	border-radius: var(--ui-radius);
	padding: 16px 20px;
	margin: 24px 0;
	font-size: .97rem;
	line-height: 1.75;
	color: var(--ui-text);
}
.ui-info-box p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────
   2. ALERT BOX
   Usage: <div class="ui-alert-box">...</div>
───────────────────────────────────────────────────────── */
.ui-alert-box {
	background-color: #ffffff;
	border: 1px solid #f5c6cb;
	border-inline-start: 4px solid var(--ui-danger);   /* RTL-aware accent */
	border-radius: var(--ui-radius);
	padding: 16px 20px;
	margin: 24px 0;
	font-size: .97rem;
	line-height: 1.75;
	color: #5c1a1a;
	box-shadow: var(--ui-shadow-sm);
	transition: var(--ui-transition);
}
.ui-alert-box:hover {
	box-shadow: var(--ui-shadow-hover);
	transform: translateY(-2px);
}
.ui-alert-box p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────
   3. SECTION TITLE
   Usage: <h2 class="ui-section-title">عنوان القسم</h2>
───────────────────────────────────────────────────────── */
.ui-section-title {
	text-align: center;
	font-weight: 700;
	color: var(--ui-text);
	margin-bottom: 2.25rem;
	position: relative;
	padding-bottom: 18px;
}
.ui-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 4px;
	background: linear-gradient(90deg, var(--ui-primary), var(--ui-primary-dark));
	border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────
   4. STEPS GRID
   Usage:
   <div class="ui-steps-grid">
     <div class="ui-step-card">
       <span class="ui-step-card__number">1</span>
       <h3 class="ui-step-card__title">الخطوة الأولى</h3>
       <p class="ui-step-card__text">وصف الخطوة هنا.</p>
     </div>
     ...
   </div>
───────────────────────────────────────────────────────── */
.ui-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.ui-step-card {
	background: #ffffff;
	border-radius: var(--ui-radius-lg);
	padding: 30px 20px 24px;
	text-align: center;
	box-shadow: var(--ui-shadow);
	border-top: 4px solid var(--ui-primary);
	transition: var(--ui-transition);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ui-step-card:hover {
	transform: translateY(-7px);
	box-shadow: var(--ui-shadow-hover);
}

.ui-step-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark));
	color: #fff;
	border-radius: 50%;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 16px;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,115,170,.3);
}

.ui-step-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--ui-text);
	line-height: 1.4;
}

.ui-step-card__text {
	font-size: .9rem;
	color: var(--ui-text-muted);
	line-height: 1.65;
	margin: 0;
}


/* ─────────────────────────────────────────────────────────
   5. PRIMARY CTA BUTTON
   Usage: <a href="#" class="ui-btn-primary">اطلب الخدمة الآن</a>
───────────────────────────────────────────────────────── */
.ui-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 34px;
	background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-dark) 100%);
	color: #ffffff !important;
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--ui-radius-pill);
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: var(--ui-transition);
	box-shadow: 0 4px 16px rgba(0,115,170,.35);
	letter-spacing: .025em;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}
.ui-btn-primary:hover,
.ui-btn-primary:focus-visible {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 10px 28px rgba(0,115,170,.48);
	color: #ffffff !important;
	outline: none;
}
.ui-btn-primary:active {
	transform: translateY(-1px) scale(1.01);
}
.ui-btn-primary--center {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}
.ui-btn-primary--lg {
	padding: 17px 42px;
	font-size: 1.1rem;
}