/* Full-page sign in / sign up. Identity: Palestinian tatreez, gold #D2AC67 + rose #BC6171, site fonts. */
@font-face{font-family:'Sukar';font-weight:400;src:url('/fonts/Sukar-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Sukar';font-weight:700;src:url('/fonts/Sukar-Bold.ttf') format('truetype');font-display:swap}

:root{
	--gold:#D2AC67;--gold-d:#b8924c;--gold-l:#f0dcae;
	--rose:#BC6171;--rose-d:#A5495A;--rose-dd:#7d2f3e;--rose-ddd:#561e2a;
	--teal:#86c6c6;
	--ink:#2b2420;--muted:#7a6f66;--line:#e7dccb;--cream:#fbf7ef;--paper:#fff;
	--err:#c0392b;--ok:#2e8b57;
	--shadow:0 20px 50px rgba(86,30,42,.18),0 4px 12px rgba(86,30,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Sukar','Segoe UI',Tahoma,Arial,sans-serif;background:var(--cream);color:var(--ink);direction:rtl;-webkit-font-smoothing:antialiased}
a{color:var(--rose-d);text-decoration:none}
a:hover{text-decoration:underline}
button,input{font:inherit}
[hidden]{display:none!important}

.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}

/* ---------------------------------------------------------------- brand side */
.hero{
	position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
	padding:44px 56px;color:#fff;overflow:hidden;isolation:isolate;
	background:
		linear-gradient(165deg,rgba(125,47,62,.93) 0%,rgba(86,30,42,.97) 100%),
		url('/images/bg.jpg') center/cover no-repeat;
}
.hero-pattern{
	position:absolute;inset:0;z-index:-1;opacity:.13;
	background:url('/images/header-bg-white.png') center/150px repeat;
	-webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.25) 55%,transparent 100%);
	mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.25) 55%,transparent 100%);
}
.hero::after{ /* gold edge towards the form */
	content:'';position:absolute;top:0;bottom:0;left:0;width:6px;
	background:linear-gradient(180deg,var(--gold-l),var(--gold),var(--gold-d));
}
.hero-logo{display:block;width:min(300px,70%)}
.hero-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.hero-body{max-width:520px}
.hero h1{font-family:'Aref Ruqaa',serif;font-weight:700;font-size:clamp(34px,4.2vw,54px);line-height:1.25;margin:0 0 14px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.hero .lead{font-size:18px;line-height:1.9;margin:0 0 26px;color:rgba(255,255,255,.9)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.perks li{display:flex;gap:14px;align-items:flex-start}
.perks .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--rose-ddd);background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 6px 16px rgba(0,0,0,.25)}
.perks b{display:block;font-size:17px;color:#fff}
.perks small{display:block;font-size:14px;line-height:1.7;color:rgba(255,255,255,.75)}
.hero-foot{font-family:'Aref Ruqaa',serif;font-size:19px;color:var(--gold-l);opacity:.95}

/* ---------------------------------------------------------------- form side */
.panel{
	position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;
	background:
		url('/images/header-bg-red.png') center/190px repeat,
		var(--cream);
	background-blend-mode:normal;
}
.panel::before{content:'';position:absolute;inset:0;background:rgba(251,247,239,.93);pointer-events:none}
.card{
	position:relative;width:100%;max-width:440px;background:var(--paper);border-radius:22px;padding:30px 32px 28px;
	box-shadow:var(--shadow);border:1px solid var(--line);
}
.card::before{ /* tatreez band */
	content:'';position:absolute;top:0;right:0;left:0;height:9px;border-radius:22px 22px 0 0;
	background:url('/images/header-bg-red.png') center/42px repeat-x, var(--rose);
	background-size:auto 100%;opacity:.95;
}
.back{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--muted);margin:4px 0 18px}
.back:hover{color:var(--rose-d);text-decoration:none}
.copy{position:relative;margin:18px 0 0;font-size:13px;color:var(--muted)}

/* tabs */
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#f4ecdd;border-radius:14px;padding:4px;margin-bottom:24px}
.tabs button{position:relative;z-index:1;border:0;background:none;padding:11px 8px;border-radius:11px;cursor:pointer;color:var(--muted);font-weight:700;font-size:16px;transition:color .25s}
.tabs button[aria-selected=true]{color:var(--rose-dd)}
.tabs .slider{position:absolute;z-index:0;top:4px;bottom:4px;width:calc(50% - 4px);right:4px;border-radius:11px;background:#fff;box-shadow:0 3px 10px rgba(86,30,42,.14);transition:transform .3s cubic-bezier(.4,.1,.2,1)}
body[data-mode=register] .tabs .slider{transform:translateX(calc(-100% - 0px))}

/* form */
.form h2,.done h2{font-family:'Aref Ruqaa',serif;font-weight:700;font-size:30px;margin:0 0 4px;color:var(--rose-dd)}
.muted{color:var(--muted)}
.sub{margin:0 0 20px;font-size:15px}
.field{display:block;margin-bottom:15px}
.lbl{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:#4a3f38}
.lbl small{font-weight:400;color:var(--muted);font-size:12.5px}
.ctl{position:relative;display:flex;align-items:center;background:#fffdf9;border:1.5px solid var(--line);border-radius:13px;transition:border-color .2s,box-shadow .2s,background .2s}
.ctl svg{position:absolute;right:13px;width:19px;height:19px;fill:var(--gold-d);opacity:.85;pointer-events:none}
.ctl input{flex:1;min-width:0;width:100%;border:0;background:none;padding:13px 44px 13px 44px;font-size:16px;color:var(--ink);border-radius:13px}
.ctl input::placeholder{color:#b8aca0;opacity:1}
.ctl:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(210,172,103,.22);background:#fff}
.field.bad .ctl{border-color:var(--err);box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.eye{position:absolute;left:8px;border:0;background:none;cursor:pointer;font-size:17px;padding:6px 8px;opacity:.55;border-radius:8px}
.eye:hover{opacity:1;background:rgba(0,0,0,.04)}
.eye.on{opacity:1}
.meter{display:flex;gap:5px;margin-top:8px}
.meter i{flex:1;height:5px;border-radius:9px;background:#eadfcc;transition:background .25s}
.meter[data-s="1"] i:nth-child(-n+1){background:#d9534f}
.meter[data-s="2"] i:nth-child(-n+2){background:#e0a030}
.meter[data-s="3"] i:nth-child(-n+3){background:#9bbf3a}
.meter[data-s="4"] i{background:var(--ok)}
.err{min-height:22px;margin:2px 0 10px;font-size:14px;color:var(--err);font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;border-radius:13px;padding:12px 22px;font-weight:700;font-size:16px;text-decoration:none!important;transition:transform .15s,box-shadow .2s,filter .2s}
.btn.big{width:100%;padding:15px 22px;font-size:18px}
.btn.primary{color:#fff;background:linear-gradient(135deg,var(--rose) 0%,var(--rose-d) 55%,var(--rose-dd) 100%);box-shadow:0 10px 22px rgba(165,73,90,.35)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(165,73,90,.42);filter:brightness(1.05)}
.btn.primary:active{transform:none}
.btn.ghost{background:none;border:1.5px solid var(--line);color:var(--muted);margin-top:10px}
.btn.ghost:hover{border-color:var(--rose);color:var(--rose-d)}
.btn:disabled{opacity:.7;cursor:progress;transform:none}
.spin{display:none;width:19px;height:19px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}
.loading .spin{display:inline-block}
.loading .t{opacity:.85}
@keyframes sp{to{transform:rotate(360deg)}}
.switch{text-align:center;margin:18px 0 0;font-size:15px;color:var(--muted)}
.switch a{font-weight:700}

/* logged-in + success */
.done{text-align:center;padding:6px 0 4px}
.avatar{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-family:'Aref Ruqaa',serif;font-size:40px;color:#fff;background:linear-gradient(135deg,var(--rose),var(--rose-dd));box-shadow:0 0 0 5px #fff,0 0 0 8px var(--gold),0 12px 26px rgba(125,47,62,.3)}
.badge{display:inline-block;margin-right:8px;padding:2px 12px;border-radius:99px;background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--rose-ddd);font-size:13px;font-weight:700}
.done .btn{width:100%;margin-top:14px}
.done .btn.ghost{margin-top:10px}
.check svg{width:84px;height:84px;margin:4px auto 10px;display:block}
.check circle{fill:none;stroke:var(--ok);stroke-width:3;stroke-dasharray:152;stroke-dashoffset:152;animation:dr .6s .1s ease forwards}
.check path{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:dr .4s .6s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}

.fade-in{animation:fi .35s ease both}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- tablet / phone */
@media (max-width:980px){
	.auth{grid-template-columns:1fr}
	.hero{padding:26px 24px 30px;gap:14px;min-height:0;align-items:center;text-align:center}
	.hero::after{top:auto;bottom:0;left:0;right:0;width:auto;height:5px;background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l))}
	.hero-logo{width:210px}
	.hero h1{font-size:30px;margin-bottom:6px}
	.hero .lead,.perks,.hero-foot{display:none}
	.hero .lead{display:block;font-size:15px;margin:0}
	.panel{padding:22px 14px 30px;margin-top:-18px;border-radius:24px 24px 0 0;position:relative;z-index:2}
	.panel::before{border-radius:24px 24px 0 0}
	.card{padding:26px 20px 22px}
}
@media (max-width:420px){
	.form h2,.done h2{font-size:26px}
	.ctl input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* no browser default focus ring: the field already glows gold via :focus-within */
.ctl input:focus,.ctl input:focus-visible{outline:none;box-shadow:none}
.tabs button:focus-visible,.btn:focus-visible,.eye:focus-visible,.back:focus-visible,a:focus-visible{outline:3px solid rgba(210,172,103,.55);outline-offset:2px}