.pkb-event-contract-gate {
    --pkb-contract-gate-backdrop: rgba(17, 37, 64, 0.96);
    --pkb-contract-gate-surface: var(--pkb-color-surface, #fff);
    --pkb-contract-gate-surface-2: var(--pkb-color-surface-2, #fafafc);
    --pkb-contract-gate-text: var(--pkb-color-text, #1a1d22);
    --pkb-contract-gate-muted: var(--pkb-color-muted, #6b7385);
    --pkb-contract-gate-border: var(--pkb-color-border, #e2e4e9);
    --pkb-contract-gate-accent: var(--pkb-color-primary, #f5245f);
    --pkb-contract-gate-accent-hover: var(--pkb-color-primary-hover, #ff6b93);
    --pkb-contract-gate-on-accent: var(--pkb-on-brand, #fff);
    --pkb-contract-gate-canvas: var(--pkb-color-white, #fff);
    position: fixed;
    inset: 0;
    z-index: 20000;
    overflow: auto;
    background: var(--pkb-contract-gate-backdrop);
    color: var(--pkb-contract-gate-text);
}

body.dark-mode .pkb-event-contract-gate {
    --pkb-contract-gate-backdrop: rgba(1, 13, 29, 0.96);
}

.pkb-event-contract-gate__card {
    width: min(760px, calc(100% - 30px));
    margin: 30px auto;
    padding: 24px;
    border-radius: 12px;
    background: var(--pkb-contract-gate-surface);
    color: var(--pkb-contract-gate-text);
    border: 1px solid var(--pkb-contract-gate-border);
    box-shadow: var(--pkb-shadow-card, none);
}

.pkb-event-contract-gate__card h2,
.pkb-event-contract-gate__card p,
.pkb-event-contract-gate__card label,
.pkb-event-contract-gate__card span {
    color: var(--pkb-contract-gate-text);
}

.pkb-event-contract-gate__pdf {
    width: 100%;
    height: 360px;
    background: var(--pkb-contract-gate-surface-2);
    border: 1px solid var(--pkb-contract-gate-border);
}

.pkb-event-contract-gate__canvas {
    width: 100%;
    max-width: 460px;
    height: 140px;
    border: 1px solid var(--pkb-contract-gate-accent);
    background: var(--pkb-contract-gate-canvas);
    touch-action: none;
}

.pkb-event-contract-gate input[type="checkbox"] {
    accent-color: var(--pkb-contract-gate-accent);
}

.pkb-event-contract-gate .btn-default {
    background-color: var(--pkb-contract-gate-surface-2);
    border-color: var(--pkb-contract-gate-border);
    color: var(--pkb-contract-gate-text);
}

.pkb-event-contract-gate .btn-default:hover,
.pkb-event-contract-gate .btn-default:focus {
    background-color: var(--pkb-gray-700, #eef0f4);
    border-color: var(--pkb-contract-gate-accent);
    color: var(--pkb-contract-gate-text);
}

.pkb-event-contract-gate .btn-primary {
    background-color: var(--pkb-contract-gate-accent);
    border-color: var(--pkb-contract-gate-accent);
    color: var(--pkb-contract-gate-on-accent);
}

.pkb-event-contract-gate .btn-primary:hover,
.pkb-event-contract-gate .btn-primary:focus {
    background-color: var(--pkb-contract-gate-accent-hover);
    border-color: var(--pkb-contract-gate-accent-hover);
    color: var(--pkb-contract-gate-on-accent);
}

.pkb-event-contract-gate .btn[disabled],
.pkb-event-contract-gate .btn:disabled {
    background-color: var(--pkb-contract-gate-surface-2);
    border-color: var(--pkb-contract-gate-border);
    color: var(--pkb-contract-gate-muted);
}
