/*
 * The consent banner. A site styles it only through these variables, usually on :root.
 * Every one is optional; the fallbacks below are the neutral defaults.
 *
 *   --taylerd-consent-canvas          background
 *   --taylerd-consent-ink             text, borders of the outlined buttons and switches
 *   --taylerd-consent-ink-soft        secondary text
 *   --taylerd-consent-cta             Accept background (and Reject, if HIGHLIGHT_ACCEPT is off)
 *   --taylerd-consent-cta-ink         text on it
 *   --taylerd-consent-cta-hover       its hover background
 *   --taylerd-consent-line            hairlines and link underlines
 *   --taylerd-consent-radius          corner radius of the box
 *   --taylerd-consent-shadow          shadow of the box
 *   --taylerd-consent-padding         inner padding of the box
 *   --taylerd-consent-font            font family (default: the page's)
 *   --taylerd-consent-text-size       body text size
 *   --taylerd-consent-title-size      title size
 *   --taylerd-consent-title-weight    title and category name weight
 *   --taylerd-consent-title-tracking  title letter spacing
 *   --taylerd-consent-button-radius   corner radius of buttons and switches
 *   --taylerd-consent-button-size     button text size
 *   --taylerd-consent-button-weight   button text weight
 *   --taylerd-consent-button-tracking button letter spacing
 *   --taylerd-consent-button-case     button text-transform
 *   --taylerd-consent-button-padding  button padding
 *   --taylerd-consent-logo-height     logo height (setting LOGO)
 *   --taylerd-consent-bar-width       content width of the bars
 *   --taylerd-consent-move            duration of the animations
 *   --taylerd-consent-ease            their easing
 */
.taylerd-consent {
  --_ink: var(--taylerd-consent-ink, #1f2328);
  --_cta: var(--taylerd-consent-cta, #1f2328);
  --_cta-hover: var(--taylerd-consent-cta-hover, color-mix(in srgb, var(--_cta) 85%, #000));
  --_line: var(--taylerd-consent-line, rgba(0, 0, 0, .18));
  --_radius: var(--taylerd-consent-radius, 12px);
  --_btn-radius: var(--taylerd-consent-button-radius, var(--_radius));
  --_pad: var(--taylerd-consent-padding, 24px);
  --_move: var(--taylerd-consent-move, 320ms);
  --_ease: var(--taylerd-consent-ease, cubic-bezier(.16, .84, .24, 1));
  position: fixed; z-index: 2147483000; pointer-events: none;
  font-family: var(--taylerd-consent-font, inherit); color: var(--_ink); text-align: left;
  transition: opacity var(--_move) var(--_ease), transform var(--_move) var(--_ease), width var(--_move) var(--_ease);
}
.taylerd-consent *, .taylerd-consent *::before { box-sizing: border-box; }
/* cookieconsent's own (empty, never shown) container. */
#cc-main { display: none !important; }
.taylerd-consent.is-hidden { opacity: 0; transform: translateY(12px); visibility: hidden;
  transition-property: opacity, transform, visibility; }

.taylerd-consent .tc-box {
  pointer-events: auto; display: grid; gap: 0; margin: 0; padding: var(--_pad);
  grid-template-areas: "brand" "main" "prefs" "actions";
  background: var(--taylerd-consent-canvas, #fff);
  border: 1px solid var(--_line); border-radius: var(--_radius);
  box-shadow: var(--taylerd-consent-shadow, 0 10px 40px rgba(0, 0, 0, .12));
  max-height: calc(100vh - 32px); overflow: auto;
}
.taylerd-consent .tc-brand { grid-area: brand; display: flex; margin-bottom: 16px; }
.taylerd-consent .tc-logo { display: block; height: var(--taylerd-consent-logo-height, 18px); width: auto; max-width: none; }
.taylerd-consent .tc-main { grid-area: main; display: grid; gap: 6px; }
.taylerd-consent .tc-title { display: flex; align-items: center; gap: 10px; margin: 0; color: inherit; font-family: inherit;
  font-size: var(--taylerd-consent-title-size, 1.125em); font-weight: var(--taylerd-consent-title-weight, 500);
  letter-spacing: var(--taylerd-consent-title-tracking, normal); line-height: 1.25; text-transform: none; }
.taylerd-consent .tc-icon { width: 1.3em; height: 1.3em; flex: none; }
.taylerd-consent .tc-text { margin: 0; font-size: var(--taylerd-consent-text-size, .9375em); line-height: 1.55;
  color: var(--taylerd-consent-ink-soft, inherit); }
.taylerd-consent a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .25em; text-decoration-color: var(--_line); background: none; }
.taylerd-consent a:hover { text-decoration-color: currentColor; }

/* The choice. Reject and Accept always have the same size, on the same row. */
.taylerd-consent .tc-actions { grid-area: actions; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.taylerd-consent .tc-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-left: auto; }
.taylerd-consent .tc-btn {
  appearance: none; cursor: pointer; margin: 0; min-height: 44px; font-family: inherit; line-height: 1;
  font-size: var(--taylerd-consent-button-size, .9375em); font-weight: var(--taylerd-consent-button-weight, 500);
  letter-spacing: var(--taylerd-consent-button-tracking, normal); text-transform: var(--taylerd-consent-button-case, none);
  padding: var(--taylerd-consent-button-padding, .85em 1.35em); border-radius: var(--_btn-radius);
  border: 1px solid var(--_ink); background: transparent; color: var(--_ink);
  transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}
.taylerd-consent .tc-btn:hover { background: color-mix(in srgb, var(--_ink) 7%, transparent); }
.taylerd-consent .tc-btn--accept, .taylerd-consent[data-highlight="off"] .tc-btn--reject {
  background: var(--_cta); color: var(--taylerd-consent-cta-ink, #fff); border-color: var(--_cta); }
.taylerd-consent .tc-btn--accept:hover, .taylerd-consent[data-highlight="off"] .tc-btn--reject:hover {
  background: var(--_cta-hover); border-color: var(--_cta-hover); }
.taylerd-consent .tc-customise { appearance: none; cursor: pointer; margin: 0; padding: 10px 0; background: none; border: 0;
  font: inherit; font-size: var(--taylerd-consent-button-size, .9375em); color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--_line); }
.taylerd-consent .tc-customise:hover { text-decoration-color: currentColor; }
.taylerd-consent .tc-save, .taylerd-consent.is-prefs .tc-customise { display: none; }
.taylerd-consent.is-prefs .tc-save { display: inline-block; }

/* Customise opens the categories inside the same box. */
.taylerd-consent .tc-prefs { grid-area: prefs; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--_move) var(--_ease); }
.taylerd-consent.is-prefs .tc-prefs { grid-template-rows: 1fr; }
.taylerd-consent .tc-prefs-inner { overflow: hidden; min-height: 0; }
.taylerd-consent .tc-cats { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--_line);
  opacity: 0; transition: opacity var(--_move) var(--_ease); }
.taylerd-consent.is-prefs .tc-cats { opacity: 1; }
.taylerd-consent:not(.is-prefs) .tc-prefs-inner { visibility: hidden; }
.taylerd-consent .tc-cat { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--_line); }
.taylerd-consent .tc-cat strong { display: block; font-weight: var(--taylerd-consent-title-weight, 500); font-size: .9375em; }
.taylerd-consent .tc-cat p { margin: 2px 0 0; font-size: .875em; line-height: 1.5; color: var(--taylerd-consent-ink-soft, inherit); }
.taylerd-consent .tc-always { flex: none; padding-top: 3px; font-size: .8125em; white-space: nowrap;
  color: var(--taylerd-consent-ink-soft, inherit); }
.taylerd-consent .tc-switch { appearance: none; flex: none; margin: 2px 0 0; width: 42px; height: 24px; cursor: pointer;
  position: relative; border: 1px solid var(--_ink); border-radius: var(--_btn-radius); background: transparent;
  transition: background-color var(--_move) var(--_ease), border-color var(--_move) var(--_ease); }
.taylerd-consent .tc-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: var(--_btn-radius); background: var(--_ink);
  transition: transform var(--_move) var(--_ease), background-color var(--_move) var(--_ease); }
.taylerd-consent .tc-switch:checked { background: var(--_cta); border-color: var(--_cta); }
.taylerd-consent .tc-switch:checked::before { transform: translateX(18px); background: var(--taylerd-consent-cta-ink, #fff); }

/* Placements (setting PLACEMENT). */
.taylerd-consent[data-placement^="corner"] { bottom: 24px; width: min(460px, calc(100vw - 48px)); }
.taylerd-consent[data-placement^="corner"].is-prefs { width: min(580px, calc(100vw - 48px)); }
.taylerd-consent[data-placement="corner-right"] { right: 24px; }
.taylerd-consent[data-placement="corner-left"] { left: 24px; }
.taylerd-consent[data-placement="center"] { inset: 0; display: grid; place-items: center; padding: 24px; }
.taylerd-consent[data-placement="center"] .tc-box { width: min(540px, 100%); }
.taylerd-consent[data-placement$="-bar"] { left: 0; right: 0; }
.taylerd-consent[data-placement="bottom-bar"] { bottom: 0; }
.taylerd-consent[data-placement="top-bar"] { top: 0; }
.taylerd-consent[data-placement$="-bar"] .tc-box {
  border-radius: 0; border-width: 1px 0 0; column-gap: 40px; align-items: center;
  padding-inline: max(var(--_pad), calc((100vw - var(--taylerd-consent-bar-width, 1320px)) / 2));
  grid-template-columns: auto 1fr auto; grid-template-areas: "brand main actions" ". prefs .";
}
.taylerd-consent[data-placement$="-bar"][data-logo="off"] .tc-box { grid-template-columns: 1fr auto; grid-template-areas: "main actions" "prefs ."; }
.taylerd-consent[data-placement="top-bar"] .tc-box { border-width: 0 0 1px; }
.taylerd-consent[data-placement$="-bar"] .tc-brand, .taylerd-consent[data-placement$="-bar"] .tc-actions { margin: 0; }
.taylerd-consent[data-placement$="-bar"] .tc-actions { flex-wrap: nowrap; }
.taylerd-consent[data-placement="bottom-bar"].is-hidden { transform: translateY(100%); }
.taylerd-consent[data-placement="top-bar"].is-hidden { transform: translateY(-100%); }

/* Phones: every placement becomes a full-width sheet at the bottom (the top bar stays on top). */
@media (max-width: 640px) {
  .taylerd-consent[data-placement], .taylerd-consent[data-placement].is-prefs { inset: auto 0 0 0; width: auto; padding: 0; display: block; }
  .taylerd-consent[data-placement="top-bar"] { inset: 0 0 auto 0; }
  .taylerd-consent[data-placement] .tc-box { width: auto; border-radius: 0; border-width: 1px 0 0; padding: 20px;
    grid-template-columns: 1fr; grid-template-areas: "brand" "main" "prefs" "actions"; }
  .taylerd-consent[data-placement="top-bar"] .tc-box { border-width: 0 0 1px; }
  .taylerd-consent[data-placement] .tc-brand { margin-bottom: 16px; }
  .taylerd-consent[data-placement] .tc-actions { margin-top: 20px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .taylerd-consent .tc-choice { margin-left: 0; order: -1; }
  .taylerd-consent .tc-customise { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .taylerd-consent, .taylerd-consent * { transition-duration: 1ms !important; }
}