/* Halaman auth (Sign In, Sign Up, Forgot Password) */

/* Placeholder lebih lembut dari teks isian, supaya contoh tidak terlihat seperti sudah diisi */
.auth-main .form-control::placeholder {
    color: #B6B6B6;
    font-weight: 400;
    opacity: 1;
}

.auth-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 6px;
    min-height: 0;
}

.auth-error:empty {
    display: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    box-shadow: 0 0 0 1px #dc3545 !important;
    background-image: none !important;
}

.form-check-input.is-invalid {
    border-color: #dc3545;
}

select.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545 !important;
}

/* Kotak input OTP */
.auth-otp {
    gap: 8px;
}

.auth-otp input {
    width: 44px;
    max-width: 14vw;
}

/* Aturan password */
.auth-rules li {
    color: #8a8a8a;
    padding-left: 18px;
    position: relative;
}

.auth-rules li::before {
    content: "\2022";
    position: absolute;
    left: 4px;
}

.auth-rules li.is-met {
    color: #198754;
}

.auth-rules li.is-met::before {
    content: "\2713";
    left: 2px;
}

/* Pilihan WhatsApp / email */
.auth-channel {
    background-color: #F5F5F5;
    color: #000;
    border: 1px solid transparent;
}

.btn-check:checked + .auth-channel {
    background-color: #000;
    color: #fff;
}

/* ------------------------------------------------------------------
   Popup — mengikuti modal dashboard (sudut potong, logo, ikon garis)
   ------------------------------------------------------------------ */
.auth-popup .modal-dialog {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.auth-popup-card {
    border-radius: 0;
    clip-path: polygon(
        20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
        calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px
    );
}

.auth-popup.fade .modal-dialog {
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s ease-out;
}

.auth-popup.show .modal-dialog {
    transform: none;
}

/* Ukuran asli gambar (BRAND_POPUP_LOGO), tidak pernah melebihi 65% / 220px. */
.auth-popup-logo {
    width: auto;
    max-width: min(65%, 220px);
}

.auth-popup-icon [data-icon] {
    display: none;
    width: 72px;
    height: 72px;
    margin: 0 auto;
}

.auth-popup-icon [data-icon].is-active {
    display: block;
}

.auth-popup-icon [data-icon="info"] {
    color: #9F937E;
}

.auth-popup-icon [data-icon="warning"] {
    color: #D49A00;
}

.auth-popup .auth-popup-message {
    color: #4a4a4a;
    line-height: 1.6;
    white-space: pre-line;
}

.auth-popup-actions {
    display: flex;
    gap: 8px;
}

.auth-popup-actions > * {
    flex: 1 1 0;
    min-height: 38px;
}

.auth-popup-actions:not(.is-pair) > .auth-popup-primary {
    flex-basis: 100%;
}

/* Tombol emas bersudut potong */
.btn.auth-btn-chamfer {
    border-radius: 0;
    padding: 8px 16px;
    clip-path: polygon(
        8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px
    );
}

/* Tombol outline hitam bersudut potong (seperti .bc-redeem di dashboard) */
.auth-btn-outline {
    position: relative;
    border: 0;
    padding: 0;
    background: #000;
    color: #000;
    cursor: pointer;
    clip-path: polygon(
        8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
        calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px
    );
}

.auth-btn-outline > span {
    position: absolute;
    inset: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    transition: background-color 0.3s, color 0.3s;
    clip-path: polygon(
        7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
        calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px
    );
}

.auth-btn-outline:hover > span,
.auth-btn-outline:focus-visible > span {
    background: #000;
    color: #fff;
}