/* =========================================================================
   ملف التنسيقات المخصصة - متجر أرقم كوم
   كل قسم معلّق عليه بالعربي. الألوان تأتي من المتغيّرات المعرّفة في functions.php:
     --arqam-primary   = #532253  (بنفسجي - لون البراند الأساسي)
     --arqam-secondary = #fcd226  (أصفر - لون ثانوي)
   ========================================================================= */

:root {
	/* قيم احتياطية في حال لم تُحقن المتغيّرات */
	--arqam-primary: #532253;
	--arqam-secondary: #fcd226;
	--arqam-muted: #9aa0a6; /* لون باهت للسعر القديم */
	--arqam-menu-size: 17px;   /* حجم خط القائمة العلوية — عدّله لتكبير/تصغير القائمة */
}

/* =========================================================================
   (خط) توحيد خط الموقع على Cairo (يدعم العربي)
   ========================================================================= */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
.site-header, .masthead,
.navbar, .nav, .menu, .menu a,
.woocommerce, .price, a {
	font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

/* =========================================================================
   (قائمة) حجم وسماكة خط القائمة العلوية (Navbar Primary - الشريط الأصفر)
   نستهدف كل الأماكن المحتملة لقائمة Electro
   ========================================================================= */
.navbar-primary .nav > li > a,
.secondary-nav .nav > li > a,
.electro-navbar .nav > li > a,
.primary-nav .nav > li > a,
.navbar .navbar-nav > li > a,
ul.nav-inline > li > a,
#navbar-primary a,
.yamm .nav > li > a {
	font-size: var(--arqam-menu-size) !important;
	font-weight: 700 !important;
}

/* =========================================================================
   (0) تصغير اللوغو وتقليل المساحة حوله
   نستهدف كل الأماكن المحتملة للوغو في قالب Electro
   ========================================================================= */
img.custom-logo,
.custom-logo-link img,
.custom-logo,
.site-header .logo img,
.header-logo img,
.header-logo-area img,
.electro-logo img,
#site-logo img,
.navbar-brand img,
.site-branding img,
a.logo img,
.masthead .logo img {
	max-width: 140px !important;   /* تقريباً نصف الحجم السابق — عدّل الرقم حسب رغبتك */
	max-height: 70px !important;
	height: auto !important;
	width: auto !important;
}

/* تقليل المسافات (padding) حول منطقة اللوغو */
.site-header .logo,
.header-logo,
.header-logo-area,
.site-branding {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* =========================================================================
   (1) بطاقات المنتجات
   زوايا مدوّرة خفيفة + حد رفيع + ظل ناعم وتكبير الصورة عند الـ hover
   ========================================================================= */
ul.products li.product,
.products .product,
.product-grid-item {
	border: 1px solid #ececec;          /* حد رفيع */
	border-radius: 12px;                /* زوايا مدوّرة خفيفة */
	overflow: hidden;                   /* لإخفاء تكبير الصورة خارج البطاقة */
	background: #fff;
	transition: box-shadow .25s ease, transform .25s ease;
	position: relative;                 /* مهم لتموضع الشارات */
}

/* عند مرور الماوس: ظل ناعم ورفع بسيط للبطاقة */
ul.products li.product:hover,
.products .product:hover,
.product-grid-item:hover {
	box-shadow: 0 10px 28px rgba(83, 34, 83, .15); /* ظل بلون البراند */
	transform: translateY(-3px);
}

/* الصورة داخل البطاقة: تكبير بسيط ناعم عند الـ hover */
ul.products li.product img,
.products .product img,
.product-grid-item img {
	transition: transform .35s ease;
}
ul.products li.product:hover img,
.products .product:hover img,
.product-grid-item:hover img {
	transform: scale(1.06); /* تكبير بسيط للصورة */
}

/* ---- الأسعار ---- */
/* السعر القديم (المشطوب): لون باهت */
.price del,
.price del .amount {
	color: var(--arqam-muted);
	opacity: .8;
	font-weight: 400;
}

/* السعر الجديد (بعد الخصم): بلون البراند وبارز */
.price ins,
.price ins .amount,
.price > .amount {
	color: var(--arqam-primary);
	font-weight: 700;
	text-decoration: none; /* إلغاء الخط السفلي الافتراضي للـ ins */
}

/* =========================================================================
   (2) شارة "توصيل مجاني 🚚"
   تظهر فوق صورة المنتج في صفحة الفئة (أعلى يمين البطاقة في RTL)
   ========================================================================= */
.arqam-free-ship-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;  /* يسار في LTR / يمين في RTL تلقائياً */
	z-index: 5;
	background: var(--arqam-secondary);
	color: #3a2230;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	white-space: nowrap;
}

/* =========================================================================
   (3) شارة الخصم (نسبة مئوية محسوبة تلقائياً)
   تظهر في الزاوية المقابلة لشارة التوصيل
   ========================================================================= */
.arqam-discount-badge {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;   /* يمين في LTR / يسار في RTL تلقائياً */
	z-index: 5;
	background: var(--arqam-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	min-width: 42px;
	text-align: center;
	padding: 7px 9px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(83, 34, 83, .35);
}

/* =========================================================================
   (4) شريط الثقة العلوي (Top Bar)
   ========================================================================= */
.arqam-topbar {
	background: var(--arqam-primary);
	color: #fff;
	font-size: 13.5px;
	line-height: 1.4;
}
.arqam-topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.arqam-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* جملة الكوبون نميّزها باللون الثانوي */
.arqam-topbar__coupon {
	color: var(--arqam-secondary);
	font-weight: 700;
}
/* رقم الهاتف: رابط أبيض واضح */
.arqam-topbar__phone {
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}
.arqam-topbar__phone:hover {
	color: var(--arqam-secondary) !important;
}

/* تجاوب الموبايل: نوزّع العناصر بشكل مرتّب ونخفي الكوبون عند الضيق الشديد */
@media (max-width: 600px) {
	.arqam-topbar__inner {
		justify-content: center;
		gap: 8px 14px;
		font-size: 12.5px;
		text-align: center;
	}
	.arqam-topbar__coupon {
		flex-basis: 100%;
		order: 3;
	}
}

/* =========================================================================
   (5) شريط الثقة السفلي (Trust Bar) — ٣ بلوكات قبل الفوتر
   ========================================================================= */
.arqam-trustbar {
	background: #faf7fb;          /* خلفية فاتحة بلمسة بنفسجية */
	border-top: 1px solid #eee;
	padding: 28px 16px;
}
.arqam-trustbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.arqam-trustbar__block {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #efe9f1;
	border-radius: 14px;
}
.arqam-trustbar__icon {
	font-size: 30px;
	line-height: 1;
	flex-shrink: 0;
}
.arqam-trustbar__title {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 800;
	color: var(--arqam-primary);
}
.arqam-trustbar__text {
	margin: 0;
	font-size: 13.5px;
	color: #666;
	line-height: 1.5;
}

/* تجاوب الموبايل: نحوّل البلوكات الثلاثة لعمود واحد */
@media (max-width: 768px) {
	.arqam-trustbar__inner {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* =========================================================================
   (6) البحث على الموبايل — أعرض وأوضح
   نوسّع حقل البحث الخاص بـ WooCommerce/Electro على شاشات الموبايل
   ========================================================================= */
@media (max-width: 768px) {
	.arqam-topbar + #masthead .navbar-search,
	.site-search,
	.electro-search-form,
	form.woocommerce-product-search,
	.header-search-form {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* حقل الإدخال نفسه: أكبر وأوضح وأسهل للمس */
	.site-search input[type="text"],
	.site-search input[type="search"],
	.electro-search-form input[type="text"],
	form.woocommerce-product-search input.search-field,
	.header-search-form input[type="text"] {
		width: 100% !important;
		height: 46px !important;
		font-size: 16px !important;       /* 16px يمنع تكبير الشاشة تلقائياً في iOS */
		padding-inline: 14px !important;
		border-radius: 10px !important;
	}

	/* زر البحث: أوضح بلون البراند */
	.site-search button,
	.electro-search-form button,
	form.woocommerce-product-search button[type="submit"],
	.header-search-form button {
		background: var(--arqam-primary) !important;
		color: #fff !important;
		min-height: 46px !important;
	}
}