/**
 * Aviso flotante — estilos FUNCIONALES.
 *
 * Aquí solo va lo estructural: posicionamiento sticky bajo el header,
 * z-index, estado oculto y la disposición interna (texto + botón cerrar).
 * La apariencia (colores, fondo, bordes, tipografía) vive en el theme.
 *
 * El offset bajo el header lo calcula el JS en --diners-aviso-offset.
 */

.diners-aviso-flotante {
  position: -webkit-sticky;
  position: sticky;
  /* Justo debajo del header sticky del sitio (z-index 100). */
  top: var(--diners-aviso-offset, 0px);
  z-index: 99;
  width: 100%;
  box-sizing: border-box;
  /*
   * El aviso flota SOBRE el contenido que le sigue (p. ej. el hero) en vez de
   * ocupar su propia banda: así queda pegado bajo el header, sin espacio en
   * blanco. El JS mide su altura en --diners-aviso-height (0 cuando está
   * cerrado, por lo que no deja hueco al cerrarlo).
   */
  margin-bottom: calc(-1 * var(--diners-aviso-height, 0px));
}

/* Estado cerrado: fuera del flujo visual pero conservando el nodo. */
.diners-aviso-flotante.is-hidden {
  display: none;
}

/*
 * Aparición: el aviso baja deslizándose desde detrás del header. Parte de
 * translateY(-100%) (oculto tras el header, que tiene mayor z-index) hasta su
 * posición final. Se dispara cuando el JS lo muestra (quita .is-hidden).
 */
@keyframes diners-aviso-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.diners-aviso-flotante:not(.is-hidden) {
  animation: diners-aviso-slide-down 0.45s ease-out;
}

/* Respeta la preferencia de movimiento reducido del usuario. */
@media (prefers-reduced-motion: reduce) {
  .diners-aviso-flotante:not(.is-hidden) {
    animation: none;
  }
}

.diners-aviso-flotante__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.diners-aviso-flotante__text {
  flex: 0 1 auto;
}

.diners-aviso-flotante__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}