/* ==========================================================================
   TRANG QUÊN MẬT KHẨU — views/ecommerce/customers/passwords/email.blade.php (GET /password/reset)

   Khung tách đôi (.hl-signin__card, nửa vàng, nửa trắng) dùng lại nguyên hl-signin.css của trang đăng nhập;
   file này chỉ thêm phần riêng của trang (lớp .hl-forgot__*), nạp SAU hl-signin.css. Không sửa hl-signin.css
   từ đây — trang đăng nhập và trang đặt lại mật khẩu (hl-reset.css) cũng đang dựa vào nó.
   theme.css gốc có style cho p/ol/li/h1/h2 trần → phần tử chữ nào cũng khai báo lại margin/line-height.
   ========================================================================== */

/* width:100% — khung ngoài co theo nội dung: thiếu dòng này thẻ hẹp lại ở bước "đã gửi" (đo 12/09: 1120 → 1015px) */
.hl-forgot { width: 100%; }
.hl-forgot .hl-signin__hi { font-size: 31px; line-height: 1.16; }
.hl-forgot .hl-signin__perks li { text-wrap: balance; }
.hl-forgot__lead-m { display: none; }
/* chữ phụ #76684F của hl-signin chỉ đạt 4.18:1 trên nền trắng → dùng màu đậm hơn (#6E6455 ≈ 5.8:1), như thiết kế #6E675A */
.hl-forgot .hl-signin__sub,
.hl-forgot .hl-signin__alt { color: var(--hl-ink-3); }

.hl-forgot__pane,
.hl-forgot__form { display: flex; flex-direction: column; gap: 20px; }

/* Vùng thông báo (role=alert / status) luôn có mặt; trống thì kéo ngược khoảng gap của cột lại cho khỏi hở */
.hl-forgot__live:empty { margin-top: -20px; }

/* ---------- bước 1: nhập email ---------- */
.hl-forgot__field svg { flex: 0 0 18px; color: #8C8372; }
.hl-forgot__field.is-bad { border-color: #E3A596; box-shadow: 0 0 0 3px rgba(196, 71, 47, .12); }
.hl-forgot__hint { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--hl-ink-3); }

.hl-forgot__submit { display: flex; align-items: center; justify-content: center; gap: 9px; line-height: 1.3; }
.hl-forgot__submit svg { flex: 0 0 18px; }
.hl-forgot__submit:focus-visible { outline: 2px solid var(--hl-gold-ink); outline-offset: 2px; }
.hl-forgot__submit[aria-busy="true"] { opacity: .65; cursor: progress; }

.hl-forgot__note {
    display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 15px 17px; border-radius: 17px;
    background: #FBF7EC; font-size: 12.5px; line-height: 1.65; color: var(--hl-ink-2); text-wrap: pretty;
}
.hl-forgot__note svg { flex: 0 0 18px; margin-top: 1px; color: var(--hl-link); }
.hl-forgot__note b { font-weight: 800; color: var(--hl-ink); white-space: nowrap; }

/* ---------- bước 2: đã gửi thư ---------- */
.hl-forgot__okhead { display: flex; align-items: center; gap: 14px; }
.hl-forgot__okbadge {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: 19px; display: grid; place-items: center;
    background: var(--hl-green-soft); color: var(--hl-green);
    animation: hl-forgot-pop .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes hl-forgot-pop {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hl-forgot__okbadge { animation: none; } }
.hl-forgot__okh { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--hl-ink); }
.hl-forgot__okh:focus { outline: none; }
.hl-forgot__oksub { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--hl-ink-3); }

.hl-forgot__to { padding: 18px 20px; border-radius: 19px; background: #FBF7EC; border: 1.5px solid var(--hl-line); }
.hl-forgot__to-k {
    display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.4;
    color: var(--hl-ink-3); text-transform: uppercase;
}
.hl-forgot__to-v { display: block; padding-top: 5px; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--hl-ink); overflow-wrap: anywhere; }

.hl-forgot__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hl-forgot__steps li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.55; color: #3A3327; text-wrap: pretty; }
.hl-forgot__steps li::before { content: none; }
.hl-forgot__num {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 999px; background: var(--hl-gold-soft);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 800; line-height: 1; color: var(--hl-gold-ink);
}

.hl-forgot__clock {
    display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 16px; border-radius: 16px;
    background: #FFF8E4; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--hl-ink-2);
    font-variant-numeric: tabular-nums;
}
.hl-forgot__clock svg { flex: 0 0 17px; color: var(--hl-gold-ink); }
.hl-forgot__clock b { font-weight: 800; color: var(--hl-ink); }
.hl-forgot__clock.is-over { background: var(--hl-red-soft); color: var(--hl-red-ink); }
.hl-forgot__clock.is-over svg { color: var(--hl-red-ink); }

.hl-forgot__again {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0;
    font-size: 13px; line-height: 1.5; color: var(--hl-ink-3); text-align: center;
}
/* chữ nhỏ nhưng vùng bấm to (padding + margin âm): nhìn như thiết kế, ngón tay vẫn trúng */
.hl-forgot__again button,
.hl-forgot__again a {
    margin: -10px -6px; padding: 10px 6px; border: 0; background: none; font: inherit; font-weight: 800;
    color: var(--hl-gold-ink); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.hl-forgot__again button:hover,
.hl-forgot__again a:hover { color: #6E3D04; }
.hl-forgot__again button[aria-disabled="true"] { font-weight: 700; color: var(--hl-muted-2); cursor: default; }
.hl-forgot__again a.is-off { pointer-events: none; opacity: .5; }
.hl-forgot__again button:focus-visible,
.hl-forgot__again a:focus-visible { outline: 2px solid var(--hl-gold-ink); outline-offset: -4px; border-radius: 8px; }
.hl-forgot__acts { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.hl-forgot__dot { color: #D8CDB4; }

/* chân thẻ luôn nằm đáy nửa phải, như thiết kế */
.hl-forgot .hl-signin__alt { margin-top: auto; }

@media (min-width: 768px) {
    .hl-forgot .hl-signin__hero { padding: 44px 42px 40px; }
}

/* ---------- điện thoại: như bản thiết kế "Điện thoại" ---------- */
@media (max-width: 767px) {
    .hl-forgot .hl-signin__hero { background: linear-gradient(160deg, #FFD874 0%, #F7B23B 100%); }
    .hl-forgot .hl-signin__logo { width: 44px; height: 44px; flex-basis: 44px; border-radius: 15px; }
    .hl-forgot .hl-signin__name { font-size: 16px; }
    .hl-forgot .hl-signin__hi { font-size: 22px; line-height: 1.2; }
    .hl-forgot .hl-signin__lead { font-size: 12px; }
    .hl-forgot .hl-signin__main { margin-top: -18px; }
    .hl-forgot__lead-d { display: none; }
    .hl-forgot__lead-m { display: inline; }

    /* bản điện thoại không có tiêu đề "Lấy lại mật khẩu" (dải vàng đã nói) — ẩn thị giác, vẫn còn cho trình đọc màn hình */
    .hl-forgot__head {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }

    .hl-forgot__pane,
    .hl-forgot__form { gap: 16px; }
    .hl-forgot__live:empty { margin-top: -16px; }
    .hl-forgot__hint { font-size: 11.5px; line-height: 1.5; }
    .hl-forgot__submit { padding: 14px; font-size: 15px; }
    .hl-forgot__note { gap: 10px; padding: 14px 15px; border-radius: 16px; font-size: 11.5px; line-height: 1.6; }

    .hl-forgot__okhead { flex-direction: column; gap: 15px; text-align: center; }
    .hl-forgot__okbadge { width: 60px; height: 60px; flex-basis: 60px; border-radius: 20px; }
    .hl-forgot__okh { font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
    .hl-forgot__oksub { margin-top: 6px; font-size: 12.5px; line-height: 1.6; }
    .hl-forgot__steps { display: none; }
    .hl-forgot__to { padding: 14px 15px; border-radius: 16px; text-align: center; }
    .hl-forgot__to-k { font-size: 10.5px; }
    .hl-forgot__to-v { padding-top: 4px; font-size: 14.5px; }
    .hl-forgot__clock { justify-content: center; padding: 11px 14px; border-radius: 14px; font-size: 11.5px; text-align: center; }
    .hl-forgot__clock svg { flex-basis: 15px; width: 15px; height: 15px; }
    .hl-forgot__again { gap: 12px 7px; font-size: 12px; }
}