/* ==========================================================================
   Gate de edad y uso de investigacion (src/js/uu-gate.js).

   La caja es la del gate de peptik (#f7f7f7, radio 12px, titulo azul oscuro
   de 38px, botones pastilla), con los campos y confirmaciones del de uu.life.
   Carga en las dos familias de paginas, asi que no depende de las variables
   de ninguna: los colores son los del tema (--blue #0535A8, --darkblue
   #10003E, --blue100 #CBE1FC, --gray800 #36334A) y cada propiedad que el tema
   de Shopify pisa en h2, label, select o button se fija aca.
   ========================================================================== */

dialog.uugate {
  box-sizing: border-box;
  width: min(520px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #f7f7f7;
  color: #10003e;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 64px rgba(16, 0, 62, 0.28);
}

dialog.uugate:not([open]) { display: none; }

/* The gate takes focus itself on open, so Tab starts at the first field
   instead of the country picker lighting up before anyone touches it. */
dialog.uugate:focus { outline: none; }

/* Without showModal() (very old browsers) the open dialog still covers the page. */
dialog.uugate[open] {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  height: fit-content;
}

dialog.uugate::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.uugate *,
.uugate *::before,
.uugate *::after { box-sizing: border-box; }

.uugate__panel { padding: 30px 30px 0; }

.uugate__logo {
  width: 110px;
  margin: 0 auto 16px;
  color: #0745c4;
  line-height: 0;
}

.uugate__logo svg { width: 100%; height: auto; }

.uugate__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #cbe1fc;
  color: #10003e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.uugate__title {
  margin: 12px 0 0;
  color: #10003e;
  font-family: inherit;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
  text-transform: none;
}

.uugate__lead {
  margin: 8px auto 18px;
  max-width: 36ch;
  color: #36334a;
  font-size: 15px;
  line-height: 1.6;
}

.uugate__pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}

.uugate__field {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 8px 12px 10px;
  border: 1px solid #cbe1fc;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uugate__field:focus-within {
  border-color: #0535a8;
  box-shadow: 0 0 0 3px rgba(5, 53, 168, 0.16);
}

.uugate__label {
  display: block;
  margin: 0 0 2px;
  color: #36334a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uugate__select {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 18px 0 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310003e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 12px;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  color: #10003e;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

/* dialog.uugate in front: peptik's base.css styles label:has(input[type=checkbox])
   (inline-flex) and :where(input[type=checkbox]) (appearance:none, faint border)
   on the mirrored pages, and those beat a single class. */
dialog.uugate .uugate__check {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid #cbe1fc;
  border-radius: 12px;
  background: #fff;
  color: #10003e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

dialog.uugate .uugate__check input {
  all: revert;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #0535a8;
  cursor: pointer;
}

dialog.uugate .uugate__check.is-checked {
  border-color: #0535a8;
  background: #eef4ff;
}

/* Pressing the button with a tick missing: the rows shake and the hint appears. */
dialog.uugate .uugate__check.is-shaking { animation: uugate-shake 0.4s ease; }

@keyframes uugate-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.uugate__hint {
  margin: 0 0 10px;
  color: #d93025;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.uugate__hint[hidden] { display: none; }

dialog.uugate .uugate__check.is-missing {
  border-color: #d93025;
  background: #fdf1f0;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

/* Sticky, so the button stays in view on short screens. */
.uugate__footer {
  position: sticky;
  bottom: 0;
  margin: 0 -30px;
  padding: 16px 30px 18px;
  background: #f7f7f7;
}

.uugate__cta {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 26px;
  border: 0;
  border-radius: 40px;
  background: #aab8d9;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

/* Both ticks in: the button lights up and pops once. */
.uugate__cta.is-ready {
  background: #0535a8;
  box-shadow: 0 10px 24px rgba(5, 53, 168, 0.3);
  animation: uugate-pop 0.35s ease;
}
.uugate__cta.is-ready:hover { background: #10003e; }
.uugate__cta.is-ready:active { transform: scale(0.98); }

@keyframes uugate-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.uugate__cta:focus-visible,
dialog.uugate .uugate__check input:focus-visible {
  outline: 2px solid #0535a8;
  outline-offset: 3px;
}

.uugate__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.uugate__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #36334a;
  font-size: 12px;
  line-height: 1.3;
}

.uugate__assurances svg {
  width: 14px;
  height: 14px;
  fill: #0535a8;
}

.uugate__cookies {
  margin: 8px 0 0;
  color: #36334a;
  font-size: 12px;
  line-height: 1.4;
}

.uugate__privacy {
  color: #0535a8;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .uugate__panel { padding: 20px 20px 0; }
  .uugate__logo { width: 96px; margin-bottom: 12px; }
  .uugate__title { font-size: 32px; }
  .uugate__lead { margin-bottom: 14px; font-size: 14px; }
  .uugate__pickers { gap: 8px; }
  .uugate__field { padding: 7px 10px 8px; }
  dialog.uugate .uugate__check { min-height: 48px; margin-top: 8px; padding: 10px 12px; font-size: 14px; }
  .uugate__footer { margin: 0 -20px; padding: 14px 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .uugate__field,
  dialog.uugate .uugate__check,
  .uugate__cta { transition: none; animation: none; }
}