/* Petka GDPR – consent banner */
.pc, .pc-widget, .petka-cc-placeholder {
    /* 80% black rather than black: softer on white, still far above the contrast minimum. */
    --pc-primary: #333333;
    --pc-text: #333333;
    --pc-bg: #ffffff;
    --pc-contrast: #ffffff;
    --pc-accept: #2e7d32;
    --pc-muted: color-mix(in srgb, var(--pc-text) 58%, var(--pc-bg));
    --pc-line: color-mix(in srgb, var(--pc-text) 14%, var(--pc-bg));
    --pc-soft: color-mix(in srgb, var(--pc-text) 5%, var(--pc-bg));
    /* Grey for the two refusals, so only the accept button carries colour. */
    --pc-neutral: color-mix(in srgb, var(--pc-primary) 78%, var(--pc-bg));
    /* Hover never changes the hue, it only deepens it. */
    --pc-primary-strong: color-mix(in srgb, var(--pc-primary) 72%, #000);
    --pc-accept-strong: color-mix(in srgb, var(--pc-accept) 72%, #000);
    --pc-radius: 12px;
    --pc-control-radius: 12px;
    --pc-font: inherit;
}

/*
 * Themes style bare `button` elements, and such a rule outranks a single class.
 * Everything interactive is therefore scoped under the banner's id, and the
 * properties a theme is most likely to impose are reset here rather than fought
 * over one store at a time.
 */
#petka-cc button, #petka-cc-widget {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

.pc[hidden], .pc-widget[hidden], .pc [hidden] { display: none !important; }

.pc {
    position: fixed;
    z-index: 2147483000;
    inset: auto 0 0 0;
    font-family: var(--pc-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text);
    pointer-events: none;
}
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }

.pc__overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, .55);
    pointer-events: auto;
}

.pc__dialog {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: var(--pc-bg);
    color: var(--pc-text);
    box-shadow: 0 -2px 30px rgba(0, 0, 0, .18);
    max-height: 88vh;
    /* The active tab is a square block against the corner - the dialog clips it. */
    overflow: hidden;
    outline: none;
}

/* bottom bar */
.pc--bar .pc__dialog {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--pc-radius) var(--pc-radius) 0 0;
}

/* floating box */
.pc--box { inset: auto auto 16px 16px; }
.pc--box .pc__dialog {
    width: min(440px, calc(100vw - 32px));
    border-radius: var(--pc-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
}

/* centred modal */
.pc--modal { inset: 0; display: flex; align-items: center; justify-content: center; }
.pc--modal .pc__dialog {
    width: min(640px, calc(100vw - 24px));
    border-radius: var(--pc-radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
}
html.petka-cc-modal { overflow: hidden; }

.pc__close {
    position: absolute;
    top: 6px;
    right: 8px;
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pc-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.pc--has-response .pc__close { display: block; }
#petka-cc .pc__close { border-radius: 50%; font-size: 24px; line-height: 1; }
#petka-cc .pc__close:hover { background: var(--pc-soft); color: var(--pc-text); }

.pc__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--pc-line);
}
/* Room for the close button, but only when there is one. */
.pc--has-response .pc__tabs { padding-right: 44px; }

#petka-cc .pc__tabs button {
    appearance: none;
    padding: 14px 10px;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--pc-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
#petka-cc .pc__tabs button:hover { background: var(--pc-soft); color: var(--pc-text); }
#petka-cc .pc__tabs button[aria-selected="true"] { background: var(--pc-primary); color: var(--pc-contrast); }
#petka-cc .pc__tabs button[aria-selected="true"]:hover { background: var(--pc-primary-strong); }

.pc__body { overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.pc__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pc-text); }
.pc__text p { margin: 0 0 8px; }
.pc__text a, .pc__links a { color: var(--pc-primary); text-decoration: underline; }
.pc__links { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 0; }
.pc__state { margin-top: 12px; font-size: 13px; color: var(--pc-muted); word-break: break-all; }

/* switches */
.pc__switches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 16px -20px 0;
    border-top: 1px solid var(--pc-line);
    border-bottom: 1px solid var(--pc-line);
}
.pc__switches .pc-switch {
    /* Label on the left, switch on the right, with a rule between the columns. */
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 14px 16px;
    border-right: 1px solid var(--pc-line);
}
.pc__switches .pc-switch:last-child { border-right: 0; }
.pc__switches .pc-switch:hover { background: var(--pc-soft); }

.pc-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.pc-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.pc-switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pc-text) 28%, var(--pc-bg));
    transition: background .15s;
}
.pc-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.pc-switch input:checked + .pc-switch__track { background: var(--pc-primary); }
.pc-switch input:checked + .pc-switch__track::after { transform: translateX(20px); }
.pc-switch input:disabled + .pc-switch__track { opacity: .55; cursor: not-allowed; }
.pc-switch input:focus-visible + .pc-switch__track { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

/* details */
.pc-cat { padding: 12px 0; border-bottom: 1px solid var(--pc-line); }
.pc-cat:last-child { border-bottom: 0; }
.pc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-cat__expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--pc-text);
    cursor: pointer;
}
.pc-cat__expand::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
}
#petka-cc .pc-cat__expand { font-weight: 700; }
.pc-cat__expand[aria-expanded="true"]::before { transform: rotate(45deg); }
.pc-cat__count {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--pc-soft);
    font-size: 12px;
    text-align: center;
}
.pc-cat__desc { margin: 6px 0 0; color: var(--pc-muted); }
.pc-cat__cookies { margin-top: 10px; }
.pc-cat__empty { margin: 0; font-style: italic; color: var(--pc-muted); }
.pc-cookie {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2px 12px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: var(--pc-control-radius);
    background: var(--pc-soft);
    font-size: 13px;
}
.pc-cookie dt { font-weight: 600; }
.pc-cookie dd { margin: 0; word-break: break-word; }

/* buttons */
.pc__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--pc-line);
}
#petka-cc .pc-btn {
    /* Every choice gets the same width: refusing must be no harder than accepting. */
    flex: 1 1 0;
    min-width: 130px;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--pc-control-radius);
    background: var(--pc-neutral);
    color: var(--pc-contrast);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
#petka-cc .pc-btn--all { background: var(--pc-accept); }

#petka-cc .pc-btn:hover { background: var(--pc-primary); }
#petka-cc .pc-btn--all:hover { background: var(--pc-accept-strong); }

/* Without equal prominence the two refusals step back to outlines; with it (the default,
   and what the EDPB asks for) all three are solid and the same size. */
#petka-cc:not(.pc--equal) .pc-btn--deny,
#petka-cc:not(.pc--equal) .pc-btn--selection {
    background: var(--pc-bg);
    border-color: var(--pc-neutral);
    color: var(--pc-primary);
}
#petka-cc:not(.pc--equal) .pc-btn--deny:hover,
#petka-cc:not(.pc--equal) .pc-btn--selection:hover {
    background: var(--pc-neutral);
    color: var(--pc-contrast);
}

.pc-btn:focus-visible, .pc__tabs button:focus-visible, .pc-cat__expand:focus-visible, .pc__close:focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
}
#petka-cc.pc--box .pc-btn { flex-basis: 100%; }

/* floating re-open button */
.pc-widget {
    position: fixed;
    z-index: 2147482999;
    bottom: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--pc-primary);
    color: var(--pc-contrast);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
}
#petka-cc-widget { border-radius: 50%; }
#petka-cc-widget:hover { background: var(--pc-primary-strong); }
.pc-widget--left { left: 16px; }
.pc-widget--right { right: 16px; }
.pc-widget:focus-visible { outline: 3px solid var(--pc-text); outline-offset: 2px; }

/* blocked iframe placeholder */
.petka-cc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 200px;
    padding: 24px;
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius);
    background: var(--pc-soft);
    color: var(--pc-text);
    text-align: center;
}
.petka-cc-placeholder p { margin: 0; }
.petka-cc-placeholder button {
    padding: 10px 18px;
    border: 0;
    border-radius: var(--pc-control-radius);
    background: var(--pc-primary);
    color: var(--pc-contrast);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}
.petka-cc-placeholder button:hover { background: var(--pc-primary-strong); }

/* declaration widget */
.petka-cc-declaration__state { padding: 16px; margin-bottom: 24px; border-radius: var(--pc-radius, 12px); background: #f5f5f5; }
.petka-cc-declaration__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.petka-cc-declaration__category { margin-bottom: 28px; }
.petka-cc-declaration__scroll { overflow-x: auto; }
.petka-cc-declaration table code, .pc-cookie code { font-size: 12px; }

@media (max-width: 640px) {
    .pc--box { inset: auto 0 0 0; }
    .pc--box .pc__dialog, .pc--bar .pc__dialog { width: 100%; border-radius: var(--pc-radius) var(--pc-radius) 0 0; }
    .pc--modal { align-items: flex-end; }
    .pc--modal .pc__dialog { width: 100%; border-radius: var(--pc-radius) var(--pc-radius) 0 0; }
    .pc__body { padding: 12px 16px; }
    .pc--has-response .pc__tabs { padding-right: 40px; }
    #petka-cc .pc__tabs button { padding: 12px 6px; font-size: 13px; }
    .pc__switches { grid-template-columns: 1fr; margin-left: -16px; margin-right: -16px; }
    .pc__switches .pc-switch { border-right: 0; border-bottom: 1px solid var(--pc-line); }
    .pc__switches .pc-switch:last-child { border-bottom: 0; }
    .pc__footer { padding: 10px 16px 14px; }
    #petka-cc .pc-btn { flex-basis: 100%; }
    .pc-cookie { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-switch__track, .pc-switch__track::after, .pc-cat__expand::before { transition: none; }
}