/* =============================== */
/* WOAH SERVICES PRODUCT CARD STYLE */
/* =============================== */

/* Main product card */
.component a.block {
border-radius: 10px;
backdrop-filter: blur(8px);
background: rgba(20,20,20,0.55);
border: 1px solid rgba(255,255,255,0.06);

box-shadow:
0 10px 30px rgba(0,0,0,0.45),
inset 0 0 15px rgba(34,211,238,0.04);

transition: all 0.35s ease;
transform: translateY(0) scale(1);
overflow: hidden;
}

/* CARD HOVER */
.component a.block:hover{
transform: translateY(-6px) scale(1.03);

border-color: rgba(34,211,238,0.45);

box-shadow:
0 20px 50px rgba(0,0,0,0.75),
0 0 25px rgba(34,211,238,0.35),
0 0 25px rgba(34,197,94,0.25),
inset 0 0 20px rgba(34,211,238,0.1);
}

/* Product image base */
.component img{
transition: transform 0.45s ease;
}

/* IMAGE ZOOM ON HOVER */
.component a.block:hover img{
transform: scale(1.12);
}

/* Title */
.component h3{
letter-spacing: 0.4px;
}

/* Price glow */
.component .text-accent-500{
font-weight:700;
text-shadow:
0 0 10px rgba(34,211,238,0.35),
0 0 10px rgba(34,197,94,0.25);
}

/* Stock text */
.component .text-base.text-t-primary\/50{
opacity:0.8;
}

/* Button styling */
.component .border-accent-500{
border-radius:6px;
transition:all .25s ease;
}

/* Button hover */
.component .border-accent-500:hover{
box-shadow:
0 0 12px rgba(34,211,238,0.6),
0 0 12px rgba(34,197,94,0.4),
inset 0 0 10px rgba(34,211,238,0.15);

transform:translateY(-1px);
}

/* Product badge glow */
.badges div{
border-radius:4px;
box-shadow:0 0 8px rgba(34,211,238,0.3);
}

/* Smooth card animation */
.component a.block,
.component a.block *{
will-change:transform;
}

/* DISCORD BUTTON */
#discord-galaxy{
position: fixed;
bottom: 30px;
right: 30px;
width: 70px;
height: 70px;
z-index: 9999;
cursor: pointer;

border-radius: 50%;
backdrop-filter: blur(8px);
background: rgba(20,20,20,0.55);
border: 1px solid rgba(255,255,255,0.06);

box-shadow:
0 10px 30px rgba(0,0,0,0.45),
inset 0 0 15px rgba(34,211,238,0.04);

transition: all 0.35s ease;
overflow: hidden;
}

/* HOVER */
#discord-galaxy:hover{
width: 190px;
border-radius: 40px;

transform: translateY(-4px) scale(1.03);

border-color: rgba(34,211,238,0.45);

box-shadow:
0 20px 50px rgba(0,0,0,0.75),
0 0 30px rgba(34,211,238,0.5),
0 0 30px rgba(34,197,94,0.35),
inset 0 0 25px rgba(34,211,238,0.15);
}

#discord-canvas{
width:100%;
height:100%;
}

.card {
  background: rgba(10,10,20,0.9);
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 20px rgba(34,211,238,0.2);
  transition: 0.3s;
}
#discord-float{
position:fixed;
bottom:25px;
right:25px;
width:68px;
height:68px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
z-index:99999;

background:rgba(0,15,25,.92);

color:#00e5ff;

border:1px solid rgba(0,255,170,.35);

backdrop-filter:blur(10px);

box-shadow:
0 0 10px rgba(0,255,170,.35),
0 0 25px rgba(0,225,255,.25),
0 0 45px rgba(0,255,170,.15);

transition:all .3s ease;

animation:discordPulse 3s infinite;
}

#discord-float svg{
width:34px;
height:34px;
transition:.3s ease;
}

#discord-float:hover{

transform:
translateY(-4px)
scale(1.12);

color:#ffffff;

box-shadow:
0 0 15px #00ffae,
0 0 35px #00e5ff,
0 0 65px #00ffae,
0 0 100px rgba(0,255,170,.5);
}

#discord-float:hover svg{
transform:rotate(10deg) scale(1.1);
}

@keyframes discordPulse{

0%{
box-shadow:
0 0 10px rgba(0,255,170,.35),
0 0 25px rgba(0,225,255,.25);
}

50%{
box-shadow:
0 0 18px rgba(0,255,170,.55),
0 0 40px rgba(0,225,255,.45),
0 0 70px rgba(0,255,170,.2);
}

100%{
box-shadow:
0 0 10px rgba(0,255,170,.35),
0 0 25px rgba(0,225,255,.25);
}
}