:root{ /* ===== Evoque "Modern Bold" identity palette — 21 أغسطس 2026 ===== المرحلة 2 من إعادة الهيكلة: نفس أسماء المتغيرات القديمة (--gold, --dark, إلخ) محافظ عليها كما هي بالكامل (تُستخدم بعشرات الأماكن بهذا الملف) — بس غيّرنا *قيمها* فقط لتناسب الهوية الجديدة: أبيض/أسود حاد التباين + لون أحمر جريء بدل الذهبي/الكريمي الدافئ القديم (Night/Ivory). هذا يخلي التغيير يطبّق بكل مكان تلقائيًا بدون خطر نسيان أي selector. */ --bg:#FFFFFF; --bg-soft:#F2F2F5; --surface:#ffffff; --ink:#111111; --muted:#68686f; --muted-soft:#9a9aa1; --gold:#E11D2E; --gold-deep:#B0121F; --gold-soft:#F5F5F5; --gold-pale:#FDEAEA; --dark:#0A0A0A; --dark2:#141414; --amber1:#F0C57D; --amber2:#8A4A1E; --emerald:#2F4A3D; --emerald-deep:#213830; --line:#E5E5E8; --wa:#25d366; --wa-deep:#1ea952; --shadow:0 10px 30px rgba(0,0,0,.06); --shadow-lg:0 20px 50px rgba(0,0,0,.14); --radius:14px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Poppins', 'Segoe UI', Tahoma, sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:88px; } html[lang="ar"] body{ font-family:'Tajawal','Poppins','Segoe UI',Tahoma,sans-serif; } html[lang="en"] body{ font-family:'Jost','Poppins','Segoe UI',Tahoma,sans-serif; } /* الهوية الجديدة "عصري بسيط جريء": عناوين بخط Sans-serif عريض وحاد بدل الخط الكلاسيكي المزخرف (Cormorant Garamond / Markazi Text) القديم */ h1,h2,h3,.serif{ font-family:'Poppins','Segoe UI',sans-serif; font-weight:800; letter-spacing:-.01em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .serif{ font-family:'Cairo','Tajawal',sans-serif; font-weight:800; letter-spacing:0; } .icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } a{ color:inherit; } /* ===== Header ===== */ header{ position:relative; text-align:center; padding:10px 16px 12px; background:linear-gradient(180deg, #000000 0%, var(--dark) 45%, #1a1a1a 100%); color:var(--gold-pale); } .top-row{ display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto 6px; } .lang-switch{ display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:3px; font-size:12px; } .lang-switch button{ border:none; background:transparent; color:var(--gold-soft); padding:6px 13px; border-radius:999px; cursor:pointer; font-family:'Poppins'; font-size:12px; letter-spacing:.3px; display:flex; align-items:center; gap:5px; transition:.2s; } .lang-switch button.active{ background:var(--gold); color:#fff; font-weight:600; } .icon-btn{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; } .logo-img{ display:block; margin:2px auto 0; max-width:150px; width:38%; height:auto; } header .tagline{ margin:2px 0 0; color:var(--muted-soft); font-size:13px; letter-spacing:.4px; } .header-divider{ width:36px; height:2px; background:var(--gold); margin:8px auto 0; border-radius:2px; opacity:.8; } /* ===== Offers banner ===== */ .offers-banner{ position:relative; overflow:hidden; background:linear-gradient(90deg, var(--gold-deep), var(--gold) 45%, var(--gold-deep)); color:#fff; } .offers-track{ position:relative; height:46px; max-width:1100px; margin:0 auto; } .offer-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13.5px; font-weight:500; letter-spacing:.2px; padding:0 46px; opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; text-align:center; } .offer-slide.active{ opacity:1; transform:translateY(0); } .offer-slide .icon{ width:16px; height:16px; flex:none; } .offers-dots{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); display:flex; gap:5px; } .offers-dots button{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,.35); padding:0; cursor:pointer; } .offers-dots button.active{ background:#fff; width:16px; border-radius:4px; } /* ===== Trust bar ===== */ .trust-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:1100px; margin:18px auto 0; padding:0 16px; } .trust-item{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:12px; color:var(--ink); box-shadow:var(--shadow); } .trust-item .icon{ color:var(--gold-deep); width:16px; height:16px; flex:none; } /* ===== Not-found banner ===== */ .notfound-banner{ max-width:900px; margin:16px auto 0; background:var(--surface); border:1px dashed var(--gold); border-radius:14px; padding:11px 18px; font-size:12.5px; color:var(--ink); text-align:center; } .notfound-banner a{ color:var(--wa-deep); font-weight:700; text-decoration:none; } /* ===== Search / filters ===== */ .search-controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:900px; margin:16px auto 0; padding:0 16px; } .search-field{ position:relative; flex:1; min-width:200px; } .search-field .icon{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); width:16px; height:16px; } .search-input{ width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:11px 16px 11px 40px; font-size:13.5px; font-family:'Poppins'; } html[dir="rtl"] .search-input{ padding:11px 40px 11px 16px; } .brand-select{ background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-size:13px; font-family:'Poppins'; min-width:150px; } .search-input:focus, .brand-select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-pale); } .results-count{ max-width:900px; margin:14px auto 0; text-align:center; color:var(--muted); font-size:12.5px; } .filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:16px; max-width:960px; margin:0 auto; } .filter-btn{ display:flex; align-items:center; gap:6px; background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:9px 16px; border-radius:999px; font-size:12.5px; cursor:pointer; font-family:'Poppins'; transition:.15s; } .filter-btn .icon{ width:14px; height:14px; color:var(--gold-deep); } .filter-btn:hover{ border-color:var(--gold); } .filter-btn.active{ background:var(--dark); color:var(--gold-soft); border-color:var(--dark); } .filter-btn.active .icon{ color:var(--gold-soft); } .show-more-wrap{ display:flex; justify-content:center; margin:20px 0 6px; } .show-more-btn{ background:var(--surface); color:var(--gold-deep); border:1px solid var(--gold); padding:11px 26px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Poppins'; display:flex; align-items:center; gap:8px; } .show-more-btn:hover{ background:var(--gold); color:#fff; } /* التحميل التلقائي عند التمرير (Infinite Scroll) حل محل زر "عرض المزيد" — هذا العنصر شفاف تمامًا، وظيفته فقط إعلام الكود إن العميل قرّب من نهاية القائمة */ .scroll-sentinel{ width:100%; height:1px; } /* ===== Grid / cards ===== */ .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; padding:10px 16px 52px; max-width:1180px; margin:0 auto; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; position:relative; } .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); } .card .imgwrap{ width:100%; aspect-ratio:1/1; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; } .card .imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .card:hover .imgwrap img{ transform:scale(1.06); } .card .imgwrap .placeholder{ color:var(--muted); font-size:12px; text-align:center; padding:8px; } /* شارتي الخصم والجنس مقصودتين تكونان داخل بطاقة المعلومات (تحت الصورة) لا فوق الصورة — عشان ما تغطيان أي جزء من تصميم صورة العطر (ألوان/عناوين Canva تختلف من صورة لصورة). */ .old-price{ color:var(--muted-soft); font-weight:400; font-size:10.5px; text-decoration:line-through; margin-inline-end:4px; display:inline-block; } .card .info{ padding:16px 16px 4px; flex:1; display:flex; flex-direction:column; gap:7px; } .impressions-tag{ font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted-soft); font-weight:600; } /* زر "❤️ المفضلة" (Wishlist) — 25 أغسطس 2026. نفس منطق عدم وضع شارات فوق الصورة أعلاه: الزر داخل بطاقة المعلومات البيضاء (صف مع "Impressions") مو فوق صورة العطر نفسها. */ .card-top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .wishlist-heart-btn{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0; transition:transform .15s ease, background .2s ease, border-color .2s ease; } .wishlist-heart-btn:hover{ transform:scale(1.1); } .wishlist-heart-btn .icon{ width:14px; height:14px; color:#c0475a; stroke-width:2; } .wishlist-heart-btn.active{ background:#c0475a; border-color:#c0475a; } .wishlist-heart-btn.active .icon{ fill:#fff; color:#fff; } .name-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .card .brand{ font-size:11px; color:var(--gold-deep); letter-spacing:.5px; font-weight:600; } .discount-tag{ flex:none; background:var(--gold-deep); color:#fff; border-radius:999px; padding:3px 8px 3px 7px; font-size:10px; font-weight:700; display:flex; align-items:center; gap:3px; line-height:1; } .discount-tag .icon{ width:10px; height:10px; } .card .name{ font-family:'Poppins',sans-serif; font-weight:800; font-size:21px; font-weight:600; color:var(--ink); line-height:1.2; } .badge-row{ display:flex; gap:6px; flex-wrap:wrap; margin:1px 0; } .badge{ display:flex; align-items:center; gap:5px; font-size:10.5px; background:var(--bg-soft); color:var(--muted); padding:4px 10px; border-radius:999px; border:1px solid var(--line); } .badge.badge-gender{ background:var(--ink); color:var(--gold-soft); border-color:var(--ink); } .badge.badge-gender .icon{ color:var(--gold-soft); } .badge .icon{ width:11px; height:11px; color:var(--gold-deep); } .notes-toggle{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--gold-deep); background:none; border:none; cursor:pointer; text-align:start; padding:2px 0; margin-top:2px; font-family:'Poppins'; font-weight:500; } .notes-toggle .chev{ width:12px; height:12px; transition:transform .2s; } .notes-toggle.open .chev{ transform:rotate(180deg); } .notes-box{ display:none; font-size:12px; color:var(--muted); line-height:1.8; background:var(--bg-soft); border-radius:10px; padding:10px 12px; margin-top:2px; } .notes-box.open{ display:block; } .notes-box .row{ display:flex; gap:6px; align-items:flex-start; margin-bottom:4px; } .notes-box .row .icon{ width:13px; height:13px; margin-top:2px; color:var(--gold-deep); flex:none; } .notes-box b{ color:var(--ink); font-weight:600; } .size-row{ display:flex; gap:8px; margin-top:10px; } .size-pill{ flex:1; text-align:center; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); border-radius:12px; padding:8px 6px; font-size:11.5px; cursor:pointer; font-family:'Poppins'; line-height:1.5; } .size-pill b{ display:block; font-size:13px; } .size-pill.active{ border-color:var(--gold); background:var(--gold-pale); } .size-pill.disabled{ opacity:.45; cursor:not-allowed; text-decoration:line-through; } .card-bottom{ padding:12px 16px 16px; } .add-btn{ width:100%; margin-top:4px; padding:12px; border:none; border-radius:12px; background:var(--dark); color:var(--gold-soft); font-weight:600; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Poppins'; transition:.2s; } .add-btn .icon{ width:15px; height:15px; } .add-btn:hover{ background:var(--gold-deep); color:#fff; } .add-btn.added{ background:var(--wa); color:#fff; } .add-btn:disabled{ background:var(--bg-soft); color:var(--muted); cursor:not-allowed; } .card .brand{ cursor:pointer; } .card .brand:hover{ text-decoration:underline; } /* ===== Qty stepper (on cards + inside cart modal) ===== */ .qty-stepper{ width:100%; margin-top:4px; display:flex; align-items:center; justify-content:space-between; background:var(--wa); color:#fff; border-radius:12px; padding:4px; gap:6px; } .qty-stepper button{ width:36px; height:36px; flex:none; border:none; border-radius:9px; background:rgba(255,255,255,.18); color:#fff; font-size:17px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'Poppins'; } .qty-stepper button:hover{ background:rgba(255,255,255,.3); } .qty-stepper .qty-mid{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; } .qty-stepper .qty-mid .icon{ width:15px; height:15px; } /* ===== Cart modal ===== */ .view-cart-btn{ background:none; border:1px solid rgba(255,255,255,.3); color:var(--gold-soft); border-radius:999px; padding:5px 9px; font-size:11px; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:'Poppins'; flex:none; } .view-cart-btn .icon{ width:12px; height:12px; } .cart-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,10,10,.6); z-index:80; align-items:flex-end; justify-content:center; } .cart-modal-overlay.open{ display:flex; } .cart-modal{ background:var(--surface); width:100%; max-width:560px; max-height:78vh; border-radius:20px 20px 0 0; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); } .cart-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); } .cart-modal-head h3{ margin:0; font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; } .cart-modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1; padding:4px; } .cart-modal-body{ overflow-y:auto; padding:8px 18px; flex:1; } .cart-modal-item{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); } .cart-modal-item img{ width:52px; height:52px; object-fit:cover; border-radius:10px; flex:none; background:var(--bg-soft); } .cart-modal-item .ci-info{ flex:1; min-width:0; } .cart-modal-item .ci-brand{ font-size:10.5px; color:var(--gold-deep); font-weight:600; } .cart-modal-item .ci-name{ font-size:14px; font-weight:600; color:var(--ink); } .cart-modal-item .ci-meta{ font-size:11.5px; color:var(--muted); margin-top:1px; } .cart-modal-item .ci-actions{ display:flex; align-items:center; gap:8px; flex:none; } .cart-modal-item .qty-stepper{ width:auto; background:var(--bg-soft); color:var(--ink); } .cart-modal-item .qty-stepper button{ background:var(--surface); color:var(--ink); width:26px; height:26px; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.1); } .cart-modal-item .remove-btn{ background:none; border:none; color:var(--gold-deep); cursor:pointer; padding:4px; display:flex; align-items:center; } .cart-modal-item .remove-btn .icon{ width:16px; height:16px; } .cart-modal-empty{ text-align:center; color:var(--muted); padding:40px 10px; } .offer-banner{ border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:12.5px; line-height:1.7; } .offer-banner-won{ background:var(--gold-pale); border:1px solid var(--gold); color:var(--ink); } .offer-banner-won .offer-banner-title{ font-weight:700; color:var(--gold-deep); margin-bottom:3px; font-size:13px; } .offer-banner-won .offer-banner-item{ display:flex; align-items:center; gap:6px; } .offer-banner-won .offer-banner-item::before{ content:"✓"; color:var(--gold-deep); font-weight:700; } .offer-banner-progress{ background:var(--bg-soft); border:1px dashed var(--gold); color:var(--muted); text-align:center; } .cart-modal-total{ padding:14px 18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; } footer{ text-align:center; color:var(--muted-soft); font-size:12px; padding:34px 20px 24px; background:var(--dark); } footer .foot-logo{ color:var(--gold-soft); font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; letter-spacing:1px; margin-bottom:6px; } footer .foot-line{ width:34px; height:1px; background:var(--gold); opacity:.5; margin:10px auto; } .empty{ text-align:center; color:var(--muted); padding:50px; grid-column:1/-1; } /* ===== Floating cart bar ===== */ .cart-bar{ position:fixed; bottom:0; left:0; right:0; background:var(--dark); padding:10px 18px 13px; display:flex; flex-direction:column; gap:8px; z-index:50; box-shadow:0 -8px 24px rgba(0,0,0,.25); } .cart-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } /* ===== اختيار طريقة الدفع — انتقل لداخل نموذج الطلب (خلفية فاتحة)، 23 أغسطس 2026 ===== */ .payment-row{ display:none; gap:6px; flex-wrap:wrap; padding-bottom:2px; } .payment-pill{ background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:7px 14px; font-size:12px; display:flex; align-items:center; gap:5px; cursor:pointer; font-family:'Poppins'; } .payment-pill .icon{ width:13px; height:13px; } .payment-pill.active{ background:var(--dark); color:var(--gold-soft); border-color:var(--dark); font-weight:600; } .cart-bar .cart-info{ font-size:12.5px; color:var(--gold-soft); display:flex; align-items:center; gap:8px; background:none; border:none; padding:6px 4px; font-family:'Poppins'; text-align:start; cursor:pointer; } .cart-bar .cart-info .icon{ width:17px; height:17px; } .cart-bar .cart-info b{ color:#fff; } /* 28 أغسطس 2026: قلبنا الأولوية البصرية بين الزرين — "اطلب أونلاين" الحين هو الزر الأساسي (لون العلامة القوي + أبرز حجمًا) لأنه يكمّل الطلب بالكامل أونلاين بدون واتساب، وواتساب صار الخيار الثانوي (ستايل شفاف/هادئ) لمن يفضّل يتواصل مباشرة. */ .checkout-btn{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.3); color:#25d366; padding:12px 14px; border-radius:12px; font-weight:600; font-size:12px; cursor:pointer; text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:6px; font-family:'Poppins'; } .checkout-btn .icon{ width:14px; height:14px; } .checkout-btn:disabled{ opacity:.35; cursor:not-allowed; } .checkout-row{ display:flex; align-items:center; gap:8px; } .order-form-btn{ background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); border:none; color:#fff; padding:12px 22px; border-radius:12px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:8px; font-family:'Poppins'; box-shadow:0 4px 14px rgba(225,29,46,.35); } .order-form-btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; } .order-form-btn .icon{ width:15px; height:15px; } /* ===== Order form modal ===== */ .order-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,10,10,.6); z-index:80; align-items:flex-end; justify-content:center; } .order-modal-overlay.open{ display:flex; } .order-modal{ background:var(--surface); width:100%; max-width:480px; max-height:88vh; border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden; } @media (min-width:640px){ .order-modal-overlay{ align-items:center; } .order-modal{ border-radius:20px; max-height:82vh; } } .order-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); } .order-modal-head h3{ margin:0; font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; } .order-modal-body{ overflow-y:auto; padding:16px 18px; flex:1; } .order-modal-body label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 5px; } .order-modal-body label:first-child{ margin-top:0; } .order-modal-body input, .order-modal-body select, .order-modal-body textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:'Poppins'; background:var(--bg); color:var(--ink); } .order-modal-body textarea{ resize:vertical; min-height:60px; } .order-modal-body input:disabled{ opacity:.7; background:var(--bg-soft); } .of-radio-row{ display:flex; gap:8px; margin-top:2px; } .of-radio-pill{ display:flex !important; align-items:center; gap:6px; flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font-size:12.5px; margin:0 !important; cursor:pointer; color:var(--ink); } .of-radio-pill input{ width:auto !important; accent-color:var(--gold-deep); } .order-shipping-summary{ margin-top:16px; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px; line-height:2; } .order-shipping-summary .os-row{ display:flex; justify-content:space-between; } .order-shipping-summary .os-total{ font-weight:700; border-top:1px dashed var(--line); margin-top:4px; padding-top:6px; } .order-shipping-summary .os-free{ color:var(--gold-deep); font-weight:600; } .order-shipping-summary s{ color:var(--muted); margin-inline-end:5px; } .order-shipping-summary .os-items{ border-bottom:1px dashed var(--line); margin-bottom:4px; padding-bottom:4px; } .order-shipping-summary .os-item{ font-size:12px; color:var(--muted); } .order-shipping-summary .os-item span:first-child{ flex:1; padding-inline-end:8px; } /* ===== بيانات التحويل البنكي — تظهر داخل نموذج الطلب لما يختار العميل "تحويل بنكي" ===== */ .bank-details-box{ margin-top:10px; background:var(--bg-soft); border:1px solid var(--gold); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.9; } .bank-details-box .bd-title{ font-weight:700; color:var(--gold-deep); margin-bottom:6px; font-size:13.5px; } .bank-details-box .bd-row{ display:flex; justify-content:space-between; gap:10px; } .bank-details-box .bd-row span{ color:var(--muted); } .bank-details-box .bd-row b{ font-weight:600; text-align:end; } .bank-details-box .bd-hint{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); color:var(--muted); font-size:11.5px; line-height:1.7; } .order-modal-foot{ padding:14px 18px; border-top:1px solid var(--line); } .order-submit-btn{ width:100%; background:var(--gold-deep); color:#fff; border:none; padding:13px; border-radius:12px; font-weight:600; font-size:14px; cursor:pointer; font-family:'Poppins'; } .order-submit-btn:disabled{ opacity:.5; cursor:not-allowed; } .order-form-note{ font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.7; text-align:center; } .order-success{ text-align:center; padding:30px 10px; } .order-success .oc-icon{ font-size:40px; margin-bottom:10px; } .order-success h4{ font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; margin:0 0 8px; } .order-success p{ font-size:13.5px; color:var(--muted); line-height:1.8; margin:0 0 16px; } .order-wa-fallback{ display:inline-flex; align-items:center; gap:8px; background:var(--wa); color:#fff; text-decoration:none; padding:11px 20px; border-radius:12px; font-weight:600; font-size:13px; } @media (max-width:520px){ .logo-img{ width:52%; } .offer-slide{ font-size:12px; padding:0 40px; } } /* =================================================================== HERO — شريط افتتاحي فاتح وقصير (بديل الدخول المباشر لشبكة المنتجات) مقصود يكون خفيف وسريع: بدون خلفية غامقة وبدون صورة، سطرين نص بس + CTA =================================================================== */ .hero{ position:relative; text-align:center; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,161,94,.10), transparent 65%), var(--bg); color:var(--ink); padding:26px 20px 24px; border-bottom:1px solid var(--line); } .hero-inner{ position:relative; z-index:1; max-width:600px; margin:0 auto; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:8px; } .hero-eyebrow .hr{ width:16px; height:1px; background:var(--gold-deep); opacity:.6; } .hero h2{ font-size:clamp(22px,4.4vw,30px); line-height:1.25; margin:0 0 8px; font-weight:600; color:var(--ink); } .hero p{ font-size:13.5px; line-height:1.7; color:var(--muted); max-width:460px; margin:0 auto 18px; } .hero-ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .hero-btn{ display:flex; align-items:center; gap:7px; padding:11px 22px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; border:1px solid transparent; text-decoration:none; } .hero-btn.primary{ background:var(--dark); color:var(--gold-soft); } .hero-btn.primary:hover{ background:var(--gold-deep); color:#fff; } .hero-btn.secondary{ background:var(--surface); border-color:var(--line); color:var(--ink); } .hero-btn.secondary:hover{ border-color:var(--gold); color:var(--gold-deep); } .hero-btn .icon{ width:14px; height:14px; } @media (max-width:520px){ .hero{ padding:22px 16px 20px; } } /* =================================================================== نافذة اختيار اللغة — تظهر عند أول زيارة فقط =================================================================== */ .lang-modal-overlay{ display:none; position:fixed; inset:0; background:var(--dark); z-index:200; align-items:center; justify-content:center; padding:20px; } .lang-modal-overlay.open{ display:flex; } .lang-modal{ text-align:center; max-width:360px; } .lang-modal .lm-mark{ width:40px; height:40px; margin:0 auto 18px; color:var(--gold); } .lang-modal h3{ color:#fff; font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; margin:0 0 8px; } .lang-modal p{ color:var(--muted-soft); font-size:13px; margin:0 0 26px; } .lang-modal-btns{ display:flex; flex-direction:column; gap:10px; } .lang-modal-btn{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05); color:var(--gold-soft); font-size:14.5px; font-weight:600; cursor:pointer; font-family:'Poppins','Tajawal'; } .lang-modal-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); } .lang-modal-btn .icon{ width:17px; height:17px; } /* =================================================================== تكبير الصورة (Lightbox) — لقراءة تفاصيل العطر والمكونات بوضوح =================================================================== */ .card .imgwrap{ cursor:zoom-in; } .lightbox-overlay{ display:none; position:fixed; inset:0; background:rgba(15,12,9,.86); z-index:150; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(2px); } .lightbox-overlay.open{ display:flex; } .lightbox-box{ background:var(--surface); width:100%; max-width:760px; max-height:92vh; border-radius:20px; overflow:auto; display:grid; grid-template-columns:1fr; box-shadow:var(--shadow-lg); } @media (min-width:680px){ .lightbox-box{ grid-template-columns:1.1fr 1fr; max-height:82vh; } } .lightbox-imgwrap{ position:relative; background:var(--bg-soft); aspect-ratio:1/1; } .lightbox-imgwrap img{ width:100%; height:100%; object-fit:contain; display:block; } @media (min-width:680px){ .lightbox-imgwrap{ aspect-ratio:auto; height:100%; max-height:82vh; } } .lightbox-close{ position:absolute; top:12px; inset-inline-end:12px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; border:none; font-size:18px; cursor:pointer; z-index:2; } .lightbox-info{ padding:24px 26px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; } .lightbox-brand{ font-size:11.5px; color:var(--gold-deep); letter-spacing:.5px; font-weight:600; } .lightbox-name{ font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; font-weight:600; color:var(--ink); line-height:1.2; } html[lang="ar"] .lightbox-name{ font-family:'Cairo','Tajawal',sans-serif; font-weight:800; } .lightbox-details{ font-size:13px; color:var(--muted); line-height:1.9; margin-top:6px; } .lightbox-details .row{ display:flex; gap:7px; align-items:flex-start; margin-bottom:8px; } .lightbox-details .row .icon{ width:14px; height:14px; margin-top:3px; color:var(--gold-deep); flex:none; } .lightbox-details b{ color:var(--ink); font-weight:600; } /* =================================================================== تقييمات العملاء — بطاقة العطر (ملخص صغير) + نافذة التكبير (القائمة الكاملة) تُدار البيانات من لوحة التحكم admin-upload.html (وضع "⭐ التقييمات") =================================================================== */ .stars{ display:inline-flex; gap:1px; line-height:1; } .stars .star{ color:var(--bg-soft); font-size:12px; } .stars .star.filled{ color:var(--gold-deep); } .card-rating{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); margin:1px 0; } .card-rating .stars .star{ font-size:11px; } .card-rating b, .card-rating span{ color:var(--muted); } .reviews-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid var(--gold-pale); } .reviews-head h3{ margin:0; font-size:14px; font-weight:700; color:var(--ink); } .reviews-summary{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); } .reviews-summary b{ color:var(--ink); font-size:13px; } .reviews-empty{ font-size:12.5px; color:var(--muted); line-height:1.8; margin-top:8px; } .review-card{ background:var(--bg-soft); border:1px solid var(--gold-pale); border-radius:10px; padding:10px 12px; } .review-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .review-name{ font-size:12.5px; font-weight:700; color:var(--ink); } .review-comment{ font-size:12.5px; color:var(--muted); line-height:1.7; margin:6px 0 4px; } .review-date{ font-size:10.5px; color:var(--muted-soft); } /* ===== كاروسيل التقييمات — تقييم واحد بالشاشة + سهم يمين/يسار + تبديل تلقائي ===== */ .reviews-carousel{ display:flex; align-items:stretch; gap:8px; margin-top:10px; } .review-carousel-track{ flex:1; min-width:0; } .review-carousel-track .review-card{ min-height:64px; } .review-nav{ flex:0 0 auto; width:28px; border:1px solid var(--gold-pale); border-radius:8px; background:var(--bg-soft); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .review-nav:hover{ background:var(--gold-pale); } .review-dots{ display:flex; justify-content:center; gap:5px; margin-top:8px; } .review-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-pale); cursor:pointer; transition:background .15s ease, transform .15s ease; } .review-dot.active{ background:var(--gold-deep); transform:scale(1.3); } /* ===== فورم إضافة تقييم من العميل مباشرة ===== */ .review-form-wrap{ margin-top:16px; padding-top:14px; border-top:1px solid var(--gold-pale); } .review-form-wrap h4{ margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink); } .review-star-picker{ display:flex; gap:4px; margin-bottom:10px; direction:ltr; justify-content:flex-start; } .review-star-picker .star-pick{ font-size:22px; color:var(--bg-soft); cursor:pointer; transition:color .12s ease; line-height:1; user-select:none; } .review-star-picker .star-pick.active{ color:var(--gold-deep); } .review-form-wrap input[type="text"], .review-form-wrap textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12.5px; color:var(--ink); background:var(--bg-soft); border:1px solid var(--gold-pale); border-radius:8px; padding:9px 11px; margin-bottom:8px; resize:vertical; } .review-form-wrap input[type="text"]:focus, .review-form-wrap textarea:focus{ outline:none; border-color:var(--gold-deep); } .review-hp-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0; } #reviewSubmitBtn{ background:var(--ink); color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:12.5px; font-weight:700; cursor:pointer; transition:opacity .15s ease; } #reviewSubmitBtn:disabled{ opacity:.6; cursor:default; } .review-form-msg{ font-size:12px; margin-top:8px; line-height:1.7; } .review-form-msg.ok{ color:#2e7d32; } .review-form-msg.err{ color:#c62828; } /* =================================================================== إعادة الهيكلة لعدة صفحات — 21 أغسطس 2026 شريط تنقل التصنيفات (بالهيدر) + قسم الأكثر مبيعًا وبطاقات التصنيف (بالرئيسية) =================================================================== */ .site-nav{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; max-width:520px; margin:10px auto 0; } .site-nav-link{ color:var(--gold-soft); text-decoration:none; font-size:12.5px; font-weight:500; padding:6px 14px; border-radius:999px; border:1px solid transparent; transition:.15s; } .site-nav-link:hover{ border-color:rgba(255,255,255,.35); } .site-nav-link.active{ background:var(--gold); color:#fff; font-weight:700; } .category-intro{ max-width:700px; margin:14px auto 0; padding:0 16px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; } .section-head{ max-width:700px; margin:34px auto 4px; padding:0 16px; text-align:center; } .section-head .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:6px; } .section-head h2{ font-size:clamp(20px,4vw,26px); margin:0 0 6px; color:var(--ink); font-weight:600; } .section-head p{ font-size:13px; color:var(--muted); margin:0; line-height:1.7; } .category-nav-wrap{ max-width:1180px; margin:18px auto 44px; padding:0 16px; } .category-nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px; } .category-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 20px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; } .category-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } .category-card-icon{ width:34px; height:34px; color:var(--gold-deep); margin-bottom:6px; } .category-card-title{ font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; font-weight:600; } html[lang="ar"] .category-card-title{ font-family:'Cairo','Tajawal',sans-serif; font-weight:800; } .category-card-desc{ font-size:12.5px; color:var(--muted); line-height:1.6; max-width:220px; } .category-card-cta{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--gold-deep); } .category-card-cta .icon{ width:13px; height:13px; transform:rotate(-90deg); } html[dir="rtl"] .category-card-cta .icon{ transform:rotate(90deg); } @media (max-width:520px){ .site-nav{ gap:2px; } .site-nav-link{ padding:6px 10px; font-size:11.5px; } } .header-country-select{ background:rgba(255,255,255,.06); color:var(--gold-soft); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 10px; font-size:11px; font-family:'Poppins'; cursor:pointer; } .header-country-select option{ color:var(--ink); } /* =================================================================== مقترح التحسينات (قائمة البراندات + سلايدر الأكثر مبيعًا + فلتر جانبي + إشعار مبيعات منبثق) — نُفّذت 3 سبتمبر 2026 بعد موافقة المستخدم على نموذج تصميم =================================================================== */ /* -- قائمة البراندات المنسدلة بالهيدر -- */ .site-nav-brands{ position:relative; } .site-nav-brands-btn{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-family:inherit; background:transparent; } .bm-arrow{ font-size:9px; opacity:.8; } .brands-mega{ display:none; position:absolute; top:calc(100% + 10px); right:50%; transform:translateX(50%); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:16px; width:min(90vw,560px); z-index:60; max-height:70vh; overflow-y:auto; text-align:right; } .site-nav-brands.open .brands-mega{ display:block; } .brands-mega-title{ font-size:11px; font-weight:700; color:var(--muted); margin-bottom:10px; } .brands-mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px 14px; } .bm-item{ color:var(--ink); text-decoration:none; font-size:12.5px; padding:6px 4px; border-radius:6px; display:block; } .bm-item:hover{ color:var(--gold-deep); background:var(--gold-pale); } @media(max-width:640px){ .brands-mega-grid{ grid-template-columns:repeat(2,1fr); } } /* -- سلايدر الأكثر مبيعًا بالرئيسية -- */ .bs-slider-wrap{ position:relative; max-width:1180px; margin:0 auto; } .grid.bs-slider{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; } .grid.bs-slider .card{ flex:0 0 240px; scroll-snap-align:start; } .grid.bs-slider::-webkit-scrollbar{ height:6px; } .grid.bs-slider::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; } .bs-arrow{ position:absolute; top:42%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); } .bs-arrow.right{ right:-6px; } .bs-arrow.left{ left:-6px; } @media(max-width:640px){ .bs-arrow{ display:none; } } /* -- فلتر جانبي (تصنيفات + توفر) — بصفحات التصنيف القديمة وبالرئيسية من 14 سبتمبر 2026 -- */ .shop-layout{ display:flex; align-items:flex-start; gap:24px; max-width:1180px; margin:0 auto; padding:0 16px; } .shop-sidebar{ flex:0 0 210px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:sticky; top:16px; } .sidebar-block + .sidebar-block{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .sidebar-block h4{ font-size:12.5px; font-weight:800; margin:0 0 10px; color:var(--ink); } .sidebar-link{ display:flex; justify-content:space-between; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-size:13px; padding:7px 4px; border-radius:6px; width:100%; } /* بالرئيسية، عناصر التصنيفات أزرار فلترة (