/* =========================================================
   BOREK STARY — PRIVACY UI V2
   ========================================================= */

.cookie-banner[hidden],
.cookie-preferences-overlay[hidden],
.privacy-settings-button[hidden] {
    display: none !important;
}


/* =========================================================
   COMPACT COOKIE BANNER
   ========================================================= */

.cookie-banner {
    position: fixed;
    z-index: 850;

    left: 50%;
    bottom: 18px;

    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    width: min(
        820px,
        calc(100% - 32px)
    );

    padding: 13px 48px 13px 14px;

    border: 1px solid rgba(215, 224, 219, .95);
    border-radius: 13px;

    background:
        rgba(255, 255, 255, .97);

    color: #17231e;

    box-shadow:
        0 16px 50px rgba(15, 27, 21, .14),
        0 2px 6px rgba(15, 27, 21, .04);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transform: translateX(-50%);

    animation:
        cookieBannerIn .22s
        cubic-bezier(.2, .8, .2, 1);
}


.cookie-banner-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #17231e;
    color: #fff;
}

.cookie-banner-icon svg {
    width: 18px;
    height: 18px;
}


.cookie-banner-content {
    min-width: 0;
}

.cookie-banner-content strong {
    display: block;

    margin-bottom: 2px;

    color: #17231e;

    font-size: 12px;
    font-weight: 760;

    letter-spacing: -.01em;
}

.cookie-banner-content p {
    max-width: 475px;

    margin: 0;

    color: #748179;

    font-size: 10px;
    line-height: 1.5;
}


/* CLOSE */

.cookie-banner-close {
    position: absolute;

    top: 9px;
    right: 9px;

    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: #8c9891;

    cursor: pointer;
}

.cookie-banner-close:hover {
    background: #f1f4f2;
    color: #26332c;
}

.cookie-banner-close svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.cookie-action {
    min-height: 34px;

    padding: 6px 10px;

    border-radius: 7px;

    font-family: inherit;

    font-size: 9px;
    font-weight: 750;

    cursor: pointer;

    transition:
        border-color .14s ease,
        background-color .14s ease,
        color .14s ease,
        transform .14s ease;
}

.cookie-action:hover {
    transform: translateY(-1px);
}

.cookie-action-ghost {
    border: 0;

    background: transparent;
    color: #647168;
}

.cookie-action-ghost:hover {
    background: #f2f5f3;
    color: #26332c;
}

.cookie-action-secondary {
    border: 1px solid #d9e1dd;

    background: #fff;
    color: #526058;
}

.cookie-action-secondary:hover {
    border-color: #bcc8c1;

    background: #f8faf9;
}

.cookie-action-primary {
    border: 1px solid #17231e;

    background: #17231e;
    color: #fff;
}

.cookie-action-primary:hover {
    border-color: #0d1511;

    background: #0d1511;
    color: #fff;
}


/* =========================================================
   SETTINGS DIALOG
   ========================================================= */

.cookie-preferences-overlay {
    position: fixed;
    z-index: 900;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(12, 21, 16, .34);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


.cookie-preferences {
    width: min(500px, 100%);

    overflow: hidden;

    border: 1px solid #dfe5e1;
    border-radius: 14px;

    background: #fff;
    color: #17231e;

    box-shadow:
        0 25px 70px rgba(12, 21, 16, .20);
}


.cookie-preferences-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 19px 20px 15px;

    border-bottom: 1px solid #edf1ef;
}

.cookie-preferences-header > div > span {
    display: block;

    color: #89958e;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.cookie-preferences-header h2 {
    margin: 3px 0 0;

    font-size: 19px;
    font-weight: 760;

    letter-spacing: -.03em;
}


.cookie-preferences-close {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    padding: 0;

    border: 1px solid #e1e6e3;
    border-radius: 7px;

    background: #fff;
    color: #657169;

    cursor: pointer;
}

.cookie-preferences-close:hover {
    background: #f4f6f5;
}

.cookie-preferences-close svg {
    width: 14px;
    height: 14px;
}


.cookie-preferences-intro {
    padding: 14px 20px;

    background: #fafbfa;
}

.cookie-preferences-intro p {
    margin: 0;

    color: #77847c;

    font-size: 10px;
    line-height: 1.55;
}


.cookie-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 68px;

    padding: 13px 20px;

    border-top: 1px solid #edf1ef;
}

.cookie-preference-row strong,
.cookie-preference-row small {
    display: block;
}

.cookie-preference-row strong {
    color: #28352e;

    font-size: 11px;
}

.cookie-preference-row small {
    max-width: 330px;

    margin-top: 2px;

    color: #89958e;

    font-size: 9px;
    line-height: 1.45;
}


.cookie-required {
    color: #75817a;

    font-size: 8px;
    font-weight: 750;

    white-space: nowrap;
}


/* SWITCH */

.cookie-switch input {
    position: absolute;

    opacity: 0;
}

.cookie-switch > span {
    position: relative;

    display: block;

    width: 36px;
    height: 20px;

    border-radius: 999px;

    background: #cbd3cf;

    cursor: pointer;

    transition: background .15s ease;
}

.cookie-switch > span::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .15);

    transition: transform .15s ease;
}

.cookie-switch
input:checked + span {
    background: #17231e;
}

.cookie-switch
input:checked + span::after {
    transform: translateX(16px);
}


/* SETTINGS ACTIONS */

.cookie-preferences-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;

    padding: 14px 20px;

    border-top: 1px solid #edf1ef;

    background: #fafbfa;
}


/* =========================================================
   REOPEN BUTTON
   ========================================================= */

.privacy-settings-button {
    position: fixed;
    z-index: 450;

    left: 14px;
    bottom: 14px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 30px;

    padding: 5px 8px;

    border: 1px solid #dce3df;
    border-radius: 7px;

    background: rgba(255, 255, 255, .92);
    color: #79867f;

    font-size: 8px;
    font-weight: 700;

    box-shadow:
        0 4px 15px rgba(20, 33, 28, .06);

    cursor: pointer;

    backdrop-filter: blur(12px);
}

.privacy-settings-button:hover {
    border-color: #bec9c3;

    color: #34423a;
}

.privacy-settings-button svg {
    width: 13px;
    height: 13px;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes cookieBannerIn {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
    .cookie-banner {
        grid-template-columns: 34px 1fr;

        bottom: 8px;

        width:
            calc(100% - 16px);

        padding:
            12px 38px 12px 12px;
    }

    .cookie-banner-icon {
        width: 34px;
        height: 34px;

        align-self: start;
    }

    .cookie-banner-actions {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1fr 1fr;

        margin-top: 2px;
    }

    .cookie-action-ghost {
        grid-column: 1 / -1;

        order: 3;
    }

    .cookie-preferences-overlay {
        align-items: end;

        padding: 8px;
    }

    .cookie-preferences {
        border-radius: 14px;
    }

    .privacy-settings-button {
        bottom: 10px;
        left: 10px;
    }
}


/* =========================================================
   FLOATING ROUND BUTTONS — PRIVACY + ACCESSIBILITY
   ========================================================= */

/* ---------- ACCESSIBILITY ---------- */

.a11y-launcher {
    position: fixed;
    z-index: 500;

    right: 18px;
    bottom: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, .28),
        0 4px 10px rgba(37, 99, 235, .20);

    cursor: pointer;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.a11y-launcher:hover {
    transform: translateY(-2px) scale(1.02);

    box-shadow:
        0 16px 36px rgba(37, 99, 235, .34),
        0 6px 14px rgba(37, 99, 235, .22);

    filter: brightness(1.03);
}

.a11y-launcher:focus,
.a11y-launcher:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .18),
        0 16px 36px rgba(37, 99, 235, .34);
}

.a11y-launcher svg {
    width: 24px;
    height: 24px;
}

.a11y-launcher span {
    position: absolute !important;

    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;

    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
}


/* ---------- PRIVACY / COOKIES ---------- */

.privacy-settings-button {
    position: fixed;
    z-index: 450;

    left: 18px;
    bottom: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background: linear-gradient(135deg, #7a5a33, #476a3b);
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(80, 66, 39, .24),
        0 4px 10px rgba(71, 106, 59, .18);

    font-size: 0;

    cursor: pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.privacy-settings-button:hover {
    transform: translateY(-2px) scale(1.02);

    box-shadow:
        0 16px 36px rgba(80, 66, 39, .28),
        0 6px 14px rgba(71, 106, 59, .22);

    filter: brightness(1.03);
}

.privacy-settings-button:focus,
.privacy-settings-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(71, 106, 59, .18),
        0 16px 36px rgba(80, 66, 39, .28);
}

.privacy-settings-button svg {
    width: 22px;
    height: 22px;
}

.privacy-settings-button {
    color: #ffffff;
}


/* ---------- OPTIONAL MINI TOOLTIPS ---------- */

.a11y-launcher::after,
.privacy-settings-button::after {
    position: absolute;
    bottom: calc(100% + 10px);

    padding: 6px 8px;

    border-radius: 8px;

    background: rgba(23, 35, 30, .94);
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transform: translateY(4px);

    transition:
        opacity .14s ease,
        transform .14s ease;
}

.a11y-launcher::after {
    content: "Dostępność";
    right: 0;
}

.privacy-settings-button::after {
    content: "Prywatność";
    left: 0;
}

.a11y-launcher:hover::after,
.a11y-launcher:focus-visible::after,
.privacy-settings-button:hover::after,
.privacy-settings-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {
    .a11y-launcher,
    .privacy-settings-button {
        width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .a11y-launcher {
        right: 12px;
        bottom: 12px;
    }

    .privacy-settings-button {
        left: 12px;
        bottom: 12px;
    }

    .a11y-launcher svg,
    .privacy-settings-button svg {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================
   FLOATING TOOLS — FINAL SIZE & COLORS
   ========================================================= */

/* ACCESSIBILITY — BLUE, ALWAYS READABLE */

.a11y-launcher,
.a11y-launcher:link,
.a11y-launcher:visited {
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #2563eb !important;
    color: #ffffff !important;

    box-shadow:
        0 8px 22px rgba(37, 99, 235, .24) !important;
}

.a11y-launcher:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;

    border: 0 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 11px 28px rgba(37, 99, 235, .30) !important;

    filter: none !important;
}

.a11y-launcher:focus,
.a11y-launcher:focus-visible {
    background: #2563eb !important;
    color: #ffffff !important;

    outline: none !important;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .15),
        0 9px 24px rgba(37, 99, 235, .26) !important;
}

.a11y-launcher:active {
    background: #1e40af !important;
    color: #ffffff !important;

    transform: translateY(0) !important;
}

.a11y-launcher svg {
    width: 23px !important;
    height: 23px !important;

    color: #ffffff !important;

    stroke: currentColor;
}


/* PRIVACY — SMALLER, BROWN */

.privacy-settings-button {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;

    left: 16px !important;
    bottom: 16px !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #8a5a32 !important;
    color: #ffffff !important;

    box-shadow:
        0 7px 18px rgba(98, 62, 32, .22) !important;

    font-size: 0 !important;
}

.privacy-settings-button:hover {
    background: #704522 !important;
    color: #ffffff !important;

    border: 0 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 24px rgba(98, 62, 32, .28) !important;

    filter: none !important;
}

.privacy-settings-button:focus,
.privacy-settings-button:focus-visible {
    background: #8a5a32 !important;
    color: #ffffff !important;

    outline: none !important;

    box-shadow:
        0 0 0 4px rgba(138, 90, 50, .14),
        0 8px 20px rgba(98, 62, 32, .24) !important;
}

.privacy-settings-button:active {
    background: #5f391c !important;

    transform: translateY(0) !important;
}

.privacy-settings-button svg {
    width: 18px !important;
    height: 18px !important;

    color: #ffffff !important;

    stroke: currentColor;
}


/* MOBILE */

@media (max-width: 720px) {
    .a11y-launcher {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        right: 12px !important;
        bottom: 12px !important;
    }

    .a11y-launcher svg {
        width: 21px !important;
        height: 21px !important;
    }

    .privacy-settings-button {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;

        left: 12px !important;
        bottom: 12px !important;
    }

    .privacy-settings-button svg {
        width: 16px !important;
        height: 16px !important;
    }
}