/*
 * Baner zgody Klaro w szacie graficznej Językowi.online.
 * Kolory przejęte z poprzedniego banera (Cookie Notice) i z palety motywu Astra:
 *   pasek #454F5E (--ast-global-color-3), akcent #bf6277 (--ast-global-color-1),
 *   akcent jasny #cb7287, tekst #ffffff, krem #efe4dc.
 */

.klaro.jo-klaro {
    --font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    --title-font-family: 'Playfair Display', Georgia, serif;
    --font-size: 14px;
    --border-radius: 12px;

    --green1: #bf6277;
    --green2: #cb7287;
    --green3: #cb7287;
    --dark1: #ffffff;
    --dark2: #efe4dc;
    --dark3: #d9cfc8;
    --light1: #454f5e;
    --light2: #5a6472;
    --light3: #6b7583;
    --button-text-color: #ffffff;

    --notice-max-width: 460px;
    --notice-right: 20px;
    --notice-left: auto;
    --notice-bottom: 20px;
}

/* ---------- baner (pierwsza warstwa) ---------- */

.klaro.jo-klaro .cookie-notice:not(.cookie-modal-notice) {
    background: #454f5e;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .32);
    z-index: 99999;
}

.klaro.jo-klaro .cookie-notice .cn-body {
    padding: 20px 22px 18px;
    margin-right: 0;
}

/* Klaro 0.7 renderuje tytuł banera jako <h2 id="id-cookie-title">, więc bez tej reguły
   przejmuje on styl nagłówków z Astry (42px, kolor #454F5E = kolor tła banera). */
.klaro.jo-klaro .cookie-notice .cn-body .title,
.klaro.jo-klaro .cookie-notice .cn-body h2,
.klaro.jo-klaro .cookie-notice .cn-body #id-cookie-title {
    font-family: var(--title-font-family);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 8px;
    padding: 0;
}

.klaro.jo-klaro .cookie-notice .cn-body p,
.klaro.jo-klaro .cookie-notice .cn-body {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.55;
    color: #f1ece9;
}

.klaro.jo-klaro .cookie-notice .cn-body p a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.klaro.jo-klaro .cookie-notice .cn-ok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 14px;
}

.klaro.jo-klaro .cookie-notice .cn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* ---------- przyciski ---------- */
/* Odrzucenie musi być tak samo widoczne jak akceptacja (wymóg UODO/EDPB),
   dlatego wszystkie trzy mają identyczny rozmiar i kształt. */

.klaro.jo-klaro .cm-btn,
.klaro.jo-klaro .cookie-notice .cm-btn {
    font-family: var(--font-family);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    margin: 0;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.klaro.jo-klaro .cm-btn.cm-btn-success,
.klaro.jo-klaro .cm-btn.cm-btn-accept-all {
    background: #bf6277 !important;
    border-color: #bf6277 !important;
    color: #ffffff !important;
}

.klaro.jo-klaro .cm-btn.cm-btn-success:hover,
.klaro.jo-klaro .cm-btn.cm-btn-accept-all:hover {
    background: #cb7287 !important;
    border-color: #cb7287 !important;
}

.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-accept {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #ffffff !important;
}

.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro.jo-klaro .cookie-notice .cm-btn.cm-btn-accept:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
}

.klaro.jo-klaro .cookie-notice .cn-learn-more {
    font-family: var(--font-family);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 10px 18px;
    text-decoration: none;
    background: transparent;
    color: #ffffff;
}

.klaro.jo-klaro .cookie-notice .cn-learn-more:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
}

/* ---------- okno ustawień ---------- */

.klaro.jo-klaro .cookie-modal .cm-bg {
    background: rgba(15, 23, 42, .6);
}

.klaro.jo-klaro .cookie-modal .cm-modal {
    background: #ffffff;
    color: #0f172a;
    border-radius: 18px;
    max-width: 660px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-header {
    border-bottom: 1px solid #e7ddd6;
    padding: 22px 24px 16px;
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-header h1,
.klaro.jo-klaro .cookie-modal .cm-modal .cm-header h1.title {
    font-family: var(--title-font-family);
    font-size: 24px;
    color: #0f172a;
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-body,
.klaro.jo-klaro .cookie-modal .cm-modal .cm-body p,
.klaro.jo-klaro .cookie-modal .cm-modal li.cm-purpose,
.klaro.jo-klaro .cookie-modal .cm-modal li.cm-service {
    font-family: var(--font-family);
    color: #3f4a5a;
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service .cm-list-title,
.klaro.jo-klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-list-title {
    color: #0f172a;
    font-weight: 600;
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-footer {
    border-top: 1px solid #e7ddd6;
    padding: 16px 24px 20px;
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-accept {
    background: transparent !important;
    border: 1px solid #bf6277 !important;
    color: #bf6277 !important;
}

.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro.jo-klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
    background: rgba(191, 98, 119, .1) !important;
}

/* przełączniki */
.klaro.jo-klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro.jo-klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider {
    background: #bf6277;
}

.klaro.jo-klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
    background: rgba(191, 98, 119, .45);
}

.klaro.jo-klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
    box-shadow: 0 0 0 3px rgba(191, 98, 119, .3);
}

.klaro.jo-klaro .cookie-modal .cm-modal .cm-body .cm-caret a,
.klaro.jo-klaro .cookie-modal .cm-modal a {
    color: #bf6277;
}

/* ---------- link w stopce ---------- */

.site-footer .jo-cookie-ustawienia {
    cursor: pointer;
}

.site-footer .jo-cookie-ustawienia:hover,
.site-footer .jo-cookie-ustawienia:focus {
    text-decoration: underline;
}

/* ---------- telefon ---------- */

@media (max-width: 640px) {
    .klaro.jo-klaro {
        --notice-right: 10px;
        --notice-left: 10px;
        --notice-bottom: 10px;
        --notice-max-width: none;
    }

    .klaro.jo-klaro .cookie-notice .cn-body {
        padding: 16px 16px 14px;
    }

    .klaro.jo-klaro .cookie-notice .cn-body .title {
        font-size: 19px;
    }

    .klaro.jo-klaro .cookie-notice .cn-buttons {
        width: 100%;
    }

    .klaro.jo-klaro .cookie-notice .cn-buttons .cm-btn,
    .klaro.jo-klaro .cookie-notice .cn-learn-more {
        flex: 1 1 auto;
        text-align: center;
    }
}