/* ===== Floating container onderaan ===== */
#floating-orb {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  background: #333333; /* footer kleur */
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}

#floating-orb::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}

html.has-floating-orb body {
  transition: padding-bottom .2s ease;
}

/* ===== Kleuroverrides voor de ORB embed (zonder embed te wijzigen) ===== */
#floating-orb .orbP {
  background-color: #333333 !important;
  border: none !important;
}

#floating-orb .orbPp,
#floating-orb .orbPs {
  background: #333333 !important;
}

#floating-orb .orbPp::before {
  border-color: transparent transparent transparent #ffffff !important;
}

#floating-orb .orbPs::before {
  border-color: #ffffff !important;
}

#floating-orb .orbPtn,
#floating-orb .orbPtt,
#floating-orb .orbPtt:hover {
  color: #ffffff !important;
}

#floating-orb .orbV {
  background-color: #333333 !important;
  box-shadow: 0 0 32px 32px #333333 !important;
}

#floating-orb .orbVC::after,
#floating-orb .orbVb::after {
  border-color: transparent #ffffff transparent transparent !important;
}

#floating-orb .orbVb::before,
#floating-orb .orbVCs {
  background: #ffffff !important;
}

#floating-orb .orbVb > ._m::before,
#floating-orb .orbVb > ._m::after {
  border-color: #ffffff !important;
}

/* Pop-out knop wit icoon, donkere knop */
#floating-orb .orbPop {
  background: #333333; /* match footer */
}

#floating-orb .orbPop svg path {
  fill: #ffffff; /* icoon wit */
}

/* Extra padding voor content i.v.m. pop-out knop */
#floating-orb .orbPhc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 56px !important;
}

/* ===== Layout voor album art + tekst naast de playknop ===== */
#floating-orb .orbPp {
  order: 1; /* play-knop */
}

#floating-orb .albumArtBox {
  order: 2; /* album art */
  height: 50px;
  width: 50px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

#floating-orb .orbTextWrap {
  order: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#floating-orb .orbTextWrap .orbPtn,
#floating-orb .orbTextWrap .orbPtt {
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#floating-orb .albumArtBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  #floating-orb .orbPhc {
    padding-right: 64px !important;
  }
}

/* ====================================================================== */
/*                       ORB standaard CSS (vendor)                       */
/* ====================================================================== */

/* General */
.orbP {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  font-weight: normal;
  border: 1px solid transparent;
  user-select: none;
  text-align: left;
}

.orbP br,
.orbP > br {
  display: none !important;
}

.orbP p,
.orbP > p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  font-size: inherit !important;
}

.orbPh {
  display: block;
  position: absolute;
  z-index: 100;
  top: 50%;
  margin-top: -12px !important;
  right: 10px;
  width: 21px !important;
  text-decoration: none !important;
  cursor: pointer;
}

.orbPh > img {
  margin: 0 !important;
  border: none;
  height: 24px !important;
  -webkit-filter: drop-shadow(2px 2px 0 rgba(47, 99, 160, .2));
  filter: drop-shadow(2px 2px 0 rgba(47, 99, 160, .2));
}

.orbPt {
  text-decoration: none !important;
}

.orbPti {
  float: left;
  margin: 0 10px 0 0 !important;
  vertical-align: top !important;
  height: 48px !important;
  width: 89px !important;
  border: none !important;
  border-radius: 2px !important;
  opacity: 1 !important;
}

.orbPtn {
  display: block;
  margin-right: 52px;
  line-height: 24px !important;
  font-size: 17px !important;
  font-weight: bold !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.orbPtt {
  display: block;
  margin-right: 52px;
  text-decoration: none !important;
  line-height: 24px !important;
  font-size: 12px !important;
  opacity: .85;
  transition: opacity .2s;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.orbPtt:hover {
  opacity: 1;
}

.orbPp,
.orbPs {
  float: left !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  height: 48px !important;
  width: 48px !important;
  line-height: 48px !important;
  border-radius: 2px !important;
  border: none !important;
  text-align: center !important;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none !important;
}

.orbPp::before,
.orbPs::before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
}

.orbPp::before {
  border-width: 16px 0 16px 26px;
}

.orbPs::before {
  border-width: 16px;
}

.orbPp:hover,
.orbPs:hover {
  -webkit-transform: scale(1.087);
  transform: scale(1.087);
}

.orbPhc {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  overflow: hidden;
}

/* Playlist */
.orbPpl {
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.orbPpli {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 10px !important;
  list-style: none !important;
  background-image: none;
  float: none !important;
  height: auto !important;
}

.orbPpli > a,
.orbPpli > span {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  font-weight: normal !important;
  text-decoration: none !important;
  line-height: 32px !important;
  font-size: 14px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: color .125s;
  border: none !important;
  text-align: left !important;
}

.orbPpli > a:hover,
.orbPpli > span:hover {
  background: transparent !important;
}

.orbPpli > a > time,
.orbPpli > span > time {
  display: inline-block;
  font-size: 12px !important;
  width: 3em !important;
}

.orbPpli + li {
  border-style: solid !important;
  border-width: 1px 0 0 !important;
}

/* Volume */
.orbV {
  position: absolute;
  z-index: 1 !important;
  width: 24px !important;
  right: 48px !important;
  top: 0 !important;
  bottom: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transition: width .3s;
}

.orbV:hover {
  width: 160px !important;
}

.orbVC {
  position: absolute !important;
  height: 18px !important;
  left: 24px !important;
  top: 50% !important;
  margin: -9px 0 0 11px !important;
}

.orbVC::after {
  display: block;
  content: '';
  margin-top: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 100px 4px 0;
  opacity: .33;
}

.orbVCs {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  cursor: ew-resize !important;
  box-shadow: 0 6px 8px -2px rgba(0, 9, 18, 0.36);
}

.orbVb {
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  top: 50% !important;
  left: 0 !important;
  margin-top: -12px;
  white-space: nowrap !important;
  cursor: pointer;
  transition: opacity .3s;
}

.orbVb::before {
  display: inline-block;
  content: '';
  vertical-align: middle;
  width: 7px;
  height: 12px;
}

.orbVb::after {
  display: inline-block;
  content: '';
  vertical-align: middle;
  border-width: 12px 12px 12px 0;
  border-style: solid;
  height: 0;
  width: 0;
  margin-left: -6px;
}

.orbV:hover .orbVb {
  opacity: .33 !important;
  cursor: default;
}

.orbVb > ._m {
  display: block !important;
  width: 7px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50%;
  margin-top: -9px !important;
  right: 0;
  overflow: hidden !important;
}

.orbVb > ._m::before {
  display: block;
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 28px;
  height: 24px;
  margin-top: -12px;
  border: 1px solid;
  border-radius: 50%;
}

.orbVb > ._m::after {
  display: block;
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 1px solid;
  border-radius: 50%;
}

/* Flags */
.orbF {
  padding: 0 0 10px 10px !important;
  border-top: 1px solid;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-flow: row nowrap !important;
  flex-flow: row nowrap !important;
}

.orbFl {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.orbFli,
.orbFh {
  display: inline-block !important;
  vertical-align: top !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  margin: 10px 7px 0 0 !important;
  padding: 0 6px 0 0 !important;
  text-indent: 0 !important;
  list-style: none !important;
  font-size: 11px !important;
  text-align: right;
}

.orbFlif {
  float: left !important;
  width: 27px !important;
  height: 18px !important;
  margin-right: 5px !important;
}

.orbFhi {
  position: relative !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  width: 8px !important;
  height: 9px !important;
  margin: 0 8px 0 5px !important;
  border-style: solid !important;
  border-width: 2px 1px 0 1px !important;
  border-radius: 5px 5px 0 0 !important;
  opacity: .5;
}

.orbFhi::before,
.orbFhi::after {
  display: block;
  content: '';
  position: absolute;
  bottom: -2px;
  width: 0;
  height: 3px;
  border-style: solid;
  border-width: 2px;
  border-radius: 3px;
}

.orbFhi::before {
  left: -4px;
}

.orbFhi::after {
  right: -4px;
}

/* Multiselect */
.orbPm {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.orbPmi {
  position: relative;
  margin: 0 !important;
  padding: 10px !important;
  list-style: none !important;
  border: dotted rgba(204, 204, 204, 0.5);
  border-width: 1px 0 0;
  font-size: 12px !important;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1 !important;
  cursor: pointer;
}

.orbPmi::before {
  display: block;
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10px;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  opacity: .5;
  filter: alpha(opacity=50);
  transition: opacity .2s;
}

.orbPmi:hover::before {
  opacity: 1;
  filter: alpha(opacity=100);
}

.orbPmi::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 36px;
}

.orbPmii {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 30px;
  height: 16px;
  border: none !important;
  border-radius: 2px !important;
}

.orbPmin {
  display: inline-block;
  vertical-align: middle;
}

/* Compact General */
.cmpct .orbPti {
  height: 24px !important;
  width: 44px !important;
}

.cmpct .orbPtn {
  line-height: 12px !important;
  font-size: 12px !important;
}

.cmpct .orbPtt {
  line-height: 12px !important;
  font-size: 10px !important;
}

.cmpct .orbPp,
.cmpct .orbPs {
  height: 24px !important;
  width: 24px !important;
  line-height: 24px !important;
}

.cmpct .orbPp::before {
  border-width: 8px 0 8px 13px !important;
}

.cmpct .orbPs::before {
  border-width: 8px !important;
}

/* Compact w/Playlist */
.cmpct .orbPpli > a,
.cmpct .orbPpli > span {
  line-height: 24px !important;
  font-size: 12px !important;
}

.cmpct .orbPpli > a > time,
.cmpct .orbPpli > span > time {
  font-size: 11px !important;
}

/* ===== Pop-out knop styling (embed eigen) ===== */
.orbPop {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 8px -2px rgba(0, 9, 18, 0.36);
  z-index: 101;
}

.orbPop:hover {
  transform: translateY(-50%) scale(1.07);
}

.orbPop svg {
  width: 18px;
  height: 18px;
}

.orbPop svg path {
  fill: #e1251b;
}

/* ====================================================================== */
/*                 ORB player specifieke kleurinstellingen                */
/* ====================================================================== */

.orbP {
  background-color: #ee5905 !important; /* common player background */
  border: none; /* container border, radius, width */
}

.orbPp,
.orbPs {
  background: #ee5905 !important; /* buttons play/stop bg */
}

.orbPp::before {
  border-color: transparent transparent transparent #ffffff !important; /* play button color */
}

.orbPs::before {
  border-color: #ffffff !important; /* stop button color */
}

.orbPtn,
.orbPtt,
.orbPtt:hover {
  color: #ffffff !important; /* station name & track link color */
}

.orbV {
  background-color: #ee5905 !important;
  box-shadow: 0 0 32px 32px #ee5905 !important; /* volume control color */
}

.orbVC::after,
.orbVb::after {
  border-color: transparent #ffffff transparent transparent !important;
}

.orbVb::before,
.orbVCs {
  background: #ffffff !important; /* volume bg color */
}

.orbVb > ._m::before,
.orbVb > ._m::after {
  border-color: #ffffff !important;
}