/* ================================
   FOOTER BASE
================================== */
footer.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 20px;
  background: rgba(0,0,0,0.6);
  color: white;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ================================
   DESKTOP FOOTER
================================== */
.desktop-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: white;
}

/* ================================
   🌍 LANGUAGE SELECTOR (OPENS UPWARD ABOVE FOOTER)
================================== */

.lang-wrapper {
  position: relative;
  display: inline-block;
}

.lang-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* invisible bridge between flag & dropdown */
.lang-toggle::after {
  content: "";
  position: absolute;
  bottom: 100%;     /* bridge area ABOVE the flag now */
  left: 0;
  width: 100%;
  height: 24px;
}

/* dropdown box */
.lang-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;             /* opens upward */
  left: calc(100% - 12px);   /* center horizontally relative to flag */
  transform: translateX(-50%); /* perfect centering */
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 8px 10px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 9999;
}


/* show when hovering */
.lang-wrapper:hover .lang-dropdown,
.lang-dropdown:hover {
  display: block;
}

/* flag icon visuals */
.flag-icon {
  width: 22px;
  height: 16px;
  vertical-align: middle;
  border-radius: 2px;
  margin-left: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.flag-icon:hover {
  transform: scale(1.15);
}


/* label */
.lang-label {
  opacity: 0.7;
  font-size: 14px;
  margin-right: 4px;
}

/* ================================
   MOBILE FOOTER
================================== */
.mobile-footer-icons {
  display: none; /* hidden by default */
}

/* --- MOBILE VIEW (<1099px) --- */
@media (max-width: 1108px) {
  /* hide desktop footer */
  .desktop-footer,
  .lang-wrapper {
    display: none !important;
  }

  /* show only social icons */
  .mobile-footer-icons {
    display: flex !important;
    gap: 14px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .mobile-footer-icons img {
    width: 40px;
    height: 40px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
  }

  .mobile-footer-icons img:hover {
    opacity: 1;
  }
}