/* shopAcount/public/assets/css/auth/register.css */

/* Định dạng chung cho nhóm ô nhập liệu */
.form-group {
    position: relative;
    margin-bottom: 18px;
}

/* Khi trường thông tin hợp lệ (Duy nhất) */
.input-success {
    border-color: #28a745 !important;
    background-color: #f8fff9 !important;
}

/* Khi trường thông tin bị trùng hoặc sai định dạng */
.input-error {
    border-color: #dc3545 !important;
    background-color: #fffbfb !important;
}

/* Dòng chữ thông báo nhỏ hiển thị ngay dưới ô nhập */
.feedback-msg {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

.feedback-msg.success-text {
    color: #28a745;
}

.feedback-msg.error-text {
    color: #dc3545;
}

/* Hiệu ứng mượt mà khi đổi màu ô nhập */
form input {
    transition: all 0.2s ease-in-out;
}

/* Trạng thái nút bấm bị vô hiệu hóa khi có ô nhập bị lỗi */
button:disabled {
    background-color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* shopAcount/public/assets/css/auth/register.css */

/* Trạng thái lỗi -> Viền đỏ, nền hồng nhạt */
.input-error {
    border: 2px solid #dc3545 !important;
    background-color: #fff8f8 !important;
    outline: none;
}

/* shopAcount/public/assets/css/auth/register.css */

/* Khung bọc form đăng ký */
.register-form-wrapper {
    background: #ffffff;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: sans-serif;
}

/* Phần tiêu đề form */
.register-header {
    text-align: center;
    margin-bottom: 25px;
}

.register-header h2 {
    margin: 0 0 8px 0;
    color: #1a1a1a;
    font-size: 24px;
}

.register-header p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Định dạng các ô nhóm và nhãn (Label) */
.form-group {
    position: relative;
    margin-bottom: 18px;
}

.form-group.group-password-confirm {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #444;
    font-weight: bold;
}

/* Ô nhập liệu ở trạng thái mặc định */
.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

/* 🌟 TRẠNG THÁI HỢP LỆ -> ĐỔI KHUNG VIỀN XANH LÁ */
.form-input.input-success {
    border: 2px solid #28a745 !important;
    background-color: #f8fff9 !important;
    outline: none;
}

/* 🌟 TRẠNG THÁI LỖI -> ĐỔI KHUNG VIỀN ĐỎ CHÓI */
.form-input.input-error {
    border: 2px solid #dc3545 !important;
    background-color: #fff8f8 !important;
    outline: none;
}
/* Định dạng nút bấm Đăng ký chung */
.btn-submit {
    width: 100%;
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* TRẠNG THÁI NÚT BỊ KHÓA MẶC ĐỊNH / HOẶC CÓ LỖI (Màu xám mờ) */
.btn-submit.btn-submit-disabled, .btn-submit:disabled {
    background-color: #6c757d !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* TRẠNG THÁI NÚT KHI HỢP LỆ TOÀN BỘ (Sáng xanh nổi lên) */
.btn-submit.btn-submit-enabled {
    background-color: #007bff !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.btn-submit.btn-submit-enabled:hover {
    background-color: #0056b3 !important;
}

/* Phần chân trang form */
.register-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}

.register-footer a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

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