/* ===================================================
   Nexora Pay v1.0
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    :root{
    
    --bg:#07111b;
    --card:#101b27;
    --green:#00d26a;
    --white:#ffffff;
    --gray:#9ca3af;
    
    }
    
    body{
    
    background:
    radial-gradient(circle at top right,#0b3323 0%,#07111b 45%,#050b12 100%);
    
    font-family:tahoma,sans-serif;
    
    color:var(--white);
    
    overflow-x:hidden;
    
    min-height:100vh;
    
    }
    
    a{
    
    text-decoration:none;
    
    color:white;
    
    }
    
    button{
    
    cursor:pointer;
    
    font-family:inherit;
    
    }
    
    /*=========================
    HEADER
    =========================*/
    
    .header{
    
    position:fixed;
    
    top:18px;
    
    left:50%;
    
    transform:translateX(-50%);
    
    width:95%;
    
    max-width:1350px;
    
    height:78px;
    
    padding:0 26px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    background:rgba(15,25,35,.65);
    
    backdrop-filter:blur(25px);
    
    border:1px solid rgba(255,255,255,.08);

    box-shadow:
0 15px 40px rgba(0,0,0,.35),
0 0 25px rgba(0,210,106,.12);
    
    border: radius 28px;
    
    z-index:1000;
    
    }
    
    .logo{
    
    text-align:center;
    
    }
    
    .logo h1{
    
    font-size:38px;
    
    font-weight:800;

    letter-spacing:1px;
text-shadow:0 0 20px rgba(0,210,106,.25);
    
    }
    .logo span{

        color:#00d26a;
        
        text-shadow:
        0 0 10px rgba(0,210,106,.5),
        0 0 25px rgba(0,210,106,.3);
        
        }
    
    .logo p{
    
    margin-top:5px;
    
    color:var(--gray);
    
    font-size:13px;
    
    }
    
    .menu-btn,
    .theme-btn{
    
    width:50px;
    
    height:50px;
    
    border:none;
    
    border-radius:15px;
    
    background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
    
    color:white;
    
    font-size:22px;
    
    transition:.3s;
    
    }
    
    .menu-btn:hover,
    .theme-btn:hover{
    
        background:#00d26a;

        transform:scale(1.08);
        
        box-shadow:0 0 20px rgba(0,210,106,.4);
    
    }
    
    /*=========================
    SIDEBAR
    =========================*/
    
    .sidebar{

        position:fixed;
        
        top:0;
        
        right:-320px;
        
        width:300px;
        
        height:100vh;
        
        padding:110px 25px;
        
        background:rgba(10,20,30,.88);
        
        backdrop-filter:blur(25px);
        
        border-left:1px solid rgba(255,255,255,.08);
        
        box-shadow:-10px 0 35px rgba(0,0,0,.35);
        
        transition:right .35s ease;
        
        z-index:999;
        
        }
    
        .sidebar a{

            display:flex;
            
            align-items:center;
            
            height:56px;
            
            padding:0 18px;
            
            margin-bottom:12px;
            
            border-radius:16px;
            
            background:rgba(255,255,255,.04);
            
            border:1px solid rgba(255,255,255,.05);
            
            font-size:17px;
            
            font-weight:600;
            
            transition:.25s;
            
            }

            .sidebar.open {
    right: 0;
}
    
    /*=========================
    MAIN
    =========================*/
    
    main{
    
    padding-top:140px;
    
    }

    /*=========================
HERO
=========================*/

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    margin: top 70px;
}
    
    .bank-card{
    position:relative;
    width:650px;
    max-width:100%;
    height:360px;
    border: radius 30px;
    overflow:hidden;
    
    background:
    linear-gradient(135deg,#102536 0%,#143f33 45%,#0f1b26 100%);
    
    border:1px solid rgba(0,210,106,.35);
    
    box-shadow:
0 25px 80px rgba(0,0,0,.55),
0 0 60px rgba(0,210,106,.18),
inset 0 1px 1px rgba(255,255,255,.12);
    
    padding:35px;
    
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    
    transition:
transform .25s ease,
box-shadow .25s ease;
    isolation:isolate;
    }
    .bank-card .watermark{

        position:absolute;
        
        top:50%;
        
        left:50%;
        
        transform:translate(-50%,-50%);
        
        font-size:70px;
        
        font-weight:900;
        
        color:rgba(255,255,255,.04);
        
        letter-spacing:3px;
        
        pointer-events:none;
        
        user-select:none;
        
        z-index:1;
        
        white-space:nowrap;
        
        }

    .bank-card:hover{
    
        
        box-shadow:
        0 35px 90px rgba(0,0,0,.60),
        0 0 80px rgba(0,210,106,.30);
    }
    
    /* نور سبز */
    .bank-card::before{

        content:"";
        
        position:absolute;
        
        top:-40%;
        
        left:-120%;
        
        width:70%;
        
        height:220%;
        
        background:
        linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
        );
        
        transform:rotate(25deg);
        
        transition:1s;
        
        z-index:5;
        
        pointer-events:none;
        
        }
        
        .bank-card:hover::before{
        
        left:170%;
        
        }
    
    /* موج */
   
    .bank-card::after{

        content:"";
        
        position:absolute;
        
        top:-120px;
        
        right:-120px;
        
        width:420px;
        
        height:420px;
        
        background:
        radial-gradient(circle,
        rgba(0,255,140,.30),
        transparent 70%);
        
        filter:blur(30px);
        
        z-index:1;
        
        pointer-events:none;
        
        }

        /* نور متحرک روی کارت */

.bank-card{
    position: relative;
    overflow: hidden;
}

.bank-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:45%;
    height:300%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:rotate(25deg);

    animation:shine 4s linear infinite;
}

@keyframes shine{

0%{
left:-60%;
}

100%{
left:130%;
}

}
    
    /* محتوا */
    
    .card-top,
    .card-number,
    .card-bottom{
    
    position:relative;
    
    z-index:2;
    
    }
    
    .card-top{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:flex-start;
    
    }
    
    /* چیپ */
    
    .chip{
    
    width:72px;
    
    height:52px;
    
    border-radius:12px;
    
    background:
    
    linear-gradient(145deg,#f7d56f,#d8a931);
    
    box-shadow:
    
    0 6px 15px rgba(0,0,0,.3);
    
    }
    
    /* لوگو */

    .bank-logo{

        font-size:34px;
        font-weight:900;
        letter-spacing:1px;
        text-shadow:0 0 15px rgba(0,210,106,.35);
        
        }
    
    .bank-logo{
    
    color:#fff;
    
    }
    
    .bank-logo::first-letter{
    
    color:#00d26a;
    
    }
    
    /* شماره کارت */
    
    .card-number{
    
    direction:ltr;
    
    text-align:center;
    
    font: size 39px;
    
    font-weight:700;
    
    letter-spacing:6px;

    white-space: nowrap;

    overflow: hidden;
margin-top: 22px;
    font-size: 39px;
    letter-spacing:4px;
font-family:monospace;
font-weight:700;
text-shadow:0 2px 12px rgba(255,255,255,.35);
    }
    
    /* پایین کارت */
    
    .card-bottom{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:flex-end;

    margin-top: 39px;
    
    }
    
    .card-bottom span{
    
    display:block;
    
    font-size:13px;
    
    color:#b9c4d0;
    
    margin-bottom:6px;
    
    }
    
    .card-bottom strong{
    
    font-size:20px;
    
    }

    .payment-box{
        width:90%;
        max-width:850px;
        margin:35px auto;
    }
    
    .items{
        display:flex;
        flex-direction:column;
        gap:18px;
    }
    
    .item{

        display:flex;
        
        justify-content:space-between;
        
        align-items:center;
        
        padding:20px 24px;
        
        margin-bottom:18px;
        
        border-radius:22px;
        
        background:rgba(255,255,255,.06);
        
        backdrop-filter:blur(20px);
        
        border:1px solid rgba(255,255,255,.08);
        
        box-shadow:
        0 8px 30px rgba(0,0,0,.25);
        
        transition:.35s;

    
        
            transition:.35s;
            cursor:pointer;
            position:relative;
        
        
        }
        .item:hover{

            transform:translateY(-5px);
            
            border-color:#00d26a;
            
            box-shadow:
            
            0 15px 35px rgba(0,210,106,.25);
            
            }

            .item::before{
                content:"";
                position:absolute;
                inset:0;
                border-radius:18px;
                background:linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.08),
                    transparent
                );
                opacity:0;
                transition:.35s;
                pointer-events:none;
            }
            
            .item:hover::before{
                opacity:1;
            }
    
    
    
    .item label{
        display:block;
        color:#9ca3af;
        font-size:14px;
        margin-bottom:8px;
    }
    
    .item div{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        gap:15px;
    }
    
    .item span{
        flex:1;
        font-size:18px;
        font-weight:700;
        direction:ltr;
        text-align:left;
        overflow:hidden;
        text-overflow:ellipsis;
        letter-spacing:1px;
    }
    
    .item button{

        width:52px;
        
        height:52px;
        
        border:none;
        
        border-radius:16px;
        
        background:linear-gradient(135deg,#00d26a,#00a854);
        
        color:#fff;
        
        font-size:20px;
        
        display:flex;
        
        align-items:center;
        
        justify-content:center;
        
        transition:.3s;
        
        box-shadow:0 8px 20px rgba(0,210,106,.35);
        
        }
        
        .item button:hover{
        
        transform:scale(1.08);
        
        box-shadow:0 12px 30px rgba(0,210,106,.45);
        
        }

        .item button:hover{

            background:#00d26a;
            
            transform:scale(1.08);
            
            box-shadow:0 0 20px rgba(0,210,106,.4);
            
            }
    
    .item button:hover{
        background:#00b85c;
    }
    
    .copy-all{
        width:100%;
        height:60px;
        margin-top:22px;
        border:none;
        border-radius:18px;
        background:#00d26a;
        color:#fff;
        font-size:20px;
        font-weight:700;
        display:flex;
        justify-content:center;
align-items:center;
text-align:center;
    }

    /* ========= Background Effects ========= */

body::before{
    content:"";
    position:fixed;
    top:-250px;
    right:-250px;
    width:550px;
    height:550px;
    background:radial-gradient(circle,#00d26a55,transparent 70%);
    filter:blur(90px);
    z-index:-2;
    }
    
    body::after{
    content:"";
    position:fixed;
    bottom:-300px;
    left:-250px;
    width:600px;
    height:600px;
    background:radial-gradient(circle,#00d26a33,transparent 70%);
    filter:blur(120px);
    z-index:-2;
    }

    /* ===== Card Brand ===== */

.card-brand{

    padding:10px 18px;
    
    border-radius:14px;
    
    background:rgba(255,255,255,.08);
    
    border:1px solid rgba(255,255,255,.10);
    
    backdrop-filter:blur(15px);
    
    font-size:20px;
    
    font-weight:900;
    
    letter-spacing:1px;
    
    color:#ffffff;
    
    text-shadow:0 0 10px rgba(255,255,255,.25);
    
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    
    }

    /* ========= Hologram ========= */

.hologram{

    width:55px;
    
    height:55px;
    
    border-radius:50%;
    
    background:
    linear-gradient(
    135deg,
    rgba(255,0,120,.8),
    rgba(0,255,255,.8),
    rgba(255,255,0,.8),
    rgba(255,0,120,.8)
    );
    
    box-shadow:
    0 0 20px rgba(255,255,255,.25);
    
    margin-right:15px;
    
    animation:holo 4s linear infinite;
    
    }
    
    @keyframes holo{
    
    0%{
    
    transform:rotate(0deg);
    
    filter:hue-rotate(0deg);
    
    }
    
    100%{
    
    transform:rotate(360deg);
    
    filter:hue-rotate(360deg);
    
    }
    
    }

    /* ===== Shine Effect ===== */

.bank-card::before{

    content:"";
    
    position:absolute;
    
    top:-50%;
    
    left:-120%;
    
    width:60%;
    
    height:200%;
    
    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
    );
    
    transform:rotate(25deg);
    
    transition:1s;
    
    z-index:3;
    
    }
    
    .bank-card:hover::before{
    
    left:160%;
    
    }

    /* ===== Mobile ===== */

@media (max-width:768px){

    .header{
    height:70px;
    padding:0 15px;
    }
    
    .logo h1{
    font-size:28px;
    }
    
    .bank-card{
    width:100%;
    height:230px;
    padding:20px;
    border-radius:24px;
    }
    
    .card-number{
    font-size:22px;
    letter-spacing:3px;
    }
    
    .card-bottom strong{
    font-size:16px;
    }
    
    .payment-box{
    width:95%;
    }
    
    .item{
    padding:15px;
    }
    
    .item span{
    font-size:16px;
    }
    
    .copy-all{
    height:55px;
    font-size:18px;
    }
    
    }

    /* ========= Mobile First ========= */

@media (max-width:768px){

    .header{
    height:70px;
    padding:0 15px;
    }
    
    .logo h1{
    font-size:28px;
    }
    
    .logo p{
    font-size:11px;
    }
    
    .menu-btn,
    .theme-btn{
    width:45px;
    height:45px;
    font-size:20px;
    }
    
    .hero{
    padding: 20px 15px;
    position: relative;
overflow: hidden;
    }

    .hero::before{
        content:"";
        position:absolute;
        width:500px;
        height:500px;
        background:radial-gradient(circle,#00d26a55,transparent 70%);
        top:-150px;
        left:50%;
        transform:translateX(-50%);
        filter:blur(70px);
        animation:heroGlow 6s ease-in-out infinite;
        pointer-events:none;
    }
    
    .bank-card{
    width:100%;
    height:220px;
    padding:22px;
    border-radius:24px;
    }
    
    .card-number{
    font-size:22px;
    letter-spacing:3px;
    }
    
    
        .bank-logo{
            font-size:22px;
            font-weight:900;
            letter-spacing:1px;
            color:#fff;
            text-shadow:0 0 15px rgba(0,210,106,.6);
        }
    
    
    .card-bottom strong{
    font-size:16px;
    }
    
    .payment-box{
    width:95%;
    }
    
    .item{
    padding:16px;
    }
    
    .item button{
    width:44px;
    height:44px;
    }
    
    .copy-all{
    height:56px;
    font-size:18px;
    }
    
    .qr-box{
    width:180px;
    height:180px;
    margin:auto;
    }
    
    }

    .sidebar a:hover{

        background:#00d26a;
        
        color:#fff;
        
        transform:translateX(-6px);
        
        box-shadow:0 10px 25px rgba(0,210,106,.35);
        
        }

        /* ===== Toast ===== */

#toast{

    position:fixed;
    
    bottom:25px;
    
    left:50%;
    
    transform:translateX(-50%) translateY(100px);
    
    background:rgba(0,210,106,.95);
    
    color:#fff;
    
    padding:14px 26px;
    
    border-radius:18px;
    
    font-size:16px;
    
    font-weight:bold;
    
    box-shadow:0 15px 35px rgba(0,210,106,.35);
    
    opacity:0;
    
    transition:.35s;
    
    z-index:9999;
    
    }
    
    #toast.show{
    
    opacity:1;
    
    transform:translateX(-50%) translateY(0);
    

    }

    /* =========================
   QR SECTION
========================= */

.qr-section{

    width:90%;
    
    max-width:850px;
    
    margin:35px auto;
    
    display:flex;
    
    justify-content:center;
    
    }
    
    .qr-box{
    
    width:220px;
    
    height:220px;
    
    background:rgba(255,255,255,.05);
    
    border:1px solid rgba(255,255,255,.08);
    
    border-radius:20px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:20px;
    
    font-weight:bold;
    
    color:#fff;
    
    }
    
    /* =========================
       FOOTER
    ========================= */
    
    footer{
    
    margin:50px 0 25px;
    
    text-align:center;
    
    color:#9ca3af;
    
    font-size:14px;
    
    }

    /* ===== Page Watermark ===== */

body::before{

    content:"NEXORA";
    
    position:fixed;
    
    top:50%;
    
    left:50%;
    
    transform:translate(-50%,-50%);
    
    font-size:140px;
    
    font-weight:900;
    
    letter-spacing:12px;
    
    color:rgba(255,255,255,.025);
    
    pointer-events:none;
    
    user-select:none;
    
    z-index:-1;
    
    }
    
    /* ===== Footer ===== */

footer{

    margin:70px 0 35px;
    
    text-align:center;
    
    }
    
    footer h3{
    
    font-size:28px;
    
    color:#fff;
    
    margin-bottom:6px;
    
    }
    
    footer p{
    
    font-size:15px;
    
    color:#00d26a;
    
    margin-bottom:8px;
    
    }
    
    footer span{
    
    font-size:14px;
    
    color:#8b97a7;
    
    }

    footer::before{

        content:"";
        
        display:block;
        
        width:180px;
        
        height:1px;
        
        margin:0 auto 25px;
        
        background:linear-gradient(
        90deg,
        transparent,
        #00d26a,
        transparent
        );
        
        }

        /* ===== Label Icons ===== */

.item label{

    display:flex;
    
    align-items:center;
    
    gap:8px;
    
    }
    
    .item label i{
    
    color:#00d26a;
    
    font-size:15px;
    
    }
    
    .item button i{
    
    font-size:18px;
    
    }

    .bank-card{

        transform-style:preserve-3d;
        
        transition:transform .8s;
        
        cursor:pointer;
        
        }
        
        .bank-card.flip{
        
        transform:rotateY(180deg);
        
        }

        .bank-card{
            perspective:1000px;
        }
        
        .card-inner{
            position:relative;
            width:100%;
            height:100%;
            transform-style:preserve-3d;
            transition:transform .8s;
        }
        
        .bank-card.flip .card-inner{
            transform:rotateY(180deg);
        }
        
        .card-front,
        .card-back{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            backface-visibility:hidden;
        }
        
        .card-back{
            transform:rotateY(180deg);
        
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
        
            border-radius:30px;
        
            background:linear-gradient(135deg,#102536,#143f33,#0f1b26);
        
            color:white;
        }
        
        .back-logo{
            font-size:38px;
            font-weight:bold;
        }
        
        .back-text{
            margin-top:15px;
            font-size:18px;
            opacity:.8;
        }

        @keyframes heroGlow{
            0%,100%{
                transform:translateX(-50%) scale(1);
            }
            50%{
                transform:translateX(-50%) scale(1.2);
            }
        }

        #splash{
            position:fixed;
            inset:0;
            background:#0b1118;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            z-index:99999;
            transition:.8s;
        }
        
        #splash.hide{
            opacity:0;
            visibility:hidden;
        }
        
        #splash h1{
            font-size:52px;
            font-weight:900;
            color:#fff;
            text-shadow:0 0 25px rgba(0,210,106,.35);
        }
        
        #splash span{
            color:#00d26a;
        }
        
        #splash p{
            color:#bbb;
            margin-top:10px;
        }
        
        #splash::before{
            content:"";
            position:absolute;
            width:220px;
            height:220px;
            background:#00d26a;
            border-radius:50%;
            filter:blur(90px);
            opacity:.25;
            animation:pulse 2s infinite;
        }
        
        @keyframes pulse{
            50%{
                transform:scale(1.2);
                opacity:.4;
            }
        }

        /* ===== Sidebar ===== */

.sidebar{
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    padding: 100px 20px;
    background: rgba(10,18,28,.96);
    backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255,255,255,.08);
    transition: .35s ease;
    z-index: 9999;
}

.sidebar.active{
    right: 0;
}

.sidebar a{
    display: flex;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    border-radius: 14px;
    transition: .25s;
}

.sidebar a:hover{
    background: rgba(0,210,106,.15);
    color: #00d26a;
    transform: translateX(-6px);
}

/* ===== License Modal ===== */

.license-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(8px);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:10000;
}

.license-modal.show{
    display:flex;
}

.license-box{
    width:90%;
    max-width:360px;
    background:#111c27;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:28px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.license-box h2{
    color:#fff;
    margin-bottom:22px;
}

.license-box input{
    width:100%;
    height:52px;
    border:none;
    outline:none;
    border-radius:14px;
    padding:0 16px;
    margin-bottom:18px;
    background:#1a2a38;
    color:#fff;
}

.license-box button{
    width:100%;
    height:52px;
    border:none;
    border-radius:14px;
    background:#00d26a;
    color:#fff;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
}

#licenseError{
    color:#ff6b6b;
    margin-top:14px;
    min-height:20px;
}

/* =========================
   Light Theme
========================= */

body.light {
    background: #f4f7f6;
    color: #1f2933;
}

/* هدر */

body.light .header {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* لوگو */

body.light .logo h1 {
    color: #111827;
}

body.light .logo p {
    color: #667085;
}

/* کارت بانکی */

body.light .bank-card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* بخش اطلاعات */

body.light .payment-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* آیتم‌های اطلاعات */

body.light .item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light .item label {
    color: #667085;
}

body.light .item span {
    color: #111827;
}

/* دکمه تم */

body.light .theme-btn {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* سایدبار */

body.light .sidebar {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
}

body.light .sidebar a {
    color: #1f2933;
}

body.light .sidebar a:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* فوتر */

body.light footer {
    background: #e9eeee;
    color: #1f2933;
}

/* متن‌های عمومی */

body.light .qr-section {
    color: #1f2933;
}