/* ================================================================== * كلماتي وألحاني — صفحة الهبوط (ملف الـ CSS) * يتحط في: سلة ← تصميم المتجر ← تخصيص ← CSS مخصص * ومعاه ملف kalimati.js في خانة JavaScript مخصص — لازم الاتنين مع بعض * ================================================================== * * 📑 الفهرس * ─────────────────────────────────────────────── * 1) 🎨 الألوان (الثيم) ← ده الجزء الوحيد اللي تعدّل فيه * 2) ✨ لمسات الثيم الكريمي (الخط، كارت العرض، الزرار الأسود…) * 3) شاشة التحميل * 4) الصفحة نفسها: الهيرو · الفورم · الأقسام · الشريط الثابت · الإضافات * ================================================================== */ /* ================================================================== * 1) 🎨 الألوان (الثيم) * ================================================================== * --pn-c1 الأساسي (الأسعار، الاختيار المحدد، العناوين) * --pn-c2 التاني (التدرجات والأيقونات) * --pn-c3 الحدود والتفاصيل * --pn-c4 الشارات والخلفيات الملونة الخفيفة * --pn-c5 توهج شاشة التحميل * الباقي مكتوب جنب كل سطر بيعمل إيه. * ➕ ثيم تاني للمعاينة: انسخ البلوك، غيّر cream لاسم جديد وغيّر الألوان، * واعرضه بـ ‎?theme=الاسم‎ في آخر رابط المتجر (‎?theme=reset‎ يرجّع الأساسي). * ================================================================== */ /* 🤍 الثيم الكريمي والذهبي */ :root, html.pn-theme-cream { --pn-c1: #A8825A; /* الذهبي: الأسعار والاختيار المحدد */ --pn-c2: #C9A27C; /* ذهبي فاتح: التدرجات */ --pn-c3: #E2D3BF; /* الحدود */ --pn-c4: #EADBC6; /* الشارات والخلفيات الخفيفة */ --pn-c5: #FBF6EF; /* توهج شاشة التحميل */ --pn-bg: #F7F1E8; /* خلفية الصفحة */ --pn-card: #FFFCF7; /* الكروت والمربعات */ --pn-text: #1F1A16; /* لون الكلام */ --pn-text2: #6B5A48; /* الكلام الصغير */ --pn-on: #FFFFFF; /* الكلام اللي على الأزرار الذهبي */ --pn-deep: #2B2622; /* الأسود الدافي: زرار الطلب، العرض، الملخص */ --pn-on-deep: #F3E6D3;/* الكلام اللي على الأسود الدافي */ } /* ================================================================== * 2) ✨ لمسات الثيم الكريمي * بتشتغل مع الثيم الكريمي بس — لو عرضت ثيم تاني بـ ?theme= بيرجع شكله العادي * ================================================================== */ /* الخط */ .pn-scope, #pn-fixed, body.index::before { font-family: 'Tajawal', system-ui, sans-serif !important; } /* خلفية صافية بدل التدرج البيج */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn { background: var(--pn-bg); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-hero { background: linear-gradient(180deg, #FFFDF9, var(--pn-bg)); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-hl { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--pn-c1); animation: pnUp .8s .15s both; } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-h2 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--pn-c1); } /* كارت العرض فاتح بحدود رفيعة والرقم أسود */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer { background: var(--pn-card); color: var(--pn-text); border: 1px solid var(--pn-c3); box-shadow: 0 20px 40px -28px rgba(120,90,50,.45); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer::before, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer::after { background: var(--pn-bg); border: 1px solid var(--pn-c3); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer__t { color: var(--pn-c1); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer__fig b { color: var(--pn-text); text-shadow: none; } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer__w { color: var(--pn-text2); opacity: 1; } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-offer i.pn-shine { background: linear-gradient(105deg, transparent 35%, rgba(201,162,124,.2) 50%, transparent 65%); } /* زرار الطلب أسود دافي */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) .pn-scope .pn-btn--main { background: var(--pn-deep); color: var(--pn-on-deep) !important; box-shadow: 0 14px 28px -14px rgba(43,38,34,.6); } /* الاختيار المحدد أسود دافي (أوضح من الكلام الأبيض على الذهبي) */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-opt.is-on { background: var(--pn-deep); border-color: var(--pn-deep); color: var(--pn-on-deep); box-shadow: 0 10px 20px -12px rgba(43,38,34,.55); } /* الملخص والقسم الأخير: أسود دافي صافي */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-sum, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-final { background: var(--pn-deep); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-sum .pn-btn--white, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-final .pn-btn--white { background: var(--pn-card); color: var(--pn-text) !important; } /* كروت أنظف */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-field { background: #FFFDF9; } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-player { background: var(--pn-card); } :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-card, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-box { box-shadow: 0 18px 40px -30px rgba(120,90,50,.35); } /* ================================================================== * 3) شاشة التحميل — بتظهر فورًا في الصفحة الرئيسية لحد ما الصفحة تجهز * ألوانها بتتاخد من الثيم لوحدها * ================================================================== */ body.index{--pnl1:var(--pn-c1);--pnl2:var(--pn-c2);--pnl3:var(--pn-c3);--pnl4:var(--pn-c4);--pnl5:var(--pn-c5)} body.index::before{content:"كلماتي وألحاني";position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center; padding-top:130px;box-sizing:border-box;font-weight:900;font-size:22px;line-height:1.3;font-family:inherit;color:var(--pnl1);letter-spacing:.3px; background-color:var(--pn-bg); background-image:linear-gradient(var(--pnl3),var(--pnl3)),linear-gradient(var(--pnl2),var(--pnl2)),linear-gradient(var(--pnl1),var(--pnl1)),linear-gradient(var(--pnl2),var(--pnl2)),linear-gradient(var(--pnl3),var(--pnl3)), radial-gradient(circle at 50% 40%,var(--pnl5) 0,var(--pn-bg) 62%); background-repeat:no-repeat; background-position:calc(50% + 44px) calc(50% + 112px),calc(50% + 22px) calc(50% + 112px),50% calc(50% + 112px),calc(50% - 22px) calc(50% + 112px),calc(50% - 44px) calc(50% + 112px),0 0; background-size:10px 10px,10px 24px,10px 34px,10px 18px,10px 12px,100% 100%; animation:pnLdEq 1.1s ease-in-out infinite,pnLdOut .45s ease 8s forwards;pointer-events:auto} body.index::after{content:"";position:fixed;z-index:2147483001;left:50%;top:calc(50% - 112px);width:124px;height:124px;margin-left:-62px;border-radius:50%; background:radial-gradient(circle,#fff 0 4%,var(--pnl4) 4.5% 21%,var(--pnl2) 21.5% 23%,transparent 23.5%), conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.22) 17%,transparent 22% 62%,rgba(255,255,255,.14) 67%,transparent 72%), repeating-radial-gradient(circle,#1c1c24 0 2px,#2c2c38 2px 4px); background:radial-gradient(circle,#fff 0 4%,var(--pnl4) 4.5% 21%,var(--pnl2) 21.5% 23%,transparent 23.5%), conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.22) 17%,transparent 22% 62%,rgba(255,255,255,.14) 67%,transparent 72%), repeating-radial-gradient(circle,color-mix(in srgb,var(--pnl1) 35%,#000) 0 2px,color-mix(in srgb,var(--pnl1) 55%,#000) 2px 4px); box-shadow:0 0 0 6px var(--pnl4),0 18px 40px -12px var(--pnl1); animation:pnLdSpin 1.4s linear infinite,pnLdOut .45s ease 8s forwards;pointer-events:none} body.index.pn-ready::before{animation:none} body.index.pn-ready::after{animation:pnLdSpin 1.4s linear infinite} body.index.pn-ready::before,body.index.pn-ready::after{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s} @keyframes pnLdSpin{to{transform:rotate(360deg)}} @keyframes pnLdEq{ 0%,100%{background-size:10px 10px,10px 24px,10px 34px,10px 18px,10px 12px,100% 100%} 25%{background-size:10px 30px,10px 12px,10px 20px,10px 34px,10px 22px,100% 100%} 50%{background-size:10px 18px,10px 34px,10px 12px,10px 24px,10px 34px,100% 100%} 75%{background-size:10px 34px,10px 18px,10px 30px,10px 10px,10px 16px,100% 100%}} @keyframes pnLdOut{to{opacity:0;visibility:hidden;pointer-events:none}} /* ================================================================== * 4) الصفحة نفسها (ما تعدّلش تحت السطر ده) * ================================================================== */ .pn-scope{--c1:var(--pn-c1);--c2:var(--pn-c2);--c3:var(--pn-c3);--c4:var(--pn-c4)} body.pn-on{background:var(--pn-bg)!important;overflow-x:hidden!important} body.pn-on header.store-header,body.pn-on .store-header,body.pn-on #mainnav,body.pn-on .top-navbar, body.pn-on footer.store-footer,body.pn-on .store-footer,body.pn-on .breadcrumbs,body.pn-on salla-breadcrumb, body.pn-on salla-maintenance-alert,body.pn-on salla-advertisement,body.pn-on .f_bottom-menu{display:none!important} body.pn-on #main-content>*:not(#pn){display:none!important} body.pn-on #main-content{display:block!important;padding:0!important;margin:0!important;max-width:none!important} .pn-scope{--ink:var(--pn-text);--ink2:var(--pn-text2);--line:color-mix(in srgb,var(--c3) 45%,var(--pn-bg));--soft:color-mix(in srgb,var(--c4) 20%,var(--pn-bg)); --dark:var(--pn-deep);--r:22px;direction:rtl;text-align:right;color:var(--ink2);font-family:inherit;line-height:1.65;-webkit-tap-highlight-color:transparent} .pn-scope *,.pn-scope *::before,.pn-scope *::after{box-sizing:border-box} .pn-scope h1,.pn-scope h2,.pn-scope h3,.pn-scope p,.pn-scope ul,.pn-scope ol{margin:0} .pn-scope button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;margin:0;padding:0;text-align:inherit;-webkit-appearance:none;appearance:none} .pn-scope a{text-decoration:none;color:inherit} .pn-scope svg{display:block} #pn{position:relative;overflow-x:hidden;padding-bottom:110px;background:linear-gradient(180deg,var(--pn-bg) 0%,var(--soft) 45%,color-mix(in srgb,var(--c4) 45%,var(--pn-bg)) 100%)} #pn .pn-wrap{width:min(100% - 32px,680px);margin-inline:auto;position:relative;z-index:1} #pn .pn-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} #pn .pn-notes span{position:absolute;left:var(--x);top:var(--y);font-size:var(--s);line-height:1;color:var(--c1);opacity:.1;animation:pnFloat var(--d) ease-in-out infinite;animation-delay:var(--dl)} #pn .pn-notes--light span{color:var(--pn-on);opacity:.13} /* ── 3.1 الهيرو ── */ #pn .pn-hero{position:relative;padding:40px 0 30px;text-align:center;background:linear-gradient(180deg,var(--pn-bg),color-mix(in srgb,var(--c4) 28%,var(--pn-bg)));border-radius:0 0 34px 34px;overflow:hidden} #pn .pn-brand{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--c1);padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--c4) 45%,var(--pn-bg));margin-bottom:14px;animation:pnUp .6s both} #pn .pn-h1{font-size:clamp(30px,8.4vw,54px);font-weight:900;line-height:1.22;color:var(--ink);margin-bottom:22px;animation:pnUp .7s .05s both} #pn .pn-hl{display:inline-block;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pnGrad 6s linear infinite} #pn .pn-offer{display:block;position:relative;max-width:330px;margin:0 auto 24px;padding:16px 22px 14px;border-radius:22px;color:var(--pn-on-deep);overflow:hidden; background:linear-gradient(135deg,var(--c1),var(--dark));box-shadow:0 22px 44px -24px var(--c1);animation:pnUp .7s .12s both;transition:transform .2s} #pn .pn-offer:active{transform:scale(.98)} #pn .pn-offer::before,#pn .pn-offer::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:color-mix(in srgb,var(--c4) 22%,var(--pn-bg))} #pn .pn-offer::before{right:-11px}#pn .pn-offer::after{left:-11px} #pn .pn-offer i.pn-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:pnShine 3.6s 1s ease-in-out infinite;pointer-events:none} #pn .pn-offer__t{display:block;font-size:14px;font-weight:800} #pn .pn-offer__fig{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0} #pn .pn-offer__fig b{font-size:66px;font-weight:900;line-height:1;text-shadow:0 6px 18px rgba(0,0,0,.25)} #pn .pn-offer__u{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-weight:800} #pn .pn-offer__u em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--c4);color:var(--c1)} #pn .pn-offer__w{display:block;font-size:13px;opacity:.88} #pn .pn-flow{position:relative;z-index:1;max-width:780px;margin:4px auto 24px} #pn .pn-flow__l{display:flex;justify-content:space-between;padding:0 16%;font-size:13px;font-weight:800;color:var(--c1);margin-bottom:4px} #pn .pn-flow__band{position:relative;display:flex;align-items:center;height:76px} #pn .pn-flow__story,#pn .pn-flow__score{flex:1;height:100%;position:relative;overflow:hidden;display:flex;align-items:center} #pn .pn-flow__story{-webkit-mask-image:linear-gradient(to left,transparent,#000 14%,#000 86%,rgba(0,0,0,.35));mask-image:linear-gradient(to left,transparent,#000 14%,#000 86%,rgba(0,0,0,.35))} #pn .pn-flow__story::before{content:"";position:absolute;inset:20px 0 20px -10px;background:var(--pn-card);border-radius:999px 0 0 999px;box-shadow:0 10px 24px -16px var(--c1)} #pn .pn-rail{position:relative;display:flex;width:max-content;white-space:nowrap;font-weight:700;font-size:15px;color:var(--ink);animation:pnStory 32s linear infinite} #pn .pn-flow__score{direction:ltr;-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,rgba(0,0,0,.35));mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,rgba(0,0,0,.35))} #pn .pn-staff{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px} #pn .pn-staff i{display:block;height:1.2px;background:var(--c1);opacity:.4} #pn .pn-rail--score{animation:pnScore 18s linear infinite;font-size:26px;color:var(--c1);align-items:center} #pn .pn-rail--score>span{display:flex;align-items:center} #pn .pn-n{display:inline-block;width:34px;text-align:center;line-height:1} #pn .pn-bar{display:inline-block;width:2px;height:30px;background:var(--c1);opacity:.5;margin:0 8px} #pn .pn-knot{flex:none;position:relative;z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--pn-on);font-size:24px; background:linear-gradient(180deg,var(--c2),var(--c1));box-shadow:0 0 0 8px color-mix(in srgb,var(--c3) 25%,transparent),0 12px 24px -10px var(--c1);animation:pnKnot 2.4s ease-in-out infinite} #pn .pn-knot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c2);opacity:0;animation:pnRing 2.4s ease-out infinite} #pn .pn-flow__c{margin-top:8px;font-size:13px;font-weight:800;color:var(--c1)} .pn-scope .pn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;border-radius:999px;font-weight:800;font-size:16px;line-height:1.3;text-align:center;position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s,opacity .2s} .pn-scope .pn-btn--main{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--pn-on)!important;box-shadow:0 14px 28px -14px var(--c1)} .pn-scope .pn-btn--white{background:var(--pn-card);color:var(--c1)!important;box-shadow:0 12px 26px -14px rgba(0,0,0,.5)} .pn-scope .pn-btn--ghost{background:var(--pn-card);color:var(--c1)!important;border:1.5px solid var(--line);margin-top:14px} .pn-scope .pn-btn--wide{width:100%} .pn-scope .pn-btn:active{transform:scale(.97)} .pn-scope .pn-btn--shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:pnShine 3.2s 1.5s ease-in-out infinite} .pn-scope .pn-btn[disabled]{opacity:.75;pointer-events:none} .pn-scope .pn-btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:pnSpin .7s linear infinite} #pn .pn-herocta{animation:pnUp .7s .25s both} #pn .pn-card{background:var(--pn-card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 18px 40px -32px var(--c1)} #pn .pn-feature{margin-top:24px;text-align:right} #pn .pn-feature__h{display:flex;flex-direction:column;margin-bottom:12px} #pn .pn-feature__h span{font-size:12px;font-weight:800;color:var(--c2)} #pn .pn-feature__h strong{font-size:17px;color:var(--ink)} #pn .pn-libLink{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--soft);color:var(--c1);font-weight:800} #pn .pn-libLink span{animation:pnBob 1.6s ease-in-out infinite} #pn .pn-player{display:grid;grid-template-columns:48px 1fr;grid-template-areas:"btn info" "wave wave";gap:10px 12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--soft);transition:border-color .2s,box-shadow .2s} #pn .pn-player.is-playing{border-color:var(--c3);box-shadow:0 12px 28px -20px var(--c1)} #pn .pn-play{grid-area:btn;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--pn-on);background:linear-gradient(180deg,var(--c2),var(--c1));box-shadow:0 10px 20px -10px var(--c1);transition:transform .15s} #pn .pn-play:active{transform:scale(.92)} #pn .pn-play svg{width:20px;height:20px;fill:currentColor} #pn .pn-pinfo{grid-area:info;min-width:0} #pn .pn-pt{font-weight:800;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pn .pn-pm{font-size:12.5px;color:var(--c1)} #pn .pn-wave{grid-area:wave;display:flex;align-items:center;gap:3px;height:34px;direction:ltr} #pn .pn-wave i{flex:1;min-width:2px;height:calc(var(--h) * 100%);border-radius:4px;background:linear-gradient(180deg,var(--c3),var(--c1));opacity:.35;transition:opacity .2s} #pn .pn-wave i.on{opacity:1} #pn .is-playing .pn-wave i{animation:pnWave .8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -63ms)} /* ── 3.2 الفورم ── */ #pn .pn-order{position:relative;padding:26px 0} #pn .pn-box{background:var(--pn-card);border:1px solid var(--line);border-radius:28px;padding:22px 14px 24px;box-shadow:0 30px 60px -44px var(--c1)} #pn .pn-anchor{text-align:center;margin-bottom:14px;scroll-margin-top:16px;outline:none} #pn .pn-h2{font-size:clamp(22px,6vw,28px);font-weight:900;color:var(--ink);text-align:center;line-height:1.3;margin-bottom:4px} #pn .pn-h2 span{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent} #pn .pn-sub{text-align:center;color:var(--ink2);font-size:14px;margin-bottom:18px} #pn .pn-progress{position:sticky;top:0;z-index:5;margin:0 -14px 14px;padding:10px 14px;background:color-mix(in srgb,var(--pn-card) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} #pn .pn-progress__t{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--c1);margin-bottom:6px} #pn .pn-progress__bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--c4) 45%,var(--pn-bg));overflow:hidden} #pn .pn-progress__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--c3),var(--c2),var(--c1));transition:width .45s cubic-bezier(.2,.8,.2,1)} #pn .pn-progress.is-full .pn-progress__bar i{animation:pnGlow 1.2s ease-in-out 2} #pn .pn-field{border:1px solid var(--line);background:var(--soft);border-radius:18px;padding:14px;margin:0 0 12px;transition:border-color .25s;animation:pnUp .35s both} #pn .pn-field[hidden]{display:none!important} #pn .pn-field.is-done{border-color:var(--c3)} #pn .pn-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px} #pn .pn-ft b{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:800;color:var(--ink)} #pn .pn-ft b em{font-style:normal;color:var(--c1)} #pn .pn-check{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:color-mix(in srgb,var(--c4) 50%,var(--pn-bg));color:var(--c1);transition:all .25s} #pn .is-done .pn-check{background:var(--c1);color:var(--pn-on);transform:scale(1.08)} #pn .pn-pill{flex:none;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--c4) 55%,var(--pn-bg));color:var(--c1)} #pn .pn-fs{font-size:13px;color:var(--ink2);margin:0 0 6px} #pn .pn-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px} #pn .pn-chips .pn-opt:last-child:nth-child(odd){grid-column:1/-1} #pn input.pn-hid{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} #pn .pn-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--pn-card);color:var(--ink);font-weight:700;text-align:center;cursor:pointer;transition:all .18s} #pn .pn-opt.is-on{background:linear-gradient(135deg,var(--c1),var(--c2));border-color:var(--c1);color:var(--pn-on);box-shadow:0 10px 20px -12px var(--c1);transform:translateY(-1px)} #pn .pn-opt:focus-within,#pn .pn-row:focus-within{outline:2px solid var(--c2);outline-offset:2px} #pn .pn-opt small{font-size:11px;opacity:.85;font-weight:800} #pn .pn-rows{display:grid;gap:8px;margin-top:8px} #pn .pn-row{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--line);border-radius:16px;background:var(--pn-card);cursor:pointer;transition:all .18s;overflow:hidden} #pn .pn-row.is-on{border-color:var(--c1);background:color-mix(in srgb,var(--c4) 16%,var(--pn-bg));box-shadow:0 12px 24px -18px var(--c1)} #pn .pn-tick{flex:none;width:24px;height:24px;border-radius:8px;border:2px solid var(--c3);background:var(--pn-card);position:relative;transition:all .18s} #pn .pn-row.is-radio .pn-tick{border-radius:50%} #pn .pn-row.is-on .pn-tick{background:var(--c1);border-color:var(--c1)} #pn .pn-row.is-on .pn-tick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--pn-on);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);animation:pnPop .25s} #pn .pn-ico{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--c4) 60%,var(--pn-bg)),color-mix(in srgb,var(--c3) 35%,var(--pn-bg)));overflow:hidden;transition:transform .25s} #pn .pn-row.is-on .pn-ico{transform:rotate(-6deg) scale(1.06)} #pn .pn-ico img{width:100%;height:100%;object-fit:cover} #pn .pn-copy{flex:1;min-width:0} #pn .pn-badge{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c4) 60%,var(--pn-bg));color:var(--c1);margin-bottom:2px} #pn .pn-name{display:block;font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.4} #pn .pn-desc{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:2px} #pn .pn-price{display:inline-block;margin-top:6px;font-size:12px;font-weight:800;color:var(--c1);padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--c4) 45%,var(--pn-bg));white-space:nowrap} #pn .pn-row.is-hl{background:linear-gradient(135deg,var(--pn-card),color-mix(in srgb,var(--c4) 30%,var(--pn-bg)) 55%,color-mix(in srgb,var(--c3) 22%,var(--pn-bg)));border-color:var(--c3)} #pn .pn-row.is-hl::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-120%);animation:pnShine 4s ease-in-out infinite;pointer-events:none} #pn .pn-row.is-hl .pn-price{background:var(--c1);color:var(--pn-on)} #pn .pn-row.is-off{opacity:.5;pointer-events:none} #pn .pn-incl{font-size:13px;font-weight:700;color:var(--c1);background:color-mix(in srgb,var(--c4) 35%,var(--pn-bg));border:1px solid var(--c3);border-radius:12px;padding:10px 12px;margin:0 0 12px;animation:pnUp .3s both} #pn .pn-incl[hidden]{display:none} #pn .pn-in{display:block;width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--pn-card);color:var(--ink);font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s;margin-top:6px} #pn .pn-in:focus{border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c2) 18%,transparent)} #pn textarea.pn-in{min-height:130px;resize:vertical;line-height:1.8} #pn .pn-count{font-size:11.5px;color:var(--ink2);text-align:left;margin-top:4px;direction:ltr} #pn .pn-field.is-bad{border-color:#c0264b;animation:pnShake .35s} #pn .pn-err{color:#c0264b;font-size:12.5px;font-weight:700;margin-top:6px} #pn .pn-err[hidden]{display:none} #pn .pn-sum{margin-top:16px;padding:16px;border-radius:20px;background:linear-gradient(135deg,var(--c1),var(--dark));color:var(--pn-on-deep);position:relative;overflow:hidden} #pn .pn-sum h3{font-size:16px;font-weight:800;color:var(--pn-on-deep);margin-bottom:10px} #pn .pn-items{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px} #pn .pn-items li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding-bottom:6px;border-bottom:1px dashed rgba(255,255,255,.25);animation:pnUp .25s both} #pn .pn-items li span{opacity:.9} #pn .pn-items b{white-space:nowrap} #pn .pn-sum-top{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 12px} #pn .pn-sum-top b{font-size:28px;font-weight:900} #pn .pn-sum-top s{opacity:.65;font-size:14px;margin-inline-start:6px} #pn .pn-notes-list{list-style:disc;padding-inline-start:18px;font-size:12px;opacity:.85;display:grid;gap:3px;margin-top:12px} #pn .pn-msg{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--c4);text-align:center} #pn .pn-msg:empty{display:none} #pn .pn-load{text-align:center;color:var(--ink2);padding:30px 0} #pn .pn-load i{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px solid var(--c3);border-top-color:var(--c1);animation:pnSpin .8s linear infinite;vertical-align:middle;margin-inline-end:8px} /* ── 3.3 الأقسام اللي تحت (الخطوات، الأعمال، الأسئلة) ── */ #pn .pn-info{position:relative;padding:10px 0 30px} #pn .pn-sec{padding:30px 0;border-top:1px solid color-mix(in srgb,var(--c3) 30%,transparent)} #pn .pn-sec:first-child{border-top:0} #pn .pn-steps{list-style:none;padding:0;display:grid;gap:14px;position:relative} #pn .pn-steps::before{content:"";position:absolute;top:16px;bottom:16px;right:21px;width:2px;background:linear-gradient(var(--c2),var(--c1));opacity:.3} #pn .pn-step{display:flex;gap:12px;align-items:flex-start;position:relative} #pn .pn-step__n{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;color:var(--pn-on);background:linear-gradient(180deg,var(--c2),var(--c1));box-shadow:0 0 0 6px color-mix(in srgb,var(--c4) 35%,var(--pn-bg))} #pn .pn-step .pn-card{flex:1;padding:14px} #pn .pn-step b{display:block;color:var(--ink);margin-bottom:2px} #pn .pn-step p{font-size:13.5px} #pn .pn-revs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:none} #pn .pn-revs::-webkit-scrollbar{display:none} #pn .pn-rev{flex:0 0 82%;max-width:320px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:12px} #pn .pn-rev p{color:var(--ink);font-size:14.5px} #pn .pn-rev__f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:700} #pn .pn-stars{color:#f4b400;letter-spacing:2px} #pn .pn-demo{display:inline-block;font-size:10.5px;font-weight:800;color:var(--c1);background:color-mix(in srgb,var(--c4) 45%,var(--pn-bg));border:1px dashed var(--c3);border-radius:999px;padding:2px 8px;align-self:flex-start} #pn .pn-lib{display:grid;gap:10px} #pn .pn-faq{display:grid;gap:10px} #pn .pn-fi{border:1px solid var(--line);border-radius:16px;background:var(--pn-card);overflow:hidden} #pn .pn-fq{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:54px;padding:14px 16px;font-weight:800;color:var(--ink)} #pn .pn-fq .ar{flex:none;color:var(--c1);transition:transform .25s} #pn .pn-fq[aria-expanded="true"] .ar{transform:rotate(180deg)} #pn .pn-fa{padding:0 16px 16px;font-size:14px;animation:pnUp .3s both} #pn .pn-fa[hidden]{display:none} #pn .pn-final{position:relative;overflow:hidden;margin-top:20px;padding:34px 20px;border-radius:26px;background:linear-gradient(135deg,var(--c1),var(--dark));color:var(--pn-on-deep);text-align:center} #pn .pn-final>*:not(.pn-notes){position:relative;z-index:1} #pn .pn-final h3{font-size:22px;font-weight:800;color:var(--pn-on-deep);margin-bottom:8px} #pn .pn-final p{opacity:.9;font-size:14.5px;margin-bottom:18px} #pn.pn-js .pn-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease} #pn.pn-js .pn-reveal.is-in{opacity:1;transform:none} /* ── 3.4 الشريط الثابت وزرار الواتساب ── */ #pn-fixed .pn-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--pn-card) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -12px 30px -20px var(--c1);transform:translateY(115%);transition:transform .35s ease} #pn-fixed .pn-sticky.is-on{transform:none} #pn-fixed .pn-sticky__in{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:10px} #pn-fixed .pn-sticky__p{display:flex;flex-direction:column;line-height:1.25;text-align:right} #pn-fixed .pn-sticky__p small{font-size:11px;color:var(--ink2)} #pn-fixed .pn-sticky__p b{font-size:19px;font-weight:900;color:var(--ink);white-space:nowrap} #pn-fixed .pn-sticky .pn-btn{flex:1;min-height:50px;font-size:15px;padding:10px 14px} #pn-fixed .pn-wa{position:fixed;left:14px;bottom:18px;z-index:9991;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 22px -8px rgba(37,211,102,.8);transition:bottom .35s ease,transform .2s;animation:pnPulse 2.6s ease-in-out infinite} #pn-fixed .pn-wa:active{transform:scale(.92)} #pn-fixed .pn-wa svg{width:26px;height:26px;fill:currentColor} #pn-fixed .pn-fx{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden} #pn-fixed .pn-fx span{position:absolute;line-height:1;opacity:0;will-change:transform,opacity;animation:pnBurst 1.25s cubic-bezier(.2,.7,.3,1) forwards} #pn-fixed .pn-fx i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;will-change:transform,opacity;animation:pnConf 1.6s cubic-bezier(.15,.6,.35,1) forwards} #pn-fixed .pn-toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:10000;width:max-content;max-width:min(92vw,420px);padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--pn-bg);font-size:14px;font-weight:700;text-align:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:pnUp .25s both} #pn-fixed .pn-toast[hidden]{display:none} .pn-scope .pn-pop{animation:pnPop .35s} /* ── 3.5 إضافات: الشريط المنحني، الدفع، العينات، الفريق، الواتساب ── */ .pn-scope .pn-st{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pn-scope .pn-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important} #pn .pn-h1a{display:inline-block;animation:pnUp .7s both} #pn .pn-hl{animation:pnGrad 6s linear infinite,pnUp .8s .15s both} /* الشريط المنحني */ #pn .pn-route{position:relative;z-index:1;width:min(100%,640px);margin:0 auto 18px;aspect-ratio:390/150} #pn .pn-route__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #pn .pn-r-aura{fill:none;stroke-width:34;stroke-linecap:round} #pn .pn-r-aura--a{stroke:var(--c4)}#pn .pn-r-aura--b{stroke:var(--c3);opacity:.6} #pn .pn-r-shadow{fill:none;stroke:var(--c1);stroke-opacity:.1;stroke-width:30;stroke-linecap:round;transform:translateY(4px)} #pn .pn-r-paper{fill:none;stroke:var(--pn-card);stroke-width:28;stroke-linecap:round} #pn .pn-r-stitch{fill:none;stroke:var(--c3);stroke-width:1;stroke-dasharray:3 5;opacity:.0} #pn .pn-r-side{font-size:12px;font-weight:800;fill:var(--c1);font-family:inherit} #pn .pn-r-staff{fill:none;stroke:var(--c1);stroke-width:1.1;opacity:.55} #pn .pn-r-head,#pn .pn-r-beam{fill:var(--c1)} #pn .pn-r-open{fill:var(--pn-card);stroke:var(--c1);stroke-width:1.3} #pn .pn-r-stem{fill:none;stroke:var(--c1);stroke-width:1.3} #pn .pn-r-halo{fill:var(--c3);opacity:.35;transform-box:fill-box;transform-origin:center;animation:pnHalo 2.6s ease-out infinite} #pn .pn-r-halo--2{animation-delay:1.3s} #pn .pn-r-knot{transform-box:fill-box;transform-origin:center;animation:pnKnot 2.4s ease-in-out infinite} #pn .pn-r-core{fill:url(#pnR-core);fill:var(--c1);stroke:var(--pn-card);stroke-width:2.5} #pn .pn-r-kn{fill:var(--pn-on)}#pn .pn-r-kstem{fill:none;stroke:var(--pn-on);stroke-width:1.8;stroke-linecap:round} #pn .pn-r-pin{stroke:var(--c2);stroke-width:1.4;stroke-dasharray:2 3} #pn .pn-r-label{font-size:11.5px;font-weight:800;fill:var(--c1);font-family:inherit} #pn .pn-route__story{position:absolute;right:0;width:46%;top:29.5%;height:13%;overflow:hidden;display:flex;align-items:center; -webkit-mask-image:linear-gradient(to left,transparent,#000 10%,#000 80%,transparent);mask-image:linear-gradient(to left,transparent,#000 10%,#000 80%,transparent);transform:rotate(-2.5deg);transform-origin:left center} #pn .pn-route__rail{display:flex;width:max-content;white-space:nowrap;font-size:clamp(11px,3.1vw,16px);font-weight:700;color:var(--ink);animation:pnRail 30s linear infinite} /* طرق الدفع */ .pn-scope .pn-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink2)} .pn-scope .pn-pay--dark{color:rgba(255,255,255,.85)} .pn-scope .pn-pay--mini{margin:2px 0 0;justify-content:flex-start;gap:4px;font-size:0} .pn-scope .pn-pay--mini>span:first-child{display:none} .pn-scope .pn-pb{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;font-size:11.5px;font-weight:900;line-height:1;letter-spacing:.2px} .pn-scope .pn-pay--mini .pn-pb{height:17px;padding:0 6px;font-size:9.5px;border-radius:5px} .pn-scope .pn-pb--tamara{background:linear-gradient(90deg,#f9cbb0,#d9b1f2);color:#291a33} .pn-scope .pn-pb--tabby{background:#3affbf;color:#0c1b16;direction:ltr} .pn-scope .pn-pb--apple{background:#000;color:#fff;direction:ltr} .pn-scope .pn-pb--mada{background:var(--pn-card);color:#0b4b8c;border:1px solid #d6e2f0} /* العينة الأولى */ #pn .pn-feature{position:relative;overflow:visible} #pn .pn-starb{position:absolute;top:-18px;right:-12px;width:50px;height:50px;transform:rotate(8deg);animation:pnSpinSlow 18s linear infinite} #pn .pn-starb svg{width:100%;height:100%} #pn .pn-starb polygon{fill:var(--c4);stroke:var(--pn-card);stroke-width:3} #pn .pn-libLink span:first-child{display:flex;flex-direction:column;line-height:1.35} #pn .pn-libLink small{font-weight:600;font-size:12px;color:var(--ink2)} #pn .pn-libLink__ar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pn-card);border:1px solid var(--line)} #pn .pn-player.is-soon .pn-play{opacity:.55;cursor:default} #pn .pn-soon{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--c4);color:var(--c1);vertical-align:middle} /* الفورم */ #pn .pn-check{width:28px;height:28px;font-size:13px;font-weight:900} #pn .pn-opt svg{width:18px;height:18px;flex:none} #pn .pn-opt.is-off{opacity:.5;pointer-events:none} #pn .pn-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;min-height:44px;border-radius:14px;border:1.5px dashed var(--c3);background:var(--pn-card);color:var(--c1);font-weight:800;font-size:14px} #pn .pn-more-btn span{transition:transform .25s} #pn .pn-more-btn.is-open span{transform:rotate(180deg)} #pn .pn-more{display:grid;gap:8px;animation:pnUp .3s both} #pn .pn-more[hidden]{display:none} #pn .pn-tfoot{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-top:6px} #pn .pn-hint{font-size:12px;color:var(--c1);font-weight:600} #pn .pn-tfoot .pn-count{margin:0;flex:none} #pn .pn-disc{display:inline-block;margin:6px 6px 0 0;font-size:11px;font-weight:900;padding:3px 9px;border-radius:999px;background:var(--c4);color:var(--c1);border:1px solid var(--c3)} /* كيف نشتغل */ #pn .pn-team{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 auto 14px;padding:8px 14px 8px 18px;border-radius:999px;background:var(--pn-card);border:1px solid var(--line);box-shadow:0 10px 24px -18px var(--c1)} #pn .pn-team__m{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--pn-on);background:linear-gradient(135deg,var(--c1),var(--c2))} #pn .pn-team__m svg{width:18px;height:18px} #pn .pn-team strong{display:block;color:var(--ink);font-size:14px;line-height:1.3} #pn .pn-team small{display:block;color:var(--ink2);font-size:12px} #pn .pn-h2--ico{display:flex;align-items:center;justify-content:center;gap:8px} #pn .pn-h2i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c4) 50%,var(--pn-bg));color:var(--c1)} #pn .pn-h2i svg{width:18px;height:18px} #pn .pn-step__n svg{width:20px;height:20px;color:var(--pn-on)} #pn .pn-kicker{text-align:center;font-size:12px;font-weight:800;color:var(--c2);margin-bottom:4px} #pn .pn-wgroup{margin-top:14px} #pn .pn-wgroup h3{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px} #pn .pn-wgroup h3::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c3))} @media (min-width:700px){ #pn .pn-steps::before{right:50%;margin-right:-1px} #pn .pn-step{width:50%} #pn .pn-step.is-r{margin-right:0;padding-left:30px} #pn .pn-step.is-l{margin-right:50%;flex-direction:row-reverse;padding-right:30px;margin-left:0;transform-origin:left} #pn .pn-step.is-r .pn-step__n{margin-right:-22px} #pn .pn-step.is-l .pn-step__n{margin-left:-22px} } /* رسائل واتساب */ #pn .pn-wap{position:relative;overflow:hidden;margin:6px 0 10px;padding:22px 16px 18px;border-radius:26px;background:linear-gradient(160deg,#0b3d33,#075e54 55%,#128c7e);color:#fff} #pn .pn-wap>*:not(.pn-notes){position:relative;z-index:1} #pn .pn-wap__h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px} #pn .pn-wap__mark{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)} #pn .pn-wap__mark svg{width:24px;height:24px;fill:currentColor} #pn .pn-wap h2{font-size:19px;font-weight:900;color:#fff;margin-bottom:2px} #pn .pn-wap p{font-size:12.5px;opacity:.82} #pn .pn-wap__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;scrollbar-width:none;outline:none} #pn .pn-wap__track::-webkit-scrollbar{display:none} #pn .pn-wap__s{flex:0 0 84%;max-width:330px;scroll-snap-align:start;padding:12px;border-radius:18px;background:#e5ddd5 radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px) 0 0/12px 12px} #pn .pn-wap__top{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#54656f;margin-bottom:8px} #pn .pn-wap__b{position:relative;display:inline-block;max-width:92%;padding:9px 12px 18px;border-radius:12px 0 12px 12px;background:#fff;color:#111b21;font-size:14.5px;line-height:1.6;box-shadow:0 1px 1px rgba(0,0,0,.12);animation:pnUp .5s both} #pn .pn-wap__b::after{content:"";position:absolute;top:0;right:-8px;border:8px solid transparent;border-top-color:#fff;border-right:0} #pn .pn-wap__b i{position:absolute;left:8px;bottom:3px;font-style:normal;font-size:11px;color:#53bdeb;letter-spacing:-2px} #pn .pn-wap__hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;opacity:.85;margin-top:6px;transition:opacity .3s} #pn .pn-wap__hint b{animation:pnNudge 1.4s ease-in-out infinite} #pn .pn-wap__hint.is-gone{opacity:0} /* الأسئلة */ #pn .pn-faq-more{display:grid;gap:10px} #pn .pn-faq-more[hidden]{display:none} #pn .pn-faq-btn{display:block;width:100%;margin-top:10px;min-height:46px;border-radius:14px;background:var(--pn-card);border:1.5px dashed var(--c3);color:var(--c1);font-weight:800} /* الشريط الثابت */ #pn-fixed .pn-sticky__p{min-width:0} #pn-fixed .pn-wa-s{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 8px 16px -8px rgba(37,211,102,.8)} #pn-fixed .pn-wa-s svg{width:22px;height:22px;fill:currentColor} body.pn-sticky-on #pn-fixed .pn-wa{opacity:0;pointer-events:none;transform:scale(.6)} #pn-fixed .pn-wa{transition:opacity .3s,transform .3s} /* موجة الضغط + حلقة الاختيار */ #pn .pn-opt,#pn .pn-row,.pn-scope .pn-btn,#pn .pn-play,#pn .pn-more-btn,#pn .pn-faq-btn,#pn .pn-fq{position:relative;overflow:hidden;isolation:isolate} .pn-scope .pn-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:0;width:var(--d);height:var(--d);left:var(--x);top:var(--y);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2); background:radial-gradient(circle,color-mix(in srgb,var(--c3) 75%,transparent) 0%,color-mix(in srgb,var(--c2) 35%,transparent) 45%,transparent 70%);transform:scale(0);opacity:.9;animation:pnRipple .65s cubic-bezier(.2,.7,.3,1) forwards} .pn-scope .pn-btn .pn-ripple,#pn .pn-opt.is-on .pn-ripple,#pn .pn-play .pn-ripple{background:radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(255,255,255,.3) 45%,transparent 70%)} #pn .pn-opt>:not(.pn-ripple):not(.pn-hid),#pn .pn-row>:not(.pn-ripple):not(.pn-hid){position:relative;z-index:1} .pn-scope .pn-splash{position:fixed;pointer-events:none;z-index:9998;border-radius:var(--br);border:2px solid var(--c2);box-shadow:0 0 0 0 color-mix(in srgb,var(--c3) 60%,transparent);animation:pnSplash .6s ease-out forwards} .pn-scope .pn-splash--2{border-color:var(--c3);animation-delay:.1s;opacity:0} @keyframes pnRipple{to{transform:scale(1);opacity:0}} @keyframes pnSplash{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(var(--k,1.18));box-shadow:0 0 0 10px transparent}} #pn .pn-banner{position:relative;z-index:2;width:min(100% - 32px,680px);margin:16px auto 0;display:grid;gap:10px} #pn .pn-banner a,#pn .pn-banner>*{display:block;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -26px var(--c1);border:1px solid var(--line);animation:pnUp .6s both;transition:transform .2s} #pn .pn-banner a:active{transform:scale(.985)} #pn .pn-banner img{display:block;width:100%!important;height:auto!important;max-width:100%!important} #pn .pn-banner--before-form{width:100%;margin:0 0 14px} @keyframes pnHalo{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.9);opacity:0}} @keyframes pnRail{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes pnSpinSlow{to{transform:rotate(368deg)}} @keyframes pnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}} @keyframes pnUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes pnPop{0%{transform:scale(.85)}60%{transform:scale(1.1)}100%{transform:scale(1)}} @keyframes pnShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} @keyframes pnFloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-18px) rotate(calc(var(--r) * -1))}} @keyframes pnStory{from{transform:translateX(50%)}to{transform:translateX(0)}} @keyframes pnScore{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes pnKnot{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes pnRing{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.7);opacity:0}} @keyframes pnShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}} @keyframes pnWave{from{transform:scaleY(.45)}to{transform:scaleY(1)}} @keyframes pnSpin{to{transform:rotate(360deg)}} @keyframes pnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @keyframes pnGrad{to{background-position:300% 0}} @keyframes pnGlow{50%{filter:brightness(1.3) saturate(1.3)}} @keyframes pnPulse{0%,100%{box-shadow:0 10px 22px -8px rgba(37,211,102,.8),0 0 0 0 rgba(37,211,102,.45)}60%{box-shadow:0 10px 22px -8px rgba(37,211,102,.8),0 0 0 12px rgba(37,211,102,0)}} @keyframes pnBurst{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1);opacity:0}} @keyframes pnConf{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot));opacity:0}} @media (min-width:700px){#pn .pn-lib{grid-template-columns:1fr 1fr}#pn .pn-rev{flex-basis:46%}} @media (min-width:900px){#pn .pn-hero{padding:60px 0 44px}#pn .pn-box{padding:30px 28px}#pn .pn-progress{margin:0 -28px 14px;padding:10px 28px}} @media (max-width:360px){#pn .pn-h1{font-size:28px}#pn .pn-chips{grid-template-columns:1fr}#pn .pn-offer__fig b{font-size:54px}} .pn-calm .pn-notes span,.pn-calm .pn-shine,.pn-calm .pn-btn--shine::after,.pn-calm .pn-row.is-hl::before,.pn-calm .pn-hl,.pn-calm .pn-starb,.pn-calm .pn-r-halo,.pn-calm .pn-r-knot,.pn-calm .pn-knot,.pn-calm .pn-wa,.pn-calm .pn-libLink span,.pn-calm .pn-wap__hint b,.pn-calm .is-playing .pn-wave i{animation:none!important} /* ================================================================== * تصليح: الصفحة ما تتنططش لما العميل يختار باقة أو اختيار * ================================================================== */ #pn{overflow-anchor:none} #pn .pn-field{animation:pnFadeOnly .3s ease both} @keyframes pnFadeOnly{from{opacity:0}to{opacity:1}} /* ================================================================== * 5) لمسات أناقة * ================================================================== */ /* ── الاختيارات البسيطة (لغة الأغنية، وش المناسبة، وأي اختيار من غير وصف): أزرار صغيرة نحيفة بدل الصفوف الطويلة ── */ #pn .pn-rows:not(:has(.pn-desc, .pn-ico)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #pn .pn-field[data-oid="621101228"] .pn-rows{grid-template-columns:repeat(2,minmax(0,1fr))} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-row{min-height:0;padding:7px 8px;gap:4px;justify-content:center;text-align:center;border-width:1px;border-radius:10px;box-shadow:none} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-tick{display:none} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-copy{flex:none;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:100%} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-name{font-size:12.5px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-price{margin:0;padding:0;background:none;font-size:10px;font-weight:700;color:var(--pn-text2)} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-row.is-on{background:var(--pn-deep);border-color:var(--pn-deep);box-shadow:none} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-row.is-on .pn-name, #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-row.is-on .pn-price{color:var(--pn-on-deep)} #pn .pn-rows:not(:has(.pn-desc, .pn-ico)) .pn-row:hover{border-color:var(--pn-c2)} @media (max-width:360px){#pn .pn-rows:not(:has(.pn-desc, .pn-ico)){grid-template-columns:repeat(2,minmax(0,1fr))}} /* ── الباقة الألماسية: نفس شكل باقي الباقات + سباركلز ذهبي (من غير خلفية ملونة علشان ما تبانش كأنها مختارة) ── */ #pn .pn-row.is-hl{background:var(--pn-card);border-color:var(--pn-c3)} #pn .pn-row.is-hl:not(.is-on)::before{background:linear-gradient(105deg,transparent 40%,rgba(201,162,124,.18) 50%,transparent 60%)} #pn .pn-row.is-hl .pn-price{background:color-mix(in srgb,var(--pn-c4) 45%,var(--pn-bg));color:var(--pn-c1)} #pn .pn-row.is-hl.is-on{background:color-mix(in srgb,var(--pn-c4) 16%,var(--pn-bg));border-color:var(--pn-c1)} #pn .pn-row.is-hl::after{content:"✦";position:absolute;top:8px;left:12px;z-index:2;font-size:13px;line-height:1;color:var(--pn-c2);pointer-events:none; text-shadow:14px 10px 0 var(--pn-c3),-2px 22px 0 var(--pn-c2);animation:pnSpark 2.4s ease-in-out infinite} @keyframes pnSpark{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}} .pn-calm #pn .pn-row.is-hl::after{animation:none;opacity:.8} /* ── أناقة عامة (مع الثيم الكريمي بس) ── */ /* من غير النوتات الطايرة في الخلفية */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-notes:not(.pn-notes--light){display:none} /* حدود أرفع وألطف */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-row, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-opt, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-in{border-width:1px} :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-field{border-color:color-mix(in srgb,var(--pn-c3) 70%,transparent);padding:16px} /* شارات تابي وتمارا بلون هادي بدل الفسفوري */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) .pn-scope .pn-pb--tamara, :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) .pn-scope .pn-pb--tabby{background:var(--pn-card);color:var(--pn-text2);border:1px solid var(--pn-c3)} /* العناوين أهدى شوية */ :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-h1{font-weight:800;letter-spacing:-.3px} :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-h2{font-weight:800} :is(html:not([class*="pn-theme-"]), html.pn-theme-cream) #pn .pn-ft b{font-size:15.5px} /* ===== Footer (SEO + trust) - added by Claude ===== */ body.pn-on footer.store-footer.store-footer{display:block!important;background:#2b2622!important;margin-top:56px;border-top:3px solid #a8825a} body.pn-on footer.store-footer > div,body.pn-on footer.store-footer .store-footer__inner{background:transparent!important} body.pn-on footer.store-footer .store-footer__inner{padding:48px 0 28px!important} body.pn-on footer.store-footer,body.pn-on footer.store-footer *{font-family:Tajawal,system-ui,sans-serif!important;color:#f3e6d3!important;border-color:rgba(243,230,211,.14)!important} body.pn-on footer.store-footer h3{font-weight:800!important;font-size:20px!important;color:#e9c99f!important;margin-bottom:14px} body.pn-on footer.store-footer a:hover{color:#e9c99f!important} body.pn-on footer.store-footer .s-social-link,body.pn-on footer.store-footer .s-contacts-icon{background:rgba(243,230,211,.08)!important;border:1px solid rgba(243,230,211,.22)!important} body.pn-on footer.store-footer svg,body.pn-on footer.store-footer svg *{fill:#e9c99f!important} body.pn-on footer.store-footer .container > div:has(.s-menu-footer-list:empty){display:none!important} /* ===== Speed: reserve top banner space (prevents layout shift) - added by Claude ===== */ body.pn-on .pn-banner--top img{aspect-ratio:2/1!important;width:100%;height:auto!important} /* ===== منع اهتزاز الصفحة (CLS) في الرئيسية ===== */ body.index header.store-header,body.index .store-header,body.index #mainnav,body.index .top-navbar, body.index .breadcrumbs,body.index salla-breadcrumb,body.index salla-maintenance-alert,body.index salla-advertisement,body.index .f_bottom-menu{display:none!important} body.index #main-content>*:not(#pn){display:none!important} body.index:not(.pn-on) footer.store-footer{display:none!important} /* ===== منع اهتزاز العنوان على الموبايل: سطر "وأغنية تعيش معاكم للأبد" بياخد سطرين بخط Tajawal - added by Claude ===== */ @media (max-width:659px){#pn .pn-hl{min-height:2.44em}}