:root { --brand:#0F4C5C; --brand-dark:#0B3A46; --brand-ink:#08303A; --ink:#151515; --muted:#707070; --line:#D8E0E3; --soft:#F5F8F9; --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:var(--brand); 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(--brand); 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 rgba(255,255,255,.32); border-bottom:1px solid rgba(255,255,255,.32); 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 rgba(255,255,255,.26); 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 rgba(255,255,255,.55); 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 var(--brand); color:var(--brand); 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:var(--brand); box-shadow:0 0 0 1px var(--brand); }
input[readonly] { background:#f3f3f3; color:#555; }
.amount-field { display:flex; direction:ltr; border:1px solid #cfcfcf; }
.amount-field:focus-within { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.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:var(--brand); }
.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:var(--brand); 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:var(--brand-dark); 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); } }
.gateway-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gateway-grid.single { grid-template-columns:1fr; }
.gateway-button { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:18px 46px 18px 18px; border:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; font-family:'Noto Sans Arabic','Inter',sans-serif; }
.gateway-button:hover:not(:disabled) { border-color:var(--brand); background:#fff; transform:translateY(-1px); }
.gateway-button:disabled { opacity:.6; cursor:wait; }
.gateway-button .gw-name { font:700 16px 'Inter','Noto Sans Arabic',sans-serif; letter-spacing:-.2px; }
.gateway-button .gw-sub { color:var(--muted); font-size:12px; }
.gateway-button .gw-go { position:absolute; top:50%; inset-inline-end:18px; transform:translateY(-50%); color:var(--brand); font-size:18px; line-height:1; }
.gateway-button.loading .gw-go { display:none; }
.gateway-button.loading::after { content:''; position:absolute; top:50%; inset-inline-end:18px; width:16px; height:16px; margin-top:-8px; border:2px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .75s linear infinite; }
.gw-empty { grid-column:1/-1; margin:0; padding:14px; border:1px dashed var(--line); color:var(--muted); font-size:13px; text-align:center; }
.gw-switch { grid-column:1/-1; margin:2px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.gw-switch a { color:var(--brand); font-weight:600; text-decoration:none; }
.gw-switch a:hover { text-decoration:underline; }
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} }