:root { --black:#070707; --ink:#151515; --muted:#707070; --line:#dedede; --soft:#f5f5f3; --danger:#b42318; }
* { box-sizing:border-box; }
html { background:var(--soft); }
body { margin:0; color:var(--ink); background:var(--soft); font-family:'Noto Sans Arabic','Inter',sans-serif; }
.site-header { height:82px; padding:0 max(28px,calc((100vw - 1180px)/2)); display:flex; direction:ltr; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.wordmark { color:#050505; text-decoration:none; font-family:'Inter',sans-serif; font-weight:800; font-size:21px; letter-spacing:-1px; }
.header-label,.eyebrow { font-family:'Inter',sans-serif; font-weight:600; font-size:10px; letter-spacing:2.2px; }
.header-label { color:#777; }
.page-shell { width:min(1180px,calc(100% - 40px)); margin:42px auto; display:grid; grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr); background:#fff; border:1px solid #d9d9d9; min-height:650px; }
.intro-panel { color:#fff; background:var(--black); padding:64px 52px 38px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { direction:ltr; text-align:left; color:#aaa; margin:0 0 30px; }
h1 { font-size:clamp(34px,4vw,58px); line-height:1.2; margin:0 0 24px; letter-spacing:-1.8px; }
.lead { color:#bdbdbd; line-height:2; font-size:15px; margin:0; max-width:460px; }
.order-summary { border-top:1px solid #333; border-bottom:1px solid #333; margin-top:70px; padding:16px 0; }
.summary-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0; color:#aaa; font-size:13px; }
.summary-row strong { color:#fff; font-weight:600; text-align:left; }
.summary-row.total { border-top:1px solid #272727; margin-top:5px; padding-top:20px; }
.summary-row.total strong { font-family:'Inter','Noto Sans Arabic',sans-serif; font-size:25px; }
.trust-note { color:#9b9b9b; font-size:11px; display:flex; align-items:center; gap:10px; margin-top:24px; }
.lock { width:24px; height:24px; border:1px solid #555; border-radius:50%; display:inline-grid; place-items:center; color:#fff; }
.payment-card { padding:58px 60px; }
.section-heading { display:flex; gap:18px; align-items:flex-start; margin-bottom:38px; }
.section-heading>span { direction:ltr; font:600 11px 'Inter',sans-serif; border:1px solid #111; border-radius:50%; width:31px; height:31px; display:grid; place-items:center; margin-top:2px; }
.section-heading h2 { margin:0 0 6px; font-size:24px; }
.section-heading p { margin:0; color:var(--muted); font-size:12px; }
form { display:grid; grid-template-columns:1fr 1fr; gap:21px 18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full,.consent,.error-message,.pay-button { grid-column:1/-1; }
label { font-size:12px; font-weight:600; }
input { width:100%; border:1px solid #cfcfcf; border-radius:0; background:#fff; color:#111; font:500 14px 'Noto Sans Arabic','Inter',sans-serif; padding:13px 14px; outline:none; transition:border-color .18s,box-shadow .18s; }
input:focus { border-color:#111; box-shadow:0 0 0 1px #111; }
input[readonly] { background:#f3f3f3; color:#555; }
.amount-field { display:flex; direction:ltr; border:1px solid #cfcfcf; }
.amount-field:focus-within { border-color:#111; box-shadow:0 0 0 1px #111; }
.amount-field input { border:0; box-shadow:none!important; font:700 17px 'Inter',sans-serif; }
.amount-field span { border-left:1px solid #ddd; min-width:66px; display:grid; place-items:center; color:#555; font:600 11px 'Inter',sans-serif; }
.consent { display:flex; align-items:flex-start; gap:10px; color:#555; font-weight:400; line-height:1.7; cursor:pointer; }
.consent input { width:16px; height:16px; margin-top:4px; accent-color:#050505; }
.error-message { display:none; color:var(--danger); background:#fff2f0; border:1px solid #f3c2bc; padding:11px 13px; font-size:12px; }
.error-message.visible { display:block; }
.pay-button { border:0; background:#050505; color:#fff; min-height:53px; padding:0 20px; display:flex; align-items:center; justify-content:center; gap:12px; font:700 14px 'Noto Sans Arabic','Inter',sans-serif; cursor:pointer; transition:background .18s,transform .18s; }
.pay-button:hover { background:#292929; transform:translateY(-1px); }
.pay-button:disabled { opacity:.65; cursor:wait; transform:none; }
.spinner { display:none; width:17px; height:17px; border:2px solid #777; border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; }
.pay-button.loading .spinner { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
footer { width:min(1180px,calc(100% - 40px)); margin:0 auto 35px; color:#777; direction:ltr; font:500 10px 'Inter',sans-serif; letter-spacing:.5px; }
footer span { margin:0 8px; }
@media(max-width:850px){ .page-shell{grid-template-columns:1fr;margin-top:20px}.intro-panel{padding:42px 28px 30px;min-height:430px}.order-summary{margin-top:45px}.payment-card{padding:40px 28px}.site-header{height:70px}.header-label{display:none} }
@media(max-width:520px){ .page-shell{width:100%;border-left:0;border-right:0;margin:0}.intro-panel{min-height:390px}h1{font-size:36px}.payment-card{padding:34px 20px}form{grid-template-columns:1fr}.field,.field.full,.consent,.error-message,.pay-button{grid-column:1}.site-header{padding:0 20px}footer{width:calc(100% - 40px);margin-top:24px} }