/* ===================================================================
   TechRoyal Ultimate UI Pro - frontend.css
   ملف CSS نقي بالكامل، بدون أي اعتماد على jQuery.
   =================================================================== */

:root {
	--trup-accent: #d4af37;
	--trup-card-bg-light: #ffffff;
	--trup-card-bg-dark: #1c1c1c;
}


/* ===================================================================
   الجزء الأول: زر "عرض جميع المنتجات" — محفوظ 100% كما كان
   بدون أي تغيير في القواعد أو المحدد، فقط منقول لهذه الإضافة.
   =================================================================== */
@media (max-width: 767px) {

	a[href="https://techroyal.net/products/"] {
		position: relative;
		overflow: hidden;
		display: inline-block;
		background: linear-gradient(135deg, #b8860b 0%, #f5d576 30%, #fff2c4 50%, #f5d576 70%, #b8860b 100%) !important;
		border: 1px solid #a9790a !important;
		border-radius: clamp(10px, 3vw, 20px) !important;
		box-shadow:
			0 2px 6px rgba(0, 0, 0, 0.18),
			0 0 12px rgba(212, 175, 55, 0.45);
		color: #3a2900 !important;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		-webkit-tap-highlight-color: transparent;
	}

	a[href="https://techroyal.net/products/"]::after {
		content: "";
		position: absolute;
		top: 0;
		left: -60%;
		width: 35%;
		height: 100%;
		background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
		transform: skewX(-20deg);
		animation: trmfe-shine 3.5s ease-in-out infinite;
		pointer-events: none;
	}

	@keyframes trmfe-shine {
		0% { left: -60%; }
		45% { left: 130%; }
		100% { left: 130%; }
	}

	a[href="https://techroyal.net/products/"]:hover,
	a[href="https://techroyal.net/products/"]:active {
		transform: translateY(-2px);
		box-shadow:
			0 4px 10px rgba(0, 0, 0, 0.2),
			0 0 18px rgba(212, 175, 55, 0.6);
	}
}


/* ===================================================================
   الجزء الثاني: قسم بطاقات المميزات — صور مربعة Premium كاملة
   (الصورة نفسها تحتوي كل التصميم: خلفية + أيقونة + عنوان + وصف،
   لذا لا يوجد أي حاوية بيضاء أو نص أو أيقونة مكررة فوقها)
   =================================================================== */

.trup-cards-section {
	width: 100%;
	box-sizing: border-box;
	padding: clamp(24px, 5vw, 48px) clamp(12px, 4vw, 40px);
	background: transparent;
}

.trup-cards-track {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(14px, 2.2vw, 24px);
	max-width: 1200px;
	margin: 0 auto;
}

.trup-card {
	flex: 1 1 0;
	box-sizing: border-box;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 22px;
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
	background: #0b0b0f;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	animation: trup-fade-up 0.6s ease forwards;
}

.trup-card:nth-child(1) { animation-delay: 0.05s; }
.trup-card:nth-child(2) { animation-delay: 0.15s; }
.trup-card:nth-child(3) { animation-delay: 0.25s; }
.trup-card:nth-child(4) { animation-delay: 0.35s; }

@keyframes trup-fade-up {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* تأثير هوفر ناعم للكمبيوتر فقط (تجنب تفعيله باللمس على الهاتف) */
@media (hover: hover) and (pointer: fine) {
	.trup-card:hover {
		transform: translateY(-6px) scale(1.015);
		box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
	}
}

.trup-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/* نسخة الكمبيوتر والتابلت: صف واحد أفقي بأربع بطاقات متساوية العرض */
@media (min-width: 577px) {
	.trup-cards-track {
		justify-content: center;
	}

	.trup-card {
		max-width: 270px;
	}
}

/* نسخة الهاتف: Slider أفقي ناعم بصف واحد فقط، بدون شبكة وبدون نزول لسطر ثانٍ */
@media (max-width: 576px) {
	.trup-cards-track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline: 24px;
		padding-bottom: 4px;
		scrollbar-width: none; /* Firefox */
	}

	.trup-cards-track::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	.trup-card {
		flex: 0 0 clamp(165px, 45vw, 200px);
		scroll-snap-align: center;
	}
}


/* ===================================================================
   الجزء الثالث: إعادة تصميم شريط السوشيال ميديا (Glass Effect)
   يعتمد على كلاسات Elementor القياسية لعنصر Social Icons،
   بدون تعديل الروابط أو أي تعديل على ملفات Elementor نفسها.
   =================================================================== */
.elementor-widget-social-icons .elementor-social-icons-wrapper {
	display: inline-flex !important;
	gap: clamp(8px, 2vw, 14px);
	padding: clamp(8px, 2vw, 14px) clamp(14px, 3vw, 22px);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.elementor-widget-social-icons .elementor-social-icon {
	width: clamp(38px, 8vw, 46px) !important;
	height: clamp(38px, 8vw, 46px) !important;
	line-height: clamp(38px, 8vw, 46px) !important;
	border-radius: 50% !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-widget-social-icons .elementor-social-icon:hover {
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
	.elementor-widget-social-icons .elementor-social-icons-wrapper {
		background: rgba(0, 0, 0, 0.28);
		border-color: rgba(255, 255, 255, 0.12);
	}
}

body.dark-mode .elementor-widget-social-icons .elementor-social-icons-wrapper,
html.dark .elementor-widget-social-icons .elementor-social-icons-wrapper {
	background: rgba(0, 0, 0, 0.28);
	border-color: rgba(255, 255, 255, 0.12);
}