.share-btn {
     background: green;
     border: none;
     color: white;
     height: 30px;
     width: 70px;
     font-size: 20px;
     border-radius: 5px;
     cursor: pointer;
}

.share-btn:hover {
     box-shadow: 0 0 10px darkcyan;
}
.share-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
     justify-content: center;
     align-items: center;
     z-index: 1000;
}

.modal-content {
     background: #fff;
     color: #000;
     width: 270px;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     overflow: hidden;
}

.modal-header {
     display: flex;
     background: gray;
     justify-content: space-between;
     align-items: center;
     color: white;
     padding: 10px 15px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     position: relative;
}

.close-btn {
     font-size: 22px;
     cursor: pointer;
}

.modal-body {
     padding: 15px 15px;
}

.modal-body img {
     width: 80px;
     height: 80px;
     border-radius: 8px;
     object-fit: cover;
     margin: 10px auto;
     display: block;
}

.shareLink {
     width: 130px;
     padding: 8px;
     margin-top: 10px;
     border-radius: 6px;
     border: 0.5px solid #ccc;
}

/* COPY BUTTON */
.copyBtn {
     margin-top: 8px;
     height: 35px;
     width: 70px;
     cursor: pointer;
     border: none;
     border-radius: 6px;
     background: green;
     color: white;
}

/* SOCIAL ICON BUTTONS */
.socials {
     margin-top: 12px;
     display: flex;
     justify-content: center;
     gap: 10px;
}

.socials button {
     background: #f2f2f2;
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
}

.socials button img {
     width: 24px;
     height: 24px;
}