/* --- FILE: public/client/css/user-auth.css --- */

/* 1. CẤU HÌNH CHUNG & CHỐNG RUNG THANH CUỘN */
:root {
    --primary-color: #4583c9c6;
    --text-color: #333;
    --bg-input: #f5f7fa;
    --border-radius: 8px;
}

html {
    /* QUAN TRỌNG: Luôn hiện thanh cuộn dọc kể cả khi trang ngắn.
       Giúp trang Login và Register có độ rộng y hệt nhau, không bị giật ngang */
    overflow-y: scroll;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.profile-part {
    background-color: #f0f2f5;
    min-height: 75vh;

    display: flex;
    align-items: center;
    /* Căn giữa dọc */
    justify-content: center;
    /* Căn giữa ngang */

    padding: 20px;
    box-sizing: border-box;
}

.profile-part.long-form {
    align-items: flex-start;
    /* Đẩy lên trên */
    padding-top: 60px;
    /* Cách Navbar một khoảng an toàn */
    padding-bottom: 60px;
    /* Cách chân trang */
    height: auto;
    /* Cho phép chiều cao tự do */
}

/* 3. CARD FORM (KHỐI CỐ ĐỊNH) */
.user-form-card {
    background: #fff;
    width: 100%;
    max-width: 400px;
    padding: 40px 30px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
    border: 1px solid #eee;

    -webkit-font-smoothing: subpixel-antialiased;
}

/* HEADER */
.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.header-icon {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: inline-block;
}

.user-form-card h2 {
    margin: 0;
    font-weight: 600;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Gradient Text */
    color: #005bea;
    background-image: linear-gradient(to right, #1b2d76, #e14fad, #34a1bf, #ed6a80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* 4. INPUT GROUP & ICON (CHỐNG RUNG KHI CLICK) */
.input-group {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.input-group i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Full chiều cao, không dùng transform */
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s;
}

.user-form-card input {
    width: 100%;
    height: 48px;
    /* Chiều cao cứng */
    padding: 0 15px 0 45px;
    background: var(--bg-input);

    /* Viền trong suốt để giữ chỗ */
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    font-size: 14px;
    color: var(--text-color);
    outline: none;
    box-sizing: border-box;

    /* Chỉ transition màu sắc, KHÔNG transition kích thước/margin */
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.user-form-card input:focus {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1);
}

.input-group:focus-within i {
    color: var(--primary-color);
}

/* FIX AUTOFILL CHROME: Ngăn Chrome tự đổi màu làm giật layout */
.user-form-card input:-webkit-autofill,
.user-form-card input:-webkit-autofill:hover,
.user-form-card input:-webkit-autofill:focus,
.user-form-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f5f7fa inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 5. RECAPTCHA WRAPPER (CHỐNG RUNG DỌC) */
/* Đây là class quan trọng để giữ chỗ cho captcha */
.recaptcha-wrapper {
    min-height: 78px;
    /* Chiều cao cố định của ReCaptcha V2 */
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
}

/* 6. BUTTON & FOOTER */
.btn-submit {
    width: 100%;
    height: 48px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;

    /* Ngăn nút bị vỡ dòng */
    white-space: nowrap;
    overflow: hidden;
}

.btn-submit:hover {
    background: #357abd;
}

.btn-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* --- FOOTER --- */
.form-footer {
    margin-top: 25px;

    display: flex;
    justify-content: center;
    /* Căn tất cả vào giữa */
    align-items: center;

    /* QUAN TRỌNG: Tạo khoảng cách 30px giữa các đường link */
    gap: 30px;

    font-size: 14px;
    /* Tăng cỡ chữ lên xíu cho dễ đọc */
    border-top: 1px solid #f1f1f1;
    padding-top: 20px;
}

.form-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    position: relative;
}

/* Hiệu ứng: Thêm dấu chấm tròn ngăn cách ở giữa (Trang trí thêm cho đẹp) */
/* Đoạn này chỉ áp dụng nếu có 2 link cạnh nhau (như trang Login) */
.form-footer a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -17px;
    /* Căn chỉnh vị trí dấu chấm vào giữa khoảng gap */
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #ddd;
    border-radius: 50%;
    pointer-events: none;
}

.form-footer a:hover {
    color: var(--primary-color);
}

/* =========================================
   BỔ SUNG: ACCOUNT CARD & SOCIAL BUTTONS
   (Dùng cho Widget ở Sidebar hoặc Homepage)
   ========================================= */

/* 1. Card bao ngoài */
.account-card {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

/* 2. Danh sách nút (Khắc phục lỗi bị dính và mất định dạng) */
.user-form-social {
    list-style: none;
    /* Bỏ dấu chấm tròn đầu dòng */
    padding: 0;
    margin: 0;

    display: flex;
    /* Dùng Flexbox để dàn hàng ngang */
    gap: 15px;
    /* Tách 2 nút ra 15px (Hết bị dính) */
}

.user-form-social li {
    width: 100%;
    /* Chia đều không gian 50-50 cho 2 nút */
}

/* 3. Định dạng nút bấm (Biến thẻ <a> thành nút đẹp) */
.user-form-social a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 120px;

    padding: 10px 15px;
    border-radius: var(--border-radius);

    /* QUAN TRỌNG: Luôn giữ chỗ cho viền 1px (transparent) ngay từ đầu
       để khi thêm màu vào nó không bị nhảy size */
    border: 1px solid transparent;

    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;

    /* Thêm will-change để báo trước cho trình duyệt về chuyển động hover */
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

/* Icon trong nút */
.user-form-social a i {
    margin-right: 8px;
    font-size: 16px;
}

/* 4. Màu sắc riêng cho từng nút */
/* Nút Đăng nhập (class .facebook) - Dùng màu xanh chủ đạo */
.user-form-social a.facebook {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Nút Đăng ký (class .google) - Dùng màu cam đỏ hoặc tối màu để nổi bật */
.user-form-social a.google {
    background: #e74c3c;
    border: 1px solid #e74c3c;
    color: #fff;
}

/* Hoặc nếu bạn muốn nút Đăng ký màu đỏ/cam thì dùng dòng này: */
/*
.user-form-social a.google {
    background: #e74c3c;
    border: 1px solid #e74c3c;
    color: #fff;
}
*/

/* Hiệu ứng khi di chuột */
.user-form-social a:hover {
    opacity: 0.9;
}

/* =========================================
   PHẦN HIỂN THỊ SỐ DƯ (NẾU ĐÃ ĐĂNG NHẬP)
   ========================================= */
.my-wallet {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

/* Sửa lại font chữ tiêu đề cho thanh thoát, bớt thô */
.my-wallet h4 {
    font-family: 'Inter', sans-serif;
    /* Áp dụng font Inter */
    font-size: 12px;
    font-weight: 500;
    /* Độ đậm vừa phải */
    color: #64748b;
    /* Màu xám chì sang trọng (Slate-500) */
    text-transform: uppercase;
    /* Khoảng cách chữ vừa đủ */
    margin-bottom: 8px;

}

/* Tinh chỉnh số tiền */
.my-wallet p {
    font-size: 26px;
    /* Số to rõ ràng */
    font-weight: 700;
    /* Dùng nét cực đậm nhưng sắc nét */
    margin: 0;
    line-height: 1.1;

    /* Hiệu ứng màu Gradient cho chữ (như các app ngân hàng) */
    background: -webkit-linear-gradient(45deg, var(--primary-color), #2dce89);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Nếu trình duyệt không hỗ trợ gradient thì dùng màu gốc */
    color: var(--primary-color);

    /* Giúp số hiển thị chặt chẽ, không bị thưa thớt */
    letter-spacing: -1px;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
}

/* Group 3 ô thông tin bên dưới */
.wallet-card-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    border-top: 1px dashed #e0e6ed;
    /* Nét đứt nhạt màu */
    padding-top: 20px;
    margin-top: 10px;
    gap: 5px;
    /* Khoảng cách nhỏ giữa các cột */
}

.wallet-card {
    text-align: center;
    flex: 1;
    /* Chia đều 3 cột */
    position: relative;
}

/* Tạo đường kẻ dọc ngăn cách giữa các cột nhỏ (chỉ áp dụng cho cột 1 và 2) */
.wallet-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: #f0f0f0;
}

.wallet-card p:first-child {
    font-size: 16px;
    color: #8898aa;
    margin: 0 0 6px;
    white-space: nowrap;
    /* Giữ tiêu đề 1 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-card p:last-child {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
    /* Giữ số tiền 1 dòng */
}

/* Tô màu riêng cho số liệu để dễ nhìn */
.wallet-card:nth-child(1) p:last-child {
    color: #2bc582;
}

/* Tổng nạp: Xanh lá */
.wallet-card:nth-child(2) p:last-child {
    color: #6371c0;
}

/* Đã dùng: Tím xanh */
.wallet-card:nth-child(3) p:last-child {
    color: #fb6340;
}

/* Giảm giá: Cam */