/* Itmanni — black and white; grey only for quiet labels. Comfortaa for English, Amiri Bold for Arabic. */
:root{
  --black:#111111; --white:#FAFAF8; --grey:#6F6F6F; --grey-2:#BDBDB8; --line:#E4E4E0; --soft:#F0F0EC; --red:#9A3B2E;
  --en:'Comfortaa', Verdana, sans-serif; --ar:'Amiri', 'Times New Roman', serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--en);font-size:16px;line-height:1.55}
a{color:inherit}
img{max-width:100%;display:block}
.ar{font-family:var(--ar);font-weight:700;direction:rtl;unicode-bidi:isolate}
.pad{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.inner{max-width:1080px;margin:0 auto}

/* header */
.top{background:var(--black);color:var(--white);position:sticky;top:0;z-index:5}
.top .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img.chair{width:38px;height:38px;object-fit:contain;animation:hrock 4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes hrock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lock{display:flex;border:2px solid var(--white)}
.lock .en{background:var(--white);color:var(--black);font-family:var(--en);font-weight:700;letter-spacing:2px;font-size:15px;padding:5px 12px;display:flex;align-items:center}
.lock .ar{background:var(--black);color:var(--white);font-size:21px;line-height:1.5;padding:4px 14px 2px}
.nav{display:flex;align-items:center;gap:10px}
.nav a{white-space:nowrap;font-size:14px;text-decoration:none;padding:8px 14px;border:1.5px solid var(--white)}
.nav a.solid{background:var(--white);color:var(--black);font-weight:700}

/* buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--black);background:var(--white);color:var(--black);cursor:pointer;border-radius:0}
.btn.dark{background:var(--black);color:var(--white)}
.btn.on-dark{border-color:var(--white);background:var(--white);color:var(--black)}
.btn.ghost-dark{border-color:var(--white);background:transparent;color:var(--white)}
.btn .ar{font-size:19px;line-height:1}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--grey);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:wait}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
label .ar{font-size:17px;color:var(--grey)}
.lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
input[type=text],input[type=tel],input[type=password],input[type=url]{width:100%;font:inherit;font-size:18px;padding:12px 14px;border:2px solid var(--black);border-radius:0;background:var(--white);color:var(--black)}
input.code{font-size:30px;letter-spacing:10px;text-align:center;font-variant-numeric:tabular-nums}
.msg{min-height:1.5em;font-size:14px}
.msg.err{color:var(--red);font-weight:700}
.msg.ok{font-weight:700}
.muted{color:var(--grey)}
.card{border:2px solid var(--black);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.card h2{margin:0;font-size:20px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.card h2 .ar{font-size:22px}

/* footer */
.foot{background:var(--black);color:var(--grey-2);font-size:13px}
.foot .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px}
.foot .ar{font-size:16px}

@media (max-width:480px){.nav a .ar,.nav .dot{display:none}.lock .en{font-size:13px;padding:4px 8px}.lock .ar{font-size:18px;padding:4px 8px 2px}.brand{gap:8px}.brand img.chair{width:30px;height:30px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}