/* =============================================================================
   DPL Language Selector — flag trigger + popup modal
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Trigger button (flag in header icons row)
   --------------------------------------------------------------------------- */

.dpl-lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}

.header__icons--localization .desktop-localization-wrapper {
  display: flex;
  align-items: center;
}

/* Mobile / tablet: the flag shares the left grid column with the hamburger, sitting at its inner
   edge so it reads as "just left of the logo". Keeping it out of the right-hand icon row matters —
   the header grid is `1fr 2fr 1fr`, and a fourth icon on the right overflows that column and pushes
   the centred logo off centre. */
@media screen and (max-width: 989px) {
  /* The hamburger is normally auto-placed into this cell. Once the flag claims it explicitly, the
     hamburger has nowhere left to go and grid pushes it onto a new implicit row — so place both
     explicitly and pin them to opposite ends of the same cell. */
  .header > header-drawer {
    grid-area: left-icons;
    justify-self: start;
    align-self: center;
  }

  .dpl-lang-trigger--mobile {
    grid-area: left-icons;
    justify-self: end;
    align-self: center;
    padding: 0 0.4rem;
  }

  .dpl-lang-trigger--mobile .dpl-lang-flag {
    font-size: 20px;
  }
}

/* Very narrow phones: the left cell is ~80px, so trim the flag further to keep it off the burger */
@media screen and (max-width: 420px) {
  .dpl-lang-trigger--mobile {
    padding: 0 0.2rem;
  }

  .dpl-lang-trigger--mobile .dpl-lang-flag {
    font-size: 18px;
  }
}

.dpl-lang-trigger:hover {
  opacity: 0.75;
}

.dpl-lang-trigger .dpl-lang-flag {
  font-size: 22px;
  display: block;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Modal backdrop + panel
   --------------------------------------------------------------------------- */

.dpl-lang-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpl-lang-modal[hidden] {
  display: none;
}

.dpl-lang-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.dpl-lang-modal__panel {
  position: relative;
  background: #FFFFFF;
  border-radius: 8px;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 28px 24px 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------------------
   Close button
   --------------------------------------------------------------------------- */

.dpl-lang-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6B6B6B;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: color 0.15s ease;
}

.dpl-lang-modal__close:hover {
  color: #0D0D0D;
}

/* ---------------------------------------------------------------------------
   Title
   --------------------------------------------------------------------------- */

.dpl-lang-modal__title {

  font-size: 18px;
  font-weight: 600;
  color: #0D0D0D;
  margin: 0 0 20px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Options list
   --------------------------------------------------------------------------- */

.dpl-lang-form {
  display: block;
}

.dpl-lang-modal__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dpl-lang-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: 1.5px solid #E5E5E5;
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dpl-lang-option:hover {
  border-color: #ADADAD;
  background: #F7F7F7;
}

.dpl-lang-option--active {
  border-color: #0D0D0D;
  background: #F5F7FF;
}

.dpl-lang-flag {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.dpl-lang-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dpl-lang-option__country {

  font-size: 14px;
  font-weight: 600;
  color: #0D0D0D;
}

.dpl-lang-option__meta {

  font-size: 12px;
  font-weight: 400;
  color: #6B6B6B;
}