/* ==========================================================================
   Hộp thoại đăng nhập bằng mã OTP.

   Đứng một mình, không dùng lại .awe-drawer của awe-shop.css: file đó chỉ nạp
   ở trang khoá học / giỏ / thanh toán, còn hộp thoại này mở được ở mọi trang,
   kể cả những trang còn dùng template của Eduma.
   ========================================================================== */

/* Cũng có trong awe-shop.css, nhưng file đó chỉ nạp ở trang khoá học / giỏ /
   thanh toán — hộp thoại này mở ở mọi trang nên phải tự mang theo. */
.awe-noscroll { overflow: hidden; }

.awe-auth {
    position: fixed;
    inset: 0;
    z-index: 130; /* trên ngăn kéo giỏ (120): đăng nhập mở được từ trong giỏ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.awe-auth[hidden] { display: none; }
.awe-auth * { box-sizing: border-box; }

.awe-auth__scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(20, 32, 31, .5);
    opacity: 0;
    transition: opacity .2s ease;
}
.awe-auth.is-open .awe-auth__scrim { opacity: 1; }

.awe-auth__panel {
    position: relative;
    width: min(430px, 100%);
    max-height: 100%;
    background: var(--awe-surface, #fff);
    color: var(--awe-ink, #14201f);
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 18px 50px rgba(20, 32, 31, .26);
}
.awe-auth.is-open .awe-auth__panel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .awe-auth__scrim,
    .awe-auth__panel { transition: none; }
}

.awe-auth__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--awe-line-soft, rgba(20, 32, 31, .08));
}
.awe-auth__title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--awe-primary, #008080);
}
.awe-auth__close {
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    color: rgba(20, 32, 31, .45);
    padding: 0 4px;
}
.awe-auth__close:hover { color: var(--awe-ink, #14201f); }

.awe-auth__body { padding: 22px; }

.awe-auth__lead {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--awe-muted, rgba(20, 32, 31, .66));
}
.awe-auth__lead strong { color: var(--awe-ink, #14201f); font-weight: 600; }

.awe-auth__msg {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-left: 3px solid var(--awe-red, #e02b20);
    background: #fdf2f1;
    border-radius: 0 var(--awe-radius, 4px) var(--awe-radius, 4px) 0;
    font-size: 14px;
    line-height: 1.55;
    color: #8d1c15;
}
.awe-auth__msg[hidden] { display: none; }
.awe-auth__msg--ok {
    border-left-color: var(--awe-primary, #008080);
    background: var(--awe-tint, #eaf2f1);
    color: #005f5f;
}

.awe-auth__field { margin-bottom: 16px; }
.awe-auth__field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
}

/* Nêu cả tên thẻ: CSS của Eduma và của Ultimate Member đều có luật
   `input[type="text"]` với trọng số cao hơn class đơn, mà cả hai đều nạp sau. */
.awe-auth__field input[type="email"],
.awe-auth__field input[type="text"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--awe-line, rgba(20, 32, 31, .14));
    border-radius: var(--awe-radius, 4px);
    background: #fff;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--awe-ink, #14201f);
    line-height: 1.4;
    box-shadow: none;
    height: auto;
}
.awe-auth__field input[type="email"]:focus,
.awe-auth__field input[type="text"]:focus {
    outline: none;
    border-color: var(--awe-primary, #008080);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, .14);
}

.awe-auth__field input.awe-auth__code {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .34em;
    text-align: center;
    /* letter-spacing đẩy cả khoảng trắng ra sau chữ số cuối, làm dãy số lệch
       trái trong ô — bù lại đúng một khoảng. */
    text-indent: .34em;
    padding: 12px 14px;
}
.awe-auth__field input.awe-auth__code::placeholder {
    color: rgba(20, 32, 31, .22);
    font-weight: 600;
}

.awe-auth__hint {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--awe-muted-2, rgba(20, 32, 31, .45));
}

.awe-auth__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--awe-line-soft, rgba(20, 32, 31, .08));
}

/* Cùng một hình dáng cho <button> và <a>: hai nút ở chân bước 2 buộc phải khác
   thẻ nhau — "Gửi lại mã" là submit thật, "Đổi email" là link thật. */
.awe-auth__link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--awe-primary, #008080);
    text-decoration: none;
    cursor: pointer;
}
.awe-auth__link:hover { color: var(--awe-primary-dark, #006b6b); }
.awe-auth__link[disabled] {
    color: var(--awe-muted-2, rgba(20, 32, 31, .45));
    cursor: default;
    font-weight: 500;
}

.awe-auth .awe-btn.is-busy {
    opacity: .65;
    pointer-events: none;
}

/* Hai widget nổi ở góc dưới đứng trên mọi thứ — plugin ot-zalo đặt
   z-index 2147483644, không xếp dưới hộp thoại được — nên chúng che mất phần
   chân hộp ("Đổi email") trên điện thoại. Khi hộp thoại mở thì giấu cả hai:
   chúng cũng thừa lúc này, số hotline đã có sẵn ngay trong hộp. */
body.awe-auth-open .awe-float,
body.awe-auth-open .zalo-chat-widget { display: none; }

@media (max-width: 480px) {
    .awe-auth { padding: 16px; }
    .awe-auth__panel { width: 100%; }
    .awe-auth__body { padding: 20px 18px; }
}