/*
 * Benachrichtigungsleiste am unteren Bildschirmrand.
 *
 * Nimmt die volle Bildschirmbreite ein, fixiert am unteren Rand (position: fixed).
 * Farbgebung im warmen Terracotta-Akzent (--color-accent-600) des Kaffeeshop-
 * Designs mit hohem Kontrast (weisse Schrift) und zentriertem Text.
 * Tokens: src/pages/design/design.css.
 */

.c-notification-bar {
  position         : fixed;
  bottom           : 0;
  left             : 0;
  right            : 0;
  width            : 100%;
  min-height       : 48px;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  z-index          : 99999;
  background-color : var(--color-accent-600, #b2622d);
  color            : #ffffff;
  box-shadow       : 0 -4px 20px rgba(0, 0, 0, 0.18);
  box-sizing       : border-box;
  transform        : translateY(0);
  opacity          : 1;
  transition       : transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  padding-bottom   : env(safe-area-inset-bottom, 0px);
}

.c-notification-bar--hidden {
  transform      : translateY(100%);
  opacity        : 0;
  pointer-events : none;
}

.c-notification-bar__inner {
  position        : relative;
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 100%;
  min-height      : 48px;
  max-width       : var(--page-width, 1280px);
  margin-inline   : auto;
  box-sizing      : border-box;
  /* Symmetrischer Abstand oben und unten fuer praezise vertikale Zentrierung */
  padding         : var(--space-3, 13.2px) calc(var(--space-4, 17.6px) + 36px);
}

.c-notification-bar__content {
  width        : 100%;
  text-align   : center;
  font-family  : var(--font-body, "Figtree", system-ui, sans-serif);
  font-size    : 14.5px;
  line-height  : 1.5;
  overflow-wrap: break-word;
  word-break   : break-word;
}

.c-notification-bar__content p {
  margin : 0;
}

.c-notification-bar__content p + p {
  margin-top : var(--space-2, 8.8px);
}

.c-notification-bar__content a {
  color                 : #ffffff;
  text-decoration       : underline;
  text-underline-offset : 3px;
  font-weight           : 600;
  transition            : color 0.15s ease;
}

.c-notification-bar__content a:hover,
.c-notification-bar__content a:focus-visible {
  color                 : var(--color-accent-100, #fff2eb);
  text-decoration-color : var(--color-accent-200, #ffe1d0);
}

.c-notification-bar__content strong,
.c-notification-bar__content b {
  font-weight : 700;
}

.c-notification-bar__content em,
.c-notification-bar__content i {
  font-style : italic;
}

/* ── Schliessen-Button ────────────────────────────────────────────────── */

.c-notification-bar__close {
  position        : absolute;
  right           : var(--space-3, 13.2px);
  top             : 50%;
  transform       : translateY(-50%);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 36px;
  height          : 36px;
  padding         : 0;
  border          : none;
  border-radius   : 50%;
  background      : transparent;
  color           : #ffffff;
  cursor          : pointer;
  opacity         : 0.85;
  transition      : opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.c-notification-bar__close:hover {
  opacity          : 1;
  background-color : rgba(255, 255, 255, 0.18);
}

.c-notification-bar__close:focus-visible {
  opacity        : 1;
  outline        : 2px solid #ffffff;
  outline-offset : 2px;
}

.c-notification-bar__close:active {
  transform : translateY(-50%) scale(0.92);
}

.c-notification-bar__close svg {
  display : block;
  width   : 14px;
  height  : 14px;
}

/* ── Responsive Anpassungen ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .c-notification-bar__inner {
    padding-left  : var(--space-3, 13.2px);
    padding-right : calc(var(--space-3, 13.2px) + 36px);
  }

  .c-notification-bar__content {
    font-size : 13.5px;
  }
}