.nk-dresscode {
    margin-top: 2rem;
    padding-top: 1.5rem;
    text-align: center;
    --nk-dresscode-fg: #000000;
    --nk-dresscode-surface: var(--nk-color-card-background, #ffffff);
    color: var(--nk-dresscode-fg);
}

@supports (color: color-contrast(#fff vs #000, #fff)) {
    .nk-dresscode:not([data-nk-dresscode-contrast]) {
        --nk-dresscode-fg: color-contrast(var(--nk-dresscode-surface) vs #000000, #ffffff);
    }
}

.nk-dresscode__title,
.nk-dresscode__text {
    color: var(--nk-dresscode-fg);
}

.nk-dresscode__title {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.nk-dresscode__text {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 28rem;
    margin: 0 auto 1rem;
}

.nk-dresscode-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.nk-dresscode-swatches span {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--nk-dresscode-fg) 18%, transparent);
}