/* ═══════════════════════════════════════════════
   REGISTER PAGE STYLING
   Enhanced spacing and layout for registration form
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── */
/* REGISTER PAGE SPECIFIC ADJUSTMENTS */
/* ─────────────────────────────────────────────── */

/* Larger card for register page */
.grimoire-login {
    max-width: 500px;
}

/* ─────────────────────────────────────────────── */
/* USERNAME FIELD */
/* ─────────────────────────────────────────────── */
#username {
    margin-bottom: 0.75rem;
}

/* ─────────────────────────────────────────────── */
/* NAME + SURNAME ROW */
/* ─────────────────────────────────────────────── */
.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0; /* Override default margin */
}

.form-row .spell-input {
    padding: 0.85rem 1rem;
}

/* ─────────────────────────────────────────────── */
/* EMAIL FIELD SPACING */
/* ─────────────────────────────────────────────── */
.form-group.email-group {
    margin-bottom: 2rem;
}

#mail {
    margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────── */
/* PASSWORD GROUP SPACING */
/* ─────────────────────────────────────────────── */
.password-group {
    margin-bottom: 2rem;
}

.password-group .spell-input:first-of-type {
    margin-bottom: 1rem;
}

/* Password confirmation field highlight */
.confirm-password {
    border-color: rgba(232, 193, 112, 0.6);
    margin-top: 1rem;
}

.confirm-password:focus {
    border-color: var(--spell-gold);
    box-shadow: 0 0 25px rgba(232, 193, 112, 0.3);
}

/* ─────────────────────────────────────────────── */
/* FORM LABEL ADJUSTMENTS */
/* ─────────────────────────────────────────────── */
.form-row .form-label {
    display: none; /* Hide labels for name/surname row for cleaner look */
}

/* ─────────────────────────────────────────────── */
/* PLACEHOLDERS FOR BETTER UX */
/* ─────────────────────────────────────────────── */
.form-row .spell-input::placeholder {
    font-size: 0.95rem;
}

/* ─────────────────────────────────────────────── */
/* RESPONSIVE ADJUSTMENTS */
/* ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Stack name fields on mobile */
    .form-row {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row .form-group {
        width: 100%;
    }

    .grimoire-login {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .grimoire-login {
        padding: 2rem 1.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }
}

/* ─────────────────────────────────────────────── */
/* VISUAL FEEDBACK */
/* ─────────────────────────────────────────────── */
.spell-input:valid {
    border-color: rgba(232, 193, 112, 0.5);
}

.spell-input:invalid:not(:placeholder-shown) {
    border-color: rgba(220, 53, 69, 0.5);
}

/* Success state for matching passwords (future JS enhancement) */
.password-match {
    border-color: rgba(40, 167, 69, 0.6);
}

.password-match:focus {
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
}