* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-style: normal;
    letter-spacing: 1px;
}

input:-webkit-autofill~.toggle-password {
    color: #495057 !important;
}

.authentication {
    width: 100%;
}

.container {
    max-width: none;
    padding: 0;
}

.split-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.content-section {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #020b2c;
}

.form-wrapper {
    width: 100%;
    max-width: 450px;
}

.login-page .image-section,
.forgot-page .image-section,
.reset-page .image-section,
.verification-page .image-section {
    width: 100%;
    background: url("../../assets/images/af-login.png") no-repeat;
    position: relative;
    background-size: cover;
}

.register-page .image-section {
    width: 100%;
    /* af-signup.png has never been in the repo, so this panel rendered blank.
       Drop a dedicated af-signup.png in assets/images and it takes over; until
       then fall back to the login artwork so register matches login. */
    background: url("../../assets/images/af-signup.png") no-repeat,
        url("../../assets/images/af-login.png") no-repeat;
    position: relative;
    background-position-x: 100%;
    background-size: cover;
}

.image-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(2, 11, 44, 0.2) 0%,
            rgba(2, 11, 44, 0) 100%);
}

h1 {
    color: white;
    font-size: clamp(28px, 3vw, 36px);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.subtitle {
    color: #00d0ff;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.member-text {
    color: #ffffff;
    font-size: 15px;
    margin: 20px 0;
    text-align: center;
}

.member-text a {
    color: #1d90f5;
    text-decoration: none;
    margin-left: 5px;
    transition: opacity 0.3s;
}

.member-text a:hover {
    opacity: 0.8;
}

.form-group {
    margin-bottom: 20px;
    position: relative;
    float: left;
    width: 100%;
}

input {
    width: 100%;
    padding: 15px;
    background-color: #323644;
    border-radius: 20px;
    color: white;
    font-size: 16px;
    transition: all 0.3s;
    border: none;
}

input:focus {
    outline: none;
    border-color: #00c2cb;
    background-color: rgba(255, 255, 255, 0.08);
}

input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* app.css is now loaded on the authentication pages too (layout/authentication
   was missing it, which left every converted class inert). Its "restore form
   control defaults" pass repaints bare inputs white with dark text — and this
   design's placeholder is white, so the fields came out blank. These pages are
   the dark exception; restate them at a weight that pass cannot outrank.
   Checkboxes and radios are excluded: they are native controls here. */
.split-container input:not([type="checkbox"]):not([type="radio"]),
.split-container textarea {
    background-color: #323644 !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
}

.split-container input:not([type="checkbox"]):not([type="radio"]):focus,
.split-container textarea:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.name-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.login-account-btn,
.create-account-btn {
    width: 50%;
    padding: 15px;
    background-color: #008cff;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* .remember-me floats left and .forgot-password floats right just above
       this button, and nothing closed those floats. A display:flex button is a
       block-formatting-context root, so it cannot overlap a float — the browser
       shoved it sideways out of the float band and `margin: auto` then centred
       it inside an already-displaced box, which is why it sat off-centre.
       Clearing drops it below both floats so the auto margins mean what they
       say. */
    clear: both;
    margin: auto;
}

.login-account-btn:hover,
.create-account-btn:hover {
    background-color: #0077cc;
    transform: translateY(-1px);
}

.google-btn {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 15px;
    background-color: #323644;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    margin-top: 20px;
}

.google-btn:hover {
    background-color: #3c4152;
    border-color: rgba(255, 255, 255, 0.22);
    text-decoration: none;
    color: #ffffff;
}

.google-btn img {
    width: 20px;
    height: 20px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .split-container {
        flex-direction: column-reverse;
    }

    .content-section,
    .image-section {
        width: 100%;
    }

    .login-page .image-section,
    .forgot-page .image-section,
    .reset-page .image-section,
    .verification-page .image-section {
        height: 35vh;
        background: url("../../assets/images/af-login.png") center/cover;
    }

    .register-page .image-section {
        height: 35vh;
        background: url("../../assets/images/af-signup.png") center/cover no-repeat,
            url("../../assets/images/af-login.png") center/cover no-repeat;
    }

    .content-section {
        min-height: 65vh;
        padding: 40px 20px;
    }

    .form-wrapper {
        max-width: 100%;
    }

    .name-group {
        flex-direction: column;
        gap: 15px;
    }

    .google-btn {
        width: 70%;
        margin-top: 30px;
        margin: 30px auto;
    }

    .form-group {
        margin-bottom: 15px;
    }
}

/* Additional animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-wrapper {
    animation: fadeIn 0.6s ease-out;
}

/* Captcha instruction text */
.captcha-instruction {
    color: #ffffff;
    font-size: 14px;
    margin: 10px 0;
}

/* Captcha Styling */
.captcha-container {
    display: flex;
    align-items: center;
    background-color: #323644;
    padding: 10px 15px;
    border-radius: 20px;
    color: white;
    font-size: 18px;
    gap: 5px;
}

.captcha {
    flex: 1;
}

.captcha img {
    bottom: 0px;
    position: relative;
}

.refresh-btn:hover {
    opacity: 0.8;
}

.refresh-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #fff;
}

/* Forgot Password */

.forgot-password {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 10px;
    float: right;
}

/* Footer styles */
footer {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.terms-conditions {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 10px 20px 10px;
    width: 100%;
    float: left;
}

.terms-conditions input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.terms-conditions a {
    color: #1d90f5;
    text-decoration: underline;
    cursor: pointer;
}

.member-section {
    margin-top: 20px;
    text-align: center;
    color: #ffffff;
}

/* Toggle Container */
.toggle-container {
    display: flex;
    border: 1px solid #ffffff;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    margin-bottom: 30px;
}

/* Toggle Button */
.toggle-button {
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
    color: #ffffff;
    background-color: transparent;
    border: none;
    outline: none;
}

/* Active Button */
.toggle-button.active {
    background-color: #1d90f5;
}

/* Error state styles */
input.error {
    border-color: #ff4646;
}

/* ── Field errors ─────────────────────────────────────────────────────────
   These forms report on the field that failed. layout/error used to stack a
   full-bleed bar per message above the whole page instead, detached from the
   field it was about — "Wrong Answer." floating over a form with four of them.
   Light red on the dark panel: the pair the password checklist already uses. */
.split-container .af-error-msg {
    margin: 8px 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #f87171;
}

/* `border-color`, which the rule above reaches for, does nothing here: these
   inputs are `border: none`, so there is no border to colour. An inset ring
   shows on the pill and costs it no size. */
.split-container input.af-input-error:not([type="checkbox"]):not([type="radio"]),
.split-container .af-input-error.captcha-container,
.split-container .af-input-error.pw-field input,
.split-container .af-input-error.code-field input {
    box-shadow: 0 0 0 1px #f87171 inset;
}

/* Whatever has no field on the form — session('error'), a rule added later —
   still has to be said, so it keeps a notice. Inside the form column and on
   the panel's own ground, rather than edge to edge above everything. */
.split-container .af-notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.split-container .af-notice p {
    margin: 0;
}

.split-container .af-notice p + p {
    margin-top: 6px;
}

.split-container .af-notice-error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.split-container .af-notice-ok {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.45);
    color: #86efac;
}

/* Focus styles for accessibility */
input:focus,
.login-account-btn:focus,
.create-account-btn:focus,
.google-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 194, 203, 0.3);
}

/* Loading state styles */
.login-account-btn.loading,
.create-account-btn.loading,
.google-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

.remember-me {
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 10px;
    float: left;
}

.remember-me label {
    margin-bottom: 0;
}

/* app.css's bridge layer sets an explicit `body.ui-bridge label` colour, which
   breaks the inheritance these labels rely on over the dark panel. Same
   specificity, but this sheet loads later, so the AF pages keep their own. */
body .split-container label {
    color: inherit;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.login-page .toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

/* The show/hide control is position:absolute, but nothing established a
   positioning context around the field, so it resolved against the page and the
   eye never appeared next to the password box. .pw-field (on the wrapper that
   holds the input and its toggle) is that context; the extra right padding keeps
   a long password from running underneath the icon, and it is on the wrapper
   rather than input[type=password] because the toggle flips the type to text. */
.split-container .pw-field {
    position: relative;
}

.split-container .pw-field input {
    padding-right: 48px;
}

.split-container .toggle-password,
.split-container .toggle-cpassword {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    right: 6px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 17px;
    line-height: 1;
    z-index: 2;
    transition: color .15s ease, background-color .15s ease;
}

.split-container .toggle-password:hover,
.split-container .toggle-cpassword:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.split-container .toggle-password:focus-visible,
.split-container .toggle-cpassword:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 194, 203, .55);
    color: #ffffff !important;
}


/* Busy state for the submit button while the request is in flight. */
.split-container .login-account-btn[disabled],
.split-container .create-account-btn[disabled] {
    opacity: .65;
    cursor: default;
    transform: none;
}

.register-page .toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.register-page .toggle-password.hidden-error {
    top: 50%;
}

.register-page .toggle-password.show-error {
    top: 50%;
}

.register-page .toggle-cpassword {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.register-page .toggle-cpassword.hidden-error {
    top: 50%;
}

.register-page .toggle-cpassword.show-error {
    top: 50%;
}

/* Register Page */

/* Split container for the layout */

/* Both spellings, because the three views that show this panel do not agree on
   one: email-verification-set-password wraps it in id="password-error-message",
   register and reset in class="password-error-message". Styling only the id
   left the register and reset checklists as plain body-coloured text on the
   dark panel, with no ✔ / ✖ at all — so they said which rules a password had to
   meet and nothing about which of them it met. */
#password-error-message,
.password-error-message {
    background: #323644;
    border: none;
    border-radius: 15px;
    color: #000;
    position: relative;
    padding: 20px;
    margin: 15px 0 0 0;
    width: 100%;
}

#password-error-message h6,
.password-error-message h6 {
    color: white;
    margin-bottom: 15px;
}

#password-error-message p,
.password-error-message p {
    padding: 0 35px;
    margin-bottom: 10px;
}

/* The ✔ / ✖ markers and their colours used to arrive from a <style> block that
   register, reset and email-verification-set-password each carried a copy of.
   Those views have been rebuilt on the shared auth shell and dropped it, so the
   rules move here — the only sheet that knows this panel is dark, which is why
   the greens and reds are the light variants rather than `green` / `red`. */
#password-error-message .valid,
.password-error-message .valid { color: #4ade80; }
#password-error-message .invalid,
.password-error-message .invalid { color: #f87171; }

#password-error-message .valid::before,
#password-error-message .invalid::before,
.password-error-message .valid::before,
.password-error-message .invalid::before {
    position: relative;
    left: -35px;
}

#password-error-message .valid::before,
.password-error-message .valid::before { content: "\2714"; }
#password-error-message .invalid::before,
.password-error-message .invalid::before { content: "\2716"; }

.split-container .code-field {
    position: relative;
}

.split-container .code-field input {
    padding-right: 130px;
}

.timer {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14px;
}

.resend-button {
    background: none;
    border: none;
    color: #00b4d8;
    cursor: pointer;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.reset-page .toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.reset-page .toggle-cpassword {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.verification-page .toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.verification-page .toggle-cpassword {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}