.elementor-16659 .elementor-element.elementor-element-98ea293:not(.elementor-motion-effects-element-type-background), .elementor-16659 .elementor-element.elementor-element-98ea293 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#4480B6;}.elementor-16659 .elementor-element.elementor-element-98ea293{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-16659 .elementor-element.elementor-element-98ea293 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-16659 .elementor-element.elementor-element-5ed34b6 .elementor-heading-title{font-family:"Poppins", Sans-serif;-webkit-text-stroke-color:#000;stroke:#000;color:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-c8c0b7c{color:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-f4de944{--spacer-size:50px;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-cf1cf27.elementor-social-icon{background-color:#DB5050;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-cf1cf27.elementor-social-icon i{color:#FFFEFE;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-cf1cf27.elementor-social-icon svg{fill:#FFFEFE;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-e768340.elementor-social-icon{background-color:#D42F67;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-e768340.elementor-social-icon i{color:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-e768340.elementor-social-icon svg{fill:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-b11edc8.elementor-social-icon{background-color:var( --e-global-color-bd4e4d3 );}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-b11edc8.elementor-social-icon i{color:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-b11edc8.elementor-social-icon svg{fill:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-47c2e5b.elementor-social-icon{background-color:#FDFB06;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-47c2e5b.elementor-social-icon i{color:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-repeater-item-47c2e5b.elementor-social-icon svg{fill:#FFFFFF;}.elementor-16659 .elementor-element.elementor-element-a2adabf{--grid-template-columns:repeat(0, auto);--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-widget-container{text-align:center;}.elementor-16659 .elementor-element.elementor-element-f44a569{--spacer-size:50px;}.elementor-16659 .elementor-element.elementor-element-afcd8bd > .elementor-widget-container{padding:0px 0px 0px 687px;}.elementor-16659 .elementor-element.elementor-element-e063cf1{--spacer-size:143px;}@media(max-width:1024px){.elementor-16659 .elementor-element.elementor-element-f44a569{--spacer-size:158px;}.elementor-16659 .elementor-element.elementor-element-afcd8bd > .elementor-widget-container{padding:0px 0px 0px 308px;}.elementor-16659 .elementor-element.elementor-element-e063cf1{--spacer-size:89px;}}@media(max-width:767px){.elementor-16659 .elementor-element.elementor-element-5ed34b6 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-16659 .elementor-element.elementor-element-5ed34b6{text-align:center;}.elementor-16659 .elementor-element.elementor-element-5ed34b6 .elementor-heading-title{font-size:16px;line-height:2.7em;letter-spacing:-0.7px;word-spacing:0.1em;}.elementor-16659 .elementor-element.elementor-element-c8c0b7c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-16659 .elementor-element.elementor-element-c8c0b7c{font-size:16px;}.elementor-16659 .elementor-element.elementor-element-f4de944{--spacer-size:84px;}.elementor-16659 .elementor-element.elementor-element-a2adabf{--grid-template-columns:repeat(0, auto);}.elementor-16659 .elementor-element.elementor-element-a2adabf .elementor-widget-container{text-align:center;}.elementor-16659 .elementor-element.elementor-element-f44a569{--spacer-size:281px;}.elementor-16659 .elementor-element.elementor-element-afcd8bd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 106px;}.elementor-16659 .elementor-element.elementor-element-afcd8bd{z-index:0;}.elementor-16659 .elementor-element.elementor-element-e063cf1{--spacer-size:96px;}}/* Start custom CSS for html, class: .elementor-element-afcd8bd */<!DOCTYPE html>
<html>
<head>
    <title>Share Page</title>
    <style>
        /* Center-align the button */
        #buttonContainer {
            text-align: center;
            margin-top: 20px; /* Add some space between the button and icons */
        }

        /* Style the green button with a subtle shadow */
        #shareButton {
            background-color: green;
            color: white;
            padding: 10px 20px; /* Add padding for better appearance */
            border: none;
            cursor: pointer;
            font-size: 18px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        }

        /* Style the Facebook button (back to its original color) */
        #facebookShareButton {
            background-color: #1877F2; /* Original Facebook blue color */
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        /* Style the Twitter button */
        #twitterShareButton {
            background-color: #1DA1F2; /* Original Twitter blue color */
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        /* Style the WhatsApp button (back to its original color) */
        #whatsappShareButton {
            background-color: #25D366; /* Original WhatsApp green color */
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 13.5px;
        }

        /* Style the Email button (same font size as Twitter) */
        #emailShareButton {
            background-color: #0072C6; /* Original Email blue color */
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 14px; /* Adjusted font size */
        }

        /* Style the "Copy Link" button with a distinct color */
        #copyLinkButton {
            background-color: #FF5733; /* Distinct color (orange in this example) */
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 14.5px;
        }
    </style>
</head>
<body>
    <div id="buttonContainer">
        <button id="shareButton">
            <i class="fab fa-facebook socialIcon"></i>
            <i class="fab fa-twitter socialIcon"></i>
            <i class="fab fa-whatsapp socialIcon"></i>
            <i class="fas fa-envelope socialIcon"></i>
            Dela denna sida
        </button>
        <button id="copyLinkButton">Copy Link</button>
    </div>
    
    <div id="socialMediaOptions" style="display: none;">
        <button id="facebookShareButton">Facebook</button>
        <button id="twitterShareButton">Twitter</button>
        <button id="whatsappShareButton">WhatsApp</button>
        <button id="emailShareButton">Email</button>
    </div>

    <script>
        var shareButton = document.getElementById('shareButton');
        var socialMediaOptions = document.getElementById('socialMediaOptions');
        var pageUrl = 'https://vapespecialisten.se/follow-us/';
        
        // Show/hide social media options when the share button is clicked
        shareButton.addEventListener('click', function() {
            if (socialMediaOptions.style.display === 'none') {
                socialMediaOptions.style.display = 'block';
            } else {
                socialMediaOptions.style.display = 'none';
            }
        });

        // Function to share the specified page URL on Facebook
        document.getElementById('facebookShareButton').addEventListener('click', function() {
            var shareUrl = encodeURIComponent(pageUrl);
            var facebookUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + shareUrl;
            window.open(facebookUrl, '_blank');
        });

        // Function to share the specified page URL on Twitter
        document.getElementById('twitterShareButton').addEventListener('click', function() {
            var shareText = encodeURIComponent('Check out this awesome page!');
            var shareUrl = encodeURIComponent(pageUrl);
            var twitterUrl = 'https://twitter.com/intent/tweet?text=' + shareText + '&url=' + shareUrl;
            window.open(twitterUrl, '_blank');
        });

        // Function to share the specified page URL on WhatsApp (for mobile devices)
        document.getElementById('whatsappShareButton').addEventListener('click', function() {
            var shareText = encodeURIComponent('Check out this awesome page: ' + pageUrl);
            var whatsappUrl = 'whatsapp://send?text=' + shareText;
            window.location.href = whatsappUrl;
        });

        // Function to open the default email client with a pre-filled email
        document.getElementById('emailShareButton').addEventListener('click', function() {
            var subject = 'Check out this awesome page';
            var body = 'Hi, I thought you might be interested in this page: ' + pageUrl;
            var mailtoUrl = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
            window.location.href = mailtoUrl;
        });

        // Function to copy the specified page URL to the clipboard
        document.getElementById('copyLinkButton').addEventListener('click', function() {
            var tempInput = document.createElement('input');
            document.body.appendChild(tempInput);
            tempInput.value = pageUrl;
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
            alert('URL copied to clipboard: ' + pageUrl);
        });
    </script>
</body>
</html>/* End custom CSS */