/* =================================== */
/* === STYLES FOR LOGIN PAGE      === */
/* =================================== */

.login-page-body {
    background-image: linear-gradient(rgba(10, 10, 26, 0.85), rgba(10, 10, 26, 0.85));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container {
    max-width: 450px;
    width: 100%;
    padding: 20px;
}

.login-form-wrapper {
    background-color: rgba(26, 26, 42, 0.9);
    padding: 2.5rem;
    border-radius: 10px;
    border: 1px solid #333;
    backdrop-filter: blur(5px);
}

/* Form Styles */
.login-form-wrapper .form-label {
    color: #ccc;
}
.login-form-wrapper .form-control {
    background-color: #121221;
    border-color: #444;
    color: #fff;
    padding: 0.75rem 1rem;
}
.login-form-wrapper .form-control:focus {
    background-color: #121221;
    color: #fff;
    border-color: #e0a836;
    box-shadow: 0 0 0 0.25rem rgba(224, 168, 54, 0.25);
}
.login-form-wrapper .form-check-label {
    color: #ccc;
}
.form-check-input:checked {
    background-color: #e0a836;
    border-color: #e0a836;
}

.forgot-password-link, .register-link {
    color: #e0a836;
    text-decoration: none;
    font-size: 0.9rem;
}
.forgot-password-link:hover, .register-link:hover {
    text-decoration: underline;
}

.btn-login-main {
    background-color: #e0a836;
    color: #111;
    border: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}
.btn-login-main:hover {
    background-color: #ffc966;
    color: #000;
}

/* Separator */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #888;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #444;
}
.separator:not(:empty)::before {
    margin-right: .5em;
}
.separator:not(:empty)::after {
    margin-left: .5em;
}

/* Social Login Buttons */
.social-login-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.btn-social {
    color: #fff;
    border: none;
    padding: 0.5rem;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
}
.btn-social.btn-garena { background-color: #ee1d25; }
.btn-social.btn-facebook { background-color: #1877F2; }
.btn-social.btn-google { background-color: #fff; color: #000; }
/* =================================== */
/* === STYLES FOR REGISTER PAGE   === */
/* =================================== */

/* Chỉ cần thêm style cho thanh đo sức mạnh mật khẩu */
.password-strength-meter {
    background-color: #121221;
}

.password-strength-meter .progress-bar {
    transition: width 0.3s ease-in-out;
}