/* Badr Academy Education – registration wizard (brief §20). Loaded on the registration page only. */
.ds-reg{padding-block:var(--ds-10)}
.ds-reg__grid{display:grid;gap:var(--ds-8);align-items:start}
@media (min-width:1000px){.ds-reg__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}}
.ds-reg__panel{display:none}
@media (min-width:1000px){.ds-reg__panel{display:block;position:sticky;inset-block-start:calc(var(--ds-header-h) + 16px)}}
.ds-reg__panel-inner{position:relative;border-radius:var(--ds-r-xl);overflow:hidden;box-shadow:var(--ds-shadow-lg);aspect-ratio:3/4;background:var(--ds-navy-900)}
.ds-reg__panel-inner>img,.ds-reg__panel-inner>picture>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.ds-reg__panel-text{position:absolute;inset:auto 0 0 0;padding:var(--ds-6);color:#fff;background:linear-gradient(to top,rgba(6,19,48,.95),rgba(6,19,48,.65) 60%,transparent)}
.ds-reg__mark{inline-size:48px;block-size:48px;margin-block-end:var(--ds-2)}
.ds-reg__name{font-size:var(--ds-fs-xl);font-weight:700;margin:0}
.ds-reg__tag{color:var(--ds-cyan-300);font-weight:700;margin:0 0 var(--ds-3)}
.ds-reg__why{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--ds-fs-sm)}
.ds-reg__why li{display:flex;gap:8px;align-items:flex-start}
.ds-reg__why .ds-icon{color:var(--ds-cyan-300);flex:none;margin-block-start:3px}
.ds-reg__demo{position:absolute;inset-block-start:-2.2rem;inset-inline-start:var(--ds-4);font-size:var(--ds-fs-xs);background:rgba(6,19,48,.7);padding:.2rem .6rem;border-radius:var(--ds-r-pill)}
.ds-reg__main{min-inline-size:0;padding:var(--ds-6);border:1px solid var(--ds-line);border-radius:var(--ds-r-xl);background:var(--ds-surface);box-shadow:var(--ds-shadow-sm)}
@media (max-width:560px){.ds-reg__main{padding:var(--ds-4)}}
/* step indicator */
.ds-steps-bar{list-style:none;margin:var(--ds-5) 0 var(--ds-6);padding:0;display:flex;gap:var(--ds-3)}
.ds-steps-bar li{flex:1;display:flex;align-items:center;gap:var(--ds-2);padding:var(--ds-3);border-radius:var(--ds-r);background:var(--ds-surface-2);color:var(--ds-text-muted);font-weight:700;font-size:var(--ds-fs-sm);border:2px solid transparent}
.ds-steps-bar li span{display:inline-grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--ds-surface-3);color:var(--ds-ink-700);flex:none}
.ds-steps-bar li.is-current{border-color:var(--ds-strong);color:var(--ds-strong);background:var(--ds-surface)}
.ds-steps-bar li.is-current span{background:var(--ds-navy-900);color:#fff}
.ds-steps-bar li.is-done span{background:var(--ds-success);color:#fff}
.ds-reg__form:not(.is-wizard) .ds-reg__step+.ds-reg__step{margin-block-start:var(--ds-10);padding-block-start:var(--ds-8);border-block-start:1px solid var(--ds-line)}
.ds-reg__step{border:0;margin:0;padding:0;display:grid;gap:var(--ds-4);min-inline-size:0}
.ds-reg__nav{display:flex;justify-content:space-between;gap:var(--ds-3);flex-wrap:wrap;margin-block-start:var(--ds-4)}
.ds-reg__nav [data-next]{margin-inline-start:auto}
.ds-reg__form:not(.is-wizard) [data-next],.ds-reg__form:not(.is-wizard) [data-prev]{display:none}
.ds-hint{display:block;font-size:var(--ds-fs-xs);color:var(--ds-text-soft);margin-block-start:4px}
/* password */
.ds-pass{position:relative}
.ds-pass .ds-input{padding-inline-end:48px}
.ds-pass__eye{position:absolute;inset-block:0;inset-inline-end:4px;inline-size:40px;border:0;background:none;color:var(--ds-ink-600);cursor:pointer;display:grid;place-items:center}
.ds-rules{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));font-size:var(--ds-fs-sm)}
.ds-rules li{display:flex;align-items:center;gap:8px;color:var(--ds-danger)}
.ds-rules li::before{content:"✕";display:inline-grid;place-items:center;inline-size:20px;block-size:20px;border-radius:50%;background:var(--ds-danger-bg);font-size:11px;font-weight:700;flex:none}
.ds-rules li[data-optional]{color:var(--ds-text-soft)}
.ds-rules li[data-optional]::before{content:"•";background:var(--ds-surface-3)}
.ds-rules li.is-ok{color:var(--ds-success)}
/* neutral until the person types (X-50): a grey checklist, not a list of errors */
.ds-rules:not(.is-live) li:not(.is-ok){color:var(--ds-text-soft)}
.ds-rules:not(.is-live) li:not(.is-ok)::before{content:"•";background:var(--ds-surface-3)}
.ds-rules li.is-ok::before{content:"✓";background:var(--ds-success-bg)}
.ds-note--warn{background:var(--ds-warning-bg);color:var(--ds-warning)}
/* avatars */
.ds-avatars,.ds-types,.ds-choice{border:0;margin:0;padding:0;min-inline-size:0}
.ds-avatars legend,.ds-types legend,.ds-choice legend{font-weight:700;margin-block-end:var(--ds-2);padding:0}
.ds-avatars__row{display:flex;gap:var(--ds-4);align-items:center;margin-block-end:var(--ds-3)}
.ds-avatars__preview img{inline-size:96px;block-size:96px;border-radius:50%;object-fit:cover;border:3px solid var(--ds-cyan-400);background:var(--ds-navy-50)}
.ds-avatars__upload{cursor:pointer}
.ds-avatars__grid{display:flex;flex-wrap:wrap;gap:var(--ds-2)}
.ds-avatars__opt{position:relative;cursor:pointer}
.ds-avatars__opt input{position:absolute;opacity:0;inset:0}
.ds-avatars__opt img,.ds-avatars__opt span{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:50%;border:3px solid transparent;background:var(--ds-navy-50);font-size:var(--ds-fs-xs);font-weight:700}
.ds-avatars__opt input:checked+img,.ds-avatars__opt input:checked+span{border-color:var(--ds-strong);box-shadow:0 0 0 2px #fff inset}
.ds-avatars__opt input:focus-visible+img,.ds-avatars__opt input:focus-visible+span{outline:3px solid var(--ds-focus);outline-offset:2px}
.ds-crop{display:flex;justify-content:center}
.ds-crop canvas{inline-size:min(100%,320px,max(160px,calc(100dvh - 300px)));block-size:auto;aspect-ratio:1;border-radius:var(--ds-r);touch-action:none;cursor:grab;background:var(--ds-navy-50)}
/* EDITES v4 STU-01: the crop window never scrolls inside itself – the canvas shrinks with the viewport height instead,
   so the hint, the zoom slider and both buttons always fit (the modal body's generic max-height + overflow caused it). */
#ds-crop{inline-size:min(92vw,420px)}
#ds-crop[open]{max-block-size:calc(100dvh - 16px)}
#ds-crop .ds-modal__body{overflow:visible;max-block-size:none;padding-block:var(--ds-4)}
#ds-crop .ds-field.ds-mt-4,#ds-crop .ds-row.ds-mt-4{margin-block-start:var(--ds-3)}
/* account type */
.ds-types__grid{display:grid;gap:var(--ds-2);grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))}
.ds-types__opt{position:relative;cursor:pointer}
.ds-types__opt input{position:absolute;opacity:0;inset:0}
.ds-types__opt span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--ds-4) var(--ds-2);border:2px solid var(--ds-line);border-radius:var(--ds-r-lg);text-align:center;transition:border-color var(--ds-t),background var(--ds-t)}
.ds-types__opt .ds-icon{inline-size:28px;block-size:28px;color:var(--ds-accent-ink)}
.ds-types__opt input:checked+span{border-color:var(--ds-strong);background:var(--ds-navy-50)}
.ds-types__opt input:focus-visible+span{outline:3px solid var(--ds-focus);outline-offset:2px}
.ds-choice{display:flex;flex-wrap:wrap;gap:var(--ds-2) var(--ds-5)}
.ds-choice legend{inline-size:100%}
.ds-choice label{display:inline-flex;align-items:center;gap:6px;min-block-size:32px}
.ds-choice label:has(input:disabled){color:var(--ds-text-soft)}
.ds-reg__terms{align-items:flex-start}
.ds-field.is-invalid .ds-input,.ds-field.is-invalid .ds-select{border-color:var(--ds-danger)}