.tools-popup-enhanced-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1000;
}

/* 位置样式 */
.tools-popup-modal-position-center {
    justify-content: center;
    align-items: center;
}

.tools-popup-modal-position-leftTop {
    justify-content: flex-start;
    align-items: flex-start;
}

.tools-popup-modal-position-leftBottom {
    justify-content: flex-start;
    align-items: flex-end;
}

.tools-popup-modal-position-rightTop {
    justify-content: flex-end;
    align-items: flex-start;
}

.tools-popup-modal-position-rightBottom {
    justify-content: flex-end;
    align-items: flex-end;
}

.tools-popup-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.tools-popup-modal-container {
    width: auto;
    height: auto;
    position: relative;
    border-radius: 8px;
    z-index: 1001;
    margin: 20px;

    /*卡片样式*/
    .card {
        --bg-card: #27272a;
        --primary: #6d28d9;
        --primary-800: #4c1d95;
        --primary-shadow: #2e1065;
        --light: #d9d9d9;
        --zinc-800: #18181b;
        --bg-linear: linear-gradient(0deg, var(--primary) 50%, var(--light) 125%);
        --secondary: #10b981;
        --secondary-800: #065f46;

        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        width: 14rem;
        background-color: var(--bg-card);
        border-radius: 1rem;
    }

    .button-group {
        display: flex;
        gap: 0.5rem;
    }

    .cart-button {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        width: 100%;
        background-image: var(--bg-linear);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--light);
        text-wrap: nowrap;
        border: 2px solid hsla(262, 83%, 58%, 0.5);
        border-radius: 0.5rem;
        box-shadow: inset 0 0 0.25rem 1px var(--light);
    }

    .cart-button:hover {
        background-color: var(--primary-800);
    }

    .new-button {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        width: 100%;
        background-color: var(--secondary);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--light);
        text-wrap: nowrap;
        border: 2px solid hsla(160, 84%, 39%, 0.5);
        border-radius: 0.5rem;
        box-shadow: inset 0 0 0.25rem 1px var(--light);
    }

    .new-button:hover {
        background-color: var(--secondary-800);
    }

    .image_container {
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: 5;
        width: 100%;
        aspect-ratio: 4/3;
        border-radius: 0.5rem;
    }

    .image_container .image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
        fill: var(--light);
    }

    .title {
        overflow: clip;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        color: var(--light);
        text-transform: capitalize;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }
}