/* ============================================================ ALMATJARR — Checkout Form Skin (Override) ============================================================ يُلصق هذا الكود بالكامل داخل الـ Global Header CSS. الكود ده بيستهدف نسختين من فورم الـ checkout مع بعض: 1) الصفحة العادية → .product_form_checkout.checkout_container 2) صفحة Buy Now / Same Page (EasyOrders) → .contact-info-heading (الـ
نفسه هو الكارت في النسخة دي) الكلاسات المشتركة (global_input / global_textarea / select__control / gov_select ... إلخ) موجودة في الاتنين بنفس الاسم، فبنستخدم :is() نجمعهم في selector واحد بدل ما نكرر كل قاعدة مرتين. كل حاجة متحوّطة بـ !important عشان تكسر الـ Tailwind utility classes الأصلية. وكل الـ selectors مقفولة جوه نطاق الفورم بس (.product_form_checkout / .checkout_form / .contact-info-heading) عشان الكود ميأثرش على أي حاجة تانية في الموقع حتى لو شغال Global على كل الصفحات. ============================================================ */ /* لو الـ Global Header مفيهوش خط Cairo محمّل أصلاً، سيبي السطر ده. لو موجود بالفعل (مثلاً عبر في الـ ) امسحيه عشان تتجنبي تحميل الخط مرتين. لازم يفضل أول سطر في الملف. */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap'); :is(.product_form_checkout, .checkout_form, .contact-info-heading) { --mt-dark: #1E1E1E; --mt-charcoal: #2B2926; --mt-beige: #EFE6DA; --mt-gold: #C88A2A; --mt-cream: #F7F3EC; --mt-white: #FFFCF7; } /* ---------- 1) الكارت الرئيسي (الصفحتين مع بعض) ---------- */ .product_form_checkout.checkout_container, .contact-info-heading { background: radial-gradient(circle at 12% -15%, rgba(200, 138, 42, 0.34), transparent 42%), radial-gradient(circle at 105% 110%, rgba(185, 119, 22, 0.24), transparent 42%), rgba(30, 30, 30, 0.94) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; border: 1px solid rgba(200, 138, 42, 0.38) !important; border-radius: 28px !important; box-shadow: 0 0 110px 15px rgba(200, 138, 42, 0.22), 0 0 240px 70px rgba(185, 119, 22, 0.13), 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; font-family: 'Cairo', sans-serif !important; position: relative !important; overflow: hidden !important; color: var(--mt-white) !important; } /* الإطار المنقّط الأصلي (الـ SVG جوه الكارت) — بدل ما نشيله نلوّنه ذهبي فيبقى تفصيلة فخامة بدل خط تصميم أساسي */ .product_form_checkout.checkout_container > svg[aria-hidden="true"], .contact-info-heading > svg[aria-hidden="true"] { color: var(--mt-gold) !important; opacity: 0.35 !important; } /* هوية المتجر فوق الفورم — محقون بـ CSS content لأننا مش بنلمس الـ HTML، فبنستخدم ::before على الكارت نفسه */ .product_form_checkout.checkout_container::before, .contact-info-heading::before { content: "ALMATJARR ◇ المتجر"; display: block; text-align: center; font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.3em; background: linear-gradient(180deg, var(--mt-cream), var(--mt-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; position: relative; z-index: 2; } /* ---------- 2) عنوان الفورم (h2 في صفحة / p في التانية) ---------- */ .product_form_checkout > p.text-lg.font-bold, .contact-info-heading > h2.text-lg { font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; text-align: center !important; color: var(--mt-white) !important; position: relative; z-index: 2; } /* ---------- 3) عداد الكمية (لو موجود) ---------- */ :is(.product_form_checkout, .contact-info-heading) .in-product-quantity-counter label { color: var(--mt-cream) !important; font-family: 'Cairo', sans-serif !important; font-size: 13px !important; } :is(.product_form_checkout, .contact-info-heading) .quantity_container > div { border: 1px solid rgba(200, 138, 42, 0.38) !important; background: rgba(255, 255, 255, 0.04) !important; border-radius: 999px !important; } :is(.product_form_checkout, .contact-info-heading) .quantity_container button { background: rgba(200, 138, 42, 0.14) !important; color: var(--mt-gold) !important; border-radius: 8px !important; } :is(.product_form_checkout, .contact-info-heading) .quantity_container button:disabled { color: #8A8177 !important; } :is(.product_form_checkout, .contact-info-heading) .quantity_container p { color: var(--mt-cream) !important; font-weight: 700 !important; } /* ---------- 4) الإنبوتس (اسم / تليفون / عنوان) — مشتركة بين الصفحتين ---------- */ :is(.product_form_checkout, .contact-info-heading) .global_input, :is(.product_form_checkout, .contact-info-heading) .global_textarea { background: var(--mt-beige) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 16px !important; color: var(--mt-dark) !important; font-family: 'Cairo', sans-serif !important; } :is(.product_form_checkout, .contact-info-heading) .global_input::placeholder, :is(.product_form_checkout, .contact-info-heading) .global_textarea::placeholder { color: #8C7B68 !important; } :is(.product_form_checkout, .contact-info-heading) .global_input:focus, :is(.product_form_checkout, .contact-info-heading) .global_textarea:focus { background: #FFF9F0 !important; border-color: var(--mt-gold) !important; box-shadow: 0 0 0 3px rgba(200, 138, 42, 0.25) !important; } /* أيقونات الاسم/التليفون جوه الإنبوت */ :is(.product_form_checkout, .contact-info-heading) .relative.mt-1 svg { color: var(--mt-charcoal) !important; } /* ---------- 5) السيليكت (المحافظة) — react-select — مشترك ---------- */ :is(.product_form_checkout, .contact-info-heading) .select__control { background: var(--mt-beige) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 16px !important; min-height: 48px !important; } :is(.product_form_checkout, .contact-info-heading) .select__placeholder { color: #8C7B68 !important; font-family: 'Cairo', sans-serif !important; } :is(.product_form_checkout, .contact-info-heading) .select__indicator-separator { background: rgba(30, 30, 30, 0.14) !important; } :is(.product_form_checkout, .contact-info-heading) .select__dropdown-indicator svg { fill: var(--mt-charcoal) !important; } /* أيقونة الموقع (Pin) اللي فوق السيليكت */ :is(.product_form_checkout, .contact-info-heading) .gov_select ~ div svg { color: var(--mt-charcoal) !important; } /* القيمة المختارة (اسم المحافظة بعد الاختيار) والنص المكتوب */ :is(.product_form_checkout, .contact-info-heading) .select__single-value, :is(.product_form_checkout, .contact-info-heading) .select__input-container, :is(.product_form_checkout, .contact-info-heading) .select__input { color: var(--mt-dark) !important; font-family: 'Cairo', sans-serif !important; } /* ---------- 5.1) القائمة المنسدلة نفسها (المحافظات) ---------- */ :is(.product_form_checkout, .contact-info-heading) .select__menu { background: radial-gradient(circle at 90% 0%, rgba(200, 138, 42, 0.18), transparent 55%), rgba(24, 22, 19, 0.96) !important; backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; border: 1px solid rgba(200, 138, 42, 0.30) !important; border-radius: 16px !important; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 45px rgba(200, 138, 42, 0.18) !important; overflow: hidden !important; z-index: 40 !important; padding: 0 !important; } :is(.product_form_checkout, .contact-info-heading) .select__menu-list { padding: 6px !important; background: transparent !important; } :is(.product_form_checkout, .contact-info-heading) .select__option { background: transparent !important; color: var(--mt-cream) !important; font-family: 'Cairo', sans-serif !important; font-size: 14px !important; border-radius: 10px !important; padding: 11px 14px !important; cursor: pointer !important; transition: background 0.15s ease, color 0.15s ease !important; } :is(.product_form_checkout, .contact-info-heading) .select__option--is-focused { background: rgba(200, 138, 42, 0.14) !important; color: var(--mt-gold) !important; } :is(.product_form_checkout, .contact-info-heading) .select__option--is-selected { background: linear-gradient(135deg, #D59A3B, #B97716) !important; color: #FFFFFF !important; } :is(.product_form_checkout, .contact-info-heading) .select__menu-list::-webkit-scrollbar { width: 6px !important; } :is(.product_form_checkout, .contact-info-heading) .select__menu-list::-webkit-scrollbar-thumb { background: rgba(200, 138, 42, 0.44) !important; border-radius: 999px !important; } :is(.product_form_checkout, .contact-info-heading) .select__menu-list::-webkit-scrollbar-track { background: transparent !important; } /* ---------- 6) اللابلز العامة (شحن / كوبون / إجمالي — لو موجودين) ---------- */ :is(.product_form_checkout, .contact-info-heading) .text-gray-600 { color: rgba(247, 243, 236, 0.72) !important; font-family: 'Cairo', sans-serif !important; } :is(.product_form_checkout, .contact-info-heading) .shipping_cost { color: var(--mt-cream) !important; font-weight: 700 !important; } /* ---------- 7) زرار الكوبون (لو موجود) ---------- */ :is(.product_form_checkout, .contact-info-heading) button.border-skin-primary { border: 1px solid var(--mt-gold) !important; background: transparent !important; color: var(--mt-gold) !important; font-family: 'Cairo', sans-serif !important; } :is(.product_form_checkout, .contact-info-heading) button.border-skin-primary:hover { background: rgba(200, 138, 42, 0.12) !important; } /* ---------- 8) الإجمالي (لو موجود) ---------- */ :is(.product_form_checkout, .contact-info-heading) .total_price_container { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 18px !important; } :is(.product_form_checkout, .contact-info-heading) .total_price { font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; font-size: 24px !important; background: linear-gradient(180deg, var(--mt-cream), var(--mt-gold)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } :is(.product_form_checkout, .contact-info-heading) .total_price span { font-size: 13px !important; -webkit-text-fill-color: var(--mt-gold) !important; } /* ---------- 9) زرار إتمام الطلب — form_checkout_btn (صفحة 1) و checkout_buy_now (صفحة Same Page / Buy Now) ---------- */ :is(.form_checkout_btn, .checkout_buy_now) { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, var(--mt-cream), var(--mt-gold) 55%, #B8965F) !important; color: var(--mt-dark) !important; border: none !important; border-radius: 999px !important; font-family: 'Cairo', sans-serif !important; font-weight: 800 !important; box-shadow: 0 14px 34px -10px rgba(200, 138, 42, 0.48) !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; } :is(.form_checkout_btn, .checkout_buy_now):hover { transform: translateY(-2px) !important; box-shadow: 0 18px 40px -10px rgba(200, 138, 42, 0.64) !important; } :is(.form_checkout_btn, .checkout_buy_now)::after { content: "" !important; position: absolute !important; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important; transform: skewX(-20deg); animation: mt-shimmer 3.2s ease-in-out infinite; } @keyframes mt-shimmer { 0% { left: -80px; } 45% { left: 110%; } 100% { left: 110%; } } @media (prefers-reduced-motion: reduce) { :is(.form_checkout_btn, .checkout_buy_now)::after { animation: none !important; } } /* ---------- 10) شريط الزرار الثابت أسفل الشاشة (موبايل) ---------- ده خاص بصفحة Same Page / Buy Now بس — الزرار بيتحط جوه شريط ثابت (fixed bottom) بخلفية بيضاء وبوردر رمادي. بنشيلهم ونحطه بدرجة فحمية متدرجة تناسب الهوية بدل ما يفضل شريط أبيض غريب */ .checkout_form .max-md\:bg-white { background: linear-gradient(180deg, rgba(30, 30, 30, 0), rgba(30, 30, 30, 0.94) 45%) !important; } .checkout_form .border-t.border-gray-200 { border-top: 1px solid rgba(200, 138, 42, 0.25) !important; } /* ============================================================ وسائل الدفع — Payment Methods ============================================================ */ :is(.checkout_form, .product_form_checkout, .contact-info-heading) span.text-lg.font-bold.text-gray-700 { color: var(--mt-charcoal) !important; font-family: 'Cairo', sans-serif !important; font-size: 17px !important; font-weight: 800 !important; margin: 22px 0 14px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payments_container { gap: 12px !important; margin-top: 14px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card { width: 100% !important; background: linear-gradient( 135deg, rgba(255,255,255,0.94), rgba(247,243,236,0.96) ) !important; border: 1px solid rgba(200,138,42,0.22) !important; border-radius: 18px !important; padding: 16px 18px !important; box-shadow: 0 10px 30px -20px rgba(30,30,30,0.35), inset 0 1px 0 rgba(255,255,255,0.9) !important; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card:hover { transform: translateY(-2px) !important; border-color: rgba(200,138,42,0.55) !important; box-shadow: 0 16px 34px -20px rgba(30,30,30,0.42), 0 0 0 3px rgba(200,138,42,0.08) !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card[class*="!border-skin-primary"] { background: linear-gradient(135deg, #FFFDF8 0%, #F7F0E4 100%) !important; border-color: var(--mt-gold) !important; box-shadow: 0 14px 34px -20px rgba(200,138,42,0.55), 0 0 0 3px rgba(200,138,42,0.10), inset 4px 0 0 var(--mt-gold) !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card .radio_container { width: 24px !important; height: 24px !important; min-width: 24px !important; background: #FFFFFF !important; border: 2px solid rgba(200,138,42,0.40) !important; box-shadow: inset 0 0 0 3px #FFFFFF !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card .radio_circle { width: 12px !important; height: 12px !important; background: transparent !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card .radio_circle[class*="!bg-skin-primary"] { background: var(--mt-gold) !important; box-shadow: 0 0 0 3px rgba(200,138,42,0.14) !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_name { color: var(--mt-charcoal) !important; font-family: 'Cairo', sans-serif !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.75 !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_description { color: #786E63 !important; font-family: 'Cairo', sans-serif !important; font-size: 12.5px !important; line-height: 1.75 !important; margin-top: 3px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img_container { display: flex !important; align-items: center !important; justify-content: flex-end !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img { background: #FFFFFF !important; border: 1px solid rgba(30,30,30,0.08) !important; border-radius: 12px !important; padding: 6px 8px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img img { max-height: 46px !important; width: 100% !important; object-fit: contain !important; } @media (max-width: 767px) { :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card { padding: 14px !important; border-radius: 16px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img_container { width: 100% !important; justify-content: flex-start !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img { width: min(210px, 100%) !important; } } /* إصلاح تداخل صورة Paymob مع زر إتمام الطلب */ :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card { overflow: hidden !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_content { align-items: center !important; gap: 12px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img_container { flex-shrink: 0 !important; overflow: hidden !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img { width: 100% !important; max-width: 180px !important; height: 54px !important; min-height: 54px !important; overflow: hidden !important; padding: 5px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img img { display: block !important; width: 100% !important; height: 42px !important; max-height: 42px !important; object-fit: contain !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payments_container { padding-bottom: 18px !important; } @media (max-width: 767px) { :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_content { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img_container { width: 100% !important; display: flex !important; justify-content: flex-start !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img { width: 170px !important; max-width: 170px !important; height: 48px !important; min-height: 48px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payment_card_img img { height: 36px !important; max-height: 36px !important; } :is(.checkout_form, .product_form_checkout, .contact-info-heading) .payments_container { margin-bottom: 85px !important; padding-bottom: 20px !important; } }