/* register.css — page styles of the STORY-005 public site, ported from design/005-register.html. */
/* Registration. The six required fields first (RegisterController: name, email,
   password + confirmation, phone, subdomain), the optional ones after. Beside the
   form, the clinic being created builds itself from what is typed. Submitting
   plays the five provisioning steps the real page already shows. */
main{padding-top:calc(var(--nav-h) + 44px);padding-bottom:80px}
.reg{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:start}
.reg h1{font-family:"Noto Kufi Arabic";font-weight:900;font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--pine);line-height:1.3}
.reg .sub{margin-top:8px;color:var(--mute)}
.free{display:inline-flex;gap:8px;align-items:center;margin-top:14px;background:var(--tint);color:var(--pine-2);border-radius:999px;padding:5px 14px;font-weight:700;font-size:.85rem}
.form{margin-top:26px}
/* password rules and the address check */
.rules{grid-column:1/-1;display:flex;gap:16px;padding:8px 14px 10px;font-size:.78rem;color:var(--mute);border-bottom:1px solid var(--paper-2);flex-wrap:wrap}
.rules span{display:flex;gap:6px;align-items:center;transition:color .2s ease}
.rules span i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;transition:background-color .2s ease,border-color .2s ease}
.rules span i svg{width:10px;height:10px;stroke-width:3.5;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .25s var(--ease)}
.rules span.ok{color:#0a6b50}
.rules span.ok i{background:#16a34a;border-color:#16a34a}
.rules span.ok i svg{opacity:1;transform:none}
.chk{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:.78rem;font-weight:700;white-space:nowrap}
.chk.wait{color:var(--mute)}
.chk.wait::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--pulse);animation:spin .7s linear infinite}
.chk.yes{color:#0a6b50}.chk.no{color:var(--rx)}
.chk:empty{display:none}
/* the dialling code: a menu button before the number; typing +966 or 00966
   into the number moves the code to that country */
.f .c.ltr .cc{flex:none;border-inline-end:1px solid var(--paper-2);background:var(--paper);gap:6px;font-weight:600;padding-inline:12px}
.f .c.ltr .cc svg{width:14px;height:14px}
.f .tel input{text-align:left}
@keyframes spin{to{transform:rotate(360deg)}}
/* logo drop */
.drop{flex:1;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;color:var(--mute);font-size:.88rem}
.drop .th{width:44px;height:44px;border-radius:12px;border:2px dashed var(--line2);display:grid;place-items:center;overflow:hidden;flex:none;background:var(--paper)}
.drop .th img{width:100%;height:100%;object-fit:cover}
.drop.has .th{border-style:solid;border-color:var(--pulse)}
.send small{color:var(--mute);font-size:.8rem;max-width:40ch}
.send small a{color:var(--pine-2);font-weight:600}
.btn--go[disabled]{opacity:.55;pointer-events:none}
.have{margin-top:16px;color:var(--mute);font-size:.92rem}
.have a{color:var(--pine-2);font-weight:700}

/* ── the clinic preview ── */
.pv{position:sticky;top:calc(var(--nav-h) + 30px)}
.pv__lbl{font-size:.82rem;color:var(--mute);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pv__lbl i{width:8px;height:8px;border-radius:50%;background:var(--pulse);position:relative}
.pv__lbl i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pulse);animation:ping 1.6s ease-out infinite}
@keyframes ping{to{transform:scale(3);opacity:0}}
.win{background:var(--card);border-radius:20px;box-shadow:0 40px 80px -44px color-mix(in srgb,var(--pine) 55%,transparent),0 1px 0 var(--paper-2);overflow:hidden}
.win__top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--paper-2)}
.win__top i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.win__addr{flex:1;background:var(--card);border-radius:8px;padding:5px 10px;font-size:.8rem;direction:ltr;text-align:center;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__addr b{color:var(--pulse)}
.win__addr b.bump{display:inline-block;animation:bump .25s var(--ease)}
@keyframes bump{from{transform:translateY(-4px);opacity:.3}}
.cl{padding:22px;display:grid;gap:16px}
.cl__h{display:flex;gap:14px;align-items:center}
.cl__logo{width:56px;height:56px;border-radius:16px;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:"Noto Kufi Arabic";font-weight:900;font-size:1.3rem;overflow:hidden;flex:none;transition:transform .3s var(--ease)}
.cl__logo img{width:100%;height:100%;object-fit:cover}
.cl__h b{display:block;font-family:"Noto Kufi Arabic";font-size:1.12rem;color:var(--ink);line-height:1.4;min-height:1.4em}
.cl__h b.ph{color:var(--line2)}
.cl__h small{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{font-size:.74rem;font-weight:700;border-radius:8px;padding:2px 9px;background:var(--paper);color:var(--mute)}
.chip.sp{background:color-mix(in srgb,var(--c,var(--pulse)) 14%,var(--card));color:var(--c,var(--pine-2))}
.sk{display:grid;gap:8px}
.sk i{height:10px;border-radius:5px;background:var(--paper)}
.sk i:nth-child(2){width:80%}.sk i:nth-child(3){width:60%}
.inc{border-top:1px dashed var(--paper-2);padding-top:14px;display:grid;gap:8px;font-size:.88rem;color:var(--mute)}
.inc div{display:flex;gap:10px;align-items:center}
.inc svg{width:18px;height:18px;color:var(--pulse)}
.pv__plan{margin-top:14px;background:var(--tint);border-radius:16px;padding:14px 16px;font-size:.88rem;color:var(--pine-2);display:flex;justify-content:space-between;gap:10px}
.pv__plan b{font-family:"Noto Kufi Arabic"}

/* ── provisioning: what happens after «إنشاء الحساب» ── */
.prov{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.prov.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.prov__c{width:min(520px,100%);background:var(--card);border-radius:24px;padding:30px;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--pine) 60%,transparent);transform:translateY(16px) scale(.98);transition:transform .45s var(--ease)}
.prov.on .prov__c{transform:none}
.ring{width:74px;height:74px;margin-bottom:16px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--paper-2)}
.ring .fg{stroke:var(--pulse);stroke-linecap:round;transition:stroke-dashoffset .5s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Noto Kufi Arabic";color:var(--pine);direction:ltr}
.prov h2{font-family:"Noto Kufi Arabic";color:var(--pine);font-size:1.35rem}
.prov p{color:var(--mute);margin-top:6px;font-size:.92rem}
.pst{margin-top:18px;display:grid;gap:4px}
.pst div{display:flex;gap:12px;align-items:center;padding:8px 0;color:var(--line2);font-size:.92rem;transition:color .3s ease}
.pst div i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none;transition:all .3s ease}
.pst div i svg{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0}
.pst div.run{color:var(--ink)}
.pst div.run i{border-color:var(--pulse);border-top-color:transparent;animation:spin .7s linear infinite}
.pst div.ok{color:var(--mute)}
.pst div.ok i{background:var(--pulse);border-color:var(--pulse)}
.pst div.ok i svg{opacity:1}
.done{display:none;text-align:center}
.prov.fin .work{display:none}
.prov.fin .done{display:block;animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.done .tick{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--pulse);color:#fff;display:grid;place-items:center}
.done .tick svg{width:36px;height:36px;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done .url{margin:16px auto 0;display:inline-flex;gap:8px;align-items:center;background:var(--paper);border-radius:12px;padding:10px 14px;direction:ltr;font-weight:700}
.done .url b{color:var(--pulse)}
.done .acts{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.calm *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}

@media (max-width:960px){
  .reg{grid-template-columns:1fr}
  .pv{position:static;order:-1}
  .pv .cl .sk,.pv .inc,.pv__plan{display:none}
}
/* phone: one page, the whole form; the label cell sits beside its field */
@media (max-width:640px){
  main{padding-top:84px}
  .pv{display:none}
  .send .btn{width:100%;justify-content:center}
  /* the submit stays at the foot of the screen while the form scrolls under it */
  .send{position:sticky;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--paper-2);border-radius:0 0 22px 22px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -12px 24px -18px rgb(16 24 32 / .4)}
  /* while typing the keyboard shrinks the screen and the bar would sit over the field: it drops back to the form's end */
  .form:has(input:focus,textarea:focus) .send{position:static;box-shadow:none}
  .send small{order:2;max-width:none;text-align:center;width:100%;font-size:.74rem}
  /* the address cell is narrow here: smaller suffix, the check shows its mark only */
  [data-f=sub] .suffix{font-size:.74rem;padding:0 6px}
  [data-f=sub] input{padding-inline:8px}
  .chk{padding:0 8px}
  .chk span{display:none}
}
/* the suggestion offered when the address is taken */
.err .try{border:0;background:var(--tint);color:var(--pine-2);font:inherit;font-weight:700;font-size:.78rem;border-radius:999px;padding:2px 10px;margin-inline-start:6px;cursor:pointer;direction:ltr}
#go[disabled]{opacity:.7;pointer-events:none}