/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 2 Sept 2025, 9:44:34 am
    Author     : plutus
*/
:root{
    --bg:#1c1823;
    --panel:#231e2b;
    --panel-2:#2b2534;
    --input:#302a3a;
    --border:#3c3550;
    --text:#e9e6f5;
    --muted:#b0a7c8;
    --accent:#7a5cf5;
    --accent-hover:#8c72ff;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
}

*{
    box-sizing:border-box
}
html,body{
    height:100%;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.bg{
    margin:0;
    background: #0a0a0a;
    color:var(--text);
    align-content: center;
    font:16px/1.5 Inter,BlinkMacSystemFont, system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Galaxy Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(238,238,238,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.15), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(221,221,221,0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: galaxyMove 30s linear infinite;
    z-index: -1;
}

@keyframes galaxyMove {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-50px) translateY(-25px);
    }
    50% {
        transform: translateX(-100px) translateY(0);
    }
    75% {
        transform: translateX(-50px) translateY(25px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

/* Additional Galaxy Layers */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 50px 50px, rgba(138, 43, 226, 0.2), transparent),
        radial-gradient(2px 2px at 100px 100px, rgba(75, 0, 130, 0.15), transparent),
        radial-gradient(1px 1px at 150px 25px, rgba(148, 0, 211, 0.1), transparent),
        radial-gradient(2px 2px at 200px 75px, rgba(72, 61, 139, 0.18), transparent),
        radial-gradient(1px 1px at 250px 50px, rgba(123, 104, 238, 0.12), transparent);
    background-repeat: repeat;
    background-size: 300px 150px;
    animation: galaxyRotate 40s linear infinite;
    z-index: -1;
}

@keyframes galaxyRotate {
    0% {
        transform: rotate(0deg) translateX(0) translateY(0);
    }
    25% {
        transform: rotate(90deg) translateX(-30px) translateY(-15px);
    }
    50% {
        transform: rotate(180deg) translateX(0) translateY(-30px);
    }
    75% {
        transform: rotate(270deg) translateX(30px) translateY(-15px);
    }
    100% {
        transform: rotate(360deg) translateX(0) translateY(0);
    }
}

/* Shooting Stars */
.shooting-star {
    position: fixed;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    z-index: -1;
    animation: shootingStar 3s linear infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, white, transparent);
    transform: translateX(-100px);
}

.shooting-star:nth-child(1) {
    top: 20%;
    left: 100%;
    animation-delay: 0s;
    animation-duration: 4s;
}

.shooting-star:nth-child(2) {
    top: 60%;
    left: 100%;
    animation-delay: 2s;
    animation-duration: 3.5s;
}

.shooting-star:nth-child(3) {
    top: 80%;
    left: 100%;
    animation-delay: 4s;
    animation-duration: 3s;
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100vw) translateY(100px);
        opacity: 0;
    }
}

/* Nebula Effects */
.nebula {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
    z-index: -1;
    animation: nebulaFloat 25s ease-in-out infinite;
}

.nebula:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.nebula:nth-child(2) {
    top: 60%;
    right: 10%;
    animation-delay: 10s;
    background: radial-gradient(circle, rgba(75, 0, 130, 0.1) 0%, transparent 70%);
}

.nebula:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 20s;
    background: radial-gradient(circle, rgba(148, 0, 211, 0.1) 0%, transparent 70%);
}

@keyframes nebulaFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-30px, 50px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(30px, 20px) scale(1.05);
        opacity: 0.6;
    }
}

/* Disable animated galaxy background on mobile */
@media (max-width: 768px){
    body::before,
    body::after{
        animation:none;
        content:none;
    }

    .shooting-star,
    .nebula{
        animation:none;
        display:none;
    }
}

.plutus-header {
    text-align: center;
}

.wave-text{
    display: inline-block;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
    text-shadow:
        0 0 10px rgba(122, 92, 245, 0.8),
        0 0 20px rgba(122, 92, 245, 0.6),
        0 0 30px rgba(122, 92, 245, 0.4);
    transition: all 0.3s ease;
    position: relative;
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    animation: purpleSweep 3s ease-in-out infinite;

}

.wave-text:hover {
    text-shadow:
        0 0 15px rgba(122, 92, 245, 1),
        0 0 25px rgba(122, 92, 245, 0.8),
        0 0 35px rgba(122, 92, 245, 0.6),
        0 0 45px rgba(122, 92, 245, 0.4);
    transform: scale(1.05);
}



/*.wave-text {
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Arial', sans-serif;
    position: relative;
    display: inline-block;
    color: #fff;

    background: linear-gradient(
        90deg,
        #5a189a 0%,
        #9d4edd 45%,
        #ffffff 50%,
        #9d4edd 55%,
        #5a189a 100%
        );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    animation: purpleSweep 3s ease-in-out infinite;
}*/

.page-center{

    display: grid;
    place-items: center;
    padding: 24px;
    margin-bottom: 100px;
}


.auth-shell{
    max-width:1100px;
    margin: 0;
    padding:18px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:28px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:24px;
    box-shadow:var(--shadow);
}

.visual{
    position:relative
}
.back-link{
    position:absolute;
    top:-12px;
    left:14px;
    transform:translateY(-100%);
    background:rgba(255,255,255,.08);
    color:var(--text);
    padding:10px 14px;
    border-radius:20px;
    text-decoration:none;
    font-weight:500;
    border:1px solid rgba(255,255,255,.1)
}
.back-link .arrow{
    margin-left:6px
}

.visual-card{
    background:var(--panel);
    border-radius:24px;
    overflow:hidden;
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}
.hero{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:.9
}
.visual-caption{
    position:relative;
    padding:24px;
    z-index:1;
    background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.55) 100%);
    border-top-left-radius:24px;
    border-top-right-radius:24px
}
.visual-caption h2{
    margin:8px 0 0;
    font-size:28px;
    font-weight:700
}
.dots{
    display:flex;
    gap:8px;
    margin-bottom:12px
}
.dots span{
    width:28px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.25)
}
.dots .active{
    background:#fff
}

.form-panel{
    background:var(--panel);
    border-radius:24px;
    padding:34px 30px;
    border:1px solid rgba(255,255,255,.06)
}

.form-header h1{
    margin:0 0 10px;
    font-size:36px
}
.form-header .sub{
    color:var(--muted)
}
.form-header .sub a{
    color:#cbbcff;
    text-decoration:none
}
.form-header .sub a:hover{
    text-decoration:underline
}

.reg-form{
    margin-top:10px;
    display:grid;
    gap:30px;
    height: 100%;
}
.reg-form--login{
    gap:22px;
}
.reg-form--signup{
    gap:30px;
}
.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.input{
    width:100%;
    padding:12px 15px;
    border-radius:12px;
    background:var(--input);
    border:1px solid var(--border);
    color:var(--text);
    outline:none;
    font-size:1rem
}

.input--login{
    padding:10px 15px !important;
}
.input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(122,92,245,.25)
}
.password-field{
    position:relative
}
.password-field .eye{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    cursor:pointer;
    opacity:.8;
    color:#cfc7ea
}
.password-field .eye:hover{
    opacity:1
}

.terms{
    display:flex;
    align-items:center;
    gap:10px;
    color:#d8d3ea;
    font-size:14px
}
.terms a{
    color:#cbbcff;
    text-decoration:none
}
.terms a:hover{
    text-decoration:underline
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:12px;
    border:1px solid var(--border);
    text-decoration:none;
    color:var(--text);
    cursor:pointer;
    background:var(--panel-2)
}
.btn.primary{
    background:var(--accent);
    border-color:transparent;
    font-weight:600
}

.btn.primary:hover{
    background:var(--accent-hover)
}

/* Additional login/signup-specific footer text */
.auth-footer{
    font-size:0.75rem;
}

.btn.oauth{
    gap:8px;
    background:transparent
}
.btn.oauth:hover{
    background:rgba(255,255,255,.06)
}

/* Contact stack (PrimeFaces) sizing */
.contact-stack.ui-stack .ui-stack-control{
    width:40px;
    height:40px;
}

.contact-stack.ui-stack .ui-menuitem-link{
    font-size:0.85rem;
    padding:4px 10px;
}

@media (max-width: 768px){
    .contact-stack.ui-stack .ui-stack-control{
        width:34px;
        height:34px;
    }

    .contact-stack.ui-stack .ui-menuitem-link{
        font-size:0.8rem;
        padding:3px 8px;
    }
}

.btn.outlined {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--primary-color);
}

.btn .g{
    font-weight:800
}

.divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    margin:4px 0
}
.divider::before,.divider::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.12)
}
.oauth-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.msgs{
    margin:0;
    padding:0;
    list-style:none
}
.msgs li{
    background:#3a2f4d;
    padding:10px 12px;
    border-radius:10px;
    margin-bottom:8px;
    border:1px solid #4b3f62
}

/* Carousel container styled like your visual card */
.carousel{
    position: relative;
    background: var(--panel);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    height: 100%;
    min-height: 600px;
    min-width: 600px;
    display: grid;
}

/* Horizontal track */
.carousel-track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    height: 100%;
    transition: transform .45s ease;
}

/* Slide card */
.slide {
    display: grid;
    place-content: end start;
    padding: 28px;
    background:
        radial-gradient(1200px 600px at 10% 0%, rgba(122,92,245,.18), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5));
    background-image: url('../img/your-slide-image.jpg'); /* override this per slide */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}


/* Specific backgrounds */
.slide-1 {
    background-image:
        url("/jakarta.faces.resource/images/crypto.png.xhtml"),
        radial-gradient(1200px 600px at 10% 0%, rgba(122,92,245,0.18), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(255,255,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}

.slide-2 {
    background-image:
        url("/jakarta.faces.resource/images/proxies.png.xhtml"),
        radial-gradient(1200px 600px at 10% 0%, rgba(122,92,245,0.18), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(255,255,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}

.slide-3 {
    background-image:
        url("/jakarta.faces.resource/images/phone.png.xhtml"),
        radial-gradient(1200px 600px at 10% 0%, rgba(122,92,245,0.18), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(255,255,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}
/* Nav arrows */
.nav{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text);
    border-radius: 10px;
    cursor: pointer;
}
.nav.prev{
    right: 58px;
}
.nav:hover{
    background: rgba(255,255,255,.16);
}

/* Dots */
.dots{
    position: absolute;
    left: 35px;
    top: 20px;
    display: flex;
    gap: 8px;
}
.dots button{
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    border: 0;
    cursor: pointer;
}
.dots button.active{
    background: #fff;
}

/* Small CTA */
.btn.small{
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
    background: var(--accent);
    border: 0;
}
.btn.small:hover{
    background: var(--accent-hover);
}

.btn-switch {
    display: inline-block;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--accent);
    color: var(--accent);
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-switch:hover {
    background-color: var(--accent);
    color: white;
}

.btn.loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.btn.loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.otp-field{
    width:100%;
}

.otp-input-group{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:12px 0 4px;
}

.otp-input{
    width:52px;
    height:60px;
    text-align:center;
    font-size:1.5rem;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--input);
    color:var(--text);
    transition:border-color 0.2s ease, transform 0.2s ease;
}

.otp-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(122,92,245,0.2);
    transform:translateY(-2px);
}

.otp-input:disabled{
    opacity:0.5;
}

@media (max-width: 980px){
    .auth-shell{
        grid-template-columns:1fr
    }
    .visual{
        order:2
    }
}

@media (max-width: 768px){
    .page-center{
        padding:16px;
        align-items:flex-start;
    }

    .auth-shell{
        max-width: 100%;
        margin-top:12px;
        padding:16px;
        gap:20px;
        border-radius:20px;
    }

    .carousel{
        min-width: 100%;
        height: 260px;
        min-height: 260px;
    }

    .form-panel{
        padding:24px 20px;
    }

    .grid-2{
        grid-template-columns:1fr;
        gap:16px;
    }

    .reg-form{
        gap:20px;
    }

    .form-header h1{
        font-size:28px;
    }

    .wave-text{
        font-size:1.9rem;
    }

    .otp-input-group{
        gap:10px;
    }

    .otp-input{
        width:46px;
        height:54px;
        font-size:1.3rem;
    }
}

@media (max-width: 480px){
    .auth-shell{
        padding:14px;
        gap:16px;
        border-radius:18px;
    }

    /* On very small screens, hide the visual carousel
       so the form has more vertical space */
    .visual{
        display:none;
    }

    .form-panel{
        padding:20px 16px;
    }

    .visual-caption{
        padding:18px;
    }

    .btn,
    .btn.primary,
    .btn.outlined,
    .btn-switch{
        width:100%;
        justify-content:center;
    }

    .wave-text{
        font-size:1.6rem;
        margin: 0.5rem 0 0 0;
        
    }

    .otp-input-group{
        gap:8px;
        margin:10px 0 2px;
    }

    .otp-input{
        width:40px;
        height:50px;
        font-size:1.2rem;
    }
}

@keyframes purpleSweep {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: -100% 0%;
    }
}