.eu-cookie-compliance-banner {
  background-color: var(--color-black);
  padding-block: 1.25rem;
  padding-inline: 2.5rem;
  position: relative;
  display: flex;
  flex-direction: row;
  max-block-size: 100vh;
  max-block-size: 100dvh;
  overflow-y: auto;

  .eu-cookie-compliance-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    max-width: 90%;

    @media (max-width: 48rem) {
      max-width: 100%;
    }
  }

  h2,
  p,
  span {
    font-family: var(--font-family-primary), sans-serif;
    font-weight: normal;
    color: var(--color-white);
  }

  h2,
  h2 span {
    font-size: 1.5rem;
    font-weight: bold;
  }

  p,
  p span {
    font-size: 1.125rem;
    font-weight: normal;
  }
}

.eu-cookie-compliance-message {
  flex: 1 0 30rem;
  margin: 0;
  padding: 0;
}

/* Explicit banner state wrappers. */
.trafford-cookie-state {
  inline-size: 100%;
}

.trafford-cookie-state--initial {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.eu-cookie-compliance-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0;

  button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    padding-inline: var(--button-padding-horizontal);
    padding-block: var(--button-padding-vertical);
    margin-block: 1rem;
    font-family: var(--font-family-primary), sans-serif;
    font-size: var(--font-size-medium);
    font-weight: normal;
    text-wrap-mode: nowrap;
    inline-size: var(--button-inline-size-big);
    block-size: var(--button-block-size-big);
    text-decoration: none;
    background-color: var(--color-accent);
    background-image: unset;
    border-color: transparent;
    text-shadow: unset;
    box-shadow: unset;

    &.agree-button {
      background-color: var(--color-accent-2);
    }

    &.agree-button:hover {
      background-color: var(--color-accent);
    }

    &.decline-button,
    &.eu-cookie-compliance-reject-button {
      background-color: var(--color-accent);
    }

    &.decline-button:hover,
    &.eu-cookie-compliance-reject-button:hover {
      background-color: var(--color-accent-2);
    }

    &:focus-visible {
      outline: 3px solid var(--color-white);
      outline-offset: 2px;
    }
  }

  button:hover {
    background-image: none;
  }

  button::after {
    position: relative;
    inset-inline-end: 0;
    display: block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    content: url("../../templates/includes/icons/circle-arrow-right.svg");
    background-color: transparent;
    transform: translate(.625rem, -.3125rem);
    transition: transform ease var(--transition-time);
  }
}

/* When categories are showing, the buttons should wrap below. */
.eu-cookie-compliance-buttons.eu-cookie-compliance-has-categories {
  inline-size: auto;
  flex-wrap: wrap;
}

/* "Manage preferences" — rendered as an underlined text link, not a button. */
.eu-cookie-compliance-buttons .eu-cookie-compliance-more-button {
  background: none;
  background-color: transparent;
  border: none;
  color: var(--color-white, #fff);
  text-decoration: underline;
  font-size: var(--font-size-medium);
  inline-size: auto;
  block-size: auto;
  padding-inline: 0;
  padding-block: 0;
  margin-block: 0;

  &:hover {
    background: none;
    background-color: transparent;
    background-image: none;
    text-decoration: none;
  }

  &::after {
    display: none;
  }
}

/* Ensure hidden elements are fully inaccessible. */
.eu-cookie-compliance-categories[hidden],
.trafford-cookie-state[hidden],
.trafford-cookie-saved-state__message[hidden] {
  display: none;
}

.trafford-cookie-state--saved {
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.trafford-cookie-saved-state__message {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-family-primary), sans-serif;
  font-size: 1.125rem;
}

.trafford-cookie-saved-state__manage {
  background: none;
  border: none;
  color: var(--color-white, #fff);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-inline: 0.25rem;

  &:hover {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
  }
}

.trafford-cookie-hide-message {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  padding-inline: var(--button-padding-horizontal);
  padding-block: var(--button-padding-vertical);
  font-family: var(--font-family-primary), sans-serif;
  font-size: var(--font-size-medium);
  font-weight: normal;
  inline-size: 13.75rem;
  block-size: var(--button-block-size-big);
  text-decoration: none;
  background-color: var(--color-accent);
  background-image: unset;
  border-color: transparent;
  text-shadow: unset;
  box-shadow: unset;

  &:hover {
    background-color: var(--color-accent-2);
  }

  &:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
  }
}

.trafford-cookie-hide-message::after {
  position: relative;
  inset-inline-end: 0;
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  content: url("../../templates/includes/icons/circle-arrow-right.svg");
  background-color: transparent;
  transform: translate(.625rem, -.3125rem);
  transition: transform ease var(--transition-time);
}

/* Cookie categories panel. */
.eu-cookie-compliance-categories {
  inline-size: 100%;
  margin-block: 1rem;
  padding-block: 1rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.3);
}

.eu-cookie-compliance-category {
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.15);

  &:last-child {
    border-block-end: none;
  }

  div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  label {
    color: var(--color-white);
    font-family: var(--font-family-primary), sans-serif;
    font-size: 1.125rem;
    font-weight: bold;
    cursor: pointer;
  }

  input[type="checkbox"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--color-accent);
    cursor: pointer;

    &:focus-visible {
      outline: 3px solid var(--color-white);
      outline-offset: 2px;
    }
  }
}

.eu-cookie-compliance-category-description {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-family-primary), sans-serif;
  font-size: 0.9375rem;
  margin-block-start: 0.25rem;
  padding-inline-start: 1.75rem;
}

.eu-cookie-compliance-categories-buttons {
  margin-block-start: 0.5rem;
}

.eu-cookie-compliance-save-preferences-button {
  background-color: var(--color-accent);
  color: var(--color-black);
  border: none;
  border-radius: var(--button-border-radius);
  padding-inline: var(--button-padding-horizontal);
  padding-block: var(--button-padding-vertical);
  font-family: var(--font-family-primary), sans-serif;
  font-size: var(--font-size-medium);
  cursor: pointer;

  &:hover {
    background-color: var(--color-accent-2);
  }

  &:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
  }
}

/* Withdraw banner (shown when user reopens settings). */
.eu-cookie-withdraw-banner {
  background-color: var(--color-black, #000);
  padding-block: 1.25rem;
  padding-inline: 2.5rem;

  .eu-cookie-compliance-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 90%;

    @media (max-width: 48rem) {
      flex-direction: column;
      max-width: 100%;
    }
  }

  .eu-cookie-compliance-message {
    color: var(--color-white);

    p {
      color: var(--color-white);
      font-family: var(--font-family-primary), sans-serif;
    }
  }

  .eu-cookie-withdraw-button {
    background-color: var(--color-accent);
    color: var(--color-black);
    border: none;
    border-radius: var(--button-border-radius);
    padding-inline: var(--button-padding-horizontal);
    padding-block: var(--button-padding-vertical);
    font-family: var(--font-family-primary), sans-serif;
    font-size: var(--font-size-medium);
    cursor: pointer;

    &:hover {
      background-color: var(--color-accent-2);
    }

    &:focus-visible {
      outline: 3px solid var(--color-white);
      outline-offset: 2px;
    }
  }
}

/* Hide the default withdraw tab — we use the footer link instead. */
.eu-cookie-withdraw-tab {
  display: none;
}

/* Footer "Cookie settings" button. */
.lgd-main-footer__cookie-settings {
  display: flex;
  justify-content: center;
  padding-block: 0.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-settings-trigger {
  background: none;
  border: none;
  color: var(--color-black, #000);
  font-family: var(--font-family-primary), sans-serif;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem 0.5rem;

  &:hover {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 3px solid var(--color-white, #fff);
    outline-offset: 2px;
  }
}

/* Accessibility fix: cookie banner must live in normal page flow. */
/* Cover the common EU Cookie Compliance wrappers as well as Trafford styles. */
.sliding-popup-top,
.sliding-popup-bottom,
.eu-cookie-compliance-banner,
.eu-cookie-withdraw-banner {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
  max-block-size: none !important;
  overflow: visible !important;
  inline-size: 100% !important;
  margin: 0 !important;
}

/* Use normal banner background styling. */
.eu-cookie-compliance-banner,
.eu-cookie-withdraw-banner {
  background-color: var(--color-black);
  background-image: none;
}

/* Keep content constrained, but centered and allowed to wrap naturally. */
.eu-cookie-compliance-banner .eu-cookie-compliance-content,
.eu-cookie-withdraw-banner .eu-cookie-compliance-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  max-width: 90rem;
  margin-inline: auto;
}

/* Remove overlay-era height/scroll behaviour from the main banner. */
.eu-cookie-compliance-banner {
  display: block;
  padding-block: 1.25rem;
  padding-inline: 2.5rem;
}

/* Let message and actions reflow cleanly at zoom / narrow widths. */
.eu-cookie-compliance-message {
  flex: 1 1 10rem;
  min-inline-size: min(100%, 20rem);
  margin: 0;
  padding: 0;
}

.eu-cookie-compliance-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

/* Categories panel must expand the document, not become a trapped region. */
.eu-cookie-compliance-categories {
  inline-size: 100%;
  max-block-size: none;
  overflow: visible;
}

/* Mobile tightening. */
@media (max-width: 48rem) {
  .eu-cookie-compliance-banner,
  .eu-cookie-withdraw-banner {
    padding-inline: 1rem;
  }

  .eu-cookie-compliance-banner .eu-cookie-compliance-content,
  .eu-cookie-withdraw-banner .eu-cookie-compliance-content {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }

  .eu-cookie-compliance-message,
  .eu-cookie-compliance-buttons {
    inline-size: 100%;
  }
}