/* The notice about what the site keeps in the browser. */

.cookie-notice {
  position: fixed;
  z-index: 42;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  color: #fff6e2;
  background: #0d2a36;
  border-top: 2px solid #f2a93b;
  box-shadow: 0 -10px 30px #0006;
  font: 500 0.95rem/1.5 var(--body, Arial, sans-serif);
  text-align: start;
}

/* On the form it is a box in the page, above the foot. */
.cookie-notice.inline {
  position: static;
  max-width: 528px;
  margin: 8px auto 16px;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.cookie-notice p {
  flex: 1 1 320px;
  max-width: 760px;
  margin: 0;
}

.cookie-notice a {
  color: #ffd27d;
  font-weight: 700;
  text-underline-offset: 3px;
}

.cookie-notice button {
  flex: none;
  min-height: 46px;
  padding: 10px 26px;
  font: 800 1rem/1 var(--body, Arial, sans-serif);
  color: #06211c;
  background: #ffd27d;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

.cookie-notice a:focus-visible,
.cookie-notice button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: none;
}

/* The help button stays clear of the notice while it shows. */
.chat-float {
  bottom: calc(16px + var(--notice, 0px) + env(safe-area-inset-bottom));
}