/* ==========================================================
   Harborlight Trust — Register Page Specific Styles
   ========================================================== */

/* ---------- Form Card (wider for multi-step) ---------- */
.form-card { max-width:520px; max-height:100vh; overflow-y:auto; padding-right:8px; }
.form-card::-webkit-scrollbar { width:4px; }
.form-card::-webkit-scrollbar-track { background:transparent; }
.form-card::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ---------- Step Indicator ---------- */
.step-indicator { display:flex; gap:8px; justify-content:center; margin-bottom:28px; }
.step-dot {
    width:10px; height:10px; border-radius:50%;
    background:var(--border); transition:all .3s; cursor:pointer;
}
.step-dot.active { background:var(--brand-teal); box-shadow:0 0 8px rgba(2,124,104,0.25); }
.step-dot.done { background:var(--brand-blue); }

.step-title { font-size:15px; font-weight:600; color:var(--muted); margin-bottom:20px; text-align:center; }
.step-title span { color:var(--brand-teal); }

/* ---------- Form Rows ---------- */
.form-row { display:flex; gap:16px; }
.form-row .input-group { flex:1; }

/* ---------- Inputs with Labels ---------- */
.input-group label {
    display:block; font-size:13px; font-weight:500;
    color:var(--muted); margin-bottom:6px;
}
.input-wrap input,
.input-wrap select { padding:12px 14px 12px 40px; font-size:14px; border-radius:10px; }
.input-wrap select {
    padding-right:36px; cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
}
.input-wrap select option { background:#FFF; color:var(--text); }

/* ---------- Field Errors ---------- */
.field-error { font-size:12px; color:var(--danger); display:none; margin-bottom:8px; }

/* ---------- Photo Upload ---------- */
.photo-upload { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.photo-upload .avatar {
    width:56px; height:56px; border-radius:50%; object-fit:cover;
    background:var(--bg); border:2px dashed var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#94a3b8; overflow:hidden; flex-shrink:0;
}
.photo-upload .avatar img { width:100%; height:100%; object-fit:cover; }
.photo-upload .upload-btn {
    padding:10px 20px; font-size:13px; font-weight:600; font-family:'Inter',sans-serif;
    background:rgba(2,124,104,0.10); color:var(--brand-teal);
    border:1.5px solid rgba(2,124,104,0.2); border-radius:8px; cursor:pointer; transition:all .2s;
}
.photo-upload .upload-btn:hover { background:rgba(2,124,104,0.18); }
.photo-upload .file-name { font-size:12px; color:var(--muted); }
#photoInput { display:none; }

/* ---------- Step Footer Buttons ---------- */
.step-footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:12px; }
.step-footer .btn {
    padding:12px 28px; font-size:14px; font-weight:600;
    font-family:'Inter',sans-serif; border-radius:10px;
    cursor:pointer; transition:all .2s; border:none;
}
.step-footer .btn-prev { background:var(--bg); color:var(--muted); }
.step-footer .btn-prev:hover { background:var(--border); color:var(--text); }
.step-footer .btn-next,
.step-footer .btn-submit {
    background:linear-gradient(135deg,var(--brand-teal),var(--brand-blue)); color:#FFF;
}
.step-footer .btn-next:hover,
.step-footer .btn-submit:hover {
    transform:translateY(-1px); box-shadow:0 6px 20px rgba(2,124,104,0.25);
}
.step-footer .btn-next:disabled,
.step-footer .btn-submit:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.step-footer .btn-submit i { margin-left:6px; font-size:13px; }

/* ---------- Steps ---------- */
.step { display:none; }
.step.active { display:block; }

/* ---------- Login Link ---------- */
.login-link { text-align:center; margin-top:16px; }
.login-link a { color:var(--muted); text-decoration:none; font-size:13px; transition:color .2s; }
.login-link a:hover { color:var(--brand-teal); }
.login-link a i { margin-right:4px; }

/* ---------- Global Message ---------- */
#globalMsg {
    display:none; padding:10px 14px; border-radius:10px;
    font-size:13px; margin-bottom:16px; line-height:1.5; text-align:center;
}
#globalMsg.error {
    display:block; background:rgba(239,68,68,0.1);
    border:1px solid rgba(239,68,68,0.2); color:var(--danger);
}

/* ---------- Responsive ---------- */
@media (max-width:900px) {
    html, body { overflow-y:auto; }
    .split-layout { flex-direction:column; height:auto; min-height:100vh; }
    .form-panel { padding:32px 20px; justify-content:flex-start; min-height:100vh; }
    .form-card { max-height:none; overflow-y:visible; padding-right:0; }
    .form-row { flex-direction:column; gap:0; }
}
@media (max-width:480px) {
    .form-panel { padding:24px 16px; }
}