:root { color-scheme: dark; --background:#101d2c; --text:#f3f5f6; --muted:#abb4bd; --accent:#cda873; --line:#3b4755; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:var(--background); color:var(--text); font-family:Tahoma,Arial,sans-serif; }
.layout { flex:1; width:min(1180px,100%); margin:auto; padding:64px 32px 48px; display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:96px; }
.intro { text-align:center; }
h1 { margin:0 0 18px; font:400 clamp(100px,10vw,144px)/1.2 "Traditional Arabic","Times New Roman",serif; }
.english { margin:0; font:400 clamp(36px,4vw,52px)/1.3 Georgia,"Times New Roman",serif; }
.divider { width:100px; height:3px; background:var(--accent); margin:36px auto 28px; }
.message { font:400 26px/1.6 "Traditional Arabic","Times New Roman",serif; margin:0; }
.intro-translation { font:400 16px/1.7 Georgia,serif; color:var(--muted); margin:8px 0 0; }
.request { border-inline-start:1px solid var(--line); padding-inline-start:44px; }
h2 { font-size:26px; line-height:1.5; margin:0 0 5px; font-weight:500; }
.subheading { font:400 18px/1.5 Georgia,serif; color:var(--muted); text-align:right; margin:0 0 20px; }
.preview-notice { border-inline-start:3px solid var(--accent); padding:10px 12px; margin:0 0 24px; color:#ead2aa; background:#182635; font-size:12px; line-height:1.8; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; min-width:0; }
.field-grid .field { margin-bottom:0; }
.field-grid { margin-bottom:18px; }
label { font-size:14px; line-height:1.6; }
label span { color:var(--accent); }
.translation { display:block; margin-top:4px; }
label .label-translation { display:block; font:400 12px/1.5 Tahoma,Arial,sans-serif; color:var(--muted); margin-top:3px; }
input,textarea { width:100%; border:1px solid #586574; border-radius:5px; background:#142333; color:var(--text); font:400 16px/1.6 Tahoma,Arial,sans-serif; padding:11px 12px; }
textarea { resize:vertical; min-height:120px; }
input:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:3px; border-color:var(--accent); }
small,.required-note { color:var(--muted); font-size:12px; line-height:1.6; }
.required-note { margin:0 0 16px; }
button,.return-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:64px; border:0; border-radius:5px; padding:13px 20px; background:var(--accent); color:#101d2c; font:600 17px/1.4 Tahoma,Arial,sans-serif; cursor:pointer; }
.button-english { font-size:12px; font-weight:400; }
button:hover,.return-link:hover { background:#dfbd89; }
button:focus-visible,.return-link:focus-visible { outline:2px solid var(--text); outline-offset:4px; }
button:disabled { cursor:not-allowed; opacity:.6; }
footer { padding:24px 24px 32px; text-align:center; color:var(--muted); font:20px/1.5 Georgia,serif; }
.confirmation { flex:1; display:grid; align-content:center; justify-items:center; text-align:center; padding:64px 24px; width:min(700px,100%); margin:auto; }
.confirmation h1 { font-size:72px; margin-bottom:18px; }
.confirmation .message { font:400 24px/1.9 Tahoma,Arial,sans-serif; }
.confirmation .english { font-size:36px; margin:0; }
.confirmation .message-translation { color:var(--muted); font:400 18px/1.8 Georgia,serif; margin:10px 0 0; }
.confirmation .preview-notice { width:100%; margin-top:32px; }
.return-link { width:auto; min-height:48px; margin-top:14px; text-decoration:none; font-size:14px; }
@media(max-width:850px) {
  .layout { grid-template-columns:1fr; gap:44px; padding:44px 24px 32px; max-width:620px; }
  .request { border-inline-start:0; border-top:1px solid var(--line); padding-inline-start:0; padding-top:32px; }
  h1 { font-size:100px; }
  .english { font-size:40px; }
  .divider { margin:26px auto 22px; }
  .message { font-size:25px; }
}
@media(max-width:480px) {
  .field-grid { grid-template-columns:1fr; gap:18px; }
  h2 { font-size:23px; }
  .confirmation h1 { font-size:60px; }
  .confirmation .message { font-size:21px; }
}


.honeypot { display:none; }