/* ============================================================
   myseries_auth.css
   Styling halaman auth (login / register / OTP / lupa password)
   selaras token tema Visual Editor.

   Aturan warna:
   - Brand & turunannya  -> var(--mys-aksen) + color-mix (ikut Visual Editor).
   - Teks netral         -> var(--mys-teks-utama / --mys-teks-muted).
   - Status (sukses/error/warning/info) -> KONSTAN (semantik universal).
   - Brand platform (WhatsApp #25D366/#075e54, Google G) -> KONSTAN.
   color-mix sudah dipakai di template auth sebelumnya (aman untuk target browser).
   ============================================================ */

.mys-auth { padding-bottom: 40px; }
.mys-auth__container { max-width: 440px; margin: 0 auto; }

/* ── Alert / pesan ── */
.mys-auth-alert {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-align: left;
}
.mys-auth-alert--success { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.mys-auth-alert--warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.mys-auth-alert--error   { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.mys-auth-alert--info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* ── Tab switcher ── */
.mys-auth-tabs {
    display: flex;
    border-bottom: 2px solid color-mix(in srgb, var(--mys-aksen) 20%, transparent);
    margin-bottom: 28px;
}
.mys-auth-tab {
    flex: 1;
    padding: 11px 6px;
    border: none;
    background: none;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--mys-teks-muted, #8a8a8a);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}
.mys-auth-tab.is-active {
    color: var(--mys-aksen);
    border-bottom-color: var(--mys-aksen);
    font-weight: 700;
}

/* ── Teks bantu & link ── */
.mys-auth-hint { font-size: 0.82rem; color: var(--mys-teks-muted, #8a8a8a); line-height: 1.5; }
.mys-auth-hint--sm { font-size: 0.78rem; }
.mys-auth-hint--center { text-align: center; }
.mys-auth-link { color: var(--mys-aksen); font-weight: 600; text-decoration: none; }
.mys-auth-forgot { text-align: right; margin: -8px 0 14px; font-size: 0.82rem; }

/* ── Input garis-bawah (OTP email, WA phone) ── */
.mys-auth-uinput {
    width: 100%;
    border: none;
    border-bottom: 2px solid color-mix(in srgb, var(--mys-aksen) 28%, #fff);
    padding: 10px 0;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
}

/* ── Tombol utama (pill aksen) ── */
.mys-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--mys-aksen);
    color: var(--mys-teks-aksen, #fff);
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 14px;
    transition: opacity .15s;
}
.mys-auth-btn:hover { opacity: .88; }
.mys-auth-btn--wa { background: #25D366; color: #fff; }   /* WhatsApp brand — konstan */

/* Tombol static lama (register page) ikut warna brand */
.auth-page-body .auth-form__button {
    background-color: var(--mys-aksen) !important;
    color: var(--mys-teks-aksen, #fff) !important;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.auth-page-body .auth-form__button:hover { opacity: .88; }
.auth-page-body .auth-form__info-text a,
.auth-page-body .auth-form__single-field a { color: var(--mys-aksen) !important; }

/* ── Tombol teks / link-button ── */
.mys-auth-textbtn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mys-aksen);
}
.mys-auth-textbtn--muted {
    color: var(--mys-teks-muted, #8a8a8a);
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 10px;
}
.mys-auth-textbtn--wa { color: #25D366; }
.mys-auth-inline-link {
    background: none;
    border: none;
    padding: 0;
    color: #b45309;                 /* warning-link, konstan (di dalam banner warning) */
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.78rem;
}

/* ── Kotak digit OTP ── */
.otp-digit, .wa-otp-digit {
    width: 46px;
    height: 54px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    border: 2px solid color-mix(in srgb, var(--mys-aksen) 28%, #fff);
    border-radius: 12px;
    outline: none;
    background: #fafafa;
    transition: .15s;
}
.mys-auth-otp-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }

/* ── Step 2 (setelah OTP dikirim) ── */
.mys-auth-step2 { text-align: center; }
.mys-auth-emoji { font-size: 2.5rem; margin-bottom: 10px; }
.mys-auth-sent { font-size: 0.88rem; color: var(--mys-teks-muted, #888); margin-bottom: 12px; line-height: 1.6; }
.mys-auth-sent strong { color: var(--mys-teks-utama, #1e2a3a); }

/* ── Divider "or continue with" ── */
.mys-auth-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 16px; }
.mys-auth-divider::before,
.mys-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--mys-aksen) 14%, #fff);
}
.mys-auth-divider span { font-size: 0.75rem; color: var(--mys-teks-muted, #999); white-space: nowrap; }

/* ── Tombol social ── */
.mys-auth-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1.5px solid #e8e8e8;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .15s;
}
.mys-auth-social:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.mys-auth-social--wa { border-color: #25D366; color: #075e54; }   /* WhatsApp brand — konstan */

/* ── WhatsApp country picker ── */
.mys-auth-wa-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid color-mix(in srgb, var(--mys-aksen) 28%, #fff);
    padding: 4px 0;
}
.mys-auth-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 6px 8px 6px 0;
    cursor: pointer;
    font-size: 0.92rem;
    white-space: nowrap;
    color: var(--mys-teks-utama, #444);
    touch-action: manipulation;
}
.mys-auth-wa-phone {
    flex: 1;
    border: none;
    padding: 6px 0 6px 6px;
    font-size: 0.95rem;
    outline: none;
    background: transparent;
    min-width: 0;
}
.mys-auth-country-dd {
    display: none;
    position: absolute;
    z-index: 999;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--mys-aksen) 25%, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    max-height: 220px;
    overflow-y: auto;
    width: 260px;
    margin-top: 4px;
}
.mys-auth-country-search-wrap { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--mys-aksen) 12%, #fff); }
.mys-auth-country-search { width: 100%; border: none; outline: none; font-size: 0.85rem; background: transparent; }
.mys-auth-country-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    display: flex;
    gap: 8px;
    align-items: center;
}
.mys-auth-country-item:hover { background: color-mix(in srgb, var(--mys-aksen) 6%, #fff); }
.mys-auth-country-item__name { flex: 1; }
.mys-auth-country-item__dial { color: var(--mys-teks-muted, #aaa); font-size: 0.8rem; }

/* ── Header terpusat (verify OTP dsb) ── */
.mys-auth-head { text-align: center; margin-bottom: 24px; }
.mys-auth-head__title { font-weight: 700; margin: 0 0 8px; color: var(--mys-teks-utama, #1e2a3a); }
.mys-auth-otp-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mys-teks-utama, #555);
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

/* ── Link "kembali" (netral, muted) ── */
.mys-auth-backlink { color: var(--mys-teks-muted, #8a8a8a); text-decoration: none; font-size: 0.85rem; }
.mys-auth-backlink--sm { font-size: 0.8rem; }

/* ── Password reveal (eye) + wrapper ── */
.mys-auth-pw-wrap { position: relative; }
.mys-auth-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--mys-teks-muted, #bbb);
    user-select: none;
    line-height: 0;
    display: flex;
    align-items: center;
}

/* ── Catatan kecil di bawah field (cocok/tak cocok, cek referral) ── */
.mys-auth-field-note { font-size: 0.72rem; margin-top: 3px; min-height: 14px; }

/* ── Kotak digit OTP varian besar (verify_otp) ── */
.otp-digit--lg { width: 48px; height: 56px; font-size: 1.5rem; }