/* The site is dark through its own overrides, not data-bs-theme, so Bootstrap's --bs-*-bg tokens
   resolve to light values here. These are the theme's actual dark colours. */
.register-wrap {
    --reg-card: #32383e; --reg-head: #3a3f44; --reg-input: #272b30; --reg-border: #52575c;
    --reg-text: #dee2e6; --reg-green: #62c462; --reg-red: #ee5f5b;
}
.register-wrap { display: flex; justify-content: center; padding: 1.5rem 1rem 3rem; }
.register-card { width: 100%; max-width: 520px; background: var(--reg-card); border: 1px solid var(--reg-border); border-radius: .75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.register-head { background: var(--reg-head); border-bottom: 1px solid var(--reg-border); text-align: center; padding: 1.5rem 1rem 1.25rem; }
.register-head > i { font-size: 2rem; color: var(--reg-green); }
.register-head h1 { font-size: 1.5rem; margin: .4rem 0 .15rem; color: #fff; }
.register-head p { margin: 0; color: var(--reg-text); opacity: .8; font-size: .9rem; }
#registerForm, #loginForm { padding: 1.5rem 1.75rem 1.75rem; }
.register-section { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--reg-green); margin: 1.1rem 0 .6rem; }
.register-section:first-of-type { margin-top: 0; }
.field { margin-bottom: .75rem; position: relative; }
.field .form-floating { position: relative; }
.field .form-control { border-radius: .5rem; padding-right: 2.6rem; background-color: var(--reg-input); color: #fff; border-color: var(--reg-border); }
.field .form-control:focus { border-color: var(--reg-green); box-shadow: 0 0 0 .2rem rgba(98, 196, 98, .25); }
.field .form-floating > label { color: var(--reg-text); }
/* site.css makes floating-label placeholders visible; here the label does that job. */
.register-card .form-floating > .form-control::placeholder,
.register-card .form-floating > .form-control:focus::placeholder { color: transparent; }
.field-status { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.1rem; }
.field-msg { font-size: .78rem; color: var(--reg-text); margin: .25rem .2rem 0; }
.field-msg:empty { display: none; }
.server-error { display: block; font-size: .78rem; color: #ff6b6b; margin: .25rem .2rem 0; }
.server-error:empty { display: none; }

.field.is-valid .form-control { border-color: var(--reg-green); }
.field.is-invalid .form-control { border-color: var(--reg-red); }
.field.is-valid .field-status i { color: var(--reg-green); }
.field.is-valid .field-status i::before { content: "\f26a"; } /* check-circle-fill */
.field.is-invalid .field-status i { color: var(--reg-red); }
.field.is-invalid .field-status i::before { content: "\f623"; } /* x-circle-fill */
.field.is-invalid .field-msg { color: #ff6b6b; }
.field.is-valid .field-msg.ok { color: var(--reg-green); }
.field.is-checking .field-status i { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--reg-border); border-top-color: var(--reg-green); border-radius: 50%; animation: reg-spin .7s linear infinite; }
.field.is-checking .field-status i::before { content: none; }
@keyframes reg-spin { to { transform: rotate(360deg); } }

.pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--reg-text); padding: .4rem .5rem; font-size: 1.1rem; z-index: 5; }
.pw-toggle:hover { color: #fff; }

.register-submit { padding: .75rem; border-radius: .5rem; font-weight: 600; margin-top: .5rem; }
.register-submit:disabled { opacity: .45; }
.register-foot { text-align: center; margin: 1rem 0 0; font-size: .88rem; color: var(--reg-text); }

@media (max-width: 480px) { #registerForm, #loginForm { padding: 1.25rem 1rem 1.5rem; } }

/* Bootstrap paints a light "cut-out" behind a raised floating label; the card is dark. */
.register-card .form-floating > .form-control:focus ~ label::after,
.register-card .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.register-card .form-floating > .form-control-plaintext ~ label::after { background-color: transparent !important; }

/* Validation summary: tinted instead of the theme's solid salmon, no bullet. */
.register-card .alert-danger { background: rgba(238, 95, 91, .12); border: 1px solid var(--reg-red); color: #ff8f8c; border-radius: .5rem; font-size: .88rem; }
.register-card .alert-danger ul { list-style: none; margin: 0; padding: 0; }
.register-card .alert-danger.validation-summary-valid { display: none; }