@font-face{ font-family:"Plex Arabic"; font-weight:400; font-display:swap; src:url(ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face{ font-family:"Plex Arabic"; font-weight:400; font-display:swap; src:url(ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF; }
:root{ --maroon:#5B0F1A; --maroon2:#7A1522; --gold:#C9A24A; --goldSoft:#F3E7C8; --bg:#FBF7F0; --card:#FFFFFF; --ink:#2A1A14; --mut:#7A6A60; --line:#E6DccF; --red:#A33B2E; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:"Plex Arabic",Tahoma,Arial,sans-serif; font-size:16px; line-height:1.6; }
.wrap{ max-width:460px; margin:0 auto; padding:24px 16px 40px; }
.brand{ text-align:center; margin:8px 0 18px; }
.brand .logo{ font-size:30px; font-weight:700; color:var(--maroon); letter-spacing:.5px; }
.brand .sub{ font-size:12px; letter-spacing:6px; color:var(--gold); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 18px; box-shadow:0 6px 24px rgba(91,15,26,.07); }
h1{ margin:0 0 4px; font-size:22px; color:var(--maroon); }
.lead{ margin:0 0 14px; color:var(--mut); font-size:14.5px; }
label{ display:block; margin:12px 0 5px; font-weight:700; font-size:14.5px; }
label b{ color:var(--red); }
.muted{ color:var(--mut); font-weight:400; font-size:13px; }
input, select, textarea{ width:100%; font:inherit; color:inherit; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; outline:none; }
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--goldSoft); }
input[dir="ltr"]{ text-align:right; }
.row{ display:flex; gap:10px; }
.row select{ flex:1 1 0; }
.hp{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.err{ min-height:0; margin-top:12px; color:var(--red); font-size:14px; font-weight:700; }
.err:empty{ display:none; }
button{ width:100%; margin-top:16px; font:inherit; font-size:17px; font-weight:700; color:#fff; background:var(--maroon); border:0; border-radius:14px; padding:13px; cursor:pointer; }
button:hover{ background:var(--maroon2); }
button:disabled{ opacity:.6; cursor:default; }
.note{ margin:12px 0 0; text-align:center; color:var(--mut); font-size:12.5px; }
.done{ text-align:center; padding:34px 18px; }
.done .tick{ width:64px; height:64px; margin:0 auto 10px; border-radius:50%; background:var(--goldSoft); color:var(--maroon); font-size:34px; line-height:64px; font-weight:700; }
.done p{ margin:6px 0 0; color:var(--mut); }
.hidden{ display:none; }
.bad{ border-color:var(--red) !important; }
#f{ position:relative; }
h2.sec{ margin:18px 0 2px; font-size:16px; color:var(--maroon); border-bottom:1px solid var(--line); padding-bottom:4px; }
h2.sec:first-child{ margin-top:4px; }
.phoneRow select{ flex:0 0 118px; }
.phoneRow input{ flex:1 1 auto; text-align:left; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mt{ margin-top:8px; }