/* Base */
#dp-sbb-bar.dp-sbb-bar{
  height: var(--dp-sbb-height, 72px);
  min-height: 40px;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
  backdrop-filter: saturate(1.1);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 280ms ease, transform 280ms ease;
	position: relative;
}

/* Ambient glow (hidden light)
 * IMPORTANT:
 * This is rendered as a SEPARATE element BEHIND the bar.
 * That way it looks like "κρυφός φωτισμός" and never sits on top
 * of the selected background image.
 */
#dp-sbb-bar.dp-sbb-glow-on{ /* marker class only */ }

#dp-sbb-glow.dp-sbb-glow{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dp-sbb-height, 72px);
  pointer-events: none;
  display: none; /* JS enables when visible & not docked */
  opacity: 0;
  transition: opacity 220ms ease;
}

#dp-sbb-glow.dp-sbb-glow.dp-sbb-glow-visible{
  display: block;
  opacity: 1;
}

#dp-sbb-glow.dp-sbb-glow::before{
  content: "";
  position: absolute;
  left: 50%;
  /* Only a LITTLE ABOVE the bar (hidden backlight, not a blob over the bar) */
  top: -12px;
  transform: translateX(-50%);
  width: min(820px, 78vw);
  height: 26px;
  background: radial-gradient(ellipse at center,
    rgba(var(--dp-sbb-glow-rgb, 255, 255, 255), 0.78) 0%,
    rgba(var(--dp-sbb-glow-rgb, 255, 255, 255), 0.14) 48%,
    rgba(var(--dp-sbb-glow-rgb, 255, 255, 255), 0.00) 74%
  );
  filter: blur(16px);
}

#dp-sbb-bar .dp-sbb-inner{
  max-width: 1200px;
  width: 100%;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-sbb-gap, 22px);
}

#dp-sbb-bar .dp-sbb-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease, filter 220ms ease;
  position: relative;
  overflow: hidden;
}

#dp-sbb-bar .dp-sbb-icon{
  width: var(--dp-sbb-icon, 22px);
  height: var(--dp-sbb-icon, 22px);
  object-fit: contain;
  display: block;
}

/* Hover Icon Swap (without breaking hover effects) */
#dp-sbb-bar .dp-sbb-icon-wrap{
	position: relative;
	width: var(--dp-sbb-icon, 22px);
	height: var(--dp-sbb-icon, 22px);
	margin: 0;
	flex: 0 0 auto;
}
#dp-sbb-bar .dp-sbb-icon-wrap .dp-sbb-icon{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
#dp-sbb-bar .dp-sbb-icon-default,
#dp-sbb-bar .dp-sbb-icon-hover{
	transition: opacity 180ms ease;
}
#dp-sbb-bar .dp-sbb-icon-hover{ opacity: 0; }
#dp-sbb-bar .dp-sbb-item:hover .dp-sbb-icon-hover{ opacity: 1; }
#dp-sbb-bar .dp-sbb-item:hover .dp-sbb-icon-default{ opacity: 0; }

#dp-sbb-bar.dp-sbb-hidden{
  pointer-events: none;
  opacity: 0;
	transform: translateY(20px);
}

/* Glass (blur) background option */
#dp-sbb-bar.dp-sbb-bg-glass{
  /* Keep background-image as set by JS (used for optional glow layer). */
  /*
   * Glass must stay transparent and must NOT inherit the user-selected background color.
   * A low opacity helps the backdrop-filter render consistently across browsers.
   */
  background-color: rgba(255, 255, 255, var(--dp-sbb-glass-opacity, 0.08)) !important;
  backdrop-filter: blur(var(--dp-sbb-glass-blur, 12px)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--dp-sbb-glass-blur, 12px)) saturate(1.25);
}

/* When docking above the footer (optional): show underlying page/section background.
   For glass we keep the glass overlay, so these overrides apply only when NOT glass. */
#dp-sbb-bar.dp-sbb-docked-pagebg:not(.dp-sbb-bg-glass){
  background-image: none !important;
  background-color: transparent !important;
}

/* Spacer can temporarily inherit background from the element above the footer
   so the bar blends seamlessly when docked. */
.dp-sbb-spacer.dp-sbb-spacer-pagebg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
}

/* Visible */
#dp-sbb-bar.dp-sbb-visible{
  pointer-events: auto;
}

/* ===== Show Effects (applied to bar) ===== */
#dp-sbb-bar.show-slide-up.dp-sbb-visible{
  animation: dpSbbSlideUp 420ms ease both;
}
@keyframes dpSbbSlideUp{
  from{ transform: translateY(30px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

#dp-sbb-bar.show-fade.dp-sbb-visible{
  animation: dpSbbFade 420ms ease both;
}
@keyframes dpSbbFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

#dp-sbb-bar.show-zoom.dp-sbb-visible{
  animation: dpSbbZoom 420ms ease both;
}
@keyframes dpSbbZoom{
  from{ transform: scale(0.96); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

#dp-sbb-bar.show-bounce.dp-sbb-visible{
  animation: dpSbbBounce 520ms cubic-bezier(.2, .8, .2, 1.2) both;
}
@keyframes dpSbbBounce{
  0%{ transform: translateY(40px); opacity: 0; }
  70%{ transform: translateY(-6px); opacity: 1; }
  100%{ transform: translateY(0); opacity: 1; }
}

#dp-sbb-bar.show-flip.dp-sbb-visible{
  transform-origin: 50% 100%;
  animation: dpSbbFlip 520ms ease both;
}
@keyframes dpSbbFlip{
  from{ transform: rotateX(65deg); opacity: 0; }
  to{ transform: rotateX(0deg); opacity: 1; }
}

#dp-sbb-bar.show-blur.dp-sbb-visible{
  animation: dpSbbBlur 520ms ease both;
}
@keyframes dpSbbBlur{
  from{ filter: blur(10px); transform: translateY(20px); opacity: 0; }
  to{ filter: blur(0); transform: translateY(0); opacity: 1; }
}

/* ===== Hover Effects (applied to items via class on bar) ===== */

/* 1 underline */
#dp-sbb-bar.hover-underline .dp-sbb-item::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}
#dp-sbb-bar.hover-underline .dp-sbb-item:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* 2 grow */
#dp-sbb-bar.hover-grow .dp-sbb-item:hover{ transform: scale(1.06); }

/* 3 shrink */
#dp-sbb-bar.hover-shrink .dp-sbb-item:hover{ transform: scale(0.95); }

/* 4 lift */
#dp-sbb-bar.hover-lift .dp-sbb-item:hover{ transform: translateY(-4px); }

/* 5 shadow */
#dp-sbb-bar.hover-shadow .dp-sbb-item:hover{ box-shadow: 0 10px 26px rgba(0,0,0,0.28); }

/* 6 glow */
#dp-sbb-bar.hover-glow .dp-sbb-item:hover{ filter: drop-shadow(0 0 14px rgba(255,255,255,0.25)); }

/* 7 rotate */
#dp-sbb-bar.hover-rotate .dp-sbb-item:hover{ transform: rotate(-2deg) translateY(-2px); }

/* 8 skew */
#dp-sbb-bar.hover-skew .dp-sbb-item:hover{ transform: skewX(-6deg) translateY(-2px); }

/* 9 pulse */
#dp-sbb-bar.hover-pulse .dp-sbb-item:hover{ animation: dpSbbPulse 520ms ease both; }
@keyframes dpSbbPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* 10 wobble */
#dp-sbb-bar.hover-wobble .dp-sbb-item:hover{ animation: dpSbbWobble 520ms ease both; }
@keyframes dpSbbWobble{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-3px); }
  40%{ transform: translateX(3px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* 11 swing */
#dp-sbb-bar.hover-swing .dp-sbb-item{ transform-origin: 50% 100%; }
#dp-sbb-bar.hover-swing .dp-sbb-item:hover{ animation: dpSbbSwing 520ms ease both; }
@keyframes dpSbbSwing{
  0%{ transform: rotate(0deg); }
  30%{ transform: rotate(4deg); }
  60%{ transform: rotate(-3deg); }
  100%{ transform: rotate(0deg); }
}

/* 12 border */
#dp-sbb-bar.hover-border .dp-sbb-item{
  outline: 1px solid rgba(255,255,255,0.18);
}
#dp-sbb-bar.hover-border .dp-sbb-item:hover{
  outline-color: rgba(255,255,255,0.6);
}

/* 13 fill */
#dp-sbb-bar.hover-fill .dp-sbb-item::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.12);
  transform: translateY(100%);
  transition: transform 220ms ease;
}
#dp-sbb-bar.hover-fill .dp-sbb-item > *{ position: relative; z-index: 1; }
#dp-sbb-bar.hover-fill .dp-sbb-item:hover::before{ transform: translateY(0); }

/* 14 shine */
#dp-sbb-bar.hover-shine .dp-sbb-item::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
  transform: rotate(12deg);
  transition: left 520ms ease;
}
#dp-sbb-bar.hover-shine .dp-sbb-item:hover::before{ left: 120%; }

/* 15 color swap */
#dp-sbb-bar.hover-color .dp-sbb-item{
  background: rgba(0,0,0,0.14);
}
#dp-sbb-bar.hover-color .dp-sbb-item:hover{
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Small screens: wrap items */
@media (max-width: 520px){
  #dp-sbb-bar .dp-sbb-inner{
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  #dp-sbb-bar .dp-sbb-item{
    padding: 8px 10px;
  }
}

/* Spacer used to provide scroll room without leaving empty space after the footer */
#dp-sbb-spacer{
  width: 100%;
  display: block;
  pointer-events: none;
}