@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap'); :root { /* الهوية الأساسية = ثيم Streetwear الفاتح (أبيض/أسود). الثيم الذهبي على أسود القديم اتشال خالص — الموقع بقى أبيض + غامق بس. الوضع الغامق متعرّف في html.theme-dark تحت. */ color-scheme: light; --bg: #e9e8e3; --bg2: #f1f0eb; --card: #ffffff; --modal: #ffffff; --teal: #111111; --teal2: #111111; --gold: #111111; --goldGlow: #111111; --ok: #22c55e; --danger: #ef4444; --text: #141414; --muted: #6f6e69; --border: rgba(0, 0, 0, 0.14); --shadow: 0 14px 36px rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } html, body { height: 100%; overflow-x: clip; } [hidden] { display: none !important; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Arabic", "Noto Sans", sans-serif; background: radial-gradient(900px 600px at 50% -10%, rgba(212,175,55,.20), transparent 55%), radial-gradient(1200px 800px at 10% 0%, rgba(180,140,40,.14), transparent 60%), var(--bg); color: var(--text); min-width: 0; overflow-x: hidden; } /* ── prime — خلفية الغيوم الذهبية السينمائية (يحقنها clouds-bg.js) ── */ #siteClouds { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; opacity: 1; pointer-events: none; } /* fallback ثابت للموبايل / reduced-motion / لا WebGL */ .site-clouds-fallback { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1000px 680px at 50% 38%, rgba(212,175,55,.20), transparent 60%), radial-gradient(700px 520px at 80% 100%, rgba(180,140,40,.14), transparent 62%), var(--bg); } /* scrim غامق فوق الغيوم عشان المحتوى يفضل واضح */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120vw 120vh at 50% 38%, transparent 52%, rgba(6,4,1,.72) 100%); } /* وميض ذهبي متحرك لكلمة prime (نفس تصميم رقم 9) */ @keyframes goldSweep { to { background-position: 220% 0; } } /* ════════ prime — انترو سينمائي (لوجو في النص → يطير لمكانه → الأزرار تنزل والكروت تظهر) ════════ */ /* الـHold: نخفي الكروم لحد ما الانترو يكشفه (يتفعّل من سكربت inline في ) */ html.intro-playing, html.intro-playing body { overflow: hidden !important; } html.intro-playing .topbar, html.intro-playing .actions > *, html.intro-playing .grid .card, html.intro-playing .hero h1, html.intro-playing .hero p, html.intro-playing .hero-actions { opacity: 0 !important; animation: none !important; } html.intro-playing .logo { opacity: 0; } /* لوجو الهيدر مستني اللوجو الطاير يوصل */ .logo { transition: opacity .45s cubic-bezier(.4,0,.2,1); } /* الـOverlay اللي فيه اللوجو في نص الشاشة */ .intro-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none; background: radial-gradient(60vw 60vh at 50% 46%, rgba(212,175,55,.10), transparent 60%), radial-gradient(120vw 120vh at 50% 45%, rgba(10,7,2,.45), rgba(6,4,1,.86) 70%, rgba(2,1,0,.97)); will-change: opacity; } .intro-overlay.intro-fade { opacity: 0; transition: opacity .6s cubic-bezier(.4,0,.2,1); } .intro-logo { position: relative; font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(64px, 16vw, 200px); letter-spacing: 6px; line-height: 1.2; padding-bottom: .12em; background: linear-gradient(105deg,#7a5c12 0%,#f7e389 22%,#fff7d6 38%,#caa23a 52%,#8a6a18 70%,#f4dd7e 88%,#a98328 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 30px rgba(212,175,55,.45)) drop-shadow(0 0 70px rgba(180,140,40,.35)); animation: goldSweep 6s linear infinite, introLogoGlow 2.6s ease-in-out infinite; will-change: transform, opacity, filter; transform-origin: 50% 50%; } /* توهج ذهبي نابض حوالين الكلمة */ @keyframes introLogoGlow { 0%,100% { filter: drop-shadow(0 6px 30px rgba(212,175,55,.45)) drop-shadow(0 0 60px rgba(180,140,40,.32)); } 50% { filter: drop-shadow(0 6px 34px rgba(247,227,137,.70)) drop-shadow(0 0 110px rgba(240,192,64,.55)); } } /* لمعة ضوء تمسح الحروف (يتولّد من JS داخل اللوجو) */ .intro-shine { position: absolute; top: -14%; bottom: -14%; left: 0; width: 26%; background: linear-gradient(105deg, transparent 0%, rgba(255,250,224,.92) 50%, transparent 100%); filter: blur(7px); mix-blend-mode: screen; pointer-events: none; transform: skewX(-12deg) translateX(-160%); opacity: 0; } /* شرر ذهبي (يتولّد من JS) */ .intro-spark { position: fixed; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0%, #f0c040 45%, rgba(212,175,55,0) 72%); pointer-events: none; z-index: 10000; will-change: transform, opacity; } /* الكشف: الأزرار تنزل من فوق + الكروت تطلع — كله cubic-bezier */ @keyframes introBtnDrop { from { opacity: 0; transform: translateY(-150%) scale(.9); } to { opacity: 1; transform: none; } } @keyframes introCardIn { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes introNavIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } @keyframes introHeroIn { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } } html.intro-reveal .topbar { animation: none; opacity: 1; transition: opacity .55s cubic-bezier(.4,0,.2,1); } html.intro-reveal .nav .pill { animation: introNavIn .55s cubic-bezier(.2,.9,.2,1) both; } html.intro-reveal .nav .pill:nth-child(1){ animation-delay: .12s; } html.intro-reveal .nav .pill:nth-child(2){ animation-delay: .22s; } html.intro-reveal .actions > * { animation: introBtnDrop .66s cubic-bezier(.2,.9,.2,1) both; } html.intro-reveal .actions > *:nth-child(1) { animation-delay: .08s; } html.intro-reveal .actions > *:nth-child(2) { animation-delay: .18s; } html.intro-reveal .actions > *:nth-child(3) { animation-delay: .28s; } html.intro-reveal .hero h1 { animation: introHeroIn .72s cubic-bezier(.2,.9,.2,1) both .34s; } html.intro-reveal .hero p { animation: introHeroIn .72s cubic-bezier(.2,.9,.2,1) both .46s; } html.intro-reveal .hero-actions { animation: introHeroIn .72s cubic-bezier(.2,.9,.2,1) both .58s; } html.intro-reveal .grid .card { animation: introCardIn .62s cubic-bezier(.2,.9,.2,1) both; } html.intro-reveal .grid .card:nth-child(1){ animation-delay:.66s; } html.intro-reveal .grid .card:nth-child(2){ animation-delay:.72s; } html.intro-reveal .grid .card:nth-child(3){ animation-delay:.78s; } html.intro-reveal .grid .card:nth-child(4){ animation-delay:.84s; } html.intro-reveal .grid .card:nth-child(5){ animation-delay:.90s; } html.intro-reveal .grid .card:nth-child(6){ animation-delay:.96s; } html.intro-reveal .grid .card:nth-child(7){ animation-delay:1.02s; } html.intro-reveal .grid .card:nth-child(8){ animation-delay:1.08s; } html.intro-reveal .grid .card:nth-child(9){ animation-delay:1.14s; } html.intro-reveal .grid .card:nth-child(10){ animation-delay:1.20s; } html.intro-reveal .grid .card:nth-child(11){ animation-delay:1.26s; } html.intro-reveal .grid .card:nth-child(n+12){ animation-delay:1.32s; } body.drawer-open { overflow: hidden; } a { color: inherit; text-decoration: none; } .container { width: min(1200px, calc(100vw - 32px)); max-width: calc(100vw - 32px); min-width: 0; margin: 0 auto; } /* ── انتقالات دخول الصفحة (إحساس الانتقال بين الصفحات) ── */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes barDropIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } body { animation: pageFadeIn 320ms ease both; } .topbar { animation: barDropIn 420ms cubic-bezier(.2,.9,.2,1) both; } main.container { animation: pageRiseIn 480ms cubic-bezier(.2,.9,.2,1) both 80ms; } .hero h1 { animation: pageRiseIn 560ms cubic-bezier(.2,.9,.2,1) both 140ms; } .hero p { animation: pageRiseIn 560ms cubic-bezier(.2,.9,.2,1) both 220ms; } .hero-actions { animation: pageRiseIn 560ms cubic-bezier(.2,.9,.2,1) both 300ms; } /* ── Topbar ── */ .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: rgba(10,7,2,.72); border-bottom: 1px solid var(--border); min-width: 0; overflow-x: clip; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 14px; min-width: 0; } .topbar-inner > * { min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; } .brand > div { min-width: 0; } .logo { font-family: "Cinzel", serif; font-weight: 900; letter-spacing: 2px; font-size: 32px; line-height: 1.28; display: inline-block; padding: 2px 6px 6px; overflow: visible; background: linear-gradient(105deg,#7a5c12 0%,#f7e389 22%,#fff7d6 38%,#caa23a 52%,#8a6a18 70%,#f4dd7e 88%,#a98328 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); animation: goldSweep 6s linear infinite; white-space: nowrap; } .brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; letter-spacing: .8px; white-space: nowrap; } .nav { display: none; } .pill { padding: 9px 14px; border-radius: 999px; border: 1px solid transparent; color: var(--muted); cursor: pointer; background: none; transition: all 160ms ease; } .pill.active, .pill:hover { background: rgba(180,140,40,.18); border-color: rgba(212,175,55,.35); color: var(--text); } .actions { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; } .icon-btn { position: relative; border: 1px solid rgba(212,175,55,.35); background: rgba(180,140,40,.12); color: var(--text); padding: 8px 14px; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; white-space: nowrap; min-width: 0; } .icon-btn:hover { transform: translateY(-1px); border-color: rgba(212,175,55,.6); box-shadow: 0 0 20px rgba(212,175,55,.18); } .icon-btn:active { transform: translateY(0) scale(.96); } .icon-btn-emoji { display: inline-block; } .icon-btn-label { margin-inline-start: 6px; } /* على الموبايل: أيقونات فقط لأزرار المساعدة/التتبع لتوفير مساحة الهيدر */ @media (max-width: 560px) { #helpBtn .icon-btn-label, #trackBtn .icon-btn-label { display: none; } #helpBtn, #trackBtn { padding: 8px 11px; font-size: 16px; } .icon-btn { gap: 0; } } .badge { position: absolute; top: -8px; left: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: rgba(212,175,55,.95); color: #0a0f18; border: 1px solid rgba(240,192,64,.7); } /* ── Hero ── */ .hero { padding: 30px 0 12px; } .hero h1 { margin: 0; font-size: clamp(24px,4vw,42px); letter-spacing: .2px; } .hero p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; line-height: 1.6; } .hero-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* ── Category Filter Button ── */ @property --cat-angle { syntax: ''; inherits: false; initial-value: 0deg; } .cat-filter-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; background: rgba(212,175,55,.08); border: 1.5px solid rgba(212,175,55,.35); color: var(--text); border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 150ms ease; } .cat-filter-btn:hover { border-color: rgba(212,175,55,.6); background: rgba(212,175,55,.14); box-shadow: 0 6px 20px rgba(212,175,55,.18); transform: translateY(-1px); } .cat-filter-btn.active { border-color: var(--gold); background: rgba(212,175,55,.16); box-shadow: 0 0 18px rgba(212,175,55,.25); } .cat-filter-btn:active { transform: scale(0.97); } .cat-filter-btn-icon { display: inline-flex; color: var(--gold); flex-shrink: 0; } /* ripple from click */ .cat-btn-ripple { position: absolute; border-radius: 50%; background: rgba(212,175,55,.4); width: 6px; height: 6px; margin-top: -3px; margin-right: -3px; transform: scale(0); animation: catRipple 550ms ease-out forwards; pointer-events: none; } @keyframes catRipple { to { transform: scale(60); opacity: 0; } } /* ── Category Full-Page Overlay ── */ .cat-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); transition: clip-path 440ms cubic-bezier(0.4, 0, 0.15, 1); visibility: hidden; pointer-events: none; } .cat-overlay.open { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); visibility: visible; pointer-events: auto; } .cat-overlay.closing { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); visibility: visible; pointer-events: none; } .cat-overlay-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cat-overlay-inner { max-width: 700px; width: 100%; margin: 0 auto; padding: 0 16px 60px; } .cat-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; position: sticky; top: 0; background: var(--bg); z-index: 1; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .cat-overlay-title { font-weight: 900; font-size: 20px; } .cat-overlay-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .cat-overlay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 520px) { .cat-overlay-grid { grid-template-columns: 1fr; gap: 10px; } } .cat-item { display: flex; flex-direction: row; align-items: center; gap: 13px; padding: 15px; border-radius: 15px; border: 1.5px solid var(--border); background: rgba(24,18,8,.6); cursor: pointer; text-align: right; font-family: inherit; color: var(--text); position: relative; overflow: hidden; opacity: 0; transform: translateY(18px) scale(.96); animation: catItemIn 360ms cubic-bezier(.2,.9,.2,1) both; animation-play-state: paused; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; } @keyframes catItemIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .cat-item::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(212,175,55,.12), transparent 60%); opacity: 0; transition: opacity 180ms ease; } .cat-item:hover { border-color: rgba(212,175,55,.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(180,140,40,.18); } .cat-item:hover::before { opacity: 1; } .cat-item.active { border-color: var(--gold); background: rgba(212,175,55,.12); box-shadow: 0 0 24px rgba(212,175,55,.18); } .cat-item.active::before { opacity: 1; } .cat-item-icon { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; flex-shrink: 0; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.18); position: relative; z-index: 1; transition: background 180ms ease, border-color 180ms ease; } .cat-item.active .cat-item-icon { background: linear-gradient(135deg, var(--goldGlow), var(--teal)); border-color: transparent; } .cat-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; z-index: 1; } .cat-item-name { font-size: 15px; font-weight: 800; line-height: 1.2; } .cat-item-count { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1; } .cat-item-check { position: absolute; top: 9px; left: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal2); color: #0a0702; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 2; } /* ── Active category strip on main page ── */ .active-cat-bar { display: flex; align-items: center; gap: 10px; padding: 10px 0 4px; font-size: 14px; } .active-cat-clear { background: none; border: 1px solid rgba(239,68,68,.4); color: var(--danger); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: all 150ms ease; } .active-cat-clear:hover { background: rgba(239,68,68,.12); } /* ── Design CTA Button ── */ .design-cta-wrap { position: relative; display: inline-flex; align-items: center; } .design-cta-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border: 1px solid rgba(212,175,55,.45); border-radius: 16px; background: transparent; color: var(--gold); font-weight: 800; cursor: pointer; font-size: 15px; font-family: inherit; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; } .design-cta-btn:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.7); background: rgba(212,175,55,.08); box-shadow: 0 8px 24px rgba(212,175,55,.18); } .design-cta-btn:active { transform: translateY(0); } .design-cta-icon { font-size: 20px; flex-shrink: 0; } .design-cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .design-cta-label { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--goldGlow); } .design-cta-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); } .design-cta-arrow { flex-shrink: 0; margin-right: 2px; transition: transform 180ms ease; } .design-cta-btn:hover .design-cta-arrow { transform: translateX(-4px); } /* ── Grid ── */ .grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; padding: 18px 0 60px; justify-content: center; min-width: 0; } @media (max-width:1020px) { .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:620px) { .nav { display:none; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width:420px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } input, select, textarea { font-size: 16px; } /* ── Card ── */ .card { position: relative; border-radius: 22px; background: linear-gradient(180deg,rgba(24,18,8,.9),rgba(16,12,6,.9)); border: 1px solid rgba(212,175,55,.18); overflow: hidden; box-shadow: 0 0 45px rgba(180,140,40,.08); cursor: pointer; width: 100%; max-width: 294px; min-width: 0; justify-self: center; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; animation: cardIn 400ms ease both; } @keyframes cardIn { from { opacity:0; transform: translateY(20px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } } /* ظهور متدرّج للكروت حسب ترتيبها */ .grid .card:nth-child(1) { animation-delay: 40ms; } .grid .card:nth-child(2) { animation-delay: 90ms; } .grid .card:nth-child(3) { animation-delay: 140ms; } .grid .card:nth-child(4) { animation-delay: 190ms; } .grid .card:nth-child(5) { animation-delay: 240ms; } .grid .card:nth-child(6) { animation-delay: 290ms; } .grid .card:nth-child(7) { animation-delay: 340ms; } .grid .card:nth-child(8) { animation-delay: 390ms; } .grid .card:nth-child(n+9) { animation-delay: 430ms; } .card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.45); box-shadow: 0 20px 60px rgba(180,140,40,.2); } /* الصورة تبان كاملة بدون zoom */ .card-media { aspect-ratio: 585 / 1024; background: radial-gradient(circle at top, rgba(255,255,255,.06), transparent 46%), linear-gradient(180deg, rgba(36,62,57,.95), rgba(22,54,61,.92) 58%, rgba(53,98,90,.9)); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; } .card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 300ms ease; display: block; } .card:hover .card-media img { transform: scale(1.025); } .card-body { padding: 16px 16px 18px; } .card-title { font-weight: 800; margin: 0 0 6px; font-size: 15px; } .price-row { display: flex; align-items: baseline; gap: 10px; } .price { font-weight: 900; font-size: 18px; } .price.sale { color: var(--gold); text-shadow: 0 0 18px rgba(240,192,64,.15); } .price.was { color: rgba(240,244,248,.6); text-decoration: line-through; font-size: 14px; } /* ── Buttons ── */ .btn { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(212,175,55,.35); background: rgba(180,140,40,.14); color: var(--text); font-weight: 900; cursor: pointer; font-size: 14px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease; } .btn.secondary { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); } .btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; } .btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(212,175,55,.6); box-shadow: 0 0 24px rgba(212,175,55,.2); } .btn.danger { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.14); } .btn.danger:hover:not(:disabled) { border-color: rgba(239,68,68,.7); box-shadow: 0 0 20px rgba(239,68,68,.2); } .btn.success-btn { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.14); } /* ── Chip ── */ .chip { position: absolute; top: 14px; left: 14px; min-width: 74px; padding: 8px 12px; text-align: center; border-radius: 12px; font-size: 13px; font-weight: 900; background: linear-gradient(180deg,rgba(34,197,94,.95),rgba(22,163,74,.92)); border: 1px solid rgba(187,247,208,.28); color: #f4fff7; box-shadow: 0 10px 24px rgba(34,197,94,.24); animation: chipPop 300ms cubic-bezier(.2,.9,.2,1) both; z-index: 2; } .card .chip { display: inline-flex; align-items: center; justify-content: center; } @keyframes chipPop { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } } .muted-box { border: 1px dashed rgba(255,255,255,.16); border-radius: 18px; background: rgba(0,0,0,.18); padding: 18px; color: var(--muted); } /* ── Backdrop ── */ .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: none; z-index: 50; animation: none; } .backdrop.show { display: block; animation: fadeIn 200ms ease; } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* ── Modal ── */ .modal { position: fixed; inset: auto; top: 50%; right: 50%; transform: translate(50%, -50%); width: min(980px,94vw); max-height: 88vh; overflow: auto; border-radius: 24px; border: 1px solid rgba(212,175,55,.18); background: linear-gradient(180deg,rgba(16,12,6,.98),rgba(10,7,2,.98)); box-shadow: var(--shadow); display: none; z-index: 60; will-change: transform, opacity; } .modal.show { display: block; animation: modalFromCard 420ms cubic-bezier(0.34, 1.28, 0.64, 1) both; } .modal.show.closing { animation: modalToCard 260ms cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; } @keyframes modalFromCard { 0% { opacity: 0; transform: translate(calc(50% + var(--modal-dx, 0px)), calc(-50% + var(--modal-dy, 0px))) scale(0.05); filter: blur(6px); } 35% { opacity:1; filter: blur(0); } 100% { opacity: 1; transform: translate(50%, -50%) scale(1); filter: blur(0); } } @keyframes modalToCard { 0% { opacity: 1; transform: translate(50%, -50%) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translate(calc(50% + var(--modal-dx, 0px)), calc(-50% + var(--modal-dy, 0px))) scale(0.05); filter: blur(6px); } } .modal-inner { padding: 18px; } .modal-close { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; background: inherit; } .xbtn { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background 160ms; } .xbtn:hover { background: rgba(255,255,255,.12); } /* ── Product Modal Layout ── */ .product-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; } @media (max-width:860px) { .product-layout { grid-template-columns: 1fr; } } .gallery { display: grid; gap: 12px; } .gallery-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width:860px) { .gallery-two { grid-template-columns: 1fr; } } .shot { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22); aspect-ratio: 4/5; } .shot img { width:100%; height:100%; object-fit:cover; } .thumbs { display:flex; gap:10px; overflow:auto; padding-bottom:6px; } .thumbs img { width:60px; height:60px; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer; transition: border-color 160ms, transform 160ms; flex-shrink:0; } .thumbs img.active, .thumbs img:hover { border-color: var(--teal2); transform: scale(1.05); } .kicker { font-size:11px; font-weight:900; letter-spacing:2px; color:var(--teal2); margin-bottom:6px; } .h2 { font-size: clamp(20px,3vw,28px); font-weight:900; margin:0 0 10px; } .desc { color:var(--muted); line-height:1.6; font-size:14px; } .dots { display:flex; gap:8px; margin-top:8px; } .dot { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition: transform 160ms, border-color 160ms; } .dot:nth-child(1) { background:#b8902a; } .dot:nth-child(2) { background:#1e293b; } .dot:nth-child(3) { background:#64748b; } .dot.active, .dot:hover { border-color:var(--teal2); transform:scale(1.15); } .sizes { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .size-btn { padding:8px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--text); font-weight:700; cursor:pointer; transition: all 160ms ease; } .size-btn:hover { border-color:var(--teal2); background:rgba(212,175,55,.1); } .size-btn.active { border-color:var(--teal2); background:rgba(212,175,55,.2); box-shadow:0 0 16px rgba(212,175,55,.15); } .row2 { display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:12px; } .qty { display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:4px 8px; } .qty button { border:none; background:none; color:var(--text); font-size:18px; font-weight:900; cursor:pointer; padding:2px 8px; transition: color 160ms; } .qty button:hover { color:var(--teal2); } .qty span { font-weight:900; min-width:20px; text-align:center; } .fav { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--text); padding:10px 14px; border-radius:14px; cursor:pointer; font-size:18px; transition: all 160ms; } .fav:hover { border-color:#f43f5e; color:#f43f5e; } .fav.active { border-color:#f43f5e; color:#f43f5e; background:rgba(244,63,94,.1); } .features { margin-top:16px; display:grid; gap:8px; } .feature { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:13px; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } .shake { animation: shake 300ms ease; } /* ── Cart Drawer ── */ .drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0ms linear 220ms; } .drawer-backdrop.show { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0ms linear 0ms; } .drawer { position:fixed; top:0; right:0; width:min(400px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; z-index:45; background: linear-gradient(180deg,rgba(18,12,4,.98),rgba(10,7,2,.98)); border-left: 1px solid rgba(212,175,55,.18); display:flex; flex-direction:column; transform:translate3d(calc(100% + 56px),0,0); transition: transform 320ms cubic-bezier(.22,.9,.22,1), visibility 0ms linear 320ms; box-shadow: none; visibility: hidden; pointer-events: none; will-change: transform; overscroll-behavior: contain; } .drawer.show { transform:translate3d(0,0,0); visibility: visible; pointer-events: auto; transition: transform 320ms cubic-bezier(.22,.9,.22,1), visibility 0ms linear 0ms; box-shadow: -18px 0 46px rgba(0,0,0,.45); } .drawer-header { padding:18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; } .drawer-title { font-weight:900; font-size:18px; } .drawer-meta { display:flex; align-items:center; gap:10px; } .drawer-body { flex:1; display:flex; flex-direction:column; overflow-y:auto; padding:14px; overscroll-behavior: contain; } .drawer-footer { position: sticky; bottom: 0; flex-shrink: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(10,7,2,.2), rgba(10,7,2,.96) 20%, rgba(10,7,2,.98)); box-shadow: 0 -14px 28px rgba(0,0,0,.22); } .drawer-total { justify-content:space-between; margin-bottom:12px; } .drawer-total-label { font-weight:700; } .drawer-actions { display:grid; gap:10px; } .drawer-actions .btn { width: 100%; min-height: 52px; margin-top: 0; display: flex; align-items: center; justify-content: center; } .drawer-primary { display:block; text-align:center; text-decoration:none; } .drawer-secondary { margin-top:0; } .cart-list { display:grid; gap:10px; } .cart-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); animation: cartItemIn 250ms ease both; } @keyframes cartItemIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } } .cart-item-img { width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:rgba(0,0,0,.3); } .cart-item-info { flex:1; min-width:0; } .cart-item-name { font-weight:700; font-size:13px; margin-bottom:2px; } .cart-item-meta { color:var(--muted); font-size:12px; } .cart-item-price { font-weight:900; font-size:14px; color:var(--gold); } .cart-item-remove { border:none; background:none; color:var(--muted); cursor:pointer; font-size:16px; padding:4px; transition:color 160ms; } .cart-item-remove:hover { color:var(--danger); } /* ── Empty cart state ── */ .cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 32px 24px; } .cart-empty-icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; line-height: 1; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.2); margin-bottom: 4px; } .cart-empty-title { font-size: 18px; font-weight: 800; color: var(--text); } .cart-empty-sub { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 260px; } .cart-empty-btn { margin-top: 10px; padding: 12px 28px; border: none; border-radius: 14px; background: linear-gradient(135deg, #f0c040, #d4af37); color: #1a1206; font-weight: 800; font-size: 15px; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(212,175,55,.22); transition: transform 180ms ease, box-shadow 180ms ease; } .cart-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,55,.3); } .cart-empty-btn:active { transform: translateY(0); } /* ── Inputs / Fields ── */ input, textarea, select { display:block; width:100%; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); font-size:14px; font-family:inherit; transition:border-color 160ms, box-shadow 160ms; outline:none; } input:focus, textarea:focus, select:focus { border-color:rgba(212,175,55,.5); box-shadow:0 0 0 3px rgba(212,175,55,.1); } select option { background:var(--bg2); } .field { margin-bottom:14px; } .field label { display:block; margin-bottom:6px; font-weight:700; font-size:14px; } .field .err { display:none; color:var(--danger); font-size:12px; margin-top:4px; } .field.bad input, .field.bad textarea, .field.bad select { border-color:var(--danger); } .field.bad .err { display:block; } .err { color:var(--danger); font-size:13px; } /* ── Mini / Util ── */ .mini { font-size:12px; color:var(--muted); } .panel { background:rgba(24,18,8,.8); border:1px solid rgba(20,184,136,.18); border-radius:20px; padding:24px; box-shadow: 0 8px 40px rgba(0,0,0,.3); } /* ── Admin Shell ── */ .admin-wrap { display:grid; grid-template-columns:240px 1fr; min-height:100vh; } @media (max-width:720px) { .admin-wrap { grid-template-columns:1fr; } .sidebar { display:none; } } .sidebar { background:rgba(10,7,2,.9); border-left:1px solid rgba(212,175,55,.12); padding:20px 14px; display:flex; flex-direction:column; gap:8px; position:sticky; top:0; height:100vh; overflow-y:auto; } .sidebtn { width:100%; margin:0; text-align:right; padding:12px 16px; border-radius:14px; font-size:14px; position:relative; overflow:hidden; } .sidebtn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.04); opacity:0; transition:opacity 160ms; } .sidebtn:hover::after { opacity:1; } .sidebtn.active { border-color:rgba(212,175,55,.5); background:rgba(180,140,40,.2); box-shadow:0 0 20px rgba(180,140,40,.15); } .content { padding:20px; min-height:100vh; } .toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:20px; padding:16px 20px; border-radius:18px; background:rgba(24,18,8,.6); border:1px solid rgba(212,175,55,.12); } @media (max-width:620px) { .container { width: min(1200px, calc(100vw - 24px)); max-width: calc(100vw - 24px); } .drawer { width: 100vw; height: 100dvh; max-height: 100dvh; } .drawer-header, .drawer-body, .drawer-footer { padding-left: 12px; padding-right: 12px; } .drawer-footer { padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .topbar-inner { gap: 8px; padding: 12px 0; } .brand { flex: 0 1 96px; max-width: 96px; } .brand small { display: none; } .logo { font-size: 30px; } .actions { flex: 0 0 auto; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; } .icon-btn { padding: 8px 10px; font-size: 12px; } #cartBtn { flex: 0 0 auto; } .hero { padding-top: 24px; } } /* ── Admin Product Grid ── */ .admin-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:20px; } /* ── Admin Product Card ── */ .admin-product-card { border-radius:20px; background:linear-gradient(145deg,rgba(24,18,8,.95),rgba(16,12,6,.95)); border:1px solid rgba(212,175,55,.15); overflow:hidden; transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; animation: cardIn 350ms ease both; position:relative; } .admin-product-card:hover { transform:translateY(-5px) scale(1.01); border-color:rgba(212,175,55,.4); box-shadow:0 20px 50px rgba(180,140,40,.18), 0 0 0 1px rgba(212,175,55,.1); } .admin-card-image { width:100%; height:200px; object-fit:cover; display:block; transition:transform 350ms ease; } .admin-product-card:hover .admin-card-image { transform:scale(1.05); } .admin-card-no-image { width:100%; height:200px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); color:var(--muted); font-size:13px; } .admin-card-body { padding:16px; } .admin-card-name { font-weight:900; font-size:16px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .admin-card-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .status-badge { padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.5px; animation: badgeIn 300ms ease both; } @keyframes badgeIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } } .status-published { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.35); color:#4ade80; } .status-draft { background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.35); color:#fbbf24; } .status-hidden { background:rgba(100,116,139,.15); border:1px solid rgba(100,116,139,.35); color:#94a3b8; } .status-new { background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.35); color:#fbbf24; } .admin-card-price { font-weight:900; font-size:18px; color:var(--gold); margin-bottom:12px; } .admin-card-price-old { font-size:13px; color:var(--muted); text-decoration:line-through; margin-right:6px; } .admin-card-sizes { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; } .admin-size-tag { padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.2); color:var(--teal2); } .admin-card-actions { display:flex; gap:8px; } .admin-card-actions .btn { margin:0; flex:1; font-size:13px; padding:9px 12px; } .admin-image-grid { display:flex; gap:10px; flex-wrap:wrap; } .admin-image-preview { position:relative; display:inline-flex; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); } .admin-image-preview img { display:block; object-fit:cover; } .admin-image-preview-card img { width:120px; height:120px; } .admin-image-preview-detail img { width:72px; height:72px; } .admin-image-remove, .rm-detail-img { position:absolute !important; top:6px !important; left:6px !important; width:24px !important; height:24px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.18) !important; background:rgba(239,68,68,.96) !important; color:#fff !important; font-size:12px !important; font-weight:900 !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; line-height:1 !important; box-shadow:0 6px 18px rgba(0,0,0,.28); } .admin-image-empty { min-height:96px; min-width:120px; padding:16px; display:grid; place-items:center; border-radius:14px; border:1px dashed rgba(255,255,255,.16); background:rgba(255,255,255,.03); color:var(--muted); font-size:13px; text-align:center; } /* ── Orders Table ── */ .orders-grid { display:grid; gap:12px; } .order-card { border-radius:16px; background:linear-gradient(135deg,rgba(24,18,8,.8),rgba(16,12,6,.9)); border:1px solid rgba(212,175,55,.12); padding:16px; cursor:pointer; transition:all 250ms ease; animation:cardIn 300ms ease both; position:relative; overflow:hidden; } .order-card::before { content:'';position:absolute;top:0;right:0; width:4px;height:100%; background:linear-gradient(180deg,var(--teal),transparent); opacity:0; transition:opacity 250ms; } .order-card:hover { transform:translateX(-4px); border-color:rgba(212,175,55,.3); } .order-card:hover::before { opacity:1; } .order-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .order-id { font-weight:900; font-size:14px; font-family:monospace; color:var(--teal2); } .order-date { font-size:12px; color:var(--muted); } .order-status { padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; } .order-status.pending { background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.3); color:#fbbf24; } .order-status.confirmed { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3); color:#60a5fa; } .order-status.processing { background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.3); color:#c084fc; } .order-status.shipped { background:rgba(212,175,55,.15); border:1px solid rgba(212,175,55,.3); color:#34d399; } .order-status.delivered { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#4ade80; } .order-status.cancelled { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#f87171; } .order-card-body { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; } .order-info-item { } .order-info-label { font-size:11px; color:var(--muted); margin-bottom:2px; } .order-info-value { font-weight:700; font-size:14px; } .order-total { font-weight:900; font-size:16px; color:var(--gold); } /* ── Order Tracking timeline (customer) ── */ /* Uses theme variables so it adapts to both the light "streetwear" and dark themes. */ .track-card { border:1px solid var(--border); border-radius:16px; padding:18px 16px; background:var(--card); box-shadow:var(--shadow); animation:cardIn 320ms ease both; } .track-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px dashed var(--border); } .track-head-id { font-family:monospace; font-weight:900; font-size:15px; color:var(--text); letter-spacing:.5px; } .track-head-date { font-size:11.5px; color:var(--muted); margin-top:4px; } .track-timeline { position:relative; margin-top:18px; } /* vertical spine on the right (RTL) */ .track-timeline::before { content:''; position:absolute; top:8px; bottom:8px; right:13px; width:2px; background:linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 15%, transparent)); border-radius:2px; } .track-step { position:relative; padding:0 36px 20px 2px; animation:cardIn 380ms ease both; } .track-step:last-child { padding-bottom:2px; } .track-node { position:absolute; top:-2px; right:0; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-size:14px; background:var(--card); border:2px solid color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow:0 0 0 4px var(--card); z-index:1; } .track-step.is-current .track-node { border-color:var(--gold); animation:trackPulse 2.2s ease-in-out infinite; } @keyframes trackPulse { 0%,100% { box-shadow:0 0 0 4px var(--card), 0 0 0 0 color-mix(in srgb, var(--gold) 40%, transparent); } 50% { box-shadow:0 0 0 4px var(--card), 0 0 0 5px color-mix(in srgb, var(--gold) 18%, transparent); } } .track-step.is-cancelled .track-node { border-color:var(--danger); } .track-label { font-weight:800; font-size:14px; color:var(--text); } .track-step.is-current .track-label { color:var(--gold); } .track-step.is-current .track-label::after { content:'الحالية'; margin-right:8px; font-size:10px; font-weight:800; color:var(--card); background:var(--gold); padding:2px 7px; border-radius:999px; vertical-align:middle; } .track-time { font-size:11.5px; color:var(--muted); margin-top:3px; } .track-note { margin-top:10px; display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:12px; background:color-mix(in srgb, var(--gold) 8%, var(--card)); border:1px solid var(--border); border-right:3px solid var(--gold); } .track-note-ic { font-size:15px; line-height:1.3; flex:none; } .track-note-body { min-width:0; } .track-note-title { font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--gold); margin-bottom:3px; opacity:.9; } .track-note-text { font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; } .track-step.is-cancelled .track-note { background:color-mix(in srgb, var(--danger) 8%, var(--card)); border-color:color-mix(in srgb, var(--danger) 25%, var(--border)); border-right-color:var(--danger); } .track-step.is-cancelled .track-note-title { color:var(--danger); } /* ── Stats Cards ── */ .order-card-actions { display:flex; gap:8px; flex-wrap:wrap; } .confirm-delete-wrap { display:grid; gap:14px; } .confirm-delete-warning { padding:14px 16px; border-radius:14px; border:1px solid rgba(239,68,68,.24); background:rgba(239,68,68,.08); color:#fecaca; line-height:1.7; } .confirm-delete-panel { display:grid; gap:12px; padding:18px; } .confirm-delete-order-id { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:18px; font-weight:900; color:var(--teal2); } .confirm-delete-label { display:block; font-weight:700; font-size:14px; } .confirm-delete-actions { display:flex; gap:10px; flex-wrap:wrap; } .confirm-delete-actions .btn { margin:0; flex:1 1 180px; } .stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; } .stat-card { border-radius:18px; background:linear-gradient(135deg,rgba(24,18,8,.9),rgba(16,12,6,.9)); border:1px solid rgba(212,175,55,.15); padding:20px; text-align:center; animation:statIn 400ms ease both; transition:transform 200ms ease, box-shadow 200ms ease; } .stat-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(180,140,40,.12); } @keyframes statIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .stat-icon { font-size:32px; margin-bottom:8px; } .stat-value { font-size:28px; font-weight:900; color:var(--teal2); margin-bottom:4px; } .stat-label { color:var(--muted); font-size:13px; } /* ── Feedback Cards ── */ .feedback-grid { display:grid; gap:14px; } .feedback-card { border-radius:16px; background:linear-gradient(135deg,rgba(24,18,8,.8),rgba(16,12,6,.9)); border:1px solid rgba(212,175,55,.12); padding:16px; animation:cardIn 300ms ease both; transition:all 250ms ease; position:relative; overflow:hidden; } .feedback-card:hover { border-color:rgba(212,175,55,.3); transform:translateX(-3px); } .feedback-card.complaint { border-right:3px solid rgba(239,68,68,.5); } .feedback-card.suggestion { border-right:3px solid rgba(212,175,55,.5); } .feedback-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .feedback-type-badge { padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; } .feedback-type-badge.complaint { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#f87171; } .feedback-type-badge.suggestion { background:rgba(212,175,55,.15); border:1px solid rgba(212,175,55,.3); color:#34d399; } .feedback-status { padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; } .feedback-status.new { background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.3); color:#fbbf24; } .feedback-status.read { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3); color:#60a5fa; } .feedback-status.resolved { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#4ade80; } .feedback-message { color:var(--text); line-height:1.6; font-size:14px; margin-bottom:10px; background:rgba(255,255,255,.03); border-radius:10px; padding:10px 12px; } .feedback-order-link { font-size:12px; color:var(--teal2); font-weight:700; cursor:pointer; text-decoration:underline; } .feedback-date { font-size:11px; color:var(--muted); } .feedback-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .feedback-actions .btn { margin:0; flex:unset; width:auto; font-size:12px; padding:6px 14px; } /* ── Feedback Filter Tabs ── */ .filter-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .filter-tab { padding:7px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; transition:all 160ms ease; } .filter-tab.active { background:rgba(180,140,40,.2); border-color:rgba(212,175,55,.4); color:var(--text); } .filter-tab:hover:not(.active) { border-color:rgba(212,175,55,.25); color:var(--text); } /* ── Help Type Buttons ── */ .help-type-btn { border:2px solid rgba(212,175,55,.2); background:rgba(180,140,40,.08); border-radius:18px; padding:20px; color:var(--text); cursor:pointer; text-align:center; width:100%; transition:all 200ms ease; } .help-type-btn:hover { border-color:rgba(212,175,55,.5); background:rgba(180,140,40,.18); transform:translateY(-2px); box-shadow:0 8px 24px rgba(180,140,40,.15); } /* —— Custom Design Page —— */ .custom-nav { display: flex; gap: 10px; } .custom-page { padding: 26px 0 70px; display: grid; gap: 24px; } .custom-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr); gap: 20px; align-items: stretch; } .custom-kicker { display: inline-flex; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.22); background: rgba(180,140,40,.1); color: var(--teal2); font-size: 12px; font-weight: 900; letter-spacing: 1.4px; } .custom-hero h1 { margin: 16px 0 10px; font-size: clamp(28px, 5vw, 48px); } .custom-hero p { margin: 0; color: var(--muted); line-height: 1.8; } .custom-steps { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; } .custom-step { padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); font-weight: 700; font-size: 13px; } .custom-hero-card, .custom-builder, .custom-result-preview, .custom-contact-card { border-radius: 24px; border: 1px solid rgba(212,175,55,.14); background: linear-gradient(180deg, rgba(24,18,8,.88), rgba(16,12,6,.94)); box-shadow: 0 14px 40px rgba(0,0,0,.28); } .custom-hero-card { padding: 24px; display: grid; gap: 12px; align-content: start; } .custom-hero-badge { display: inline-flex; width: fit-content; padding: 6px 12px; border-radius: 999px; background: rgba(212,175,55,.14); color: var(--gold); border: 1px solid rgba(212,175,55,.24); font-weight: 800; font-size: 12px; } .custom-builder { padding: 22px; } .custom-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .custom-upload-card { display: grid; gap: 8px; padding: 18px; border-radius: 20px; border: 1px dashed rgba(212,175,55,.28); background: rgba(255,255,255,.03); cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .custom-upload-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.5); box-shadow: 0 12px 28px rgba(180,140,40,.12); } .custom-upload-label { font-size: 18px; font-weight: 900; } .custom-upload-hint { color: var(--muted); font-size: 13px; } .custom-upload-preview { min-height: 260px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), rgba(2,6,12,.35); display: grid; place-items: center; color: var(--muted); overflow: hidden; text-align: center; padding: 16px; } .custom-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .custom-actions-row { margin-top: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .custom-generate-btn { width: auto; min-width: 220px; margin-top: 0; padding-inline: 26px; } .custom-result { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 20px; } .custom-result-preview, .custom-contact-card { padding: 22px; } .custom-contact-card-inline { margin-top: 18px; } .custom-result-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .custom-result-title { font-size: 20px; font-weight: 900; margin-bottom: 6px; } .custom-result-image-wrap { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); aspect-ratio: 1 / 1; } .custom-result-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; } .custom-result-text { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text); line-height: 1.8; white-space: pre-wrap; } .custom-success { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(34,197,94,.28); background: rgba(34,197,94,.12); color: #9af0b5; font-weight: 700; } .custom-design-card { border-radius: 20px; background: linear-gradient(145deg, rgba(24,18,8,.95), rgba(16,12,6,.95)); border: 1px solid rgba(212,175,55,.15); overflow: hidden; display: grid; } .custom-design-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: rgba(255,255,255,.03); } .custom-design-body { padding: 16px; display: grid; gap: 12px; } .custom-design-meta { display: grid; gap: 8px; } .custom-design-line { display: grid; gap: 4px; } .custom-design-label { color: var(--muted); font-size: 12px; } .custom-design-value { line-height: 1.7; word-break: break-word; } .custom-design-text { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text); line-height: 1.8; } .custom-design-reference-strip { display: flex; gap: 10px; flex-wrap: wrap; } .custom-design-reference-thumb { width: 78px; height: 78px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .custom-design-actions { display: flex; gap: 8px; flex-wrap: wrap; } .custom-design-actions .btn { width: auto; margin: 0; padding: 8px 14px; font-size: 12px; } .custom-design-modal { display: grid; gap: 18px; } .custom-design-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .custom-design-modal-shot { display: grid; gap: 8px; } .custom-design-modal-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .custom-design-modal-shot-label, .custom-design-modal-label { color: var(--muted); font-size: 13px; font-weight: 700; } .custom-design-modal-info { display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .custom-design-modal-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; } .custom-design-modal-value { color: var(--text); font-weight: 700; word-break: break-word; } .custom-design-modal-box { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .status-contacted { background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; } .status-confirmed { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #4ade80; } @media (max-width: 920px) { .custom-hero, .custom-result { grid-template-columns: 1fr; } } @media (max-width: 720px) { .custom-upload-grid { grid-template-columns: 1fr; } .custom-upload-preview { min-height: 220px; } } /* ── Checkout ── */ .checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; padding:24px 0 60px; align-items:start; } @media (max-width:860px) { .checkout-grid { grid-template-columns:1fr; } } .checkout-card { border-radius:20px; padding:24px; background:rgba(24,18,8,.7); border:1px solid rgba(212,175,55,.15); } .discount-box { border:1px solid rgba(212,175,55,.16); border-radius:18px; padding:16px; background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(255,255,255,.02)); } .discount-actions { display:flex; gap:10px; flex-wrap:wrap; } .discount-actions input { flex:1; min-width:180px; } .discount-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.28); color:#9af0b5; font-weight:800; font-size:12px; } .discount-hint { margin-top:10px; font-size:13px; color:var(--muted); } .discount-hint[data-tone="success"] { color:#86efac; } .discount-hint[data-tone="error"] { color:#fda4af; } .summary-totals { border-top:1px solid var(--border); padding-top:14px; display:grid; gap:10px; } .summary-total-row { display:flex; justify-content:space-between; align-items:center; gap:12px; } .summary-total-row-discount span:last-child { color:#86efac; font-weight:800; } .summary-total-row-final { padding-top:8px; border-top:1px dashed rgba(255,255,255,.12); } /* ── Notification ── */ .toast { position:fixed; bottom:20px; right:50%; transform:translateX(50%); background:rgba(24,18,8,.95); border:1px solid rgba(212,175,55,.3); border-radius:14px; padding:12px 20px; z-index:999; font-weight:700; font-size:14px; animation:toastIn 300ms ease, toastOut 300ms ease 2700ms forwards; box-shadow:0 8px 30px rgba(0,0,0,.4); } @keyframes toastIn { from{opacity:0;transform:translate(50%,20px)} to{opacity:1;transform:translate(50%,0)} } @keyframes toastOut { from{opacity:1} to{opacity:0} } /* ── Studio (Custom Design) ── */ .studio-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 20px 0 60px; align-items: start; } @media (max-width: 880px) { .studio-wrap { grid-template-columns: 1fr; } .studio-controls { position: static !important; } } .studio-heading { margin-bottom: 18px; } .studio-heading h1 { margin: 10px 0 6px; font-size: clamp(22px,4vw,36px); } .studio-heading p { color: var(--muted); margin: 0; line-height: 1.7; font-size: 14px; } /* ٣ خطوات بسيطة تحت العنوان — عشان العميل يفهم في ثانية */ .studio-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .studio-steps span { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; color: var(--text); } .studio-steps b { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: var(--bg); font-size: 11px; font-weight: 900; } .studio-canvas-area { min-width: 0; } .canvas-tabs { display: flex; gap: 10px; margin-bottom: 12px; } .canvas-tab { flex: 1; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; font-weight: 700; font-size: 14px; transition: all 160ms; } .canvas-tab.active, .canvas-tab:hover { background: rgba(180,140,40,.18); border-color: rgba(212,175,55,.45); color: var(--text); } .tshirt-wrap { position: relative; border-radius: 20px; overflow: hidden; border: 2px solid rgba(212,175,55,.2); background: rgba(0,0,0,.25); user-select: none; } .tshirt-wrap.hidden { display: none; } .tshirt-canvas { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; } .tshirt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; display: block; } .design-zone { position: absolute; border: 2px dashed rgba(212,175,55,.55); border-radius: 6px; background: rgba(212,175,55,.05); pointer-events: none; box-sizing: border-box; } .tshirt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; padding: 40px; text-align: center; color: var(--muted); } .canvas-hint { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; } /* Photo layers */ .photo-layer { position: absolute; cursor: grab; border: 2px solid transparent; border-radius: 3px; box-sizing: border-box; touch-action: none; min-width: 30px; min-height: 30px; } .photo-layer:hover, .photo-layer.active { border-color: rgba(212,175,55,.85); z-index: 20; } .photo-layer:active { cursor: grabbing; } .photo-layer img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } .layer-delete { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; cursor: pointer; opacity: 0; transition: opacity 150ms; z-index: 30; padding: 0; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .photo-layer:hover .layer-delete, .photo-layer.active .layer-delete { opacity: 1; } .resize-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--teal2); border: 2px solid #fff; z-index: 25; opacity: 0; transition: opacity 150ms; touch-action: none; } .photo-layer:hover .resize-handle, .photo-layer.active .resize-handle { opacity: 1; } .resize-handle.tl { top: -7px; left: -7px; cursor: nwse-resize; } .resize-handle.tr { top: -7px; right: -7px; cursor: nesw-resize; } .resize-handle.bl { bottom: -7px; left: -7px; cursor: nesw-resize; } .resize-handle.br { bottom: -7px; right: -7px; cursor: nwse-resize; } /* Photos panel */ .studio-controls { position: sticky; top: 80px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .photos-panel { background: linear-gradient(180deg,rgba(24,18,8,.88),rgba(16,12,6,.94)); border: 1px solid rgba(212,175,55,.15); border-radius: 20px; padding: 18px; } .photos-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .upload-photo-btn { padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(212,175,55,.45); background: rgba(180,140,40,.14); color: var(--teal2); cursor: pointer; font-size: 13px; font-weight: 800; transition: all 160ms; white-space: nowrap; } .upload-photo-btn:hover { background: rgba(180,140,40,.28); border-color: rgba(212,175,55,.7); } .photo-strip { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 8px; border: 1px dashed rgba(255,255,255,.1); border-radius: 14px; background: rgba(0,0,0,.12); } .photo-strip-empty { width: 100%; text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0; line-height: 1.5; } .photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,.12); cursor: pointer; transition: border-color 150ms, transform 150ms; flex-shrink: 0; } .photo-thumb:hover { border-color: var(--teal2); transform: scale(1.05); } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-thumb-delete { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(239,68,68,.9); color: #fff; border: none; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 150ms; cursor: pointer; padding: 0; line-height: 1; z-index: 5; } .photo-thumb:hover .photo-thumb-delete { opacity: 1; } .studio-form-card { background: linear-gradient(180deg,rgba(24,18,8,.88),rgba(16,12,6,.94)); border: 1px solid rgba(212,175,55,.15); border-radius: 20px; padding: 18px; } /* Admin design settings */ .design-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0; } @media (max-width: 600px) { .design-settings-grid { grid-template-columns: 1fr; } } .tshirt-setting-card { background: rgba(24,18,8,.6); border: 1px solid rgba(212,175,55,.15); border-radius: 16px; padding: 16px; } .tshirt-setting-preview { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); margin: 10px 0; cursor: crosshair; user-select: none; touch-action: none; } .tshirt-setting-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; } .zone-draw-overlay { position: absolute; border: 2px solid var(--teal2); background: rgba(212,175,55,.15); box-sizing: border-box; pointer-events: none; display: none; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:rgba(255,255,255,.04); } ::-webkit-scrollbar-thumb { background:rgba(212,175,55,.3); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:rgba(212,175,55,.5); } /* ───────────────────────────────────────────── IMMERSIVE PRODUCT VIEW (replaces modal) The card expands from its on-screen position into a cinematic fullscreen experience. ───────────────────────────────────────────── */ .immersive { position: fixed; inset: 0; z-index: 90; background: #06101d; color: #fff; overflow: hidden; --imm-c-top: rgba(24,18,8, 1); --imm-c-bottom: rgba(10,7,2, 1); --imm-c-left: rgba(24,18,8, 1); --imm-c-right: rgba(10,7,2, 1); --imm-c-mid: rgba(16,12,6, 1); --imm-ox: 50%; --imm-oy: 50%; --imm-sx: 0.2; --imm-sy: 0.2; --imm-drag-y: 0px; /* Closed state: pushed off, no interactions, no paint cost */ opacity: 0; visibility: hidden; pointer-events: none; transform-origin: var(--imm-ox) var(--imm-oy); transform: translateY(var(--imm-drag-y)) scale(var(--imm-sx), var(--imm-sy)); border-radius: 18px; transition: transform 480ms cubic-bezier(.22, .8, .22, 1), opacity 260ms ease 60ms, border-radius 480ms cubic-bezier(.22, .8, .22, 1), visibility 0s linear 500ms; will-change: transform, opacity; contain: layout paint; } .immersive.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1, 1); border-radius: 0; transition: transform 520ms cubic-bezier(.22, .8, .22, 1), opacity 240ms ease, border-radius 520ms cubic-bezier(.22, .8, .22, 1), visibility 0s linear; } /* While the user is dragging (mobile swipe-to-close), disable transitions */ .immersive.dragging { transition: none !important; } /* ── Background layers ── */ .imm-bg-wrap { position: absolute; inset: 0; overflow: hidden; } /* Subtle blurred ambience — light filter, gated behind .open so it only paints when needed */ .imm-bg-blur { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) saturate(1.2) brightness(.58); opacity: 0; transition: opacity 380ms ease 80ms; pointer-events: none; z-index: 1; } .immersive.open .imm-bg-blur { opacity: .9; } /* Edge-color gradient overlay (extracted from image edges) */ .imm-grad { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 50% 8%, var(--imm-c-top) 0%, transparent 70%), radial-gradient(ellipse 90% 55% at 50% 92%, var(--imm-c-bottom) 0%, transparent 70%), radial-gradient(ellipse 50% 90% at 0% 50%, var(--imm-c-left) 0%, transparent 70%), radial-gradient(ellipse 50% 90% at 100% 50%, var(--imm-c-right) 0%, transparent 70%), var(--imm-c-mid); opacity: 0; transition: opacity 480ms ease 100ms, background 320ms ease; pointer-events: none; z-index: 2; } .immersive.open .imm-grad { opacity: 1; } /* Sharp product image — centered, contained, cinematic */ .imm-bg { position: absolute; top: 50%; left: 50%; max-width: min(88vw, 680px); max-height: 78vh; width: auto; height: auto; object-fit: contain; transform: translate(-50%, -50%) scale(.96); opacity: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); transition: transform 520ms cubic-bezier(.22,.8,.22,1) 60ms, opacity 340ms ease 100ms; z-index: 3; pointer-events: none; } .immersive.open .imm-bg { transform: translate(-50%, -50%) scale(1); opacity: 1; } @media (max-width: 720px) { .imm-bg { max-width: 92vw; max-height: 64vh; } } .imm-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 22%, transparent 68%, rgba(0,0,0,.6) 100%); } /* ── Header layer ── */ .imm-top { position: absolute; top: 0; left: 0; right: 0; padding: 16px 22px; padding-top: max(16px, env(safe-area-inset-top)); z-index: 10; pointer-events: none; /* let title area pass through; children re-enable below */ } .imm-title-wrap { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-12px); text-align: center; max-width: min(60vw, 480px); min-width: 0; opacity: 0; transition: opacity 320ms ease 220ms, transform 380ms cubic-bezier(.22,.8,.22,1) 220ms; pointer-events: none; } .immersive.open .imm-title-wrap { opacity: 1; transform: translateX(-50%) translateY(0); } .imm-title-kicker { font-size: 11px; letter-spacing: 3px; font-weight: 800; color: rgba(240,200,110, .95); text-transform: uppercase; margin-bottom: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .imm-title-kicker:empty { display: none; } .imm-title { font-size: clamp(17px, 3.2vw, 28px); font-weight: 900; margin: 0; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* Brand at top-right (RTL visual right == the actual right edge) */ .imm-brand { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 20px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; padding: 6px 12px 7px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; transform: translateY(-10px); transition: opacity 320ms ease 220ms, transform 380ms cubic-bezier(.22,.8,.22,1) 220ms; pointer-events: auto; } .immersive.open .imm-brand { opacity: 1; transform: translateY(0); } .imm-brand-line { font-family: "Cinzel", serif; font-size: 20px; font-weight: 900; letter-spacing: 2px; background: linear-gradient(105deg,#7a5c12 0%,#f7e389 22%,#fff7d6 38%,#caa23a 52%,#8a6a18 70%,#f4dd7e 88%,#a98328 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldSweep 6s linear infinite; } .imm-brand-sub { font-size: 9px; letter-spacing: 4px; font-weight: 800; color: rgba(240, 200, 110, .95); margin-top: 2px; } /* Close (X) — visual LEFT corner to keep it away from the brand */ .imm-close { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 20px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); opacity: 0; transform: translateY(-10px); transition: opacity 280ms ease 200ms, transform 380ms cubic-bezier(.22,.8,.22,1) 200ms, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; pointer-events: auto; z-index: 20; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .immersive.open .imm-close { opacity: 1; transform: translateY(0); } .imm-close svg { transition: transform 320ms cubic-bezier(.22,.8,.22,1); } .imm-close:hover { background: rgba(244, 63, 94, .25); border-color: rgba(244, 63, 94, .55); box-shadow: 0 8px 28px rgba(244,63,94,.3); } .imm-close:hover svg { transform: rotate(135deg) scale(1.08); } .imm-close:active svg { transform: rotate(135deg) scale(.94); } /* Description */ .imm-desc { position: absolute; bottom: calc(var(--imm-bar-h, 188px) + 16px); left: 50%; transform: translateX(-50%) translateY(8px); max-width: min(640px, 86vw); text-align: center; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.82); text-shadow: 0 2px 14px rgba(0,0,0,.7); padding: 0 16px; z-index: 8; opacity: 0; transition: opacity 360ms ease 320ms, transform 380ms cubic-bezier(.22,.8,.22,1) 320ms; pointer-events: none; } .immersive.open .imm-desc { opacity: 1; transform: translateX(-50%) translateY(0); } .imm-desc:empty { display: none; } @media (max-width: 720px) { .imm-desc { display: none; } } /* Swipe hint */ .imm-swipe-hint { position: absolute; bottom: calc(var(--imm-bar-h, 168px) + 10px); left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; opacity: 0; pointer-events: none; z-index: 11; transition: opacity 280ms ease 480ms; } .imm-swipe-bar { width: 42px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.55); animation: immSwipePulse 1.8s ease-in-out infinite; } .imm-swipe-text { font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,.7); font-weight: 700; } @keyframes immSwipePulse { 0%,100% { transform: translateY(0); opacity:.55; } 50% { transform: translateY(4px); opacity:1; } } .immersive.open .imm-swipe-hint { opacity: .85; } @media (max-width: 720px) { .imm-swipe-hint { display: flex; } } /* ── Bottom action bar ── */ .imm-bar { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) 20px; background: linear-gradient(180deg, rgba(8,18,32,.55) 0%, rgba(8,18,32,.85) 60%, rgba(8,18,32,.94) 100%); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -10px 40px rgba(0,0,0,.45); z-index: 12; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(28%); transition: transform 460ms cubic-bezier(.22,.8,.22,1) 160ms, opacity 280ms ease 160ms; pointer-events: auto; touch-action: manipulation; } .immersive.open .imm-bar { transform: translateY(0); opacity: 1; } .imm-bar-row { display: flex; align-items: center; gap: 10px; } .imm-bar-row-1 { gap: 12px; flex-wrap: nowrap; overflow: hidden; } .imm-bar-row-2 { justify-content: space-between; gap: 12px; flex-wrap: wrap; } .imm-bar-label { font-weight: 900; font-size: 13px; color: rgba(255,255,255,.88); letter-spacing: .5px; white-space: nowrap; flex-shrink: 0; } .imm-sizes { display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; } .imm-sizes::-webkit-scrollbar { display: none; } .imm-size-btn { min-width: 44px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; flex-shrink: 0; transition: transform 160ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .imm-size-btn:hover { border-color: rgba(240,200,110, .7); background: rgba(212,175,55,.14); } .imm-size-btn.active { border-color: rgba(240,200,110, 1); background: linear-gradient(180deg, rgba(212,175,55,.32), rgba(180,140,40,.22)); color: #fff; box-shadow: 0 4px 20px rgba(212,175,55,.35), inset 0 0 0 1px rgba(255,255,255,.08); transform: scale(1.04); } .imm-qty { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 3px; height: 44px; flex-shrink: 0; } .imm-qty button { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; transition: background 160ms, color 160ms, transform 120ms; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .imm-qty button:hover { background: rgba(212,175,55,.2); color: rgba(240,200,110,1); } .imm-qty button:active { transform: scale(.9); } .imm-qty span { min-width: 26px; text-align: center; font-weight: 900; font-size: 15px; display: inline-block; transition: transform 180ms cubic-bezier(.22,.8,.22,1); } .imm-qty span.bump { transform: scale(1.25); } .imm-price { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; flex-shrink: 0; } .imm-price-was { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: line-through; font-weight: 700; transition: opacity 240ms ease; } .imm-price-was:empty { display: none; } .imm-price-now { font-size: 19px; font-weight: 900; color: var(--gold, #f0c040); text-shadow: 0 0 18px rgba(240,192,64,.25); transition: transform 220ms cubic-bezier(.22,.8,.22,1), color 220ms ease; display: inline-block; white-space: nowrap; } .imm-price-now.bump { transform: scale(1.12); } .imm-add { flex: 1 1 auto; min-width: 150px; height: 50px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(240,200,110, .5); background: linear-gradient(180deg, rgba(212,175,55,.94), rgba(180,140,40,.94)); color: #fff; font-weight: 900; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 28px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.18); transition: transform 160ms ease, box-shadow 220ms ease, opacity 220ms ease, filter 220ms ease; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .imm-add::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-110%); transition: transform 700ms ease; pointer-events: none; } .imm-add:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.22); } .imm-add:hover:not(:disabled)::before { transform: translateX(110%); } .imm-add:active:not(:disabled) { transform: translateY(0) scale(.98); } .imm-add:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; } .imm-add.shake { animation: immShake 380ms ease; } @keyframes immShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .imm-add-icon { font-size: 16px; } /* ── Mobile/compact ── */ @media (max-width: 720px) { .imm-top { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); } .imm-title-wrap { max-width: calc(100vw - 180px); top: max(18px, env(safe-area-inset-top)); } .imm-title { font-size: 15px; } .imm-title-kicker { font-size: 10px; letter-spacing: 2px; margin-bottom: 2px; } .imm-brand { right: 14px; padding: 5px 10px 6px 10px; } .imm-brand-line { font-size: 15px; } .imm-brand-sub { font-size: 8px; letter-spacing: 3px; } .imm-close { left: 14px; width: 42px; height: 42px; } .imm-bar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px; gap: 10px; } .imm-bar-label { font-size: 12px; } .imm-size-btn { min-width: 40px; height: 36px; padding: 0 10px; font-size: 12px; } .imm-qty { height: 42px; } .imm-qty button { width: 32px; height: 32px; font-size: 18px; } .imm-price-now { font-size: 17px; } .imm-add { height: 46px; font-size: 14px; min-width: 130px; padding: 0 14px; } } @media (max-width: 420px) { .imm-title-wrap { max-width: calc(100vw - 160px); } .imm-title { font-size: 14px; } .imm-bar-row-2 { gap: 10px; } .imm-qty { order: 1; } .imm-price { order: 2; align-items: flex-end; margin-left: auto; } .imm-add { order: 3; flex: 1 1 100%; min-width: 0; } } /* Body scroll lock — overflow only, NO touch-action (it breaks taps on mobile) */ body.immersive-open { overflow: hidden; } /* Source card hidden during immersive */ .card.imm-source { opacity: 0; transition: opacity 140ms ease 80ms; } /* ── خطوط قياس المقاس على صورة المنتج (تظهر عند اختيار مقاس) ── */ .imm-measure { position: absolute; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 280ms ease; } .imm-measure.show { opacity: 1; } /* خط الطول — رأسي على جنب الصورة */ .imm-measure-v { position: absolute; left: 7%; top: 9%; bottom: 9%; border-left: 2px solid rgba(255,255,255,.9); filter: drop-shadow(0 0 6px rgba(0,0,0,.7)); } .imm-measure-v::before, .imm-measure-v::after { content: ""; position: absolute; left: -8px; width: 18px; height: 2px; background: rgba(255,255,255,.9); } .imm-measure-v::before { top: 0; } .imm-measure-v::after { bottom: 0; } /* خط العرض — أفقي أسفل الصورة */ .imm-measure-h { position: absolute; bottom: 7%; left: 13%; right: 13%; border-top: 2px solid rgba(255,255,255,.9); filter: drop-shadow(0 0 6px rgba(0,0,0,.7)); } .imm-measure-h::before, .imm-measure-h::after { content: ""; position: absolute; top: -8px; height: 18px; width: 2px; background: rgba(255,255,255,.9); } .imm-measure-h::before { left: 0; } .imm-measure-h::after { right: 0; } /* أرقام القياس */ .imm-measure-label { position: absolute; background: rgba(8,18,32,.85); color: #fff; font-weight: 800; font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 8px; white-space: nowrap; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 4px 14px rgba(0,0,0,.4); } .imm-measure-v .imm-measure-label { left: 12px; top: 50%; transform: translateY(-50%); } .imm-measure-h .imm-measure-label { left: 50%; bottom: 10px; transform: translateX(-50%); } @media (max-width: 420px) { .imm-measure-label { font-size: 11px; padding: 3px 6px; } } /* ── جدول إدارة المقاسات (لوحة الأدمن) ── */ .sizes-table-head, .sizes-row { display: grid; grid-template-columns: 1fr 1fr 1fr 52px; gap: 10px; align-items: center; } .sizes-table-head { font-weight: 800; font-size: 13px; color: var(--muted); padding: 0 4px 8px; } .sizes-row { margin-bottom: 10px; } .sizes-row input { width: 100%; margin: 0; } .sizes-row .size-label { text-align: center; font-weight: 800; } /* Reduced motion: instant transitions */ @media (prefers-reduced-motion: reduce) { .immersive, .immersive.open, .imm-bg, .imm-bg-blur, .imm-grad, .imm-top, .imm-bar, .imm-title-wrap, .imm-brand, .imm-close, .imm-desc { transition: opacity 200ms ease !important; transform: none !important; } .immersive { transform: scale(1, 1) !important; } /* مستثنى وقت الانترو (html.intro-reveal) عشان التتابع السينمائي يلعب كامل مهما كان الإعداد */ html:not(.intro-reveal) body, html:not(.intro-reveal) .topbar, html:not(.intro-reveal) main.container, html:not(.intro-reveal) .hero h1, html:not(.intro-reveal) .hero p, html:not(.intro-reveal) .hero-actions, html:not(.intro-reveal) .grid .card { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════ THEME #2 — "Streetwear" (أبيض / أسود) — دي بقت الهوية الأساسية. متغيّرات الألوان اتنقلت لـ :root الأساسي فوق (الثيم القديم اتشال). اللي تحت بس تعديلات المكوّنات المشتركة (الخلفية/اللوجو...). ═══════════════════════════════════════════════════════════════════ */ /* ── الخلفية: خرساني مسطّح بدون غيوم/مؤثرات ── */ body { background: #e9e8e3 !important; color: #141414; } body::before { content: none !important; display: none !important; } #siteClouds, .site-clouds-fallback { display: none !important; } /* ── اللوجو الدهبي (نخلّيه دهبي غامق يبان على الأبيض) ── */ .logo, .imm-brand-line { background: linear-gradient(105deg,#7a5c12,#caa23a 40%,#a9791a 70%,#8a6a18) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } /* ── Topbar ── */ .topbar { background: #e9e8e3 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 2px solid #111 !important; } .pill { color: #555; } .pill.active, .pill:hover { background: #111; color: #fff; border-color: #111; } .icon-btn { background: #fff !important; color: #111 !important; border: 1.5px solid #111 !important; border-radius: 8px; box-shadow: none !important; } .icon-btn:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; } .badge { background: #111; color: #fff; border: 1px solid #111; } /* ── Hero (عنوان تخين كبير) ── */ .hero h1 { font-weight: 800; font-size: clamp(30px,6vw,46px); letter-spacing: -1px; line-height: 1.06; color: #111; } .hero p { color: #6f6e69; } /* ── زر التصفية (أسود مملوء) + زر أنشئ تصميمك (أبيض ببوردر أسود) ── */ .cat-filter-btn { background: #111 !important; color: #fff !important; border: 1.5px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } .cat-filter-btn:hover { background: #000 !important; box-shadow: none !important; transform: translateY(-1px); } .cat-filter-btn.active { background: #111 !important; box-shadow: none !important; } .cat-filter-btn-icon { color: #fff !important; } .design-cta-btn { background: #fff !important; color: #111 !important; border: 1.5px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } .design-cta-btn:hover { background: #f4f3ef !important; box-shadow: none !important; } .design-cta-label { color: #111 !important; } .design-cta-sub { color: #6f6e69 !important; } .design-cta-icon, .design-cta-arrow { color: #111; } /* ── الكروت: بيضا ببوردر أسود حاد ── */ .card { background: #fff !important; border: 1.5px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } .card:hover { transform: translateY(-3px); border-color: #111 !important; box-shadow: 0 10px 22px rgba(0,0,0,.13) !important; } .card-media { background: #dddcd6 !important; } .card-title { color: #111; } .price { color: #111; } .price.sale { color: #111 !important; text-shadow: none !important; } .price.was { color: #9b9a94 !important; } /* ── ستيكر "تخفيض" أسود مايل ── */ .chip { background: #111 !important; color: #fff !important; border: none !important; box-shadow: none !important; border-radius: 6px !important; transform: rotate(-5deg); } /* ── الأزرار ── */ .btn { background: #111 !important; color: #fff !important; border: 1.5px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } .btn:hover:not(:disabled) { background: #000 !important; box-shadow: none !important; transform: translateY(-1px); } .btn.secondary { background: #fff !important; color: #111 !important; border: 1.5px solid #111 !important; } .btn.secondary:hover:not(:disabled) { background: #f4f3ef !important; } .btn.danger { background: #fff !important; color: #c0392b !important; border: 1.5px solid #c0392b !important; } .btn.danger:hover:not(:disabled) { background: #c0392b !important; color: #fff !important; box-shadow: none !important; } .btn.success-btn { background: #2f8f4e !important; color: #fff !important; border-color: #2f8f4e !important; } .muted-box { background: #fff; border: 1px dashed #cfcec8; color: #6f6e69; } /* ── المدخلات ── */ input, textarea, select { background: #fff !important; border: 1px solid #d8d7d2 !important; color: #111 !important; } input:focus, textarea:focus, select:focus { border-color: #111 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; } select option { background: #fff; } .field label { color: #111; } /* ── Modal / Backdrop ── */ .backdrop { background: rgba(0,0,0,.45); } .modal { background: #fff !important; border: 1px solid #e2e1dc !important; box-shadow: 0 24px 60px rgba(0,0,0,.22) !important; } .modal-close { border-bottom-color: #eee; } .xbtn { background: #fff; color: #111; border: 1px solid #d8d7d2; } .xbtn:hover { background: #f4f3ef; } /* ── السلة (Drawer) ── */ .drawer { background: #fff !important; border-left: 1px solid #e2e1dc !important; } .drawer.show { box-shadow: -18px 0 46px rgba(0,0,0,.18) !important; } .drawer-header { border-bottom-color: #eee; } .drawer-title { color: #111; } .drawer-footer { background: #fff !important; border-top-color: #eee; box-shadow: 0 -10px 20px rgba(0,0,0,.06) !important; } .cart-item { background: #faf9f6; border: 1px solid #ececec; } .cart-item-name { color: #111; } .cart-item-price { color: #111; } .cart-empty-icon { background: #f1f0eb; border: 1px solid #e2e1dc; } .cart-empty-btn { background: #111; color: #fff; box-shadow: none; } .cart-empty-btn:hover { background: #000; box-shadow: none; } /* ── أزرار المساعدة ── */ .help-type-btn { background: #fff; border: 1.5px solid #111; color: #111; } .help-type-btn:hover { background: #f4f3ef; border-color: #111; box-shadow: none; transform: translateY(-2px); } /* ── Toast ── */ .toast { background: #111 !important; color: #fff !important; border: 1px solid #111 !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; } /* ── Scrollbar ── */ ::-webkit-scrollbar-track { background: rgba(0,0,0,.04); } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.45); } /* ── Category Overlay ── */ .cat-overlay { background: #e9e8e3 !important; } .cat-overlay-header { background: #e9e8e3 !important; border-bottom-color: #cfcec8; } .cat-overlay-title { color: #111; } .cat-item { background: #fff !important; border: 1.5px solid #111 !important; border-radius: 8px; } .cat-item::before { display: none !important; } .cat-item:hover { border-color: #111 !important; box-shadow: 0 8px 18px rgba(0,0,0,.12) !important; } .cat-item.active { background: #111 !important; box-shadow: none !important; } .cat-item.active .cat-item-name, .cat-item.active .cat-item-count { color: #fff; } .cat-item-icon { background: #f1f0eb !important; border: 1px solid #e2e1dc !important; } .cat-item.active .cat-item-icon { background: #fff !important; } .cat-item-check { background: #fff; color: #111; } /* ── Product Modal bits ── */ .kicker { color: #8a6a18; } .size-btn { background: #fff !important; border: 1px solid #d8d7d2 !important; color: #111; } .size-btn:hover { border-color: #111 !important; background: #f4f3ef !important; } .size-btn.active { background: #111 !important; color: #fff !important; border-color: #111 !important; box-shadow: none !important; } .dot.active, .dot:hover { border-color: #111 !important; } .thumbs img.active, .thumbs img:hover { border-color: #111 !important; } .feature { background: #f4f3ef !important; border: 1px solid #e2e1dc !important; } .fav { background: #fff !important; border: 1px solid #d8d7d2 !important; color: #111; } /* ── Immersive (عرض المنتج بملء الشاشة) — نسخة فاتحة ── */ .immersive { background: #f3f2ee !important; color: #141414 !important; --imm-c-top: #f3f2ee; --imm-c-bottom: #e9e8e3; --imm-c-left: #f3f2ee; --imm-c-right: #e9e8e3; --imm-c-mid: #efeee9; } .immersive.open .imm-bg-blur { opacity: .18 !important; filter: blur(34px) brightness(1.08) !important; } .imm-vignette { background: linear-gradient(180deg, rgba(0,0,0,.05), transparent 18%, transparent 75%, rgba(0,0,0,.06)) !important; } .imm-bg { box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06) !important; } .imm-title { color: #111 !important; text-shadow: none !important; } .imm-title-kicker { color: #8a6a18 !important; text-shadow: none !important; } .imm-brand { background: #fff !important; border: 1px solid #e2e1dc !important; box-shadow: 0 6px 16px rgba(0,0,0,.10) !important; } .imm-brand-sub { color: #8a6a18 !important; } .imm-close { background: #fff !important; border: 1.5px solid #111 !important; color: #111 !important; box-shadow: none !important; } .imm-close:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; box-shadow: none !important; } .imm-desc { color: #444 !important; text-shadow: none !important; } .imm-bar { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1.5px solid #111 !important; box-shadow: 0 -10px 26px rgba(0,0,0,.08) !important; } .imm-bar-label { color: #111 !important; } .imm-size-btn { background: #fff !important; border: 1.5px solid #111 !important; color: #111 !important; } .imm-size-btn:hover { background: #f4f3ef !important; border-color: #111 !important; } .imm-size-btn.active { background: #111 !important; color: #fff !important; border-color: #111 !important; box-shadow: none !important; } .imm-qty { background: #fff !important; border: 1.5px solid #111 !important; } .imm-qty button { color: #111 !important; } .imm-qty button:hover { background: #f1f0eb !important; color: #111 !important; } .imm-price-now { color: #111 !important; text-shadow: none !important; } .imm-price-was { color: #9b9a94 !important; } .imm-add { background: #111 !important; border: 1.5px solid #111 !important; color: #fff !important; box-shadow: none !important; } .imm-add:hover:not(:disabled) { background: #000 !important; box-shadow: none !important; } .imm-measure-v { border-left-color: #111 !important; filter: none !important; } .imm-measure-h { border-top-color: #111 !important; filter: none !important; } .imm-measure-v::before, .imm-measure-v::after, .imm-measure-h::before, .imm-measure-h::after { background: #111 !important; } .imm-measure-label { background: #111 !important; border-color: #111 !important; } /* ── Checkout ── */ .checkout-card { background: #fff !important; border: 1px solid #e2e1dc !important; border-radius: 12px; } .discount-box { background: #f4f3ef !important; border: 1px solid #e2e1dc !important; } .summary-totals { border-top-color: #e2e1dc; } .summary-total-row-final { border-top-color: #ddd; } /* ── صفحة "أنشئ تصميمك" + الاستوديو ── */ .custom-hero-card, .custom-builder, .custom-result-preview, .custom-contact-card, .custom-design-card, .studio-form-card, .photos-panel { background: #fff !important; border: 1px solid #e2e1dc !important; box-shadow: none !important; } .custom-kicker, .custom-hero-badge { background: #f1f0eb !important; border: 1px solid #e2e1dc !important; color: #8a6a18 !important; } .custom-step { background: #f4f3ef !important; border: 1px solid #e2e1dc !important; color: #111; } .custom-upload-card { background: #faf9f6 !important; border: 1px dashed #c9c8c2 !important; } .custom-upload-card:hover { border-color: #111 !important; box-shadow: none !important; } .custom-upload-preview, .custom-result-text, .custom-design-text, .custom-design-modal-info, .custom-design-modal-box, .custom-result-image-wrap, .custom-design-image, .custom-design-reference-thumb, .custom-design-modal-shot img { background: #f4f3ef !important; border-color: #e2e1dc !important; color: #111; } .canvas-tab { background: #fff !important; border: 1px solid #d8d7d2 !important; color: #6f6e69; } .canvas-tab.active, .canvas-tab:hover { background: #111 !important; border-color: #111 !important; color: #fff !important; } .tshirt-wrap { border: 2px solid #111 !important; background: #f4f3ef !important; } .upload-photo-btn { background: #111 !important; border: 1.5px solid #111 !important; color: #fff !important; } .photo-strip { background: #f4f3ef !important; border: 1px dashed #cfcec8 !important; } /* ── لوحة الأدمن ── */ .panel { background: #fff !important; border: 1px solid #e2e1dc !important; box-shadow: none !important; } .sidebar { background: #f1f0eb !important; border-left: 1px solid #e2e1dc !important; } .sidebtn.active { background: #111 !important; border-color: #111 !important; color: #fff !important; box-shadow: none !important; } .toolbar { background: #fff !important; border: 1px solid #e2e1dc !important; } .admin-product-card, .order-card, .feedback-card, .stat-card { background: #fff !important; border: 1px solid #e2e1dc !important; box-shadow: none !important; } .admin-product-card:hover, .stat-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; border-color: #cfcec8 !important; } .admin-card-no-image, .admin-image-empty, .admin-image-preview, .tshirt-setting-card, .tshirt-setting-preview { background: #f4f3ef !important; border-color: #e2e1dc !important; } .admin-card-price, .order-total, .stat-value { color: #111 !important; } .admin-size-tag { background: #f1f0eb !important; border: 1px solid #e2e1dc !important; color: #111 !important; } .order-id { color: #111; } .feedback-message { background: #f4f3ef !important; } /* تبديل الثيم فوري: أثناء التبديل نوقف كل الـ transitions/animations عشان ما يحصلش وميض أو شاشة فاضية وقت إعادة الرسم على الموبايلات الضعيفة. theme.js بيحط .theme-switching للحظة وقت الضغط على زر الثيم. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; animation-duration: 0s !important; } /* ═══════════════════════════════════════════════════════════════════ PRIME HERO — الهيرو الهجين (شريط + عنوان + معرض + صورة تيشرت) كله بمتغيّرات الموقع عشان يتأقلم مع الفاتح/الغامق تلقائياً. ═══════════════════════════════════════════════════════════════════ */ .phx-hero { position: relative; min-height: calc(100svh - 58px); display: flex; flex-direction: column; } .phx-marquee { margin: 10px 0 0; background: var(--text); color: var(--bg); border-radius: 12px; overflow: hidden; flex: 0 0 auto; } .phx-marquee-track { display: inline-flex; align-items: center; white-space: nowrap; padding: 9px 0; animation: phxMarquee 30s linear infinite; will-change: transform; } .phx-marquee-track span { font-size: 11.5px; letter-spacing: .14em; font-weight: 800; margin: 0 14px; } .phx-marquee-track i { font-style: normal; opacity: .45; font-size: 9px; } @keyframes phxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .phx-hero-inner { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: center; padding: 14px 0; will-change: opacity, transform; } .phx-hero-text > * { animation: pageRiseIn 600ms cubic-bezier(.2,.9,.2,1) both; } .phx-kicker { font-size: 12px; letter-spacing: .22em; color: var(--muted); margin-bottom: 14px; animation-delay: 80ms; } .phx-h1 { margin: 0; font-size: clamp(36px, 6.4vw, 72px); line-height: 1.02; color: var(--text); font-weight: 900; letter-spacing: .4px; animation-delay: 140ms; } .phx-h1 em { font-style: normal; -webkit-text-stroke: 1.6px var(--text); color: transparent; } .phx-rule { height: 1px; background: var(--border); margin: 20px 0 16px; max-width: 380px; animation-delay: 200ms; } .phx-sub { margin: 0 0 24px; color: var(--muted); line-height: 1.7; max-width: 46ch; font-size: clamp(14px, 1.6vw, 16px); animation-delay: 240ms; } .phx-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; animation-delay: 300ms; } .phx-cta-primary { display: inline-flex; align-items: center; gap: 9px; background: var(--text); color: var(--bg); border-radius: 999px; padding: 14px 28px; font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .16s cubic-bezier(.2,.9,.2,1); } .phx-cta-primary:hover { transform: translateY(-2px); } .phx-cta-primary svg { transition: transform .2s cubic-bezier(.2,.9,.2,1); } .phx-cta-primary:hover svg { transform: translateX(-4px); } .phx-cta-ghost { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; border-bottom: 1.5px solid var(--text); padding-bottom: 3px; } .phx-trust { display: flex; gap: 18px; color: var(--muted); font-size: 12px; letter-spacing: .04em; animation-delay: 360ms; } .phx-hero-visual { display: flex; align-items: center; justify-content: center; gap: 14px; animation: pageRiseIn 720ms cubic-bezier(.2,.9,.2,1) both 240ms; } .phx-gal { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); width: 168px; flex: 0 0 auto; } .phx-gal-head { font-size: 9.5px; letter-spacing: .14em; color: var(--text); font-weight: 800; margin-bottom: 10px; opacity: .8; } .phx-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .phx-th { aspect-ratio: 3 / 4; border-radius: 7px; background-color: var(--bg2); background-size: cover; background-position: center; border: 1px solid var(--border); display: block; } .phx-th.sel { outline: 2px solid var(--text); outline-offset: 1px; } .phx-arrow { color: var(--text); flex: 0 0 auto; opacity: .85; } .phx-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 22px; background: radial-gradient(closest-side, rgba(128,128,128,.16), transparent 78%); } .phx-live { position: absolute; top: 4px; inset-inline-end: -2px; z-index: 3; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 800; border-radius: 999px; padding: 4px 11px; } .phx-shirt-slot { color: var(--text); line-height: 0; } .phx-slides { position: relative; width: min(360px, 80vw); height: min(58vh, 460px); display: flex; align-items: center; justify-content: center; } .phx-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s cubic-bezier(.4,0,.2,1); } .phx-slide.on { opacity: 1; } .phx-fallback { width: 72%; height: auto; } .phx-scroll-hint { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 11px; letter-spacing: .14em; padding-bottom: 16px; animation: phxBob 1.8s cubic-bezier(.4,0,.2,1) infinite; } @keyframes phxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .phx-products { position: relative; background: var(--bg); padding: 22px 16px 8px; } .phx-products-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .phx-products-title { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: var(--text); letter-spacing: .3px; } /* الإنترو: نخفي الهيرو الجديد كمان وراء الكلمة المتحركة، وبعد ما تستقر يرسبن */ html.intro-playing .phx-marquee, html.intro-playing .phx-hero-inner, html.intro-playing .phx-scroll-hint, html.intro-playing .phx-products { opacity: 0 !important; } html.intro-reveal .phx-marquee { animation: pageRiseIn .6s cubic-bezier(.2,.9,.2,1) both .04s; } html.intro-reveal .phx-hero-text > * { animation: pageRiseIn .72s cubic-bezier(.2,.9,.2,1) both; } html.intro-reveal .phx-hero-text > *:nth-child(1) { animation-delay: .10s; } html.intro-reveal .phx-hero-text > *:nth-child(2) { animation-delay: .18s; } html.intro-reveal .phx-hero-text > *:nth-child(3) { animation-delay: .26s; } html.intro-reveal .phx-hero-text > *:nth-child(4) { animation-delay: .34s; } html.intro-reveal .phx-hero-text > *:nth-child(5) { animation-delay: .42s; } html.intro-reveal .phx-hero-text > *:nth-child(6) { animation-delay: .50s; } html.intro-reveal .phx-hero-visual { animation: pageRiseIn .8s cubic-bezier(.2,.9,.2,1) both .3s; } html.intro-reveal .phx-scroll-hint { animation: pageRiseIn .6s cubic-bezier(.2,.9,.2,1) both .6s; } @media (max-width: 860px) { .phx-hero-inner { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 560px) { .phx-gal, .phx-arrow { display: none; } .phx-slides { width: min(320px, 86vw); height: 46vh; } } @media (prefers-reduced-motion: reduce) { .phx-marquee-track, .phx-scroll-hint { animation: none; } } /* ═══════════════════════════════════════════════════════════════════ THEME #3 (الغامق) — "Matte Charcoal" — يتفعّل بـ html.theme-dark فحمي مطفي بدون أي glow، أكسنت دهبي. اللوجو دهبي لامع، الإنترو زي ما هو. ═══════════════════════════════════════════════════════════════════ */ html.theme-dark { color-scheme: dark; --bg: #0c0a06; --bg2: #131008; --card: #16120a; --modal: #0f0d07; --teal: #d4af37; --teal2: #e8c66a; --gold: #d4af37; --goldGlow: #e8c66a; --text: #f0e9d8; --muted: #a3987d; --border: rgba(240,220,170,.12); --shadow: 0 18px 45px rgba(0,0,0,.55); } html.theme-dark body { background: #0c0a06 !important; color: #f0e9d8; } /* اللوجو الدهبي اللامع (يبان على الغامق) */ html.theme-dark .logo, html.theme-dark .imm-brand-line { background: linear-gradient(105deg,#7a5c12 0%,#f7e389 22%,#fff7d6 38%,#caa23a 52%,#8a6a18 70%,#f4dd7e 88%,#a98328 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)) !important; } /* Topbar */ html.theme-dark .topbar { background: #0c0a06 !important; border-bottom: 1px solid #241e10 !important; } html.theme-dark .pill { color: #a3987d; } html.theme-dark .pill.active, html.theme-dark .pill:hover { background: #26241c !important; color: #f0e9d8 !important; border-color: #4a3f24 !important; } html.theme-dark .icon-btn { background: #16120a !important; color: #d8cfb4 !important; border: 1px solid #2e2716 !important; } html.theme-dark .icon-btn:hover { background: #1f1a0e !important; color: #e8c66a !important; border-color: #4a3f24 !important; } html.theme-dark .badge { background: #d4af37 !important; color: #0c0a06 !important; border-color: #e8c66a !important; } /* Hero */ html.theme-dark .hero h1 { color: #f3f3f1 !important; } html.theme-dark .hero p { color: #a3987d !important; } /* Filter + CTA */ html.theme-dark .cat-filter-btn { background: #1d1c18 !important; color: #e8c66a !important; border: 1px solid #4a3f24 !important; } html.theme-dark .cat-filter-btn:hover { background: #23211a !important; } html.theme-dark .cat-filter-btn.active { background: #26241c !important; } html.theme-dark .cat-filter-btn-icon { color: #e8c66a !important; } html.theme-dark .design-cta-btn { background: #16120a !important; color: #e8c66a !important; border: 1px solid #2e2716 !important; } html.theme-dark .design-cta-btn:hover { background: #1f1a0e !important; } html.theme-dark .design-cta-label { color: #e8c66a !important; } html.theme-dark .design-cta-sub { color: #a3987d !important; } html.theme-dark .design-cta-icon, html.theme-dark .design-cta-arrow { color: #e8c66a !important; } /* الكروت (مسطّحة فحمي بدون glow) */ html.theme-dark .card { background: #16120a !important; border: 1px solid #2c2d2f !important; border-radius: 12px !important; box-shadow: none !important; } html.theme-dark .card:hover { border-color: #4a3f24 !important; box-shadow: 0 14px 30px rgba(0,0,0,.5) !important; } html.theme-dark .card-media { background: #1f1a0e !important; } html.theme-dark .card-title { color: #f0e9d8 !important; } html.theme-dark .price { color: #f0e9d8 !important; } html.theme-dark .price.sale { color: #d4af37 !important; } html.theme-dark .price.was { color: #6b6c6e !important; } /* ستيكر تخفيض (دهبي مسطّح، بدون ميلان في الغامق) */ html.theme-dark .chip { background: #241e10 !important; color: #e8c66a !important; border: none !important; transform: none !important; border-radius: 7px !important; } /* الأزرار (outline دهبي) */ html.theme-dark .btn { background: transparent !important; color: #e8c66a !important; border: 1px solid #b8902a !important; border-radius: 10px !important; } html.theme-dark .btn:hover:not(:disabled) { background: rgba(184,144,42,.14) !important; border-color: #d4af37 !important; } html.theme-dark .btn.secondary { background: #16120a !important; color: #f0e9d8 !important; border: 1px solid #2e2716 !important; } html.theme-dark .btn.secondary:hover:not(:disabled) { background: #1f1a0e !important; } html.theme-dark .btn.danger { background: transparent !important; color: #f08a82 !important; border: 1px solid #7a2a25 !important; } html.theme-dark .btn.danger:hover:not(:disabled) { background: rgba(192,57,43,.18) !important; color: #ffb3ab !important; } html.theme-dark .btn.success-btn { background: transparent !important; color: #6fce8f !important; border-color: #2f6b45 !important; } html.theme-dark .muted-box { background: #16120a !important; border: 1px dashed #2e2716 !important; color: #a3987d !important; } /* المدخلات */ html.theme-dark input, html.theme-dark textarea, html.theme-dark select { background: #16120a !important; border: 1px solid #2e2716 !important; color: #f0e9d8 !important; } html.theme-dark input:focus, html.theme-dark textarea:focus, html.theme-dark select:focus { border-color: #b8902a !important; box-shadow: 0 0 0 3px rgba(184,144,42,.18) !important; } html.theme-dark select option { background: #16120a !important; } html.theme-dark .field label { color: #f0e9d8 !important; } /* Modal / Drawer */ html.theme-dark .backdrop { background: rgba(0,0,0,.62) !important; } html.theme-dark .modal { background: #0f0d07 !important; border: 1px solid #241e10 !important; box-shadow: 0 24px 60px rgba(0,0,0,.6) !important; } html.theme-dark .modal-close { border-bottom-color: #241e10 !important; } html.theme-dark .xbtn { background: #16120a !important; color: #f0e9d8 !important; border: 1px solid #2e2716 !important; } html.theme-dark .xbtn:hover { background: #1f1a0e !important; } html.theme-dark .drawer { background: #0f0d07 !important; border-left: 1px solid #241e10 !important; } html.theme-dark .drawer.show { box-shadow: -18px 0 46px rgba(0,0,0,.55) !important; } html.theme-dark .drawer-header { border-bottom-color: #241e10 !important; } html.theme-dark .drawer-title { color: #f0e9d8 !important; } html.theme-dark .drawer-footer { background: #0f0d07 !important; border-top-color: #241e10 !important; box-shadow: 0 -10px 20px rgba(0,0,0,.4) !important; } html.theme-dark .cart-item { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .cart-item-name { color: #f0e9d8 !important; } html.theme-dark .cart-item-price { color: #d4af37 !important; } html.theme-dark .cart-empty-icon { background: #26241c !important; border: 1px solid #4a3f24 !important; } html.theme-dark .cart-empty-btn { background: linear-gradient(135deg,#e8c66a,#d4af37) !important; color: #0c0a06 !important; } html.theme-dark .help-type-btn { background: #16120a !important; border: 1px solid #2e2716 !important; color: #f0e9d8 !important; } html.theme-dark .help-type-btn:hover { background: #1f1a0e !important; border-color: #4a3f24 !important; } html.theme-dark .toast { background: #1f1a0e !important; color: #f0e9d8 !important; border: 1px solid #4a3f24 !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; } html.theme-dark ::-webkit-scrollbar-track { background: rgba(255,255,255,.04) !important; } html.theme-dark ::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3) !important; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.5) !important; } /* Category Overlay */ html.theme-dark .cat-overlay { background: #0c0a06 !important; } html.theme-dark .cat-overlay-header { background: #0c0a06 !important; border-bottom-color: #241e10 !important; } html.theme-dark .cat-overlay-title { color: #f0e9d8 !important; } html.theme-dark .cat-item { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .cat-item:hover { border-color: #4a3f24 !important; box-shadow: 0 8px 18px rgba(0,0,0,.5) !important; } html.theme-dark .cat-item.active { background: #26241c !important; border-color: #b8902a !important; } html.theme-dark .cat-item.active .cat-item-name, html.theme-dark .cat-item.active .cat-item-count { color: #f0e9d8 !important; } html.theme-dark .cat-item-icon { background: #1f1a0e !important; border: 1px solid #2e2716 !important; } html.theme-dark .cat-item-name { color: #f0e9d8 !important; } html.theme-dark .cat-item-count { color: #a3987d !important; } /* Product modal bits */ html.theme-dark .kicker { color: #e8c66a !important; } html.theme-dark .size-btn { background: #16120a !important; border: 1px solid #2e2716 !important; color: #f0e9d8 !important; } html.theme-dark .size-btn:hover { border-color: #b8902a !important; background: #1f1a0e !important; } html.theme-dark .size-btn.active { background: #26241c !important; color: #e8c66a !important; border-color: #b8902a !important; } html.theme-dark .feature { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .fav { background: #16120a !important; border: 1px solid #2e2716 !important; color: #f0e9d8 !important; } /* Immersive (عرض المنتج) — غامق */ html.theme-dark .immersive { background: #0c0a06 !important; color: #f0e9d8 !important; --imm-c-top: #16120a; --imm-c-bottom: #0f1011; --imm-c-left: #16120a; --imm-c-right: #0f1011; --imm-c-mid: #0c0a06; } html.theme-dark .immersive.open .imm-bg-blur { opacity: .5 !important; filter: blur(30px) brightness(.6) !important; } html.theme-dark .imm-vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%) !important; } html.theme-dark .imm-bg { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) !important; } html.theme-dark .imm-title { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.7) !important; } html.theme-dark .imm-title-kicker { color: #e8c66a !important; } html.theme-dark .imm-brand { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 6px 20px rgba(0,0,0,.4) !important; } html.theme-dark .imm-brand-sub { color: #e8c66a !important; } html.theme-dark .imm-close { background: rgba(0,0,0,.42) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; } html.theme-dark .imm-close:hover { background: rgba(244,63,94,.25) !important; border-color: rgba(244,63,94,.55) !important; } html.theme-dark .imm-desc { color: rgba(255,255,255,.82) !important; text-shadow: 0 2px 14px rgba(0,0,0,.7) !important; } html.theme-dark .imm-bar { background: linear-gradient(180deg, rgba(22,23,24,.55) 0%, rgba(22,23,24,.9) 60%, rgba(22,23,24,.96) 100%) !important; backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; border-top: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 -10px 40px rgba(0,0,0,.45) !important; } html.theme-dark .imm-bar-label { color: rgba(255,255,255,.88) !important; } html.theme-dark .imm-size-btn { background: rgba(255,255,255,.05) !important; border: 1.5px solid rgba(255,255,255,.18) !important; color: #fff !important; } html.theme-dark .imm-size-btn:hover { border-color: rgba(240,200,110,.7) !important; background: rgba(212,175,55,.14) !important; } html.theme-dark .imm-size-btn.active { background: linear-gradient(180deg, rgba(212,175,55,.32), rgba(180,140,40,.22)) !important; border-color: #e8c66a !important; color: #fff !important; } html.theme-dark .imm-qty { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.16) !important; } html.theme-dark .imm-qty button { color: #fff !important; } html.theme-dark .imm-qty button:hover { background: rgba(212,175,55,.2) !important; color: #e8c66a !important; } html.theme-dark .imm-price-now { color: #f0c040 !important; text-shadow: 0 0 18px rgba(240,192,64,.25) !important; } html.theme-dark .imm-price-was { color: rgba(255,255,255,.55) !important; } html.theme-dark .imm-add { background: linear-gradient(180deg, rgba(212,175,55,.94), rgba(180,140,40,.94)) !important; border: 1px solid rgba(240,200,110,.5) !important; color: #fff !important; box-shadow: 0 8px 28px rgba(212,175,55,.4) !important; } html.theme-dark .imm-add:hover:not(:disabled) { background: linear-gradient(180deg, rgba(220,185,65,1), rgba(190,150,45,1)) !important; } html.theme-dark .imm-measure-v { border-left-color: rgba(255,255,255,.9) !important; } html.theme-dark .imm-measure-h { border-top-color: rgba(255,255,255,.9) !important; } html.theme-dark .imm-measure-v::before, html.theme-dark .imm-measure-v::after, html.theme-dark .imm-measure-h::before, html.theme-dark .imm-measure-h::after { background: rgba(255,255,255,.9) !important; } html.theme-dark .imm-measure-label { background: rgba(8,18,32,.85) !important; border-color: rgba(255,255,255,.2) !important; } /* Checkout */ html.theme-dark .checkout-card { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .discount-box { background: #23211a !important; border: 1px solid #4a3f24 !important; } html.theme-dark .summary-totals { border-top-color: #2c2d2f !important; } html.theme-dark .summary-total-row-final { border-top-color: #2c2d2f !important; } /* صفحة "أنشئ تصميمك" + الاستوديو */ html.theme-dark .custom-hero-card, html.theme-dark .custom-builder, html.theme-dark .custom-result-preview, html.theme-dark .custom-contact-card, html.theme-dark .custom-design-card, html.theme-dark .studio-form-card, html.theme-dark .photos-panel { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .custom-kicker, html.theme-dark .custom-hero-badge { background: #26241c !important; border: 1px solid #4a3f24 !important; color: #e8c66a !important; } html.theme-dark .custom-step { background: #23211a !important; border: 1px solid #2e2716 !important; color: #f0e9d8 !important; } html.theme-dark .custom-upload-card { background: #131008 !important; border: 1px dashed #4a3f24 !important; } html.theme-dark .custom-upload-card:hover { border-color: #b8902a !important; } html.theme-dark .custom-upload-preview, html.theme-dark .custom-result-text, html.theme-dark .custom-design-text, html.theme-dark .custom-design-modal-info, html.theme-dark .custom-design-modal-box, html.theme-dark .custom-result-image-wrap, html.theme-dark .custom-design-image, html.theme-dark .custom-design-reference-thumb, html.theme-dark .custom-design-modal-shot img { background: #23211a !important; border-color: #2e2716 !important; color: #f0e9d8 !important; } html.theme-dark .canvas-tab { background: #16120a !important; border: 1px solid #2e2716 !important; color: #a3987d !important; } html.theme-dark .canvas-tab.active, html.theme-dark .canvas-tab:hover { background: #26241c !important; border-color: #b8902a !important; color: #e8c66a !important; } html.theme-dark .tshirt-wrap { border: 2px solid #4a3f24 !important; background: #23211a !important; } html.theme-dark .upload-photo-btn { background: #26241c !important; border: 1px solid #b8902a !important; color: #e8c66a !important; } html.theme-dark .photo-strip { background: #131008 !important; border: 1px dashed #2e2716 !important; } /* لوحة الأدمن */ html.theme-dark .panel { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .sidebar { background: #0c0a06 !important; border-left: 1px solid #241e10 !important; } html.theme-dark .sidebtn.active { background: #26241c !important; border-color: #b8902a !important; color: #e8c66a !important; } html.theme-dark .toolbar { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .admin-product-card, html.theme-dark .order-card, html.theme-dark .feedback-card, html.theme-dark .stat-card { background: #16120a !important; border: 1px solid #2c2d2f !important; } html.theme-dark .admin-product-card:hover, html.theme-dark .stat-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.5) !important; border-color: #4a3f24 !important; } html.theme-dark .admin-card-no-image, html.theme-dark .admin-image-empty, html.theme-dark .admin-image-preview, html.theme-dark .tshirt-setting-card, html.theme-dark .tshirt-setting-preview { background: #23211a !important; border-color: #2e2716 !important; } html.theme-dark .admin-card-price, html.theme-dark .order-total, html.theme-dark .stat-value { color: #d4af37 !important; } html.theme-dark .admin-size-tag { background: #26241c !important; border: 1px solid #4a3f24 !important; color: #e8c66a !important; } html.theme-dark .order-id { color: #e8c66a !important; } html.theme-dark .feedback-message { background: #23211a !important; } /* ═══════════════════════════════════════════════════════════════════ لوحة الأدمن على الموبايل — الـ sidebar يبقى شريط تابات أفقي بدل ما يختفي ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .admin-wrap { grid-template-columns: 1fr !important; } .sidebar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; position: sticky !important; top: 0 !important; height: auto !important; padding: 10px 12px !important; border-left: none !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; z-index: 30 !important; } .sidebar::-webkit-scrollbar { height: 4px; } .sidebar > .brand { display: none !important; } .sidebar .sidebtn { width: auto !important; margin: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; text-align: center !important; padding: 9px 14px !important; font-size: 13px !important; } .content { padding: 14px !important; } /* الأدوات (بحث/أزرار) تتلف تحت بعض */ .toolbar { padding: 12px 14px !important; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } .admin-grid { grid-template-columns: 1fr !important; } .order-card-body { grid-template-columns: 1fr 1fr !important; } .design-settings-grid { grid-template-columns: 1fr !important; } .sizes-table-head, .sizes-row { grid-template-columns: 1fr 1fr 1fr 44px !important; gap: 6px !important; } .admin-card-actions { flex-wrap: wrap; } }