.share-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .15);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

}

.share-overlay.open {

    display: flex;

}

.share-popup {

    width: 340px;

    background: #f5f2ea;

    border-radius: 8px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);

    overflow: hidden;

    animation: popup .25s ease;

}

@keyframes popup {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

.share-title {

    padding: 16px 18px;

    font-size: 11px;

    letter-spacing: .25em;

    text-transform: uppercase;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

}

.share-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px;

    border: none;

    background: none;

    cursor: pointer;

    transition: .25s;

}

.share-item:hover {

    background: #ece8df;

}

.share-item img {

    width: 22px;

    height: 22px;

}

.share-item span {

    font-size: 18px;

    color: #222;

}