#apex-cookie,
#apex-cookie-modal {
  --ck-bg: #f5f4f0;
  --ck-ink: #17141b;
  --ck-soft: #494350;
  --ck-muted: #888;
  --ck-accent: #66ddff;
  --ck-radius-card: 20px;
  --ck-radius-btn: 8px;
  --ck-font-body:
    "GI",
    "Glacial Indifference",
    "Glacial Indifference REAL",
    Arial,
    sans-serif;
  --ck-font-display:
    "DM Serif Display",
    "Lora",
    Georgia,
    serif;
}


#apex-cookie *,
#apex-cookie-modal * {
  box-sizing: border-box;
}


/* =========================================================
   BANNER
   ========================================================= */

.apex-cookie {
  position: fixed;
  right: 24px;
  bottom: 24px;

  z-index: 999999;

  width: calc(100vw - 48px);
  max-width: 440px;

  display: none;

  font-family: var(--ck-font-body);
}


/*
 * OPEN
 */
.apex-cookie.is-visible {
  display: block;

  animation:
    apexCookieIn
    0.45s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


/*
 * CLOSE
 */
.apex-cookie.is-hiding {
  display: block;

  pointer-events: none;

  animation:
    apexCookieOut
    0.45s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


@keyframes apexCookieIn {

  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


@keyframes apexCookieOut {

  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(16px);
  }

}


.apex-cookie__inner {
  padding: 28px 28px 24px;

  background: var(--ck-bg);

  border: 1px solid var(--ck-ink);
  border-radius: var(--ck-radius-card);

  box-shadow:
    0 24px 60px
    rgba(23, 20, 27, 0.22);
}


#apex-cookie .apex-cookie__title {
  margin: 0 0 12px;
  padding: 0;

  font-family: var(--ck-font-display);
  font-size: 30px;
  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -0.01em;

  color: var(--ck-ink);
}


#apex-cookie .apex-cookie__title em {
  font-style: italic;
}


#apex-cookie .apex-cookie__text {
  margin: 0;
  padding: 0;

  max-width: 38ch;

  font-family: var(--ck-font-body);

  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;

  color: var(--ck-soft);
}


#apex-cookie .apex-cookie__info {
  margin: 10px 0 0;
  padding: 0;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: var(--ck-ink) !important;

  font-family: var(--ck-font-body);

  font-size: 14px;
  font-weight: 700;

  text-transform: none;

  letter-spacing: 0;

  text-decoration: underline;
  text-underline-offset: 4px;

  cursor: pointer;
}


#apex-cookie .apex-cookie__info:hover {
  text-decoration-thickness: 2px;
}


.apex-cookie__divider {
  display: flex;

  align-items: center;

  gap: 6px;

  margin: 20px 0;
}


.apex-cookie__divider span {
  flex: 1;

  height: 1px;

  background: var(--ck-muted);
}


.apex-cookie__divider i {
  font-style: normal;

  font-size: 13px;

  line-height: 1;

  color: var(--ck-muted);
}


.apex-cookie__actions {
  display: flex;

  gap: 10px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

#apex-cookie .apex-cookie__btn,
#apex-cookie-modal .apex-cookie__btn {
  flex: 1 1 0;

  min-height: 48px;

  margin: 0;

  padding: 0 18px;

  border-radius:
    var(--ck-radius-btn)
    !important;

  font-family:
    var(--ck-font-body);

  font-size: 16px;
  font-weight: 700;

  letter-spacing: 0;

  line-height: 1;

  text-transform: none;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


#apex-cookie .apex-cookie__btn--primary,
#apex-cookie-modal .apex-cookie__btn--primary {
  border:
    1px solid
    var(--ck-ink)
    !important;

  background:
    var(--brand-jet) 
    !important;

  color: #000 !important;
}


#apex-cookie .apex-cookie__btn--primary:hover,
#apex-cookie-modal .apex-cookie__btn--primary:hover {
  background:
    var(--ck-ink)
    !important;

  color: #fff !important;
}


#apex-cookie .apex-cookie__btn--secondary,
#apex-cookie-modal .apex-cookie__btn--secondary {
  border:
    1px solid
    var(--ck-ink)
    !important;

  background:
    transparent
    !important;

  color:
    var(--ck-ink)
    !important;
}


#apex-cookie .apex-cookie__btn--secondary:hover,
#apex-cookie-modal .apex-cookie__btn--secondary:hover {
  background:
    var(--ck-ink)
    !important;

  color:
    var(--ck-bg)
    !important;
}


#apex-cookie .apex-cookie__btn:active,
#apex-cookie-modal .apex-cookie__btn:active {
  transform: scale(0.98);
}


#apex-cookie button:focus-visible,
#apex-cookie-modal button:focus-visible {
  outline:
    2px solid
    var(--ck-ink);

  outline-offset: 3px;
}


/* =========================================================
   MODAL
   ========================================================= */

.apex-cookie-modal {
  position: fixed;

  inset: 0;

  z-index: 1000000;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 20px;

  font-family:
    var(--ck-font-body);
}


.apex-cookie-modal.is-visible {
  display: flex;
}


.apex-cookie-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(23, 20, 27, 0.55);

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


.apex-cookie-modal__dialog {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 640px;

  max-height:
    calc(100vh - 40px);

  overflow-y: auto;

  padding:
    40px 40px 32px;

  background:
    var(--ck-bg);

  border:
    1px solid
    var(--ck-ink);

  border-radius:
    var(--ck-radius-card);

  box-shadow:
    0 30px 90px
    rgba(23, 20, 27, 0.35);

  animation:
    apexCookieIn
    0.35s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


#apex-cookie-modal .apex-cookie-modal__close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 40px;
  height: 40px;

  margin: 0;
  padding: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    var(--ck-ink)
    !important;

  border-radius:
    50%
    !important;

  background:
    transparent
    !important;

  color:
    var(--ck-ink)
    !important;

  font-family:
    var(--ck-font-body);

  font-size: 24px;

  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


#apex-cookie-modal .apex-cookie-modal__close:hover {
  background:
    var(--ck-ink)
    !important;

  color:
    var(--ck-bg)
    !important;
}


#apex-cookie-modal h2 {
  margin:
    0 48px 24px 0;

  padding: 0;

  font-family:
    var(--ck-font-display);

  font-size:
    clamp(30px, 5vw, 42px);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -0.01em;

  color:
    var(--ck-ink);
}


#apex-cookie-modal h2 em {
  font-style: italic;
}


.apex-cookie-modal__section {
  padding: 18px 0;

  border-top:
    1px solid
    var(--ck-muted);
}


.apex-cookie-modal__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 6px;
}


#apex-cookie-modal
.apex-cookie-modal__section h3 {
  margin: 0;
  padding: 0;

  font-family:
    var(--ck-font-body);

  font-size: 19px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0;

  text-transform: none;

  color:
    var(--ck-ink);
}


#apex-cookie-modal
.apex-cookie-modal__section p {
  margin: 0;

  max-width: 62ch;

  font-size: 15px;

  line-height: 1.55;

  color:
    var(--ck-soft);
}


.apex-cookie-modal__badge {
  flex: none;

  padding: 4px 12px;

  border:
    1px solid
    var(--ck-muted);

  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.3;

  color:
    var(--ck-soft);
}


.apex-cookie-modal__badge--on {
  border-color:
    var(--ck-ink);

  background:
    var(--brand-jet);


  color: #000;
}


.apex-cookie-modal__actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding-top: 22px;

  border-top:
    1px solid
    var(--ck-muted);
}


#apex-cookie-modal
.apex-cookie-modal__actions
.apex-cookie__btn {
  flex: 0 1 auto;

  min-width: 170px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .apex-cookie {
    left: 10px;
    right: 10px;

    bottom: 10px;

    width: auto;

    max-width: none;
  }


  .apex-cookie__inner {
    padding:
      22px 20px 20px;
  }


  #apex-cookie
  .apex-cookie__title {
    font-size: 26px;
  }


  .apex-cookie-modal {
    align-items: flex-end;

    padding: 10px;
  }


  .apex-cookie-modal__dialog {
    max-height:
      calc(100dvh - 20px);

    padding:
      32px 20px 20px;
  }


  .apex-cookie-modal__actions {
    flex-direction:
      column-reverse;
  }


  #apex-cookie-modal
  .apex-cookie-modal__actions
  .apex-cookie__btn {
    width: 100%;

    flex: 1 1 auto;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .apex-cookie.is-visible,
  .apex-cookie.is-hiding,
  .apex-cookie-modal__dialog {
    animation: none;
  }

}