/* =========================
JK PaySet - style.css
========================= */

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

body{
background:#0b1220;
color:#ffffff;
font-family:Segoe UI, Arial, sans-serif;
min-height:100vh;
padding:30px 20px;
}

.title{
text-align:center;
color:#00d4ff;
margin-bottom:35px;
text-shadow:0 0 15px rgba(0,212,255,.7);
}

.container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}

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

.card{
width:280px;
height:390px;
position:relative;
transform-style:preserve-3d;
transition:transform .8s ease;
cursor:pointer;
}

.card.flipped{
transform:rotateY(180deg);
}

.front,
.back{
position:absolute;
width:100%;
height:100%;

border-radius:18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:#121a2b; border:1px solid rgba(255,255,255,.08); box-shadow: 0 8px 20px rgba(0,0,0,.35); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; 

}

.front{
text-align:center;
}

.back{
transform:rotateY(180deg);
text-align:center;
}

/* =========================
LOGOS
========================= */

.front img{
width:120px;
height:120px;
object-fit:contain;
margin-bottom:15px;
}

.front h3{
margin-bottom:10px;
font-size:22px;
}

.front p{
color:#b8c1d1;
}

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

.back h3{
margin-bottom:15px;
color:#00d4ff;
}

.back p{
margin:5px 0;
font-size:14px;
word-break:break-word;
}

.back span{
color:#ffffff;
font-weight:700;
}

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

.qr{
width:120px;
height:120px;
object-fit:cover;

background:white; padding:5px; border-radius:12px; margin-bottom:10px; 

}

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

button{
border:none;
outline:none;

margin-top:5px; margin-bottom:10px; padding:8px 15px; border-radius:8px; background:#00d4ff; color:#000; font-weight:bold; cursor:pointer; transition:.3s; 

}

button:hover{
background:#29dcff;
transform:translateY(-2px);
}

.download-btn{
text-decoration:none;

background:#00d4ff; color:#000; font-weight:bold; padding:8px 15px; border-radius:8px; margin-bottom:12px; display:inline-block; transition:.3s; 

}

.download-btn:hover

/* =========================
BADGES
========================= */

.badge{
position:absolute;

top:12px; right:12px; z-index:10; font-size:11px; font-weight:700; padding:6px 10px; border-radius:50px; 

}

.hot-badge{
background:#ff2f2f;
color:#fff;
}

.linked-badge{
background:#00d4ff;
color:#000;
}

.unavailable-badge{
background:#666;
color:#fff;
}

/* =========================
HOT CARD EFFECT
========================= */

.hot .front,
.hot .back{
border:1px solid rgba(255,60,60,.3);

box-shadow: 0 0 18px rgba(255,50,50,.25); 

}

/* =========================
LINKED CARD EFFECT
========================= */

.linked .front,
.linked .back{
border:1px dashed #00d4ff;
}

/* =========================
UNAVAILABLE
========================= */

.unavailable{
cursor:not-allowed;
}

.unavailable .front{
filter:grayscale(100%);
opacity:.65;
}

.unavailable .front p{
color:#d0d0d0;
}

.unavailable:hover{
transform:none;
}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#0b1220;
}

::-webkit-scrollbar-thumb{
background:#00d4ff;
border-radius:20px;
}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

body{ padding:20px 10px; } .title{ font-size:26px; } .container{ gap:20px; } .card{ width:100%; max-width:340px; height:400px; } .front img{ width:100px; height:100px; } 

}

@media (max-width:480px){

.title{ font-size:22px; } .card{ height:390px; } 

}