/* --------------- COOKIES --------------- */
section.odf__cookies { 
    --odf_main_color: #202020; 
    --odf_background_color: #FFF; 
    --odf_highlight_color: #00F; 
}
.odf__cookies * { margin: 0; padding: 0; box-sizing: border-box;  font-size: 18px;  color: var(--odf_main_color); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
.odf__cookies *[aria-hidden=true] { pointer-events: none;}
.odf__cookies button { background: none; border: none;}
section.odf__cookies { all: unset; position: fixed; display: grid; place-items: center; transition: 500ms ease; opacity: 0; pointer-events: none;  z-index: 2147483646;  width: 100% !important; max-width: 100% !important;  height: 100vh; height: 100dvh;  line-height: 1.4; top: 0;left: 0;  }
section.odf__cookies::before { content: "";  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1; opacity: 0; pointer-events: none; transition: 500ms;}

section.odf__cookies[aria-hidden=false] { opacity: 1; pointer-events: all;}
section.odf__cookies[aria-hidden=false]::before { pointer-events: all; opacity: .566}

section.odf__cookies > div { position: relative; z-index: 2;  background: var(--odf_background_color); border-radius: 20px;  max-width: 670px;  padding: 30px 00px 0; width: calc(100% - 60px);  max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow: auto;}
section.odf__cookies > div > *:not(.odf__sticky__bottom) {  padding: 0 30px; }
section.odf__cookies h2 { margin-bottom: 0.25em; font-size: 32px; font-weight: 600;  text-transform: none;}
section.odf__cookies h3 { margin-bottom: 0.15em; font-size: 20px; font-weight: 600; }
section.odf__cookies a { color: inherit; }
section.odf__cookies a:hover { color: var(--odf_highlight_color, inherit); }
section.odf__cookies p { margin-bottom: 0.5em; padding-right: var(--cookieButtonWidth); }
section.odf__cookies p:last-of-type { margin: 0; }
section.odf__cookies p a { text-decoration: underline;}
section.odf__cookies ol { list-style: decimal;  margin: 1em 0 1em 1.5em;}
section.odf__cookies ol li { margin-bottom: .25em; }
section.odf__cookies ol li strong { font-weight: 600; font-style: italic;}

.odf__sticky__bottom { position: sticky; bottom: 0; background: var(--odf_background_color); width: 100%; padding: 40px 20px 20px;  transition: 250ms; z-index: 3; }
.odf__customization[aria-hidden=false] + .odf__sticky__bottom { padding-top: 5px;}

.odf__buttons { display: flex; gap: .5rem; margin-top: 1em;  }
.odf__buttons button { all: unset; width: 50%; text-align: center; padding: 10px 30px;  border: 1px solid var(--odf_main_color); border-radius: 7px; font-weight: 500; user-select: none; cursor: pointer;  transition: background 250ms, color 250ms; white-space: nowrap;}
.odf__buttons button:hover { background: none; color: var(--odf_main_color);}

.odf__buttons button.odf__primary {  background: var(--odf_main_color);  color: var(--odf_background_color);}
.odf__buttons button:focus-visible { outline: 2px solid var(--odf_highlight_color); outline-offset: 2px;}
.odf__buttons button.odf__primary:hover { background: var(--odf_highlight_color); color: var(--odf_background_color);}
.odf__buttons button:first-of-type:not([data-selection=""]) { width: calc(100% + 0.5rem); }
.odf__buttons button:first-of-type:not([data-selection=""]) + button { width: 0; overflow: hidden; padding: 10px 0; border: 0}

.odf__customization { display: grid; grid-template-rows: 0fr; transition: 500ms ease; }
.odf__customization > div { overflow: hidden; background: rgba(0,0,0,0.1); width: calc(100% + 40px); margin-left: -20px; padding: 0 20px; transition: 500ms ease-in-out; }
.odf__customization[aria-hidden=false] { grid-template-rows: 1fr; }
.odf__customization[aria-hidden=false] > div { padding: 10px 20px; margin-top: 10px; }
.odf__customization > div h3 { margin-top: 10px;}

.odf__cookie__category { display: grid; grid-template-rows: 1.5em 0fr; transition: 500ms ease-in-out; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);  }
.odf__cookie__category:last-of-type { border-bottom: none;}
.odf__cookie__category[data-open=true] { grid-template-rows: 1.5em 1fr; }

.odf__cookie__category h4 button { cursor: pointer; display: flex; align-items: center; background: none !important; box-shadow: none !important; color: var(--odf_main_color);  min-height: 0; text-transform: none;}
.odf__cookie__category h4 button:focus-visible { outline: 2px solid var(--odf_highlight_color); outline-offset: 1px; }
.odf__cookie__category h4 button span { position: relative; width: 1em; height: 1em;  display: inline-block;  margin-left: 0.5em; --odf-own-color: var(--odf_main_color); display: flex; align-items: center; justify-content: center; }
.odf__cookie__category h4 button span::before,.odf__cookie__category h4 button span::after { content: ""; width: .45em; height: 2px; border-radius: 1rem; background: var(--odf-own-color);  position: absolute;  --r: 45deg; --delta: -.13em;  --x: var(--delta); transform: translateX(var(--x)) rotate(var(--r));    transition: 350ms;}
.odf__cookie__category h4 button span::before { --r: -45deg; --x: calc(var(--delta) * -1) }
.odf__cookie__category h4 button:hover span { --odf-own-color: var(--odf_highlight_color);  }
.odf__cookie__category[data-open=true] h4 button { color: var(--odf_highlight_color);}
.odf__cookie__category[data-open=true] h4 button span { --odf-own-color: var(--odf_highlight_color);   }
.odf__cookie__category[data-open=true] h4 button span::after { --r: -45deg; }
.odf__cookie__category[data-open=true] h4 button span::before { --r: 45deg; }

.odf__cookie__category > div { overflow: hidden; transition: 250ms; }
.odf__cookie__category > div p { font-size: 15px; max-width: 32rem; }

.odf__cookie__category ul li { padding: 20px 0; }
.odf__cookie__category ul li.empty { padding: 10px 0 0; font-size: 15px;}
.odf__cookie__category ul li table { border-collapse: collapse; max-width: 480px; border-style: initial; }
.odf__cookie__category ul li table :is(td,th) { font-size: 13px !important; border: 1px solid var(--odf_main_color); padding: 4px 5px;}
.odf__cookie__category ul li table :is(td,th) a { font-size: 13px !important; }
.odf__cookie__category ul li table td { padding: 4px 10px 4px 5px;   }
/* Label column. The generated banner capitalised every word here because its labels
   came from raw field names; ours come from i18n and are already cased correctly. */
.odf__cookie__category ul li table th { font-weight: 600; width: 6.5rem; text-align: left; }
.odf__cookie__category ul li table tr:first-of-type td { font-weight: 600; }

.odf__cookie__category > div[aria-hidden=false] { padding: 5px 0 10px; }


.odf__switches { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; text-align: center; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.1) }
.odf__switches  div { display: flex; flex-direction: column;  align-items: center; position: relative; }

.odf__switches div:first-of-type, .odf__switches div:first-of-type :is(label,input) { cursor:not-allowed }
.odf__switches div:first-of-type label span::after { transform: translateX(0);}
.odf__switches div:first-of-type label span::before { background: var(--odf_main_color); opacity: .5;}

button.odf__details { font-size: 15px; background: none; width: max-content; display: block; text-decoration: underline;  cursor: pointer;  margin: 10px auto 10px;   transition: color 250ms; box-shadow: none; color: var(--odf_main_color);  float: none; min-height: 0; text-transform: none;}
button.odf__details:focus-visible { outline: 1px solid var(--odf_highlight_color);}
button.odf__details:hover { animation: none !important; box-shadow: none !important; color: var(--odf-own-color) !important; }

.odf__switches input { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.odf__switches label { user-select: none;  font-size: 14px; cursor: pointer;  }
.odf__switches span { width: 100%; max-width: 3.5rem; margin: 0 auto;  display: block;  position: relative;  margin-top: 5px;}
.odf__switches span::before { content: ""; position: relative; width: 100%; padding-bottom: 56%; background: #949494;  display: block; border-radius: 100vmin;  transition: 250ms; }
.odf__switches span::after { content: ""; position: absolute; width: 42%; padding-bottom: 42%; top: 13%; left: 50%; transform: translateX(-100%); background: #FFF;  border-radius: 100vmin;  transition: 250ms;}
.odf__switches input:checked ~ label span::after { transform: translateX(0%);}
.odf__switches input:checked ~ label span::before {  background: var(--odf_highlight_color); }
.odf__switches input:focus-visible ~ label span { outline: 1px solid var(--odf_highlight_color);}

section.odf__cookies.small { display: flex; place-items: unset; align-items: flex-end; justify-content: flex-start; pointer-events: none; }
section.odf__cookies.small::before { display: none;  }
section.odf__cookies.small * { font-size: 14px; }
section.odf__cookies.small h2 { font-size: 20px;}
section.odf__cookies.small h3 { font-size: 18px }
section.odf__cookies.small .odf__modal { max-width: 480px; margin: 30px; box-shadow: 3px 3px 10px rgba(0,0,0,0.15); pointer-events: all;}
section.odf__cookies.small .odf__sticky__bottom { padding-top: 20px;}
section.odf__cookies.small .odf__switches span { max-width: 2.6rem; }



@media only screen and (max-width: 768px) {
    section.odf__cookies h2 { font-size: 24px;}
    section.odf__cookies > div { width: calc(100% - 20px); padding: 20px 0px 0; max-width: 500px; }
    section.odf__cookies > div > *:not(.odf__sticky__bottom) { padding: 0 20px; }
    section.odf__cookies ol { margin: .75em 0 .75em 1.2em; }
    .odf__sticky__bottom { padding: 30px 20px 15px; }
    .odf__buttons button { padding: 10px 5px; }
    .odf__cookies * { font-size: 16px; }
    .odf__customization[aria-hidden="false"] > div { padding: 0px 20px;}
    .odf__switches { grid-gap: 4px; display: flex; justify-content: space-between; }
    .odf__switches span { max-width: 2.5rem; }
}

@media only screen and (max-width: 365px) {
    .odf__switches { display: grid; grid-template-columns: 1fr 1fr; }
    .odf__switches label { font-size: 16px; }
    .odf__switches span { max-width: 3rem;}
    .odf__buttons { flex-direction: column-reverse;  }
    .odf__buttons button { width: 100%; }
}

@media only screen and (max-height: 400px) {
    .odf__sticky__bottom { position: relative; }
}

/* --------------- ADDITIONS (not part of the generated banner) --------------- */

/* The "necessary" toggle is checked (it is always on) but disabled. Keep the
   greyed-out look instead of the active highlight the :checked rule would give. */
.odf__switches div:first-of-type input:checked ~ label span::before { background: var(--odf_main_color); opacity: .5; }

/* Trigger that reopens the banner - the {{< cookiesettings >}} shortcode on the
   privacy pages. A button for semantics, styled as a link. */
button.cookie-settings { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
button.cookie-settings:hover { text-decoration: none; }