:root{--p:#2377e8;--p2:#1a4fd1;--pl:#9fd3ff;--ok:#00ffae;--err:#ff4d4d;--warn:#ffc94d;--line:rgba(255,255,255,.1)}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif}
[hidden]{display:none!important}
html{background:#040b1c;min-height:100%}
body{background:linear-gradient(135deg,#071733,#040b1c);background-attachment:fixed;color:#fff;overflow-x:hidden;position:relative;min-height:100vh}
.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}
.circle{position:absolute;border-radius:50%;background:rgba(47,123,255,.16);filter:blur(50px);animation:move 20s infinite ease-in-out alternate}
.circle1{width:300px;height:300px;top:-50px;left:-50px}.circle2{width:400px;height:400px;bottom:-100px;right:-100px;animation-delay:5s}.circle3{width:250px;height:250px;top:50%;left:40%;animation-delay:10s}
@keyframes move{0%{transform:translate(0,0)}100%{transform:translate(100px,50px)}}
@media(prefers-reduced-motion:reduce){.circle{animation:none}}
nav{background:rgba(4,11,28,.6);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
nav a{color:var(--pl);text-decoration:none;margin:0 10px;transition:.3s}nav a:hover,nav a.on{color:#fff}
.badge{background:var(--p);color:#fff;border-radius:99px;padding:0 8px;font-size:.8rem}
.container{padding:40px 20px;max-width:1000px;margin:auto;position:relative;z-index:1}.container.wide{max-width:1200px}.container.narrow{max-width:460px}
h1.title{color:var(--pl);margin-bottom:24px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:24px}
.product{display:flex;align-items:flex-start;background:linear-gradient(145deg,rgba(6,16,40,.65),rgba(47,123,255,.14));border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(10px);transition:.3s}
.products .product{margin:0}.product:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(47,123,255,.25)}
.product-image{flex-shrink:0;width:140px;height:140px;overflow:hidden;border-radius:15px;border:2px solid var(--line);margin-left:20px}
.product-image img{width:100%;height:100%;object-fit:cover;transition:.3s}.product:hover img{transform:scale(1.05)}
.ph{display:grid;place-items:center;width:100%;height:100%;font-size:2.5rem;background:rgba(47,123,255,.22)}
.product-info{flex-grow:1;min-width:0}.product-info h3{font-size:1.3rem;color:var(--pl);margin-bottom:8px}.product-info p{font-size:.95rem;color:#ddd;margin-bottom:10px;line-height:1.5}
.product-details{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;color:#aaa;font-size:.95rem}.price{color:var(--pl);font-weight:700}.rating{color:#ffd700}
.add-btn,.contact-form button,.tabs button,.mini{background:linear-gradient(to right,var(--p2),var(--p));padding:10px 20px;color:#fff;border:none;border-radius:10px;font-size:.95rem;cursor:pointer;transition:.3s;box-shadow:0 4px 12px rgba(10,40,120,.35)}
.add-btn:hover,.contact-form button:hover,.mini:hover{background:linear-gradient(to right,#1c58c9,#1685d6)}
.add-btn:disabled{opacity:.5;cursor:not-allowed}.mini{padding:4px 12px;font-size:.85rem;margin:2px}.mini.gray{background:rgba(255,255,255,.12)}.mini.red{background:#8b1d2c}
.qty{display:flex;align-items:center;gap:8px}.qty b{min-width:24px;text-align:center}
.rules-section{background:rgba(0,0,0,.5);border:1px solid var(--line);padding:30px;border-radius:20px;margin-bottom:30px;backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(47,123,255,.18)}
.rules-section h2{color:var(--pl);margin-bottom:15px;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:1.4rem}
.rules-section ul{list-style:decimal;padding-right:20px;line-height:2;color:#ddd}
.mut{color:#aaa}.row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.contact-form{display:flex;flex-direction:column;gap:15px;margin-top:10px}.contact-form label{color:var(--pl);font-weight:700}
.contact-form input,.contact-form textarea,.contact-form select{padding:10px;border:none;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;outline:none;box-shadow:inset 0 0 5px rgba(47,123,255,.3);font-size:1rem;width:100%}
.contact-form select option{background:#0c1a38}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aaa}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{box-shadow:0 0 0 2px var(--p)}.contact-form button{width:fit-content}
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:rgba(9,22,52,.92);backdrop-filter:blur(10px);border:1px solid rgba(80,160,255,.5);padding:15px 20px;border-radius:12px;min-width:220px;animation:slideIn .5s ease forwards}
.toast.success{border-left:6px solid var(--ok)}.toast.error{border-left:6px solid var(--err)}
@keyframes slideIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
.pill{display:inline-block;padding:2px 12px;border-radius:99px;font-size:.85rem;background:rgba(255,255,255,.1)}.pill.paid{background:rgba(0,255,174,.15);color:var(--ok)}.pill.pending{background:rgba(255,201,77,.15);color:var(--warn)}.pill.expired{background:rgba(255,77,77,.15);color:var(--err)}.pill.rejected,.pill.payment_rejected{background:rgba(255,77,77,.15);color:var(--err)}
.code-box{direction:ltr;text-align:center;font-size:1.2rem;background:rgba(255,255,255,.07);padding:12px;border-radius:10px;margin:8px 0;word-break:break-all;user-select:all;cursor:pointer}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tabs button{background:rgba(255,255,255,.08);box-shadow:none}.tabs button.on{background:linear-gradient(to right,var(--p2),var(--p))}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}.stat{background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:16px;padding:18px}.stat b{display:block;font-size:1.6rem;color:var(--pl)}
.warn{background:rgba(255,201,77,.12);border:1px solid rgba(255,201,77,.4);color:var(--warn);padding:10px 14px;border-radius:12px;margin-bottom:10px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{padding:10px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--pl)}
.chk{display:flex;align-items:center;gap:8px}.chk input{width:auto}
@media(max-width:560px){.product{flex-direction:column}.product-image{margin:0 0 14px;width:100%;height:180px}nav{padding:12px}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.chip{background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:99px;padding:6px 16px;cursor:pointer;font-size:.95rem;transition:.3s}.chip.on,.chip:hover{background:linear-gradient(to right,var(--p2),var(--p))}
.cat-title{color:var(--pl);margin:8px 0 16px;font-size:1.3rem}.product.out{opacity:.65}.product.out:hover{transform:none}
.qbox{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px}.qbox legend{color:var(--pl);font-weight:700;padding:0 8px}
.qrow{display:grid;grid-template-columns:2fr 1fr auto auto;gap:8px;align-items:center;background:rgba(255,255,255,.04);border-radius:12px;padding:10px;margin-bottom:8px}.qrow textarea{grid-column:1/-1}
.chkgrid{display:flex;gap:6px 18px;flex-wrap:wrap}.links{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.links a{text-decoration:none;display:inline-block}
.hint{color:#aaa;font-size:.85rem;font-weight:400}details summary{cursor:pointer;color:var(--pl)}details div{padding:4px 0;font-size:.88rem;word-break:break-word}
@media(max-width:560px){.qrow{grid-template-columns:1fr 1fr}}

nav .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;margin:0;font-size:1.05rem}.brand img{width:32px;height:32px;border-radius:50%;object-fit:cover}
/* ---------- الدفع: بيانات الطلب المدموجة ---------- */
.tag{color:#9fd3ff;font-weight:400;font-size:.82rem}

/* ---------- شريط التنقل (صفحات المتجر) ---------- */
nav{border-bottom:1px solid var(--line)}
nav .nl{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-inline:auto}
nav .nl a{margin:0;padding:8px 14px;border-radius:99px}nav .nl a.on{background:rgba(47,123,255,.22)}
nav .brand .bm{width:24px;height:28px;flex:none;transform:skewX(-8deg);filter:drop-shadow(0 0 8px rgba(40,120,255,.6))}
.tt{order:3;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:var(--pl);display:grid;place-items:center;cursor:pointer;transition:.3s}.tt:hover{background:rgba(255,255,255,.16)}
.tt{text-decoration:none}nav .ct{position:relative;margin:0 0 0 -6px}nav .ct.on{background:rgba(47,123,255,.22);color:#fff}.ct .badge{position:absolute;top:-5px;right:-5px;min-width:17px;padding:0 5px;font-size:.7rem;line-height:17px;text-align:center}
html[data-theme=light] nav .ct.on{color:#0b1633}
.tt svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tt .tm{display:none}
html[data-theme=light] .tt .ts{display:none}html[data-theme=light] .tt .tm{display:block}
@media(max-width:640px){
 nav{padding:10px 14px;gap:6px 8px}nav .tt{order:2;width:38px;height:38px}nav .ct{margin:0 auto 0 -4px}
 nav .nl{order:3;flex-basis:100%;display:flex;justify-content:space-between;margin:0}
 nav .nl a{padding:8px 10px;font-size:.92rem;white-space:nowrap}
 .container{padding:24px 14px}h1.title{margin-bottom:16px;font-size:1.6rem}
 .rules-section{padding:20px 16px}.toast-container{left:12px;right:12px}.toast{min-width:0}
}

/* ---------- الوضع الفاتح ---------- */
html[data-theme=light]{--pl:#1b55c9;--line:rgba(10,40,120,.14);color-scheme:light;background:#eef3fc}
html[data-theme=light] body{background:linear-gradient(135deg,#f6f9ff,#e2ebfb);color:#0b1633}
html[data-theme=light] .circle{background:rgba(47,123,255,.13)}
html[data-theme=light] nav{background:rgba(255,255,255,.82)}
html[data-theme=light] nav a{color:#3a5382}html[data-theme=light] nav a:hover,html[data-theme=light] nav a.on,html[data-theme=light] nav .brand{color:#0b1633}
html[data-theme=light] .tt{background:rgba(10,40,120,.08)}html[data-theme=light] .tt:hover{background:rgba(10,40,120,.15)}
html[data-theme=light] .product{background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(20,50,120,.1)}
html[data-theme=light] .product:hover{box-shadow:0 12px 30px rgba(47,123,255,.22)}
html[data-theme=light] .product-info p{color:#3b4a6b}html[data-theme=light] .product-details,html[data-theme=light] .mut,html[data-theme=light] .hint{color:#5b6b8c}
html[data-theme=light] .rules-section,html[data-theme=light] .stat{background:#fff;box-shadow:0 4px 20px rgba(20,50,120,.08)}
html[data-theme=light] .rules-section ul{color:#34507f}
html[data-theme=light] .contact-form input,html[data-theme=light] .contact-form textarea,html[data-theme=light] .contact-form select{background:#fff;color:#0b1633;box-shadow:inset 0 0 0 1px rgba(10,40,120,.2)}
html[data-theme=light] .contact-form input::placeholder,html[data-theme=light] .contact-form textarea::placeholder{color:#7a8aab}
html[data-theme=light] .contact-form select option{background:#fff;color:#0b1633}
html[data-theme=light] .toast{background:#fff;color:#0b1633;box-shadow:0 10px 30px rgba(20,50,120,.2)}
html[data-theme=light] .code-box,html[data-theme=light] .qrow{background:rgba(10,40,120,.06)}
html[data-theme=light] .chip,html[data-theme=light] .tabs button,html[data-theme=light] .mini.gray,html[data-theme=light] .pill{background:rgba(10,40,120,.08);color:#0b1633}
html[data-theme=light] .chip.on,html[data-theme=light] .chip:hover,html[data-theme=light] .tabs button.on{color:#fff}
html[data-theme=light] .pill.paid{background:rgba(0,160,110,.15);color:#047a55}html[data-theme=light] .pill.pending{background:rgba(220,150,0,.16);color:#8a5a00}html[data-theme=light] .pill.expired{background:rgba(220,40,40,.12);color:#b42323}
html[data-theme=light] .warn{color:#8a5a00}html[data-theme=light] .rating{color:#d19a00}
html[data-theme=light] th{color:#1b55c9}html[data-theme=light] .tag{color:#1b55c9}