/* =====================================================
   auth.css — Trang đăng nhập & đăng ký
   Nền: dùng nguyên <section class="hero"> của home.css
   (gradient xanh đậm + orb + galaxy + canvas sao).
   File này chỉ chứa style cho card form bên phải.
   ===================================================== */

/* ---------- Bố cục 2 cột riêng cho trang auth ----------
   Hero của home chia 1.15fr/0.85fr; trang auth cần cột form
   rộng hơn ~20% để form thoáng: 1.15fr/1.02fr */
.auth-hero .hero__inner {
    grid-template-columns: 1.15fr 1.02fr;
    gap: var(--stc-space-8, 4rem);
}

/* ---------- Cột trái: hero content riêng cho auth ---------- */
/* Danh sách ưu điểm dọc với icon vuông mờ */
.auth-perks {
    display: grid;
    gap: var(--stc-space-5);
    margin-top: var(--stc-space-8);
}
.auth-perks li {
    display: flex;
    align-items: flex-start;
    gap: var(--stc-space-4);
}
.auth-perks__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--stc-radius-md, 12px);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #7fd4ff;
}
.auth-perks__text { display: grid; gap: 2px; }
.auth-perks__text b { color: #fff; font-size: var(--stc-text-md); font-weight: var(--stc-weight-semibold); }
.auth-perks__text small { color: rgba(255, 255, 255, 0.72); font-size: var(--stc-text-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .auth-perks { display: none; }

    /* QUAN TRỌNG: selector `.auth-hero .hero__inner` (2 class) đặc thù hơn rule
       `.hero__inner { grid-template-columns: 1fr }` trong @media của home.css
       (1 class) → nếu không ghi đè ở đây, trang auth VẪN 2 cột trên mobile,
       card form bị bóp nửa màn hình và tràn phải. */
    .auth-hero .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--stc-space-6, 2.5rem);
    }

    /* Layout đã xuống 1 cột từ 1024px — giảm chữ hero sớm hơn để không tràn */
    .auth-content .hero__title { font-size: clamp(28px, 4.5vw, 44px); }
    .auth-content .hero__desc  { font-size: var(--stc-text-lg); }
}

@media (max-width: 500px) {
    .auth-content .hero__desc { display: none; }
    .auth-content .hero__title { font-size: clamp(24px, 7vw, 32px); }
}

/* Card form nổi trên nền hero */
.auth-card {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--stc-radius-lg, 20px);
    background: var(--stc-surface, #fff);
    box-shadow: var(--stc-shadow-lg);
}

.auth-card__main { padding: var(--stc-space-8); }
.auth-card__title { font-size: var(--stc-text-2xl, 28px); font-weight: var(--stc-weight-bold); color: var(--stc-text-strong); }
.auth-card__sub { margin-top: var(--stc-space-2); color: var(--stc-text-muted); font-size: var(--stc-text-sm); }

/* ---------- Alert ---------- */
.auth-alert {
    margin-top: var(--stc-space-4);
    padding: var(--stc-space-3) var(--stc-space-4);
    border-radius: var(--stc-radius-sm, 10px);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: var(--stc-text-sm);
}
.auth-alert--ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }

/* ---------- Form ---------- */
.auth-form { margin-top: var(--stc-space-5); display: grid; gap: 6px; }

/* Hàng 2 cột (mật khẩu + xác nhận) */
.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    align-items: start;
}

.auth-form .form-col { min-width: 0; }

@media (max-width: 520px) {
    .auth-form .form-row { grid-template-columns: 1fr; }
}
.auth-label {
    margin-top: var(--stc-space-3);
    font-size: var(--stc-text-xs);
    font-weight: var(--stc-weight-semibold);
    color: var(--stc-text-muted);
    letter-spacing: 0.02em;
}

/* Input group theo mẫu người dùng cung cấp */
.group {
    display: flex;
    line-height: 30px;
    align-items: center;
    position: relative;
}

.input {
    width: 100%;
    height: 45px;
    line-height: 30px;
    padding: 0 1rem;
    padding-left: 3rem;
    border: 2px solid #dbe3ec;
    border-radius: 10px;
    outline: none;
    background-color: #f8fafc;
    color: #0d0c22;
    font-size: var(--stc-text-sm);
    font-family: inherit;
    transition: .5s ease;
}

.input::placeholder { color: #94a3b8; }

/* Ô password có nút mắt — chừa lề phải cho nút */
.group:has(.pw-toggle) .input { padding-right: 3rem; }

/* Nút ẩn/hiện mật khẩu */
.pw-toggle {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.pw-toggle:hover {
    color: #0d0c22;
    background-color: rgba(148, 163, 184, .15);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--stc-primary, #6366f1);
    outline-offset: 1px;
}

.input:focus,
.input:hover {
    outline: none;
    border-color: rgba(129, 140, 248);
    background-color: #fff;
    box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

.icon {
    position: absolute;
    left: 1rem;
    fill: none;
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color .3s ease;
}
.group:focus-within .icon { color: rgba(129, 140, 248); }

/* ---------- Submit & links ---------- */
.auth-submit { margin-top: var(--stc-space-6); width: 100%; justify-content: center; }

/* Captcha widget — căn giữa trong card */
.auth-captcha {
    margin-top: var(--stc-space-4);
    display: flex;
    justify-content: center;
}
.g-recaptcha { transform-origin: 0 0; }
@media (max-width: 360px) {
    .g-recaptcha { transform: scale(0.85); }
}

/* ---------- Trang trạng thái: chờ kích hoạt / đã kích hoạt ---------- */
/* Căn giữa toàn bộ nội dung card */
.auth-card__main--center { text-align: center; }
.auth-card__main--center .auth-status__icon { margin-left: auto; margin-right: auto; }
.auth-card__main--center .auth-pending__list { padding-left: 0; list-style: none; }
.auth-card__main--center .auth-card__sub { margin-inline: auto; max-width: 34ch; }

.auth-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    margin-bottom: var(--stc-space-4);
}
.auth-status__icon--ok { background: #f0fdf4; color: #16a34a; }
.auth-status__email { color: var(--stc-text-strong); word-break: break-all; }

.auth-pending__list {
    margin: var(--stc-space-4) 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: var(--stc-space-2);
    color: var(--stc-text-muted);
    font-size: var(--stc-text-sm);
}
.auth-pending__resend { margin-top: var(--stc-space-5); }
.auth-card__main--center .auth-switch { justify-content: center; }

/* Link gửi lại email kích hoạt (dưới alert lỗi chưa kích hoạt) */
.auth-resend { margin-top: var(--stc-space-3); text-align: center; }
.auth-resend__btn {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--stc-text-sm);
    font-weight: var(--stc-weight-semibold);
    color: var(--stc-primary, #6366f1);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-resend__btn:hover { color: var(--stc-primary-strong, #4f46e5); }

/* Link quên mật khẩu */
.auth-forgot { margin-top: var(--stc-space-3); text-align: center; font-size: var(--stc-text-sm); }
.auth-forgot a { color: var(--stc-text-muted); }
.auth-forgot a:hover { color: var(--stc-primary); }

/* Divider "hoặc" trước nút Google */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--stc-space-3);
    margin: var(--stc-space-5) 0 var(--stc-space-4);
    color: var(--stc-text-muted);
    font-size: var(--stc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--stc-border);
}

/* Nút Google */
.btn--google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--stc-space-3);
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--stc-radius-md, 14px);
    background: #fff;
    border: 1px solid var(--stc-border, #d7dfe7);
    color: #1f2937 !important;
    font-size: var(--stc-text-md);
    font-weight: var(--stc-weight-semibold);
    transition: box-shadow .2s var(--stc-ease, ease), border-color .2s var(--stc-ease, ease);
}
.btn--google:hover {
    border-color: #4285f4;
    box-shadow: 0 4px 14px rgba(66, 133, 244, 0.25);
    color: #111827 !important;
}

/* ---------- Checkbox checkmark (Uiverse by DaniloMGutavo) — nhớ đăng nhập & đồng ý điều khoản ---------- */
/* Hàng: checkbox bên trái + link phụ bên phải (vd: quên mật khẩu) */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stc-space-3);
    margin-top: var(--stc-space-4);
}

.auth-row .auth-forgot { margin: 0; text-align: right; }
.auth-row .auth-forgot a { white-space: nowrap; }

.auth-checks {
    display: flex;
    flex-direction: column;
    gap: var(--stc-space-2);
    margin-top: var(--stc-space-4);
}

.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: var(--stc-text-sm);
    color: var(--stc-text-muted);
    user-select: none;
    width: fit-content;
}

.checkbox-container a { color: var(--stc-primary); font-weight: var(--stc-weight-semibold); }
.checkbox-container a:hover { text-decoration: underline; }

/* input thật ẩn — click label vẫn toggle */
.checkbox-container .custom-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
    border-radius: 3px;
    transition: background-color 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.checkbox-container:hover .checkmark { background-color: #e2e8f0; }

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox:checked ~ .checkmark {
    background-color: #2196F3;
    box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
}

.custom-checkbox:checked ~ .checkmark:after {
    display: block;
    animation: checkAnim 0.2s forwards;
}

@keyframes checkAnim {
    0%   { height: 0; }
    100% { height: 7px; }
}

/* Căn text thẳng hàng với ô vuông 15px */
.cbx-text {
    display: inline-block;
    line-height: 15px;
    vertical-align: top;
}

.auth-switch {
    margin-top: var(--stc-space-5);
    font-size: var(--stc-text-sm);
    color: var(--stc-text-muted);
    text-align: center;
}
.auth-switch a { color: var(--stc-primary); font-weight: var(--stc-weight-semibold); }
.auth-switch a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    /* hero__inner của home tự thành 1 cột (grid của nó) — card thu hẹp căn giữa */
    .auth-card { max-width: 480px; width: 100%; margin: 0 auto; }
}

@media (max-width: 480px) {
    .auth-card__main { padding: var(--stc-space-5, 1.5rem); }
    /* Tiêu đề + row "Nhớ đăng nhập / Quên mật khẩu" không tràn trên màn hẹp */
    .auth-card__title { font-size: var(--stc-text-xl, 22px); }
    .auth-row { flex-wrap: wrap; }
    .auth-row .auth-forgot a { white-space: normal; }
}