/* ────────────────────────────────────────────────
   Easy-to-tweak variables
───────────────────────────────────────────────── */
:root {
  --size:             46px;           /* flag size – good tap/click target */
  --gap:              16px;           /* space between flags */
  --sidebar-pad-y:    24px;
  --sidebar-width:    68px;           /* slim vertical bar */
  --bg:               rgba(15, 20, 30, 0.6);     /* dark semi-transparent */
  --bg-hover:         rgba(40, 55, 80, 0.85);
  --border:           1px solid rgba(220, 220, 255, 0.12);
  --shadow:           0 6px 22px rgba(0,0,0,0.38);
  --shadow-hover:     0 12px 36px rgba(0,0,0,0.52);
  --radius:           18px;
  --transition:       0.32s cubic-bezier(0.34, 1.6, 0.64, 1);  /* nice bounce */
}

/* Main container – vertical sidebar, right side */
#language-icons {
  position: fixed;
  top: 15%;                        /* your original starting point */
  right: 12px;                     /* positioned on right */
  z-index: 1000;

  display: flex;
  flex-direction: column;          /* vertical stacking – very important */
  align-items: center;
  gap: var(--gap);

  width: var(--sidebar-width);
  padding: var(--sidebar-pad-y) 0;
  background: var(--bg);
  backdrop-filter: blur(14px);     /* modern glass/frosted effect */
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  border: var(--border);
  box-shadow: var(--shadow);

  transition: transform 0.5s ease;
}

/* Remove .right class dependency if you prefer – but keeping for compatibility */
#language-icons.right {
  right: 12px;
  left: auto;
}

/* The wrapper <div class="Page"> if you need to target it */
#language-icons .Page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
}

/* Individual flag links */
.language-uk-icon,
.language-es-icon,
.language-ua-icon,
.language-de-icon,
.language-pt-icon {
  display: block;                  /* better than inline-block for consistency */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffffff center / 92% no-repeat;  /* flag fills nicely, slight inset */
  border: var(--border);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.14);
  cursor: pointer;
  text-indent: -9999px;            /* keep hiding text if you want pure icons */
  overflow: hidden;

  transition: all var(--transition);
  will-change: transform, box-shadow, background-color;
}

/* Hover + focus + active states */
.language-uk-icon:hover,
.language-es-icon:hover,
.language-ua-icon:hover,
.language-de-icon:hover,
.language-pt-icon:hover,
.language-uk-icon:focus-visible,
.language-es-icon:focus-visible,
.language-ua-icon:focus-visible,
.language-de-icon:focus-visible,
.language-pt-icon:focus-visible {
  transform: scale(1.20) translateY(-3px);  /* lift + grow */
  box-shadow: 
    var(--shadow-hover),
    inset 0 2px 8px rgba(255,255,255,0.2);
  background-color: var(--bg-hover);
}

.language-uk-icon:active,
.language-es-icon:active,
.language-ua-icon:active,
.language-de-icon:active,
.language-pt-icon:active {
  transform: scale(0.95) translateY(1px);
}

/* Your flag backgrounds – unchanged paths */
.language-uk-icon { background-image: url("/images/icons/uk.png"); }
.language-de-icon { background-image: url("/images/icons/de.png"); }
.language-es-icon { background-image: url("/images/icons/es.png"); }
.language-pt-icon { background-image: url("/images/icons/pt.png"); }
.language-ua-icon { background-image: url("/images/icons/ua.png"); }

/* Keyboard focus – visible & modern */
.language-uk-icon:focus-visible,
.language-es-icon:focus-visible,
.language-ua-icon:focus-visible,
.language-de-icon:focus-visible,
.language-pt-icon:focus-visible {
  outline: 3px solid #6ab0ff;
  outline-offset: 4px;
}

/* ────────────────────────────────────────────────
   Mobile: horizontal pill at bottom
───────────────────────────────────────────────── */
@media (max-width: 1320px) {
  #language-icons {
    top: auto;
    bottom: 18px;
    right: 50%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;           /* now horizontal */
    gap: 18px;
    width: auto;
    padding: 14px 28px;
    border-radius: 999px;          /* smooth pill shape */
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  }

  #language-icons .Page {
    flex-direction: row;
    gap: 18px;
  }

  /* Smaller phones */
  @media (max-width: 480px) {
    :root {
      --size: 42px;
      --gap: 14px;
    }
    #language-icons {
      padding: 12px 24px;
    }
  }
}

/* Cleanup legacy class if still around */
.language-icons {
  display: none !important;
}