/* ============================================================
   AUTH PAGES (Login / Register / Verify)
   Gumagamit ng design-system.css tokens para consistent sa
   buong app. Walang external image dependency (dating
   naka-hotlink sa Unsplash) -- self-contained gradient +
   pattern na lang, mas mabilis mag-load at walang panganib na
   mawala/magbago ang external resource.
   ============================================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(41,84,229,.25), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(14,165,160,.20), transparent 45%),
        linear-gradient(135deg, #0B1220 0%, #14181F 55%, #0B1220 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    animation: authBgFade .6s var(--ease, ease) both;
}

@keyframes authBgFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

.login-card{
    width:100%;
    max-width:1150px;
    background:var(--surface, #fff);
    border-radius:28px;
    overflow:hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
    animation: authCardRise .5s var(--ease, ease) .1s both;
}

@keyframes authCardRise{
    from{ opacity:0; transform: translateY(18px) scale(.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
}

.left-panel{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 50%),
        linear-gradient(160deg, var(--accent, #0038A8), var(--accent-dark, #002875));
    color:#fff;
    padding:60px 40px;
    min-height:760px;
    position:relative;
    overflow:hidden;
}

.left-panel::before{
    /* Tahimik na dekorasyon -- concentric rings, walang external image */
    content:"";
    position:absolute;
    inset:-20%;
    background:
        repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 42px);
    pointer-events:none;
}

.left-panel img{
    width:132px;
    margin-bottom:22px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
    position:relative;
}

.left-panel h2, .left-panel h5, .left-panel p, .system-badge{
    position:relative;
}

.left-panel h2{
    font-family: var(--font-display, 'Familjen Grotesk', sans-serif);
    font-weight:800;
    letter-spacing:-.01em;
}

.left-panel h5{
    font-weight:500;
    opacity:.92;
    margin-bottom:18px;
}

.left-panel p{
    opacity:.82;
    font-size:14.5px;
    line-height:1.7;
    max-width:380px;
}

.system-badge{
    margin-top:28px;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1.1rem;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.02em;
    backdrop-filter: blur(6px);
}

.right-panel{
    padding:55px 50px;
    background:var(--surface, #fff);
}

.form-title{
    font-family: var(--font-display, 'Familjen Grotesk', sans-serif);
    font-size:32px;
    font-weight:800;
    color: var(--ink, #14181F);
    letter-spacing:-.01em;
}

.form-subtitle{
    color: var(--muted, #74798A);
    margin-bottom:32px;
    font-size:14.5px;
}

.form-control{
    height:54px;
    border-radius: var(--radius-sm, 12px);
    border:1.5px solid var(--border, #E5E9F0);
    font-size:14.5px;
    transition: border-color .18s var(--ease, ease), box-shadow .18s var(--ease, ease), transform .1s var(--ease, ease);
}

.form-control:focus{
    border-color: var(--accent, #0038A8);
    box-shadow: 0 0 0 4px var(--accent-soft, #EAF0FF);
}

.form-control.is-invalid{
    border-color: var(--danger, #E23744);
}

.btn-custom{
    height:54px;
    border:none;
    border-radius: var(--radius-sm, 12px);
    background: linear-gradient(135deg, var(--accent, #0038A8), var(--accent-dark, #002875));
    color:#fff;
    font-weight:700;
    letter-spacing:.02em;
    transition: transform .15s var(--ease, ease), box-shadow .15s var(--ease, ease), opacity .15s var(--ease, ease);
    box-shadow: 0 10px 24px -10px rgba(41,84,229,.55);
}

.btn-custom:hover:not(:disabled){
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(41,84,229,.65);
}

.btn-custom:active:not(:disabled){
    transform: translateY(0);
}

.btn-custom:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
}

.switch-link,
.privacy-link{
    color: var(--accent, #0038A8);
    cursor:pointer;
    font-weight:700;
    transition: color .15s var(--ease, ease);
}

.switch-link:hover,
.privacy-link:hover{
    color: var(--accent-dark, #002875);
    text-decoration: underline;
}

.hidden{
    display:none;
}

/* Smooth fade/slide kapag nag-toggle sa pagitan ng login/register/verify forms */
#loginForm, #registerForm, #verifyForm{
    animation: authFormIn .35s var(--ease, ease) both;
}

@keyframes authFormIn{
    from{ opacity:0; transform: translateX(8px); }
    to{ opacity:1; transform: translateX(0); }
}

.modal-content{
    border:none;
    border-radius: var(--radius-lg, 24px);
}

.modal-header{
    background: linear-gradient(135deg, var(--accent, #0038A8), var(--accent-dark, #002875));
    color:#fff;
}

.privacy-box{
    height:520px;
    overflow-y:auto;
    border:1px solid var(--border, #E5E9F0);
    border-radius: var(--radius, 18px);
    padding:35px;
    background: var(--surface-alt, #F6F8FC);
}

.notice-warning{
    background: var(--warning-soft, #FFF4E0);
    border:1px solid var(--warning, #F59E0B);
    border-radius: var(--radius-sm, 12px);
    padding:20px;
    margin-top:30px;
}

.read-box{
    background: var(--surface-alt, #F6F8FC);
    border:1px solid var(--border, #E5E9F0);
    padding:18px;
    border-radius: var(--radius-sm, 12px);
}

.footer-note{
    font-size:13px;
    color: var(--muted, #74798A);
}

@media(max-width:768px){

.left-panel{
    min-height:auto;
    padding:45px 25px;
}

.right-panel{
    padding:40px 25px;
}

}