.vg-proposal {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 14, 28, .62);
    transition: opacity .22s ease;
}

.vg-proposal.pw-proposal-anim {
    transition: opacity .22s ease;
}

.vg-proposal.pw-proposal-anim--from {
    opacity: 0;
}

.vg-proposal__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 940px;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    background: var(--vg-surface);
    border-radius: var(--vg-radius-lg);
    box-shadow: var(--vg-shadow-lg);
    outline: none;
    transition: transform .25s var(--vg-ease);
}

.vg-proposal.pw-proposal-anim--from .vg-proposal__box {
    transform: translateY(16px) scale(.98);
}

@media (min-width: 860px) {
    .vg-proposal__box {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

.vg-proposal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--vg-secondary-soft);
    color: var(--vg-heading);
}

.vg-proposal__close:hover {
    background: var(--vg-primary);
    color: #fff;
}

.vg-proposal__aside {
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 32px 28px;
    background:
        radial-gradient(360px 200px at 0% 100%, color-mix(in srgb, var(--vg-primary) 45%, transparent), transparent 70%),
        var(--vg-secondary);
    color: rgba(255, 255, 255, .8);
}

@media (min-width: 860px) {
    .vg-proposal__aside {
        display: flex;
    }
}

.vg-proposal__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.vg-proposal__title {
    color: #fff;
    font-size: 1.45rem;
}

.vg-proposal__steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vg-proposal__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
}

.vg-proposal__steps span,
.vg-proposal__section span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vg-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}

.vg-proposal__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.vg-proposal__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    overflow-wrap: anywhere;
}

.vg-proposal__body {
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 32px);
    padding: clamp(20px, 3vw, 32px);
}

.vg-proposal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vg-proposal__section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-right: 40px;
    color: var(--vg-heading);
    font-weight: 700;
}

.vg-proposal__choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vg-proposal__choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid var(--vg-border);
    border-radius: var(--vg-radius);
    background: var(--vg-surface);
    font-size: .88rem;
    cursor: pointer;
}

.vg-proposal__choice:has(input:checked) {
    border-color: var(--vg-primary);
    background: var(--vg-primary-soft);
    color: var(--vg-primary);
}

.vg-proposal__choice input {
    accent-color: var(--vg-primary);
}

.vg-proposal__notes {
    min-height: 90px;
}

.vg-proposal__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 360px;
    text-align: center;
    outline: none;
}

.vg-proposal__done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--vg-ok);
    color: #fff;
}

.vg-proposal__done-icon .vg-ico {
    width: 36px;
    height: 36px;
}

.vg-proposal__done-text {
    color: var(--vg-muted);
    max-width: 40ch;
}