/* 采购弹窗样式：保留原始尺寸、背景模糊、悬停与入场过渡。
 * 来源：WorkBuddy 原站设计。尺寸、颜色、背景及动画参数保留。 */
.procurement-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #1517198a;
    display: grid;
    inset: 0;
    padding: 24px;
    place-items: center;
    position: fixed;
    z-index: 200
}

.procurement-modal {
    background: #fff;
    border-top: 3px solid #a50034;
    box-shadow: 0 26px 70px #00000038;
    color: #202326;
    padding: 40px;
    position: relative;
    width: min(100%, 520px)
}

.procurement-modal h2 {
    font-size: 26px;
    margin: 8px 0 0
}

.procurement-intro {
    color: #666d73;
    font-size: 13px;
    line-height: 1.8;
    margin: 14px 0 26px
}

.procurement-close {
    background: transparent;
    border: 0;
    color: #666;
    cursor: pointer;
    font-size: 26px;
    position: absolute;
    right: 14px;
    top: 12px
}

.procurement-options {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr
}

.procurement-option {
    border: 1px solid #ddd;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 140px;
    padding: 24px 40px 24px 22px;
    position: relative;
    text-decoration: none;
    transition: .18s ease
}

.procurement-option:hover {
    border-color: #a50034;
    transform: translateY(-2px)
}

.procurement-option--primary {
    background: #a50034;
    border-color: #a50034;
    color: #fff
}

.procurement-option strong {
    font-size: 17px
}

.procurement-option small {
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px
}

.procurement-option--primary small {
    color: #ffffffb3
}

.procurement-option i {
    font-style: normal;
    position: absolute;
    right: 18px
}

.procurement-modal-enter-active,
.procurement-modal-leave-active {
    transition: opacity .2s ease
}

.procurement-modal-enter-from,
.procurement-modal-leave-to {
    opacity: 0
}

@media(max-width:700px) {
    .procurement-options {
        grid-template-columns: 1fr
    }

    .procurement-modal {
        padding: 34px 24px
    }
}
