/* ======================================================================
   Кукі-файли: банер згоди, вікно налаштувань, сторінка «Політика кукі» (Claude, 2026-10-29).
   Мовою сайту: сіра картка з білою рамкою (як вікна «Залишилися питання?»), Benzin у заголовках,
   кнопки-«пігулки» з червоною рамкою. Тема — класи html.light / html.dark сайту.
   «Прийняти всі» і «Лише необхідні» — однаковою кнопкою (рівнозначний вибір, вимога GDPR).
   ====================================================================== */

.ck-banner, .ck-dialog, .ck-toast, .ck-page {
    --ck-ink: #1c1c1c;
    --ck-muted: #3a3a3a;
    --ck-card: #b8b8b8;
    --ck-line: #ffffff;
    --ck-soft: rgba(255, 255, 255, .45);
    --ck-red: #e31e24;
    --ck-btn-bg: #ffffff;
    --ck-btn-ink: #1c1c1c;
    font-family: Montserrat, sans-serif;
    color: var(--ck-ink);
    text-align: left;
}
.dark .ck-banner, .dark .ck-dialog, .dark .ck-toast {
    --ck-ink: #ffffff;
    --ck-muted: #b8b8b8;
    --ck-card: #000000;
    --ck-soft: rgba(255, 255, 255, .22);
}

.ck-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ck-banner a, .ck-dialog a, .ck-page a:not(.ck-btn) {
    color: var(--ck-ink);
    text-decoration: underline;
    text-decoration-color: var(--ck-red);
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}
.ck-banner a:hover, .ck-dialog a:hover, .ck-page a:not(.ck-btn):hover { text-decoration-thickness: 3px; }
.ck-banner :focus-visible, .ck-dialog :focus-visible, .ck-page :focus-visible {
    outline: 2px solid var(--ck-ink);
    outline-offset: 3px;
}

/* ---------- Кнопки ---------- */
.ck-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: .75rem 1.5rem;
    border-radius: 56px;
    border: 1px solid var(--ck-red);
    background: var(--ck-btn-bg);
    box-shadow: -3px 4px 0 0 var(--ck-red) inset;
    color: var(--ck-btn-ink);
    font: 600 .875rem/1.15 Montserrat, sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.ck-btn:hover { background: var(--ck-red); color: #ffffff; }
/* «Прийняти всі» — головна дія (заливка). «Лише необхідні» лишається повноцінною кнопкою того самого розміру,
   у тому самому шарі й з добрим контрастом — інакше згода недійсна (EDPB Cookie Banner Taskforce, 2023). */
.ck-btn--primary {
    background: var(--ck-red);
    border-color: var(--ck-red);
    box-shadow: -3px 4px 0 0 #9e1015 inset;
    color: #ffffff;
}
.ck-btn--primary:hover { background: #c4161c; border-color: #c4161c; color: #ffffff; }
.ck-link {
    appearance: none;
    background: none;
    border: 0;
    padding: .5rem .25rem;
    color: var(--ck-ink);
    font: 600 .875rem/1.2 Montserrat, sans-serif;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--ck-red);
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
    cursor: pointer;
}
.ck-link:hover { text-decoration-thickness: 3px; }

/* ---------- Банер ---------- */
.ck-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 30;
    width: min(72rem, calc(100% - 2rem));
    transform: translateX(-50%);
    background: var(--ck-card);
    border: .125rem solid var(--ck-line);
    border-radius: .9375rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    animation: ck-rise .35s ease-out both;
}
.ck-banner[hidden] { display: none; }
@keyframes ck-rise { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .ck-banner { animation: none; } }

.ck-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    align-items: center;
    padding: 1.375rem 1.75rem;
}
.ck-banner__title {
    margin: 0 0 .5rem;
    font: 600 1.125rem/1.1 Benzin, sans-serif;
    text-transform: uppercase;
    color: var(--ck-ink);
}
.ck-banner__lead { margin: 0; font-size: .9375rem; line-height: 1.5; font-weight: 500; max-width: 46rem; }
.ck-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; justify-content: flex-end; }
.ck-banner__actions .ck-link { order: -1; margin-right: .25rem; }

@media (max-width: 61.99875em) {
    .ck-banner__inner { grid-template-columns: 1fr; }
    .ck-banner__actions { justify-content: flex-start; }
}
@media (max-width: 29.99875em) {
    .ck-banner { bottom: .5rem; width: calc(100% - 1rem); }
    .ck-banner__inner { padding: 1.125rem 1rem 1rem; gap: 1rem; }
    .ck-banner__lead { font-size: .875rem; }
    .ck-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ck-banner__actions .ck-link { order: 0; grid-column: 1 / -1; justify-self: center; }
    .ck-btn { padding-inline: .75rem; }
}

/* ---------- Вікно налаштувань ---------- */
html.ck-lock { overflow: hidden; }
.ck-dialog {
    width: min(46rem, calc(100% - 2rem));
    max-height: min(52rem, calc(100% - 2rem));
    padding: 0;
    margin: auto;
    background: var(--ck-card);
    border: .125rem solid var(--ck-line);
    border-radius: .9375rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.ck-dialog[open] { display: flex; }
.ck-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.ck-dialog__form { display: flex; flex-direction: column; width: 100%; max-height: inherit; margin: 0; }
.ck-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.375rem 1.75rem 1rem;
    border-bottom: 1px solid var(--ck-soft);
}
.ck-dialog__title { margin: 0; font: 600 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.1 Benzin, sans-serif; text-transform: uppercase; color: var(--ck-ink); }
.ck-dialog__close {
    appearance: none;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--ck-red);
    background: var(--ck-btn-bg);
    color: var(--ck-btn-ink);
    cursor: pointer;
}
.ck-dialog__close:hover { background: var(--ck-red); color: #ffffff; }
.ck-dialog__body { overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.75rem; }
.ck-dialog__lead { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.5; font-weight: 500; }
.ck-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .625rem;
    padding: 1rem 1.75rem 1.375rem;
    border-top: 1px solid var(--ck-soft);
}
@media (max-width: 29.99875em) {
    .ck-dialog { width: calc(100% - 1rem); max-height: calc(100% - 1rem); }
    .ck-dialog__head, .ck-dialog__body, .ck-dialog__foot { padding-inline: 1rem; }
    .ck-dialog__foot { display: grid; grid-template-columns: 1fr 1fr; padding-block: .75rem 1rem; }
    .ck-dialog__foot [data-cc-save] { grid-column: 1 / -1; order: 3; }
}

/* ---------- Категорія ---------- */
.ck-cat { padding: 1.125rem 0; border-top: 1px solid var(--ck-soft); }
.ck-cat:first-of-type { border-top: 0; padding-top: .25rem; }
.ck-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ck-cat__name { margin: 0; font: 600 1rem/1.2 Benzin, sans-serif; text-transform: uppercase; color: var(--ck-ink); }
.ck-cat__always { font-size: .8125rem; font-weight: 600; color: var(--ck-ink); white-space: nowrap; }
.ck-cat__always::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--ck-red);
    vertical-align: .08em;
}
.ck-cat__desc { margin: .625rem 0 .5rem; font-size: .9rem; line-height: 1.5; font-weight: 500; color: var(--ck-ink); }
.ck-cat__details summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem 0;
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    list-style: none;
    color: var(--ck-ink);
}
.ck-cat__details summary::-webkit-details-marker { display: none; }
.ck-cat__details summary::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 2px solid var(--ck-red);
    border-bottom: 2px solid var(--ck-red);
    transform: rotate(-45deg);
    transition: transform .2s ease;
}
.ck-cat__details[open] summary::before { transform: rotate(45deg); }

/* ---------- Перемикач ---------- */
.ck-switch { position: relative; display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; flex: none; }
.ck-switch input { position: absolute; opacity: 0; width: 3rem; height: 1.625rem; margin: 0; cursor: pointer; }
.ck-switch__track {
    position: relative;
    width: 3rem;
    height: 1.625rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid var(--ck-ink);
    transition: background-color .2s ease, border-color .2s ease;
}
.ck-switch__track::after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #1c1c1c;
    transition: transform .2s ease, background-color .2s ease;
}
.ck-switch input:checked + .ck-switch__track { background: var(--ck-red); border-color: var(--ck-red); }
.ck-switch input:checked + .ck-switch__track::after { transform: translateX(1.375rem); background: #ffffff; }
.ck-switch input:focus-visible + .ck-switch__track { outline: 2px solid var(--ck-ink); outline-offset: 3px; }
.ck-switch__label { font-size: .8125rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ck-switch__track, .ck-switch__track::after { transition: none; } }

/* ---------- Сервіси й таблиця кукі ---------- */
.ck-services { display: grid; gap: .875rem; margin-top: .5rem; }
.ck-service {
    padding: .875rem 1rem;
    border: 1px solid var(--ck-soft);
    border-radius: .625rem;
    background: rgba(255, 255, 255, .18);
}
.dark .ck-service, .dark .ck-page .ck-service { background: rgba(255, 255, 255, .05); }
.ck-service__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.ck-service__name { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--ck-ink); }
.ck-service__provider { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--ck-muted); }
.ck-service__desc { margin: .375rem 0 .625rem; font-size: .875rem; line-height: 1.45; font-weight: 500; color: var(--ck-ink); }
.ck-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.4; color: var(--ck-ink); }
.ck-table th {
    text-align: left;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .375rem .5rem .375rem 0;
    border-bottom: 1px solid var(--ck-soft);
}
.ck-table td { padding: .5rem .5rem .5rem 0; vertical-align: top; border-bottom: 1px solid var(--ck-soft); font-weight: 500; }
.ck-table tr:last-child td { border-bottom: 0; }
.ck-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; word-break: break-word; }
@media (max-width: 39.99875em) {
    .ck-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .ck-table, .ck-table tbody, .ck-table tr, .ck-table td { display: block; width: 100%; }
    .ck-table tr { padding: .5rem 0; border-bottom: 1px solid var(--ck-soft); }
    .ck-table tr:last-child { border-bottom: 0; }
    .ck-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; padding: .2rem 0; border: 0; }
    .ck-table td::before { content: attr(data-label); font-weight: 700; font-size: .6875rem; text-transform: uppercase; color: var(--ck-muted); padding-top: .1rem; }
}

/* ---------- Повідомлення «збережено» ---------- */
.ck-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 31;
    transform: translateX(-50%);
    margin: 0;
    padding: .75rem 1.25rem;
    border-radius: 56px;
    border: .125rem solid var(--ck-line);
    background: var(--ck-card);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.ck-toast[hidden] { display: none; }

/* ---------- Сторінка «Політика кукі» ---------- */
.ck-page { padding: clamp(7rem, 5.5rem + 4vw, 10rem) 0 clamp(3rem, 2rem + 4vw, 6rem); }
.dark .ck-page { --ck-ink: #ffffff; --ck-muted: #b8b8b8; --ck-soft: rgba(255, 255, 255, .22); }
.ck-page__container { width: 100%; max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.ck-page__title {
    margin: 0 0 .75rem;
    font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1.1 Benzin, sans-serif;
    text-transform: uppercase;
    color: var(--ck-ink);
}
.ck-page__updated { margin: 0 0 1.5rem; font-size: .875rem; font-weight: 600; color: var(--ck-red); }
.ck-page__intro { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; }
.ck-page__section { padding: 1.5rem 0; border-top: 1px solid var(--ck-soft); }
.ck-page__h2 { margin: 0 0 .75rem; font: 600 1.125rem/1.2 Benzin, sans-serif; text-transform: uppercase; color: var(--ck-ink); }
.ck-page__h3 { margin: 1.25rem 0 .375rem; font: 600 .9375rem/1.2 Benzin, sans-serif; text-transform: uppercase; color: var(--ck-ink); }
.ck-page__h3 .ck-cat__always { margin-left: .75rem; font-family: Montserrat, sans-serif; text-transform: none; }
.ck-page p { line-height: 1.6; font-weight: 500; }
.ck-page__section > p { margin: 0 0 .75rem; font-size: 1rem; }
.ck-page__actions { margin: 1rem 0 1.25rem; }
.ck-page .ck-service { background: rgba(184, 184, 184, .18); }

/* ---------- Посилання в підвалі ---------- */
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; padding: 0 0 1.25rem; margin: 0; list-style: none; }
.footer__legal-link {
    appearance: none;
    background: none;
    border: 0;
    padding: .25rem 0;
    font: 500 .875rem/1.3 Montserrat, sans-serif;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #e31e24;
    text-underline-offset: .2em;
    cursor: pointer;
}
.footer__legal-link:hover { color: #e31e24; }

/* Текст юридичного документа на сторінці сайту (front.legal.terms, 2026-10-31) */
.ck-page__doc { font-size: 1rem; line-height: 1.6; font-weight: 500; }
.ck-page__doc h3 { margin: 2rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--ck-soft); font: 600 1.125rem/1.2 Benzin, sans-serif; text-transform: uppercase; color: var(--ck-ink); }
.ck-page__doc p { margin: 0 0 .75rem; }
.ck-page__doc ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.ck-page__doc ul > li { display: list-item; list-style: disc outside; margin: .375rem 0; }
.ck-page__doc ul > li::marker { color: var(--ck-red); }
.ck-page__doc .acc-doc__version { margin-top: 2rem; font-size: .875rem; color: var(--ck-muted); }