/* ═══════════════════════════════════════════════════════════════════════════
   Language Popup — Warm Earth Edition v2
   Uses --k-* tokens from tokens.css. Supports [data-theme="dark"|"light"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop overlay ── */
.kp-lang-popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: var(--k-z-modal, 500);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--k-space-4);
  opacity: 0;
  transition: opacity var(--k-duration-normal) var(--k-ease);
}
.kp-lang-popup.is-visible {
  display: flex;
  opacity: 1;
}

/* ── Card ── */
.kp-lang-popup__card {
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-default);
  border-radius: var(--k-radius-2xl);
  box-shadow: var(--k-shadow-xl);
  padding: var(--k-space-8) var(--k-space-6) var(--k-space-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
  font-family: var(--k-font-sans);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--k-duration-normal) var(--k-ease-spring);
}
.kp-lang-popup.is-visible .kp-lang-popup__card {
  transform: translateY(0) scale(1);
}

/* ── Globe icon ── */
.kp-lang-popup__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--k-space-3);
}

/* ── Title ── */
.kp-lang-popup__title {
  font-family: var(--k-font-display);
  font-size: var(--k-text-xl);
  font-weight: var(--k-weight-semibold);
  color: var(--k-text-primary);
  margin: 0 0 var(--k-space-1);
}

/* ── Subtitle ── */
.kp-lang-popup__subtitle {
  font-size: var(--k-text-sm);
  color: var(--k-text-muted);
  margin: 0 0 var(--k-space-6);
}

/* ── Buttons container ── */
.kp-lang-popup__actions {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3);
}

/* ── Button (shared base) ── */
.kp-lang-popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  width: 100%;
  padding: var(--k-space-3) var(--k-space-4);
  border: 1px solid var(--k-border-default);
  border-radius: var(--k-radius-lg);
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  font-weight: var(--k-weight-medium);
  color: var(--k-text-primary);
  background: var(--k-bg-card);
  cursor: pointer;
  transition:
    background var(--k-duration-fast) var(--k-ease),
    border-color var(--k-duration-fast) var(--k-ease),
    box-shadow var(--k-duration-fast) var(--k-ease);
}
.kp-lang-popup__btn:hover {
  background: var(--k-bg-hover);
  border-color: var(--k-border-strong);
}
.kp-lang-popup__btn:active {
  background: var(--k-bg-active);
}

/* ── Recommended (IP-detected) button — accent ── */
.kp-lang-popup__btn--recommended {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: #fff;
  font-weight: var(--k-weight-semibold);
  box-shadow: var(--k-shadow-glow-sm);
}
.kp-lang-popup__btn--recommended:hover {
  background: var(--k-primary-light);
  border-color: var(--k-primary-light);
  box-shadow: var(--k-shadow-glow);
}
.kp-lang-popup__btn--recommended:active {
  filter: brightness(0.92);
}

/* ── Flag emoji ── */
.kp-lang-popup__flag {
  font-size: 1.2em;
  line-height: 1;
}

/* ── Badge "IP ✓" ── */
.kp-lang-popup__badge {
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-normal);
  opacity: 0.8;
  margin-left: auto;
}

/* ── Select wrapper (third row: "Other languages") ── */
.kp-lang-popup__select-wrap {
  position: relative;
  width: 100%;
}

.kp-lang-popup__select {
  width: 100%;
  padding: var(--k-space-3) var(--k-space-4);
  padding-right: var(--k-space-10);
  border: 1px solid var(--k-border-default);
  border-radius: var(--k-radius-lg);
  font-family: var(--k-font-sans);
  font-size: var(--k-text-base);
  font-weight: var(--k-weight-medium);
  color: var(--k-text-secondary);
  background: var(--k-bg-card);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    border-color var(--k-duration-fast) var(--k-ease),
    color var(--k-duration-fast) var(--k-ease);
  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a7d70' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--k-space-4) center;
}
.kp-lang-popup__select:hover {
  border-color: var(--k-border-strong);
}
.kp-lang-popup__select:focus {
  outline: 2px solid var(--k-primary-soft);
  outline-offset: 1px;
  border-color: var(--k-primary);
  color: var(--k-text-primary);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .kp-lang-popup__card {
    padding: var(--k-space-6) var(--k-space-4) var(--k-space-4);
    border-radius: var(--k-radius-xl);
  }
}