/* =============================================================
   POLLITOS DETAILING — TRANSLATION (EN/ES)
   Lightweight dual-language system.

   USAGE in HTML:
     <span data-i18n="key.name">Default English text</span>

   When user toggles to ES, JS swaps textContent from translation dict.
   For attributes (placeholder, aria-label, etc.):
     <input data-i18n-placeholder="form.name_placeholder" placeholder="Your name">
   ============================================================= */

/* === LANGUAGE TOGGLE BUTTON (in nav) === */
.lang-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: rgba(255,214,10,0.12);
  border: 1.5px solid rgba(255,214,10,0.55);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
  flex-shrink: 0;
  visibility: visible !important;
}
.lang-toggle:hover {
  border-color: #FFD60A;
  background: rgba(255,214,10,0.22);
  color: #FFD60A;
}
.lang-toggle .lang-flag {
  font-size: 0.95rem;
  line-height: 1;
}
.lang-toggle .lang-code {
  font-weight: 900;
  color: rgba(255,255,255,0.55);
  transition: color 0.18s;
}
.lang-toggle .lang-code.lang-current {
  color: #FFD60A;
}
.lang-toggle .lang-divider {
  opacity: 0.35;
  margin: 0 1px;
}

/* mobile: keep visible & prominent */
@media (max-width: 960px) {
  .lang-toggle {
    display: inline-flex !important;
    padding: 7px 11px;
    font-size: 0.7rem;
    background: rgba(255,214,10,0.16);
    border-color: rgba(255,214,10,0.65);
  }
  .lang-toggle .lang-flag { font-size: 1rem; }
}
@media (max-width: 768px) {
  .lang-toggle {
    display: inline-flex !important;
    padding: 6px 10px;
    font-size: 0.68rem;
  }
}
@media (max-width: 480px) {
  .lang-toggle {
    display: inline-flex !important;
    padding: 5px 9px;
    font-size: 0.65rem;
    gap: 3px;
  }
  .lang-toggle .lang-flag { font-size: 0.9rem; }
  /* On tiny screens, hide the nav-cta to make room for the lang toggle —
     the page already has prominent BOOK ON WHATSAPP buttons in the body */
  nav .nav-cta { display: none !important; }
}

/* In mobile nav dropdown — full-width version */
.mobile-nav .lang-toggle-wrap {
  padding: 12px 28px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: center;
}
.mobile-nav .lang-toggle {
  width: 100%;
  justify-content: center;
  padding: 12px 18px !important;
  font-size: 0.82rem !important;
  background: rgba(255,214,10,0.18);
  border: 2px solid #FFD60A;
}

/* === Translation animation (subtle fade on switch) === */
[data-i18n], [data-i18n-html] {
  transition: opacity 0.18s;
}
.lang-switching [data-i18n], .lang-switching [data-i18n-html] {
  opacity: 0;
}

/* =============================================================
   LEGACY .en-text / .es-text bilingual system support
   The package pages have hand-written Spanish translations using
   these classes. The i18n.js toggle sets html[lang] which we use
   here to control visibility — overrides any inline display:none.
   ============================================================= */
html[lang="en"] .es-text { display: none !important; }
html[lang="es"] .en-text { display: none !important; }
/* Show es-text in Spanish mode (override legacy inline display:none) */
html[lang="es"] .es-text { display: revert !important; }
/* Common containers that need explicit display values restored: */
html[lang="es"] h1.es-text,
html[lang="es"] h2.es-text,
html[lang="es"] h3.es-text,
html[lang="es"] h4.es-text,
html[lang="es"] p.es-text,
html[lang="es"] span.es-text,
html[lang="es"] div.es-text,
html[lang="es"] li.es-text { display: revert !important; }
/* Some legacy es-text elements are grids, flex, etc. — let them flow */
html[lang="es"] .includes-grid.es-text,
html[lang="es"] .pkg-features.es-text,
html[lang="es"] .features.es-text { display: grid !important; }