/* Sign-up request page — Dhivehi, RTL, one question at a time. Tokens come from site.css. */
html[dir="rtl"] body{font-family:var(--font-th);line-height:1.9}
html[dir="rtl"] .site-head,html[dir="rtl"] .site-foot{font-family:var(--font-body);line-height:1.6}
.signup-main{max-width:640px;margin:0 auto;padding:var(--s-5) var(--s-5) var(--s-9)}
.signup-head{text-align:center;margin-bottom:var(--s-4)}
.signup-head h1{font-family:var(--font-th-head);font-weight:400;font-size:var(--fs-2xl);line-height:1.5;letter-spacing:0}
.signup-head .en{font-family:var(--font-body);font-size:var(--fs-sm);direction:ltr;unicode-bidi:isolate;margin-top:var(--s-2);color:var(--text-dim)}

/* progress */
.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 auto var(--s-5);padding:0 4px;list-style:none;max-width:520px}
.progress li{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:var(--fs-sm);color:var(--text-dim)}
.progress li span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress li i{width:100%;height:5px;border-radius:3px;background:var(--line);transition:background-color .3s}
.progress li.p-done i{background:var(--green)}
.progress li.p-cur i{background:var(--sky-deep)}
.progress li.p-cur{color:var(--text)}
.progress[hidden]{display:none}

/* steps */
.step{display:none;padding:var(--s-5);margin-bottom:var(--s-4);overflow:visible}
.step.active{display:block;animation:stepIn .28s var(--ease-out)}
/* page is RTL: the next step arrives from the left, going back arrives from the right */
[data-dir="back"] .step.active{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step.active{animation:none}}
.step::before{display:none}
.step h2{font-family:var(--font-th-head);font-weight:400;font-size:var(--fs-xl);line-height:1.5;letter-spacing:0;display:flex;align-items:center;gap:12px}
.step h2 .n{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--sky-fill);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;
}
.step .hint{color:var(--text-dim);font-size:var(--fs-md);margin:4px 0 var(--s-4)}
.step-err{display:none;margin-top:var(--s-3);padding:10px 14px;border-radius:var(--r-m);background:#fdecee;color:#9b1c2e;border:1px solid #f5c2c9;font-size:var(--fs-md)}
.step-err.show{display:block;animation:nudge .32s var(--ease-out)}
@keyframes nudge{0%{opacity:0;transform:translateX(0)}20%{opacity:1;transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}

/* step footer */
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.step-nav .nav-right{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;justify-content:flex-end}
.btn.th{font-family:var(--font-th-head);font-weight:400;font-size:var(--fs-lg);padding:14px 26px;gap:12px}
.btn.next svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
/* not ready yet: looks quieter but still answers a tap with the reason */
.btn.next[aria-disabled="true"]{opacity:.6;box-shadow:none}
.btn.next[aria-disabled="true"]:hover{transform:none}
.back,.skip-link{color:var(--text-dim);font-size:var(--fs-md);padding:10px 6px;text-decoration:underline;text-underline-offset:4px}
.back:hover,.skip-link:hover{color:var(--text)}

/* inputs */
.field{position:relative}
.input{
  width:100%;font:inherit;font-size:var(--fs-lg);padding:14px 16px;border-radius:var(--r-m);
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.input:focus{outline:none;border-color:var(--sky-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky-deep) 45%,transparent)}
.input[aria-invalid="true"]{border-color:#c4364b}
.input.ltr{direction:ltr;text-align:left;font-family:var(--font-body)}
.input::placeholder{color:#a3afbd}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

/* vessel suggestions */
.suggest{
  margin-top:8px;max-height:min(50vh,360px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1);display:none;
}
.suggest.open{display:block}
.suggest button{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;
  text-align:start;direction:ltr;font-family:var(--font-body);font-size:var(--fs-md);border-bottom:1px solid var(--line);
}
.suggest button:last-child{border-bottom:0}
.suggest button:hover,.suggest button.hi{background:var(--sky-soft)}
.suggest button small{color:var(--text-dim);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.reg-chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:999px;
  background:var(--sky-soft);color:var(--sky-ink);font-family:var(--font-body);font-size:var(--fs-sm);direction:ltr;
}
.reg-chip:empty{display:none}

/* atoll / island chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.atoll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.chip-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--text);
  font-size:var(--fs-md);transition:border-color .15s,background-color .15s,color .15s,transform .1s;position:relative;
}
.chip-btn:active{transform:scale(.97)}
.atoll-grid .chip-btn{flex-direction:column;gap:2px;padding:12px 6px;border-radius:var(--r-m)}
.chip-btn .th-l{font-family:var(--font-th-head);font-size:1.5rem;line-height:1.4}
.chip-btn .lat{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--text-dim);direction:ltr}
.chip-btn.on{border-color:var(--sky-fill);background:var(--sky-fill);color:#fff}
.chip-btn.on .lat{color:rgba(255,255,255,.8)}
.chip-btn.sel{border-color:var(--green);background:#e5f7ee;color:var(--green-ink)}
.chip-btn.sel .lat{color:var(--green-ink)}
.chip-btn .cnt{
  position:absolute;top:-8px;inset-inline-start:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--green-ink);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;
}
#islandChips .chip-btn{font-family:var(--font-body);direction:ltr;font-size:var(--fs-sm)}
.island-search{margin-bottom:var(--s-3)}

.atoll-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-2)}
.back-arrow{width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.back-arrow svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.atoll-title{display:flex;align-items:baseline;gap:10px;color:var(--text-dim);font-size:var(--fs-md)}
.atoll-title b{font-family:var(--font-th-head);font-weight:400;font-size:var(--fs-2xl);color:var(--text);line-height:1.3}
.atoll-foot{position:sticky;bottom:0;background:var(--surface);margin:var(--s-4) calc(var(--s-5) * -1) calc(var(--s-5) * -1);padding:0 var(--s-5) var(--s-5);border-radius:0 0 var(--r-l) var(--r-l)}
.atoll-foot .step-nav{margin-top:var(--s-3)}

.picked-wrap{margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--sky-soft)}
.picked-title{color:var(--sky-ink);font-size:var(--fs-sm);margin-bottom:6px}
.picked{display:flex;flex-wrap:wrap;gap:8px}
.picked:empty{display:none}
.picked.mini{padding-top:var(--s-3)}
.picked .pk{
  display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--green-ink);color:#fff;font-family:var(--font-body);font-size:var(--fs-sm);direction:ltr;
}
.picked .pk button{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.picked .pk button:hover{background:rgba(255,255,255,.45)}

/* file */
.drop{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-m);cursor:pointer;position:relative;
  border:1.5px dashed var(--line-strong);background:var(--surface-2);transition:border-color .2s,background-color .2s;
}
.drop:hover,.drop:focus-within{border-color:var(--sky-deep);background:var(--sky-soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .ic{flex:none;width:48px;height:48px;border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--sky-deep);box-shadow:var(--shadow-1)}
.drop .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop .txt{flex:1;min-width:0}
.drop .txt b{display:block;font-weight:400;font-size:var(--fs-lg)}
.drop .txt span{color:var(--text-dim);font-size:var(--fs-sm)}
.drop img{width:48px;height:48px;object-fit:cover;border-radius:10px;flex:none;display:none}
.drop.has img{display:block}
.drop.has .ic{display:none}
.drop .rm{display:none;flex:none;color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-sm);text-decoration:underline}
.drop.has .rm{display:inline}

/* review */
.review{margin:0 0 var(--s-2);display:grid;grid-template-columns:1fr;gap:0}
.review .row{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px 0;border-bottom:1px solid var(--line)}
.review .row:last-child{border-bottom:0}
.review dt{flex:0 0 96px;color:var(--text-dim);font-size:var(--fs-sm);padding-top:3px}
.review dd{flex:1;margin:0;font-size:var(--fs-lg);text-align:start}
.review dd .ltr{direction:ltr;unicode-bidi:isolate;font-family:var(--font-body);font-size:var(--fs-md)}
.review dd .sub{display:block;color:var(--text-dim);font-size:var(--fs-sm)}
.review dd img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.review .edit{flex:none;color:var(--sky-ink);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:4px;padding:4px 0}

/* submit / done */
.err{display:none;margin-top:var(--s-3);padding:12px 16px;border-radius:var(--r-m);background:#fdecee;color:#9b1c2e;border:1px solid #f5c2c9;font-size:var(--fs-md)}
.err.show{display:block}
.err .err-msg{display:block}
.err .btn{margin-top:var(--s-3)}
.note .num-link{color:var(--sky-ink);font-family:var(--font-body);white-space:nowrap;unicode-bidi:isolate;text-underline-offset:3px}
.note{color:var(--text-dim);font-size:var(--fs-sm);text-align:center;margin-top:var(--s-4)}
.done{text-align:center;padding:var(--s-7) var(--s-5)}
.done .ok{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--s-4)}
.done .ok svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done h2{font-family:var(--font-th-head);font-weight:400;font-size:var(--fs-2xl);line-height:1.5}
.done p{color:var(--text-dim);font-size:var(--fs-lg);margin:var(--s-3) 0 var(--s-5)}
.spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:none}
.btn.busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:640px){body{padding-bottom:0}}  /* no sticky CTA on this page */
@media (max-width:520px){
  .two{grid-template-columns:1fr}
  .step{padding:var(--s-4)}
  .atoll-foot{margin:var(--s-4) calc(var(--s-4) * -1) calc(var(--s-4) * -1);padding:0 var(--s-4) var(--s-4)}
  .progress li span{font-size:.72rem}
  .step-nav{flex-direction:column-reverse;align-items:stretch;gap:var(--s-2)}
  .step-nav .btn.next{width:100%;justify-content:center}
  .step-nav .back,.step-nav .skip-link{align-self:center}
  .step-nav .nav-right{flex-direction:column-reverse;align-items:stretch;gap:var(--s-2)}
  .step-nav>span:empty{display:none}
  .review dt{flex-basis:76px}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .err,:root:not([data-theme="light"]) .step-err{background:#3a1a20;color:#ffb3bd;border-color:#5a2730}
  :root:not([data-theme="light"]) .chip-btn.sel{background:#173326;color:#8fe0b4}
  :root:not([data-theme="light"]) .chip-btn.sel .lat{color:#8fe0b4}
}