/* === ICON GENERIC === */
.icon {
  width: 22px;
  height: 22px;
  stroke: white;
  stroke-width: 2;
  padding: 6px;
  transition: 0.25s ease;
}

.icon:hover {
  transform: scale(1.15);
}

.flag-icon {
  width: 35px;
  height: 35px;
  border-radius: 7px;
  padding: 2px;         /* menší padding ako lucide ikonky */
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.flag-icon:hover {
  transform: scale(1.15);
  background: rgba(255,255,255,0.05);
}

/* === TOPBAR ANIMATIONS === */
@keyframes dropsc {
  0% { opacity: 0%; top: -100px; }
  80% { opacity: 0%; top: -100px; }
  92% { opacity: 92%; top: 5px; }
  98% { opacity: 98%; top: -2px; }
  100% { opacity: 100%; top: 0px; }
}

@keyframes dropbottom {
  0% { opacity: 0%; bottom: -100px; }
  80% { opacity: 0%; bottom: -100px; }
  92% { opacity: 92%; bottom: 5px; }
  98% { opacity: 98%; bottom: -2px; }
  100% { opacity: 100%; bottom: 0px; }
}

/* === TOPBAR WRAPPER === */
.snlng {
  //position: float;
  //left: 50%;
  //transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;

  padding: 10px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  backdrop-filter: blur(14px);

  z-index: 999;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);

  animation: dropsc 1s forwards;
}

/* === SEPARATOR BETWEEN ICONS === */
.snlng > a {
  position: relative;
}

.snlng > a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0.0) 100%
  );
  pointer-events: none;
}

/* === TOPBAR REFLECTION === */
.snlng::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
  transform: skewY(-8deg);
  transform-origin: bottom left;
  pointer-events: none;

  height: 80px;
  bottom: 20px;
  z-index: 1;
}

/* === TEXT AT BOTTOM === */
.bottom {
  animation: 2000ms ease-out 0s 1 dropbottom;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;
  color: rgba(255,255,255, 1);
  font-family: arial;
  font-weight: bold;
}

/* === LANGUAGE FLAG FIXES === */
#languagediv img {
  border-right: none !important;
  border-radius: 7px;
}

/* === LUCIDE ICON DEFAULT === */
i[data-lucide] {
  display: flex;
  align-items: center;
  justify-content: center;
}

i[data-lucide] svg {
  width: 24px;
  height: 24px;
  stroke: white;
  stroke-width: 2;
}