/* CP Cookie Banner — preferences modal.
   Structural; colour tokens come from theme-*.css. */

.cppb-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 16, 8, 0.62);
    box-sizing: border-box;
}

.cppb-modal.is-open {
    display: flex;
}

.cppb-modal *,
.cppb-modal *::before,
.cppb-modal *::after {
    box-sizing: border-box;
}

.cppb-modal__dialog {
    background: var(--cppb-bg, #fff);
    color: var(--cppb-text-dark, #131413);
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32);
    padding: 28px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
}

.cppb-modal__dialog:focus {
    outline: none;
}

.cppb-modal__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: var(--cppb-text-dark, #131413);
}

.cppb-modal__intro {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--cppb-text-muted, #5C605C);
}

.cppb-modal__intro a {
    color: var(--cppb-link, #248724);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 4px;
}

.cppb-modal__gpc-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cppb-bg-soft, #F8F9F8);
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    font-size: 13px;
    line-height: 1.5;
    color: var(--cppb-text-dark, #131413);
}

/* Same arithmetic as the group descriptions: [hidden] is UA-origin and loses
   to any author `display`, so a page builder's `p { display: block }` would
   show this to every visitor. */
.cppb-modal .cppb-modal__gpc-note[hidden] {
    display: none !important;
}

/* A locked switch must read as locked, not as merely off. */
.cppb-modal__group input[data-cppb-category]:disabled + .cppb-toggle__track {
    opacity: .45;
    cursor: not-allowed;
}

.cppb-modal__groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cppb-modal__group {
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 14px 16px;
}

.cppb-modal__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cppb-modal__group-name {
    font-weight: 700;
    color: var(--cppb-text-dark, #131413);
    font-size: 14px;
}

/* The name is wrapped in a button when there is a description to reveal, so
   it has to shed every default a <button> brings and inherit the type it had
   as a <span>. flex: 1 1 auto keeps the toggle switch hard right. */
.cppb-modal__group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 4px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cppb-modal__group-toggle:focus-visible {
    outline: 2px solid var(--cppb-focus, #30B230);
    outline-offset: 3px;
}

/* Two borders rotated 45deg — a caret with no SVG and no icon font, which is
   what the no-CDN rule leaves. translate keeps it optically centred as it
   spins, since the rotation origin is the box, not the stroke. */
.cppb-modal__chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .5;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.cppb-modal__group-toggle[aria-expanded="true"] .cppb-modal__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.cppb-modal__group-desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--cppb-text-muted, #5C605C);
}

/* Load-bearing, not tidiness. [hidden] is UA-origin `display: none`, which
   loses to ANY author `display` declaration — and a page builder setting
   `.elementor-kit-10 p { display: block }` is enough to show every collapsed
   description at once. The same arithmetic already bit the pricing table's
   row fold and this plugin's banner buttons. */
.cppb-modal .cppb-modal__group-desc[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cppb-modal__chevron {
        transition: none;
    }
}

.cppb-modal__group-locked {
    font-size: 12px;
    font-weight: 600;
    /* 12px bold is NOT WCAG "large text" (that needs 18.66px bold), so this
       badge needs the full 4.5:1 even though it sits on a pale tint. */
    color: var(--cppb-link, #248724);
    background: var(--cppb-bg-soft, #F8F9F8);
    padding: 4px 10px;
    border-radius: 999px;
}

/* ---------- Toggle switch ----------------------------------------------- */
.cppb-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.cppb-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.cppb-toggle__track {
    position: absolute;
    inset: 0;
    background: #CDD0CD;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cppb-toggle__track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.cppb-toggle input:checked + .cppb-toggle__track {
    background: var(--cppb-focus, #30B230);
}

.cppb-toggle input:checked + .cppb-toggle__track::before {
    transform: translateX(16px);
}

.cppb-toggle input:focus-visible + .cppb-toggle__track {
    box-shadow: 0 0 0 3px rgba(48, 178, 48, 0.35);
}

/* ---------- Actions row ------------------------------------------------- */
.cppb-modal__actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .cppb-modal {
        padding: 12px;
    }

    .cppb-modal__dialog {
        padding: 22px;
    }
}


/* ---------- Dark scheme ---------------------------------------------------
   The dialog's colours are tokens and flip on their own. Two things do not:
   the lift, and the toggle track. */
.cppb-modal--dark .cppb-modal__dialog {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 28px 64px rgba(0, 0, 0, 0.65);
}

.cppb-modal--dark {
    background: rgba(0, 0, 0, 0.72);
}

/* LOAD-BEARING. The off state is #CDD0CD -- a LIGHT grey, chosen to read as
   "off" against a white card. On a dark surface a light track reads as ON, so
   every category would look granted before the visitor touches anything. That
   is not a cosmetic bug; it misrepresents their consent state. */
.cppb-modal--dark .cppb-toggle__track {
    background: rgba(255, 255, 255, 0.22);
}

.cppb-modal--dark .cppb-toggle input:checked + .cppb-toggle__track {
    background: var(--cppb-focus, #30B230);
}

/* The knob stays white in both schemes: it is the moving part, and white
   carries enough contrast against both the dim off-track and the accent. */


/* ---------- Cookie detail + sharing disclosure ---------------------------
   Both sit inside a collapsed disclosure, so they add no height to the modal
   until the visitor opens one. The table is deliberately plain: it is
   reference material, not a thing to interact with. */
.cppb-modal__group-text {
    margin: 6px 0 0;
}

.cppb-modal__cookies {
    width: 100%;
    margin: 10px 0 2px;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.45;
}

.cppb-modal__cookies th {
    text-align: left;
    font-weight: 600;
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    color: var(--cppb-text-muted, #5C605C);
    white-space: nowrap;
}

.cppb-modal__cookies td {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.06));
    color: var(--cppb-text-muted, #5C605C);
    vertical-align: top;
}

.cppb-modal__cookies code {
    font-size: 11.5px;
    color: var(--cppb-text-dark, #131413);
    background: none;
    padding: 0;
}

.cppb-modal__cookie-purpose {
    display: block;
    margin-top: 2px;
}

.cppb-modal__share {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cppb-bg-soft, #F8F9F8);
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
}

.cppb-modal__share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cppb-text-dark, #131413);
}

/* Full width with the chevron pinned right. The shared .cppb-modal__group-toggle
   rules are written for a control sitting inside a flex head next to a switch,
   where `flex: 1 1 auto` does the stretching; standing on its own here it
   shrank to its text and left the caret floating mid-sentence. */
.cppb-modal__share-toggle {
    width: 100%;
    justify-content: space-between;
}

/* Hostnames as chips rather than a bulleted column. Eleven domains stacked one
   per line turned a reassurance ("your choice travels with you") into the
   tallest thing in the dialog, pushing the actual category switches off a phone
   screen. Wrapped chips put the same eleven names in three or four lines and
   read as a set, which is what they are. */
.cppb-modal .cppb-modal__share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.cppb-modal .cppb-modal__share-list li {
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.12));
    background: var(--cppb-bg, #FFFFFF);
    font-size: 12px;
    line-height: 1.65;
    color: var(--cppb-text-muted, #5C605C);
    /* A hostname broken mid-label ("coolplugin" / "s.net") stops being a
       hostname; the row wraps between chips instead. */
    white-space: nowrap;
}

/* Same arithmetic as everywhere else here: [hidden] is UA-origin and loses to
   any author `display`, so a page builder's list or table rule would reveal
   these to every visitor. */
.cppb-modal .cppb-modal__share-list[hidden] {
    display: none !important;
}


/* ---------- Cookie policy page ([cppb_cookie_list]) ----------------------
   Renders inside the host theme's content, so type and colour are inherited
   deliberately -- a policy page should look like the site, not like a plugin.
   Only structure and rhythm are set here.

   currentColor with alpha, rather than a fixed grey, so the borders stay
   correct on a dark theme as well as a light one. */
.cppb-policy__category {
    margin: 1.8em 0 .4em;
}

.cppb-policy__intro {
    margin: 0 0 1em;
}

.cppb-policy__provider {
    /* A <caption>: bold label text above its own table. */
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding: 0 0 .45em;
    font-size: .95em;
}

.cppb-policy__table {
    width: 100%;
    margin: 0 0 1.6em;
    border-collapse: collapse;
    font-size: .92em;
    line-height: 1.5;
    /* Fixed layout so EVERY provider table lines up with every other one.
       With auto layout each table sizes to its own content, so the Name column
       jumped between "cppb_consent" and "_ga" down the page and the whole list
       read as ragged. */
    table-layout: fixed;
}

.cppb-policy__table thead th {
    text-align: left;
    font-weight: 600;
    font-size: .88em;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .7;
    padding: .5em .9em .5em 0;
    /* currentColor at full strength drew a near-black 2px bar across the page
       under every category. Grey-with-alpha reads as a rule rather than a
       divider and still works on a dark theme, which a fixed grey would not. */
    border-bottom: 2px solid rgba(128, 128, 128, 0.45);
    white-space: nowrap;
}

.cppb-policy__table td {
    padding: .7em .9em .7em 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    vertical-align: top;
}

.cppb-policy__table tr:last-child td {
    border-bottom: 0;
}

/* The cookie name is the identifier a reader scans for, so it gets a chip
   rather than inheriting whatever the theme does to <code> -- which on several
   of these sites is a full-width tinted block with its own line height. */
.cppb-policy__table code {
    display: inline-block;
    padding: .12em .45em;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.12);
    font-size: .92em;
    line-height: 1.5;
    word-break: break-word;
}

/* Explicit shares rather than shrink-to-fit, so the columns agree across
   tables. Description keeps whatever is left, which is most of it. */
.cppb-policy__table th:first-child,
.cppb-policy__table td:first-child {
    width: 22%;
}

.cppb-policy__table th:last-child,
.cppb-policy__table td:last-child {
    width: 16%;
}

/* Four columns (Name / Set by / Description / Duration) -- the default layout
   now that a category is one table rather than one table per vendor. Set by
   needs real room: "Google Analytics 4" and "X (Twitter) Pixel" wrapped to
   three lines in anything narrower, which made every row twice as tall as its
   content. */
.cppb-policy__table--4col th:nth-child(1),
.cppb-policy__table--4col td:nth-child(1) {
    width: 21%;
}

.cppb-policy__table--4col th:nth-child(2),
.cppb-policy__table--4col td:nth-child(2) {
    width: 20%;
}

.cppb-policy__table--4col th:nth-child(3),
.cppb-policy__table--4col td:nth-child(3) {
    width: auto;
}

.cppb-policy__table--4col th:nth-child(4),
.cppb-policy__table--4col td:nth-child(4) {
    width: 17%;
}

/* The vendor repeats down its block, so it is supporting information, not the
   thing being read. */
.cppb-policy__table--4col td:nth-child(2) {
    opacity: .78;
}

/* A long cookie name must wrap inside its column rather than widen it --
   fixed layout would otherwise let it spill over the description. */
.cppb-policy__table td:first-child code {
    overflow-wrap: anywhere;
}

.cppb-policy__updated,
.cppb-policy__none,
.cppb-policy__empty {
    opacity: .7;
    font-size: .92em;
}

.cppb-policy__manage {
    margin: 2em 0 0;
}

/* Below ~600px a four-column table cannot win. Each row becomes a small block
   with its column name in front of the value, which reads far better than a
   horizontal scrollbar on a policy page. */
@media (max-width: 600px) {
    .cppb-policy__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cppb-policy__table,
    .cppb-policy__table tbody,
    .cppb-policy__table tr,
    .cppb-policy__table td {
        display: block;
        width: auto;
    }

    /* The column widths above are (0,2,1) -- MORE specific than the (0,1,1)
       rule just written -- and a media query adds no specificity of its own, so
       they kept winning here and squeezed every value into a 22% column: the
       provider captions and cookie names wrapped down the page one word at a
       time. Restating them at matching specificity is the fix; the table is not
       a grid at this width, so nothing should be reserving a share of it. */
    .cppb-policy__table th:first-child,
    .cppb-policy__table td:first-child,
    .cppb-policy__table th:last-child,
    .cppb-policy__table td:last-child,
    .cppb-policy__table--4col th:nth-child(1),
    .cppb-policy__table--4col td:nth-child(1),
    .cppb-policy__table--4col th:nth-child(2),
    .cppb-policy__table--4col td:nth-child(2),
    .cppb-policy__table--4col th:nth-child(3),
    .cppb-policy__table--4col td:nth-child(3),
    .cppb-policy__table--4col th:nth-child(4),
    .cppb-policy__table--4col td:nth-child(4) {
        width: auto;
    }

    /* Stacked, the vendor is its own labelled line and no longer repetition to
       be played down. */
    .cppb-policy__table--4col td:nth-child(2) {
        opacity: 1;
    }

    .cppb-policy__table {
        table-layout: auto;
    }

    .cppb-policy__provider {
        display: block;
        width: auto;
    }

    .cppb-policy__table tr {
        padding: .6em 0;
        border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    }

    .cppb-policy__table td {
        border: 0;
        padding: .15em 0;
        white-space: normal;
    }

    .cppb-policy__table td:first-child,
    .cppb-policy__table td:last-child {
        white-space: normal;
    }

    .cppb-policy__table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        opacity: .7;
    }
}