.occ-social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
}

.occ-social-share-buttons .occ-share-label {
    font-weight: bold;
    margin-right: 10px;
}

.occ-social-share-buttons.occ-align-left { justify-content: flex-start; }
.occ-social-share-buttons.occ-align-center { justify-content: center; }
.occ-social-share-buttons.occ-align-right { justify-content: flex-end; }
.occ-social-share-buttons.occ-align-space_between { justify-content: space-between; }
.occ-social-share-buttons.occ-align-space_around { justify-content: space-around; }
.occ-social-share-buttons.occ-align-space_evenly { justify-content: space-evenly; }
.occ-social-share-buttons.occ-no-border { border: none !important; padding: 10px 0; box-shadow: none !important; }

.occ-social-share-button {
    display: inline-block;
    margin: 0 10px;
    padding: 8px 16px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.occ-social-share-button.like-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: inherit;
    line-height: 1.2;
}

.occ-social-share-button.like-button .like-label,
.occ-social-share-button.like-button .like-count,
.occ-social-share-button.like-button i {
    color: inherit;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.occ-social-share-button.like-button.icon-only {
    width: auto;
    height: auto;
    padding: 8px 16px;
}

.occ-social-share-button.like-button .like-count {
    margin-left: 6px;
    font-weight: bold;
}

.occ-social-share-button.like-button .like-tooltip {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.occ-social-share-button.like-button .like-tooltip.visible {
    opacity: 1;
}

.occ-social-share-button.like-button.liked {
    background: #0d6efd;
}

.occ-social-share-button.like-button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.occ-social-share-button:hover {
    background: #005880;
}

.occ-social-share-buttons .occ-social-share-button.text_only {
    display: inline;
    padding: 0;
    margin: 0 10px 0 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #0073aa;
    text-decoration: underline;
}

.occ-social-share-buttons .occ-social-share-button.text_only:hover {
    background: none !important;
    color: #005880;
    text-decoration: underline;
    box-shadow: none;
}


/* ------------------------------------ */
/*  Preview Container                  */
/* ------------------------------------ */

#occ-social-share-preview {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 40px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Preview heading */
#occ-social-share-preview h2 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
}

/* Container for preview buttons */
.occ-social-share-buttons.occ-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Preview label */
.occ-social-share-buttons.occ-preview span {
    display: inline;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-right: 10px;
}

/* ------------------------------------ */
/*  Preview Button Styles               */
/* ------------------------------------ */

.occ-social-share-buttons.occ-preview .occ-social-share-button {
    margin: 5px 10px;
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.3s, transform 0.2s; /* Smooth hover effect */
}

.occ-social-share-buttons.occ-preview .occ-social-share-button:hover {
    transform: translateY(-2px); /* Subtle hover effect */
}

.occ-social-share-buttons.occ-preview .occ-social-share-button i {
    margin-right: 8px;
    font-size: 16px;
    color: #fff;
}

.occ-social-share-buttons.occ-preview .occ-social-share-button.icon-only i {
    margin-right: 0px;
    font-size: 16px;
}

/* ------------------------------------ */
/*  Official Button Styles              */
/* ------------------------------------ */

.occ-social-share-button.official {
    margin: 5px;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------ */
/*  Official Button Colors              */
/* ------------------------------------ */

/* Facebook */
.occ-social-share-button.official.facebook {
    background-color: #1877F2;
}

/* LinkedIn */
.occ-social-share-button.official.linkedin {
    background-color: #0077B5;
}

/* X (Formerly Twitter) */
.occ-social-share-button.official.x {
    background-color: #000;
}

/* Reddit */
.occ-social-share-button.official.reddit {
    background-color: #FF4500;
}

/* Pinterest */
.occ-social-share-button.official.pinterest {
    background-color: #E60023;
}

/* Email */
.occ-social-share-button.official.email {
    background-color: #EA4335;
}

/* Print */
.occ-social-share-button.official.print {
    background-color: #666666;
}

/* Twitter */
.occ-social-share-button.official.twitter {
    background-color: #1DA1F2;
}

/* Tumblr */
.occ-social-share-button.official.tumblr {
    background-color: #36465D;
}

/* Pocket */
.occ-social-share-button.official.pocket {
    background-color: #EE4056;
}

/* Telegram */
.occ-social-share-button.official.telegram {
    background-color: #0088CC;
}

/* Threads */
.occ-social-share-button.official.threads {
    background-color: #000000;
}

/* WhatsApp */
.occ-social-share-button.official.whatsapp {
    background-color: #25D366;
}

/* Mastodon */
.occ-social-share-button.official.mastodon {
    background-color: #6364FF;
}

/* Nextdoor */
.occ-social-share-button.official.nextdoor {
    background-color: #19B26D;
}

/* Bluesky */
.occ-social-share-button.official.bluesky {
    background-color: #00A2FF;
}

/* Skype */
.occ-social-share-button.official.skype {
    background-color: #00AFF0;
}

/* Icon-only style for official buttons */
.occ-social-share-button.official.icon-only {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;  /* Adjust width for icon-only style */
    height: 40px; /* Adjust height for icon-only style */
    border-radius: 50%; /* Circular shape */
    margin: 10px; /* Space between buttons */
    padding: 0;
    font-size: 18px; /* Font size of the icon */
}

.occ-social-share-button.official.icon-only i {
    font-size: 20px; /* Slightly larger icons for visibility */
}
.occ-social-share-buttons.occ-label-above .occ-share-label {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
}

.occ-social-share-buttons.occ-align-left .occ-share-label { text-align: left; }
.occ-social-share-buttons.occ-align-center .occ-share-label { text-align: center; }
.occ-social-share-buttons.occ-align-right .occ-share-label { text-align: right; }
.occ-social-share-buttons.occ-align-space_between .occ-share-label { text-align: left; }
.occ-social-share-buttons.occ-align-space_around .occ-share-label { text-align: left; }
.occ-social-share-buttons.occ-align-space_evenly .occ-share-label { text-align: left; }