/**
Theme Name: I-match
Author: I-match child theme
Author URI: https://i-match.nl
Description: I-match child theme 2024
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: i-match
Template: astra
*/




.sticky-cta {
    position: fixed;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;  
    height: 55px; 
    color: #ffffff !important; /* Forceer wit icoon */
    text-decoration: none !important;
    transform: skew(-15deg);
    margin-right: -15px; /* Zorgt dat de schuine kant buiten beeld valt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background 0.3s ease;
}

/* De specifieke kleuren met !important om de 'witte' bug te fixen */
.sticky-cta .cta-offerte {
    background-color: #ff6000 !important;
    border-radius: 5px 0 0 5px;
}

.sticky-cta .cta-phone {
    background-color: #272830 !important;
    border-radius: 5px 0 0 5px;
}

/* Het icoontje zelf */
.sticky-cta a i {
    transform: skew(15deg); /* Zet icoon recht */
    transition: transform 0.3s ease;
    display: inline-block;
    pointer-events: none; /* Zorgt dat het icoon de klik niet blokkeert */
}

/* HOVER EFFECT: Alleen het icoon schuift een beetje */
.sticky-cta a:hover i {
    transform: skew(15deg) translateX(-8px); 
}

/* Zorg dat de achtergrondkleur bij hover ook goed blijft */
.sticky-cta .cta-offerte:hover {
    background-color: #e65600 !important;
}

.sticky-cta .cta-phone:hover {
    background-color: #1a1b21 !important;
}

@media (max-width: 768px) {
    .sticky-cta a {
        width: 60px;
        height: 50px;
        margin-right: -12px;
    }
}