/* NNS PAY LOGIN - UNIFIED THEME */

.auth-container {
    gap: 0 !important;
    column-gap: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.auth-container .auth-left,
.auth-container .auth-right {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* LIGHT MODE */
html[data-theme="light"] body,
html[data-theme="light"] body .auth-container,
html[data-theme="light"] body .auth-container .auth-left,
html[data-theme="light"] body .auth-container .auth-right {
    background: #f5f7fb !important;
    background-color: #f5f7fb !important;
    background-image: none !important;
}

/* DARK MODE */
html[data-theme="dark"] body,
html[data-theme="dark"] body .auth-container,
html[data-theme="dark"] body .auth-container .auth-left,
html[data-theme="dark"] body .auth-container .auth-right {
    background: #11152d !important;
    background-color: #11152d !important;
    background-image: none !important;
}

/* HILANGKAN PEMBATAS / ORNAMEN */
.auth-container .auth-left::before,
.auth-container .auth-left::after,
.auth-container .auth-right::before,
.auth-container .auth-right::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* MOBILE */
@media screen and (max-width: 991px) {
    html[data-theme="light"] body .auth-container,
    html[data-theme="light"] body .auth-container .auth-left,
    html[data-theme="light"] body .auth-container .auth-right {
        background: #f5f7fb !important;
    }

    html[data-theme="dark"] body .auth-container,
    html[data-theme="dark"] body .auth-container .auth-left,
    html[data-theme="dark"] body .auth-container .auth-right {
        background: #11152d !important;
    }
}

/* LOGIN - INPUT DARK MODE */
html[data-theme="dark"] body .auth-container .auth-right input,
html[data-theme="dark"] body .auth-container .auth-right textarea,
html[data-theme="dark"] body .auth-container .auth-right select {
    background: #1a1f3a !important;
    background-color: #1a1f3a !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #4b557a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .auth-container .auth-right input::placeholder,
html[data-theme="dark"] body .auth-container .auth-right textarea::placeholder {
    color: #aeb5c7 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body .auth-container .auth-right input:focus,
html[data-theme="dark"] body .auth-container .auth-right textarea:focus,
html[data-theme="dark"] body .auth-container .auth-right select:focus {
    background: #1a1f3a !important;
    background-color: #1a1f3a !important;
    color: #ffffff !important;
    border-color: #6c63ff !important;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, .15) !important;
}

/* Cegah autofill browser mengubah input menjadi putih */
html[data-theme="dark"] body .auth-container .auth-right input:-webkit-autofill,
html[data-theme="dark"] body .auth-container .auth-right input:-webkit-autofill:hover,
html[data-theme="dark"] body .auth-container .auth-right input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #1a1f3a inset !important;
    box-shadow: 0 0 0 1000px #1a1f3a inset !important;
    border: 1px solid #4b557a !important;
}


/* LOGIN - INPUT FOCUS LIGHT MODE */
html[data-theme="light"] body .auth-container .auth-right input:focus,
html[data-theme="light"] body .auth-container .auth-right textarea:focus,
html[data-theme="light"] body .auth-container .auth-right select:focus {
    border-color: #6c63ff !important;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, .15),
                0 0 12px rgba(108, 99, 255, .20) !important;
    outline: none !important;
}

/* Hilangkan glow merah bawaan browser/theme */
html[data-theme="light"] body .auth-container .auth-right input,
html[data-theme="light"] body .auth-container .auth-right textarea,
html[data-theme="light"] body .auth-container .auth-right select {
    outline-color: #6c63ff !important;
}

html[data-theme="light"] body .auth-container .auth-right input:focus-visible,
html[data-theme="light"] body .auth-container .auth-right textarea:focus-visible,
html[data-theme="light"] body .auth-container .auth-right select:focus-visible {
    border-color: #6c63ff !important;
    outline: none !important;
}


/* LOGIN - INPUT LIGHT MODE */
html[data-theme="light"] body .auth-container .auth-right input,
html[data-theme="light"] body .auth-container .auth-right textarea,
html[data-theme="light"] body .auth-container .auth-right select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #202638 !important;
    border: 1px solid #d9deea !important;
    box-shadow: none !important;
}

/* Saat diklik/fokus */
html[data-theme="light"] body .auth-container .auth-right input:focus,
html[data-theme="light"] body .auth-container .auth-right textarea:focus,
html[data-theme="light"] body .auth-container .auth-right select:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #202638 !important;
    border-color: #6c63ff !important;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, .15),
                0 0 12px rgba(108, 99, 255, .20) !important;
    outline: none !important;
}

/* Autofill Light Mode */
html[data-theme="light"] body .auth-container .auth-right input:-webkit-autofill,
html[data-theme="light"] body .auth-container .auth-right input:-webkit-autofill:hover,
html[data-theme="light"] body .auth-container .auth-right input:-webkit-autofill:focus {
    -webkit-text-fill-color: #202638 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border: 1px solid #d9deea !important;
}


/* LOGIN - GLOW SAMA SEPERTI LUPA PASSWORD */
html[data-theme="light"] body .auth-container .auth-right input:focus,
html[data-theme="light"] body .auth-container .auth-right input:focus-visible {
    border-color: #6c63ff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12) !important;
}


/* =========================================================
   NNS PAY LOGIN - FOCUS GLOW FINAL
   ========================================================= */

/* LIGHT MODE */
html[data-theme="light"] body .auth-container .auth-right input.form-control:focus,
html[data-theme="light"] body .auth-container .auth-right .form-control:focus,
html[data-theme="light"] body .auth-container .auth-right input:focus,
html[data-theme="light"] body .auth-container .auth-right .input-group:focus-within {
    border-color: #6c63ff !important;
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(108, 99, 255, 0.12) !important,
        0 0 12px rgba(108, 99, 255, 0.18) !important;
}

/* DARK MODE */
html[data-theme="dark"] body .auth-container .auth-right input.form-control:focus,
html[data-theme="dark"] body .auth-container .auth-right .form-control:focus,
html[data-theme="dark"] body .auth-container .auth-right input:focus,
html[data-theme="dark"] body .auth-container .auth-right .input-group:focus-within {
    border-color: #6c63ff !important;
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(108, 99, 255, 0.16) !important,
        0 0 12px rgba(108, 99, 255, 0.22) !important;
}

/* Pastikan glow tidak dikalahkan oleh box-shadow bawaan */
html[data-theme="light"] body .auth-container .auth-right input:focus-visible,
html[data-theme="dark"] body .auth-container .auth-right input:focus-visible {
    border-color: #6c63ff !important;
    outline: none !important;
}

/* Jika input berada di dalam wrapper */
html[data-theme="light"] body .auth-container .auth-right .input-group:focus-within,
html[data-theme="dark"] body .auth-container .auth-right .input-group:focus-within {
    border-radius: 8px !important;
}


/* =========================================================
   LOGIN - GLOW SAMA PERSIS DENGAN LUPA PASSWORD
   ========================================================= */

/* LIGHT MODE */
html[data-theme="light"] body .auth-container .auth-right .form-control:focus {
    background: #ffffff !important;
    border-color: var(--yellow-primary) !important;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
    outline: none !important;
}

/* DARK MODE */
html[data-theme="dark"] body .auth-container .auth-right .form-control:focus {
    background: #1b2135 !important;
    border-color: var(--yellow-primary) !important;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
    outline: none !important;
}

/* PASSWORD INPUT GROUP */
html[data-theme="light"] body .auth-container .auth-right .input-group:focus-within,
html[data-theme="dark"] body .auth-container .auth-right .input-group:focus-within {
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
}


/* =========================================================
   LOGIN - FINAL FOCUS GLOW
   KHUSUS INPUT USERNAME & PASSWORD
   ========================================================= */

/* LIGHT MODE */
html[data-theme="light"] body .auth-container .auth-right input.form-control:focus {
    background: #ffffff !important;
    border: 1px solid var(--yellow-primary) !important;
    border-color: var(--yellow-primary) !important;
    outline: none !important;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
}

/* DARK MODE */
html[data-theme="dark"] body .auth-container .auth-right input.form-control:focus {
    background: #1b2135 !important;
    border: 1px solid var(--yellow-primary) !important;
    border-color: var(--yellow-primary) !important;
    outline: none !important;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
}

/* PASSWORD GROUP */
html[data-theme="light"] body .auth-container .auth-right .input-group:focus-within,
html[data-theme="dark"] body .auth-container .auth-right .input-group:focus-within {
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
}


/* =========================================================
   LOGIN - ALLOW INPUT GLOW TO SHOW
   ========================================================= */

html[data-theme="light"] body .auth-container .auth-right .auth-form,
html[data-theme="dark"] body .auth-container .auth-right .auth-form {
    overflow: visible !important;
}

/* USERNAME - SAMA DENGAN LUPA PASSWORD */
html[data-theme="light"] body .auth-container .auth-right .form-control:focus,
html[data-theme="dark"] body .auth-container .auth-right .form-control:focus {
    border-color: var(--yellow-primary) !important;
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--yellow-primary) 14%,
            transparent
        ) !important;
    outline: none !important;
}

/* LOGIN - SAMAKAN KOLOM DENGAN REGISTER */
body .auth-container .auth-right .auth-form .form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body .auth-container .auth-right .auth-form .input-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html[data-theme="light"] body .auth-container .auth-right .form-control {
    background: #fafbfc !important;
    color: #34364a !important;
    border-color: #dfe3eb !important;
}

html[data-theme="light"] body .auth-container .auth-right .form-control:focus {
    background: #fff !important;
    border-color: var(--yellow-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow-primary) 14%, transparent) !important;
}
html[data-theme="dark"] body .auth-container .auth-right .form-control {
    background: #1b2135 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] body .auth-container .auth-right .form-control:focus {
    background: #1b2135 !important;
    border-color: var(--yellow-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow-primary) 14%, transparent) !important;
}
html[data-theme="light"] body .auth-container .auth-right .auth-form .form-control:focus,
html[data-theme="light"] body .auth-container .auth-right .auth-form .input-group .form-control:focus {
    background: #fff !important;
    color: #34364a !important;
    border-color: var(--yellow-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow-primary) 14%, transparent) !important;
    outline: none !important;
}
/* WARNA ICON FITUR LOGIN - IKUT WARNA TOMBOL */
.auth-features .auth-feature i {
    color: var(--yellow-primary) !important;
}
html[data-theme="light"] body .auth-container .auth-left .auth-features .auth-feature i,
html[data-theme="dark"] body .auth-container .auth-left .auth-features .auth-feature i {
    color: var(--yellow-primary) !important;
}