/* =========================================================
   Fasla Cart Drawer — السلة المنزلقة
   بتاخد ألوانها من نفس متغيرات ثيم الموقع اللي بتستخدمها إضافة
   Fasla Checkout (Blocksy / Fasla palette)، عشان الشكل يبقى موحّد
   في كل الموقع. لو مفيش متغيرات ثيم، بترجع للألوان الافتراضية اللي
   جنب كل واحدة (نفس ألوان دار فصلة الأساسية).
   ========================================================= */

/* منع قائمة السلة المصغّرة الافتراضية بتاعة ثيم Blocksy (اللي بتفتح
   أوتوماتيك بمجرد ما الماوس يقف على أيقونة السلة في الهيدر) من الظهور
   خالص وفي أي صفحة كانت، عشان يفضل الدرج الجانبي بتاعنا هو الوحيد
   اللي بيظهر. .ct-cart-content هو كلاس الثيم الفعلي لقائمة السلة دي
   (اتأكدنا منه من أدوات المطوّر في المتصفح)، وسايبين
   .widget_shopping_cart_content كمان لأي حالة بتستخدم كلاس ووكومرس
   القياسي. */
.ct-cart-content,
.ct-cart-content *,
.widget_shopping_cart_content,
.widget_shopping_cart_content * {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.ct-cart-content,
.widget_shopping_cart_content {
	height: 0 !important;
	overflow: hidden !important;
}

.fasla-cart-drawer {
	--fasla-cd-c1: var( --theme-palette-color-1, #27447a );
	--fasla-cd-c2: var( --theme-palette-color-2, #5b7ca8 );
	--fasla-cd-c3: var( --theme-palette-color-3, #1e365a );
	--fasla-cd-c5: var( --theme-palette-color-5, #b0c0d2 );
	--fasla-cd-c6: var( --theme-palette-color-6, #f4f7fa );
	--fasla-cd-c8: var( --theme-palette-color-8, #ffffff );
	--fasla-cd-money: #178a3c;
	--fasla-cd-radius: var( --theme-form-field-border-radius, 6px );
	--fasla-cd-font: 'Zain', 'Katibeh', 'Lalezar', Tahoma, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 999999;
	visibility: hidden;
	pointer-events: none;
}

.fasla-cart-drawer--open {
	visibility: visible;
	pointer-events: auto;
}

.fasla-cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 12, 22, 31, .55 );
	opacity: 0;
	transition: opacity .25s ease;
}
.fasla-cart-drawer--open .fasla-cart-drawer__overlay {
	opacity: 1;
}

/* الصندوق بيطلع من الشمال زي التصميم المطلوب. لو حابين يطلع من اليمين
   بدل كده، غيروا left لـ right، و translateX(-100%) لـ translateX(100%)
   في القاعدتين تحت. */
.fasla-cart-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min( 400px, 92vw );
	background: var( --fasla-cd-c8 );
	box-shadow: 8px 0 30px rgba( 0, 0, 0, .18 );
	transform: translateX( -100% );
	transition: transform .3s ease;
	direction: rtl;
	font-family: var( --fasla-cd-font );
}
.fasla-cart-drawer--open .fasla-cart-drawer__panel {
	transform: translateX( 0 );
}

.fasla-cart-drawer-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* ===== الهيدر ===== */
.fasla-cart-drawer__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var( --fasla-cd-c1 );
	color: #fff;
	padding: 16px 20px;
}
.fasla-cart-drawer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #fff !important;
}
.fasla-cart-drawer__title svg {
	width: 20px;
	height: 20px;
}
.fasla-cart-drawer__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: var( --fasla-cd-c1 );
	font-size: 13px;
	font-weight: 700;
}
.fasla-cart-drawer__close {
	background: none;
	border: none;
	color: #fff !important;
	cursor: pointer;
	padding: 4px;
	line-height: 0;
	opacity: .9;
}
.fasla-cart-drawer__close:hover {
	opacity: 1;
}
.fasla-cart-drawer__close svg {
	width: 20px;
	height: 20px;
}

/* ===== شريط الشحن المجاني ===== */
.fasla-cart-drawer__shipping-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 20px 0;
	padding: 12px 14px;
	background: var( --fasla-cd-c6 );
	border-radius: var( --fasla-cd-radius );
}
.fasla-cart-drawer__shipping-bar--done {
	background: #e6f7ea;
}
.fasla-cart-drawer__shipping-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var( --fasla-cd-money );
}
.fasla-cart-drawer__shipping-icon svg {
	width: 100%;
	height: 100%;
}
.fasla-cart-drawer__shipping-text {
	flex: 1 1 auto;
	min-width: 0;
}
.fasla-cart-drawer__shipping-text p {
	margin: 0 0 6px;
	font-size: 13px;
	color: var( --fasla-cd-c3 );
}
.fasla-cart-drawer__progress {
	height: 6px;
	background: #dfe8ef;
	border-radius: 4px;
	overflow: hidden;
}
.fasla-cart-drawer__progress-fill {
	height: 100%;
	background: var( --fasla-cd-money );
	border-radius: 4px;
	transition: width .3s ease;
}

/* ===== المنتجات ===== */
.fasla-cart-drawer__items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px 20px;
}
.fasla-cart-drawer__item {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid var( --fasla-cd-c6 );
}
.fasla-cart-drawer__item:last-child {
	border-bottom: none;
}
.fasla-cart-drawer__item-thumb {
	flex: 0 0 auto;
	display: block;
}
.fasla-cart-drawer__item-thumb img {
	width: 56px;
	height: 76px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var( --fasla-cd-c5 );
}
.fasla-cart-drawer__item-info {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline-end: 22px;
}
.fasla-cart-drawer__item-name {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var( --fasla-cd-c3 );
	text-decoration: none;
}
.fasla-cart-drawer__item-qty {
	margin-bottom: 4px;
	font-size: 12px;
	color: var( --fasla-cd-c2 );
}
.fasla-cart-drawer__item-price {
	font-size: 13px;
	font-weight: 700;
	color: var( --fasla-cd-money );
}
.fasla-cart-drawer__item-price del {
	margin-inline-end: 6px;
	font-weight: 400;
	color: var( --fasla-cd-c5 );
}
.fasla-cart-drawer__item-price ins {
	text-decoration: none;
}
.fasla-cart-drawer__item-remove {
	position: absolute;
	top: 14px;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	line-height: 1;
	font-size: 18px;
	color: var( --fasla-cd-c5 );
	text-decoration: none;
}
.fasla-cart-drawer__item-remove:hover {
	color: #b3261e;
}

/* ===== ملاحظة الشحن + الإجمالي ===== */
.fasla-cart-drawer__note {
	flex: 0 0 auto;
	margin: 8px 20px 0;
	font-size: 12px;
	text-align: center;
	color: var( --fasla-cd-c2 );
}
.fasla-cart-drawer__totals {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding: 14px 20px;
	border-top: 1px solid var( --fasla-cd-c6 );
	font-size: 16px;
	font-weight: 700;
	color: var( --fasla-cd-c3 );
}
.fasla-cart-drawer__total-amount {
	color: var( --fasla-cd-money );
}

/* ===== الأزرار ===== */
.fasla-cart-drawer__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 20px 20px;
}
.fasla-cart-drawer__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: var( --fasla-cd-radius );
	font-family: var( --fasla-cd-font );
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.fasla-cart-drawer__btn svg {
	width: 17px;
	height: 17px;
}
.fasla-cart-drawer__btn--ghost {
	background: var( --fasla-cd-c6 );
	color: var( --fasla-cd-c3 );
}
.fasla-cart-drawer__btn--ghost:hover {
	background: var( --fasla-cd-c5 );
}
.fasla-cart-drawer__btn--primary {
	background: var( --fasla-cd-c2 );
	color: #fff;
}
.fasla-cart-drawer__btn--primary:hover {
	background: var( --fasla-cd-c1 );
	color: #fff;
}
.fasla-cart-drawer__btn--outline {
	background: transparent;
	color: var( --fasla-cd-c1 );
	border-color: var( --fasla-cd-c1 );
}
.fasla-cart-drawer__btn--outline:hover {
	background: var( --fasla-cd-c1 );
	color: #fff;
}

/* ===== السلة الفاضية ===== */
.fasla-cart-drawer__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
	color: var( --fasla-cd-c3 );
}
.fasla-cart-drawer__empty .fasla-cart-drawer__btn {
	margin-top: 16px;
	padding: 0 24px;
}

/* منع سكرول الصفحة اللي ورا السلة وهي مفتوحة */
body.fasla-cart-drawer-open {
	overflow: hidden;
}

/* حالة تحميل بسيطة على فورم صفحة المنتج وقت إرسال طلب الإضافة بالأجاكس */
form.fasla-cart-drawer--loading {
	opacity: .6;
	pointer-events: none;
}

@media ( max-width: 480px ) {
	.fasla-cart-drawer__panel {
		width: 100vw;
	}
}