/* ============================================================
   CMS Language Switcher — MEDICUM PALMA
   Button in header + full-screen popup
   ============================================================ */

/* ── Button ─────────────────────────────────────────────── */
.cms-lang-btn {
  position: absolute;
  right: 220px;
  top: 82px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  z-index: 1444;
  line-height: 1;
  white-space: nowrap;
}

.cms-lang-btn:hover,
.cms-lang-btn:focus-visible {
  background: rgba(255, 255, 255, 1);
  color: var(--color1);
  border-color: rgba(255, 255, 255, 1);
  outline: none;
}

/* Adapt when header gains blue bg (scrolled on blue sections) */
#header.blue .cms-lang-btn {
  color: var(--color1);
  background: rgba(255, 255, 255, 0.35);
  border-color: var(--color1);
}

.cms-lang-btn .cms-lang-globe {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Popup overlay ───────────────────────────────────────── */
/*
  The CMS runtime hides the popup while it is closed and
  removes hiding when open. We declare the open (flex) layout
  directly here so it is ready the moment the CMS shows it.
*/
#cms-lang-popup {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(240, 248, 251, 0.97);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Close button (×) */
.cms-lang-popup__close {
  position: fixed;
  top: 1.4rem;
  right: 1.6rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color1, #006a88);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  padding: 0;
}

.cms-lang-popup__close:hover,
.cms-lang-popup__close:focus-visible {
  background: var(--color2, #006a88);
  transform: scale(1.1);
  outline: none;
}

/* Inner wrapper */
.cms-lang-popup__inner {
  text-align: center;
  max-width: 1100px;
  width: 100%;
  padding: 3.5rem 2rem 5rem;
}

/* Accent subtitle */
.cms-lang-popup__accent {
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color1, #006a88);
  letter-spacing: 3px;
  margin: 0 0 0.6rem;
}

/* Main title */
.cms-lang-popup__title {
  font-family: "Poppins", sans-serif !important;
  font-size: 2.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase;
  color: #102844 !important;
  /* Reset conflicting site defaults */
  margin: 0 0 2.5rem !important;
  text-align: center !important;
}

/* Suppress the decorative ::before line from styles.css */
.cms-lang-popup__title::before,
.cms-lang-popup__title::after {
  display: none !important;
}

/* Language grid */
.cms-lang-popup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem 0.5rem;
  max-width: 920px;
  margin: 0 auto;
}

.cms-lang-popup__grid a {
  font-family: "Poppins", sans-serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: #6b8fa3;
  text-decoration: none;
  display: block;
  padding: 0.45rem 0.25rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.cms-lang-popup__grid a:hover,
.cms-lang-popup__grid a:focus-visible {
  color: var(--color1, #006a88);
  background: rgba(0, 106, 136, 0.07);
  outline: none;
}

.cms-lang-popup__grid a.is-active {
  color: var(--color1, #006a88);
  font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 1200px) {
  .cms-lang-btn {
    right: 165px;
  }
}

@media screen and (max-width: 991px) {
  .cms-lang-btn {
    right: 130px;
    top: 80px;
  }
  .cms-lang-popup__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cms-lang-popup__title {
    font-size: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .cms-lang-btn {
    right: 90px;
    top: 38px;
    padding: 6px 10px;
    font-size: 0.72rem;
    letter-spacing: 1px;
    gap: 5px;
  }
  .cms-lang-btn .cms-lang-globe {
    width: 13px;
    height: 13px;
  }
  .cms-lang-popup__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cms-lang-popup__grid a {
    font-size: 1.2rem;
  }
  .cms-lang-popup__title {
    font-size: 1.6rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 1.8rem !important;
  }
  .cms-lang-popup__accent {
    font-size: 0.85rem;
  }
  .cms-lang-popup__inner {
    padding: 2rem 1.25rem 4rem;
  }
  .cms-lang-popup__close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
}