/* POS expiry/trial notice: match Tutup Shift typography and danger colors. */
html[data-masivi-theme] [data-testid="pos-subscription-notice"][role="status"],
html [data-testid="pos-subscription-notice"][role="status"] {
  --pos-warning-ink: rgb(var(--masivi-danger-soft-text-rgb, 202 35 35));
  --pos-warning-surface: rgb(var(--masivi-danger-soft-rgb, 250 227 227));
  --pos-warning-border: rgb(var(--masivi-danger-rgb, 220 38 38) / 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--pos-warning-border);
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--pos-warning-ink);
  background-color: var(--pos-warning-surface);
  animation: pos-subscription-warning-blink 1.8s steps(1, end) infinite;
}

@media (min-width: 640px) {
  html[data-masivi-theme] [data-testid="pos-subscription-notice"][role="status"],
  html [data-testid="pos-subscription-notice"][role="status"] {
    height: 2rem;
    padding-inline: 0.75rem;
  }
}

/* Two readable red states; the notice never disappears or changes its width. */
@keyframes pos-subscription-warning-blink {
  0%, 100% {
    color: var(--pos-warning-ink);
    background-color: var(--pos-warning-surface);
    border-color: var(--pos-warning-border);
  }
  50% {
    color: rgb(var(--masivi-on-danger-rgb, 255 255 255));
    background-color: rgb(var(--masivi-danger-rgb, 220 38 38));
    border-color: rgb(var(--masivi-danger-rgb, 220 38 38));
  }
}

@media (prefers-reduced-motion: reduce), print {
  html[data-masivi-theme] [data-testid="pos-subscription-notice"][role="status"],
  html [data-testid="pos-subscription-notice"][role="status"] {
    animation: none;
  }
}