/* Estilos útiles relacionados con la protección contra traducción y elementos del footer/modal */

/* 1) Indicar visualmente (opcional) y asegurar aislamiento del texto
   google translate respeta class="notranslate" y translate="no".
   unicode-bidi:isolate evita que el texto afecte al orden de bidi del contenedor. */
.notranslate,
.notranslate * {
  unicode-bidi: isolate;   /* aislar del texto adyacente en entornos bidi */
  direction: ltr;          /* forzar dirección LTR si es necesario (ajusta si tu marca usa RTL) */
}

/* Evitar que los motores automáticos cambien estilos o inserten nodos adicionales
   (no garantiza nada frente a transformaciones de terceros, pero ayuda). */
.notranslate {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 2) Honeypot (campo oculto para bots) - estilo seguro/semántico */
.honeypot-hidden,
input[name="phone_extra"],
input#phone_extra {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Cookie banner básico (puedes adaptar colores a tu diseño) */
#cookie-banner {
  display: none; /* mostrado por JS */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(20, 20, 20, 0.96);
  color: #fff;
  padding: 14px 18px;
  text-align: center;
  z-index: 99999;
  font-size: 15px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
#cookie-banner a { color: #ffd; text-decoration: underline; }
#cookie-banner button { margin-left: 18px; padding: 8px 18px; border-radius: 6px; border: none; background: #6bc1ff; color: #062f3a; cursor: pointer; }

/* 4) Flags dropdown (mínimo) */
.gt-flags-dropdown { position: fixed; left: 12px; bottom: 12px; z-index: 99998; }
.gt-flags-btn {
  display:flex; align-items:center; gap:8px;
  background:#fff;border-radius:8px;padding:8px 10px;
  box-shadow:0 6px 18px rgba(10,20,30,0.08); cursor:pointer; border:1px solid rgba(0,0,0,0.06);
}
.gt-flags-btn img { height:20px; display:inline-block; }
.gt-flags-list {
  display:none; margin-top:8px; background:#fff; padding:6px; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}
.gt-flags-dropdown.open .gt-flags-list { display:block; }
.gt-flags-list button {
  display:flex; align-items:center; gap:8px; width:160px; padding:8px; border:0; background:transparent; cursor:pointer;
  text-align:left; border-radius:6px;
}
.gt-flags-list button:hover { background: #f4f7fb; }

/* 5) Small accessibility helpers */
.modal .close-modal { cursor:pointer; background:transparent; border:0; font-size:20px; line-height:1; }
.form-feedback { margin-top:12px; font-size:14px; color:#d23b3b; }

/* 6) Prevent Google Translate from translating inputs placeholders (best-effort)
   Note: Google Translate sometimes translates placeholders; prefer server-side text or labels.
*/
input.notranslate, textarea.notranslate, select.notranslate {
  unicode-bidi: isolate;
}

/* 7) Utility: visually-hidden (for screen-reader accessible hidden content) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* 8) Optional: slight emphasis to branded text so it stands out */
span.notranslate.brand {
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* END */