PageSourceSearch

https://b-stores.com/lastPieceProducts

html b-stores.com collected 2026-09-29 16:04:42 UTC 198,258 bytes, 6,440 lines download raw bytes

1
2
3
4
5
6
7
8
9
10<!DOCTYPE html>
11<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar"
12	lang="ar"
13	dir="rtl">
14
15<head>
16
17
18	
19
20
21
22
23
24<!-- Snap Pixel Code -->
25    
25<script type="text/javascript">
26      (function (e, t, n) {
27        if (e.snaptr) return;
28        var a = (e.snaptr = function () {
29          a.handleRequest ? a.handleRequest.apply(a, arguments) : a.queue.push(arguments);
30        });
31        a.queue = [];
32        var s = 'script';
33        r = t.createElement(s);
34        r.async = !0;
35        r.src = n;
36        var u = t.getElementsByTagName(s)[0];
37        u.parentNode.insertBefore(r, u);
38      })(window, document, 'https://sc-static.net/scevent.min.js');
39
40      snaptr('init', '18de90b9-9f1a-4fe7-9fbd-4cf57147ed07', {});
41
42      snaptr('track', 'PAGE_VIEW');
43    </script>
43
44    <!-- End Snap Pixel Code -->
45
46
47
48
49
50
51
52
53
54	<meta charset="utf-8" />
55	<title> B-STORE </title>
56	<meta name="description"
57		content=" Default description for B-STORE website " />
58	<meta name="keywords" content="" />
59
60
61
62	<meta name="author" content="Al7osam" />
63	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
64
65	<!-- Twitter Meta Tags -->
66	<meta name="twitter:card" content="summary_large_image">
67	<meta name="twitter:title"
68		content=" B-STORE ">
69	<meta name="twitter:description"
70		content="Default description for B-STORE website">
71	<!-- Add twitter:image if you have a featured image -->
72
73	<!-- Canonical URL (helps prevent duplicate content issues) -->
74	
75	
76	
77	
78	<link rel="canonical" href="https://b-stores.com/lastPieceProducts" />
79	
80
81
82	<!-- Open Graph / Facebook Meta Tags (for social sharing) -->
83	<meta property="og:title"
84		content=" B-STORE " />
85	<meta property="og:description"
86		content="Default description for B-STORE website" />
87	
88	
89	
90	
91	<meta property="og:type" content="website" />
92	
93	
94	
95	
96		
97	
98	<meta property="og:image" content="lak/tenants/791b3825-acde-bee6-c1b7-3a22e322b7f0/storeScreenshots/ad19e68c-94bd-41ee-8557-03acc5a61a07.webp" />
99	<meta name="twitter:image" content="lak/tenants/791b3825-acde-bee6-c1b7-3a22e322b7f0/storeScreenshots/ad19e68c-94bd-41ee-8557-03acc5a61a07.webp" />
100	
101	
102	
103	
104	
105	<meta property="og:url" content="https://b-stores.com/lastPieceProducts" />
106	
107	<!-- Add og:image if you have a featured image -->
108	<link rel="stylesheet"
109		href="https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css">
110	<link rel="stylesheet" href="/Views/Themes/furniture/V1/Assets/fonts/font-icons.css" />
111	<link rel="stylesheet" href="/Views/Themes/furniture/V1/Assets/css/bootstrap.min.css" />
112	<link rel="stylesheet" href="/Views/Themes/furniture/V1/Assets/css/swiper-bundle.min.css" />
113	<link rel="stylesheet" href="/Views/Themes/furniture/V1/Assets/css/animate.css" media="print" onload="this.media='all'" />
114	<link rel="preload" href="/Views/Themes/furniture/V1/Assets/css/styles.css" as="style" />
115	<link rel="stylesheet" type="text/css" href="/Views/Themes/furniture/V1/Assets/css/styles.css" />
116	<link rel="stylesheet" type="text/css" href="/Views/Themes/furniture/V1/Assets/css/style-rtl.css" />
117
118
119
120	
121	
122	<!-- Favicon and Touch Icons - absolute URL from current domain -->
123	<link rel="shortcut icon" href="https://b-stores.com/favicon.ico" type="image/x-icon" />
124	<link rel="icon" href="https://b-stores.com/favicon.ico" type="image/x-icon" />
125	<link rel="apple-touch-icon" href="https://b-stores.com/favicon.ico" />
126	
127
128
129
130	
131	
131<script src="/__bundles/LeptonXLite.Global.B846B3168EDD81627CD98A42A8109A0A.js" defer></script>
131
132	
133	
133<script src="/libs/jquery-validation/localization/messages_ar.js" defer></script>
133
134	
135	
135<script src="/libs/select2/js/i18n/ar.js" defer></script>
135
136	
137	
137<script src="/libs/timeago/locales/jquery.timeago.ar.js" defer></script>
137
138	
139	
139<script src="/libs/bootstrap-datepicker/locales/bootstrap-datepicker.ar.min.js" defer></script>
139
140	
141	
141<script src="/libs/moment/locale/ar.js" defer></script>
141
142	
143	
143<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
143
144
145
146
147	
147<script>
148
149		window.cultureInfo = {
150			currentLang: "ar",
151		};
152
153	</script>
153
154
155	
156
157
158
159
160
161
162
163<script src="https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/browser/signalr.min.js" defer></script>
163
164
165<script src="https://cdn.jsdelivr.net/npm/disable-devtool" defer></script>
165
166
167
168
169<!-- // Live Environment For Saudi Arabia -->
170<script src="https://sa.myfatoorah.com/payment/v1/session.js" defer></script>
170
171
172
173
174
175
176
177<script src="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.js" type="module"></script>
177
178
179
180<!-- ===== AI-CHANGE START [LIQUID][AI-DONE][LIQUID-20260203-01] =====
181reason: load MISpay widget SDK once in shared head based on tenant MISpay settings
182scope: add conditional script tag that references sandbox MISpay widget SDK using store.MisPayAccessKey when MISpay and widget are enabled
183risk: low
184===== AI-CHANGE END ===== -->
185
186
187
188
189
190
191
192
193
194
195
196	<style>
197	.myfatoorah-payment-section {
198	border-radius: 12px;
199	padding: 20px;
200	margin-top: 20px;
201	}
202
203	.payment-methods-accordion .card {
204	border: unset;
205	background-color: #fbfbfc;
206	border-radius: 10px;
207	}
208
209	#cardPaymentHeader .btn {
210	text-decoration: none;
211	}
212
213	#cardPaymentHeader {
214	background: #f7f7f7;
215	border: none;
216	}
217
218	#applePayHeader .btn,
219	#stcPayHeader .btn {
220	text-decoration: unset;
221	color: black;
222	font-size: 18px;
223	font-weight: 600;
224	}
225
226	#applePayHeade,
227	.card-header {
228	border: unset !important;
229	}
230
231	#stcPayHeader {
232	border: unset !important;
233	}
234
235	.variant-picker-item.variant-size .variant-picker-values input:checked+label.style-text:not(.color-btn) {
236	background-color: var(--text);
237	}
238
239	.variant-picker-item.variant-size .variant-picker-values input:checked+label.style-text:not(.color-btn) p {
240	color: var(--white);
241	}
242
243	.statistics-icon {
244	max-width: 100px;
245	margin: auto;
246	background-color: aliceblue;
247	padding: 20px;
248	border-radius: 20px;
249	}
250
251	.justify-center {
252	justify-content: center;
253	align-items: center;
254	gap: 10px;
255	}
256
257	.accordion-button::after {
258	margin-left: unset;
259	margin-right: auto;
260	}
261
262	.accordion-button {
263	background-color: unset !important
264	}
265
266	.accordion-item {
267	border: unset;
268	border-bottom: 1px solid black;
269
270	}
271
272	.selected-address-summary {
273	padding: 15px !important;
274	border-radius: 10px !important;
275	}
276
277	.accordion-button span {
278	line-height: 1;
279	font-weight: 600;
280	font-size: 20px;
281	}
282
283	.accordion-item {
284	border-radius: 0 !important;
285	border-bottom: 1px solid #e1e1e1;
286	margin-bottom: 15px !important
287	}
288
289
290	.accordion-button:focus {
291	border-color: unset;
292	outline: 0;
293	box-shadow: unset;
294	}
295
296	.tab-reviews .rating-score .number-2 {
297	width: 45px !important;
298	}
299
300	.div-aligned-footer{
301	flex-direction: column;
302	align-items: center;
303	display: flex;
304	gap:5px;
305	justify-content: center;
306	}
307
308	.gap-20px{
309	gap:20px !important;
310
311	}
312
313	.div-aligned-footer span{
314	font-size: 13px!important;
315	text-align: center;
316	color: var(--text);
317	}
318
319	.mt-20px{
320	margin-top:20px !important;
321
322	}
323
324	.btn-close{
325	margin-right: auto!important;
326	margin-left: unset!important;
327	}
328
329
330	.wrap-slider .box-content{
331	top: 85%;
332	}
333
334	.wrap-slider .box-content .fade-item a.tf-btn {
335	margin-top: 0;
336	}
337
338</style>
339
340
341
342<style>
343	.btn-underline{
344	text-decoration: underline;
345	color: var(--footer-bg) !important;
346
347	}
348	.bg-soft-primary {
349	background-color: rgb(251 251 252) !important;
350	}
351
352	.bg-soft-success {
353	background-color: rgba(40, 167, 69, 0.1) !important;
354	}
355
356	/* Address Card Styles */
357	.address-card {
358	transition: all 0.3s ease;
359	}
360
361	.address-card-inner {
362	transition: all 0.3s ease;
363	position: relative;
364	overflow: hidden;
365	}
366
367	.address-card-inner:hover {
368	transform: translateY(-2px);
369	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
370	}
371
372	.address-card-selected .address-card-inner {
373	border-color: var(--bs-primary, #007bff) !important;
374	box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important;
375	background: linear-gradient(135deg, rgb(231 231 231) 0%, rgba(255, 255, 255, 1) 100%);
376	;
377	}
378
379	.address-card-selected .address-card-inner:hover {
380	box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3) !important;
381	}
382
383	.address-actions {
384	transition: opacity 0.3s ease;
385	}
386
387	.address-card:hover .address-actions {
388	opacity: 1;
389	}
390
391	.contact-info {
392	display: flex;
393	flex-direction: column;
394	gap: 4px;
395	}
396
397	.address-details {
398	background: #f8f9fa;
399	padding: 12px;
400	border-radius: 6px;
401	border-left: 3px solid var(--secondary);
402	}
403
404	.selected-address-summary {
405	animation: slideIn 0.3s ease;
406	}
407
408	@keyframes slideIn {
409	from {
410	opacity: 0;
411	transform: translateY(-10px);
412	}
413
414	to {
415	opacity: 1;
416	transform: translateY(0);
417	}
418	}
419
420	/* Radio button styling */
421	.radio-wrapper input[type="radio"] {
422	cursor: pointer;
423	}
424
425
426	/* Button hover effects */
427	.address-actions .btn {
428	transition: all 0.2s ease;
429	}
430
431	.address-actions .btn:hover {
432	transform: translateY(-1px);
433	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
434	}
435
436	.address-actions .btn-outline-danger:hover {
437	background-color: var(--bs-danger);
438	color: white;
439	}
440
441	.address-actions .btn-outline-primary:hover {
442	background-color: var(--bs-primary);
443	color: white;
444	}
445
446	.address-actions .btn-outline-secondary:hover {
447	background-color: var(--secondary) !important;
448	border: unset !important;
449	color: white;
450	}
451
452	/* Responsive adjustments */
453	@media (max-width: 768px) {
454	.address-card-inner {
455	padding: 15px !important;
456	}
457
458	.address-actions {
459	flex-direction: column;
460	}
461
462	.address-actions .btn {
463	width: 100%;
464	}
465	}
466
467
468	.address-card .address-card-inner {
469	box-shadow: 0 0 20px #00000021 !important;
470	background-color: #fbfbfc !important;
471	border: 1px solid #d5d5d5 !important;
472	padding: 20px !important;
473	}
474
475	.main-location {
476	top: 15px;
477	left: 15px;
478	padding: 6px 12px;
479	font-size: 11px;
480	font-weight: 600;
481	border-radius: 20px;
482	}
483
484	.radio-address-btn {
485	width: 20px;
486	height: 20px;
487	cursor: pointer;
488	accent-color: #000000 !important;
489
490	}
491
492	.close-address-modal {
493	margin-right: auto !important;
494	margin-left: unset !important;
495	}
496
497	.btn {
498	border-radius: 50px !important;
499	}
500
501	.box-location-address {
502	padding: 15px !important;
503	margin-top: 15px !important;
504	}
505
506	.btn-loc {
507	background-color: var(--secondary) !important;
508	border: unset !important;
509	color: var(--white) !important;
510	gap: 10px !important;
511	}
512
513	.location-details {
514	padding: 15px !important;
515	}
516
517	.model-address label {
518	font-weight: 600 !important;
519	font-size: 16px !important;
520	color: var(--text) !important;
521	}
522
523	.form-check .form-check-input {
524	margin-left: unset !important;
525	margin-right: 0em !important;
526	}
527
528
529	.selected-address-summary {
530	background-color: rgba(var(--secondary), 0.5) !important;
531	border: 1px solid var(--secondary) !important;
532
533	}
534
535
536	.delivery-rate {
537	font-size: 16px !important;
538	}
539
540	.selected-courier {
541	border: 2px solid var(--secondary) !important;
542	background: linear-gradient(135deg, rgb(231 231 231) 0%, rgba(255, 255, 255, 1) 100%);
543	}
544
545	.courier-logo-img {
546	width: 120px;
547	height: 50px;
548	position: relative;
549	border-radius: 50px;
550	overflow: hidden;
551	}
552
553	.courier-logo-img img {
554	width: 100%;
555	height: 100%;
556	object-fit: cover;
557	}
558	.attach-div {
559	align-items: start!important;
560	border-bottom: 1px solid #e1e1e1!important;
561	}
562
563	.attach-div .content{
564	width: 100%!important;
565	}
566	.attachment-item{
567	margin-bottom: 15px!important;
568	justify-content: space-between!important;
569	}
570
571	.text-darkk{
572	color: var(--text)!important;
573	}
574	body .widget-tabs .widget-content-tab .text-darkk .fs-25{
575	font-size: 25px!important;
576	}
577
578	/* Add this to your stylesheet */
579	.veri01, .veri02, .veri03 {
580	flex: 1 1 0; /* Equal width for all items */
581	min-width: 120px; /* Minimum width for each item */
582	}
583
584	.icon-container {
585	height: 40px; /* Fixed height for icons */
586	display: flex;
587	align-items: center;
588	justify-content: center;
589	}
590
591	.div-aligned-footer {
592	padding: 15px 10px;
593	border-radius: 8px;
594	transition: all 0.3s ease;
595	}
596
597	.decor-slider {
598	position: relative;
599	}
600
601	.container.wrap-navigation {
602	display: flex;
603	width: 100%;
604	flex-direction: row-reverse;
605	position: absolute;
606	top: 50%;
607	left: 0;
608	z-index: 999;
609	justify-content: space-between;
610	align-items: center;
611	}
612	.snap-icon svg {
613	fill:var(--footer-text);
614	}
615	.snap-icon a:hover{
616	background:#f7f200;
617	border:1px solid #f7f200 !important;
618	}
619
620	.snap-icon a:hover {
621	background: #f7f200!important;
622	}
623
624	.Paymentscreen{
625	min-height: 100vh;
626	display: flex;
627	justify-content: center;
628	align-items: center;
629
630	}
631
632	.confii{
633	background:url('/Images/confii.png') no-repeat center center fixed;
634	background-size: cover;)
635	}
636
637	.img-payment-result svg{
638	width: 138px;
639	height: auto;
640	margin-bottom: 20px;
641	}
642
643	.login-tabs-main{
644
645	display: inline-block;
646
647	}
648
649	.login-tabs{
650	background-color: #f5f5f5;
651	padding: 12px 20px;
652	border-radius: 50px;
653	font-weight: 600;
654	display: flex;
655	align-items: center;
656	justify-content: center;
657	}
658
659	.login-tab-btn.active{
660	background-color:var(--footer-bg);
661	padding:9px 20px 5px;
662	border-radius: 50px;
663	color: white;
664
665	}
666
667	#loginForm{
668	text-align: center;
669
670	}
671
672	#loginForm .tf-field{
673	text-align: right;
674	}
675
676	#bankTransferFile{
677	width: 100%;
678	border-radius: 0;
679	height: 100%;
680	}
681
682	.card-product .card-product-wrapper .on-sale-wrap.promo-item {
683	bottom: 0 !important;
684	top: unset;
685	}
686
687	/* ===== AI-CHANGE START [UI][AI-DONE][FEATURE-20260917-33] ===== */
688	.card-product .card-product-wrapper .on-sale-wrap.offer-list-badges {
689		display: flex;
690		flex-direction: column;
691		align-items: flex-end;
692		gap: 4px;
693	}
694
695	.card-product .card-product-wrapper .on-sale-wrap.offer-list-badges .on-sale-item,
696	.rtl .card-product .card-product-wrapper .on-sale-wrap.offer-list-badges .on-sale-item {
697		display: inline-flex;
698		align-items: center;
699		justify-content: center;
700		gap: 4px;
701		width: auto;
702		max-width: 100%;
703		min-width: 0;
704		padding: 4px 10px;
705		line-height: 1;
706		white-space: nowrap;
707		word-break: normal;
708		direction: rtl;
709		overflow: visible;
710	}
711
712	.card-product .card-product-wrapper .on-sale-wrap.offer-list-badges .on-sale-item .icon-saudi_riyal {
713		font-size: 18px !important;
714		width: 1em;
715		height: 1em;
716		line-height: 1;
717		display: inline-block;
718		flex: 0 0 auto;
719	}
720
721	.tf-product-info-price .badges-on-sale {
722		display: inline-flex;
723		align-items: center;
724		gap: 4px;
725		direction: rtl;
726		white-space: nowrap;
727	}
728
729	.tf-product-info-price .badges-on-sale .icon-saudi_riyal {
730		font-size: 18px !important;
731		width: 1em;
732		height: 1em;
733		line-height: 1;
734		display: inline-block;
735		flex: 0 0 auto;
736	}
737	/* ===== AI-CHANGE END ===== */
738
739	/* ===== AI-CHANGE START [UI][AI-DONE][FEATURE-20260917-36] ===== */
740	.tf-page-cart-checkout .tf-cart-totals-discounts .total-value,
741	.tf-mini-cart-bottom-wrap .tf-cart-totals-discounts .price,
742	.cart-money,
743	.cart-price {
744		display: inline-flex !important;
745		flex-direction: row !important;
746		flex-wrap: nowrap !important;
747		align-items: center !important;
748		gap: 4px;
749		white-space: nowrap !important;
750		min-width: max-content;
751	}
752
753	.tf-page-cart-checkout .tf-cart-totals-discounts .total-value .icon-saudi_riyal,
754	.tf-mini-cart-bottom-wrap .tf-cart-totals-discounts .price .icon-saudi_riyal,
755	.cart-money .icon-saudi_riyal,
756	.cart-price .icon-saudi_riyal {
757		font-size: 18px !important;
758		width: 18px !important;
759		height: 18px !important;
760		line-height: 1 !important;
761		display: inline-block !important;
762		flex: 0 0 18px !important;
763		order: unset !important;
764	}
765
766	.tf-mini-cart-bottom-wrap .tf-cart-totals-discounts .price .totalCartPrice {
767		display: inline !important;
768	}
769	/* ===== AI-CHANGE END ===== */
770
771	.card-product .card-product-wrapper .on-sale-wrap.promo-item .on-sale-item {
772	background-color: var(--primary);
773	color: var(--white);
774	font-size: 12px !important;
775	}
776	
777	
778	
779	
780    .tf-social-icon .social-youtube:hover {
781        background: var(--youtube-cl) !important;
782        color: var(--white);
783    }
784
785        .tf-social-icon .social-line.social-facebook:hover {
786            background: transparent;
787            color: white !important;
788            border-color: var(--facebook-cl);
789        }
790
791        .tf-social-icon .social-line.social-twiter:hover {
792            background: transparent;
793            color: white;
794            border-color: var(--twitter-cl);
795        }
796
797        .tf-social-icon .social-line.social-instagram:hover {
798            background: transparent;
799            color: var(--threads-cl);
800            border-color: var(--threads-cl);
801        }
802
803        .tf-social-icon .social-line.social-tiktok:hover {
804            background: transparent;
805            color: var(--tiktok-cl2);
806            border-color: var(--tiktok-cl2);
807        }
808
809        .tf-social-icon .social-line.social-pinterest:hover {
810            background: transparent;
811            color: var(--pinterest-cl);
812            border-color: var(--pinterest-cl);
813        }
814
815        .tf-social-icon .social-line.social-youtube:hover {
816            background: transparent;
817            color: white !important;
818            border-color: var(--youtube-cl);
819        }
820
821    .tf-social-icon.style-default li {
822        display: inline-flex;
823    }
824
825        .tf-social-icon.style-default li a {
826            border: 0 !important;
827        }
828
829            .tf-social-icon.style-default li a:hover {
830                background: unset !important;
831            }
832
833        .tf-social-icon.style-default li .social-facebook:hover {
834            color: var(--facebook-cl);
835        }
836
837        .tf-social-icon.style-default li .social-twiter:hover {
838            color: var(--twitter-cl);
839        }
840
841        .tf-social-icon.style-default li .social-instagram:hover {
842            color: var(--threads-cl);
843        }
844
845        .tf-social-icon.style-default li .social-tiktok:hover {
846            color: var(--tiktok-cl2);
847        }
848
849        .tf-social-icon.style-default li .social-pinterest:hover {
850            color: var(--pinterest-cl);
851        }
852
853        .tf-social-icon.style-default li .social-youtube:hover {
854            color: var(--youtube-cl);
855        }
856
857	/* ===== AI-CHANGE START [UI][AI-DONE][NOTIF-20260909-05] ===== */
858	.notify-outline {
859		display: block;
860		width: 18px;
861		height: 18px;
862		background-color: currentColor;
863		/* ===== AI-CHANGE START [UI][AI-DONE][NOTIF-20260909-07] ===== */
864		/* reason: bell stroke was thinner than bag/heart/account/search icomoon glyphs */
865		/* scope: raise SVG mask stroke-width from 1.7 to 2.4 */
866		/* risk: low */
867		/* ===== AI-CHANGE END ===== */
868		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'%3E%3C/path%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
869		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'%3E%3C/path%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
870	}
871	.tf-toolbar-bottom .toolbar-item a .toolbar-icon .notify-outline {
872		color: var(--text);
873	}
874	/* ===== AI-CHANGE START [UI][AI-DONE][NOTIF-20260909-12] ===== */
875	.notification-item.notification-unread {
876		cursor: pointer;
877	}
878	/* ===== AI-CHANGE END ===== */
879	/* ===== AI-CHANGE END ===== */
880
881	/* ===== AI-CHANGE START [UI][AI-DONE][UI-20260922-01] =====
882	reason: address map needs a search field and a visible location-access hint
883	scope: checkout address map search and hint overlay
884	risk: low
885	===== AI-CHANGE END ===== */
886	.address-map-tools {
887		display: flex;
888		flex-direction: column;
889		gap: 10px;
890	}
891
892	.address-map-search {
893		display: flex;
894		align-items: stretch;
895		gap: 8px;
896	}
897
898	.address-map-search .form-control {
899		flex: 1 1 auto;
900		min-width: 0;
901		min-height: 44px;
902	}
903
904	.address-map-search-btn {
905		flex: 0 0 auto;
906		min-height: 44px;
907		padding-inline: 16px;
908		border: 0;
909		border-radius: 50px;
910		background: var(--secondary);
911		color: var(--white);
912		font-weight: 600;
913	}
914
915	.address-map-search-error {
916		margin: 0;
917		font-size: 13px;
918	}
919
920	.address-map-frame {
921		position: relative;
922		height: 300px;
923		border-radius: 8px;
924		border: 1px solid var(--line);
925		overflow: hidden;
926	}
927
928	#address-modal-map {
929		height: 100%;
930		width: 100%;
931	}
932
933	.map-location-hint-backdrop {
934		position: absolute;
935		inset: 0;
936		z-index: 3;
937		display: flex;
938		align-items: center;
939		justify-content: center;
940		padding: 12px;
941		background: rgba(0, 0, 0, 0.28);
942	}
943
944	.map-location-hint {
945		width: min(100%, 340px);
946		max-height: 100%;
947		overflow: auto;
948		display: flex;
949		flex-direction: column;
950		gap: 8px;
951		padding: 14px;
952		border-radius: 12px;
953		background: var(--white);
954		text-align: center;
955		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
956	}
957
958	.map-location-hint-title {
959		margin: 0;
960		font-size: 16px;
961		font-weight: 700;
962		color: var(--text);
963	}
964
965	.map-location-hint-text {
966		margin: 0;
967		font-size: 14px;
968		line-height: 1.5;
969		color: var(--text);
970	}
971
972	.map-location-hint-actions {
973		display: flex;
974		flex-wrap: wrap;
975		justify-content: center;
976		gap: 8px;
977		margin-top: 4px;
978	}
979
980	.map-location-hint-actions .tf-btn,
981	.map-location-hint-actions .btn {
982		min-height: 40px;
983		padding-inline: 18px;
984	}
985
986	.pac-container {
987		z-index: 2000 !important;
988	}
989
990	@media (max-width: 430px) {
991		.map-location-hint-actions {
992			flex-direction: column;
993		}
994
995		.map-location-hint-actions .tf-btn,
996		.map-location-hint-actions .btn {
997			width: 100%;
998		}
999	}
1000</style>
1001
1002
1003
1004
1005<style>
1006	:root { --primary: #463562; --secondary: #463562; --secondary-lignt-bg: #46356233; --text: #463562; }
1007</style>
1008
1009
1010
1011
1012
1013<style>
1014	/* =========================
1015   EDUCATIONAL GAMES ACADEMY STORE THEME
1016   Primary:   #5D408C
1017   Secondary: #463562
1018   Accent:    #EDDBF9
1019========================= */
1020body {
1021  font-family: var(--fontar), sans-serif !important;
1022  font-size: 16px !important;
1023  line-height: 22px;
1024  font-weight: 400;
1025  color: var(--text-2);
1026  background-color: #f6f2fb;
1027}
1028
1029.flat-title .title {
1030  position: relative;
1031  display: none;
1032  z-index: 1;
1033}
1034.dropdown.bootstrap-select.image-select.style-default {
1035  width: unset;
1036  display: none;
1037}
1038.header {
1039    position: sticky;
1040    position: -webkit-sticky;
1041    top: 0;
1042    left: 0;
1043    right: 0;
1044    -webkit-transition: 0.15s ease-out;
1045    -o-transition: 0.15s ease-out;
1046    transition: 0.15s ease-out;
1047    background-color: var(--white);
1048}
1049/* ===== Page Title ===== */
1050
1051.tf-page-title .heading {
1052  font-size: 42px;
1053  font-weight: 500;
1054  line-height: 50px;
1055  color: #5D408C;
1056}
1057
1058/* ===== Buttons ===== */
1059
1060.btn-fill span {
1061  color: var(--white) !important;
1062}
1063
1064/* =========================
1065   FOOTER
1066========================= */
1067
1068.footer .footer-wrap .footer-body {
1069  padding: 25px 0 40px 0;
1070  position: relative;
1071  text-align: center;
1072
1073  border-radius: 30px 30px 12px 12px;
1074
1075  background: linear-gradient(#EDDBF9, rgba(93, 64, 140, 0.85));
1076
1077  box-shadow: 0 2px 10px rgba(93, 64, 140, 0.35);
1078}
1079
1080/* ===== Floating Phone Button ===== */
1081
1082.phone-button {
1083  position: fixed;
1084  bottom: 100px;
1085  right: 20px;
1086  background-color: #5D408C;
1087  width: 60px;
1088  height: 60px;
1089  border-radius: 50%;
1090  box-shadow: 0 4px 10px rgba(93, 64, 140, 0.4);
1091  display: flex;
1092  justify-content: center;
1093  align-items: center;
1094  cursor: pointer;
1095  z-index: 1000;
1096  transition: all 0.3s ease;
1097  text-decoration: none;
1098}
1099
1100.phone-button:hover {
1101  background-color: #463562;
1102  transform: translateY(-4px);
1103}
1104
1105/* ===== Product List Icon ===== */
1106
1107.list-product-btn .box-icon {
1108  width: 32px;
1109  height: 32px;
1110  min-width: 32px;
1111  border-radius: 3px;
1112  box-shadow: 0 8px 24px rgba(93, 64, 140, 0.18);
1113  background-color: #EDDBF9;
1114  position: relative;
1115  color: #5D408C;
1116}
1117
1118/* =========================
1119   ANIMATIONS
1120========================= */
1121
1122@keyframes gradientMove {
1123  0% { background-position: 0% 50%; }
1124  50% { background-position: 100% 50%; }
1125  100% { background-position: 0% 50%; }
1126}
1127
1128/* ===== Paragraph ===== */
1129
1130p {
1131  color: #5D408C;
1132  font-weight: 400;
1133  line-height: 30px;
1134  font-size: 17px;
1135  word-wrap: break-word;
1136}
1137
1138/* ===== Footer Background ===== */
1139
1140.footer.background-black {
1141  background: none !important;
1142  text-align: center;
1143}
1144
1145.footer {
1146  padding-top: 100px;
1147  background: none;
1148}
1149
1150/* ===== Footer Links ===== */
1151
1152.footer .footer-wrap .footer-bottom .footer-bottom-wrap .footer-menu_item {
1153  color: #ffffff !important;
1154  position: relative;
1155display: none !important;
1156}
1157
1158.footer .footer-wrap .footer-bottom .footer-bottom-wrap .footer-menu_item > :first-child {
1159  display: none;
1160}
1161
1162/* ===== Footer Credit ===== */
1163
1164.footer .footer-wrap .footer-bottom .footer-bottom-wrap::after {
1165  content: "تم التطوير بواسطة | Ad Faz";
1166  display: block;
1167  color: #5D408C;
1168  font-weight: 500;
1169  letter-spacing: .3px;
1170  text-align: center;
1171  direction: rtl;
1172  overflow: hidden;
1173  white-space: nowrap;
1174  margin-right: 90px;
1175}
1176
1177/* ===== Payment Methods ===== */
1178
1179.tf-payment {
1180  display: flex;
1181  gap: 10px;
1182  align-items: center;
1183  justify-content: center;
1184}
1185
1186/* ===== Footer Logo ===== */
1187
1188.footer .footer-logo {
1189  max-width: 100%;
1190  height: auto;
1191  vertical-align: middle;
1192  -ms-interpolation-mode: bicubic;
1193  animation: float-swing 5s ease-in-out infinite;
1194  transform-origin: center center;
1195}
1196
1197@keyframes float-swing {
1198  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
1199  25% { transform: translateY(-3px) rotate(2deg) scale(1.02); }
1200  50% { transform: translateY(-6px) rotate(0deg) scale(1.04); }
1201  75% { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
1202}
1203
1204.footer .footer-menu_item {
1205  line-height: 30px;
1206  color: #ffffff;
1207}
1208
1209/* =========================
1210   FAQ ACCORDION
1211========================= */
1212
1213.accordion-button {
1214  border-radius: 16px;
1215  background: linear-gradient(270deg, #5D408C, #463562, #5D408C, #2E2140) !important;
1216  background-size: 800% 800%;
1217  animation: gradientMove 10s ease infinite;
1218  border: 2px solid #5D408C;
1219  box-shadow: 0 2px 8px rgba(93, 64, 140, 0.35);
1220  transition: transform .25s, box-shadow .25s;
1221  text-align: center;
1222  padding: 20px;
1223  background-position: center center;
1224  background-repeat: no-repeat;
1225}
1226
1227.accordion-button {
1228  font-size: 1rem;
1229  color: #ffffff;
1230  text-align: left;
1231}
1232
1233.accordion-button:not(.collapsed) {
1234  color: #ffffff;
1235}
1236
1237/* ===== Statistics Icon ===== */
1238
1239.statistics-icon {
1240  max-width: 100px;
1241  margin: auto;
1242  margin-bottom: auto;
1243  padding: 20px;
1244  border-radius: 20px;
1245  background: none;
1246}
1247
1248/* =========================
1249   FEATURE CARDS
1250========================= */
1251
1252.row.gy-4 .card {
1253  width: 80%;
1254  margin: auto;
1255  border-radius: 25px;
1256  box-shadow: 0 4px 15px rgba(93, 64, 140, 0.35);
1257  cursor: pointer;
1258  overflow: hidden;
1259  border: 3px solid #5D408C;
1260  animation: glowPulse 2.5s ease-in-out infinite;
1261}
1262
1263@keyframes glowPulse {
1264  0%, 100% { box-shadow: 0 0 0 rgba(93, 64, 140, 0); }
1265  50% { box-shadow: 0 0 18px rgba(93, 64, 140, 0.65); }
1266}
1267
1268/* =========================
1269   PRODUCT CARD
1270========================= */
1271
1272.card-product {
1273  background-color: #ffffff;
1274  border-radius: 20px;
1275  margin-top: 20px;
1276  margin-bottom: 20px;
1277  border: 1px solid rgba(93, 64, 140, 0.12);
1278  padding: 10px;
1279  transition: all .45s cubic-bezier(.4,0,.2,1);
1280  box-shadow: 0 12px 30px rgba(93, 64, 140, 0.18), inset 0 0 0 1px rgba(237, 219, 249, 0.6);
1281  background-size: cover;
1282  background-position: center;
1283  background-repeat: no-repeat;
1284}
1285
1286.card-product:hover {
1287  transform: translateY(-5px);
1288  box-shadow: 0 18px 38px rgba(93, 64, 140, 0.28);
1289}
1290
1291/* =========================
1292   SECTION UNDERLINE
1293========================= */
1294
1295.flat-title .title {
1296  position: relative;
1297  display: inline-block;
1298  z-index: 1;
1299}
1300
1301.flat-title .title::after {
1302  content: "";
1303  position: absolute;
1304  bottom: -10px;
1305  left: 50%;
1306  transform: translateX(-50%);
1307  width: 70px;
1308  height: 4px;
1309  border-radius: 10px;
1310  animation: underlineBreath 2s ease-in-out infinite;
1311}
1312
1313@keyframes underlineBreath {
1314  0% { width: 70px; background: linear-gradient(270deg, #5D408C, #463562, #5D408C); }
1315  25% { width: 85px; background: linear-gradient(270deg, #5D408C, #463562, #5D408C); }
1316  50% { width: 60px; background: linear-gradient(270deg, #5D408C, #463562, #5D408C); }
1317  75% { width: 85px; background: linear-gradient(270deg, #5D408C, #463562, #5D408C); }
1318  100% { width: 70px; background: linear-gradient(270deg, #5D408C, #463562, #5D408C); }
1319}
1320
1321/* ===== Product Delivery ===== */
1322
1323.tf-product-delivery {
1324  padding: 30px 28px;
1325  text-align: center;
1326  display: none;
1327  gap: 16px;
1328  flex-direction: column;
1329  border-radius: 2.5px;
1330  border: 1px solid var(--line);
1331}
1332
1333/* ===== Wishlist ===== */
1334
1335.tf-product-btn-wishlist .icon,
1336.tf-product-btn-wishlist i {
1337  font-size: 18px;
1338  color: #5D408C;
1339}
1340
1341/* =========================
1342   COLLECTION
1343========================= */
1344
1345.collection-item-v2 .collection-content .heading {
1346  margin-bottom: 7px;
1347  font-size: 18px;
1348  line-height: 21.6px;
1349  text-align: center;
1350  display: flex;
1351  justify-content: center;
1352  align-items: center;
1353  padding: 10px;
1354}
1355
1356.tf-breadcrumb-wrap * {
1357  color: #5D408C;
1358}
1359
1360/* =========================
1361   SCROLLING TEXT
1362========================= */
1363
1364.scrolling-text {
1365  width: 100%;
1366  overflow: hidden;
1367  background: linear-gradient(90deg, #5D408C, #2E2140, #5D408C);
1368  color: #EDDBF9;
1369  font-size: 16px;
1370  white-space: nowrap;
1371  box-sizing: border-box;
1372  padding: 10px 0;
1373}
1374
1375.text-container {
1376  display: inline-block;
1377  padding-left: 100%;
1378  animation: scroll 20s linear infinite;
1379}
1380
1381.text-container span {
1382  margin-right: 50px;
1383}
1384
1385@keyframes scroll {
1386  0% { transform: translateX(0); }
1387  100% { transform: translateX(-100%); }
1388}
1389
1390/* =========================
1391   TABS
1392========================= */
1393
1394.widget-tabs.style-has-border .widget-content-tab ul li {
1395  list-style-type: disc;
1396  margin-bottom: unset;
1397  padding-inline-start: 5px;
1398  margin-inline-start: 10px;
1399  background: #ffffff;
1400}
1401
1402/* ===== Circular Collection ===== */
1403
1404.collection-item-circle .collection-image {
1405  border-radius: 0%;
1406  overflow: hidden;
1407  display: block;
1408  width: 150px;
1409  height: 150px;
1410  margin: auto;
1411  background: none;
1412  padding: 5px;
1413  box-shadow: 0 0 12px rgba(93, 64, 140, 0.25);
1414}
1415
1416/* =========================
1417   SUBSCRIBE
1418========================= */
1419
1420.subscribe-form {
1421  margin-bottom: -100px;
1422  display: none;
1423  position: relative;
1424}
1425
1426/* =========================
1427   PRODUCT INFO
1428========================= */
1429
1430.card-product .card-product-info .title {
1431  font-weight: 500;
1432  font-size: 18px;
1433  line-height: 19.2px;
1434  -webkit-line-clamp: 1;
1435  -webkit-box-orient: vertical;
1436  display: -webkit-box;
1437  overflow: hidden;
1438  color: #463562;
1439}
1440
1441.card-product .card-product-info .price {
1442  font-size: 20px;
1443  line-height: 20px;
1444  font-weight: 600;
1445  color: #5D408C;
1446}
1447
1448/* =========================
1449   QUANTITY
1450========================= */
1451
1452.wg-quantity .btn-quantity {
1453  width: 38px;
1454  height: 53px;
1455  display: flex;
1456  align-items: center;
1457  justify-content: center;
1458  font-size: 24px;
1459  color: #5D408C;
1460  cursor: pointer;
1461  transition: all 0.3s ease;
1462}
1463
1464.wg-quantity .btn-quantity:hover {
1465  color: #463562;
1466}
1467
1468.wg-quantity input {
1469  width: 51px;
1470  height: 53px;
1471  padding: 0;
1472  background-color: transparent;
1473  border: 0;
1474  text-align: center;
1475  font-size: 16px;
1476  font-weight: 600;
1477  line-height: 26px;
1478  color: #5D408C;
1479}
1480
1481/* =========================
1482   TEXT
1483========================= */
1484
1485.text_black-2 {
1486  color: #463562;
1487}
1488
1489/* =========================
1490   MAIN BUTTON
1491========================= */
1492
1493.btn-fill {
1494  background-color: #5D408C;
1495  border: 1px solid #5D408C;
1496  color: #ffffff;
1497}
1498
1499.btn-fill:hover {
1500  background-color: #463562;
1501  border-color: #463562;
1502}
1503
1504/* =========================
1505   CHECKBOX
1506========================= */
1507
1508.widget-wrap-checkout .wd-check-payment .box-checkbox input {
1509  border-radius: 3px;
1510  width: 24px;
1511  height: 24px;
1512  border: solid 3px #5D408C !important;
1513}
1514
1515/* =========================
1516   DARK TEXT
1517========================= */
1518
1519text-dark {
1520  --bs-text-opacity: 1;
1521  color: #ffffff !important;
1522}
1523
1524/* =========================
1525   STORE RESPONSIVE
1526========================= */
1527
1528@media (max-width: 768px) {
1529  .tf-page-title .heading { font-size: 30px; line-height: 38px; }
1530  .footer { padding-top: 60px; }
1531  .footer .footer-wrap .footer-body { border-radius: 20px 20px 10px 10px; padding: 25px 15px 35px; }
1532  .footer .footer-wrap .footer-bottom .footer-bottom-wrap::after { margin-right: 0; font-size: 13px; }
1533  .phone-button { width: 52px; height: 52px; right: 15px; bottom: 80px; }
1534  .card-product { border-radius: 16px; padding: 8px; }
1535  .card-product .card-product-info .title { font-size: 16px; }
1536  .card-product .card-product-info .price { font-size: 18px; }
1537  .row.gy-4 .card { width: 94%; }
1538  .collection-item-circle .collection-image { width: 120px; height: 120px; }
1539  .scrolling-text { font-size: 14px; }
1540}
1541
1542/* =========================
1543   SMALL MOBILE
1544========================= */
1545
1546@media (max-width: 480px) {
1547  .tf-page-title .heading { font-size: 26px; line-height: 34px; }
1548  p { font-size: 15px; line-height: 26px; }
1549  .footer .footer-wrap .footer-body { border-radius: 16px 16px 8px 8px; }
1550  .accordion-button { padding: 15px; font-size: 14px; }
1551  .list-product-btn .box-icon { width: 28px; height: 28px; min-width: 28px; }
1552  .wg-quantity .btn-quantity { width: 34px; height: 48px; }
1553  .wg-quantity input { width: 45px; height: 48px; }
1554}
1555
1556.top-bar-text {
1557  color: #5D408C;
1558}
1559
1560.text-white {
1561  --bs-text-opacity: 1;
1562  color: rgba(93, 64, 140, var(--bs-text-opacity)) !important;
1563}
1564bottom-wrap .footer-menu_item {
1565  color: #ffffff !important;
1566  position: relative;
1567display: none !important;
1568}
1569</style>
1570
1571
1572
1573	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css" />
1574	
1574<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
1574
1575
1576</head>
1577
1578<body class="preload-wrapper rtl color-primary-2" id="app">
1579
1580	
1580<script>
1581	window.LocalizationKeys = {
1582	Dashboard: "لوحة التحكم",
1583	FillVerificationCode: "يرجى إدخال رمز التحقق بالكامل",
1584	InvalidLogin: "فشل تسجيل الدخول.",
1585	Accept: "موافق",
1586	RateRequired: "التقييم إجباري",
1587
1588	AddSuccessfully: "تمت الإضافة",
1589	ProductSuccessfullyCart: "تمت إضافة المنتج إلى السلة بنجاح",
1590	AcceptTerms: "يرجى قبول الشروط والأحكام للمتابعة.",
1591	UploadReceiptRequired: "يرجى رفع إثبات الدفع",
1592	SaudiArabia: "المملكة العربية السعوديه",
1593	EnterCode: "يرجى إدخال رمز الخصم",
1594	InvalidCode: "رمز الخصم غير صالح",
1595	ErrOccurred: "حدث خطأ أثناء التحقق من الكوبون",
1596	LinkCopy: "تم نسخ رابط المنتج!",
1597	Now: "الآن",
1598	Validation: "يرجى إدخال بريد إلكتروني صحيح (مثال: [email protected])",
1599	SendSucc: "تم إرسال الطلب بنجاح.",
1600	ErrorOccurred: "حدث خطأ",
1601	NewNotiFication: "إشعار جديد",
1602	MobileValidation: "يرجى إدخال رقم جوال صحيح مكون من 9 أرقام يبدأ بـ5",
1603	NotExist: "العنصر غير موجود!",
1604
1605	ErrorInOrder: "خطأ في الطلب",
1606	PhoneNumberFirst: "لابد من إدخال رقم الجوال اولاً",
1607	Phone: "رقم التليفون :",
1608	Email: " البريد الإلكتروني",
1609	ErrorInCode: "حدث خطأ أثناء إعادة إرسال الكود",
1610
1611	UnknownError: "خطأ غير معروف",
1612	ConnectError: "حدث خطأ أثناء الاتصال بالسيرفر.",
1613	CompletedSuccessfully: "تمت العملية بنجاح!",
1614	Success: "نجاح",
1615	Warning: "تحذير",
1616	Error: "خطأ",
1617	CheckData: "يرجى التحقق من البيانات المدخلة.",
1618	Ago: "منذ",
1619	Year: "سنة",
1620	Month: "شهر",
1621	Day: "يوم",
1622	Hour: "ساعة",
1623	Minute: "دقيقة",
1624	Second: "ثانية",
1625
1626	IsRequired: "هذا الحقل مطلوب",
1627	FirstNameValidation: "الاسم الأول يجب أن يكون على الأقل حرفين",
1628	SurNameValidation: "اسم العائلة يجب أن يكون على الأقل حرفين",
1629	InvalidEmail: "البريد الإلكتروني غير صالح",
1630	SelectCourier: "يرجى اختيار شركة شحن",
1631	SelectCourierMessage: "يجب اختيار شركة شحن للمتابعة",
1632	SelectLocationFirst: "اختر الموقع",
1633	PleaseSelectLocationOnMap: "انقر على الخريطة لتحديد موقع التوصيل",
1634	RequiredFields: "يرجى التحقق من البيانات المدخلة.",
1635	PleaseEnterRequiredFields: "هذا الحقل مطلوب",
1636	SelectCity: "اختر المدينة",
1637	PleaseSelectCity: "اختر المدينة",
1638	ChooseShipmentAddress: "اختر عنوان الشحن",
1639	ChooseCountryForShipping: "يرجى اختيار الدولة للتوصيل",
1640	ChooseCityForShipping: "يرجى اختيار المدينة للتوصيل",
1641	ChooseAddressAndCity: "يرجى اختيار عنوان الشحن وتحديد المدينة",
1642	ChooseRegionForShipping: "يرجى اختيار المنطقة للتوصيل",
1643	ChooseDistrictForShipping: "يرجى اختيار الحي للتوصيل",
1644	EnterDistrictForShipping: "يرجى إدخال الحي للتوصيل",
1645	AddressSaved: "حفظ العنوان",
1646	AddressUpdated: "تحديث العنوان",
1647	ErrorSavingAddress: "خطأ غير معروف",
1648	ConfirmDelete: "تأكيد الحذف",
1649	DeleteAddressConfirm: "هل أنت متأكد من الحذف",
1650	Delete: "حذف",
1651	Cancel: "إلغاء",
1652	Deleted: "نجاح",
1653	AddressDeleted: "تمت العملية بنجاح!",
1654	DefaultAddressSet: "تمت العملية بنجاح!",
1655
1656	FailedLoad: "فشل تحميل البيانات",
1657	NoChange: "لم تقم بإجراء أي تغييرات",
1658	Save: "جاري الحفظ",
1659	FailedUpdate: "فشل تحديث البيانات",
1660	SaveChanges: "حفظ التغييرات",
1661	FirstNameReq: "الاسم الأول مطلوب",
1662	LastNameReq: "الاسم الأخير مطلوب",
1663	LastNameValidation: "الاسم الأخير يجب أن يكون على الأقل حرفين",
1664	EmailReq: "البريد الإلكتروني مطلوب",
1665
1666	OneSec: "منذ ثانية واحدة",
1667	MinAgo: "منذ دقيقة واحدة",
1668	MinTwoAgo: "منذ دقيقتين",
1669	HourAgo: "منذ ساعة واحدة",
1670	HoursTwoAgo: "منذ ساعتين",
1671	DayAgo: "منذ يوم واحد",
1672	DaysTwoAgo: "منذ يومين",
1673	WeekAgo: "منذ أسبوع واحد",
1674	WeeksTwoAgo: "منذ أسبوعين",
1675	MonthAgo: "منذ شهر واحد",
1676	MonthsTwoAgo: "منذ شهرين",
1677	YearAgo: "منذ سنة واحدة",
1678	YearsTwoAgo: "منذ سنتين",
1679	Year: "سنة",
1680	Years: "سنوات",
1681	Month: "شهراً",
1682	Months: "أشهر",
1683	Week: "أسبوعاً",
1684	Weeks: "أسابيع",
1685	Day: "يوماً",
1686	Days: "أيام",
1687	Hour: "ساعة",
1688	Hours: "ساعات",
1689	Minute: "دقيقة",
1690	Minutes: "دقائق",
1691	PhoneReq: "رقم الهاتف إجباري",
1692	PhoneNumberInvalid: "رقم الهاتف إجباري",
1693	PhoneNumberInvalid: "رقم الهاتف إجباري",
1694	ChoosePhoto: "اختر صورة أولاً",
1695	ErrorUploading: "Pages.Customers.ErrorUploading",
1696	SuccessUploading: "تم رفع الصورة بنجاح",
1697	PaymentSuccessMessage: "تم الدفع بنجاح!",
1698	CartHaveAdiffrentType: "لا يمكنك إضافة منتجات من انواع مختلفة إلى عربة التسوق نفسها. يرجى إكمال الطلب الحالي أو إزالة المنتجات من السلة الآخر لإضافة هذا المنتج.",
1699	PreventChangeOptions: "لا يمكنك اختيار هذا الخيار لأن هذه العربة تحتوي على منتج رقمي",
1700	AddressIsRequired: "العنوان مطلوب",
1701	
1702	TamaraUnavailable: "تمارا غير متاحة حالياً لهذا الطلب.",
1703	
1704	Pages_Login_InvalidCaptcha: "فشل التحقق الأمني. يرجى إكمال التحقق والمحاولة مرة أخرى.",
1705	};
1706</script>
1706
1707
1708
1709	<div class="loading-overlay" id="loadingOverlay">
1710		<div class="loading-modal">
1711			<div class="loading-spinner"></div>
1712
1713		</div>
1714	</div>
1715
1716
1717	<!-- preload -->
1718	<div class="preload preload-container">
1719		<div class="preload-logo">
1720			<div class="spinner"></div>
1721		</div>
1722	</div>
1723
1724	<!-- /preload -->
1725	<div id="wrapper">
1726		
1727		<div class="tf-top-bar bg-secondary">
1728  <div class="px_15 lg-px_40">
1729    <div class="tf-top-bar_wrap grid-3 gap-30 align-items-center">
1730      <ul class="tf-top-bar_item tf-social-icon d-flex gap-10 list-none">
1731		  
1732		  
1733		  
1734		  
1735		  
1736		  
1737
1738
1739
1740	  </ul>
1741      <div class="text-center text-white overflow-hidden d-lg-block d-none">
1742        <div dir="ltr" class="swiper tf-sw-top_bar" data-preview="1" data-space="0" data-loop="true"
1743            data-speed="1000" data-delay="2000">
1744          <div class="swiper-wrapper">
1745            <div class="swiper-slide">
1746              <p class="top-bar-text fw-5">
1747				  &#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A; &#x645;&#x645;&#x62A;&#x639;&#x629; &#x648; &#x645;&#x628;&#x62A;&#x643;&#x631;&#x629; &#x641;&#x64A; &#x645;&#x62A;&#x646;&#x627;&#x648;&#x644; &#x64A;&#x62F;&#x64A;&#x643;!
1748				  <a href="#" title="all collection" class="tf-btn text-white btn-line">
1749					  &#x62A;&#x633;&#x648;&#x642; &#x627;&#x644;&#x622;&#x646;
1750					  <i class="icon text-white icon-arrow1-top-left"></i>
1751                </a>
1752              </p>
1753            </div>
1754            <div class="swiper-slide">
1755              <p class="top-bar-text fw-5"> &#x627;&#x628;&#x62A;&#x643;&#x627;&#x631;&#x627;&#x62A; &#x62C;&#x62F;&#x64A;&#x62F;&#x629; &#x62A;&#x646;&#x62A;&#x638;&#x631;&#x643;!</p>
1756            </div>
1757            <div class="swiper-slide">
1758              <p class="top-bar-text fw-5">&#x627;&#x643;&#x62A;&#x634;&#x641; &#x623;&#x62D;&#x62F;&#x62B; &#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A; &#x2728;</p>
1759            </div>
1760          </div>
1761        </div>
1762      </div>
1763
1764      <div class="top-bar-language tf-cur justify-content-end">
1765        <div class="tf-languages text-white">
1766          <select class=" image-select center style-default type-languages" 
1767          id="language-selection" onchange="changeLanguage()">
1768             <option value="en" >English</option>
1769             <option value="ar" selected>العربية</option>    
1770          </select>
1771        </div>
1772      </div>
1773    </div>
1774  </div>
1775</div>
1776<!-- /Top Bar -->
1777
1778<!-- Header -->
1779<header id="header" class="header-default">
1780  <div class="px_15 lg-px_40">
1781    <div class="row wrapper-header align-items-center">
1782      <div class="col-md-4 col-3 tf-lg-hidden">
1783        <a href="#mobileMenu" data-bs-toggle="offcanvas" aria-controls="offcanvasLeft">
1784          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"
1785              fill="none">
1786            <path
1787                d="M2.00056 2.28571H16.8577C17.1608 2.28571 17.4515 2.16531 17.6658 1.95098C17.8802 1.73665 18.0006 1.44596 18.0006 1.14286C18.0006 0.839753 17.8802 0.549063 17.6658 0.334735C17.4515 0.120408 17.1608 0 16.8577 0H2.00056C1.69745 0 1.40676 0.120408 1.19244 0.334735C0.978109 0.549063 0.857702 0.839753 0.857702 1.14286C0.857702 1.44596 0.978109 1.73665 1.19244 1.95098C1.40676 2.16531 1.69745 2.28571 2.00056 2.28571ZM0.857702 8C0.857702 7.6969 0.978109 7.40621 1.19244 7.19188C1.40676 6.97755 1.69745 6.85714 2.00056 6.85714H22.572C22.8751 6.85714 23.1658 6.97755 23.3801 7.19188C23.5944 7.40621 23.7148 7.6969 23.7148 8C23.7148 8.30311 23.5944 8.59379 23.3801 8.80812C23.1658 9.02245 22.8751 9.14286 22.572 9.14286H2.00056C1.69745 9.14286 1.40676 9.02245 1.19244 8.80812C0.978109 8.59379 0.857702 8.30311 0.857702 8ZM0.857702 14.8571C0.857702 14.554 0.978109 14.2633 1.19244 14.049C1.40676 13.8347 1.69745 13.7143 2.00056 13.7143H12.2863C12.5894 13.7143 12.8801 13.8347 13.0944 14.049C13.3087 14.2633 13.4291 14.554 13.4291 14.8571C13.4291 15.1602 13.3087 15.4509 13.0944 15.6653C12.8801 15.8796 12.5894 16 12.2863 16H2.00056C1.69745 16 1.40676 15.8796 1.19244 15.6653C0.978109 15.4509 0.857702 15.1602 0.857702 14.8571Z"
1788                fill="currentColor"></path>
1789          </svg>
1790        </a>
1791      </div>
1792      <div class="col-xl-2 col-md-4 col-6">
1793        <a href="/" class="logo-header">
1794          <!--   <img src="/Views/Themes/furniture/V1/Assets/images/logo/logo.svg" alt="logo" class="logo" /> -->
1795
1796          <img src="/lak/tenants/791b3825-acde-bee6-c1b7-3a22e322b7f0/storeScreenshots/ad19e68c-94bd-41ee-8557-03acc5a61a07.webp" alt="logo" class="logo" />
1797
1798        </a>
1799      </div>
1800      <div class="col-xl-8 tf-md-hidden">
1801        <nav class="box-navigation text-center">
1802          
1803            <ul id="category-menu" class="box-nav-ul d-flex align-items-center justify-content-center gap-30 list-none">
1804              <li>
1805                <a class="item-link" href="/products">
1806                  &#x643;&#x644; &#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A;
1807                </a>
1808              </li>
1809
1810              
1811              <li class="menu-item position-relative menu-inner">
1812                <a href="/products?category=8fd4f7fc-9428-c9de-c073-3a23db86a0c9" class="item-link">
1813                  &#x627;&#x644;&#x623;&#x644;&#x639;&#x627;&#x628;
1814                  
1815                </a>
1816
1817                
1818			  </li>
1819              
1820              <!-- باقي الأقسام -->
1821              <li id="more-categories" class="menu-item position-relative more-categories" style="display:none;">
1822                <a href="#" class="item-link">
1823					&#x628;&#x627;&#x642;&#x64A; &#x627;&#x644;&#x623;&#x642;&#x633;&#x627;&#x645;<i class="icon icon-arrow-down"></i></a>
1824                <div class="sub-menu submenu-default">
1825                  <ul class="menu-list"></ul>
1826                </div>
1827              </li>
1828				
1829				<li>
1830					<a class="item-link" href="/deals">
1831						&#x627;&#x644;&#x639;&#x631;&#x648;&#x636;
1832					</a>
1833				</li>
1834				
1835				
1836				<li>
1837					<a class="item-link" href="/lastPieceProducts">
1838						&#x622;&#x62E;&#x631; &#x642;&#x637;&#x639;&#x629; &#x1F3C3;&#x1F525;
1839					</a>
1840				</li>
1841				
1842			</ul>
1843          
1844        </nav>
1845      </div>
1846      <div class="col-xl-2 col-md-4 col-3">
1847        <ul class="nav-icon d-flex justify-content-end align-items-center gap-20">
1848          <li class="nav-search">
1849            <a href="#canvasSearch" data-bs-toggle="offcanvas" aria-controls="offcanvasLeft"
1850                class="nav-icon-item">
1851              <i class="icon icon-search"></i>
1852            </a>
1853          </li>
1854          <li class="nav-account">
1855
1856            <a href="#login" 
1857             data-bs-toggle="modal" 
1858            class="nav-icon-item">
1859				<!--   &#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x627;&#x644;&#x62F;&#x62E;&#x648;&#x644;  -->
1860              <i class="icon icon-account"></i>
1861            </a>
1862
1863
1864          
1865          </li>
1866
1867
1868 
1869          <li class="nav-cart">
1870            <a href="#shoppingCart" data-bs-toggle="modal" class="nav-icon-item">
1871              <i class="icon icon-bag"></i>
1872              <span class="count-box" v-text="cartCount"></span>
1873            </a>
1874          </li>
1875
1876        </ul>
1877      </div>
1878    </div>
1879  </div>
1880</header>
1881<!-- /Header -->
1882<script src="/Views/Themes/furniture/V1/Components/Header/Header.js"></script>
1882
1883		
1884
1885		
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979<!-- page-title -->
1980<div class="tf-page-title">
1981    <div class="container-full">
1982        <h1 class="heading text-center">
1983			&#x622;&#x62E;&#x631; &#x642;&#x637;&#x639;&#x629; &#x1F3C3;&#x1F525;
1984		</h1>
1985        <p class="text-center text-2 text_black-2 mt_5">
1986			&#x627;&#x633;&#x62A;&#x645;&#x62A;&#x639; &#x628;&#x641;&#x631;&#x635;&#x62A;&#x643; &#x627;&#x644;&#x623;&#x62E;&#x64A;&#x631;&#x629; &#x644;&#x627;&#x645;&#x62A;&#x644;&#x627;&#x643; &#x622;&#x62E;&#x631; &#x642;&#x637;&#x639;&#x629; &#x645;&#x646; &#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A;&#x646;&#x627; &#x627;&#x644;&#x645;&#x645;&#x64A;&#x632;&#x629;! 
1987		</p>
1988    </div>
1989</div>
1990<!-- /page-title -->
1991
1992<!-- Section Product -->
1993<section class="flat-spacing-2">
1994    <div class="container">
1995		<p class="text-center text-2 text_black-2 my_20">
1996
1997			&#x646;&#x642;&#x62F;&#x645; &#x644;&#x643; &#x62A;&#x634;&#x643;&#x64A;&#x644;&#x629; &#x648;&#x627;&#x633;&#x639;&#x629; &#x645;&#x646; &#x627;&#x641;&#x636;&#x644; &#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A; &#x627;&#x644;&#x639;&#x635;&#x631;&#x64A;&#x629; &#x630;&#x627;&#x62A; &#x627;&#x644;&#x62C;&#x648;&#x62F;&#x629; &#x627;&#x644;&#x641;&#x627;&#x626;&#x642;&#x629;.&#x644;&#x627; &#x62A;&#x641;&#x648;&#x651;&#x62A; &#x647;&#x630;&#x647; &#x627;&#x644;&#x641;&#x631;&#x635;&#x629; &#x627;&#x644;&#x62D;&#x635;&#x631;&#x64A;&#x629; &#x644;&#x627;&#x642;&#x62A;&#x646;&#x627;&#x621; &#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A;&#x643; &#x627;&#x644;&#x645;&#x641;&#x636;&#x644;&#x629; &#x642;&#x628;&#x644; &#x646;&#x641;&#x627;&#x62F; &#x627;&#x644;&#x643;&#x645;&#x64A;&#x629;.&#x633;&#x627;&#x631;&#x639; &#x628;&#x627;&#x644;&#x634;&#x631;&#x627;&#x621; &#x627;&#x644;&#x622;&#x646; &#x648;&#x627;&#x633;&#x62A;&#x645;&#x62A;&#x639; &#x628;&#x62A;&#x62C;&#x631;&#x628;&#x629; &#x62A;&#x633;&#x648;&#x651;&#x642; &#x641;&#x631;&#x64A;&#x62F;&#x629; &#x645;&#x639; &#x623;&#x641;&#x636;&#x644; &#x627;&#x644;&#x639;&#x631;&#x648;&#x636; &#x648;&#x627;&#x644;&#x62E;&#x62F;&#x645;&#x627;&#x62A;.
1998		</p>
1999		
2000        <div class="tf-shop-control grid-3 align-items-center">
2001            <div class="tf-control-filter">
2002                <!-- <a href="#filterShop" data-bs-toggle="offcanvas" aria-controls="offcanvasLeft" class="tf-btn-filter"><span class="icon icon-filter"></span><span class="text">Filter</span></a> -->
2003            </div>
2004            <ul class="tf-control-layout d-flex justify-content-center list-none">
2005
2006                <li class="tf-view-layout-switch sw-layout-2" data-value-layout="tf-col-2">
2007                    <div class="item"><span class="icon icon-grid-2"></span></div>
2008                </li>
2009                <li class="tf-view-layout-switch sw-layout-3" data-value-layout="tf-col-3">
2010                    <div class="item"><span class="icon icon-grid-3"></span></div>
2011                </li>
2012                <li class="tf-view-layout-switch sw-layout-4 active" data-value-layout="tf-col-4">
2013                    <div class="item"><span class="icon icon-grid-4"></span></div>
2014                </li>
2015                <li class="tf-view-layout-switch sw-layout-5" data-value-layout="tf-col-5">
2016                    <div class="item"><span class="icon icon-grid-5"></span></div>
2017                </li>
2018                <li class="tf-view-layout-switch sw-layout-6" data-value-layout="tf-col-6">
2019                    <div class="item"><span class="icon icon-grid-6"></span></div>
2020                </li>
2021            </ul>
2022            <div class="tf-control-sorting d-flex justify-content-end">
2023                <div class="tf-dropdown-sort" data-bs-toggle="dropdown">
2024                    <div class="btn-select">
2025                        <span class="text-sort-value"> &#x627;&#x644;&#x641;&#x631;&#x632; &#x62D;&#x633;&#x628;</span>
2026                        <span class="icon icon-arrow-down"></span>
2027                    </div>
2028                    <div class="dropdown-menu">
2029                        <div class="select-item" data-sort-value="1">
2030                            <span class="text-value-item"> &#x627;&#x644;&#x623;&#x643;&#x62B;&#x631; &#x645;&#x628;&#x64A;&#x639;&#x627;&#x64B;</span>
2031                        </div>
2032                        <div class="select-item" data-sort-value="2">
2033                            <span class="text-value-item"> &#x627;&#x644;&#x62A;&#x631;&#x62A;&#x64A;&#x628; &#x623;&#x628;&#x62C;&#x62F;&#x64A;&#x64B;&#x627;: &#x645;&#x646; A &#x625;&#x644;&#x649; Z</span>
2034                        </div>
2035                        <div class="select-item" data-sort-value="3">
2036                            <span class="text-value-item"> &#x627;&#x644;&#x62A;&#x631;&#x62A;&#x64A;&#x628; &#x623;&#x628;&#x62C;&#x62F;&#x64A;&#x64B;&#x627;: &#x645;&#x646; Z &#x625;&#x644;&#x649; A</span>
2037                        </div>
2038                        <div class="select-item" data-sort-value="4">
2039                            <span class="text-value-item"> &#x627;&#x644;&#x633;&#x639;&#x631;: &#x645;&#x646; &#x627;&#x644;&#x623;&#x642;&#x644; &#x625;&#x644;&#x649; &#x627;&#x644;&#x623;&#x639;&#x644;&#x649;</span>
2040                        </div>
2041                        <div class="select-item" data-sort-value="5">
2042                            <span class="text-value-item"> &#x627;&#x644;&#x633;&#x639;&#x631;: &#x645;&#x646; &#x627;&#x644;&#x623;&#x639;&#x644;&#x649; &#x625;&#x644;&#x649; &#x627;&#x644;&#x623;&#x642;&#x644;</span>
2043                        </div>
2044                        <div class="select-item" data-sort-value="6">
2045                            <span class="text-value-item"> &#x627;&#x644;&#x62A;&#x627;&#x631;&#x64A;&#x62E;: &#x645;&#x646; &#x627;&#x644;&#x623;&#x642;&#x62F;&#x645; &#x625;&#x644;&#x649; &#x627;&#x644;&#x623;&#x62D;&#x62F;&#x62B;</span>
2046                        </div>
2047                        <div class="select-item" data-sort-value="7">
2048                            <span class="text-value-item"> &#x627;&#x644;&#x62A;&#x627;&#x631;&#x64A;&#x62E;: &#x645;&#x646; &#x627;&#x644;&#x623;&#x62D;&#x62F;&#x62B; &#x625;&#x644;&#x649; &#x627;&#x644;&#x623;&#x642;&#x62F;&#x645;</span>
2049                        </div>
2050                    </div>
2051                </div>
2052            </div>
2053        </div>
2054        <div class="wrapper-control-shop">
2055            <div class="meta-filter-shop">
2056                <div id="product-count-grid" class="count-text"></div>
2057                <div id="product-count-list" class="count-text"></div>
2058                <div id="applied-filters"></div>
2059                <button id="remove-all" class="remove-all-filters" style="display: none;">
2060					&#x625;&#x632;&#x627;&#x644;&#x629; &#x627;&#x644;&#x643;&#x644; <i
2061                        class="icon icon-close"></i></button>
2062            </div>
2063
2064            <div class="tf-grid-layout wrapper-shop tf-col-4" id="gridLayout">
2065
2066
2067				
2068
2069				
2070                <div class="no-products-found">
2071                   <img src="/Views/Themes/furniture/V1/assets/images/products/empty.jpg" alt="No Products Found" class="img-fluid"/>
2072                    <h5>&#x644;&#x627; &#x62A;&#x648;&#x62C;&#x62F; &#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A; &#x644;&#x639;&#x631;&#x636;&#x647;&#x627;</h5>
2073                
2074
2075
2076
2077            </div>
2078            <div class="tf-grid-layout  tf-col-1" id="gridLayout"></div>
2079
2080        </div>
2081    </div>
2082	</div>
2083</section>
2084<!-- /Section Product -->
2085
2086
2087<script src="/Views/Themes/furniture/V1/LastPieceProducts/LastPieceProducts.js"></script>
2087
2088
2089		
2090		<!-- Footer -->
2091<footer id="footer" class="footer background-black">
2092	<div class="footer-wrap wow fadeIn" data-wow-delay="0s">
2093		<div class="footer-body">
2094			<div class="container">
2095				<div class="row justify-content-between">
2096					<!-- معلومات الاتصال -->
2097					<div class="col-xl-2 col-md-6 col-12">
2098						<div class="footer-infor">
2099							<div class="footer-logo">
2100								<a href="/">
2101									<!-- <img width="150" src="/Views/Themes/furniture/V1/Assets/images/logo/logo-white.svg" alt="" /> -->
2102
2103									<img width="150" src="/lak/tenants/791b3825-acde-bee6-c1b7-3a22e322b7f0/storeScreenshots/ad19e68c-94bd-41ee-8557-03acc5a61a07.webp" alt="" />
2104								</a>
2105							</div>
2106							<ul class="list-none">
2107								
2108
2109								
2110
2111								<li>
2112									<p>
2113										<span class="fw-6">&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A;</span> : <a href="/cdn-cgi/l/email-protection#2e434443411d1d466e49434f4742004d4143"><span class="__cf_email__" data-cfemail="f5989f989ac6c69db59298949c99db969a98">[email&#160;protected]</span></a>
2114									</p>
2115								</li>
2116								
2117								
2118								<li>
2119									<p>
2120										<span class="fw-6">&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;</span>: <a class="fw-5" href="tel:508187872">508187872</a>
2121									</p>
2122								</li>
2123								
2124
2125							</ul>
2126							
2127							<!-- روابط التواصل الاجتماعي -->
2128							<ul class="tf-social-icon d-flex gap-10 style-white list-none">
2129								
2130								
2131								
2132
2133								
2134
2135								
2136								
2137
2138
2139							</ul>
2140						</div>
2141					</div>
2142
2143					<!-- المساعدة -->
2144					
2145					<div class="col-xl-2 col-md-6 col-12 footer-col-block">
2146						<div class="footer-heading">
2147							<h6>&#x627;&#x646;&#x62A;&#x642;&#x627;&#x644; &#x633;&#x631;&#x64A;&#x639;</h6>
2148						</div>
2149
2150
2151
2152						<ul class="footer-menu-list tf-collapse-content">
2153
2154							
2155
2156
2157							<li>
2158								<a href="/page/sys-lstkhdm-wlkhswsy" class="footer-menu_item">&#x633;&#x64A;&#x627;&#x633;&#x629; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; &#x648;&#x627;&#x644;&#x62E;&#x635;&#x648;&#x635;&#x64A;&#x629;</a>
2159							</li>
2160
2161							
2162
2163
2164							<li>
2165								<a href="/page/sys-lstbdl-wlstrj" class="footer-menu_item"> &#x633;&#x64A;&#x627;&#x633;&#x629; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x628;&#x62F;&#x627;&#x644; &#x648;&#x627;&#x644;&#x625;&#x633;&#x62A;&#x631;&#x62C;&#x627;&#x639;</a>
2166							</li>
2167
2168							
2169
2170						</ul>
2171					</div>
2172					
2173					
2174					
2175					<!-- معلومات عنا -->
2176					<!--
2177          <div class="col-xl-2 col-md-6 col-12 footer-col-block">
2178            <div class="footer-heading">
2179              <h6>من نحن</h6>
2180            </div>
2181            <ul class="footer-menu-list tf-collapse-content">
2182              <li>
2183                <a href="#" class="footer-menu_item">تواصل معنا</a>
2184              </li>
2185              <li>
2186                <a href="#" class="footer-menu_item">&#x627;&#x644;&#x62D;&#x633;&#x627;&#x628;</a>
2187              </li>
2188            </ul>
2189          </div>
2190           -->
2191					<!-- النشرة البريدية -->
2192					<div class="col-xl-2 col-md-6 col-12">
2193						<div class="footer-newsletter footer-col-block">
2194							<div class="footer-heading">
2195								<h6> &#x627;&#x634;&#x62A;&#x631;&#x643; &#x628;&#x627;&#x644;&#x646;&#x634;&#x631;&#x629; &#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F;&#x64A;&#x629;</h6>
2196							</div>
2197							<div class="tf-collapse-content">
2198								<div class="footer-menu_item">
2199									&#x627;&#x634;&#x62A;&#x631;&#x643; &#x644;&#x62A;&#x643;&#x648;&#x646; &#x623;&#x648;&#x644; &#x645;&#x646; &#x64A;&#x639;&#x644;&#x645; &#x628;&#x627;&#x644;&#x639;&#x631;&#x648;&#x636;&#x60C; &#x648;&#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A; &#x627;&#x644;&#x62C;&#x62F;&#x64A;&#x62F;&#x629;&#x60C; &#x648;&#x627;&#x644;&#x645;&#x62D;&#x62A;&#x648;&#x649; &#x627;&#x644;&#x62D;&#x635;&#x631;&#x64A;&#x60C; &#x648;&#x627;&#x644;&#x641;&#x639;&#x627;&#x644;&#x64A;&#x627;&#x62A;!
2200								</div>
2201								<!-- نموذج الاشتراك -->
2202								<form class="form-newsletter" id="newsletterForm" @submit.prevent="submitNewsLetter">
2203
2204									<input
2205									  type="email"
2206									  name="email"
2207									  id="email"
2208									  placeholder="&#x623;&#x62F;&#x62E;&#x644; &#x628;&#x631;&#x64A;&#x62F;&#x643; &#x627;&#x644;&#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A;..."
2209									  required="true"
2210									  v-model="newsLetter.email"
2211									  @input="validateEmail"
2212									  title="&#x64A;&#x631;&#x62C;&#x649; &#x625;&#x62F;&#x62E;&#x627;&#x644; &#x628;&#x631;&#x64A;&#x62F; &#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A; &#x635;&#x62D;&#x64A;&#x62D; (&#x645;&#x62B;&#x627;&#x644;: [email protected])"
2213									  ref="emailInput" />
2214
2215									<label class="text-white d-flex align-items-center gap-2">
2216										<input type="checkbox" name="OPT_IN" v-model="optIn" /> &#x623;&#x648;&#x627;&#x641;&#x642; &#x639;&#x644;&#x649; &#x62A;&#x644;&#x642;&#x64A; &#x627;&#x644;&#x646;&#x634;&#x631;&#x629; &#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F;&#x64A;&#x629;
2217									</label>
2218
2219									<div v-if="newsLetter.errorMessage" v-text="newsLetter.errorMessage" class="error-message" style="color: red; font-size: 0.9em;">
2220									</div>
2221
2222									<button type="submit" class="tf-btn btn-sm radius-3 btn-fill btn-icon">
2223										&#x627;&#x634;&#x62A;&#x631;&#x643; <i class="icon icon-arrow1-top-left"></i>
2224									</button>
2225
2226								</form>
2227
2228							</div>
2229						</div>
2230					</div>
2231				</div>
2232			</div>
2233		</div>
2234
2235		<!-- التذييل السفلي -->
2236		<div class="footer-bottom">
2237			<div class="container">
2238				<div class="row">
2239					<div class="col-12">
2240						<div
2241						  class="footer-bottom-wrap d-flex gap-20 flex-wrap justify-content-between align-items-center">
2242							<div class="footer-menu_item">&#x62A;&#x645; &#x627;&#x644;&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x628;&#x648;&#x627;&#x633;&#x637;&#x629; &#x644;&#x643; | LAK</div>
2243
2244							
2245							
2246							
2247							
2248							
2249							
2250
2251							<div class="d-flex gap-10px mt-20px">
2252							
2253
2254							
2255
2256							
2257						</div>
2258
2259
2260
2261
2262						</div>
2263					</div>
2264				</div>
2265			</div>
2266		</div>
2267	</div>
2268</footer>
2269<!-- /Footer -->
2270		
2271	</div>
2272
2273
2274	<!-- gotop -->
2275	<div class="progress-wrap">
2276		<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
2277			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
2278				style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 286.138;">
2279			</path>
2280		</svg>
2281	</div>
2282	<!-- /gotop -->
2283
2284	<!-- toolbar-bottom -->
2285	<!-- toolbar-bottom -->
2286<div class="tf-toolbar-bottom type-1150">
2287	<div class="toolbar-item">
2288		<a href="#toolbarShopmb" data-bs-toggle="offcanvas" aria-controls="offcanvasLeft">
2289			<div class="toolbar-icon">
2290				<i class="icon-shop"></i>
2291			</div>
2292			<div class="toolbar-label">&#x62A;&#x633;&#x648;&#x651;&#x642;</div>
2293		</a>
2294	</div>
2295
2296	<div class="toolbar-item">
2297		<a href="#canvasSearch" data-bs-toggle="offcanvas" aria-controls="offcanvasLeft">
2298			<div class="toolbar-icon">
2299				<i class="icon-search"></i>
2300			</div>
2301			<div class="toolbar-label">&#x628;&#x62D;&#x62B;</div>
2302		</a>
2303	</div>
2304
2305	<div class="toolbar-item">
2306		
2307		
2308		<a href="#login" data-bs-toggle="modal">
2309			<div class="toolbar-icon">
2310				<i class="icon-account"></i>
2311			</div>
2312			<div class="toolbar-label">&#x627;&#x644;&#x62D;&#x633;&#x627;&#x628;</div>
2313		</a>
2314		
2315	</div>
2316
2317				
2318	
2319
2320    <div class="toolbar-item">
2321        <a href="#shoppingCart" data-bs-toggle="modal">
2322            <div class="toolbar-icon">
2323                <i class="icon-bag"></i>
2324                <div class="toolbar-count" v-text="cartCount"></div>
2325            </div>
2326            <div class="toolbar-label">&#x633;&#x644;&#x629; &#x627;&#x644;&#x645;&#x634;&#x62A;&#x631;&#x64A;&#x627;&#x62A;</div>
2327        </a>
2328    </div>
2329</div>
2330<!-- /toolbar-bottom -->
2331	<!-- /toolbar-bottom -->
2332
2333
2334
2335	<!-- mobile menu -->
2336	<div class="offcanvas offcanvas-start canvas-mb" id="mobileMenu">
2337	<span class="icon-close icon-close-popup" data-bs-dismiss="offcanvas" aria-label="Close"></span>
2338	<div class="mb-canvas-content">
2339		<div class="mb-body">
2340			<ul class="nav-ul-mb mb-3" id="wrapper-menu-navigation">
2341				<!-- Home -->
2342				<li class="nav-mb-item">
2343					<a href="/" class="mb-menu-link current">
2344						<span>&#x627;&#x644;&#x635;&#x641;&#x62D;&#x629; &#x627;&#x644;&#x631;&#x626;&#x64A;&#x633;&#x64A;&#x629;</span>
2345					</a>
2346				</li>
2347
2348				<!-- All products -->
2349				<li class="nav-mb-item">
2350					<a href="/products" class="mb-menu-link current">
2351						<span>&#x643;&#x644; &#x627;&#x644;&#x645;&#x646;&#x62A;&#x62C;&#x627;&#x62A;</span>
2352					</a>
2353				</li>
2354
2355				<!-- Dynamic Categories -->
2356				
2357				<li class="nav-mb-item">
2358					<div class="mainn-li">
2359						<a href="/products?category=8fd4f7fc-9428-c9de-c073-3a23db86a0c9">&#x627;&#x644;&#x623;&#x644;&#x639;&#x627;&#x628;</a>
2360						<a
2361				href="#dropdown-8fd4f7fc-9428-c9de-c073-3a23db86a0c9"
2362				class="collapsed mb-menu-link"
2363				data-bs-toggle="collapse"
2364				aria-expanded="false"
2365				aria-controls="dropdown-8fd4f7fc-9428-c9de-c073-3a23db86a0c9"
2366					>
2367
2368							
2369						</a>
2370					</div>
2371				
2372					
2373
2374					
2375				</li>
2376				
2377			</ul>
2378			<div class="mb-other-content">
2379				<div class="d-flex group-icon">
2380					
2381				</div>
2382				<div class="mb-notice">
2383					<a href="https://wa.me/&#x2B;966508187872" class="text-need">&#x647;&#x644; &#x62A;&#x62D;&#x62A;&#x627;&#x62C; &#x625;&#x644;&#x649; &#x645;&#x633;&#x627;&#x639;&#x62F;&#x629;&#x61F;</a>
2384				</div>
2385				<ul class="mb-info">
2386					
2387					<li>
2388						&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A; : <b><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe2e5e2e0bcbce7cfe8e2eee6e3a1ece0e2">[email&#160;protected]</a></b>
2389					</li>
2390					<li>
2391						&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;: <b>508187872</b>
2392					</li>
2393				</ul>
2394			</div>
2395
2396		</div>
2397		<div class="mb-bottom">
2398			<a @click="logout" v-if="session.phoneNumber" class="site-nav-icon">
2399				<i class="icon icon-account"></i>&#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x627;&#x644;&#x62E;&#x631;&#x648;&#x62C;
2400			</a>
2401			<div class="bottom-bar-language">
2402			</div>
2403		</div>
2404	</div>
2405</div>
2406
2407	<!-- /mobile menu -->
2408
2409
2410	<!-- canvasSearch -->
2411	<div class="offcanvas offcanvas-end canvas-search" id="canvasSearch">
2412		<div class="canvas-wrapper">
2413			<header class="tf-search-head">
2414				<div class="title fw-5">
2415&#x627;&#x628;&#x62D;&#x62B; &#x641;&#x64A; &#x645;&#x648;&#x642;&#x639;&#x646;&#x627;					<div class="close">
2416						<span class="icon-close icon-close-popup" data-bs-dismiss="offcanvas" aria-label="إغلاق"></span>
2417					</div>
2418				</div>
2419				<div class="tf-search-sticky">
2420					<form class="tf-mini-search-frm" onsubmit="handleSearch(); return false;">
2421						<fieldset class="text">
2422							<input type="text" id="search-input" placeholder="&#x627;&#x628;&#x62D;&#x62B; &#x647;&#x646;&#x627;..." name="search" tabindex="0" value=""
2423								aria-required="true" />
2424						</fieldset>
2425
2426					
2427						<button type="button" onclick="handleSearch()"><i class="icon-search"></i></button>
2428					</form>
2429				</div>
2430			</header>
2431
2432			<div class="canvas-body p-0">
2433				<div class="tf-search-content">
2434					<div class="tf-cart-hide-has-results">
2435
2436						<!-- روابط سريعة -->
2437						<div class="tf-col-quicklink">
2438
2439
2440							  
2441							<div class="tf-search-content-title fw-5">&#x627;&#x646;&#x62A;&#x642;&#x627;&#x644; &#x633;&#x631;&#x64A;&#x639;</div>
2442
2443        <ul class="tf-quicklink-list">
2444
2445              
2446
2447			  <li class="tf-quicklink-item">
2448									<a  href="/page/sys-lstkhdm-wlkhswsy">&#x633;&#x64A;&#x627;&#x633;&#x629; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; &#x648;&#x627;&#x644;&#x62E;&#x635;&#x648;&#x635;&#x64A;&#x629;</a>
2449								</li>
2450
2451
2452           
2453              
2454
2455			  <li class="tf-quicklink-item">
2456									<a  href="/page/sys-lstbdl-wlstrj"> &#x633;&#x64A;&#x627;&#x633;&#x629; &#x627;&#x644;&#x627;&#x633;&#x62A;&#x628;&#x62F;&#x627;&#x644; &#x648;&#x627;&#x644;&#x625;&#x633;&#x62A;&#x631;&#x62C;&#x627;&#x639;</a>
2457								</li>
2458
2459
2460           
2461              
2462
2463            </ul>
2464
2465            
2466
2467
2468
2469
2470							 
2471						</div>
2472
2473					 
2474					</div>
2475				</div>
2476			</div>
2477
2478		</div>
2479	</div>
vendor: 114 bytes, lines 2479-2482
2479
2480
2481
2482<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
2482<script src="/Views/Themes/furniture/V1/Components/CanvasSearch/CanvasSearch.js"></script>
2482
2483
2484	<!-- /canvasSearch -->
2485
2486
2487
2488	<!-- toolbarShopmb -->
2489	<div class="offcanvas offcanvas-start canvas-mb toolbar-shop-mobile" id="toolbarShopmb">
2490		<span class="icon-close icon-close-popup" data-bs-dismiss="offcanvas" aria-label="Close"></span>
2491		<div class="mb-canvas-content">
2492      <div class="mb-body">
2493        <ul class="nav-ul-mb" id="wrapper-menu-navigation">
2494          
2495          <li class="nav-mb-item">
2496            
2497            <a href="/products?category=8fd4f7fc-9428-c9de-c073-3a23db86a0c9" class="tf-category-link mb-menu-link">
2498              <div class="image">
2499                <img src="/images/nophoto/category-nophoto.png" alt="" />
2500              </div>
2501              <span>&#x627;&#x644;&#x623;&#x644;&#x639;&#x627;&#x628;</span>
2502            </a>
2503            
2504          </li>
2505          
2506        </ul>
2507      </div>
2508
2509
2510
2511      <div class="mb-bottom">
2512				<a href="/products" class="tf-btn fw-5 btn-line">
2513					&#x62A;&#x635;&#x641;&#x62D; &#x643;&#x644; &#x627;&#x644;&#x641;&#x626;&#x627;&#x62A; <i
2514						class="icon icon-arrow1-top-left"></i></a>
2515			</div>
2516		</div>
2517	</div>
2518
2519	<!-- /toolbarShopmb -->
2520
2521	<!-- modal login -->
2522	<div class="modal modalCentered fade form-sign-in modal-part-content" id="login">
2523	<div class="modal-dialog modal-dialog-centered">
2524		<div class="modal-content">
2525			<div class="image-login">
2526				<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" class="injected-svg" data-src="https://cdn.hugeicons.com/icons/user-sharing-bulk-rounded.svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="#000000">
2527					<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 10.9286C3.25 6.1356 7.16751 2.25012 12 2.25012C16.8325 2.25012 20.75 6.1356 20.75 10.9286C20.75 12.5077 20.3239 13.9911 19.5788 15.2685C19.3099 15.7295 18.7152 15.887 18.2504 15.6204C17.7857 15.3537 17.6268 14.7638 17.8957 14.3029C18.4742 13.311 18.8056 12.1596 18.8056 10.9286C18.8056 7.20071 15.7586 4.17867 12 4.17867C8.2414 4.17867 5.19444 7.20071 5.19444 10.9286C5.19444 12.1596 5.52583 13.311 6.10431 14.3029C6.37317 14.7638 6.21435 15.3537 5.74957 15.6204C5.28479 15.887 4.69005 15.7295 4.42119 15.2685C3.67612 13.9911 3.25 12.5077 3.25 10.9286Z" fill="#000000"></path>
2528					<path opacity="0.4" d="M10.4034 14.4399C7.44608 15.1571 5.25 17.8221 5.25 21C5.25 21.4142 5.58579 21.75 6 21.75H18C18.4142 21.75 18.75 21.4142 18.75 21C18.75 17.8221 16.5539 15.1571 13.5966 14.4399C15.1526 13.8088 16.25 12.2825 16.25 10.5C16.25 8.15279 14.3472 6.25 12 6.25C9.65279 6.25 7.75 8.15279 7.75 10.5C7.75 12.2825 8.84739 13.8088 10.4034 14.4399Z" fill="#000000"></path>
2529				</svg>
2530			</div>
2531			<div class="header">
2532				<div class="demo-title">&#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x627;&#x644;&#x62F;&#x62E;&#x648;&#x644;</div>
2533				<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
2534			</div>
2535			<div class="tf-login-form">
2536				<form id="loginForm"  @submit.prevent="login">
2537
2538					<div class="login-tabs-main">
2539						<div class="login-tabs d-flex gap-2 mb-2">
2540							
2541							<a type="button" class="login-tab-btn" :class="{'active': loginType === 'phone'}" @click="loginType = 'phone'; emailLogin = ''">
2542								&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;
2543							</a>
2544							
2545							
2546							<a type="button" class="login-tab-btn" :class="{'active': loginType === 'email'}" @click="loginType = 'email'; phoneNumber = ''">
2547								&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x627;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A;
2548							</a>
2549							
2550						</div>
2551					</div>
2552
2553					<div class="tf-field style-1" v-if="loginType === 'phone'">
2554						<div class="number-input">
2555							<label class="tf-field-label">&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644; * </label>
2556							<div class="position-relative">
2557								<input
2558									id="phoneNumber"
2559									name="phoneNumber"
2560									v-model="phoneNumber"
2561									class="tf-field-input tf-input"
2562									placeholder="&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;"
2563									type="tel"
2564									maxlength="9"
2565									pattern="^5[0-9]{8}$"
2566									@input="handlePhoneInput"
2567									@invalid="setPhoneValidation"
2568									@keyup="handlePhoneInput"
2569							/>
2570								<div class="number-tag">+966</div>
2571							</div>
2572						</div>
2573					</div>
2574
2575					<div class="tf-field style-1" v-else="">
2576						<label class="tf-field-label">&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x627;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A; *</label>
2577						<input
2578							id="emailAddress"
2579							name="emailAddress"
2580							v-model="emailLogin"
2581							class="tf-field-input tf-input"
2582							placeholder="&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x627;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A;"
2583							type="email"
2584							required=""
2585					/>
2586					</div>
2587
2588					<div class="bottom">
2589						<div class="w-100">
2590							<button type="submit"
2591								class="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center">
2592								<span>&#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x627;&#x644;&#x62F;&#x62E;&#x648;&#x644;</span>
2593							</button>
2594						</div>
2595					</div>
2596				</form>
2597			</div>
2598		</div>
2599	</div>
2600</div>
2601
2602<script type="text/javascript" src="/Views/Themes/furniture/V1/Components/Account/Login/Login.js"></script>
2602
2603<style>
2604	.login-tabs {
2605	border-bottom: 1px solid #d7d9de;
2606	padding-bottom: 10px;
2607	}
2608	.login-tab-btn {
2609	flex: 1;
2610	background: transparent;
2611	border: none;
2612	padding: 10px 0;
2613	font-weight: 600;
2614	color: #6c6f78;
2615	position: relative;
2616	}
2617	.login-tab-btn.active {
2618	color: #000;
2619	}
2620	.login-tab-btn.active::after {
2621	content: "";
2622	position: absolute;
2623	left: 10%;
2624	right: 10%;
2625	bottom: -11px;
2626	height: 3px;
2627	background: #000;
2628	border-radius: 999px;
2629	}
2630</style>
2631
2632
2633	<div class="modal modalCentered fade form-sign-in modal-part-content" id="verification">
2634	<div class="modal-dialog modal-dialog-centered">
2635		<div class="modal-content" id="verificationModalBody">
2636			<div class="header">
2637				<div class="demo-title"> &#x62A;&#x623;&#x643;&#x64A;&#x62F; &#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;</div>
2638				<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
2639			</div>
2640			<div class="tf-login-form">
2641				<div class="text-center">
2642					<h6  class="text-center">
2643					&#x631;&#x642;&#x645; &#x627;&#x644;&#x62A;&#x62D;&#x642;&#x642; &#x645;&#x637;&#x644;&#x648;&#x628; &#x644;&#x627;&#x643;&#x645;&#x627;&#x644; &#x627;&#x644;&#x639;&#x645;&#x644;&#x64A;&#x629; &#x644;&#x642;&#x62F; &#x62A;&#x645; &#x625;&#x631;&#x633;&#x627;&#x644; &#x631;&#x645;&#x632; &#x627;&#x644;&#x62A;&#x62D;&#x642;&#x642; &#x641;&#x649; &#x631;&#x633;&#x627;&#x644;&#x629; &#x625;&#x644;&#x64A;&#x643;&#x645;
2644					</h6>
2645					<h6 class="email-display"></h6>
2646					<h6 class="code-display"></h6>
2647				</div>
2648				<form id="verificationForm" >
2649					<input name="phoneNumber" type="hidden" value="508187872" />
2650					<input name="isNewUser" type="hidden" value="" />
2651					<input name="code" type="hidden" value="" />
2652					<input name="loginType" type="hidden" value="phone" />
2653					<input name="userNameOrEmailAddress" type="hidden" value="" />
2654					
2655					<div class="d-flex justify-content-center gap-2 mb-3" dir="ltr">
2656						
2657						<input type="text" class="code-input form-control text-center" maxlength="1" inputmode="numeric" pattern="[0-9]*" />
2658						
2659						<input type="text" class="code-input form-control text-center" maxlength="1" inputmode="numeric" pattern="[0-9]*" />
2660						
2661						<input type="text" class="code-input form-control text-center" maxlength="1" inputmode="numeric" pattern="[0-9]*" />
2662						
2663						<input type="text" class="code-input form-control text-center" maxlength="1" inputmode="numeric" pattern="[0-9]*" />
2664						
2665					</div>
2666					<!-- الحقل المخفي اللي هيجمع الكود -->
2667					<input type="hidden" id="_code" name="_code" value="" />
2668					<div class="bottom">
2669						<div class=" mb-2">
2670							<button type="submit" class="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center">
2671								<span>&#x627;&#x644;&#x62A;&#x62D;&#x642;&#x642;</span>
2672							</button>
2673						</div>
2674						<div class="d-flex justify-content-center align-items-center gap-1" >
2675							<span>	
2676								&#x644;&#x645; &#x64A;&#x62A;&#x645; &#x625;&#x631;&#x633;&#x627;&#x644; &#x627;&#x644;&#x643;&#x648;&#x62F;
2677							</span>
2678							<button type="button" id="resendBtn" class=" radius-3  justify-content-center button-style" disabled="">
2679								<span class="text-primary">
2680									&#x625;&#x639;&#x627;&#x62F;&#x629; &#x625;&#x631;&#x633;&#x627;&#x644; &#x627;&#x644;&#x643;&#x648;&#x62F;
2681								</span>
2682							</button>
2683						</div>
2684						<div class="w-100 text-center">
2685							<p>
2686								&#x64A;&#x645;&#x643;&#x646;&#x643; &#x625;&#x639;&#x627;&#x62F;&#x629; &#x627;&#x644;&#x625;&#x631;&#x633;&#x627;&#x644; &#x628;&#x639;&#x62F;
2687								<span id="countdown">60</span> 
2688								&#x62B;&#x648;&#x627;&#x646;&#x64A;
2689							</p>
2690						</div>
2691					</div>
2692				</form>
2693			</div>
2694		</div>
2695	</div>
2696</div>
2697
2698
2699
2700	<!-- /modal register -->
2701	<div class="modal modalCentered fade form-sign-in modal-part-content" id="register">
2702  <div class="modal-dialog modal-dialog-centered">
2703    <div class="modal-content">
2704      <div class="header">
2705        <div class="demo-title">&#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x62D;&#x633;&#x627;&#x628; &#x62C;&#x62F;&#x64A;&#x62F;</div>
2706        <span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
2707      </div>
2708      <div class="tf-login-form">
2709        <form id="registerForm" @submit.prevent="register">
2710          <input name="phoneNumber" id="phoneNumber" type="hidden" v-model="phoneNumber" value="508187872" />
2711
2712          <div class="tf-field style-1">
2713            <input name="firstName" id="firstName" v-model="firstName" class="tf-field-input tf-input" placeholder=" " type="text" required />
2714            <label class="tf-field-label">&#x627;&#x644;&#x627;&#x633;&#x645; &#x627;&#x644;&#x623;&#x648;&#x644;</label>
2715          </div>
2716
2717          <div class="tf-field style-1">
2718            <input name="lastName" id="lastName" v-model="lastName" class="tf-field-input tf-input" placeholder=" " type="text" required />
2719            <label class="tf-field-label">&#x627;&#x633;&#x645; &#x627;&#x644;&#x639;&#x627;&#x626;&#x644;&#x629;</label>
2720          </div>
2721
2722			<div class="tf-field style-1" v-if="loginType === 'phone'">
2723				<input id="emailAddress" name="emailAddress" v-model="emailAddress" class="tf-field-input tf-input" placeholder=" " type="email"  />
2724				<label class="tf-field-label">&#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F; &#x627;&#x644;&#x625;&#x644;&#x643;&#x62A;&#x631;&#x648;&#x646;&#x64A; </label>
2725			</div>
2726
2727			<div class="tf-field style-1" v-else="">
2728				<div class="number-input">
2729					<label class="tf-field-label">&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;</label>
2730					<div class="position-relative">
2731						<input
2732						  id="registerPhoneNumber"
2733						  name="phoneNumber"
2734						  v-model="phoneNumber"
2735						  class="tf-field-input tf-input"
2736						  placeholder="&#x631;&#x642;&#x645; &#x627;&#x644;&#x62C;&#x648;&#x627;&#x644;"
2737						  type="tel"
2738						  maxlength="9"
2739						  pattern="^5[0-9]{8}$"
2740						  @input="handlePhoneInput"
2741						  @invalid="setPhoneValidation"
2742						  @keyup="handlePhoneInput"
2743                />
2744						<div class="number-tag">+966</div>
2745					</div>
2746				</div>
2747			</div>
2748
2749
2750			<div class="bottom">
2751            <div class="w-100">
2752              <button type="submit" class="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center">
2753                <span>&#x62A;&#x633;&#x62C;&#x64A;&#x644;</span>
2754              </button>
2755            </div>
2756          </div>
2757        </form>
2758      </div>
2759    </div>
2760  </div>
2761</div>
2762
2763
2764	<!-- /modal register -->
2765
2766
2767	<!-- shoppingCart -->
2768	<div class="modal fullRight fade modal-shopping-cart" id="shoppingCart">
2769		<div class="modal-dialog">
2770			<div class="modal-content">
2771				<div class="header">
2772					<div class="title fw-5">   &#x633;&#x644;&#x629; &#x627;&#x644;&#x645;&#x634;&#x62A;&#x631;&#x64A;&#x627;&#x62A;</div>
2773					<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
2774				</div>
2775				<div class="wrap">
2776					<div class="tf-mini-cart-threshold" v-if="enableFreeShippingOnValue && freeShippingValue">
2777						<div class="tf-progress-bar">
2778							<span :style="{ width: freeShippingProgress + '%' }">
2779								<div class="progress-car">
2780									<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14"
2781										fill="currentColor">
2782										<path fill-rule="evenodd" clip-rule="evenodd"
2783											d="M0 0.875C0 0.391751 0.391751 0 0.875 0H13.5625C14.0457 0 14.4375 0.391751 14.4375 0.875V3.0625H17.3125C17.5867 3.0625 17.845 3.19101 18.0104 3.40969L20.8229 7.12844C20.9378 7.2804 21 7.46572 21 7.65625V11.375C21 11.8582 20.6082 12.25 20.125 12.25H17.7881C17.4278 13.2695 16.4554 14 15.3125 14C14.1696 14 13.1972 13.2695 12.8369 12.25H7.72563C7.36527 13.2695 6.39293 14 5.25 14C4.10706 14 3.13473 13.2695 2.77437 12.25H0.875C0.391751 12.25 0 11.8582 0 11.375V0.875ZM2.77437 10.5C3.13473 9.48047 4.10706 8.75 5.25 8.75C6.39293 8.75 7.36527 9.48046 7.72563 10.5H12.6875V1.75H1.75V10.5H2.77437ZM14.4375 8.89937V4.8125H16.8772L19.25 7.94987V10.5H17.7881C17.4278 9.48046 16.4554 8.75 15.3125 8.75C15.0057 8.75 14.7112 8.80264 14.4375 8.89937ZM5.25 10.5C4.76676 10.5 4.375 10.8918 4.375 11.375C4.375 11.8582 4.76676 12.25 5.25 12.25C5.73323 12.25 6.125 11.8582 6.125 11.375C6.125 10.8918 5.73323 10.5 5.25 10.5
2783ZM15.3125 10.5C14.8293 10.5 14.4375 10.8918 14.4375 11.375C14.4375 11.8582 14.8293 12.25 15.3125 12.25C15.7957 12.25 16.1875 11.8582 16.1875 11.375C16.1875 10.8918 15.7957 10.5 15.3125 10.5Z">
2784										</path>
2785									</svg>
2786								</div>
2787							</span>
2788						</div>
2789						<div class="tf-progress-msg">
2790							<span>
2791								<span v-text="freeShippingMessage"></span>
2792								<span v-if="freeShippingRemaining > 0" class=" " style="color: black;">
2793								    اشتري بقيمة	<span class="icon-saudi_riyal"></span>
2794									<span v-text="freeShippingRemaining"></span>
2795								</span>
2796								<span v-text="freeShippingEmoji"></span>
2797							</span>
2798						</div>
2799					</div>
2800					<div class="tf-mini-cart-wrap">
2801						<div class="tf-mini-cart-main">
2802							<div class="tf-mini-cart-sroll">
2803								<div class="tf-mini-cart-items">
2804                  
2805									<div class="tf-mini-cart-item" v-for="(item, index) in cart">
2806										<div class="tf-mini-cart-image">
2807											<a :href="'/ProductDetail?productId=' + item.productId">
2808												<img :src="getCartItemImageSrc(item, '/Views/Themes/furniture/V1/Assets/images/nophoto/1000x1000.png')" alt="" />
2809                        
2810											</a>
2811										</div>
2812										<div class="tf-mini-cart-info">
2813											<a class="title link" :href="'/ProductDetail?productId=' + item.productId" v-text="item.name"></a>
2814											<span class="badges-on-sale" v-if="item.isOfferGift || item.IsOfferGift">&#x645;&#x62C;&#x627;&#x646;&#x627;&#x64B;</span>
2815											<div class="meta-variant" v-text="item.optionNames"> </div>
2816											<span class="price d-flex gap-2 align-items-center flex-wrap">
2817												
2818<template v-if="item.isOfferGift || item.IsOfferGift">
2819	<span class="price-value">&#x645;&#x62C;&#x627;&#x646;&#x627;&#x64B;</span>
2820</template>
2821<template v-else>
2822	<span class="cart-money">
2823		<span class="before-price text-gray-400 line-through" v-if="cartItemCompareAt(item) > Number(item.discountPrice)" v-text="formatCartMoney(cartItemCompareAt(item))"></span>
2824		<span class="price-value" v-text="formatCartMoney(item.discountPrice)"></span>
2825		<span class="icon-saudi_riyal"></span>
2826	</span>
2827</template>
2828
2829
2830											</span>
2831											<div class="tf-mini-cart-btns">
2832												<div class="wg-quantity small">
2833													<span class="btn-quantity minus-btn" v-if="!item.isOfferGift" @click="decreaseQuantity(item)"><i class="fi fi-rr-minus-small"></i></span>
2834													<input type="number" name="number" :value="item.quantity" disabled="true"/>
2835													<span class="btn-quantity plus-btn" v-if="!item.isOfferGift" @click="increaseQuantity(item)"><i class="fi fi-rr-plus-small"></i></span>
2836												</div>
2837												<div class="tf-mini-cart-remove" v-if="!item.isOfferGift" @click="removeFromCart(item)">&#x645;&#x633;&#x62D;</div>
2838											</div>
2839										</div>
2840									</div>
2841                 
2842                  
2843                  
2844								</div>
2845							</div>
2846						</div>
2847						<div class="tf-mini-cart-bottom">
2848							<div class="tf-mini-cart-tool" v-if="false">
2849								<div class="tf-mini-cart-tool-btn btn-add-note">
2850									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18"
2851										fill="currentColor">
2852										<path
2853											d="M5.12187 16.4582H2.78952C2.02045 16.4582 1.39476 15.8325 1.39476 15.0634V2.78952C1.39476 2.02045 2.02045 1.39476 2.78952 1.39476H11.3634C12.1325 1.39476 12.7582 2.02045 12.7582 2.78952V7.07841C12.7582 7.46357 13.0704 7.77579 13.4556 7.77579C13.8407 7.77579 14.1529 7.46357 14.1529 7.07841V2.78952C14.1529 1.25138 12.9016 0 11.3634 0H2.78952C1.25138 0 0 1.25138 0 2.78952V15.0634C0 16.6015 1.25138 17.8529 2.78952 17.8529H5.12187C5.50703 17.8529 5.81925 17.5407 5.81925 17.1555C5.81925 16.7704 5.50703 16.4582 5.12187 16.4582Z">
2854										</path>
2855										<path
2856											d="M15.3882 10.0971C14.5724 9.28136 13.2452 9.28132 12.43 10.0965L8.60127 13.9168C8.51997 13.9979 8.45997 14.0979 8.42658 14.2078L7.59276 16.9528C7.55646 17.0723 7.55292 17.1993 7.58249 17.3207C7.61206 17.442 7.67367 17.5531 7.76087 17.6425C7.84807 17.7319 7.95768 17.7962 8.07823 17.8288C8.19879 17.8613 8.32587 17.8609 8.44621 17.8276L11.261 17.0479C11.3769 17.0158 11.4824 16.9543 11.5675 16.8694L15.3882 13.0559C16.2039 12.2401 16.2039 10.9129 15.3882 10.0971ZM10.712 15.7527L9.29586 16.145L9.71028 14.7806L12.2937 12.2029L13.2801 13.1893L10.712 15.7527ZM14.4025 12.0692L14.2673 12.204L13.2811 11.2178L13.4157 11.0834C13.6876 10.8115 14.1301 10.8115 14.402 11.0834C14.6739 11.3553 
285614.6739 11.7977 14.4025 12.0692Z">
2857										</path>
2858									</svg>
2859								</div>
2860								<div class="tf-mini-cart-tool-btn btn-add-gift">
2861									<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18"
2862										fill="currentColor">
2863										<path fill-rule="evenodd" clip-rule="evenodd"
2864											d="M2.99566 2.73409C2.99566 0.55401 5.42538 -0.746668 7.23916 0.463462L8.50073 1.30516L9.7623 0.463462C11.5761 -0.746668 14.0058 0.55401 14.0058 2.73409V3.24744H14.8225C15.9633 3.24744 16.8881 4.17233 16.8881 5.31312V6.82566C16.8881 7.21396 16.5734 7.52873 16.1851 7.52873H15.8905V15.1877C15.8905 15.1905 15.8905 15.1933 15.8905 15.196C15.886 16.7454 14.6286 18 13.0782 18H3.92323C2.37003 18 1.11091 16.7409 1.11091 15.1877V7.52877H0.81636C0.42806 7.52877 0.113281 7.21399 0.113281 6.82569V5.31316C0.113281 4.17228 1.03812 3.24744 2.179 3.24744H2.99566V2.73409ZM4.40181 3.24744H7.79765V2.52647L6.45874 1.63317C5.57987 1.0468 4.40181 1.67677 4.40181 2.73409V3.24744ZM9.20381 2.52647V3.24744H12.5996V2.73409C12.5996 1.67677 11.4216 1.0468 10.5427 1.63317L9.20381 2.52647ZM2.179 4.6536C1.81472 4.6536 1.51944 4.94888 1.51944 5.31316V6.12261H5.73398L5.734 4.6536H2.179ZM5.73401 7.52877V13.9306C5.73401 14.1806 5.86682 14.4119 6.08281 14.5379C6.29879 14.6639 6.56545 14.6657 6.78312 14.5426L8.50073 13.5715L10.2183 14.5426C10.436 14.6657 10.7027 14.6639 10.9187 14.5379C11.1346 14.4119 11.2674 14.1806 11.2674 13.9306V7.52873H14.4844V15.1603C14.4844 15.1627 14.4843 15.1651 14.4843 15.1675V15.1877C14.4843 15.9643 13.8548 16.5938 13.0782 16.5938H3.92323C3.14663 16.5938 2.51707 15.9643 2.51707 15.1877V7.52877H5.73401ZM15.482 6.12258V5.31312C15.482 4.94891 15.1867 4.6536 14.8225 4.6536H11.2674V6.12258H15.482ZM9.86129 4.6536H7.14017V12.7254L8.15469 12.1518C8.36941 12.0304 8.63204 12.0304 8.84676 12.1518L9.86129 12.7254V4.6536Z">
2865										</path>
2866									</svg>
2867								</div>
2868								<div class="tf-mini-cart-tool-btn btn-estimate-shipping">
2869									<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18" viewBox="0 0 26 18"
2870										fill="currentColor">
2871										<path fill-rule="evenodd" clip-rule="evenodd"
2872											d="M0 0.811989C0 0.36354 0.36354 0 0.811989 0H15.4278C15.8763 0 16.2398 0.36354 16.2398 0.811989V3.10596H21.0144C23.6241 3.10596 25.8643 5.05894 25.8643 7.61523V14.6414C25.8643 15.0899 25.5007 15.4534 25.0523 15.4534H23.545C23.2139 16.9115 21.9098 18 20.3514 18C18.7931 18 17.4889 16.9115 17.1578 15.4534H8.69534C8.36423 16.9115 7.0601 18 5.50175 18C3.9434 18 2.63927 16.9115 2.30815 15.4534H0.811989C0.36354 15.4534 0 15.0899 0 14.6414V0.811989ZM2.35089 13.8294C2.74052 12.4562 4.00366 11.4503 5.50175 11.4503C6.99983 11.4503 8.26298 12.4562 8.6526 13.8294H14.6158V1.62398H1.62398V13.8294H2.35089ZM16.2398 4.72994V7.95749H24.2403V7.61523C24.2403 6.08759 22.8649 4.72994 21.0144 4.72994H16.2398ZM24.2403 9.58147H16.2398V13.8294H17.2006C17.5902 12.4562 18.8533 11.4503 20.3514 11.4503C21.8495 11.4503 23.1126 12.4562 23.5023 13.8294H24.2403V9.58147ZM5.50175 13.0743C4.58999 13.0743 3.85087 13.8134 3.85087 14.7251C3.85087 15.6369 4.58999 16.376 5.50175 16.376C6.41351 16.376 7.15263 15.6369 7.15263 14.7251C7.15263 13.8134 6.41351 13.0743 5.50175 13.0743ZM20.3514 13.0743C19.4397 13.0743 18.7005 13.8134 18.7005 14.7251C18.7005 15.6369 19.4397 16.376 20.3514 16.376C21.2632 16.376 22.0023 15.6369 22.0023 14.7251C22.0023 13.8134 21.2632 13.0743 20.3514 13.0743Z">
2873										</path>
2874									</svg>
2875								</div>
2876							</div>
2877							<div class="tf-mini-cart-bottom-wrap">
2878								<div class="tf-cart-totals-discounts">
2879									<div class="tf-cart-total">&#x627;&#x644;&#x645;&#x62C;&#x645;&#x648;&#x639; &#x627;&#x644;&#x641;&#x631;&#x639;&#x64A;</div>
2880									<span class="price ">
2881                    <div class="totalCartPrice" v-text="formatCartMoney(checkout.priceBeforeVat)"></div>
2882										<span class="icon-saudi_riyal"></span>
2883									</span>
2884								</div>
2885								<div class="tf-cart-tax" v-if="false">
2886									&#x64A;&#x62A;&#x645; &#x627;&#x62D;&#x62A;&#x633;&#x627;&#x628; &#x627;&#x644;&#x636;&#x631;&#x627;&#x626;&#x628; &#x648;<a href="#">&#x627;&#x644;&#x634;&#x62D;&#x646;</a>  &#x639;&#x646;&#x62F; &#x625;&#x646;&#x647;&#x627;&#x621; &#x627;&#x644;&#x637;&#x644;&#x628;
2887								</div>
2888								<div class="tf-mini-cart-line"></div>
2889								<!--<div class="tf-cart-checkbox">
2890									<div class="tf-checkbox-wrapp">
2891										<input class="" type="checkbox" id="CartDrawer-Form_agree" name="agree_checkbox" v-model="acceptTermsInShoppingCart"/>
2892										<div>
2893											<i class="icon-check"></i>
2894										</div>
2895									</div>
2896									<label for="CartDrawer-Form_agree">
2897										أوافق على <a href="/page/&#x627;&#x644;&#x634;&#x631;&#x648;&#x637; &#x648;&#x627;&#x644;&#x623;&#x62D;&#x643;&#x627;&#x645;" title="Terms of Service" target="_blank">الشروط والأحكام</a>
2898									</label>
2899								</div>-->
2900								<div class="tf-mini-cart-view-checkout" v-show="checkout.priceBeforeVat > 0">
2901									<a href="javascript:void(0);" @click=" checkout.priceBeforeVat > 0 && goPageFromShoppingCart('cart')"
2902									   :class="['tf-btn btn-outline radius-3 link w-100 justify-content-center',{ disabled: checkout.priceBeforeVat <= 0 }]"
2903										   :tabindex="totalPrice > 0 ? 0 : -1">
2904										   &#x639;&#x631;&#x636; &#x627;&#x644;&#x633;&#x644;&#x629;
2905									   </a>
2906									<a href="javascript:void(0);" @click="checkout.priceBeforeVat > 0 && goPageFromShoppingCart('checkout')"
2907									   :class="['tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center',{ disabled: checkout.priceBeforeVat <= 0 }]"
2908									   :tabindex="totalPrice > 0 ? 0 : -1">
2909										   <span> &#x625;&#x62A;&#x645;&#x627;&#x645; &#x627;&#x644;&#x634;&#x631;&#x627;&#x621;</span>
2910									</a>
2911								</div>
2912
2913							</div>
2914						</div>
2915						<!--<div class="tf-mini-cart-tool-openable add-note">
2916							<div class="overplay tf-mini-cart-tool-close"></div>
2917							<div class="tf-mini-cart-tool-content">
2918								<label for="Cart-note" class="tf-mini-cart-tool-text">
2919									<div class="icon">
2920										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18"
2921											viewBox="0 0 16 18" fill="currentColor">
2922											<path
2923												d="M5.12187 16.4582H2.78952C2.02045 16.4582 1.39476 15.8325 1.39476 15.0634V2.78952C1.39476 2.02045 2.02045 1.39476 2.78952 1.39476H11.3634C12.1325 1.39476 12.7582 2.02045 12.7582 2.78952V7.07841C12.7582 7.46357 13.0704 7.77579 13.4556 7.77579C13.8407 7.77579 14.1529 7.46357 14.1529 7.07841V2.78952C14.1529 1.25138 12.9016 0 11.3634 0H2.78952C1.25138 0 0 1.25138 0 2.78952V15.0634C0 16.6015 1.25138 17.8529 2.78952 17.8529H5.12187C5.50703 17.8529 5.81925 17.5407 5.81925 17.1555C5.81925 16.7704 5.50703 16.4582 5.12187 16.4582Z">
2924											</path>
2925											<path
2926												d="M15.3882 10.0971C14.5724 9.28136 13.2452 9.28132 12.43 10.0965L8.60127 13.9168C8.51997 13.9979 8.45997 14.0979 8.42658 14.2078L7.59276 16.9528C7.55646 17.0723 7.55292 17.1993 7.58249 17.3207C7.61206 17.442 7.67367 17.5531 7.76087 17.6425C7.84807 17.7319 7.95768 17.7962 8.07823 17.8288C8.19879 17.8613 8.32587 17.8609 8.44621 17.8276L11.261 17.0479C11.3769 17.0158 11.4824 16.9543 11.5675 16.8694L15.3882 13.0559C16.2039 12.2401 16.2039 10.9129 15.3882 10.0971ZM10.712 15.7527L9.29586 16.145L9.71028 14.7806L12.2937 12.2029L13.2801 13.1893L10.712 15.7527ZM14.4025 12.0692L14.2673 12.204L13.2811 11.2178L13.4157 11.0834C13.6876 10.8115 14.1301 10.8115 14.402 11.0834C14.6739 11.3553 14.6739 11.7977 14.4025 12.0692Z">
2927											</path>
2928										</svg>
2929									</div>
2930									<span> &#x623;&#x636;&#x641; &#x645;&#x644;&#x627;&#x62D;&#x638;&#x629; &#x644;&#x644;&#x637;&#x644;&#x628;</span>
2931
2932								</label>
2933								<textarea name="note" id="Cart-note"
2934									placeholder="&#x64A;&#x631;&#x62C;&#x649; &#x643;&#x62A;&#x627;&#x628;&#x629; &#x623;&#x64A; &#x645;&#x644;&#x627;&#x62D;&#x638;&#x627;&#x62A; &#x62A;&#x631;&#x63A;&#x628; &#x628;&#x647;&#x627; &#x628;&#x62E;&#x635;&#x648;&#x635; &#x637;&#x644;&#x628;&#x643;"></textarea>
2935								<div class="tf-cart-tool-btns justify-content-center">
2936									<div
2937										class="tf-mini-cart-tool-primary text-center w-100 fw-6 tf-mini-cart-tool-close">
2938										&#x625;&#x63A;&#x644;&#x627;&#x642;
2939									</div>
2940								</div>
2941							</div>
2942						</div>
2943						<div class="tf-mini-cart-tool-openable add-gift">
2944							<div class="overplay tf-mini-cart-tool-close"></div>
2945							<form class="tf-product-form-addgift">
2946								<div class="tf-mini-cart-tool-content">
2947									<div class="tf-mini-cart-tool-text">
2948										<div class="icon">
2949											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
2950												viewBox="0 0 24 24" fill="currentColor">
2951												<path fill-rule="evenodd" clip-rule="evenodd"
2952													d="M4.65957 3.64545C4.65957 0.73868 7.89921 -0.995558 10.3176 0.617949L11.9997 1.74021L13.6818 0.617949C16.1001 -0.995558 19.3398 0.73868 19.3398 3.64545V4.32992H20.4286C21.9498 4.32992 23.1829 5.56311 23.1829 7.08416V9.10087C23.1829 9.61861 22.7632 10.0383 22.2454 10.0383H21.8528V20.2502C21.8528 20.254 21.8527 20.2577 21.8527 20.2614C21.8467 22.3272 20.1702 24 18.103 24H5.89634C3.82541 24 2.14658 22.3212 2.14658 20.2502V10.0384H1.75384C1.23611 10.0384 0.816406 9.61865 0.816406 9.10092V7.08421C0.816406 5.56304 2.04953 4.32992 3.57069 4.32992H4.65957V3.64545ZM6.53445 4.32992H11.0622V3.36863L9.27702 2.17757C8.10519 1.39573 6.53445 2.2357 6.53445 3.64545V4.32992ZM12.9371 3.36863V4.32992H17.4649V3.64545C17.4649 2.2357 15.8942 1.39573 14.7223 2.17756L12.9371 3.36863ZM3.57069 6.2048C3.08499 6.2048 2.69128 6.59851 2.69128 7.08421V8.16348H8.31067L8.3107 6.2048H3.57069ZM8.31071 10.0384V18.5741C8.31071 18.9075 8.48779 19.2158 8.77577 19.3838C9.06376 19.5518 9.4193 19.5542 9.70953 19.3901L11.9997 18.0953L14.2898 19.3901C14.58 19.5542 14.9356 19.5518 15.2236 19.3838C15.5115 19.2158 15.6886 18.9075 15.6886 18.5741V10.0383H19.9779V20.2137C19.9778 20.2169 19.9778 20.2201 19.9778 20.2233V20.2502C19.9778 21.2857 19.1384 22.1251 18.103 22.1251H5.89634C4.86088 22.1251 4.02146 21.2857 4.02146 20.2502V10.0384H8.31071ZM21.308 8.16344V7.08416C21.308 6.59854 20.9143 6.2048 20.4286 6.2048H15.6886V8.16344H21.308ZM13.8138 6.2048H10.1856V16.9672L11.5383 16.2024C11.8246 16.0405 12.1748 16.0405 12.461 16.2024L13.8138 16.9672V6.2048Z">
2953												</path>
2954											</svg>
2955										</div>
2956										<div class="tf-gift-wrap-infos">
2957											<p>&#x647;&#x644; &#x62A;&#x631;&#x63A;&#x628; &#x641;&#x64A; &#x62A;&#x63A;&#x644;&#x64A;&#x641; &#x643;&#x647;&#x62F;&#x64A;&#x629;&#x61F;</p>
2958											&#x641;&#x642;&#x637;
2959											<span class="price fw-6">5.00$</span>
2960										</div>
2961
2962									</div>
2963									<div class="tf-cart-tool-btns">
2964										<button type="submit"
2965											class="tf-btn fw-6 w-100 justify-content-center btn-fill animate-hover-btn radius-3">
2966											<span>&#x623;&#x636;&#x641; &#x62A;&#x63A;&#x644;&#x64A;&#x641; &#x643;&#x647;&#x62F;&#x64A;&#x629;</span>
2967										</button>
2968										<div
2969											class="tf-mini-cart-tool-primary text-center w-100 fw-6 tf-mini-cart-tool-close">
2970											&#x625;&#x644;&#x63A;&#x627;&#x621;
2971										</div>
2972									</div>
2973
2974								</div>
2975							</form>
2976						</div>
2977						<div class="tf-mini-cart-tool-openable estimate-shipping">
2978							<div class="overplay tf-mini-cart-tool-close"></div>
2979							<div class="tf-mini-cart-tool-content">
2980								<div class="tf-mini-cart-tool-text">
2981									<div class="icon">
2982										<svg xmlns="http://www.w3.org/2000/svg" width="21" height="15"
2983											viewBox="0 0 21 15" fill="currentColor">
2984											<path fill-rule="evenodd" clip-rule="evenodd"
2985												d="M0.441406 1.13155C0.441406 0.782753 0.724159 0.5 1.07295 0.5H12.4408C12.7896 0.5 13.0724 0.782753 13.0724 1.13155V2.91575H16.7859C18.8157 2.91575 20.5581 4.43473 20.5581 6.42296V11.8878C20.5581 12.2366 20.2753 12.5193 19.9265 12.5193H18.7542C18.4967 13.6534 17.4823 14.5 16.2703 14.5C15.0582 14.5 14.0439 13.6534 13.7864 12.5193H7.20445C6.94692 13.6534 5.93259 14.5 4.72054 14.5C3.50849 14.5 2.49417 13.6534 2.23664 12.5193H1.07295C0.724159 12.5193 0.441406 12.2366 0.441406 11.8878V1.13155ZM2.26988 11.2562C2.57292 10.1881 3.55537 9.40578 4.72054 9.40578C5.88572 9.40578 6.86817 10.1881 7.17121 11.2562H11.8093V1.76309H1.7045V11.2562H2.26988ZM13.0724 4.17884V6.68916H19.295V6.42296C19.295 5.2348 18.2252 4.17884 16.7859 4.17884H13.0724ZM19.295 7.95226H13.0724V11.2562H13.8196C14.1227 10.1881 15.1051 9.40578 16.2703 9.40578C17.4355 9.40578 18.4179 10.1881 18.7209 11.2562H19.295V7.95226ZM4.72054 10.6689C4.0114 10.6689 3.43652 11.2437 3.43652 11.9529C3.43652 12.662 4.0114 13.2369 4.72054 13.2369C5.42969 13.2369 6.00456 12.662 6.00456 11.9529C6.00456 11.2437 5.42969 10.6689 4.72054 10.6689ZM16.2703 10.6689C15.5611 10.6689 14.9863 11.2437 14.9863 11.9529C14.9863 12.662 15.5611 13.2369 16.2703 13.2369C16.9794 13.2369 17.5543 12.662 17.5543 11.9529C17.5543 11.2437 16.9794 10.6689 16.2703 10.6689Z">
2986											</path>
2987										</svg>
2988									</div>
2989									<span class="fw-6">&#x62A;&#x642;&#x62F;&#x64A;&#x631; &#x62A;&#x643;&#x644;&#x641;&#x629; &#x627;&#x644;&#x634;&#x62D;&#x646;
2989</span>
2990								</div>
2991								<div class="field">
2992									<p>&#x627;&#x644;&#x62F;&#x648;&#x644;&#x629;</p>
2993									<select class="tf-select w-100" id="ShippingCountry_CartDrawer-Form"
2994										name="address[country]" data-default="">
2995										<option value="---" data-provinces="[]">---</option>
2996
2997									</select>
2998								</div>
2999								<div class="field">
3000									<p>&#x627;&#x644;&#x631;&#x645;&#x632; &#x627;&#x644;&#x628;&#x631;&#x64A;&#x62F;&#x64A;</p>
3001									<input type="text" name="text" placeholder="" />
3002								</div>
3003								<div class="tf-cart-tool-btns">
3004									<a href="#"
3005										class="tf-btn fw-6 justify-content-center btn-fill w-100 animate-hover-btn radius-3">
3006										<span>&#x627;&#x62D;&#x633;&#x628;</span>
3007									</a>
3008									<div
3009										class="tf-mini-cart-tool-primary text-center fw-6 w-100 tf-mini-cart-tool-close">
3010										&#x625;&#x644;&#x63A;&#x627;&#x621;
3011									</div>
3012								</div>
3013
3014							</div>
3015						</div>-->
3016					</div>
3017			
3018        
3019          
3020          
3021          
3022        </div>
3023			</div>
3024		</div>
3025	</div>
3026
3027	<!-- /shoppingCart -->
3028
3029	<!--Quick add-->
3030	<div class="modal fade modalDemo" id="quick_add">
3031		<div class="modal-dialog modal-dialog-centered">
3032			<div class="modal-content">
3033				<div class="header">
3034					<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
3035				</div>
3036				<div class="wrap">
3037
3038					<!-- معلومات المنتج -->
3039					<div class="tf-product-info-item">
3040						<div class="image">
3041							<img :src="getSelectedProductImageSrc('/Views/Themes/furniture/V1/Assets/images/nophoto/1000x1000.png')" alt="image-product" />
3042						</div>
3043						<div class="content">
3044							<a href="" v-text="product.Name"></a>
3045							<div class="tf-product-info-price">
3046								<div class="price" v-text="totalPriceProduct"></div><span
3047									class="icon-saudi_riyal"></span>
3048							</div>
3049						</div>
3050					</div>
3051						<div class="tf-product-info-variant-picker">
3052  <!-- عرض كقائمة منسدلة -->
3053  <template v-if="enableProductOptionsAsDropdown">
3054    <div class="variant-picker-item variant-dropdown" v-for="(optionHeader, headerIndex) in optionHeaders" :key="optionHeader.id">
3055      <div class="variant-picker-label">
3056        <label :for="`dropdown-${optionHeader.id}-1`" v-text="optionHeader.name + ': '"></label>
3057      </div>
3058      <select
3059        :id="`dropdown-${optionHeader.id}-1`"
3060        class="variant-picker-select form-select"
3061        :value="getSelectedValueForHeader(optionHeader.id)?.id"
3062        @change="onOptionDropdownChange(optionHeader, $event)"
3063      >
3064        <option value="" disabled>اختر</option>
3065        <option v-for="detail in optionHeader.productOptionDetails" :key="detail.id" :value="detail.id" v-text="detail.name"></option>
3066      </select>
3067    </div>
3068  </template>
3069
3070  <!-- العرض العادي (أزرار/راديو) -->
3071  <template v-else>
3072    <!-- اختيار اللون -->
3073    <div class="variant-picker-item variant-color" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 2)" :key="optionHeader.id">
3074      <div class="variant-picker-label">
3075        <span v-text="optionHeader.name + ': '"></span>
3076        <span class="fw-6 variant-picker-label-value" v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3077      </div>
3078      <div class="variant-picker-values" >
3079        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3080          <input
3081            type="radio"
3082            :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3083            :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3084            :value="detail.id"
3085            :checked="isSelected(detail.id, optionHeader.id)"
3086            @click="selectColor(detail, optionHeader)"
3087                                         />
3088          <label
3089            class="hover-tooltip radius-60"
3090            :for="`value-${detail.id}-${headerIndex}-${index}-1`"
3091            :data-value="detail.id">
3092            <span class="btn-checkbox" :style="{ backgroundColor: detail.value }"></span>
3093            <span class="tooltip" v-text="detail.name"></span>
3094          </label>
3095        </div>
3096      </div>
3097    </div>
3098
3099    <!-- اختيار المقاس -->
3100    <div class="variant-picker-item variant-size" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 1)" :key="optionHeader.id" >
3101      <div class="d-flex justify-content-between align-items-center">
3102        <div class="variant-picker-label">
3103          <span v-text="optionHeader.name + ': '"></span>
3104          <span class="fw-6 variant-picker-label-value"
3105                v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3106        </div>
3107      </div>
3108      <div class="variant-picker-values">
3109        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3110          <input type="radio"
3111                 :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3112                 :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3113                 :value="detail.id"
3114                 :checked="isSelected(detail.id, optionHeader.id)"
3115                 @click="selectValue(detail, optionHeader)" />
3116          <label class="style-text" :for="`value-${detail.id}-${headerIndex}-${index}-1`">
3117            <p v-text="detail.name"></p>
3118          </label>
3119        </div>
3120      </div>
3121    </div>
3122
3123    <!-- اختيار صورة -->
3124    <div class="variant-picker-item variant-image" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 3)" :key="optionHeader.id" >
3125      <div class="d-flex justify-content-between align-items-center">
3126        <div class="variant-picker-label">
3127          <span v-text="optionHeader.name + ': '"></span>
3128          <span class="fw-6 variant-picker-label-value"
3129                v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3130        </div>
3131      </div>
3132      <div class="variant-picker-values">
3133        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3134          <input type="radio"
3135                 :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3136                 :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3137                 :value="detail.id"
3138                 :checked="isSelected(detail.id, optionHeader.id)"
3139                 @click="selectValue(detail, optionHeader)" />
3140          <label class="style-text" :for="`value-${detail.id}-${headerIndex}-${index}-1`" style="width: 78px;height: 60px;">
3141            <img :src="'/' + detail.fullFilePath" :data-src="'/' + detail.fullFilePath" alt="صور المنتج للإختيار" style="width: 50px;"/>
3142            <p v-text="detail.name"></p>
3143          </label>
3144        </div>
3145      </div>
3146    </div>
3147  </template>
3148</div>
3149
3150					<!-- الكمية -->
3151					<div class="tf-product-info-quantity mb_15">
3152						<div class="quantity-title fw-6">&#x627;&#x644;&#x643;&#x645;&#x64A;&#x629;</div>
3153						<div class="wg-quantity">
3154							<span class="btn-quantity minus-btn" @click="decreaseQuantity"><i
3155									class="fi fi-rr-minus-small"></i></span>
3156							<input type="number" name="number" value="1" disabled v-model="quantity"
3157								@change="changeQuantity()" />
3158							<span class="btn-quantity plus-btn" @click="increaseQuantity"><i
3159									class="fi fi-rr-plus-small"></i></span>
3160						</div>
3161					</div>
3162
3163					<!-- زر الإضافة للسلة -->
3164					<div class="tf-product-info-buy-button">
3165						<form>
3166							<a href="javascript:void(0);" @click="addToCart()"
3167								class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart">
3168								<span>&#x623;&#x636;&#x641; &#x644;&#x644;&#x633;&#x644;&#x629; &nbsp;</span>
3169								<span class="space-between" style="padding: 5px;"></span>
3170								<span class="tf-qty-price totalProductPrice" v-text="totalPriceProduct"></span> <span
3171									class="icon-saudi_riyal"></span>
3172							</a>
3173
3174							<!-- المفضلة -->
3175							<div class="tf-product-btn-wishlist btn-icon-action">
3176								<i class="icon-heart"></i>
3177								<i class="icon-delete"></i>
3178							</div>
3179
3180
3181						</form>
3182					</div>
3183
3184				</div>
3185			</div>
3186		</div>
3187	</div>
3188	<!--Quick add-->
3189
3190
3191	<div class="modal fade modalDemo" id="quick_view">
3192		<div class="modal-dialog modal-dialog-centered">
3193			<div class="modal-content">
3194				<div class="header">
3195					<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
3196				</div>
3197				<div class="row">
3198
3199					<!-- صور المنتج -->
3200					<div class="tf-product-media-wrap col-md-6">
3201						<div dir="ltr" class="swiper tf-single-slide">
3202							<div class="swiper-wrapper">
3203								<div class="swiper-slide" v-for="item in productPictures"
3204									:data-option-detail-id="item.productOptionDetailId"
3205									:data-filename="item.fileName"
3206									v-show="productPictures.length">
3207									<div class="item">
3208										<!-- Check if media is an image or video -->
3209										<template v-if="item.mediaType === 1">
3210											<!-- Render image -->
3211											<img :src="item.fullFilePath.startsWith('/') ? item.fullFilePath : '/' + item.fullFilePath"
3212												alt="" />
3213										</template>
3214
3215										<template v-if="item.mediaType === 2">
3216											<!-- Render video -->
3217											<div class="item video-wrapper">
3218												
3219												<iframe width="560" height="315"
3220													src="https://www.youtube.com/embed/" frameborder="0"
3221													allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
3222													allowfullscreen="">
3223												</iframe>
3224											</div>
3225										</template>
3226									</div>
3227								</div>
3228								<div class="swiper-slide" v-show="!productPictures.length">
3229									<div class="item">
3230
3231										<img src="/Views/Themes/furniture/V1/Assets/images/nophoto/1000x1000.png"
3232											alt="" />
3233									</div>
3234								</div>
3235							</div>
3236							<div class="swiper-button-next button-style-arrow single-slide-prev"></div>
3237							<div class="swiper-button-prev button-style-arrow single-slide-next"></div>
3238						</div>
3239					</div>
3240
3241					<!-- معلومات المنتج -->
3242					<div class="tf-product-info-wrap position-relative col-md-6">
3243						<div class="tf-product-info-list">
3244							<div class="tf-product-info-title">
3245								<h5><a class="link" :href="ProductDetailUrl" v-text="product.Name"></a></h5>
3246							</div>
3247
3248							<div class="tf-product-info-badges">
3249								&#x627;&#x644;&#x623;&#x643;&#x62B;&#x631; &#x645;&#x628;&#x64A;&#x639;&#x627;&#x64B;
3250								<div class="product-status-content">
3251									<i class="icon-lightning"></i>
3252									<p class="fw-6">&#x627;&#x644;&#x637;&#x644;&#x628; &#x645;&#x631;&#x62A;&#x641;&#x639;! &#x634;&#x62E;&#x635;&#x64B;&#x627; &#x623;&#x636;&#x627;&#x641;&#x648;&#x647; &#x625;&#x644;&#x649; &#x633;&#x644;&#x62A;&#x647;&#x645;.</p>
3253								</div>
3254							</div>
3255
3256							<div class="tf-product-info-price">
3257								<div class="price" v-text="totalPriceProduct"></div> <span
3258									class="icon-saudi_riyal"></span>
3259							</div>
3260
3261							<!--<div class="tf-product-description">
3262								<p v-html="product.Desc">
3263								</p>
3264							</div>-->
3265
3266							<div class="tf-product-info-variant-picker">
3267  <!-- عرض كقائمة منسدلة -->
3268  <template v-if="enableProductOptionsAsDropdown">
3269    <div class="variant-picker-item variant-dropdown" v-for="(optionHeader, headerIndex) in optionHeaders" :key="optionHeader.id">
3270      <div class="variant-picker-label">
3271        <label :for="`dropdown-${optionHeader.id}-1`" v-text="optionHeader.name + ': '"></label>
3272      </div>
3273      <select
3274        :id="`dropdown-${optionHeader.id}-1`"
3275        class="variant-picker-select form-select"
3276        :value="getSelectedValueForHeader(optionHeader.id)?.id"
3277        @change="onOptionDropdownChange(optionHeader, $event)"
3278      >
3279        <option value="" disabled>اختر</option>
3280        <option v-for="detail in optionHeader.productOptionDetail
3280s" :key="detail.id" :value="detail.id" v-text="detail.name"></option>
3281      </select>
3282    </div>
3283  </template>
3284
3285  <!-- العرض العادي (أزرار/راديو) -->
3286  <template v-else>
3287    <!-- اختيار اللون -->
3288    <div class="variant-picker-item variant-color" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 2)" :key="optionHeader.id">
3289      <div class="variant-picker-label">
3290        <span v-text="optionHeader.name + ': '"></span>
3291        <span class="fw-6 variant-picker-label-value" v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3292      </div>
3293      <div class="variant-picker-values" >
3294        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3295          <input
3296            type="radio"
3297            :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3298            :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3299            :value="detail.id"
3300            :checked="isSelected(detail.id, optionHeader.id)"
3301            @click="selectColor(detail, optionHeader)"
3302                                         />
3303          <label
3304            class="hover-tooltip radius-60"
3305            :for="`value-${detail.id}-${headerIndex}-${index}-1`"
3306            :data-value="detail.id">
3307            <span class="btn-checkbox" :style="{ backgroundColor: detail.value }"></span>
3308            <span class="tooltip" v-text="detail.name"></span>
3309          </label>
3310        </div>
3311      </div>
3312    </div>
3313
3314    <!-- اختيار المقاس -->
3315    <div class="variant-picker-item variant-size" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 1)" :key="optionHeader.id" >
3316      <div class="d-flex justify-content-between align-items-center">
3317        <div class="variant-picker-label">
3318          <span v-text="optionHeader.name + ': '"></span>
3319          <span class="fw-6 variant-picker-label-value"
3320                v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3321        </div>
3322      </div>
3323      <div class="variant-picker-values">
3324        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3325          <input type="radio"
3326                 :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3327                 :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3328                 :value="detail.id"
3329                 :checked="isSelected(detail.id, optionHeader.id)"
3330                 @click="selectValue(detail, optionHeader)" />
3331          <label class="style-text" :for="`value-${detail.id}-${headerIndex}-${index}-1`">
3332            <p v-text="detail.name"></p>
3333          </label>
3334        </div>
3335      </div>
3336    </div>
3337
3338    <!-- اختيار صورة -->
3339    <div class="variant-picker-item variant-image" v-for="(optionHeader, headerIndex) in optionHeaders.filter(p => p.type === 3)" :key="optionHeader.id" >
3340      <div class="d-flex justify-content-between align-items-center">
3341        <div class="variant-picker-label">
3342          <span v-text="optionHeader.name + ': '"></span>
3343          <span class="fw-6 variant-picker-label-value"
3344                v-text="getSelectedValueForHeader(optionHeader.id)?.name"></span>
3345        </div>
3346      </div>
3347      <div class="variant-picker-values">
3348        <div v-for="(detail, index) in optionHeader.productOptionDetails" :key="detail.id">
3349          <input type="radio"
3350                 :id="`value-${detail.id}-${headerIndex}-${index}-1`"
3351                 :name="`value-${detail.id}-${headerIndex}-${index}-1`"
3352                 :value="detail.id"
3353                 :checked="isSelected(detail.id, optionHeader.id)"
3354                 @click="selectValue(detail, optionHeader)" />
3355          <label class="style-text" :for="`value-${detail.id}-${headerIndex}-${index}-1`" style="width: 78px;height: 60px;">
3356            <img :src="'/' + detail.fullFilePath" :data-src="'/' + detail.fullFilePath" alt="صور المنتج للإختيار" style="width: 50px;"/>
3357            <p v-text="detail.name"></p>
3358          </label>
3359        </div>
3360      </div>
3361    </div>
3362  </template>
3363</div>
3364
3365
3366							<!-- الكمية -->
3367							<div class="tf-product-info-quantity">
3368								<div class="quantity-title fw-6">&#x627;&#x644;&#x643;&#x645;&#x64A;&#x629;</div>
3369								<div class="wg-quantity">
3370									<span class="btn-quantity minus-btn" @click="decreaseQuantity({})"><i
3371											class="fi fi-rr-minus-small"></i></span>
3372									<input type="number" name="number" value="1" disabled v-model="quantity"
3373										@change="changeQuantity()" />
3374									<span class="btn-quantity plus-btn" @click="increaseQuantity({})"><i
3375											class="fi fi-rr-plus-small"></i></span>
3376								</div>
3377							</div>
3378
3379							<!-- أزرار الإجراء -->
3380							<div class="tf-product-info-buy-button">
3381								<form>
3382									<a href="javascript:void(0);" @click="addToCart()"
3383										class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart">
3384										<span>أضف إلى السلة &nbsp;</span>
3385										<span class="space-between" style="padding: 5px;"></span>
3386										<span class="tf-qty-price" v-text="totalPriceProduct"></span> <span
3387											class="icon-saudi_riyal"></span>
3388									</a>
3389
3390									<a href="javascript:void(0);"
3391										class="tf-product-btn-wishlist hover-tooltip box-icon bg_white wishlist btn-icon-action">
3392										<span class="icon icon-heart"></span>
3393										<span class="tooltip"> &#x623;&#x636;&#x641; &#x625;&#x644;&#x649; &#x627;&#x644;&#x645;&#x641;&#x636;&#x644;&#x629;</span>
3394										<span class="icon icon-delete"></span>
3395									</a>
3396
3397									
3398
3399
3400								</form>
3401							</div>
3402
3403							<!-- عرض التفاصيل -->
3404							<div>
3405								<a :href="ProductDetailUrl" class="tf-btn fw-6 btn-line">
3406									&#x639;&#x631;&#x636; &#x627;&#x644;&#x62A;&#x641;&#x627;&#x635;&#x64A;&#x644; &#x627;&#x644;&#x643;&#x627;&#x645;&#x644;&#x629; <i class="icon icon-arrow1-top-left"></i>
3407								</a>
3408							</div>
3409
3410						</div>
3411					</div>
3412
3413				</div>
3414			</div>
3415		</div>
3416	</div>
3417	<!-- /modal quick_view -->
3418
3419	<!-- modal find_size -->
3420	<div class="modal fade modalDemo tf-product-modal" id="find_size">
3421		<div class="modal-dialog modal-dialog-centered">
3422			<div class="modal-content">
3423				<div class="header">
3424					<div class="demo-title">&#x62F;&#x644;&#x64A;&#x644; &#x627;&#x644;&#x645;&#x642;&#x627;&#x633;&#x627;&#x62A;</div>
3425					<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
3426				</div>
3427				<div class="tf-rte">
3428					<div class="tf-table-res-df">
3429						<h6>&#x62C;&#x62F;&#x648;&#x644; &#x645;&#x642;&#x627;&#x633;&#x627;&#x62A; &#x627;&#x644;&#x623;&#x62B;&#x627;&#x62B;</h6>
3430						<table class="tf-sizeguide-table">
3431							<thead>
3432								<tr>
3433									<th>&#x627;&#x644;&#x645;&#x642;&#x627;&#x633;</th>
3434									<th>&#x627;&#x644;&#x646;&#x648;&#x639; &#x627;&#x644;&#x623;&#x645;&#x631;&#x64A;&#x643;&#x64A;</th>
3435									<th>&#x627;&#x644;&#x639;&#x631;&#x636; (&#x633;&#x645;)</th>
3436									<th>&#x627;&#x644;&#x639;&#x645;&#x642; (&#x633;&#x645;)</th>
3437									<th>&#x627;&#x644;&#x627;&#x631;&#x62A;&#x641;&#x627;&#x639; (&#x633;&#x645;)</th>
3438								</tr>
3439							</thead>
3440							<tbody>
3441								<tr>
3442									<td>&#x635;&#x63A;&#x64A;&#x631; &#x62C;&#x62F;&#x64B;&#x627; (XS)</td>
3443									<td>2</td>
3444									<td>60</td>
3445									<td>50</td>
3446									<td>40</td>
3447								</tr>
3448								<tr>
3449									<td>&#x635;&#x63A;&#x64A;&#x631; (S)</td>
3450									<td>4</td>
3451									<td>80</td>
3452									<td>60</td>
3453									<td>45</td>
3454								</tr>
3455								<tr>
3456									<td>&#x645;&#x62A;&#x648;&#x633;&#x637; (M)</td>
3457									<td>6</td>
3458									<td>100</td>
3459									<td>70</td>
3460									<td>50</td>
3461								</tr>
3462								<tr>
3463									<td>&#x643;&#x628;&#x64A;&#x631; (L)</td>
3464									<td>8</td>
3465									<td>120</td>
3466									<td>80</td>
3467									<td>55</td>
3468								</tr>
3469								<tr>
3470									<td>&#x643;&#x628;&#x64A;&#x631; &#x62C;&#x62F;&#x64B; (XL)</td>
3471									<td>10</td>
3472									<td>140</td>
3473									<td>90</td>
3474									<td>60</td>
3475								</tr>
3476								<tr>
3477									<td>&#x636;&#x62E;&#x645; (XXL)</td>
3478									<td>12</td>
3479									<td>160</td>
3480									<td>100</td>
3481									<td>70</td>
3482								</tr>
3483							</tbody>
3484						</table>
3485					</div>
3486
3487					<div class="tf-page-size-chart-content">
3488						<div>
3489							<h6>&#x646;&#x635;&#x627;&#x626;&#x62D; &#x627;&#x644;&#x642;&#x64A;&#x627;&#x633;</h6>
3490							<div class="title">&#x627;&#x644;&#x639;&#x631;&#x636;</div>
3491							<p>&#x642;&#x645; &#x628;&#x642;&#x64A;&#x627;&#x633; &#x627;&#x644;&#x645;&#x633;&#x627;&#x641;&#x629; &#x645;&#x646; &#x627;&#x644;&#x62D;&#x627;&#x641;&#x629; &#x627;&#x644;&#x64A;&#x633;&#x631;&#x649; &#x625;&#x644;&#x649; &#x627;&#x644;&#x62D;&#x627;&#x641;&#x629; &#x627;&#x644;&#x64A;&#x645;&#x646;&#x649; &#x644;&#x644;&#x642;&#x637;&#x639;&#x629;.</p>
3492
3493							<div class="title">&#x627;&#x644;&#x639;&#x645;&#x642;</div>
3494							<p>&#x642;&#x645; &#x628;&#x642;&#x64A;&#x627;&#x633; &#x627;&#x644;&#x645;&#x633;&#x627;&#x641;&#x629; &#x645;&#x646; &#x645;&#x642;&#x62F;&#x645;&#x629; &#x627;&#x644;&#x642;&#x637;&#x639;&#x629; &#x625;&#x644;&#x649; &#x627;&#x644;&#x62E;&#x644;&#x641;.</p>
3495
3496							<div class="title">&#x627;&#x644;&#x627;&#x631;&#x62A;&#x641;&#x627;&#x639;</div>
3497							<p class="mb-0">&#x642;&#x645; &#x628;&#x642;&#x64A;&#x627;&#x633; &#x645;&#x646; &#x627;&#x644;&#x623;&#x631;&#x636; &#x625;&#x644;&#x649; &#x623;&#x639;&#x644;&#x649; &#x646;&#x642;&#x637;&#x629; &#x641;&#x64A; &#x627;&#x644;&#x642;&#x637;&#x639;&#x629;.</p>
3498						</div>
3499
3500
3501					</div>
3502				</div>
3503			</div>
3504		</div>
3505	</div>
3506
3507
3508	<!-- modal share social -->
3509	<div class="modal modalCentered fade modalDemo tf-product-modal modal-part-content" id="share_social">
3510		<div class="modal-dialog modal-dialog-centered">
3511			<div class="modal-content">
3512				<div class="header">
3513					<div class="demo-title">&#x645;&#x634;&#x627;&#x631;&#x643;&#x629;</div>
3514					<span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
3515				</div>
3516				<div class="overflow-y-auto">
3517					<ul class="tf-social-icon d-flex gap-10 list-none">
3518					
3519								 
3520									 
3521						<li><a href="https://www.tiktok.com/" class="box-icon social-tiktok bg_line" target="_blank"><i
3522									class="icon icon-tiktok"></i></a></li>
3523									
3524						<li><a href="https://wa.me/&#x2B;966508187872" class="box-icon social-whatsapp bg_line"
3525								target="_blank"><i class="icon icon-whatsapp"></i></a></li>
3526								
3527					</ul>
3528					<form class="form-share" method="post" accept-charset="utf-8">
3529						<fieldset>
3530							<input type="text" value="" tabindex="0" aria-required="true" v-model="sharUrl" disabled>
3531						</fieldset>
3532						<div class="button-submit">
3533							<button class="tf-btn btn-sm radius-3 btn-fill btn-icon animate-hover-btn" type="button"
3534								@click="copyLink()">
3535								&#x646;&#x633;&#x62E; &#x627;&#x644;&#x631;&#x627;&#x628;&#x637;
3536
3537							</button>
3538						</div>
3539					</form>
3540				</div>
3541			</div>
3542		</div>
3543	</div>
3544	<!-- /modal share social -->
3545
3546
3547	<a href="https://wa.me/&#x2B;966508187872" target="_blank" class="whatsapp-button" aria-label="WhatsApp">
3548		<i class="icon  icon-whatsapp"></i>
3549	</a>
3550
3551	<a href="tel:" target="_blank" class="phone-button" aria-label="call">
3552		<i class="icon  ">
3553			<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="22"
3554				height="22">
3555				<path
3556					d="M22.17,1.82l-1.05-.91c-1.21-1.21-3.17-1.21-4.38,0-.03,.03-1.88,2.44-1.88,2.44-1.14,1.2-1.14,3.09,0,4.28l1.16,1.46c-1.46,3.31-3.73,5.59-6.93,6.95l-1.46-1.17c-1.19-1.15-3.09-1.15-4.28,0,0,0-2.41,1.85-2.44,1.88-1.21,1.21-1.21,3.17-.05,4.33l1,1.15c1.15,1.15,2.7,1.78,4.38,1.78,7.64,0,17.76-10.13,17.76-17.76,0-1.67-.63-3.23-1.83-4.42ZM6.24,22c-1.14,0-2.19-.42-2.91-1.15l-1-1.15c-.41-.41-.43-1.08-.04-1.51,0,0,2.39-1.84,2.42-1.87,.41-.41,1.13
3556-.41,1.55,0,.03,.03,2.04,1.64,2.04,1.64,.28,.22,.65,.28,.98,.15,4.14-1.58,7.11-4.54,8.82-8.81,.13-.33,.08-.71-.15-1,0,0-1.61-2.02-1.63-2.04-.43-.43-.43-1.12,0-1.55,.03-.03,1.87-2.42,1.87-2.42,.43-.39,1.1-.38,1.56,.08l1.05,.91c.77,.77,1.2,1.82,1.2,2.96,0,6.96-9.77,15.76-15.76,15.76Z" />
3557			</svg>
3558		</i>
3559	</a>
3560
3561
3562
3563	<input name="__RequestVerificationToken" type="hidden" value="CfDJ8OkjBRrcfUVOmNlc-QG_ReRpOfn4k308_Am1n2cShaoCexS_BMw6-CDJV6gy4b1RcrabAA_xVC9vffmy2m5rpLL18Q7qcyPqU4t7ov3fplc8j0_KSBli2MaJR-L23hPAu2fJt7xTdHO1KxCvMjRQROE" />
3564
3565	
3565<script src="/Views/ThemesCommonJs/Common/UiLocker.js?v=152" defer></script>
3565
3566	
3566<script src="/Views/ThemesCommonJs/Common/LocalizationHelper.js?v=152" defer></script>
3566
3567
3568	<!-- Javascript -->
3569	
3569<script type="text/javascript" src="/Views/ThemesCommonJs/Common/Helper.js?v=152" defer></script>
3569
3570	
3570<script type="text/javascript" src="/Views/ThemesCommonJs/Common/Account.js?v=152" defer></script>
3570
3571	
3571<script type="text/javascript" src="/Views/ThemesCommonJs/App.js?v=152" defer></script>
3571
3572
3573	
3573<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/swiper-bundle.min.js" defer></script>
3573
3574	
3574<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/carousel.js" defer></script>
3574
3575	
3575<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/bootstrap-select.min.js" defer></script>
3575
3576	
3576<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/lazysize.min.js" defer></script>
3576
3577	
3577<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/drift.min.js" defer></script>
3577
3578	
3578<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/count-down.js" defer></script>
3578
3579	
3579<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/wow.min.js" defer></script>
3579
3580	
3580<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/multiple-modal.js" defer></script>
3580
3581
3582	
3582<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/nouislider.min.js" defer></script>
3582
3583	
3583<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/shop.js" defer></script>
3583
3584
3585
3586	
3586<script type="text/javascript" src="/Views/Themes/furniture/V1/Assets/js/main.js" defer></script>
3586
3587
3588
3589	 
3590	
3590<script>
3591	window.AppSession = {
3592	userName: "",
3593	email: "",
3594	phoneNumber: "",
3595	name: "",
3596	avatar: "lak/host/nophoto/400x400-user.png",
3597	enableVat: "false",
3598	lastName: "",
3599	shippingAmount: "0",
3600	enableShipping: "true",
3601	enableLakLogisticsIntegration: "false",
3602	lakLogisticsShippingViaSupplier: "false",
3603	isLiveMyFatoorahPayment: "true",
3604	isLivePaymobPayment: "true",
3605	messagesGateWayType: "1",
3606	isMisPayEnabled: "false",
3607	
3608	isTamaraEnabled: "false",
3609	misPayWidgetEnabled: "false",
3610	misPayAccessKey: "",
3611	showTermsAndConditions: "false",
3612	currentLang: "ar",
3613	enableProductOptionsAsDropdown: "true"
3614	};
3615
3616	window.tenantObj = {
3617	tenantUrlPrefix: "",
3618	currentTenantId: "791b3825-acde-bee6-c1b7-3a22e322b7f0"
3619	};
3620
3621	window.loginMethodsobj = {
3622	loginByPhone: "true",
3623	loginByEmail: "true"
3624	};
3625</script>
3625
3626
3627
3628
3629
3630
3631<script>
3632    /*function runBstorePortal() {
3633  if (sessionStorage.getItem("bstorePortalShown")) return;
3634  sessionStorage.setItem("bstorePortalShown", "true");
3635
3636  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
3637
3638  /* B-STORE COLORS */
3639  const PRIMARY = "#5D408C";
3640  const PRIMARY_DARK = "#463562";
3641  const LIGHT = "#EDDBF9";
3642  const LIGHT_SOFT = "rgba(237,219,249,.35)";
3643  const WHITE = "#ffffff";
3644
3645  const style = document.createElement("style");
3646  style.id = "bstore-portal-style";
3647  style.innerHTML = `
3648    .bstore-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,${PRIMARY} 0%,${PRIMARY_DARK} 65%,#2E2544 100%);opacity:1;transition:opacity 1s ease;direction:rtl;}
3649
3650    /* soft glow particles instead of grid, feels less "matrix" and more like a card/coin sheen */
3651    .bstore-glow{position:absolute;inset:0;pointer-events:none;background:
3652      radial-gradient(circle at 20% 30%, ${LIGHT_SOFT} 0%, transparent 40%),
3653      radial-gradient(circle at 80% 70%, ${LIGHT_SOFT} 0%, transparent 40%);
3654      opacity:0;animation:glowReveal 2.4s ease forwards;}
3655    @keyframes glowReveal{0%{opacity:0}50%{opacity:.6}100%{opacity:.25}}
3656
3657    .bstore-main{position:relative;width:420px;height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
3658
3659    /* Stack of digital cards that fan out - fits "digital cards store" concept */
3660    .bstore-cards{position:relative;width:180px;height:110px;margin-bottom:26px;}
3661    .bstore-card{position:absolute;top:0;left:50%;width:150px;height:94px;border-radius:12px;
3662      background:linear-gradient(135deg, ${LIGHT} 0%, #ffffff 100%);
3663      box-shadow:0 10px 24px rgba(0,0,0,.25);
3664      opacity:0;transform:translateX(-50%) translateY(10px) rotate(0deg) scale(.9);
3665      animation:cardFan .9s cubic-bezier(.2,.8,.2,1) forwards;}
3666    .bstore-card::before{content:"";position:absolute;left:14px;top:16px;width:34px;height:22px;border-radius:4px;
3667      background:linear-gradient(135deg, ${PRIMARY} 0%, ${PRIMARY_DARK} 100%);}
3668    .bstore-card::after{content:"";position:absolute;left:14px;bottom:14px;width:70%;height:6px;border-radius:3px;
3669      background:rgba(70,53,98,.18);}
3670    .bstore-card.c1{animation-delay:.15s;--rot:-16deg;--tx:-46px;}
3671    .bstore-card.c2{animation-delay:.3s;--rot:-6deg;--tx:-16px;}
3672    .bstore-card.c3{animation-delay:.45s;--rot:6deg;--tx:16px;z-index:2;}
3673    .bstore-card.c4{animation-delay:.6s;--rot:16deg;--tx:46px;}
3674    @keyframes cardFan{to{opacity:1;transform:translateX(calc(-50% + var(--tx))) translateY(0) rotate(var(--rot)) scale(1);}}
3675
3676    .bstore-brand{position:relative;z-index:5;text-align:center;}
3677    .bstore-name{display:block;color:${WHITE};font-family:"Cairo","Tahoma",sans-serif;font-size:36px;font-weight:800;letter-spacing:3px;line-height:1;opacity:0;animation:nameRise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:1s;}
3678    @keyframes nameRise{0%{opacity:0;transform:translateY(14px) scale(.96);}100%{opacity:1;transform:translateY(0) scale(1);}}
3679
3680    .bstore-line{width:0;height:2px;margin:16px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,${LIGHT},transparent);animation:lineReveal .8s ease forwards;animation-delay:1.5s;}
3681    @keyframes lineReveal{to{width:150px}}
3682
3683    .bstore-tagline{margin-top:14px;color:${LIGHT};font-family:"Cairo","Tahoma",sans-serif;font-size:13px;letter-spacing:1px;opacity:0;transform:translateY(8px);animation:taglineReveal .8s ease forwards;animation-delay:1.8s;}
3684    @keyframes taglineReveal{to{opacity:.9;transform:translateY(0)}}
3685
3686    /* small sparkle accents replacing floating pixels */
3687    .bstore-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:${LIGHT};opacity:0;animation:sparkFloat 3s ease-in-out infinite;}
3688    .bstore-spark:nth-child(1){left:55px;top:50px;animation-delay:1.2s}
3689    .bstore-spark:nth-child(2){right:50px;top:55px;animation-delay:1.7s}
3690    .bstore-spark:nth-child(3){left:70px;bottom:50px;animation-delay:2.1s}
3691    .bstore-spark:nth-child(4){right:65px;bottom:55px;animation-delay:2.5s}
3692    @keyframes sparkFloat{0%{opacity:0;transform:translateY(6px) scale(.6)}30%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:translateY(-36px) scale(.4)}}
3693
3694    @media(max-width:480px){
3695      .bstore-main{width:100%;height:300px}
3696      .bstore-cards{width:150px;height:90px}
3697      .bstore-card{width:120px;height:76px}
3698      .bstore-name{font-size:28px;letter-spacing:2px}
3699      .bstore-tagline{font-size:11px}
3700    }
3701    @media(prefers-reduced-motion:reduce){
3702      .bstore-overlay *{animation:none!important;transition:none!important}
3703      .bstore-name,.bstore-card,.bstore-glow{opacity:1!important;transform:none!important}
3704      .bstore-card.c1{transform:translateX(-96px) rotate(-16deg)!important}
3705      .bstore-card.c2{transform:translateX(-66px) rotate(-6deg)!important}
3706      .bstore-card.c3{transform:translateX(-34px) rotate(6deg)!important}
3707      .bstore-card.c4{transform:translateX(-4px) rotate(16deg)!important}
3708    }
3709  `;
3710  document.head.appendChild(style);
3711
3712  const overlay = document.createElement("div");
3713  overlay.className = "bstore-overlay";
3714
3715  const glow = document.createElement("div");
3716  glow.className = "bstore-glow";
3717  overlay.appendChild(glow);
3718
3719  const main = document.createElement("div");
3720  main.className = "bstore-main";
3721  overlay.appendChild(main);
3722
3723  const cards = document.createElement("div");
3724  cards.className = "bstore-cards";
3725  ["c1", "c2", "c3", "c4"].forEach((cls) => {
3726    const c = document.createElement("div");
3727    c.className = "bstore-card " + cls;
3728    cards.appendChild(c);
3729  });
3730  main.appendChild(cards);
3731
3732  if (!reduced) {
3733    for (let i = 0; i < 4; i++) {
3734      const s = document.createElement("span");
3735      s.className = "bstore-spark";
3736      main.appendChild(s);
3737    }
3738  }
3739
3740  const brand = document.createElement("div");
3741  brand.className = "bstore-brand";
3742  brand.innerHTML = `
3743    <span class="bstore-name">B-STORE</span>
3744    <div class="bstore-line"></div>
3745    <div class="bstore-tagline">متجرك الأول للبطاقات الرقمية</div>
3746  `;
3747  main.appendChild(brand);
3748
3749  document.body.appendChild(overlay);
3750
3751  const total = reduced ? 1500 : 3600;
3752  setTimeout(() => {
3753    overlay.style.opacity = "0";
3754    setTimeout(() => {
3755      overlay.remove();
3756      style.remove();
3757    }, 1000);
3758  }, total);
3759}
3760
3761(function () {
3762  function init() {
3763    setTimeout(runBstorePortal, 500);
3764  }
3765  if (document.readyState === "loading") {
3766    document.addEventListener("DOMContentLoaded", init);
3767  } else {
3768    init();
3769  }
3770})();*/
3771//==//
3772//==//
3773/*(function () {
3774
3775  const TARGET_SELECTOR = '.rtl .swiper.tf-sw-product-sell-1';
3776  const SECTION_ID = 'bstore-features-v2';
3777
3778  const ITEMS = [
3779    {
3780      title: 'اختيارات تستحقها',
3781      desc: 'تفاصيل مختارة بعناية لتجربة أفضل.',
3782      icon: `<path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3z"/>`
3783    },
3784    {
3785      title: 'كل شيء بسهولة',
3786      desc: 'خطوات بسيطة من الاختيار حتى إتمام طلبك.',
3787      icon: `<path d="M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/><path d="M7 8h10M7 12h6M7 16h4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>`
3788    },
3789    {
3790      title: 'تجربة سلسة',
3791      desc: 'واجهة مرتبة تجعل الوصول لما تبحث عنه أسهل.',
3792      icon: `<path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 4v5l3.5 2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`
3793    },
3794    {
3795      title: 'دفع بكل سهولة',
3796      desc: 'أكمل طلبك بالطريقة المناسبة لك وبخطوات واضحة.',
3797      icon: `<path d="M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v11a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-11z"/><path d="M4 9h16M8 15h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>`
3798    }
3799  ];
3800
3801  const PURPLE = '#5D408C';
3802  const DARK = '#3F3154';
3803  const SOFT = '#F4EFF9';
3804  const BORDER = 'rgba(93,64,140,.10)';
3805
3806  function injectCSS() {
3807
3808    if (document.getElementById('bstore-features-v2-style')) return;
3809
3810    const style = document.createElement('style');
3811
3812    style.id = 'bstore-features-v2-style';
3813
3814    style.textContent = `
3815      #${SECTION_ID}{
3816        direction:rtl;
3817        width:100%;
3818        max-width:1120px;
3819        margin:18px auto 0;
3820        padding:22px 24px;
3821        box-sizing:border-box;
3822        font-family:inherit;
3823      }
3824
3825      #${SECTION_ID} .bf-wrap{
3826        width:100%;
3827        display:grid;
3828        grid-template-columns:repeat(4,1fr);
3829        background:#fff;
3830        border:1px solid ${BORDER};
3831        border-radius:18px;
3832        overflow:hidden;
3833      }
3834
3835      #${SECTION_ID} .bf-item{
3836        min-width:0;
3837        display:flex;
3838        align-items:center;
3839        gap:13px;
3840        padding:20px 18px;
3841        position:relative;
3842        box-sizing:border-box;
3843        transition:background .2s ease;
3844      }
3845
3846      #${SECTION_ID} .bf-item:not(:last-child)::before{
3847        content:"";
3848        position:absolute;
3849        left:0;
3850        top:22%;
3851        height:56%;
3852        width:1px;
3853        background:${BORDER};
3854      }
3855
3856      #${SECTION_ID} .bf-item:hover{
3857        background:#FCFAFE;
3858      }
3859
3860      #${SECTION_ID} .bf-icon{
3861        width:42px;
3862        height:42px;
3863        min-width:42px;
3864        border-radius:12px;
3865        display:flex;
3866        align-items:center;
3867        justify-content:center;
3868        background:${SOFT};
3869        color:${PURPLE};
3870      }
3871
3872      #${SECTION_ID} .bf-icon svg{
3873        width:21px;
3874        height:21px;
3875        fill:currentColor;
3876        stroke:currentColor;
3877      }
3878
3879      #${SECTION_ID} .bf-content{
3880        min-width:0;
3881      }
3882
3883      #${SECTION_ID} .bf-title{
3884        margin:0 0 4px;
3885        color:${DARK};
3886        font-size:13.5px;
3887        font-weight:800;
3888        line-height:1.5;
3889      }
3890
3891      #${SECTION_ID} .bf-desc{
3892        margin:0;
3893        color:#8C8297;
3894        font-size:11.5px;
3895        line-height:1.7;
3896      }
3897
3898      /* Tablet */
3899      @media(max-width:850px){
3900
3901        #${SECTION_ID}{
3902          padding:18px 14px;
3903        }
3904
3905        #${SECTION_ID} .bf-wrap{
3906          grid-template-columns:repeat(2,1fr);
3907        }
3908
3909        #${SECTION_ID} .bf-item:nth-child(2)::before{
3910          display:none;
3911        }
3912
3913        #${SECTION_ID} .bf-item:nth-child(1)::after,
3914        #${SECTION_ID} .bf-item:nth-child(2)::after{
3915          content:"";
3916          position:absolute;
3917          bottom:0;
3918          left:12%;
3919          right:12%;
3920          height:1px;
3921          background:${BORDER};
3922        }
3923      }
3924
3925      /* Mobile */
3926      @media(max-width:520px){
3927
3928        #${SECTION_ID}{
3929          padding:12px 10px;
3930          margin-top:12px;
3931        }
3932
3933        #${SECTION_ID} .bf-wrap{
3934          display:flex;
3935          flex-direction:column;
3936          border-radius:15px;
3937        }
3938
3939        #${SECTION_ID} .bf-item{
3940          padding:15px 14px;
3941          gap:12px;
3942        }
3943
3944        #${SECTION_ID} .bf-item:not(:last-child)::before{
3945          display:none;
3946        }
3947
3948        #${SECTION_ID} .bf-item:not(:last-child)::after{
3949          content:"";
3950          position:absolute;
3951          bottom:0;
3952          left:14px;
3953          right:14px;
3954          height:1px;
3955          background:${BORDER};
3956        }
3957
3958        #${SECTION_ID} .bf-icon{
3959          width:40px;
3960          min-width:40px;
3961          height:40px;
3962          border-radius:11px;
3963        }
3964
3965        #${SECTION_ID} .bf-title{
3966          font-size:13px;
3967        }
3968
3969        #${SECTION_ID} .bf-desc{
3970          font-size:11px;
3971        }
3972
3973      }
3974
3975      @media(prefers-reduced-motion:reduce){
3976
3977        #${SECTION_ID} .bf-item{
3978          transition:none;
3979        }
3980
3981      }
3982    `;
3983
3984    document.head.appendChild(style);
3985  }
3986
3987  function buildHTML(){
3988
3989    return `
3990      <div class="bf-wrap">
3991
3992        ${ITEMS.map(item => `
3993          <div class="bf-item">
3994
3995            <span class="bf-icon">
3996              <svg viewBox="0 0 24 24">
3997                ${item.icon}
3998              </svg>
3999            </span>
4000
4001            <div class="bf-content">
4002              <p class="bf-title">${item.title}</p>
4003              <p class="bf-desc">${item.desc}</p>
4004            </div>
4005
4006          </div>
4007        `).join('')}
4008
4009      </div>
4010    `;
4011  }
4012
4013  function createSection(target){
4014
4015    if (document.getElementById(SECTION_ID)) return;
4016    if (!target || !target.parentNode) return;
4017
4018    injectCSS();
4019
4020    const section = document.createElement('section');
4021
4022    section.id = SECTION_ID;
4023    section.innerHTML = buildHTML();
4024
4025    target.parentNode.insertBefore(section, target);
4026  }
4027
4028  function mount(){
4029
4030    const target = document.querySelector(TARGET_SELECTOR);
4031
4032    if (target){
4033      createSection(target);
4034      return true;
4035    }
4036
4037    return false;
4038  }
4039
4040  /*
4041   * محاولة مباشرة
4042   */
4043  if (mount()) return;
4044
4045  /*
4046   * مراقبة خفيفة جدًا فقط لحد ما السلايدر يظهر
4047   */
4048  let tries = 0;
4049
4050  const timer = setInterval(() => {
4051
4052    tries++;
4053
4054    if (mount() || tries >= 30){
4055      clearInterval(timer);
4056    }
4057
4058  }, 500);
4059
4060})();
4061*/
4062//==//
4063/*(function () {
4064
4065  const TARGET_SELECTOR = "#footer";
4066  const SECTION_ID = "bstore-premium-sections";
4067
4068  const STORE_NAME = "B-STORE";
4069  const STORE_TAGLINE = "كل ما تحتاجه من البطاقات الرقمية، في تجربة بسيطة وسريعة.";
4070
4071  const PRIMARY = "#5D408C";
4072  const DARK = "#463562";
4073  const LIGHT = "#F7F3FA";
4074  const SOFT = "#EEE5F5";
4075  const WHITE = "#FFFFFF";
4076  const MUTED = "#82758F";
4077
4078  const ITEMS = [
4079    {
4080      icon: "ti-shield-check",
4081      number: "01",
4082      title: "اختيار موثوق",
4083      text: "نوفر لك خيارات رقمية مختارة بعناية لتجربة شراء أكثر راحة."
4084    },
4085    {
4086      icon: "ti-bolt",
4087      number: "02",
4088      title: "وصول سريع",
4089      text: "بعد إتمام العملية، تصل تفاصيل طلبك بسرعة وبدون خطوات معقدة."
4090    },
4091    {
4092      icon: "ti-click",
4093      number: "03",
4094      title: "بكل بساطة",
4095      text: "تجربة واضحة وسهلة من لحظة اختيار المنتج حتى إتمام الطلب."
4096    },
4097    {
4098      icon: "ti-lock",
4099      number: "04",
4100      title: "عملية آمنة",
4101      text: "نحرص على أن تكون تجربة الدفع واضحة وسلسة في كل خطوة."
4102    },
4103    {
4104      icon: "ti-sparkles",
4105      number: "05",
4106      title: "تجدد مستمر",
4107      text: "نضيف خيارات جديدة باستمرار لتجد دائمًا ما يناسب احتياجك."
4108    }
4109  ];
4110
4111  const TABLER_CSS_URL =
4112    "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css";
4113
4114
4115  /* =========================
4116     ICONS
4117  ========================= */
4118
4119  const injectIcons = () => {
4120
4121    if (document.getElementById("bstore-premium-icons")) return;
4122
4123    const link = document.createElement("link");
4124
4125    link.id = "bstore-premium-icons";
4126    link.rel = "stylesheet";
4127    link.href = TABLER_CSS_URL;
4128
4129    document.head.appendChild(link);
4130  };
4131
4132
4133  /* =========================
4134     CSS
4135  ========================= */
4136
4137  const injectCSS = () => {
4138
4139    if (document.getElementById("bstore-premium-style")) return;
4140
4141    const style = document.createElement("style");
4142
4143    style.id = "bstore-premium-style";
4144
4145    style.textContent = `
4146
4147      /* =========================
4148         MAIN SECTION
4149      ========================= */
4150
4151      #${SECTION_ID}{
4152        direction:rtl;
4153        width:100%;
4154        margin-top:65px;
4155        padding:72px 18px 78px;
4156        box-sizing:border-box;
4157        background:
4158          radial-gradient(
4159            circle at 50% 0%,
4160            rgba(93,64,140,.07),
4161            transparent 38%
4162          );
4163        font-family:inherit;
4164      }
4165
4166
4167      #${SECTION_ID} .bs-inner{
4168        width:100%;
4169        max-width:1120px;
4170        margin:auto;
4171      }
4172
4173
4174      /* =========================
4175         TOP LABEL
4176      ========================= */
4177
4178      #${SECTION_ID} .bs-top{
4179        display:flex;
4180        align-items:center;
4181        justify-content:center;
4182        gap:12px;
4183        margin-bottom:15px;
4184      }
4185
4186
4187      #${SECTION_ID} .bs-line{
4188        width:32px;
4189        height:1px;
4190        background:${PRIMARY};
4191        opacity:.35;
4192      }
4193
4194
4195      #${SECTION_ID} .bs-label{
4196        font-size:10px;
4197        font-weight:800;
4198        letter-spacing:2.5px;
4199        color:${PRIMARY};
4200      }
4201
4202
4203      /* =========================
4204         TITLE
4205      ========================= */
4206
4207      #${SECTION_ID} .bs-title{
4208        margin:0;
4209        text-align:center;
4210        color:${DARK};
4211        font-size:28px;
4212        font-weight:900;
4213        letter-spacing:.5px;
4214      }
4215
4216
4217      #${SECTION_ID} .bs-title span{
4218        color:${PRIMARY};
4219      }
4220
4221
4222      #${SECTION_ID} .bs-subtitle{
4223        max-width:570px;
4224        margin:12px auto 0;
4225        text-align:center;
4226        color:${MUTED};
4227        font-size:13px;
4228        line-height:1.9;
4229        font-weight:500;
4230      }
4231
4232
4233      /* =========================
4234         DECORATIVE DOT
4235      ========================= */
4236
4237      #${SECTION_ID} .bs-dot{
4238        width:5px;
4239        height:5px;
4240        border-radius:50%;
4241        background:${PRIMARY};
4242        margin:20px auto 38px;
4243        opacity:.7;
4244      }
4245
4246
4247      /* =========================
4248         GRID
4249      ========================= */
4250
4251      #${SECTION_ID}
4251 .bs-grid{
4252        display:grid;
4253        grid-template-columns:repeat(5,1fr);
4254        gap:1px;
4255        background:rgba(93,64,140,.12);
4256        border:1px solid rgba(93,64,140,.10);
4257        border-radius:22px;
4258        overflow:hidden;
4259      }
4260
4261
4262      /* =========================
4263         ITEM
4264      ========================= */
4265
4266      #${SECTION_ID} .bs-item{
4267        position:relative;
4268        min-width:0;
4269        padding:27px 20px 25px;
4270        background:${WHITE};
4271        text-align:center;
4272        transition:background .22s ease;
4273      }
4274
4275
4276      #${SECTION_ID} .bs-item:hover{
4277        background:${LIGHT};
4278      }
4279
4280
4281      /* =========================
4282         NUMBER
4283      ========================= */
4284
4285      #${SECTION_ID} .bs-number{
4286        position:absolute;
4287        top:12px;
4288        left:14px;
4289        font-size:10px;
4290        font-weight:800;
4291        color:${PRIMARY};
4292        opacity:.28;
4293        letter-spacing:1px;
4294      }
4295
4296
4297      /* =========================
4298         ICON
4299      ========================= */
4300
4301      #${SECTION_ID} .bs-icon{
4302        width:48px;
4303        height:48px;
4304        margin:0 auto 16px;
4305        border-radius:15px;
4306        display:flex;
4307        align-items:center;
4308        justify-content:center;
4309        background:${SOFT};
4310        color:${PRIMARY};
4311        font-size:20px;
4312        transition:
4313          background .22s ease,
4314          color .22s ease,
4315          transform .22s ease;
4316      }
4317
4318
4319      #${SECTION_ID} .bs-item:hover .bs-icon{
4320        background:${PRIMARY};
4321        color:${WHITE};
4322        transform:translateY(-3px);
4323      }
4324
4325
4326      /* =========================
4327         TEXT
4328      ========================= */
4329
4330      #${SECTION_ID} .bs-item-title{
4331        margin:0 0 7px;
4332        color:${DARK};
4333        font-size:14px;
4334        font-weight:850;
4335      }
4336
4337
4338      #${SECTION_ID} .bs-item-text{
4339        margin:0 auto;
4340        max-width:185px;
4341        color:${MUTED};
4342        font-size:11.5px;
4343        line-height:1.85;
4344      }
4345
4346
4347      /* =========================
4348         BOTTOM ACCENT
4349      ========================= */
4350
4351      #${SECTION_ID} .bs-accent{
4352        width:18px;
4353        height:2px;
4354        margin:17px auto 0;
4355        border-radius:10px;
4356        background:${PRIMARY};
4357        opacity:.25;
4358        transition:
4359          width .22s ease,
4360          opacity .22s ease;
4361      }
4362
4363
4364      #${SECTION_ID} .bs-item:hover .bs-accent{
4365        width:30px;
4366        opacity:.8;
4367      }
4368
4369
4370      /* =========================
4371         TABLET
4372      ========================= */
4373
4374      @media(max-width:950px){
4375
4376        #${SECTION_ID}{
4377          padding:58px 14px 65px;
4378        }
4379
4380        #${SECTION_ID} .bs-grid{
4381          grid-template-columns:repeat(3,1fr);
4382        }
4383
4384        #${SECTION_ID} .bs-item:nth-child(4),
4385        #${SECTION_ID} .bs-item:nth-child(5){
4386          grid-column:span 1;
4387        }
4388
4389      }
4390
4391
4392      /* =========================
4393         MOBILE
4394      ========================= */
4395
4396      @media(max-width:600px){
4397
4398        #${SECTION_ID}{
4399          margin-top:45px;
4400          padding:48px 10px 55px;
4401        }
4402
4403
4404        #${SECTION_ID} .bs-title{
4405          font-size:22px;
4406        }
4407
4408
4409        #${SECTION_ID} .bs-subtitle{
4410          font-size:12px;
4411          max-width:330px;
4412        }
4413
4414
4415        #${SECTION_ID} .bs-dot{
4416          margin-bottom:25px;
4417        }
4418
4419
4420        #${SECTION_ID} .bs-grid{
4421          grid-template-columns:repeat(2,1fr);
4422          border-radius:18px;
4423        }
4424
4425
4426        #${SECTION_ID} .bs-item{
4427          padding:23px 13px 21px;
4428        }
4429
4430
4431        #${SECTION_ID} .bs-item:nth-child(5){
4432          grid-column:1 / -1;
4433        }
4434
4435
4436        #${SECTION_ID} .bs-icon{
4437          width:43px;
4438          height:43px;
4439          border-radius:13px;
4440          font-size:18px;
4441          margin-bottom:13px;
4442        }
4443
4444
4445        #${SECTION_ID} .bs-item-title{
4446          font-size:13px;
4447        }
4448
4449
4450        #${SECTION_ID} .bs-item-text{
4451          font-size:11px;
4452          line-height:1.75;
4453        }
4454
4455
4456        #${SECTION_ID} .bs-number{
4457          top:9px;
4458          left:10px;
4459        }
4460
4461      }
4462
4463
4464      /* =========================
4465         SMALL MOBILE
4466      ========================= */
4467
4468      @media(max-width:360px){
4469
4470        #${SECTION_ID}
4470 .bs-grid{
4471          grid-template-columns:1fr;
4472        }
4473
4474        #${SECTION_ID} .bs-item:nth-child(5){
4475          grid-column:auto;
4476        }
4477
4478      }
4479
4480
4481      /* =========================
4482         REDUCED MOTION
4483      ========================= */
4484
4485      @media(prefers-reduced-motion:reduce){
4486
4487        #${SECTION_ID} .bs-item,
4488        #${SECTION_ID} .bs-icon,
4489        #${SECTION_ID} .bs-accent{
4490          transition:none;
4491        }
4492
4493      }
4494
4495    `;
4496
4497    document.head.appendChild(style);
4498  };
4499
4500
4501  /* =========================
4502     BUILD ITEMS
4503  ========================= */
4504
4505  const buildItems = () => {
4506
4507    return ITEMS.map(item => `
4508
4509      <div class="bs-item">
4510
4511        <span class="bs-number">
4512          ${item.number}
4513        </span>
4514
4515        <div class="bs-icon">
4516          <i class="ti ${item.icon}"></i>
4517        </div>
4518
4519        <h3 class="bs-item-title">
4520          ${item.title}
4521        </h3>
4522
4523        <p class="bs-item-text">
4524          ${item.text}
4525        </p>
4526
4527        <span class="bs-accent"></span>
4528
4529      </div>
4530
4531    `).join("");
4532  };
4533
4534
4535  /* =========================
4536     HTML
4537  ========================= */
4538
4539  const buildHTML = () => `
4540
4541    <section id="${SECTION_ID}">
4542
4543      <div class="bs-inner">
4544
4545        <div class="bs-top">
4546          <span class="bs-line"></span>
4547          <span class="bs-label">B-STORE</span>
4548          <span class="bs-line"></span>
4549        </div>
4550
4551        <h2 class="bs-title">
4552          تجربة <span>رقمية</span> مختلفة
4553        </h2>
4554
4555        <p class="bs-subtitle">
4556          ${STORE_TAGLINE}
4557        </p>
4558
4559        <div class="bs-dot"></div>
4560
4561        <div class="bs-grid">
4562          ${buildItems()}
4563        </div>
4564
4565      </div>
4566
4567    </section>
4568
4569  `;
4570
4571
4572  /* =========================
4573     MOUNT
4574  ========================= */
4575
4576  const mount = () => {
4577
4578    if (document.getElementById(SECTION_ID)) {
4579      return true;
4580    }
4581
4582    const target = document.querySelector(TARGET_SELECTOR);
4583
4584    if (!target) return false;
4585
4586    injectIcons();
4587    injectCSS();
4588
4589    target.insertAdjacentHTML(
4590      "beforebegin",
4591      buildHTML()
4592    );
4593
4594    return true;
4595  };
4596
4597
4598  /* =========================
4599     START
4600  ========================= */
4601
4602  if (mount()) return;
4603
4604  let tries = 0;
4605
4606  const timer = setInterval(() => {
4607
4608    tries++;
4609
4610    if (mount() || tries >= 50) {
4611      clearInterval(timer);
4612    }
4613
4614  }, 200);
4615
4616})();*/
4617//==//
4618
4619
4620
4621//==//
4622/*(function () {
4623
4624  const TARGET_SELECTOR = "#footer";
4625  const SECTION_ID = "bstore-digital-faq";
4626
4627  /* =========================
4628     B-STORE COLORS
4629  ========================= */
4630
4631  const PRIMARY = "#5D408C";
4632  const PRIMARY_DARK = "#3B2855";
4633  const PURPLE_SOFT = "#F3ECF9";
4634  const PURPLE_LIGHT = "#FAF7FC";
4635  const DARK = "#352542";
4636  const MUTED = "#81758C";
4637  const BORDER = "#E9E0F0";
4638  const WHITE = "#FFFFFF";
4639
4640
4641  /* =========================
4642     DIGITAL CARDS FAQ
4643  ========================= */
4644
4645  const FAQS = [
4646
4647    {
4648      icon: "ti-cards",
4649      title: "كيف أستلم البطاقة بعد الشراء؟",
4650      text: "بعد نجاح عملية الدفع، تظهر تفاصيل البطاقة والكود في حسابك على المتجر، بحيث تقدر تستخدمه مباشرة."
4651    },
4652
4653    {
4654      icon: "ti-credit-card",
4655      title: "ما طرق الدفع المتاحة؟",
4656      text: "تقدر تختار طريقة الدفع المناسبة لك من طرق الدفع المتوفرة عند إتمام الطلب."
4657    },
4658
4659    {
4660      icon: "ti-key",
4661      title: "كيف أستخدم كود البطاقة؟",
4662      text: "بعد استلام الكود، استخدمه في المنصة أو الخدمة الخاصة بالبطاقة حسب تعليمات الاستخدام الخاصة بها."
4663    },
4664
4665    {
4666      icon: "ti-shield-lock",
4667      title: "هل بياناتي وعمليات الشراء آمنة؟",
4668      text: "نحرص على حماية بياناتك وتقديم تجربة شراء رقمية واضحة وآمنة أثناء تنفيذ طلبك."
4669    }
4670
4671  ];
4672
4673
4674  /* =========================
4675     ICON FONT
4676  ========================= */
4677
4678  const injectIcons = () => {
4679
4680    if (document.getElementById("bstore-digital-icons")) return;
4681
4682    const link = document.createElement("link");
4683
4684    link.id = "bstore-digital-icons";
4685    link.rel = "stylesheet";
4686    link.href =
4687      "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css";
4688
4689    document.head.appendChild(link);
4690  };
4691
4692
4693  /* =========================
4694     CSS
4695  ========================= */
4696
4697  const injectCSS = () => {
4698
4699    if (document.getElementById("bstore-digital-faq-style")) return;
4700
4701    const style = document.createElement("style");
4702
4703    style.id = "bstore-digital-faq-style";
4704
4705    style.textContent = `
4706
4707      /* =========================
4708         SECTION
4709      ========================= */
4710
4711      #${SECTION_ID}{
4712        width:100%;
4713        direction:rtl;
4714        margin-top:55px;
4715        padding:75px 20px;
4716        box-sizing:border-box;
4717        font-family:inherit;
4718      }
4719
4720
4721      #${SECTION_ID} .dc-container{
4722        max-width:1100px;
4723        margin:auto;
4724
4725        display:grid;
4726        grid-template-columns:340px 1fr;
4727
4728        gap:70px;
4729        align-items:start;
4730      }
4731
4732
4733      /* =========================
4734         RIGHT SIDE
4735      ========================= */
4736
4737      #${SECTION_ID} .dc-intro{
4738        position:sticky;
4739        top:25px;
4740        padding-top:15px;
4741      }
4742
4743
4744      #${SECTION_ID} .dc-small-title{
4745        display:inline-flex;
4746        align-items:center;
4747        gap:8px;
4748
4749        color:${PRIMARY};
4750        font-size:11px;
4751        font-weight:900;
4752        letter-spacing:2px;
4753
4754        margin-bottom:17px;
4755      }
4756
4757
4758      #${SECTION_ID} .dc-small-title::before{
4759        content:"";
4760        width:26px;
4761        height:2px;
4762        border-radius:10px;
4763        background:${PRIMARY};
4764      }
4765
4766
4767      #${SECTION_ID} .dc-title{
4768        margin:0;
4769
4770        color:${DARK};
4771
4772        font-size:31px;
4773        font-weight:900;
4774
4775        line-height:1.55;
4776      }
4777
4778
4779      #${SECTION_ID} .dc-title span{
4780        color:${PRIMARY};
4781      }
4782
4783
4784      #${SECTION_ID} .dc-description{
4785        margin:15px 0 0;
4786
4787        max-width:300px;
4788
4789        color:${MUTED};
4790
4791        font-size:13px;
4792        line-height:2;
4793      }
4794
4795
4796      /* =========================
4797         DIGITAL CARD BADGE
4798      ========================= */
4799
4800      #${SECTION_ID} .dc-badge{
4801        margin-top:30px;
4802
4803        width:145px;
4804        height:82px;
4805
4806        border-radius:17px;
4807
4808        position:relative;
4809        overflow:hidden;
4810
4811        display:flex;
4812        flex-direction:column;
4813        justify-content:space-between;
4814
4815        padding:14px;
4816
4817        box-sizing:border-box;
4818
4819        background:
4820          linear-gradient(
4821            135deg,
4822            ${PRIMARY_DARK},
4823            ${PRIMARY}
4824          );
4825
4826        color:${WHITE};
4827
4828        box-shadow:
4829          0 12px 30px rgba(93,64,140,.20);
4830      }
4831
4832
4833      #${SECTION_ID} .dc-badge::after{
4834        content:"";
4835
4836        position:absolute;
4837
4838        width:80px;
4839        height:80px;
4840
4841        border-radius:50%;
4842
4843        left:-30px;
4844        bottom:-40px;
4845
4846        border:12px solid rgba(255,255,255,.08);
4847      }
4848
4849
4850      #${SECTION_ID} .dc-badge-top{
4851        display:flex;
4852        justify-content:space-between;
4853        align-items:center;
4854
4855        font-size:10px;
4856        font-weight:800;
4857        letter-spacing:1px;
4858      }
4859
4860
4861      #${SECTION_ID} .dc-badge-icon{
4862        font-size:18px;
4863      }
4864
4865
4866      #${SECTION_ID} .dc-badge-number{
4867        font-size:9px;
4868        letter-spacing:2px;
4869        opacity:.75;
4870      }
4871
4872
4873      /* =========================
4874         FAQ LIST
4875      ========================= */
4876
4877      #${SECTION_ID} .dc-list{
4878        display:flex;
4879        flex-direction:column;
4880
4881        gap:12px;
4882      }
4883
4884
4885      /* =========================
4886         FAQ ITEM
4887      ========================= */
4888
4889      #${SECTION_ID} .dc-item{
4890        position:relative;
4891
4892        display:grid;
4893        grid-template-columns:48px 1fr;
4894
4895        gap:16px;
4896
4897        padding:21px 22px;
4898
4899        background:${WHITE};
4900
4901        border:1px solid ${BORDER};
4902
4903        border-radius:17px;
4904
4905        box-sizing:border-box;
4906
4907        transition:
4908          border-color .2s ease,
4909          background .2s ease;
4910      }
4911
4912
4913      #${SECTION_ID} .dc-item:hover{
4914        border-color:${PRIMARY}45;
4915        background:${PURPLE_LIGHT};
4916      }
4917
4918
4919      /* =========================
4920         ICON
4921      ========================= */
4922
4923      #${SECTION_ID} .dc-icon{
4924        width:48px;
4925        height:48px;
4926
4927        border-radius:14px;
4928
4929        display:flex;
4930        align-items:center;
4931        justify-content:center;
4932
4933        background:${PURPLE_SOFT};
4934
4935        color:${PRIMARY};
4936
4937        font-size:21px;
4938
4939        position:relative;
4940      }
4941
4942
4943      #${SECTION_ID} .dc-icon::after{
4944        content:"";
4945
4946        position:absolute;
4947
4948        width:7px;
4949        height:7px;
4950
4951        border-radius:50%;
4952
4953        top:3px;
4954        left:3px;
4955
4956        background:${PRIMARY};
4957
4958        opacity:.25;
4959      }
4960
4961
4962      #${SECTION_ID} .dc-item:hover .dc-icon{
4963        background:${PRIMARY};
4964        color:${WHITE};
4965      }
4966
4967
4968      /* =========================
4969         CONTENT
4970      ========================= */
4971
4972      #${SECTION_ID} .dc-content{
4973        min-width:0;
4974      }
4975
4976
4977      #${SECTION_ID} .dc-question{
4978        margin:1px 0 7px;
4979
4980        color:${DARK};
4981
4982        font-size:14px;
4983        font-weight:900;
4984
4985        line-height:1.7;
4986      }
4987
4988
4989      #${SECTION_ID} .dc-answer{
4990        margin:0;
4991
4992        color:${MUTED};
4993
4994        font-size:12.5px;
4995
4996        line-height:1.9;
4997      }
4998
4999
5000      /* =========================
5001         SMALL CARD NUMBER
5002      ========================= */
5003
5004      #${SECTION_ID} .dc-number{
5005        position:absolute;
5006
5007        top:13px;
5008        left:16px;
5009
5010        color:${PRIMARY};
5011
5012        font-size:9px;
5013        font-weight:900;
5014
5015        opacity:.25;
5016
5017        letter-spacing:1px;
5018      }
5019
5020
5021      /* =========================
5022         BOTTOM LABEL
5023      ========================= */
5024
5025      #${SECTION_ID} .dc-note{
5026        display:flex;
5027        align-items:center;
5028        justify-content:center;
5029
5030        gap:7px;
5031
5032        margin-top:22px;
5033
5034        color:${MUTED};
5035
5036        font-size:10.5px;
5037        font-weight:600;
5038      }
5039
5040
5041      #${SECTION_ID} .dc-note i{
5042        color:${PRIMARY};
5043        font-size:14px;
5044      }
5045
5046
5047      /* =========================
5048         TABLET
5049      ========================= */
5050
5051      @media(max-width:850px){
5052
5053        #${SECTION_ID}{
5054          padding:60px 15px;
5055        }
5056
5057        #${SECTION_ID} .dc-container{
5058          grid-template-columns:280px 1fr;
5059          gap:35px;
5060        }
5061
5062        #${SECTION_ID} .dc-title{
5063          font-size:26px;
5064        }
5065
5066      }
5067
5068
5069      /* =========================
5070         MOBILE
5071      ========================= */
5072
5073      @media(max-width:650px){
5074
5075        #${SECTION_ID}{
5076          margin-top:40px;
5077          padding:50px 11px 58px;
5078        }
5079
5080
5081        #${SECTION_ID} .dc-container{
5082          display:flex;
5083          flex-direction:column;
5084
5085          gap:28px;
5086        }
5087
5088
5089        #${SECTION_ID} .dc-intro{
5090          position:static;
5091          width:100%;
5092          padding:0;
5093
5094          text-align:center;
5095        }
5096
5097
5098        #${SECTION_ID} .dc-small-title{
5099          justify-content:center;
5100        }
5101
5102
5103        #${SECTION_ID} .dc-title{
5104          font-size:22px;
5105        }
5106
5107
5108        #${SECTION_ID} .dc-description{
5109          max-width:350px;
5110          margin:10px auto 0;
5111
5112          font-size:11.5px;
5113        }
5114
5115
5116        #${SECTION_ID} .dc-badge{
5117          margin:20px auto 0;
5118
5119          width:130px;
5120          height:73px;
5121        }
5122
5123
5124        #${SECTION_ID} .dc-list{
5125          width:100%;
5126          gap:9px;
5127        }
5128
5129
5130        #${SECTION_ID} .dc-item{
5131          grid-template-columns:42px 1fr;
5132
5133          gap:12px;
5134
5135          padding:16px 14px;
5136        }
5137
5138
5139        #${SECTION_ID} .dc-icon{
5140          width:42px;
5141          height:42px;
5142
5143          border-radius:12px;
5144
5145          font-size:18px;
5146        }
5147
5148
5149        #${SECTION_ID} .dc-question{
5150          font-size:12.5px;
5151        }
5152
5153
5154        #${SECTION_ID} .dc-answer{
5155          font-size:11.2px;
5156          line-height:1.8;
5157        }
5158
5159
5160        #${SECTION_ID} .dc-number{
5161          top:9px;
5162          left:10px;
5163        }
5164
5165
5166        #${SECTION_ID} .dc-note{
5167          font-size:10px;
5168        }
5169
5170      }
5171
5172
5173      @media(prefers-reduced-motion:reduce){
5174
5175        #${SECTION_ID} .dc-item,
5176        #${SECTION_ID} .dc-icon{
5177          transition:none;
5178        }
5179
5180      }
5181
5182    `;
5183
5184    document.head.appendChild(style);
5185  };
5186
5187
5188  /* =========================
5189     BUILD FAQ
5190  ========================= */
5191
5192  const buildFAQ = () => {
5193
5194    return FAQS.map((item, index) => `
5195
5196      <div class="dc-item">
5197
5198        <span class="dc-number">
5199          ${String(index + 1).padStart(2, "0")}
5200        </span>
5201
5202        <span class="dc-icon">
5203          <i class="ti ${item.icon}"></i>
5204        </span>
5205
5206        <div class="dc-content">
5207
5208          <h3 class="dc-question">
5209            ${item.title}
5210          </h3>
5211
5212          <p class="dc-answer">
5213            ${item.text}
5214          </p>
5215
5216        </div>
5217
5218      </div>
5219
5220    `).join("");
5221  };
5222
5223
5224  /* =========================
5225     HTML
5226  ========================= */
5227
5228  const buildHTML = () => `
5229
5230    <section id="${SECTION_ID}">
5231
5232      <div class="dc-container">
5233
5234
5235        <!-- RIGHT -->
5236
5237        <div class="dc-intro">
5238
5239          <div class="dc-small-title">
5240            DIGITAL STORE
5241          </div>
5242
5243          <h2 class="dc-title">
5244            كل اللي تحتاج<br>
5245            تعرفه عن <span>بطاقتك</span>
5246          </h2>
5247
5248          <p class="dc-description">
5249            معلومات سريعة وواضحة تساعدك تعرف
5250            طريقة استلام واستخدام بطاقتك الرقمية
5251            قبل إتمام عملية الشراء.
5252          </p>
5253
5254
5255          <div class="dc-badge">
5256
5257            <div class="dc-badge-top">
5258
5259              <span>B-STORE</span>
5260
5261              <i class="ti ti-credit-card dc-badge-icon"></i>
5262
5263            </div>
5264
5265            <span class="dc-badge-number">
5266              DIGITAL • CARD
5267            </span>
5268
5269          </div>
5270
5271        </div>
5272
5273
5274        <!-- LEFT -->
5275
5276        <div>
5277
5278          <div class="dc-list">
5279            ${buildFAQ()}
5280          </div>
5281
5282          <div class="dc-note">
5283            <i class="ti ti-bolt"></i>
5284            تجربة رقمية بسيطة وسريعة
5285          </div>
5286
5287        </div>
5288
5289
5290      </div>
5291
5292    </section>
5293
5294  `;
5295
5296
5297  /* =========================
5298     MOUNT
5299  ========================= */
5300
5301  const mount = () => {
5302
5303    if (document.getElementById(SECTION_ID)) {
5304      return true;
5305    }
5306
5307    const target =
5308      document.querySelector(TARGET_SELECTOR);
5309
5310    if (!target) return false;
5311
5312    injectIcons();
5313    injectCSS();
5314
5315    target.insertAdjacentHTML(
5316      "beforebegin",
5317      buildHTML()
5318    );
5319
5320    return true;
5321  };
5322
5323
5324  /* =========================
5325     START
5326  ========================= */
5327
5328  if (mount()) return;
5329
5330  let tries = 0;
5331
5332  const timer = setInterval(() => {
5333
5334    tries++;
5335
5336    if (mount() || tries >= 50) {
5337      clearInterval(timer);
5338    }
5339
5340  }, 200);
5341
5342})();*/
5343/*(function () {
5344    'use strict';
5345
5346    const STORAGE_KEY = 'site-language';
5347
5348    /* مكان السويتش على الشاشة (غيّر الأرقام دي لو عايز تحركه) */
5349    const SWITCHER_TOP = '12px';
5350    const SWITCHER_SIDE = '16px';
5351    const SWITCHER_SIDE_MOBILE = '10px';
5352
5353    const TRANSLATION_OVERRIDES = {
5354        'سبح': 'Prayer Beads',
5355        'محافظ': 'Wallets',
5356        'اشمغة': 'Shemaghs',
5357        'اقمشة': 'Fabrics',
5358        'ساعات رجالية': "Men's Watches"
5359    };
5360
5361    const MISTRANSLATION_FIXES = {};
5362
5363    const originalTextMap = new WeakMap();
5364
5365    const OVERRIDE_MARKER_ATTR = 'data-override-key';
5366
5367    function onBodyReady(fn) {
5368        if (document.body) {
5369            fn();
5370        } else {
5371            document.addEventListener('DOMContentLoaded', fn);
5372        }
5373    }
5374
5375    /* ------------------------------------------------------------------
5376       1) Styles: hide Google Translate banner / widget
5377    ------------------------------------------------------------------ */
5378
5379    if (!document.getElementById('custom-language-style')) {
5380
5381        const hideBannerStyle = document.createElement('style');
5382
5383        hideBannerStyle.id = 'custom-language-style';
5384
5385        hideBannerStyle.textContent = `
5386
5387            .goog-te-banner-frame,
5388            .goog-te-banner-frame.skiptranslate,
5389            iframe.goog-te-banner-frame,
5390            iframe[id$=".container"],
5391            .goog-te-balloon-frame,
5392            #goog-gt-tt,
5393            .goog-te-spinner-pos,
5394            .goog-tooltip,
5395            .goog-tooltip:hover,
5396            .goog-text-highlight,
5397            .goog-te-gadget-icon {
5398
5399                display: none !important;
5400                visibility: hidden !important;
5401                height: 0 !important;
5402                min-height: 0 !important;
5403                max-height: 0 !important;
5404                opacity: 0 !important;
5405                pointer-events: none !important;
5406            }
5407
5408            html body {
5409                top: 0 !important;
5410                position: static !important;
5411            }
5412
5413            html.translated-ltr,
5414            html.translated-rtl {
5415                margin-top: 0 !important;
5416            }
5417
5418            #google_translate_element {
5419                position: fixed !important;
5420                left: -99999px !important;
5421                top: -99999px !important;
5422                width: 1px !important;
5423                height: 1px !important;
5424                opacity: 0 !important;
5425                pointer-events: none !important;
5426            }
5427        `;
5428
5429        document.head.appendChild(hideBannerStyle);
5430    }
5431
5432    /* ------------------------------------------------------------------
5433       2) Body top fixer (Google Translate pushes body down)
5434    ------------------------------------------------------------------ */
5435
5436    const bodyTopFixer = new MutationObserver(function () {
5437
5438        if (document.body && document.body.style.top && document.body.style.top !== '0px') {
5439            document.body.style.top = '0px';
5440        }
5441    });
5442
5443    function startBodyTopFixer() {
5444
5445        bodyTopFixer.observe(document.documentElement, {
5446            attributes: true,
5447            attributeFilter: ['style'],
5448            subtree: false
5449        });
5450
5451        if (document.body) {
5452            bodyTopFixer.observe(document.body, {
5453                attributes: true,
5454                attributeFilter: ['style']
5455            });
5456        }
5457    }
5458
5459    onBodyReady(startBodyTopFixer);
5460
5461    /* ------------------------------------------------------------------
5462       3) Google Translate init + script injection
5463    ------------------------------------------------------------------ */
5464
5465    window.googleTranslateElementInit = function () {
5466
5467        if (!document.getElementById('google_translate_element')) return;
5468
5469        new google.translate.TranslateElement({
5470            pageLanguage: 'ar',
5471            includedLanguages: 'ar,en',
5472            autoDisplay: false
5473        }, 'google_translate_element');
5474    };
5475
5476    onBodyReady(function () {
5477
5478        if (document.getElementById('google_translate_element')) return;
5479
5480        const googleBox = document.createElement('div');
5481
5482        googleBox.id = 'google_translate_element';
5483
5484        googleBox.style.cssText = `
5485            position: fixed !important;
5486            left: -99999px !important;
5487            top: -99999px !important;
5488            width: 1px !important;
5489            height: 1px !important;
5490            opacity: 0 !important;
5491            pointer-events: none !important;
5492        `;
5493
5494        document.body.appendChild(googleBox);
5495    });
5496
5497    if (!document.getElementById('google-translate-script')) {
5498
5499        const script = document.createElement('script');
5500
5501        script.id = 'google-translate-script';
5502
5503        script.src =
5504            'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
5505
5506        document.head.appendChild(script);
5507    }
5508
5509    /* ------------------------------------------------------------------
5510       4) Custom switcher UI
5511          - بيتركّب مباشرة على <body> (مش جوه أي شريط/هيدر)
5512          - position: fixed + أعلى z-index ممكن
5513          => مفيش عنصر تاني يقدر يغطي عليه
5514    ------------------------------------------------------------------ */
5515
5516    function mountSwitcher() {
5517
5518        const old = document.getElementById('custom-language-switcher');
5519
5520        if (old) old.remove();
5521
5522        const oldStyle = document.getElementById('custom-language-switcher-style');
5523
5524        if (oldStyle) oldStyle.remove();
5525
5526        const switcher = document.createElement('div');
5527
5528        switcher.id = 'custom-language-switcher';
5529
5530        switcher.className = 'notranslate';
5531
5532        switcher.setAttribute('translate', 'no');
5533
5534        switcher.innerHTML = `
5535
5536            <div id="language-current">
5537                <img
5538                    class="current-flag"
5539                    src="https://flagcdn.com/w40/sa.png"
5540                    alt="Saudi Arabia"
5541                >
5542            </div>
5543
5544            <div id="language-dropdown">
5545
5546                <div
5547                    class="language-option"
5548                    data-lang="ar"
5549                >
5550                    <img
5551                        src="https://flagcdn.com/w40/sa.png"
5552                        alt="Saudi Arabia"
5553                    >
5554                </div>
5555
5556                <div
5557                    class="language-option"
5558                    data-lang="en"
5559                >
5560                    <img
5561                        src="https://flagcdn.com/w40/us.png"
5562                        alt="United States"
5563                    >
5564                </div>
5565
5566            </div>
5567        `;
5568
5569        const style = document.createElement('style');
5570
5571        style.id = 'custom-language-switcher-style';
5572
5573        style.textContent = `
5574
5575            #custom-language-switcher {
5576
5577                position: fixed !important;
5578
5579                top: ${SWITCHER_TOP} !important;
5580
5581                left: ${SWITCHER_SIDE} !important;
5582                right: auto !important;
5583
5584                width: 34px !important;
5585                height: 34px !important;
5586
5587                margin: 0 !important;
5588                padding: 0 !important;
5589
5590                background: #fff !important;
5591
5592                border-radius: 8px !important;
5593
5594                box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
5595
5596                z-index: 2147483647 !important;
5597
5598                direction: ltr !important;
5599
5600                pointer-events: auto !important;
5601
5602                transform: none !important;
5603
5604                transition: left .2s ease, right .2s ease !important;
5605            }
5606
5607            #custom-language-switcher.lang-en {
5608
5609                left: auto !important;
5610                right: ${SWITCHER_SIDE} !important;
5611            }
5612
5613            #custom-language-switcher.lang-en #language-dropdown {
5614
5615                left: auto !important;
5616                right: 0 !important;
5617            }
5618
5619            #language-current {
5620
5621                width: 34px !important;
5622                height: 34px !important;
5623
5624                display: flex !important;
5625
5626                align-items: center !important;
5627
5628                justify-content: center !important;
5629
5630                cursor: pointer !important;
5631
5632                position: relative !important;
5633
5634                z-index: 5 !important;
5635
5636                pointer-events: auto !important;
5637            }
5638
5639            #language-current img {
5640
5641                width: 25px !important;
5642                height: 17px !important;
5643
5644                display: block !important;
5645
5646                object-fit: cover !important;
5647
5648                border-radius: 2px !important;
5649
5650                cursor: pointer !important;
5651
5652                user-select: none !important;
5653
5654                pointer-events: none !important;
5655            }
5656
5657            #language-dropdown {
5658
5659                position: absolute !important;
5660
5661                left: -4px !important;
5662
5663                top: 39px !important;
5664
5665                width: 42px !important;
5666
5667                padding: 5px !important;
5668
5669                background: #fff !important;
5670
5671                border-radius: 6px !important;
5672
5673                box-shadow:
5674                    0 5px 20px rgba(0,0,0,.25) !important;
5675
5676                z-index: 2147483647 !important;
5677
5678                display: none !important;
5679            }
5680
5681            #custom-language-switcher.open
5682            #language-dropdown {
5683
5684                display: block !important;
5685            }
5686
5687            .language-option {
5688
5689                width: 100% !important;
5690
5691                height: 30px !important;
5692
5693                display: flex !important;
5694
5695                align-items: center !important;
5696
5697                justify-content: center !important;
5698
5699                cursor: pointer !important;
5700
5701                border-radius: 4px !important;
5702
5703                transition: background .15s ease !important;
5704            }
5705
5706            .language-option:hover {
5707
5708                background: #f1f1f1 !important;
5709            }
5710
5711            .language-option img {
5712
5713                width: 25px !important;
5714                height: 17px !important;
5715
5716                object-fit: cover !important;
5717
5718                border-radius: 2px !important;
5719
5720                display: block !important;
5721
5722                pointer-events: none !important;
5723            }
5724
5725            @media (max-width: 767px) {
5726
5727                #custom-language-switcher {
5728
5729                    left: ${SWITCHER_SIDE_MOBILE} !important;
5730
5731                }
5732
5733                #custom-language-switcher.lang-en {
5734
5735                    left: auto !important;
5736                    right: ${SWITCHER_SIDE_MOBILE} !important;
5737                }
5738
5739            }
5740
5741        `;
5742
5743        document.head.appendChild(style);
5744
5745        document.body.appendChild(switcher);
5746
5747        applySavedLanguage();
5748
5749    }
5750
5751    onBodyReady(mountSwitcher);
5752
5753    // لو الموقع (أو أي سكريبت) شال السويتش من الصفحة، رجّعه تاني
5754    onBodyReady(function () {
5755
5756        const keepAlive = new MutationObserver(function () {
5757
5758            if (!document.getElementById('custom-language-switcher')) {
5759                mountSwitcher();
5760            }
5761        });
5762
5763        keepAlive.observe(document.body, { childList: true });
5764    });
5765
5766    /* ------------------------------------------------------------------
5767       5) Switcher click handling
5768          بنحدد الضغطة بالإحداثيات (مش بـ e.target)، عشان حتى لو فيه
5769          عنصر شفاف/تاني فوقه، الضغطة على مكان السويتش تشتغل.
5770    ------------------------------------------------------------------ */
5771
5772    function pointInside(el, x, y) {
5773
5774        if (!el) return false;
5775
5776        const r = el.getBoundingClientRect();
5777
5778        if (!r.width || !r.height) return false;
5779
5780        return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
5781    }
5782
5783    document.addEventListener('click', function (e) {
5784
5785        const switcherElement =
5786            document.getElementById('custom-language-switcher');
5787
5788        if (!switcherElement) return;
5789
5790        const x = e.clientX;
5791        const y = e.clientY;
5792
5793        // 1) اختيار لغة من القائمة
5794        const options = switcherElement.querySelectorAll('.language-option');
5795
5796        for (let i = 0; i < options.length; i++) {
5797
5798            if (pointInside(options[i], x, y)) {
5799
5800                e.preventDefault();
5801                e.stopPropagation();
5802
5803                switchLanguage(options[i].getAttribute('data-lang'));
5804
5805                switcherElement.classList.remove('open');
5806
5807                return;
5808            }
5809        }
5810
5811        // 2) فتح/قفل القائمة
5812        if (pointInside(switcherElement.querySelector('#language-current'), x, y)) {
5813
5814            e.preventDefault();
5815            e.stopPropagation();
5816
5817            switcherElement.classList.toggle('open');
5818
5819            return;
5820        }
5821
5822        // 3) ضغطة برة السويتش: اقفل القائمة
5823        if (!switcherElement.contains(e.target)) {
5824
5825            switcherElement.classList.remove('open');
5826        }
5827
5828    }, true);
5829
5830    /* ------------------------------------------------------------------
5831       6) Language switching core
5832    ------------------------------------------------------------------ */
5833
5834    function switchLanguage(lang) {
5835
5836        localStorage.setItem(STORAGE_KEY, lang);
5837
5838        updateCurrentFlag(lang);
5839
5840        updatePageDirection(lang);
5841
5842        updateSwitcherPosition(lang);
5843
5844        if (lang === 'en') {
5845            translateToEnglish();
5846        } else {
5847            translateToArabic();
5848        }
5849    }
5850
5851    function updatePageDirection(lang) {
5852
5853        const dir = lang === 'en' ? 'ltr' : 'rtl';
5854
5855        document.documentElement.setAttribute('dir', dir);
5856        document.documentElement.setAttribute('lang', lang);
5857
5858        if (document.body) {
5859            document.body.setAttribute('dir', dir);
5860        }
5861    }
5862
5863    function updateSwitcherPosition(lang) {
5864
5865        const switcherElement =
5866            document.getElementById('custom-language-switcher');
5867
5868        if (!switcherElement) return;
5869
5870        if (lang === 'en') {
5871            switcherElement.classList.add('lang-en');
5872        } else {
5873            switcherElement.classList.remove('lang-en');
5874        }
5875    }
5876
5877    function updateCurrentFlag(lang) {
5878
5879        const flag =
5880            document.querySelector(
5881                '#custom-language-switcher .current-flag'
5882            );
5883
5884        if (!flag) return;
5885
5886        if (lang === 'en') {
5887
5888            flag.src =
5889                'https://flagcdn.com/w40/us.png';
5890
5891            flag.alt =
5892                'United States';
5893
5894        } else {
5895
5896            flag.src =
5897                'https://flagcdn.com/w40/sa.png';
5898
5899            flag.alt =
5900                'Saudi Arabia';
5901        }
5902    }
5903
5904    /* ------------------------------------------------------------------
5905       7) Google Translate trigger
5906    ------------------------------------------------------------------ */
5907
5908    function waitForGoogleCombo(callback, attemptsLeft) {
5909
5910        if (typeof attemptsLeft !== 'number') {
5911            attemptsLeft = 20;
5912        }
5913
5914        const select = document.querySelector('.goog-te-combo');
5915
5916        if (select) {
5917            callback(select);
5918            return;
5919        }
5920
5921        if (attemptsLeft <= 0) {
5922            return;
5923        }
5924
5925        setTimeout(function () {
5926            waitForGoogleCombo(callback, attemptsLeft - 1);
5927        }, 500);
5928    }
5929
5930    function fireGoogleTranslate(langCode) {
5931
5932        waitForGoogleCombo(function (select) {
5933
5934            select.value = langCode;
5935
5936            select.dispatchEvent(new Event('change', { bubbles: true }));
5937            select.dispatchEvent(new Event('change', { bubbles: true }));
5938
5939            setTimeout(function () {
5940
5941                const freshSelect =
5942                    document.querySelector('.goog-te-combo') || select;
5943
5944                freshSelect.value = langCode;
5945
5946                freshSelect.dispatchEvent(
5947                    new Event('change', { bubbles: true })
5948                );
5949
5950            }, 400);
5951        });
5952    }
5953
5954    function translateToEnglish() {
5955        prepareOverrideMarkers();   // mark BEFORE Google swaps the text
5956        fireGoogleTranslate('en');
5957        scheduleFixPasses();
5958    }
5959
5960    function translateToArabic() {
5961        fireGoogleTranslate('ar');
5962        scheduleRestorePass();
5963    }
5964
5965    /* ------------------------------------------------------------------
5966       8) Text node collection + snapshot
5967    ------------------------------------------------------------------ */
5968
5969    function collectTranslatableTextNodes() {
5970
5971        const skipTags = new Set([
5972            'SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'TEXTAREA', 'INPUT'
5973        ]);
5974
5975        const walker = document.createTreeWalker(
5976            document.body,
5977            NodeFilter.SHOW_TEXT,
5978            {
5979                acceptNode(node) {
5980
5981                    if (!node.nodeValue || !node.nodeValue.trim()) {
5982                        return NodeFilter.FILTER_REJECT;
5983                    }
5984
5985                    const parent = node.parentElement;
5986
5987                    if (!parent) {
5988                        return NodeFilter.FILTER_REJECT;
5989                    }
5990
5991                    if (skipTags.has(parent.tagName)) {
5992                        return NodeFilter.FILTER_REJECT;
5993                    }
5994
5995                    if (
5996                        parent.closest(
5997                            '#google_translate_element, #custom-language-switcher'
5998                        )
5999                    ) {
6000                        return NodeFilter.FILTER_REJECT;
6001                    }
6002
6003                    return NodeFilter.FILTER_ACCEPT;
6004                }
6005            }
6006        );
6007
6008        const nodes = [];
6009        let current;
6010
6011        while ((current = walker.nextNode())) {
6012            nodes.push(current);
6013        }
6014
6015        return nodes;
6016    }
6017
6018    function snapshotOriginalText() {
6019
6020        collectTranslatableTextNodes().forEach(function (node) {
6021
6022            if (!originalTextMap.has(node)) {
6023                originalTextMap.set(node, node.nodeValue);
6024            }
6025        });
6026    }
6027
6028    /* ------------------------------------------------------------------
6029       9) Override markers  (fix for words Google mistranslates)
6030    ------------------------------------------------------------------ */
6031
6032    function clearOverrideMarkers() {
6033
6034        document
6035            .querySelectorAll('[' + OVERRIDE_MARKER_ATTR + ']')
6036            .forEach(function (el) {
6037                el.removeAttribute(OVERRIDE_MARKER_ATTR);
6038            });
6039    }
6040
6041    /**
6042     * Runs BEFORE Google translates. Walks the Arabic DOM and tags every
6043     * element whose text matches one of the OVERRIDE keys, so we can find
6044     * it again after Google rewrites the DOM.
6045     */
6046    function prepareOverrideMarkers() {
6047
6048        clearOverrideMarkers();
6049
6050        collectTranslatableTextNodes().forEach(function (node) {
6051
6052            const key = (node.nodeValue || '').trim();
6053
6054            if (!Object.prototype.hasOwnProperty.call(TRANSLATION_OVERRIDES, key)) {
6055                return;
6056            }
6057
6058            const parent = node.parentElement;
6059
6060            if (!parent) return;
6061
6062            if (parent.hasAttribute(OVERRIDE_MARKER_ATTR)) return;
6063
6064            parent.setAttribute(OVERRIDE_MARKER_ATTR, key);
6065        });
6066    }
6067
6068    /**
6069     * Runs AFTER Google translates. Finds every marked element and forces
6070     * the correct English text inside it, replacing whatever Google put.
6071     */
6072    function applyOverridesToMarkedElements() {
6073
6074        document
6075            .querySelectorAll('[' + OVERRIDE_MARKER_ATTR + ']')
6076            .forEach(function (el) {
6077
6078                const key = el.getAttribute(OVERRIDE_MARKER_ATTR);
6079
6080                const replacement = TRANSLATION_OVERRIDES[key];
6081
6082                if (!replacement) return;
6083
6084                const walker = document.createTreeWalker(
6085                    el,
6086                    NodeFilter.SHOW_TEXT,
6087                    {
6088                        acceptNode: function (n) {
6089                            return (n.nodeValue && n.nodeValue.trim())
6090                                ? NodeFilter.FILTER_ACCEPT
6091                                : NodeFilter.FILTER_REJECT;
6092                        }
6093                    }
6094                );
6095
6096                const firstNode = walker.nextNode();
6097
6098                if (!firstNode) {
6099                    el.textContent = replacement;
6100                    return;
6101                }
6102
6103                // Already correct and no extra text nodes? skip.
6104                if (
6105                    firstNode.nodeValue === replacement &&
6106                    !walker.nextNode()
6107                ) {
6108                    return;
6109                }
6110
6111                // Replace the first text node, blank out the rest
6112                // (Google may split text across multiple nodes).
6113                firstNode.nodeValue = replacement;
6114
6115                let n;
6116                while ((n = walker.nextNode())) {
6117                    n.nodeValue = '';
6118                }
6119            });
6120    }
6121
6122    /* ------------------------------------------------------------------
6123       10) Manual mistranslation regex fixes
6124    ------------------------------------------------------------------ */
6125
6126    const mistranslationRegexes = Object.keys(MISTRANSLATION_FIXES).map(function (wrong) {
6127
6128        const escaped = wrong.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
6129
6130        return {
6131            regex: new RegExp('\\b' + escaped + '\\b', 'gi'),
6132            correct: MISTRANSLATION_FIXES[wrong]
6133        };
6134    });
6135
6136    /* ------------------------------------------------------------------
6137       11) Mutation watcher (re-run fixes after Google mutates DOM)
6138    ------------------------------------------------------------------ */
6139
6140    let applyingFixes = false;
6141
6142    const translationWatcher = new MutationObserver(function () {
6143
6144        if (applyingFixes) return;
6145
6146        const lang = localStorage.getItem(STORAGE_KEY) || 'ar';
6147
6148        if (lang === 'en') {
6149            scheduleFixPasses();
6150        } else {
6151            scheduleRestorePass();
6152        }
6153    });
6154
6155    function startTranslationWatcher() {
6156
6157        translationWatcher.observe(document.body, {
6158            childList: true,
6159            subtree: true,
6160            characterData: true
6161        });
6162    }
6163
6164    onBodyReady(startTranslationWatcher);
6165
6166    /* ------------------------------------------------------------------
6167       12) Fix pass  (English)
6168    ------------------------------------------------------------------ */
6169
6170    let fixDebounceTimer = null;
6171
6172    function scheduleFixPasses() {
6173
6174        clearTimeout(fixDebounceTimer);
6175
6176        fixDebounceTimer = setTimeout(applyManualFixes, 250);
6177    }
6178
6179    function applyManualFixes() {
6180
6181        const lang = localStorage.getItem(STORAGE_KEY) || 'ar';
6182
6183        if (lang !== 'en') return;
6184
6185        snapshotOriginalText();
6186
6187        applyingFixes = true;
6188
6189        // 1) Force overrides on marked elements (fixes Google's wrong words)
6190        applyOverridesToMarkedElements();
6191
6192        // 2) Regex-based mistranslation fixes
6193        if (mistranslationRegexes.length) {
6194
6195            collectTranslatableTextNodes().forEach(function (node) {
6196
6197                let value = node.nodeValue;
6198                let changed = false;
6199
6200                mistranslationRegexes.forEach(function (fix) {
6201
6202                    if (fix.regex.test(value)) {
6203                        fix.regex.lastIndex = 0;
6204                        value = value.replace(fix.regex, fix.correct);
6205                        changed = true;
6206                    }
6207                });
6208
6209                if (changed) {
6210                    node.nodeValue = value;
6211                }
6212            });
6213        }
6214
6215        setTimeout(function () {
6216
6217            applyingFixes = false;
6218
6219        }, 100);
6220    }
6221
6222    /* ------------------------------------------------------------------
6223       13) Restore pass  (Arabic)
6224    ------------------------------------------------------------------ */
6225
6226    let restoreDebounceTimer = null;
6227
6228    function scheduleRestorePass() {
6229
6230        clearTimeout(restoreDebounceTimer);
6231
6232        restoreDebounceTimer = setTimeout(restoreOriginalText, 250);
6233    }
6234
6235    function restoreOriginalText() {
6236
6237        const lang = localStorage.getItem(STORAGE_KEY) || 'ar';
6238
6239        if (lang !== 'ar') return;
6240
6241        applyingFixes = true;
6242
6243        clearOverrideMarkers();
6244
6245        const textNodes = collectTranslatableTextNodes();
6246
6247        textNodes.forEach(function (node) {
6248
6249            if (!originalTextMap.has(node)) return;
6250
6251            const original = originalTextMap.get(node);
6252
6253            if (node.nodeValue !== original) {
6254                node.nodeValue = original;
6255            }
6256        });
6257
6258        setTimeout(function () {
6259
6260            applyingFixes = false;
6261
6262        }, 100);
6263    }
6264
6265    /* ------------------------------------------------------------------
6266       14) Apply saved language on load
6267    ------------------------------------------------------------------ */
6268
6269    function applySavedLanguage() {
6270
6271        const saved =
6272            localStorage.getItem(STORAGE_KEY) || 'ar';
6273
6274        updateCurrentFlag(saved);
6275
6276        updatePageDirection(saved);
6277
6278        updateSwitcherPosition(saved);
6279
6280        snapshotOriginalText();
6281
6282        if (saved === 'en') {
6283
6284            setTimeout(function () {
6285                translateToEnglish();
6286            }, 700);
6287        }
6288    }
6289
6290})();*/
6291//==//
6292/*(function () {
6293
6294  const TARGET_SELECTOR = ".tf-top-bar";
6295  const BAR_ID = "bstore-topbar-marquee";
6296
6297const ITEMS = [
6298    { icon: "ti-shield-check",   text: "ضمان الجودة على كل بطاقة" },
6299    { icon: "ti-bolt",           text: "تفعيل مباشر في حسابك" },
6300    { icon: "ti-headset",        text: "فريق دعم متاح لخدمتك" },
6301    { icon: "ti-lock",           text: "حماية كاملة لبياناتك" },
6302    { icon: "ti-flame",          text: "عروض وبطاقات تتجدد أول بأول" }
6303  ];
6304
6305  const TABLER_CSS_URL = "https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css";
6306
6307  const PRIMARY = "#5D408C";
6308  const SECONDARY = "#463562";
6309  const BG = "#f6f0fb";
6310
6311
6312  const SCROLL_DURATION = 34;
6313  const SCROLL_DURATION_MOBILE = 26;
6314
6315  const injectIcons = () => {
6316    if (document.getElementById("bstore-tabler-icons")) return;
6317    const link = document.createElement("link");
6318    link.id = "bstore-tabler-icons";
6319    link.rel = "stylesheet";
6320    link.href = TABLER_CSS_URL;
6321    document.head.appendChild(link);
6322  };
6323
6324  const injectCSS = () => {
6325    if (document.getElementById("bstore-topbar-styles")) return;
6326    const style = document.createElement("style");
6327    style.id = "bstore-topbar-styles";
6328    style.textContent = `
6329      ${TARGET_SELECTOR}.bstore-topbar-override::before{content:none!important;background:none!important;animation:none!important;height:0!important;}
6330      ${TARGET_SELECTOR}.bstore-topbar-override{position:relative!important;z-index:10!important;padding:0!important;background:${BG}!important;}
6331      #${BAR_ID}{position:relative;width:100%;height:44px;overflow:hidden;box-sizing:border-box;direction:rtl;background:${BG};border-bottom:1px solid rgba(93,64,140,.14);}
6332
6333
6334      #${BAR_ID}::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,${BG},transparent 12%,transparent 88%,${BG});pointer-events:none;z-index:2;}
6335
6336
6337      #${BAR_ID}::after{content:"";position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120px) skewX(-20deg);animation:bstoreShine 9s linear infinite;pointer-events:none;z-index:1;}
6338      @keyframes bstoreShine{0%{transform:translateX(-150px) skewX(-20deg)}100%{transform:translateX(110vw) skewX(-20deg)}}
6339
6340      /* الحاوية بتتحرك بنسبة مئوية ثابتة (0% -> 50%) بدل ما تتقاس بالجافاسكريبت،
6341         وده بيضمن لفة متصلة 100% لأن كل مجموعة متكررة مرتين جوه نفسها */
6342      #${BAR_ID} .rq-track{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;width:max-content;will-change:transform;animation:bstoreScroll ${SCROLL_DURATION}s linear infinite;}
6343      @keyframes bstoreScroll{from{transform:translateX(0)}to{transform:translateX(50%)}}
6344
6345      #${BAR_ID}
6345 .rq-group{display:flex;align-items:center;flex-shrink:0;}
6346      #${BAR_ID} .rq-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:${SECONDARY};font-size:12px;font-weight:600;letter-spacing:.15px;padding-inline-start:28px;}
6347      #${BAR_ID} .rq-item i{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,${PRIMARY},${SECONDARY});color:#fff;font-size:10.5px;box-shadow:0 3px 8px rgba(93,64,140,.22);flex-shrink:0;}
6348
6349 
6350      #${BAR_ID} .rq-separator{width:4px;height:4px;border-radius:50%;background:${PRIMARY};opacity:.4;flex-shrink:0;margin-inline-start:26px;}
6351
6352      #${BAR_ID} .rq-mark{display:inline-flex;align-items:center;justify-content:center;color:${PRIMARY};font-size:11px;font-weight:800;letter-spacing:1.5px;opacity:.95;flex-shrink:0;padding-inline-start:26px;}
6353
6354      @media(max-width:767px){
6355        #${BAR_ID}{height:35px;}
6356        #${BAR_ID} .rq-track{animation-duration:${SCROLL_DURATION_MOBILE}s;}
6357        #${BAR_ID} .rq-item{font-size:10.5px;gap:6px;padding-inline-start:16px;}
6358        #${BAR_ID} .rq-item i{width:18px;height:18px;font-size:9px;}
6359        #${BAR_ID} .rq-separator{margin-inline-start:16px;}
6360        #${BAR_ID} .rq-mark{font-size:9px;padding-inline-start:16px;}
6361      }
6362      @media(prefers-reduced-motion:reduce){
6363        #${BAR_ID} .rq-track{animation:none!important;}
6364        #${BAR_ID}::after{display:none;}
6365      }
6366    `;
6367    document.head.appendChild(style);
6368  };
6369
6370  const buildItemsHTML = () => ITEMS.map(item => `
6371    <span class="rq-mark">B-STORE</span>
6372    <span class="rq-item"><i class="ti ${item.icon}"></i><span>${item.text}</span></span>
6373    <span class="rq-separator"></span>
6374  `).join("");
6375
6376  // نبني المحتوى ونكرره مرتين جوه كل مجموعة (بدل القياس بالجافاسكريبت)،
6377  // فتبقى كل مجموعة = نسختين من نفس المحتوى، وبكده لفة الـ 50% بتساوي بالظبط مجموعة واحدة
6378  const buildGroupHTML = () => {
6379    const items = buildItemsHTML();
6380    return `${items}${items}`;
6381  };
6382
6383  const mount = () => {
6384    const target = document.querySelector(TARGET_SELECTOR);
6385    if (!target) return false;
6386
6387    injectIcons();
6388    injectCSS();
6389
6390    if (!document.getElementById(BAR_ID)) {
6391      target.classList.add("bstore-topbar-override");
6392      const bar = document.createElement("div");
6393      bar.id = BAR_ID;
6394
6395      const track = document.createElement("div");
6396      track.className = "rq-track";
6397      track.innerHTML = `
6398        <div class="rq-group">${buildGroupHTML()}</div>
6399        <div class="rq-group" aria-hidden="true">${buildGroupHTML()}</div>
6400      `;
6401      bar.appendChild(track);
6402      target.appendChild(bar);
6403    }
6404
6405    return true;
6406  };
6407
6408  if (mount()) return;
6409
6410  let tries = 0;
6411  const maxTries = 60;
6412  const timer = setInterval(() => {
6413    tries++;
6414    if (mount() || tries >= maxTries) clearInterval(timer);
6415  }, 100);
6416
6417})();*/
6418//==//
6419</script>
6419
6420
6421
6422
6423
6424
6425<script>
6426	if ("serviceWorker" in navigator) {
6427		window.addEventListener("load", function () {
6428			navigator.serviceWorker.register("/sw.js")
6429				.catch(function (error) {
6430					console.warn("Service worker registration failed:", error);
6431				});
6432		});
6433	}
6434</script>
6434
6435
6436
6437<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"2c19977c444b43c6a6a5f92d02eccbbb","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 6437
6437
6438<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a42c39a1bb4bf991',t:'MTc5MDY5Nzg4MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
6438</body>
6439
6440</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.