/* ===== Cookie Consent Banner ===== */
/*
 * Standalone stylesheet for the cookie consent bar.
 * Replaces the inline styles previously set via JS in cookieChoice_new_vers.js.
 * Depends on Bootstrap 3 for .btn, .btn-success, .btn-default, .btn-sm.
 */

:root {
  --cookie-bar-bg:        #eeeeee;
  --cookie-bar-color:     #555555;
  --cookie-bar-z-index:   9999;
  --cookie-bar-padding:   8px 16px;

  --cookie-accept-margin: 28px;
  --cookie-reject-margin: 12px;
  --cookie-info-margin:   8px;

  --cookie-slide-duration: 0.3s;
  --cookie-slide-easing:   ease-out;
}

/* ===== Outer bar ===== */

.cookie-consent-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid #E4E8EF;
  background: rgba(255, 255, 255, 1);
  text-align: center;
  z-index: var(--cookie-bar-z-index);

  /* Entrance animation: slide up from below the viewport.
   * Declared here (without .cookie-consent-hidden) so it fires
   * as soon as the hidden class is removed and the bar becomes visible. */
  animation: cookie-bar-enter var(--cookie-slide-duration) var(--cookie-slide-easing) both;
}

/* ===== Hidden state ===== */
/*
 * Uses transform + visibility instead of display: none so that the
 * cookie-bar-enter animation can still fire when this class is removed.
 * display: none would pull the element out of the rendering pipeline and
 * the browser would skip straight to the final keyframe, killing the animation.
 *
 * Because .cookie-consent-bar is position: fixed it is already out of normal
 * flow, so visibility: hidden has zero impact on document layout.
 * transform: translateY(100%) pushes the bar below the visible viewport,
 * guaranteeing no accidental visual bleed (e.g. drop-shadow edges).
 */
.cookie-consent-hidden {
  visibility: hidden;
  transform: translateY(100%);
  animation: none; /* prevent the enter animation from running while hidden */
}

/* ===== Inner wrapper ===== */
/*
 * Flexbox keeps text and buttons on one line on wide screens.
 * On narrow screens (< 480px) they wrap into a column so nothing
 * overflows at 320px width.
 */

.cookie-consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.cookie-consent-inner .wrap-text {
  max-width: 670px;
}
/* ===== Consent text ===== */

.cookie-consent-text {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  text-align: left;
}


/* ===== Info / policy link ===== */

.cookie-consent-info-link {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.wrap-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}


/* ===== Accept button ===== */
/*
 * .btn.btn-success.btn-sm already handles colour and size via Bootstrap.
 * We only add the margin and weight that were previously inline.
 */

.cookie-consent-accept {
  white-space: nowrap;
  min-width: 133px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #0068FF;
  background: #0068FF;
  color: #fff !important;
  font-size: 16px;
  text-decoration: none !important;
}

/* ===== Reject button ===== */

.cookie-consent-reject {
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid #0068FF;
  color: #0068FF !important;
  min-width: 133px;
  padding: 5px;
  font-size: 16px;
  text-decoration: none !important;
}

@media (max-width: 576px) {
  .cookie-consent-text, .cookie-consent-info-link  {
    font-size: 13px;
  }
}

/* ===== Entrance keyframe ===== */
/*
 * Uses only transform + opacity — no layout properties animated —
 * so the browser can run this entirely on the compositor thread (60 fps).
 */

@keyframes cookie-bar-enter {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== Responsive: narrow screens (< 480px) ===== */
/*
 * Below 480px the bar switches to a vertical stack so the text
 * is fully readable at 320px and the buttons are easily tappable.
 * Margins set on the individual elements are zeroed out here because
 * the flex gap handles the spacing instead.
 */

@media (max-width: 479px) {
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-consent-text {
    width: 100%;
  }
  .cookie-consent-inner{
    gap: 16px;
  }
  .cookie-consent-accept, .cookie-consent-reject {
    min-width: auto;
    width: 50%;
    font-size: 13px;
  }
}