/*
 * Standard Consent — front-end component styles.
 *
 * Two-layer theming:
 *   Layer 1 (CSS only): redefine --pk-sc-* custom properties in the theme stylesheet.
 *   Layer 2 (full markup): drop consent/banner.php|preferences.php in the active theme
 *                          and rewrite the structure entirely. The JS controller binds
 *                          only to data-pk-sc* attributes, never to class names.
 *
 * No hex literals. All colour is expressed as hsl() chaining to the theme's --pk-*
 * channel tokens (e.g. var(--pk-surface, hsl(0 0% 100%))) so this sheet renders
 * sensibly even when --pk-* is absent (standalone neutral fallback).
 */

/* ============================================================
   Custom property contract
   ============================================================ */
:root {
    /* Surface and border */
    --pk-sc-surface:    var(--pk-surface,   hsl(0 0% 100%));
    --pk-sc-surface-2:  var(--pk-surface-2, hsl(210 16% 96%));
    --pk-sc-border:     var(--pk-border,    hsl(215 16% 88%));

    /* Text */
    --pk-sc-text:   var(--pk-text,   hsl(215 25% 15%));
    --pk-sc-text-2: var(--pk-text-2, hsl(215 15% 32%));
    --pk-sc-muted:  var(--pk-muted,  hsl(215 12% 42%));

    /* Accent */
    --pk-sc-accent:    var(--pk-accent,    hsl(182 34% 38%));
    --pk-sc-accent-fg: var(--pk-accent-fg, hsl(0 0% 100%));

    /* Success — "Always active" label */
    --pk-sc-success: var(--pk-success, hsl(152 42% 38%));

    /* Shadow */
    --pk-sc-shadow: var(--pk-shadow, hsl(0 0% 0% / 0.08));

    /* Spacing baseline (1 unit = 4 px) */
    --pk-sc-spacing: var(--sp-1, 4px);

    /* Radius */
    --pk-sc-radius-sm: var(--r-sm, 4px);
    --pk-sc-radius-md: var(--r-md, 6px);
    --pk-sc-radius-lg: var(--r-lg, 10px);

    /* z-index stack. A consent gate is the FIRST thing a visitor must be able to act on, so it
       must sit ABOVE all theme/site chrome — sticky headers, mobile nav bars, cart drawers, chat
       widgets. The old 40-60 band tied or lost to ordinary theme layers (e.g. pk-daylit-theme's
       fixed mobile nav bar at z-index 50, same bottom:0 as the banner — with equal z-index the
       later-in-DOM nav won the stacking context and swallowed every tap on the banner's buttons:
       buttons visible, tapping did nothing, on mobile only, 2026-07-16). Claim a high band well
       clear of typical theme values so the banner is always on top and always dismissable. */
    --pk-sc-z-overlay: 2147483640;
    --pk-sc-z-banner:  2147483641;
    --pk-sc-z-float:   2147483643;
    --pk-sc-z-prefs:   2147483645;

    /* Switch geometry */
    --pk-sc-switch-w:        40px;
    --pk-sc-switch-h:        22px;
    --pk-sc-switch-thumb:    18px;
    --pk-sc-switch-gap:      2px;
    --pk-sc-switch-off:      var(--pk-sc-border);
    --pk-sc-switch-on:       var(--pk-sc-accent);
    --pk-sc-switch-thumb-bg: hsl(0 0% 100%);

    /* Backdrop dim */
    --pk-sc-backdrop: hsl(0 0% 0% / 0.10);

    /* Transition */
    --pk-sc-transition: 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --pk-sc-transition: 0s;
    }
}

/* ============================================================
   Banner
   ============================================================ */
.pk-sc-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pk-sc-surface);
    border-top: 1px solid var(--pk-sc-border);
    box-shadow: 0 -4px 24px var(--pk-sc-shadow);
    z-index: var(--pk-sc-z-banner);
    padding: calc(var(--pk-sc-spacing) * 5) calc(var(--pk-sc-spacing) * 8);
}

.pk-sc-banner__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /* Without wrap, __actions (flex-shrink: 0) never yields width to __copy on a narrow
       viewport, pushing its buttons off-canvas (measured live: "Accept all" overflowed the
       360px viewport by 52px). Wrapping drops __actions to its own line below the copy. */
    flex-wrap: wrap;
    gap: calc(var(--pk-sc-spacing) * 8);
}

.pk-sc-banner__copy {
    flex: 1;
    min-width: 0;
}

.pk-sc-banner__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pk-sc-text);
    margin-bottom: calc(var(--pk-sc-spacing) * 2);
}

.pk-sc-banner__message {
    font-size: 0.875rem;
    color: var(--pk-sc-text-2);
    line-height: 1.5;
    margin-bottom: calc(var(--pk-sc-spacing) * 4);
}

.pk-sc-banner__message a {
    color: var(--pk-sc-accent);
    text-decoration: underline;
}

.pk-sc-banner__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--pk-sc-spacing) * 2);
    flex-wrap: wrap;
    /* max-width: 100% (not flex-shrink: 0's un-shrinkable natural width) lets this row
       actually respect the flex container's available width so flex-wrap can engage —
       flex-shrink: 0 alone kept it pinned to its 3-buttons-unwrapped width at every
       viewport, overflowing the page by 20px at 360px (measured live). */
    max-width: 100%;
}

/* Opt-out inline toggles */
.pk-sc-optout-toggles {
    display: flex;
    gap: calc(var(--pk-sc-spacing) * 6);
    flex-wrap: wrap;
    margin-bottom: calc(var(--pk-sc-spacing) * 4);
}

.pk-sc-optout-toggle {
    display: flex;
    align-items: center;
    gap: calc(var(--pk-sc-spacing) * 2);
    font-size: 0.75rem;
    color: var(--pk-sc-text-2);
}

.pk-sc-banner__dnsas {
    font-size: 0.75rem;
    color: var(--pk-sc-muted);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.pk-sc-banner__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--pk-sc-spacing) * 3);
    flex-shrink: 0;
    padding-top: calc(var(--pk-sc-spacing) * 1);
}

/* Backdrop dim (opt-in only — rendered by JS alongside showBanner) */
.pk-sc-banner-backdrop {
    position: fixed;
    inset: 0;
    background: var(--pk-sc-backdrop);
    z-index: var(--pk-sc-z-overlay);
    pointer-events: none;
}

/* ============================================================
   Preference center
   ============================================================ */
.pk-sc-prefs-overlay {
    position: fixed;
    inset: 0;
    background: var(--pk-sc-backdrop);
    z-index: calc(var(--pk-sc-z-prefs) - 1);
}

.pk-sc-prefs {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - calc(var(--pk-sc-spacing) * 8)));
    max-height: 90vh;
    overflow-y: auto;
    background: var(--pk-sc-surface);
    border: 1px solid var(--pk-sc-border);
    border-radius: var(--pk-sc-radius-lg);
    box-shadow: 0 8px 48px var(--pk-sc-shadow);
    z-index: var(--pk-sc-z-prefs);
}

.pk-sc-prefs__header {
    position: relative;
    padding: calc(var(--pk-sc-spacing) * 6) calc(var(--pk-sc-spacing) * 6) calc(var(--pk-sc-spacing) * 4);
    border-bottom: 1px solid var(--pk-sc-border);
}

.pk-sc-prefs__close {
    position: absolute;
    top: calc(var(--pk-sc-spacing) * 4);
    right: calc(var(--pk-sc-spacing) * 4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--pk-sc-spacing) * 8);
    height: calc(var(--pk-sc-spacing) * 8);
    padding: 0;
    color: var(--pk-sc-text-2);
    background: transparent;
    border: 0;
    border-radius: var(--pk-sc-radius-sm);
    cursor: pointer;
}

.pk-sc-prefs__close:hover {
    color: var(--pk-sc-text);
    background: var(--pk-sc-surface-2);
}

.pk-sc-prefs__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--pk-sc-text);
    margin-bottom: calc(var(--pk-sc-spacing) * 2);
}

.pk-sc-prefs__intro {
    font-size: 0.875rem;
    color: var(--pk-sc-text-2);
    line-height: 1.5;
}

.pk-sc-prefs__intro a {
    color: var(--pk-sc-accent);
    text-decoration: underline;
}

/* Category rows */
.pk-sc-cat {
    border-bottom: 1px solid var(--pk-sc-border);
}

.pk-sc-cat:last-child {
    border-bottom: 0;
}

.pk-sc-cat__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--pk-sc-spacing) * 4);
    padding: calc(var(--pk-sc-spacing) * 4) calc(var(--pk-sc-spacing) * 6);
}

.pk-sc-cat__info {
    flex: 1;
    min-width: 0;
}

.pk-sc-cat__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pk-sc-text);
    display: flex;
    align-items: center;
    gap: calc(var(--pk-sc-spacing) * 2);
    margin-bottom: calc(var(--pk-sc-spacing) * 1);
}

.pk-sc-cat__desc {
    font-size: 0.75rem;
    color: var(--pk-sc-text-2);
    line-height: 1.4;
}

/* An explicit display: value beats the HTML `hidden` attribute's UA display:none, so an
   expand button rendered with [hidden] (a category with no scanned cookies — the default on
   most sites) showed anyway: 4 nameless chevron buttons => axe button-name CRITICAL. Honor
   [hidden] explicitly. */
.pk-sc-cat__expand[hidden] {
    display: none;
}

.pk-sc-cat__expand {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--pk-sc-accent);
    padding: calc(var(--pk-sc-spacing) * 1) 0;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pk-sc-spacing) * 1);
    font-family: inherit;
    margin-top: calc(var(--pk-sc-spacing) * 2);
}

.pk-sc-cat__control {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--pk-sc-spacing) * 1);
    padding-top: 2px;
}

.pk-sc-always-active {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pk-sc-success);
}

.pk-sc-badge--success {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--pk-sc-success);
    background: hsl(from var(--pk-sc-success) h s l / 0.12);
    padding: 1px 6px;
    border-radius: var(--pk-sc-radius-sm);
}

/* Cookie table */
.pk-sc-cookie-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
}

.pk-sc-cookie-table thead th {
    text-align: left;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pk-sc-muted);
    font-weight: 600;
    padding: calc(var(--pk-sc-spacing) * 2) calc(var(--pk-sc-spacing) * 4);
    background: var(--pk-sc-surface-2);
    border-bottom: 1px solid var(--pk-sc-border);
    border-top: 1px solid var(--pk-sc-border);
}

.pk-sc-cookie-table thead th:first-child {
    padding-left: calc(var(--pk-sc-spacing) * 8);
}

.pk-sc-cookie-table tbody td {
    padding: calc(var(--pk-sc-spacing) * 2) calc(var(--pk-sc-spacing) * 4);
    border-bottom: 1px solid var(--pk-sc-border);
    color: var(--pk-sc-text-2);
}

.pk-sc-cookie-table tbody td:first-child {
    padding-left: calc(var(--pk-sc-spacing) * 8);
    font-weight: 500;
    color: var(--pk-sc-text);
    font-family: monospace;
}

.pk-sc-cookie-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Prefs footer */
.pk-sc-prefs__footer {
    padding: calc(var(--pk-sc-spacing) * 5) calc(var(--pk-sc-spacing) * 6);
    border-top: 1px solid var(--pk-sc-border);
    background: var(--pk-sc-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--pk-sc-spacing) * 3);
    flex-wrap: wrap;
}

.pk-sc-prefs__footer-left {
    font-size: 0.75rem;
    color: var(--pk-sc-muted);
}

.pk-sc-prefs__footer-left a {
    color: var(--pk-sc-accent);
    text-decoration: underline;
}

.pk-sc-prefs__footer-actions {
    display: flex;
    gap: calc(var(--pk-sc-spacing) * 2);
    flex-wrap: wrap;
}

/* ============================================================
   Switch toggle
   ============================================================ */
.pk-sc-switch {
    /* Reset native checkbox appearance so the custom track/thumb renders */
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: var(--pk-sc-switch-w);
    height: var(--pk-sc-switch-h);
    background: var(--pk-sc-switch-off);
    border-radius: calc(var(--pk-sc-switch-h) / 2);
    cursor: pointer;
    transition: background var(--pk-sc-transition);
    flex-shrink: 0;
    vertical-align: middle;
}

.pk-sc-switch::after {
    content: '';
    position: absolute;
    top: var(--pk-sc-switch-gap);
    left: var(--pk-sc-switch-gap);
    width: var(--pk-sc-switch-thumb);
    height: var(--pk-sc-switch-thumb);
    border-radius: 50%;
    background: var(--pk-sc-switch-thumb-bg);
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.2);
    transition: left var(--pk-sc-transition);
}

.pk-sc-switch:checked {
    background: var(--pk-sc-switch-on);
}

.pk-sc-switch:checked::after {
    left: calc(var(--pk-sc-switch-w) - var(--pk-sc-switch-thumb) - var(--pk-sc-switch-gap));
}

.pk-sc-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pk-sc-switch:focus-visible {
    outline: 2px solid var(--pk-sc-accent);
    outline-offset: 2px;
}

/* ============================================================
   Buttons (standalone — no dependency on theme button CSS)
   ============================================================ */
.pk-sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pk-sc-spacing) * 2);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding: calc(var(--pk-sc-spacing) * 2.5) calc(var(--pk-sc-spacing) * 4);
    border-radius: var(--pk-sc-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--pk-sc-transition), background var(--pk-sc-transition);
    text-decoration: none;
}

.pk-sc-btn--primary {
    background: var(--pk-sc-accent);
    color: var(--pk-sc-accent-fg);
    border-color: var(--pk-sc-accent);
}

.pk-sc-btn--primary:hover {
    opacity: 0.9;
}

.pk-sc-btn--secondary {
    background: var(--pk-sc-surface);
    color: var(--pk-sc-text);
    border-color: var(--pk-sc-border);
}

.pk-sc-btn--secondary:hover {
    background: var(--pk-sc-surface-2);
}

.pk-sc-btn--ghost {
    background: transparent;
    color: var(--pk-sc-text-2);
    border-color: transparent;
}

.pk-sc-btn--ghost:hover {
    background: var(--pk-sc-surface-2);
}

.pk-sc-btn--sm {
    font-size: 0.8125rem;
    padding: calc(var(--pk-sc-spacing) * 1.5) calc(var(--pk-sc-spacing) * 3);
}

.pk-sc-btn:focus-visible {
    outline: 2px solid var(--pk-sc-accent);
    outline-offset: 2px;
}

/* ============================================================
   Blocked embed placeholder
   ============================================================ */
.pk-sc-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--pk-sc-ratio, 16 / 9);
    background: var(--pk-sc-surface-2);
    border: 1px solid var(--pk-sc-border);
    border-radius: var(--pk-sc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pk-sc-embed__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: calc(var(--pk-sc-spacing) * 3);
    max-width: 320px;
    padding: calc(var(--pk-sc-spacing) * 4);
}

.pk-sc-embed__icon {
    width: 32px;
    height: 32px;
    stroke: var(--pk-sc-muted);
}

.pk-sc-embed__message {
    font-size: 0.8125rem;
    color: var(--pk-sc-text-2);
    line-height: 1.5;
}

.pk-sc-embed__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pk-sc-spacing) * 2);
    flex-wrap: wrap;
}

/* ============================================================
   Reopen triggers
   ============================================================ */
.pk-sc-reopen {
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--pk-sc-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* Both reopen triggers render with the HTML `hidden` attribute and are revealed by JS
   (showReopen) only after a consent action. An explicit display: value on the float variant
   beats the UA [hidden] display:none, so it showed on top of the banner on a fresh visit.
   Honor [hidden] explicitly on both (defensive on the inline variant too). */
.pk-sc-reopen[hidden],
.pk-sc-reopen-float[hidden] {
    display: none;
}

.pk-sc-reopen-float {
    position: fixed;
    bottom: calc(var(--pk-sc-spacing) * 5);
    left: calc(var(--pk-sc-spacing) * 5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pk-sc-surface);
    border: 1px solid var(--pk-sc-border);
    box-shadow: 0 2px 12px var(--pk-sc-shadow);
    z-index: var(--pk-sc-z-float);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pk-sc-text-2);
}

.pk-sc-reopen-float:hover {
    background: var(--pk-sc-surface-2);
}

.pk-sc-reopen-float:focus-visible {
    outline: 2px solid var(--pk-sc-accent);
    outline-offset: 2px;
}