/* Kontener przycisków — upewnij się, że nie obcina dzieci */
.rbtn-wrap{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
align-items:center;
margin-top:12px;
overflow:visible; /* zapobiega obcinaniu absolutnych elementów wewnątrz */
position:relative; z-index:1;
}

/* Reset i dostępność */
.rbtn{appearance:none;-webkit-appearance:none;border-style:solid;box-sizing:border-box}

/* Wspólne style przycisku */
.rbtn{
display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
background: rgba(8,12,16,0.62);
backdrop-filter: blur(8px) saturate(1.05);
-webkit-backdrop-filter: blur(8px) saturate(1.05);
color:#e9f8ff;font-weight:800;border:2px solid rgba(255,255,255,0.06);
cursor:pointer;font-family:Inter,Arial,system-ui,Segoe UI,Roboto,Helvetica;
box-shadow:0 12px 28px rgba(0,0,0,0.5), 0 0 0 3px rgba(0,0,0,0.02) inset;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
position:relative; overflow:visible; min-width:140px; justify-content:center; font-size:13px;
z-index: 999; /* ensure buttons sit above many page elements */
min-height:40px; /* safety so element nie zmaleje do 0 */
}

/* Play */
.rbtn.play{
background: linear-gradient(180deg, rgba(87,169,254,0.18), rgba(1,175,246,0.12));
border:2px solid rgba(87,169,254,0.22);
color: #002026;
box-shadow:0 14px 40px rgba(1,175,246,0.10);
}
.rbtn.play .rbtn-icon, .rbtn.play .rbtn-label { color: #57a9fe; fill: #57a9fe;
filter: drop-shadow(0 2px 2px rgba(255,255,255,0.16)) drop-shadow(0 5px 10px rgba(0,0,0,0.75)); }

/* Outline */
.rbtn.outline{
background: rgba(12,16,20,0.72);
border:2px solid rgba(255,255,255,0.12);
color:#e6f8ff;
box-shadow:0 14px 36px rgba(0,0,0,0.48);
}
.rbtn.outline .rbtn-icon, .rbtn.outline .rbtn-label { color: inherit; fill: currentColor; }

/* Bitrate */
.rbtn.bitrate{
background: linear-gradient(180deg, rgba(216,57,210,0.14), rgba(216,57,210,0.06));
border:2px solid rgba(216,57,210,0.20);
color: #07121a;
box-shadow:0 14px 36px rgba(216,57,210,0.08);
}
.rbtn.bitrate .rbtn-icon, .rbtn.bitrate .rbtn-label { color: #d839d2; fill: #d839d2;
filter: drop-shadow(0 2px 2px rgba(255,255,255,0.16)) drop-shadow(0 5px 10px rgba(0,0,0,0.75)); }

/* hover / active */
.rbtn:hover{ transform: translateY(-3px); box-shadow:0 28px 64px rgba(0,0,0,0.72), 0 0 0 4px rgba(255,255,255,0.02) inset; border-color: rgba(255,255,255,0.14); }
.rbtn:active{ transform: translateY(-1px) scale(.995); box-shadow:0 8px 20px rgba(0,0,0,0.6); }

/* Ikony */
.rbtn .rbtn-icon{ width:18px;height:18px;flex-shrink:0;display:block;vertical-align:middle;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.20)) drop-shadow(0 4px 8px rgba(0,0,0,0.75)); -webkit-filter:drop-shadow(0 1px 0 rgba(255,255,255,0.20)) drop-shadow(0 4px 8px rgba(0,0,0,0.75)); }
.rbtn .icon-large{ display:inline-flex; align-items:center; justify-content:center; }
.rbtn .icon-large svg{ width:20px; height:20px; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.20)) drop-shadow(0 5px 12px rgba(0,0,0,0.78)); }

/* Label */
.rbtn .rbtn-label{
font-weight:900;font-size:13px;letter-spacing:0.02em;
text-shadow:0 1px 0 rgba(255,255,255,0.24),0 2px 6px rgba(0,0,0,0.5),0 8px 22px rgba(0,0,0,0.75);
-webkit-text-stroke: 0.25px rgba(0,0,0,0.24); text-stroke: 0.25px rgba(0,0,0,0.24);
position:relative; z-index:2;
}

/* subtle inner glow */
.rbtn::before{ content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 35%);pointer-events:none;z-index:1; }

/* Focus (keyboard) */
.rbtn:focus{ outline:none; }
.rbtn:focus-visible{ box-shadow:0 14px 36px rgba(0,0,0,0.6), 0 0 0 4px rgba(88,150,255,0.18); border-color: rgba(88,150,255,0.36); }

/* Ripple */
.rbtn .ripple{ position:absolute;border-radius:50%;transform:scale(0);opacity:0.28;background:rgba(255,255,255,0.7);pointer-events:none;z-index:3; }
.rbtn:focus{ outline-offset:4px }

/* Mobile */
@media (max-width:520px){
.rbtn-wrap{gap:8px;padding:0 8px}
.rbtn{flex:1;min-width:0}
}