/* =====================================================
🔥 DAVBOT VPN STORE PREMIUM CSS
VIP DARK NEON PLATFORM
===================================================== */


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


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}



body{

background:

radial-gradient(circle at top,#101b4d,#020617 45%,#000);

color:white;

min-height:100vh;

padding-bottom:40px;

}





/* ================= HEADER ================= */


.top{

text-align:center;

padding:25px 15px;

background:

linear-gradient(135deg,var(--dav-accent-dark,#1d4ed8),var(--dav-accent-light,#60a5fa));

border-radius:0 0 35px 35px;

box-shadow:

0 0 40px var(--dav-accent-light,#60a5fa);

}



.logo{

font-size:28px;

font-weight:800;

letter-spacing:1px;

}



.top p{

margin-top:8px;

opacity:.9;

}



#vipInfo,
#vipBox{

margin:20px auto 0;

max-width:350px;

padding:15px;

border-radius:20px;

background:

rgba(0,0,0,.35);

border:1px solid #ffd700;

color:#ffd700;

font-weight:700;

box-shadow:

0 0 20px #ffd700;

}






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


.hero{

margin:25px 15px;

padding:35px 20px;

text-align:center;

border-radius:30px;

background:

linear-gradient(145deg,#07134d,#020617);

border:1px solid var(--dav-accent-light,#60a5fa);

box-shadow:

0 0 30px #004cff;

animation:float 4s infinite;

}



.hero h1{

font-size:35px;

color:var(--dav-accent-light,#60a5fa);

}



.hero p{

margin-top:10px;

color:#ddd;

}





@keyframes float{

50%{

transform:translateY(-8px);

}

}







.title{

text-align:center;

margin:30px 0;

font-size:25px;

color:var(--dav-accent-light,#60a5fa);

}






/* ================= USER BOX ================= */


.user-box{

margin:20px;

padding:20px;

background:#050b24;

border-radius:25px;

border:1px solid #334155;

}



input,
select{

width:100%;

padding:15px;

margin-top:12px;

border-radius:15px;

background:#020617;

color:white;

border:1px solid var(--dav-accent-light,#60a5fa);

outline:none;

font-size:15px;

}








/* ================= GRID VPN ================= */


.vpn-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

padding:15px;

}




@media(max-width:600px){

.vpn-grid{

grid-template-columns:repeat(2,1fr);

}

}







/* ================= CARTE VPN ================= */


.vpn-card{

background:

linear-gradient(145deg,#08102d,#020617);

border-radius:25px;

padding:18px 12px;

text-align:center;

border:1px solid #1e40af;

position:relative;

overflow:hidden;

transition:.4s;

box-shadow:

0 10px 30px rgba(0,0,0,.5);

}



.vpn-card::before{

content:"";

position:absolute;

width:120px;

height:120px;

background:var(--dav-accent-light,#60a5fa);

filter:blur(70px);

top:-40px;

left:-40px;

opacity:.3;

}



.vpn-card:hover{

transform:translateY(-8px);

border-color:var(--dav-accent-light,#60a5fa);

box-shadow:

0 0 30px var(--dav-accent-light,#60a5fa);

}



.vpn-card.active{

border:2px solid #ffd700;

box-shadow:

0 0 35px #ffd700;

}







.vpn-card h3{

color:var(--dav-accent-light,#60a5fa);

font-size:16px;

margin-bottom:10px;

}



.vpn-card p{

font-size:13px;

margin:7px;

color:#ddd;

}






/* ================= STATUS ================= */


.server-status{

padding:8px;

border-radius:20px;

margin:12px 0;

font-size:12px;

font-weight:700;

}



.online{

background:#052e16;

color:#22c55e;

box-shadow:0 0 15px #22c55e;

}



.maintenance{

background:#422006;

color:#facc15;

box-shadow:0 0 15px #facc15;

}



.offline{

background:#450a0a;

color:#ef4444;

box-shadow:0 0 15px #ef4444;

}







/* ================= DUREE ================= */


.durationBox{

display:flex;

gap:10px;

margin:15px 0;

flex-wrap:wrap;

}



.duration{

flex:1;

min-width:80px;

padding:12px;

background:#020617;

border-radius:15px;

border:1px solid #334155;

font-size:12px;

cursor:pointer;

transition:.3s;

}



.duration:hover,
.duration.active{

background:var(--dav-accent-dark,#1d4ed8);

border-color:var(--dav-accent-light,#60a5fa);

box-shadow:

0 0 20px var(--dav-accent-light,#60a5fa);

}








/* ================= DETAILS ================= */


.details,
.resume{

margin:25px 15px;

padding:25px;

background:#050b24;

border-radius:30px;

border:1px solid #1e40af;

box-shadow:

0 0 25px rgba(0,210,255,.2);

}



.details h2,
.resume h2{

color:var(--dav-accent-light,#60a5fa);

margin-bottom:15px;

}





#price{

font-size:30px;

font-weight:800;

color:#ffd700;

margin:20px;

text-align:center;

}








/* ================= VIP PANEL ================= */


.vip-panel{

margin:20px;

}



.vip-active{

background:

linear-gradient(135deg,#78350f,#ffd700);

color:black;

padding:20px;

border-radius:25px;

font-weight:800;

text-align:center;

box-shadow:

0 0 40px #ffd700;

}



.vip-none{

padding:15px;

background:#111827;

border-radius:20px;

text-align:center;

color:#94a3b8;

}







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


button{

width:100%;

padding:16px;

border:none;

border-radius:20px;

background:

linear-gradient(135deg,var(--dav-accent-light,#60a5fa),var(--dav-accent-dark,#1d4ed8));

color:white;

font-size:17px;

font-weight:800;

cursor:pointer;

margin-top:15px;

box-shadow:

0 0 25px var(--dav-accent-light,#60a5fa);

transition:.3s;

}



button:hover{

transform:scale(1.05);

box-shadow:

0 0 40px var(--dav-accent-light,#60a5fa);

}



button:disabled{

opacity:.5;

}





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


footer{

margin-top:40px;

text-align:center;

padding:25px;

background:#020617;

color:#94a3b8;

}



footer h3{

color:var(--dav-accent-light,#60a5fa);

}





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


@keyframes glow{

0%{

box-shadow:0 0 10px var(--dav-accent-light,#60a5fa);

}

50%{

box-shadow:0 0 40px var(--dav-accent-light,#60a5fa);

}

100%{

box-shadow:0 0 10px var(--dav-accent-light,#60a5fa);

}

}



.vpn-card{

animation:glow 4s infinite;

}