/*
 * Overrides for the TermsFeed cookie consent banner and preferences dialog (loaded in index.html).
 * TermsFeed adds its own stylesheet to <head> when it loads. The layout rules below use the same specificity, so they
 * only win because this file is linked later in the document, from <body>. Keep the <link> there.
 */

/* ---------------------------------------------------------------- Layout */

.termsfeed-com---reset.termsfeed-com---nb {
  max-width: 600px;
  min-height: 250px;
  padding: 25.5px;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  flex-shrink: 0;
  border-radius: 20px;
  margin: 20px;
  margin-top: 0;
}

.termsfeed-com---nb .cc-nb-main-container {
  padding: 0;
}

.termsfeed-com---nb .cc-nb-okagree,
.termsfeed-com---nb .cc-nb-reject,
.termsfeed-com---nb .cc-nb-changep,
.termsfeed-com---pc-dialog .cc-cp-foot-save {
  border-radius: 10px;
  height: 35px;
  padding: 0px 16px;
  gap: 16px;
}

.termsfeed-com---nb .cc-nb-changep,
.termsfeed-com---pc-dialog .cc-pc-head-close,
.termsfeed-com---pc-dialog .cc-cp-body-tabs-item,
.termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link {
  border: none;
}

.termsfeed-com---nb .cc-nb-okagree:focus,
.termsfeed-com---nb .cc-nb-reject:focus,
.termsfeed-com---nb .cc-nb-changep:focus {
  outline: none;
}

.termsfeed-com---pc-dialog .cc-pc-head-close:is(:focus, :active) {
  outline: none;
  border: none;
}

/*
 * ---------------------------------------------------------------- Colours
 * Theme tokens, as MUI CSS variables. MUI only defines them under the mode class it puts on <html> (`.light`/`.dark`)
 * once the app has rendered. Until then these rules don't match and TermsFeed's own palette shows; index.html picks
 * that palette from the stored mode. A var() without a fallback would not fall back to TermsFeed's colour, it would
 * unset the property.
 * The selectors don't use TermsFeed's palette class, which is fixed when it loads, so toggling the mode with the
 * banner or dialog open still works. The mode class also makes them more specific than TermsFeed's palette rules, so
 * only TermsFeed's `!important` declarations need one here.
 */

/* Notice banner */

:root:is(.light, .dark) .termsfeed-com---nb {
  background-color: var(--mui-palette-background-paper);
  color: var(--mui-palette-text-primary);
  box-shadow: var(--mui-customShadows-z16);
}

:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-title,
:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-text,
:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-text a {
  color: var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-okagree,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-foot-save {
  border: 1px solid var(--mui-palette-primary-main);
  color: var(--mui-palette-primary-contrastText);
  background-color: var(--mui-palette-primary-main);
}

:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-reject {
  border: 1px solid var(--mui-palette-primary-main);
  color: var(--mui-palette-primary-main);
  background-color: transparent;
}

:root:is(.light, .dark) .termsfeed-com---nb .cc-nb-changep {
  color: var(--mui-palette-primary-main);
  background-color: transparent;
}

/* Focus rings: none on click, a text-coloured ring for keyboard focus */

:root:is(.light, .dark) .termsfeed-com---nb :is(a, button):focus,
:root:is(.light, .dark) .termsfeed-com---pc-dialog :is(a, button, select):focus,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link:focus span {
  box-shadow: none;
}

:root:is(.light, .dark) .termsfeed-com---nb :is(a, button):focus-visible,
:root:is(.light, .dark) .termsfeed-com---pc-dialog :is(a, button, select):focus-visible {
  box-shadow: 0 0 0 2px var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link:focus-visible span,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry a:focus-visible {
  box-shadow: inset 3px 0 0 0 var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry:focus {
  box-shadow: none;
}

/* Preferences dialog */

:root:is(.light, .dark) .termsfeed-com---pc-overlay {
  background: var(--mui-palette-grey-900_48);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-container,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content {
  background: var(--mui-palette-background-paper) !important;
  color: var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-foot {
  background-color: var(--mui-palette-background-default);
  color: var(--mui-palette-text-primary);
  border-color: var(--mui-palette-divider);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head-title-headline,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head-title-text,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head-close,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry-title,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry-text,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry a {
  color: var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head-close {
  background-color: transparent;
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-content-entry {
  border-left: 2px solid var(--mui-palette-background-default);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-pc-head-lang select {
  color: var(--mui-palette-text-primary);
  background-color: var(--mui-palette-background-paper);
  border-color: var(--mui-palette-divider);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-foot-byline,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-foot-byline a {
  color: var(--mui-palette-text-secondary);
}

/* Category tabs: inactive tabs sit on the page background, the active one has the content's background */

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs,
:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item {
  background-color: var(--mui-palette-background-default);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link {
  color: var(--mui-palette-text-secondary);
  background-color: transparent;
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link:hover {
  color: var(--mui-palette-text-primary);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog .cc-cp-body-tabs-item-link[active='true'] {
  background: var(--mui-palette-background-paper) !important;
  color: var(--mui-palette-text-primary);
}

/* Consent toggles, coloured like MUI's Switch */

:root:is(.light, .dark) .termsfeed-com---pc-dialog input[type='checkbox'].cc-custom-checkbox + label:before {
  background: var(--mui-palette-grey-500);
  border-color: transparent;
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog input[type='checkbox'].cc-custom-checkbox:checked + label:before {
  background: var(--mui-palette-primary-main);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog input[type='checkbox'].cc-custom-checkbox + label:after {
  background: var(--mui-palette-common-white);
  border-color: transparent;
  box-shadow: var(--mui-customShadows-z1);
}

:root:is(.light, .dark) .termsfeed-com---pc-dialog input[type='checkbox'].cc-custom-checkbox + label:hover:after {
  box-shadow: var(--mui-customShadows-z8);
}