/* ══════════════════════════════════════════════════════════════ تفعيل الدفع الإلكتروني — صفحة /payments ملف مستقل تماماً: لا يشترك مع أي ثيم أو لوحة (نفس نهج studio.css). الوضع الفاتح هو الافتراضي؛ الداكن عبر . ══════════════════════════════════════════════════════════════ */ :root{ --bg:#FAF8F4; --bg1:#FFF8EC; --bg2:#FCFAF6; --surface:#FFFFFF; --surface-2:#F3F0E9; --surface-soft:rgba(255,255,255,.72); --line:rgba(22,28,40,.11); --line-2:rgba(22,28,40,.07); --txt:#141B29; --mut:#5F6B7E; --gold:#A87A18; --gold2:#C79B34; --gold-tint:rgba(168,122,24,.10); --gold-line:rgba(168,122,24,.28); --ok:#12A150; --ok-tint:rgba(18,161,80,.10); --err:#C0392B; --err-tint:rgba(192,57,43,.09); --wa:#25D366; --wa-deep:#12A150; --wa-ink:#FFFFFF; --grid-line:rgba(22,28,40,.05); --orb1:#E9C67C; --orb2:#EFE3CB; --orb3:#E3D7C2; --orb-op:.30; --orb-blur:80px; --shadow:0 20px 45px -24px rgba(20,26,40,.45); --shadow-lg:0 34px 70px -34px rgba(20,26,40,.55); --nav-bg:rgba(250,248,244,.82); --r:22px; --ease:cubic-bezier(.16,.84,.44,1); } [data-theme="dark"]{ --bg:#070B14; --bg1:#16233D; --bg2:#0A1120; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.03); --surface-soft:rgba(255,255,255,.04); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.07); --txt:#EDF1F7; --mut:#96A3B8; --gold:#D8A93F; --gold2:#F3DCA0; --gold-tint:rgba(216,169,63,.10); --gold-line:rgba(216,169,63,.30); --ok:#3DD07E; --ok-tint:rgba(61,208,126,.12); --err:#F2837A; --err-tint:rgba(242,131,122,.12); --wa-deep:#1EBE5B; --wa-ink:#04240F; --grid-line:rgba(255,255,255,.035); --orb1:#B98624; --orb2:#1E4E6B; --orb3:#5B3B8C; --orb-op:.42; --orb-blur:90px; --shadow:0 20px 45px -22px rgba(0,0,0,.7); --shadow-lg:0 34px 70px -28px rgba(0,0,0,.85); --nav-bg:rgba(7,11,20,.78); } *{box-sizing:border-box} /* clip بدل hidden: يمنع التمرير الأفقي دون كسر position:sticky للشريط العلوي */ html{scroll-behavior:smooth;overflow-x:clip} body.lqp{ margin:0;background:var(--bg);color:var(--txt); font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px;line-height:1.75;overflow-x:clip;max-width:100%; -webkit-font-smoothing:antialiased; } body.lqp--en{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.68} .lqp *{font-family:inherit} .lqp img{max-width:100%;display:block} .lqp a{color:inherit;text-decoration:none} .lqp h1,.lqp h2,.lqp h3{margin:0;line-height:1.25;font-weight:900;letter-spacing:-.4px} .lqp p{margin:0} .lqp em{font-style:normal; background:linear-gradient(180deg,var(--gold2),var(--gold)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} :root:not([data-theme="dark"]) .lqp em{background:linear-gradient(180deg,var(--gold),#8C6412); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wrap{width:min(1120px,100% - 40px);margin-inline:auto} .wrap--narrow{width:min(780px,100% - 40px)} /* ── الخلفية الحية ───────────────────────────────────────── */ .lqp-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .lqp-bg .orb{position:absolute;border-radius:50%;filter:blur(var(--orb-blur));opacity:var(--orb-op)} .lqp-bg .orb1{width:46vw;height:46vw;background:var(--orb1);top:-14vw;inset-inline-end:-10vw} .lqp-bg .orb2{width:38vw;height:38vw;background:var(--orb2);top:52vh;inset-inline-start:-12vw} .lqp-bg .orb3{width:30vw;height:30vw;background:var(--orb3);top:130vh;inset-inline-end:-6vw} .lqp-bg .grid{position:absolute;inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%)} .lqp main,.lqp header,.lqp footer{position:relative;z-index:1} /* ── الشريط العلوي ───────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2)} .nav__in{display:flex;align-items:center;gap:14px;height:66px} .nav__logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:16px} .nav__logo img{width:30px;height:30px;border-radius:8px;object-fit:contain} .nav__links{display:flex;gap:20px;margin-inline-start:auto;font-size:14.5px;font-weight:700;color:var(--mut)} .nav__links a:hover{color:var(--gold)} .nav__act{display:flex;align-items:center;gap:8px;margin-inline-start:auto} .nav__links + .nav__act{margin-inline-start:16px} .iconbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:11px; border:1px solid var(--line);background:var(--surface);color:var(--txt);font-size:12px;font-weight:800;transition:.18s} .iconbtn:hover{border-color:var(--gold-line);color:var(--gold)} .nav__cta{padding:9px 17px;border-radius:11px;font-size:13.5px;font-weight:800; background:linear-gradient(135deg,var(--gold),var(--gold2));color:#20180A;white-space:nowrap} [data-theme="dark"] .nav__cta{color:#1A1204} .nav__cta:hover{filter:brightness(1.06)} /* ── أقسام عامة ──────────────────────────────────────────── */ .sec{padding:74px 0} .sec--tight{padding:56px 0} .sec__h{text-align:center;margin-bottom:40px} .sec__h h2{font-size:clamp(26px,4vw,36px)} .sec__h p{color:var(--mut);margin-top:11px;font-size:16px} /* ── البطل ───────────────────────────────────────────────── */ .hero{padding:64px 0 34px;text-align:center} .pill{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:999px; border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold); font-size:12.5px;font-weight:800;margin-bottom:20px} .hero h1{font-size:clamp(30px,5.6vw,52px);letter-spacing:-1px} .hero__sub{color:var(--mut);font-size:clamp(15px,2vw,18px);max-width:640px;margin:18px auto 0} .hero__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:14px; font-size:15px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.2s var(--ease)} .btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#20180A} .btn--gold:hover{transform:translateY(-2px);filter:brightness(1.05)} .btn--ghost{background:var(--surface);border-color:var(--line);color:var(--txt)} .btn--ghost:hover{border-color:var(--gold-line);color:var(--gold)} .btn--wa{background:var(--wa);color:#FFF} .btn--wa:hover{background:var(--wa-deep);color:#FFF;transform:translateY(-2px)} .btn--wa .wa-glyph{flex:none} .btn[disabled]{opacity:.55;cursor:progress;transform:none} .hero__time{color:var(--mut);font-size:13px;margin-top:14px} .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px} .chip{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px; border:1px solid var(--line);background:var(--surface-soft);font-size:13.5px;font-weight:700;color:var(--txt)} .chip svg{color:var(--gold);flex:none} /* ── الخطوات ─────────────────────────────────────────────── */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px; box-shadow:var(--shadow);transition:.24s var(--ease)} .card:hover{transform:translateY(-3px);border-color:var(--gold-line)} .step__n{display:grid;place-items:center;width:42px;height:42px;border-radius:13px; background:var(--gold-tint);border:1px solid var(--gold-line);color:var(--gold); font-size:17px;font-weight:900;margin-bottom:16px} .card h3{font-size:18px;margin-bottom:9px} .card p{color:var(--mut);font-size:14.5px} /* ── المستندات ───────────────────────────────────────────── */ .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .doc{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line); border-radius:18px;padding:20px 22px} .doc__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none; background:var(--gold-tint);border:1px solid var(--gold-line);color:var(--gold)} .doc h3{font-size:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .doc p{color:var(--mut);font-size:14px;margin-top:6px} .tag{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800; background:var(--surface-2);border:1px solid var(--line);color:var(--mut)} /* ── النموذج ─────────────────────────────────────────────── */ .form-card{background:var(--surface);border:1px solid var(--line);border-radius:26px; padding:clamp(22px,4vw,40px);box-shadow:var(--shadow-lg)} .form-card__h h2{font-size:clamp(22px,3.4vw,30px)} .form-card__h p{color:var(--mut);font-size:14.5px;margin-top:10px} .fsec{margin-top:34px} .fsec__t{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;color:var(--gold); letter-spacing:.4px;margin-bottom:18px} .fsec__t::after{content:"";flex:1;height:1px;background:var(--line)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:13.5px;font-weight:800} .field .req{color:var(--gold)} .field .opt{font-size:11.5px;font-weight:700;color:var(--mut)} .field .hint{font-size:12.5px;color:var(--mut)} .field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{ width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line); background:var(--surface-2);color:var(--txt);font-size:15px;transition:.16s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--surface); box-shadow:0 0 0 4px var(--gold-tint)} .field textarea{min-height:96px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--mut);opacity:.65} /* أزواج الأرقام في RTL: نبقي الأرقام والبريد LTR داخل حقل عربي */ [dir="rtl"] .ltr{direction:ltr;text-align:right} /* اختيار الجنسية */ .segs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .seg{position:relative} .seg input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0} .seg span{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:13px; border:1px solid var(--line);background:var(--surface-2);font-size:14.5px;font-weight:800;transition:.18s} .seg input:checked + span{border-color:var(--gold);background:var(--gold-tint);color:var(--gold)} .seg input:focus-visible + span{box-shadow:0 0 0 4px var(--gold-tint)} /* مناطق رفع الملفات */ .drops{display:grid;grid-template-columns:1fr 1fr;gap:16px} .drop{position:relative;border:2px dashed var(--line);border-radius:18px;background:var(--surface-2); padding:22px 18px;text-align:center;cursor:pointer;transition:.18s;min-height:168px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px} .drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-tint)} .drop.filled{border-style:solid;border-color:var(--ok);background:var(--ok-tint)} .drop.invalid{border-color:var(--err);background:var(--err-tint)} .drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .drop__head{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:900} .drop__head .tag{font-size:10.5px} .drop__ic{color:var(--gold);margin-bottom:2px} .drop.filled .drop__ic{color:var(--ok)} .drop__t{font-size:13.5px;font-weight:700;color:var(--txt)} .drop__s{font-size:12px;color:var(--mut)} .drop__file{font-size:13px;font-weight:800;color:var(--ok);word-break:break-all;max-width:100%} .drop__err{font-size:12.5px;font-weight:700;color:var(--err)} .drop__thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line)} .drop__x{position:absolute;top:10px;inset-inline-end:10px;z-index:3;width:28px;height:28px;border-radius:9px; border:1px solid var(--line);background:var(--surface);color:var(--mut);cursor:pointer;display:none; align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0} .drop.filled .drop__x{display:flex} .drop__x:hover{color:var(--err);border-color:var(--err)} /* الموافقة والإرسال */ .consent{display:flex;gap:12px;align-items:flex-start;padding:17px 19px;border-radius:16px; border:1px solid var(--line);background:var(--surface-2);font-size:14px;cursor:pointer} .consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold);cursor:pointer} .send{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px} .send .btn{width:100%;max-width:420px;padding:16px} .send small{color:var(--mut);font-size:12.5px;text-align:center} /* أخطاء التحقّق */ .alert{border-radius:16px;padding:16px 19px;font-size:14px;margin-bottom:24px} .alert--err{border:1px solid var(--err);background:var(--err-tint);color:var(--err)} .alert strong{display:block;margin-bottom:6px} .alert ul{margin:0;padding-inline-start:20px} /* ── حالة النجاح ─────────────────────────────────────────── */ .done{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:26px; padding:clamp(28px,5vw,48px);box-shadow:var(--shadow-lg)} .done__ic{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:0 auto 20px; background:var(--ok-tint);border:1px solid var(--ok);color:var(--ok)} .done h2{font-size:clamp(24px,3.6vw,32px)} .done p{color:var(--mut);margin-top:12px;font-size:15px} .ref{display:inline-flex;flex-direction:column;gap:4px;margin:24px auto 0;padding:16px 34px;border-radius:18px; background:var(--gold-tint);border:1px dashed var(--gold-line)} .ref span{font-size:12px;font-weight:800;color:var(--mut)} .ref b{font-size:26px;font-weight:900;color:var(--gold);letter-spacing:2px;direction:ltr} .done__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px} /* ── الأسئلة الشائعة ─────────────────────────────────────── */ .faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:11px} .qa{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.18s} .qa[open]{border-color:var(--gold-line)} .qa summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:15.5px;font-weight:800; display:flex;align-items:center;gap:12px} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"";flex:none;margin-inline-start:auto;width:9px;height:9px; border-inline-end:2px solid var(--gold);border-block-end:2px solid var(--gold); transform:rotate(45deg);transition:.2s} .qa[open] summary::after{transform:rotate(-135deg)} .qa summary:hover{color:var(--gold)} .qa__a{padding:0 22px 20px;color:var(--mut);font-size:14.5px} /* ── التذييل + واتساب عائم ───────────────────────────────── */ .foot{border-top:1px solid var(--line-2);padding:40px 0;text-align:center} .foot p{color:var(--mut);font-size:14.5px} .foot__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px} .foot__c{margin-top:26px;font-size:12.5px;color:var(--mut)} /* أيقونة واتساب عادية: دائرة خضراء فاتحة بلا نص ولا ظل ولا نبض */ .wafab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;background:var(--wa);color:#FFF; transition:.2s var(--ease)} .wafab:hover{background:var(--wa-deep);color:#FFF;transform:translateY(-2px)} .wafab__ic{display:grid;place-items:center} .wafab .wa-glyph{width:28px;height:28px} /* ── الظهور التدريجي (مشروط بوجود JS) ────────────────────── */ html.js .rise{opacity:0;transform:translateY(18px)} html.js .rise.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)} /* ── الجوّال ─────────────────────────────────────────────── */ @media (max-width:1040px){ .grid4{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .grid3,.grid2,.drops,.frow{grid-template-columns:1fr} .nav__links{display:none} .sec{padding:54px 0} .hero{padding:44px 0 26px} } @media (max-width:620px){ .grid4{grid-template-columns:1fr} } @media (max-width:420px){ .wrap,.wrap--narrow{width:calc(100% - 28px)} .nav__cta{padding:8px 13px;font-size:12.5px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.js .rise{opacity:1;transform:none} .card:hover,.btn:hover,.wafab:hover{transform:none} }