/* =====================================================================
   Consent Gate Pro – Frontend Styles
   ===================================================================== */

/* ---- CSS Custom Properties (set via PHP inline_css()) ------------- */
:root {
    --cgp-ban-bg: #ffffff;
    --cgp-ban-text: #1a1a2e;
    --cgp-ban-heading: #1a1a2e;
    --cgp-ban-btn-accept-bg: #4a6cf7;
    --cgp-ban-btn-accept-fg: #ffffff;
    --cgp-ban-btn-reject-bg: #f0f0f0;
    --cgp-ban-btn-reject-fg: #444444;
    --cgp-ban-btn-prefs-bg: transparent;
    --cgp-ban-btn-prefs-fg: #4a6cf7;
    --cgp-ban-link: #4a6cf7;
    --cgp-ban-link-hover: #3a5ce5;
    --cgp-ban-border: none;
    --cgp-ban-radius: 12px;
    --cgp-ban-btn-radius: 7px;
    --cgp-ban-typo-font-family: inherit;
    --cgp-ban-typo-heading-size: 1.1rem;
    --cgp-ban-typo-text-size: 0.875rem;
    --cgp-ban-typo-btn-size: 0.875rem;
    --cgp-ban-typo-line-height: 1.6;
    --cgp-ban-typo-letter-spacing: normal;

    --cgp-prf-bg: #ffffff;
    --cgp-prf-text: #1a1a2e;
    --cgp-prf-heading: #1a1a2e;
    --cgp-prf-accent: #4a6cf7;
    --cgp-prf-toggle-on: #4a6cf7;
    --cgp-prf-toggle-off: #cccccc;
    --cgp-prf-btn-save-bg: #4a6cf7;
    --cgp-prf-btn-save-fg: #ffffff;
    --cgp-prf-border: none;
    --cgp-prf-link: #4a6cf7;
    --cgp-prf-link-hover: #3a5ce5;
    --cgp-prf-overlay: rgba(0,0,0,0.5);
    --cgp-prf-radius: 12px;

    --cgp-flt-bg: #4a6cf7;
    --cgp-flt-fg: #ffffff;
    --cgp-flt-size: 52px;
    --cgp-flt-radius: 50%;
    --cgp-flt-shadow: 0 4px 16px rgba(74,108,247,0.35);
    --cgp-flt-margin: 24px;
}

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

.cgp-banner {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999990;
    padding: 1rem;
    font-family: var(--cgp-ban-typo-font-family);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.cgp-banner--bottom { bottom: 0; }
.cgp-banner--top    { top: 0; transform: translateY(-20px); }
.cgp-banner--center {
    top: 50%; left: 50%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%) scale(0.96);
    width: calc(100% - 2rem);
    max-width: 560px;
}

.cgp-banner--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cgp-banner--center.cgp-banner--visible {
    transform: translate(-50%, -50%) scale(1);
}

.cgp-banner__inner {
    background: var(--cgp-ban-bg);
    border: 1px solid var(--cgp-ban-border);
    border-radius: var(--cgp-ban-radius);
    padding: 1.5rem 2rem;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.cgp-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cgp-banner__heading {
    flex: 1 1 100%;
    margin: 0 0 0.25rem;
    font-size: var(--cgp-ban-typo-heading-size);
    color: var(--cgp-ban-heading);
    font-family: var(--cgp-ban-typo-font-family);
}

.cgp-banner__text {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--cgp-ban-typo-text-size);
    color: var(--cgp-ban-text);
    line-height: var(--cgp-ban-typo-line-height);
    letter-spacing: var(--cgp-ban-typo-letter-spacing);
}

.cgp-banner__links {
    flex: 1 1 100%;
    margin: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cgp-banner__link {
    font-size: calc(var(--cgp-ban-typo-text-size) * 0.9);
    color: var(--cgp-ban-link);
    text-decoration: none;
}
.cgp-banner__link:hover { color: var(--cgp-ban-link-hover); text-decoration: underline; }

.cgp-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
}

/* ---- Shared Button Base ------------------------------------------- */
.cgp-btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--cgp-ban-btn-radius);
    font-size: var(--cgp-ban-typo-btn-size);
    font-family: var(--cgp-ban-typo-font-family);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.1s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cgp-btn:active { transform: scale(0.97); }
.cgp-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.cgp-btn--accept {
    background: var(--cgp-ban-btn-accept-bg);
    color: var(--cgp-ban-btn-accept-fg);
}
.cgp-btn--accept:hover { opacity: 0.88; }

.cgp-btn--reject {
    background: var(--cgp-ban-btn-reject-bg);
    color: var(--cgp-ban-btn-reject-fg);
    border: 0px solid var(--cgp-ban-border);
}
.cgp-btn--reject:hover { opacity: 0.88; }

.cgp-btn--prefs {
    background: var(--cgp-ban-btn-prefs-bg);
    color: var(--cgp-ban-btn-prefs-fg);
    border: 0px solid var(--cgp-ban-btn-prefs-fg);
}
.cgp-btn--prefs:hover { opacity: 0.80; }

.cgp-btn--save {
    background: var(--cgp-prf-btn-save-bg);
    color: var(--cgp-prf-btn-save-fg);
    border-radius: var(--cgp-prf-radius);
}
.cgp-btn--save:hover { opacity: 0.88; }

/* =====================================================================
   PREFERENCES MODAL
   ===================================================================== */

.cgp-prefs-modal {
    position: fixed;
    inset: 0;
    z-index: 999995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cgp-prefs-modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--cgp-prf-overlay);
    cursor: pointer;
}

.cgp-prefs-modal__box {
    position: relative;
    background: var(--cgp-prf-bg);
    border-radius: var(--cgp-prf-radius);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 48px rgba(0,0,0,0.18);
    opacity: 0;
    transform: scale(0.96) translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: var(--cgp-prf-typo-font-family, inherit);
    overflow: hidden;
}

.cgp-prefs-modal--open .cgp-prefs-modal__box {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cgp-prefs-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
    flex-shrink: 0;
}

.cgp-prefs-modal__heading {
    margin: 0;
    font-size: var(--cgp-prf-typo-heading-size, 1.25rem);
    color: var(--cgp-prf-heading);
}

.cgp-prefs-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cgp-prf-text);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
}
.cgp-prefs-modal__close:hover { background: var(--cgp-prf-border); }

/* Tabs */
.cgp-prefs-tabs {
    display: flex;
    gap: 0;
    padding: 1rem 1.5rem 0;
    border-bottom: 1px solid var(--cgp-prf-border);
    flex-shrink: 0;
}

.cgp-prefs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: var(--cgp-prf-typo-text-size, 0.875rem);
    color: #000000;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
}
.cgp-prefs-tab.active,
.cgp-prefs-tab:hover {
    color: var(--cgp-prf-accent);
    border-bottom-color: var(--cgp-prf-accent);
}

.cgp-prefs-tab-content {
    display: none;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.cgp-prefs-tab-content.active { display: block; }

.cgp-prefs-intro {
    font-size: var(--cgp-prf-typo-text-size, 0.875rem);
    color: #000000;
    margin: 0 0 1rem;
    line-height: var(--cgp-prf-typo-line-height, 1.6);
}

/* Categories */
.cgp-category {
    border: 1px solid var(--cgp-prf-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.cgp-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: rgba(0,0,0,0.02);
    cursor: pointer;
    user-select: none;
}
.cgp-category__header:hover { background: rgba(0,0,0,0.04); }

.cgp-category__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.cgp-category__title {
    font-weight: 600;
    font-size: var(--cgp-prf-typo-text-size, 0.875rem);
    color: var(--cgp-prf-heading);
}

.cgp-category__arrow { font-size: 0.75rem; color: #999; }

.cgp-category__body {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cgp-prf-border);
}

.cgp-category__description {
    font-size: 0.8125rem;
    color: #000000;
    margin: 0 0 0.75rem;
}

/* Providers */
.cgp-provider {
    border: 1px solid var(--cgp-prf-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.cgp-provider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: rgba(0,0,0,0.01);
}
.cgp-provider__name { font-size: 0.8125rem; font-weight: 500; color: #000000; }
.cgp-provider-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cgp-prf-accent);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}
.cgp-provider__body { padding: 0.75rem 0.85rem; }
.cgp-provider-info { font-size: 0.8rem; color: #666; margin-bottom: 0.75rem; }
.cgp-provider-info a { color: var(--cgp-prf-link); }

/* Services */
.cgp-service {
    border-top: 1px solid var(--cgp-prf-border);
    padding: 0.6rem 0;
}
.cgp-service:first-of-type { border-top: none; }

.cgp-service__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cgp-service__name { font-size: 0.8125rem; color: #000000; }

.cgp-svc-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cgp-prf-link);
    font-size: 0.75rem;
    padding: 0.2rem 0;
    text-align: left;
    margin-top: 0.3rem;
}
.cgp-svc-expand-btn:hover { text-decoration: underline; }

.cgp-svc-details { margin-top: 0.5rem; }
.cgp-svc-description { font-size: 0.8rem; color: #666; margin-bottom: 0.5rem; }

/* Toggle Switch */
.cgp-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.cgp-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cgp-toggle__slider {
    width: 40px;
    height: 22px;
    background: var(--cgp-prf-toggle-off);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s ease;
    display: block;
}
.cgp-toggle__slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cgp-toggle__input:checked + .cgp-toggle__slider {
    background: var(--cgp-prf-toggle-on);
}
.cgp-toggle__input:checked + .cgp-toggle__slider::after {
    transform: translateX(18px);
}
.cgp-toggle__input:disabled + .cgp-toggle__slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Badge */
.cgp-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 500;
}
.cgp-badge--required { background: #eaf4ee; color: #1e7e34; }

/* Tables */
.cgp-cookie-table,
.cgp-gate-cookie-table,
.cgp-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.cgp-cookie-table th,
.cgp-gate-cookie-table th,
.cgp-history-table th {
    text-align: left;
	color: #000000;
    background: rgba(0,0,0,0.04);
    padding: 5px 8px;
    font-weight: 600;
    border-bottom: 1px solid var(--cgp-prf-border);
}
.cgp-cookie-table td,
.cgp-gate-cookie-table td,
.cgp-history-table td {
    padding: 5px 8px;
	color: #000000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    vertical-align: top;
}
.cgp-cookie-table code,
.cgp-gate-cookie-table code { font-size: 0.75rem; }

/* No cookies note */
.cgp-no-cookies { font-size: 0.75rem; color: #999; font-style: italic; margin: 0; }

/* Prefs actions */
.cgp-prefs-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cgp-prf-border);
}
.cgp-prefs-actions .cgp-btn--accept,
.cgp-prefs-actions .cgp-btn--reject {
    border-radius: var(--cgp-prf-radius);
}

/* Prefs history */
.cgp-prefs-history-heading { font-size: 1rem; margin: 0 0 1rem; color: var(--cgp-prf-heading); }
.cgp-visitor-id-note { font-size: 0.75rem; color: #999; margin-top: 1rem; }

/* Prefs footer */
.cgp-prefs-modal__footer {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--cgp-prf-border);
    background: rgba(0,0,0,0.02);
    flex-shrink: 0;
}
.cgp-footer-link {
    font-size: 0.8rem;
    color: var(--cgp-prf-link);
    text-decoration: none;
}
.cgp-footer-link:hover { text-decoration: underline; }

/* =====================================================================
   CONSENT GATES
   ===================================================================== */

.cgp-gate-wrapper {
    position: relative;
}

.cgp-gate-wrapper.cgp-gate-blocked > *:first-child {
    pointer-events: none;
    user-select: none;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.cgp-gate-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
    padding: 1rem;
}

.cgp-gate-box {
    padding: 1.75rem 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	border-width: 0.1em !important;
}

.cgp-gate-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
	 padding: 0.5em;
    flex-shrink: 0;
}

.cgp-gate-heading {
    margin: 0 0 0.75rem;
}

.cgp-gate-text {
    margin: 0 0 0.75rem;
    width: 100%;
}

.cgp-gate-info-toggle {
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 0.5rem;
    padding: 0;
    font-family: inherit;
}
.cgp-gate-info-toggle:hover { text-decoration: underline; }

.cgp-gate-service-info {
    width: 100%;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    text-align: left;
}
.cgp-gate-info-table { width: 100%; font-size: 0.8rem; margin-bottom: 0.5rem; }
.cgp-gate-info-table th { font-weight: 600; padding: 3px 8px 3px 0; width: 120px; color: #666; }
.cgp-gate-info-table td { padding: 3px 0; }
.cgp-gate-info-table a { color: var(--cgp-ban-link); }

.cgp-gate-privacy-link {
    display: block;
    margin-bottom: 1.25rem;
}

.cgp-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.cgp-gate-btn {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    font-family: inherit;
    text-align: center;
	border: none;
}
.cgp-gate-btn:hover { opacity: 0.85; }
.cgp-gate-btn:active { transform: scale(0.98); }

.cgp-gate-note {
    width: 100%;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

.cgp-gate-wrapper.cgp-gate-unlocked .cgp-gate-overlay { display: none; }

/* =====================================================================
   FLOATING BUTTON
   ===================================================================== */

.cgp-floating-btn {
    position: fixed;
    z-index: 999989;
    width: var(--cgp-flt-size);
    height: var(--cgp-flt-size);
    border-radius: var(--cgp-flt-radius);
    background: var(--cgp-flt-bg);
    color: var(--cgp-flt-fg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cgp-flt-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cgp-floating-btn--bottom-left  { bottom: var(--cgp-flt-margin); left: var(--cgp-flt-margin); }
.cgp-floating-btn--bottom-right { bottom: var(--cgp-flt-margin); right: var(--cgp-flt-margin); }
.cgp-floating-btn--top-left     { top: var(--cgp-flt-margin); left: var(--cgp-flt-margin); }
.cgp-floating-btn--top-right    { top: var(--cgp-flt-margin); right: var(--cgp-flt-margin); }

.cgp-floating-btn--visible {
    opacity: 1;
    pointer-events: auto;
}

.cgp-floating-btn:hover { opacity: 0.9; transform: scale(1.06); }
.cgp-floating-btn:active { transform: scale(0.95); }
.cgp-floating-btn:focus-visible { outline: 3px solid var(--cgp-flt-fg); outline-offset: 2px; }

/* Animations */
.cgp-anim--zoom            { transform: scale(0.5); }
.cgp-anim--zoom.cgp-floating-btn--visible { transform: scale(1); }

.cgp-anim--slide-up        { transform: translateY(40px); }
.cgp-anim--slide-up.cgp-floating-btn--visible { transform: translateY(0); }

.cgp-anim--slide-left      { transform: translateX(-40px); }
.cgp-anim--slide-left.cgp-floating-btn--visible { transform: translateX(0); }

.cgp-anim--slide-right     { transform: translateX(40px); }
.cgp-anim--slide-right.cgp-floating-btn--visible { transform: translateX(0); }

@keyframes cgp-bounce-in {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    80% { transform: scale(0.93); }
    100% { transform: scale(1); }
}
.cgp-anim--bounce.cgp-floating-btn--visible { animation: cgp-bounce-in 0.6s ease forwards; }

.cgp-floating-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
}
.cgp-floating-btn__icon svg { width: 100%; height: 100%; }

/* =====================================================================
   SHORTCODE PRIVACY INFO
   ===================================================================== */

.cgp-privacy-info { font-size: 0.9rem; }
.cgp-pi-category  { margin-bottom: 2rem; }
.cgp-pi-category h3 { border-bottom: 2px solid #e0e0e0; padding-bottom: 0.4rem; margin-bottom: 0.75rem; }
.cgp-pi-service   { margin-bottom: 1.5rem; padding-left: 1rem; border-left: 3px solid #e0e0e0; }
.cgp-pi-service h4 { margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.cgp-pi-badge     { font-size: 0.7rem; background: #eaf4ee; color: #1e7e34; padding: 2px 8px; border-radius: 99px; }
.cgp-pi-provider  { font-size: 0.8rem; color: #555; margin-bottom: 0.5rem; }
.cgp-pi-provider a { color: #4a6cf7; }
.cgp-pi-cookies   { margin-top: 0.5rem; overflow-x: auto; }
.cgp-pi-table     { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.cgp-pi-table th  { background: #f5f5f5; padding: 5px 10px; text-align: left; border-bottom: 2px solid #ddd; }
.cgp-pi-table td  { padding: 4px 10px; border-bottom: 1px solid #eee; }
.cgp-pi-prefs-link { color: #4a6cf7; }
.cgp-open-prefs-link { color: #4a6cf7; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 600px) {
    .cgp-banner__inner  { padding: 1rem; }
    .cgp-banner__actions { flex-direction: column; }
    .cgp-btn { width: 100%; }
    .cgp-gate-box { padding: 1.25rem 1rem; }
    .cgp-prefs-modal__box { max-height: 95vh; }
    .cgp-prefs-modal__header,
    .cgp-prefs-tab-content,
    .cgp-prefs-modal__footer { padding-left: 1rem; padding-right: 1rem; }
    .cgp-prefs-tabs { padding-left: 1rem; padding-right: 1rem; }
    .cgp-prefs-actions { flex-direction: column; }
    .cgp-prefs-actions .cgp-btn { width: 100%; }
}

/* =====================================================================
   HISTORY TABLE – CSS Variables (set by JS from plugin settings)
   ===================================================================== */
:root {
    --cgp-hist-bg:          #ffffff;
    --cgp-hist-head-bg:     #f5f5f5;
    --cgp-hist-head-text:   #1d2327;
    --cgp-hist-row-text:    #3c434a;
    --cgp-hist-border:      #e0e0e0;
    --cgp-hist-stripe:      rgba(0,0,0,0.03);
    --cgp-hist-ok-bg:       #eaf4ee;
    --cgp-hist-ok-text:     #1e7e34;
    --cgp-hist-no-bg:       #fef0f0;
    --cgp-hist-no-text:     #b32d2e;
    --cgp-hist-vid-color:   #999999;
    --cgp-hist-font-size:   0.8rem;
    --cgp-hist-radius:      6px;
    --cgp-hist-font-family: inherit;
    --cgp-hist-head-weight: 600;
    --cgp-hist-row-weight:  400;
}

.cgp-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cgp-hist-font-size);
    font-family: var(--cgp-hist-font-family);
    background: var(--cgp-hist-bg);
    border-radius: var(--cgp-hist-radius);
    overflow: hidden;
}
.cgp-history-table th {
    text-align: left;
    background: var(--cgp-hist-head-bg);
    color: var(--cgp-hist-head-text);
    font-weight: var(--cgp-hist-head-weight);
    padding: 7px 10px;
    border-bottom: 1px solid var(--cgp-hist-border);
}
.cgp-history-table td {
    padding: 6px 10px;
    color: var(--cgp-hist-row-text);
    font-weight: var(--cgp-hist-row-weight);
    border-bottom: 1px solid var(--cgp-hist-border);
    vertical-align: top;
}
.cgp-history-table tr:nth-child(even) td {
    background: var(--cgp-hist-stripe);
}

/* History badges */
.cgp-hist-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 99px;
}
.cgp-hist-badge--ok {
    background: var(--cgp-hist-ok-bg);
    color: var(--cgp-hist-ok-text);
}
.cgp-hist-badge--no {
    background: var(--cgp-hist-no-bg);
    color: var(--cgp-hist-no-text);
}

.cgp-visitor-id-note code {
    color: var(--cgp-hist-vid-color);
    font-size: var(--cgp-hist-font-size);
}