/* Site-wide cookie reopen banner styles */
.cookie-reopen-banner {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
}


.cookie-reopen-inner {
  display: flex;
  gap: 0;                         /* no spacing until reveal */
  align-items: center;
  background: transparent;            /* hidden by default */
  color: #e6eef7;
  border: 1px solid transparent;      /* frame hidden by default */
  border-radius: 999px;
  padding: 0;                          /* no pill padding by default */
  backdrop-filter: none;               /* off initially */
  box-shadow: none;                    /* off initially */
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, padding .18s ease, gap .18s ease;
}

.cookie-reopen-inner:hover,
.cookie-reopen-inner:focus-within {
  background: rgb(20 24 38 / 80%);
  border-color: rgb(255 255 255 / 18%);
  padding: 8px 9px; /* show pill on hover/focus */
  gap: 8px;         /* add spacing when visible */
  backdrop-filter: saturate(120%) blur(8px);
  box-shadow: 0 8px 22px rgb(0 0 0 / 28%);
}

.cookie-reopen-text {
  font-size: 0.9rem;
  display: inline-block;
  opacity: 0;             /* hidden by default */
  visibility: hidden;     /* do not occupy visual attention */
  transform: translateX(4px); /* slight slide-in */
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  width: 0;               /* do not reserve layout width */
  max-width: 0;
  overflow: hidden;
  margin-right: 0;
  white-space: nowrap;
}

/* Reveal label on hover/focus within */
.cookie-reopen-inner:hover .cookie-reopen-text,
.cookie-reopen-inner:focus-within .cookie-reopen-text {
  opacity: .9;
  visibility: visible;
  transform: translateX(0);
  width: auto;
  max-width: none;
  margin-right: 4px;
}

#cookie-reopen-btn.cookie-reopen-btn {
  font-weight: 700;
  border: 1px solid rgb(255 255 255 / 15%);
  background: linear-gradient(135deg, #37a1ff, #a5d1e0);
  color: #001018;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
}

.r4it-flash {
  animation: r4it-flash 2.2s ease-in-out 1;
}

@keyframes r4it-flash {
  0%,
  100% { filter: none }

  10%,
  30%,
  50% { filter: brightness(1.5) saturate(1.3) }

  20%,
  40% { filter: none }
}