/* The cookie banner, its cookie lists and the cookie tab (TDHS.Multi.Language.Integrations: Views/Shared/Cookies).
   A website themes it by setting these on :root in its own CSS (loaded after this):
     --cc-accent   the banner's top edge, links, focus      --cc-ink     text
     --cc-bg       the banner and tab                       --cc-muted   quieter text, lines
     --cc-btn-bg / --cc-btn-ink   the buttons               --cc-font, --cc-heading-font
     --cc-radius   corners (0 for square)                   --cc-z       stacking, if something sits above it */
:root {
    --cc-accent: #2d5a8c;
    --cc-ink: #1d1d1d;
    --cc-bg: #fff;
    --cc-muted: #6b6b6b;
    --cc-line: #e3e0da;
    --cc-btn-bg: #1d1d1d;
    --cc-btn-ink: #fff;
    --cc-font: inherit;
    --cc-heading-font: inherit;
    --cc-radius: 0;
    --cc-z: 900;
}

.cc-banner { position: fixed; z-index: var(--cc-z); left: 16px; right: 16px; bottom: 16px; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; background: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font); box-shadow: 0 12px 40px rgba(0,0,0,.22); border-top: 4px solid var(--cc-accent); border-radius: var(--cc-radius); }
.cc-banner[hidden] { display: none; }
.cc-inner { padding: 18px 20px; }
.cc-banner h2 { margin: 0 0 6px; font-family: var(--cc-heading-font); font-size: 22px; line-height: 1.2; color: var(--cc-ink); }
.cc-banner p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.cc-banner a { color: var(--cc-accent); }

.cc-choose { margin-bottom: 10px; font-size: 14px; }
.cc-choose[hidden] { display: none; }
.cc-kind { padding: 8px 0; border-top: 1px solid var(--cc-line); }
.cc-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.cc-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cc-btn-bg); }
.cc-list { margin: 6px 0 0 28px; }
.cc-list summary { cursor: pointer; color: var(--cc-accent); font-size: 13px; }

.cc-table { width: 100%; margin: 8px 0 4px; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.cc-table th, .cc-table td { padding: 5px 6px; border-bottom: 1px solid var(--cc-line); text-align: left; vertical-align: top; }
.cc-table th { color: var(--cc-muted); font-weight: 600; }
.cc-table code { font-size: 12px; word-break: break-all; }

.cc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-btn { min-height: 44px; padding: 10px 12px; border: 1px solid var(--cc-btn-bg); border-radius: var(--cc-radius); background: var(--cc-btn-bg); color: var(--cc-btn-ink); font: inherit; font-family: var(--cc-font); font-weight: 600; cursor: pointer; }
.cc-btn--line { background: transparent; color: var(--cc-btn-bg); }
.cc-btn:focus-visible, .cc-tab:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-buttons [data-cookies=choose], .cc-buttons [data-cookies=save] { grid-column: 1 / -1; }
.cc-buttons [hidden] { display: none; }
@media (min-width: 700px) {
    .cc-banner { left: 24px; bottom: 24px; }
    .cc-buttons { grid-template-columns: 1fr 1fr 1fr; }
    .cc-buttons [data-cookies=choose], .cc-buttons [data-cookies=save] { grid-column: auto; }
}

/* the cookie tab: tucked half off the left edge, three-quarters down; it peeks out further on hover */
.cc-tab { position: fixed; z-index: calc(var(--cc-z) - 1); left: 0; top: 75%; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 0 50% 50% 0; background: var(--cc-bg); box-shadow: 0 4px 16px rgba(0,0,0,.18); cursor: pointer; transform: translateX(-12px); transition: transform .2s ease; }
.cc-tab[hidden] { display: none; }
.cc-tab img { width: 40px; height: 40px; margin-left: 10px; transition: transform .3s ease; }
.cc-tab:hover, .cc-tab:focus-visible { transform: translateX(0); }
.cc-tab:hover img, .cc-tab:focus-visible img { transform: rotate(-20deg); }

/* [cookie-list] on the cookie policy page */
.cc-page-list h3 { margin: 24px 0 4px; }
.cc-page-list .cc-table { font-size: 14px; }
.cc-page-list .cc-table code { font-size: 13px; }

@media print { .cc-banner, .cc-tab { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cc-tab, .cc-tab img { transition: none; } }
