/* ======================================================
   NOVA STORE V2
   GLOBAL STYLES
====================================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ======================================================
   CSS VARIABLES
====================================================== */

:root{

    --primary:#38bdf8;
    --primary-dark:#0ea5e9;

    --background:#0f172a;
    --background-secondary:#1e293b;

    --white:#ffffff;
    --text:#dbeafe;
    --text-light:#cbd5e1;

    --glass:rgba(255,255,255,.06);
    --glass-border:rgba(255,255,255,.10);

    --shadow:0 20px 45px rgba(0,0,0,.25);

    --radius:20px;

    --transition:.35s ease;

}

/* ======================================================
   RESET
====================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    color:var(--white);

    background:linear-gradient(
        135deg,
        var(--background),
        var(--background-secondary)
    );

    overflow-x:hidden;

    position:relative;

}

/* ======================================================
   BACKGROUND EFFECTS
====================================================== */

body::before{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    background:var(--primary);

    border-radius:50%;

    filter:blur(140px);

    opacity:.35;

    top:-100px;

    left:-100px;

    animation:moveOne 12s ease-in-out infinite alternate;

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    width:300px;

    height:300px;

    background:#7c3aed;

    border-radius:50%;

    filter:blur(130px);

    opacity:.30;

    bottom:-80px;

    right:-80px;

    animation:moveTwo 14s ease-in-out infinite alternate;

    z-index:-1;

}

@keyframes moveOne{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(120px,80px);

    }

}

@keyframes moveTwo{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-100px,-80px);

    }

}

/* ======================================================
   NAVBAR
====================================================== */

header{

    position:sticky;

    top:0;

    z-index:1000;

}

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.logo{

    text-decoration:none;

    color:var(--primary);

    font-size:30px;

    font-weight:700;

    transition:var(--transition);

}

.logo:hover{

    transform:scale(1.05);

    text-shadow:0 0 18px var(--primary);

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav ul li a{

    text-decoration:none;

    color:var(--white);

    transition:var(--transition);

}

nav ul li a:hover{

    color:var(--primary);

}

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

.hero{

    min-height:80vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}

.hero h1{

    max-width:900px;

    font-size:72px;

    line-height:1.1;

    margin-bottom:20px;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero p{

    max-width:700px;

    margin:25px auto;

    color:var(--text);

    font-size:20px;

    line-height:1.7;

}

.buttons{

    display:flex;

    gap:20px;

    margin-top:15px;

}

.buttons a{

    text-decoration:none;

}

.hero button{

    padding:15px 35px;

    border:none;

    border-radius:12px;

    font-size:18px;

    cursor:pointer;

    transition:var(--transition);

}

.hero button:hover{

    transform:translateY(-3px);

}

.primary-btn{

    background:var(--primary);

    color:var(--white);

}

.primary-btn:hover{

    background:var(--primary-dark);

}

.secondary-btn{

    background:transparent;

    color:var(--white);

    border:2px solid var(--primary);

}

.secondary-btn:hover{

    background:var(--primary);

}
/* ======================================================
   PRODUCTS
====================================================== */

.products{

    padding:80px 8%;

}

.products h2{

    text-align:center;

    font-size:42px;

    margin-bottom:55px;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

/* ======================================================
   PRODUCT CARD
====================================================== */

.card{

    overflow:hidden;

    text-align:center;

    padding:35px;

    border-radius:var(--radius);

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(12px);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(56,189,248,.25);

}

.product-image{

    width:100%;

    height:250px;

    object-fit:contain;
background:#111827;

    border-radius:15px;

    margin-bottom:20px;

    transition:.45s ease;

}

.card:hover .product-image{

    transform:scale(1.05);

}

.rating{

    margin:18px 0;

    color:gold;

    font-size:18px;

}

.rating span{

    color:var(--white);

    margin-left:8px;

    font-size:16px;

}

.card h3{

    margin-bottom:15px;

    font-size:24px;

}

.card p{

    color:var(--text-light);

    line-height:1.6;

    margin-bottom:22px;

}

.features{

    list-style:none;

    text-align:left;

    margin-bottom:25px;

}

.features li{

    margin:10px 0;

    color:var(--text);

}

.price{

    color:var(--primary);

    font-size:30px;

    margin-bottom:22px;

}

.order-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:17px;

    background:var(--primary);

    color:var(--white);

    transition:var(--transition);

}

.order-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/* ======================================================
   HOW TO BUY
====================================================== */

.how-to-buy{

    padding:100px 8%;

    text-align:center;

}

.how-to-buy h2{

    font-size:42px;

    margin-bottom:60px;

}

.steps{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.step{

    width:230px;

    padding:30px;

    border-radius:var(--radius);

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(10px);

    transition:var(--transition);

}

.step:hover{

    transform:translateY(-10px);

}

.step-number{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:var(--white);

    font-size:30px;

    font-weight:700;

    box-shadow:0 0 25px rgba(56,189,248,.40);

}

.step h3{

    margin-bottom:15px;

}

.step p{

    color:var(--text-light);

    line-height:1.7;

}

.arrow{

    color:var(--primary);

    font-size:40px;

}

/* ======================================================
   FAQ
====================================================== */

.faq{

    padding:100px 8%;

}

.faq h2{

    text-align:center;

    font-size:42px;

    margin-bottom:55px;

}

.faq-item{

    margin-bottom:20px;

    padding:25px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(10px);

    transition:var(--transition);

}

.faq-item:hover{

    transform:translateY(-5px);

}

.faq-item h3{

    margin-bottom:12px;

}

.faq-item p{

    color:var(--text-light);

    line-height:1.7;

}

/* ======================================================
   FOOTER
====================================================== */

/* ======================================================
   FOOTER
====================================================== */

footer{

    margin-top:80px;

    padding:45px 20px;

    text-align:center;

    background:rgba(15,23,42,.65);

    border-top:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

}

footer h3{

    color:var(--primary);

    font-size:28px;

    margin-bottom:15px;

}

footer p{

    color:var(--text-light);

    margin:8px 0;

    line-height:1.7;

}

.footer-copy{

    margin-top:18px;

    font-size:14px;

    opacity:.75;

}
/* ======================================================
   ORDER PAGE
====================================================== */

.order-page{

    max-width:800px;

    margin:60px auto;

    padding:40px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(15px);

    border-radius:25px;

    box-shadow:var(--shadow);

}

/* ======================================================
   BACK BUTTON
====================================================== */

.back-btn{

    display:inline-block;

    text-decoration:none;

    color:var(--primary);

    font-size:18px;

    font-weight:600;

    transition:var(--transition);

}

.back-btn:hover{

    color:var(--white);

}

/* ======================================================
   PROGRESS BAR
====================================================== */

.progress-wrapper{

    margin-top:25px;

}

.progress{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px 0 15px;

}

.circle{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#334155;

    color:var(--white);

    font-size:22px;

    font-weight:700;

    transition:var(--transition);

}

.circle.active{

    background:var(--primary);

    box-shadow:0 0 20px rgba(56,189,248,.6);

}

.line{

    width:120px;

    height:4px;

    background:#475569;

}

.progress-text{

    display:flex;

    justify-content:space-between;

    margin-bottom:45px;

    color:var(--text);

    font-size:15px;

}

/* ======================================================
   PRODUCT PREVIEW
====================================================== */

.order-product{

    text-align:center;

    margin-bottom:40px;

}

.order-product img{

    width:230px;

    border-radius:20px;

    margin-bottom:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.product-details h2{

    margin-bottom:10px;

}

.product-details h3{

    color:var(--primary);

}

/* ======================================================
   FORMS
====================================================== */

form{

    display:flex;

    flex-direction:column;

}

form label{

    margin:18px 0 8px;

    font-weight:600;

}

form input{

    padding:15px;

    border:none;

    border-radius:12px;

    outline:none;

    font-size:16px;

}

form input:focus{

    box-shadow:0 0 12px rgba(56,189,248,.5);

}

form button{

    margin-top:30px;

    padding:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    background:var(--primary);

    color:var(--white);

    transition:var(--transition);

}

form button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

/* ======================================================
   PAYMENT
====================================================== */

.payment-info{

    padding:25px;

    margin-bottom:35px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

}

.payment-info h2{

    margin-bottom:15px;

}

.payment-info ol{

    padding-left:20px;

}

.payment-info li{

    margin:12px 0;

    color:var(--text);

}

.payment-box{

    text-align:center;

    margin-bottom:40px;

}

.qr-image{

    width:250px;

    border-radius:20px;

    margin:20px 0;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

}

.checkbox input{

    width:20px;

    height:20px;

}

/* ======================================================
   ORDER BUTTONS
====================================================== */

.order-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.order-buttons button{

    flex:1;

    margin-top:0;

}

#back-btn{

    background:transparent;

    color:var(--primary);

    border:2px solid var(--primary);

}

#back-btn:hover{

    background:var(--primary);

    color:var(--white);

}

/* ======================================================
   STEP ANIMATION
====================================================== */

#step1,
#step2{

    opacity:1;

    transition:opacity .35s ease;

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width:768px){

    nav{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }

    .hero{

        min-height:70vh;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:18px;

    }

    .buttons{

        flex-direction:column;

        width:100%;

    }

    .buttons a{

        width:100%;

    }

    .hero button{

        width:100%;

    }

    .steps{

        flex-direction:column;

    }

    .arrow{

        transform:rotate(90deg);

    }

    .order-page{

        margin:20px;

        padding:25px;

    }

    .line{

        width:60px;

    }

    .order-product img{

        width:180px;

    }

    .progress-text{

        font-size:13px;

    }

    .order-buttons{

        flex-direction:column;

    }

}
/* ======================================================
   VALIDATION
====================================================== */

.error-message{

    color:#ff6b6b;

    font-size:14px;

    margin-top:6px;

    min-height:20px;

    display:block;

}
button:disabled{

    opacity:.7;

    cursor:not-allowed;

}
.success-message{

    display:none;

    margin-top:30px;

    padding:30px;

    border-radius:12px;

    background:#e8fff1;

    border:2px solid #4CAF50;

    text-align:center;

    animation:fadeIn .5s ease;

}

.success-message h2{

    color:#2E7D32;

    margin-bottom:15px;

}

.success-message p{

    color:#444;

    line-height:1.7;

}
/* ======================================================
   TOAST NOTIFICATIONS
====================================================== */

.toast{

    position:fixed;

    top:25px;

    right:25px;

    min-width:280px;

    max-width:380px;

    padding:16px 20px;

    border-radius:12px;

    color:#fff;

    font-weight:500;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    transform:translateX(420px);

    opacity:0;

    transition:all .35s ease;

    z-index:9999;

}

.toast.show{

    transform:translateX(0);

    opacity:1;

}

.toast.success{

    background:#22c55e;

}

.toast.error{

    background:#ef4444;

}

.toast.warning{

    background:#f59e0b;

}
/* ======================================================
   ORDER ID
====================================================== */

.order-id-box{

    margin:20px 0;

    padding:18px;

    border-radius:12px;

    background:#ffffff;

    border:2px dashed #22c55e;

}

.order-id-box span{

    display:block;

    color:#666;

    font-size:14px;

    margin-bottom:8px;

}

.order-id-box h3{

    color:#0f172a;

    font-size:24px;

    letter-spacing:1px;

}
/* ======================================================
   RECEIPT
====================================================== */

.receipt{

    margin:25px 0;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #d1d5db;

    background:#fff;

}

.receipt-row{

    display:flex;

    justify-content:space-between;

    padding:18px 20px;

    border-bottom:1px solid #e5e7eb;

}

.receipt-row:last-child{

    border-bottom:none;

}

.receipt-row span{

    color:#555;

}

.receipt-row strong{

    color:#111827;

}

.pending-status{

    color:#ca8a04 !important;

}

.receipt-note{

    margin-top:20px;

    color:#475569;

    line-height:1.8;

}

.home-btn{

    margin-top:25px;

    width:100%;

}
/* ======================================================
   WHATSAPP BUTTON
====================================================== */

.whatsapp-btn{

    width:100%;

    margin-top:15px;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#25D366;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}

.whatsapp-btn:hover{

    background:#1EBE5D;

    transform:translateY(-2px);

}
.product-image{

    transition:.4s ease;

}

.card:hover .product-image{

    transform:scale(1.03);

}
.vps-section h2{
    margin-bottom:12px;
}

.vps-section .section-subtitle{
    color:var(--text-light);
    margin-bottom:40px;
    text-align:center;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.6;
}
.vps-section{
    padding:80px 20px;
    text-align:center;
}
.vps-badge{
    display:inline-block;
    background:#f59e0b;
    color:#111827;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    margin-bottom:15px;
}
.vps-order{

    text-align:center;

}

.vps-order .product-details{

    margin-top:0;

}

.vps-order h2{

    margin-top:0;

}

.vps-order h3{

    margin-top:10px;

}
.order-product{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.order-product img{

    display: block;
    margin: 0 auto 25px;

}

.product-details{

    width: 100%;
    text-align: center;

}

.product-details h2,
.product-details h3{

    text-align: center;

}
.order-page h1{

    text-align: center;

}
.upi-btn{

    width:100%;
    padding:14px;
    margin-top:18px;

    border:none;
    border-radius:10px;

    background:#1db954;
    color:#fff;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.upi-btn:hover{

    transform:translateY(-2px);
    opacity:.9;

}
.payment-amount{

    text-align:center;
    margin-bottom:20px;

}

.payment-amount span{

    display:block;
    font-size:15px;
    color:#888;
    margin-bottom:6px;

}

.payment-amount h2{

    margin:0;
    font-size:38px;
    color:#4CAF50;
    font-weight:700;

}
.products-note{

    max-width: 800px;
    margin: 20px auto 40px;

    padding: 18px 22px;

    text-align: center;

    font-size: 16px;
    line-height: 1.8;

    color: #d6d6d6;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

}

.products-note strong{

    color: #ffffff;

    font-weight: 600;

}
.hero-subtitle{

    margin-top:15px;
    font-size:28px;
    font-weight:600;
    color:#43b8ff;

}

.hero-tags{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;

    margin:35px 0;

}

.hero-tags span{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(67,184,255,.12);

    border:1px solid rgba(67,184,255,.3);

    color:#43b8ff;

    font-weight:600;

    transition:.3s;

}

.hero-tags span:hover{

    transform:translateY(-3px);

    background:#43b8ff;
    color:#fff;

}
.hero-products{

    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin:45px 0;

}

.hero-products span{

    padding:10px 18px;
font-size:15px;
font-weight:600;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(67,184,255,.25);

    backdrop-filter:blur(10px);

    color:#fff;

    font-weight:600;

    transition:.35s;

    cursor:default;

}

.hero-products span:hover{

    transform:translateY(-6px) scale(1.06);

    background:#43b8ff;

    color:#fff;

    box-shadow:0 0 30px rgba(67,184,255,.45);

}
.hero h1{

    text-shadow:
        0 0 25px rgba(67,184,255,.25);

}