/* سبوت لايت — دعوات
   Brand: black & white only (حبر، فحم، رماد، فضة، ورق، ضوء).
   Arabic: GE SS Unique where installed, Readex Pro as the web fallback. Latin: Montserrat. */
:root{
  --ink:#0B0B0B; --coal:#1E1E1E; --ash:#6E6E6E; --silver:#BDBDBD; --line:#E4E4E2; --paper:#F5F5F3; --light:#FFFFFF;
  --f-ar:"GE SS Unique","GE SS Unique Light","Readex Pro",Tahoma,sans-serif;
  --f-lat:"Montserrat","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--light);color:var(--ink);font-family:var(--f-ar);font-weight:300;line-height:1.7;direction:rtl;padding-inline:16px;padding-block:0 48px}
.wrap{max-width:480px;margin:0 auto}
.wrap.wide{max-width:880px}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.lat{font-family:var(--f-lat)}

header.brand{text-align:center;padding-block:28px 20px;border-bottom:1px solid var(--line);margin-inline:-16px;margin-bottom:20px}
header.brand img{width:118px;height:auto;display:block;margin:0 auto}
header.brand .sub{font-family:var(--f-lat);font-weight:500;font-size:10px;letter-spacing:.42em;color:var(--ash);margin-top:10px}

.label{font-family:var(--f-lat);font-weight:500;font-size:11px;letter-spacing:.35em;color:var(--ash);text-transform:uppercase}
h1{font-weight:300;font-size:30px;line-height:1.3;margin:0;text-wrap:balance}
h2{font-weight:400;font-size:20px;margin:0 0 12px}
.muted{color:var(--ash)}
.small{font-size:13px}

.frame{position:relative;background:var(--paper);padding:30px 22px 22px;text-align:center;display:grid;gap:6px}
.frame::before,.frame::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--ink)}
.frame::before{top:10px;right:10px;border-left:0;border-bottom:0}
.frame::after{bottom:10px;left:10px;border-right:0;border-top:0}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:12px;border-top:1px solid var(--silver);padding-top:12px}
.meta div{font-size:12px;color:var(--ash)}
.meta b{display:block;color:var(--ink);font-weight:400;font-size:14px}

form{display:grid;gap:14px}
label{font-size:15px;display:block}
label input,label textarea,label select{display:block;margin-top:6px}
label small{color:var(--ash);font-size:13px}
input,textarea,select{font:300 16px var(--f-ar);border:1px solid var(--silver);border-radius:2px;padding:12px;background:var(--light);color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:#0B0B0B}
input.ltr{direction:ltr;text-align:left;font-family:var(--f-lat)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:400 16px var(--f-ar);padding:12px 18px;border-radius:999px;cursor:pointer;border:1px solid var(--ink);background:var(--light);color:var(--ink);text-decoration:none}
.btn.primary{background:var(--ink);color:var(--light)}
.btn.block{width:100%}
.btn.sm{font-size:13px;padding:6px 14px}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.err{font-size:14px;color:var(--ink);min-height:1.2em;text-decoration:underline;text-decoration-color:var(--silver)}
.notice{border:1px solid var(--ink);padding:16px;text-align:center}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{padding:16px 8px;text-align:center;background:var(--paper)}
.stat.lead{background:var(--ink);color:var(--light)}
.stat b{font-family:var(--f-lat);font-weight:500;font-size:28px;display:block;font-variant-numeric:tabular-nums;line-height:1.3}
.stat span{font-size:12px;color:var(--ash)}
.stat.lead span{color:var(--silver)}

.pill{font-size:12px;padding:2px 12px;border-radius:999px;border:1px solid var(--ink);white-space:nowrap}
.pill.yes{background:var(--ink);color:var(--light)}
.pill.no{color:var(--ash);border-color:var(--silver)}
.pill.in{background:var(--light);color:var(--ink)}

.tabs{display:flex;gap:4px;border:1px solid var(--ink);border-radius:999px;padding:4px;margin:16px 0}
.tabs button{flex:1;border:0;background:transparent;font:400 14px var(--f-ar);padding:7px 4px;border-radius:999px;cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--light)}

.beam{position:relative;overflow:hidden;background:var(--ink);color:var(--light)}
.beam::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#333 0%,rgba(30,30,30,0) 90%);clip-path:polygon(42% 0,58% 0,85% 100%,15% 100%);pointer-events:none}
.beam>*{position:relative}

.foot{margin-top:40px;text-align:center;font-family:var(--f-lat);font-size:10px;letter-spacing:.35em;color:var(--silver)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--silver);border-top-color:var(--ink);border-radius:50%;animation:sp 1s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}