@media (min-width: 992px) {
    .account-settings {
        display: block !important;
    }
}

.account-settings {
    display: none;
}


/* Solid primary button (Register) */
.registerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem; /* bigger padding */
    background-color: var(--color-primary);
    color: #fff; /* white text */
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

    .registerButton:hover {
        background-color: var(--color-primary-dark);
        transform: scale(1.05);
    }

    .registerButton:active {
        transform: scale(0.95);
    }

/* Shared base */
.registerButton,
.loginButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

/* Solid primary (Register) */
.registerButton {
    background-color: var(--color-primary);
    border: none;
}

    .registerButton:hover {
        transform: scale(1.05);
    }

    .registerButton:active {
        transform: scale(0.95);
    }

/* Outline primary (Login) */
.loginButton {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary); /* outline default */
}

    .loginButton:hover {
        transform: scale(1.05);
    }

    .loginButton:active {
        transform: scale(0.95);
    }

/* Container for consistent spacing */
.authButtons {
    display: flex;