/* ==========================================================
   Halaman Login
   static/custom/css/auth/login.css
   ========================================================== */

:root {
    --oc-navy: #2B5BA7;
    --oc-navy-hover: #101f52;
    --oc-purple-light: #c9d3f7;
    --oc-purple-mid: #93a4e8;
    --oc-purple-deep: #7b8fe0;
}

.oc-illustration-panel {
    background: radial-gradient(circle at 35% 50%, var(--oc-purple-light) 0%, var(--oc-purple-mid) 55%, var(--oc-purple-deep) 100%);
}
.oc-illustration-panel .oc-illustration-img {
    max-width: 520px;
    width: 90%;
}

/* ===== PIN Modal ===== */
#pinModal .modal-content {
    border-radius: 16px;
    border: none;
}
.oc-pin-title-box {
    text-align: center;
    padding: 10px;
    font-weight: 800;
    font-size: 18px;
    color: #1e2a5a;
    margin-bottom: 24px;
}
.oc-pin-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
.oc-pin-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #d0d3dc;
    transition: all .15s ease;
}
.oc-pin-dot.filled {
    background-color: var(--oc-navy);
    border-color: var(--oc-navy);
}
.oc-pin-helper {
    text-align: center;
    color: var(--oc-navy);
    font-weight: 600;
    margin-bottom: 24px;
}
.oc-pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-items: center;
    margin-bottom: 24px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.oc-pin-key {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1.5px solid #dcdfe6;
    background: #fff;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .1s ease;
}
.oc-pin-key:hover {
    background: #f5f6fb;
    border-color: var(--oc-navy);
}
.oc-pin-key.oc-pin-key-empty {
    border: none;
    cursor: default;
}
.oc-pin-key.oc-pin-key-empty:hover {
    background: transparent;
}
.oc-pin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.oc-pin-footer .oc-pin-cancel {
    color: #7e8299;
    font-weight: 700;
    background: none;
    border: none;
}

/* Desktop: gambar kiri fix, form kanan scroll sendiri */
@media (min-width: 992px) {
    .auth-root {
        height: 100vh;
        overflow: hidden;
    }
    .auth-form-col {
        height: 100vh;
        overflow-x: auto;
        scrollbar-width: none; /* Untuk Firefox */
    }

    /* Untuk Chrome, Safari, dan Edge */
    .auth-form-col::-webkit-scrollbar {
        display: none;
    }
    .auth-image-col {
        height: 100vh;
    }
}