.mooncity-consent,
.mooncity-consent-embed {
    --mcc-surface: var(--awb-color6, #100016);
    --mcc-text: var(--awb-color1, #f8ebff);
    --mcc-link: var(--awb-color2, #e3b1ff);
    --mcc-border: var(--awb-color3, #9b6eb6);
    --mcc-focus: var(--awb-color5, #f9d55c);
    --mcc-button: var(--awb-color7, #212326);
    color-scheme: dark;
    color: var(--mcc-text);
    font: 400 1rem/1.5 system-ui, sans-serif;
}

.mooncity-consent [hidden],
.mooncity-consent-embed[hidden],
iframe[data-mooncity-consent-embed][hidden] {
    display: none !important;
}

.mooncity-consent__panel,
.mooncity-consent__open {
    position: fixed;
    inset-inline-start: 1rem;
    z-index: 10050;
}

.mooncity-consent__panel {
    inset-block-end: 4.25rem;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 5.25rem));
    max-height: min(34rem, calc(100dvh - 5.25rem));
    overflow: auto;
    box-sizing: border-box;
    padding: 1rem;
    background: var(--mcc-surface);
    border: 1px solid var(--mcc-border);
    border-radius: .75rem;
    box-shadow: 0 8px 26px rgb(0 0 0 / 65%);
}

.mooncity-consent__panel h2 {
    margin: 0;
    color: inherit;
    font: 700 1.25rem/1.4 system-ui, sans-serif;
}

.mooncity-consent__panel p,
.mooncity-consent-embed p {
    margin: .6rem 0;
}

.mooncity-consent__panel a {
    color: var(--mcc-link);
    text-decoration: underline;
}

.mooncity-consent__panel a:hover {
    color: var(--mcc-focus);
}

.mooncity-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mooncity-consent label {
    display: block;
    margin: .6rem 0;
}

.mooncity-consent input[type="checkbox"] {
    accent-color: var(--mcc-link);
}

.mooncity-consent button,
.mooncity-consent-embed button {
    min-height: 44px;
    padding: .4rem .75rem;
    border: 1px solid var(--mcc-border);
    border-radius: .4rem;
    background: var(--mcc-button);
    color: var(--mcc-text);
    cursor: pointer;
    font: inherit;
}

.mooncity-consent button:hover,
.mooncity-consent-embed button:hover {
    background: #32163e;
    background: color-mix(in srgb, var(--mcc-surface) 75%, var(--mcc-border));
}

.mooncity-consent :focus-visible,
.mooncity-consent-embed :focus-visible {
    outline: 2px solid var(--mcc-focus);
    outline-offset: 2px;
}

.mooncity-consent__open {
    inset-block-end: .75rem;
}

.mooncity-consent-embed {
    padding: .75rem;
    background: var(--mcc-surface);
    border: 1px solid var(--mcc-border);
    border-radius: .5rem;
}