/**
 * @file
 * Storefront status message overlay and base presentation.
 *
 * Canonical owner: frontend/global.
 */

.page-wrapper__messages {
  position: relative;
  z-index: 2;
  width: min(42rem, calc(100vw - 2rem));
  margin: 1.5rem auto;
}

.page-wrapper__messages--overlay {
  position: fixed;
  top: clamp(6.75rem, 11vh, 8.5rem);
  left: 50%;
  z-index: 1060;
  width: min(42rem, calc(100vw - 2rem));
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.page-wrapper__messages [data-drupal-messages],
.page-wrapper__messages [data-drupal-messages-fallback] {
  display: grid;
  gap: 0.75rem;
}

.page-wrapper__messages .messages {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  background: rgba(20, 17, 14, 0.96);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  color: #fff;
}

.page-wrapper__messages--overlay .messages {
  pointer-events: auto;
}

.page-wrapper__messages .messages--error {
  border-color: rgba(214, 72, 72, 0.7);
}