/*
   REGISTER.CSS - Registration Page Styles
   Developer: Dominic Appleton | ID: 2102508

   Mirrors the login.css card aesthetic (burgundy accent, beige/white
   palette) but widens the container to accommodate the two-column
   form layout used on the registration page.
*/

/* Auth page - centres the form card on screen */
.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Registration card - wider than login to fit form-row grids */
.auth-container {
    width: 100%;
    max-width: 700px;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(61, 10, 20, 0.18);
    animation: fadeIn 0.7s ease-out;
    border-top: 4px solid #800020;
}

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-25px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Form title */
.auth-container h2 {
    color: #800020;
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8ddd5;
}

/* Brand name */
.auth-container .brand-name {
    color: #800020;
}

/* Auth footer */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8ddd5;
    color: #5a3535;
}

.auth-footer a {
    color: #800020;
    text-decoration: none;
    font-weight: bold;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/*
   FORM ACTIONS - Register and Cancel button row.
   Stacked vertically so the primary action (Register) is on top.
*/
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

/*
   Secondary (Cancel) button - outlined burgundy, matching login.css
*/
.btn-secondary {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    background-color: transparent;
    color: #800020;
    border: 2px solid #800020;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
    background-color: #800020;
    color: #ffffff;
}

/* Tablet - collapse two-column rows to single column */
@media (max-width: 750px) {
    .auth-container {
        max-width: 500px;
        padding: 30px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .auth-container { padding: 24px; }
}