/**
 * CF7 Visual Customizer - Frontend CSS
 */

/* Button icons using CSS pseudo-elements */
/* This allows icons on input[type="submit"] without breaking CF7 functionality */

/* Icon positioning - left near */
input[type="submit"][data-icon][data-icon-position="left-near"]::before,
button[type="submit"][data-icon][data-icon-position="left-near"]::before {
    content: attr(data-icon);
    margin-right: 8px;
    display: inline-block;
}

/* Icon positioning - left far */
input[type="submit"][data-icon][data-icon-position="left-far"],
button[type="submit"][data-icon][data-icon-position="left-far"] {
    position: relative;
}

input[type="submit"][data-icon][data-icon-position="left-far"]::before,
button[type="submit"][data-icon][data-icon-position="left-far"]::before {
    content: attr(data-icon);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

/* Icon positioning - right near */
input[type="submit"][data-icon][data-icon-position="right-near"]::after,
button[type="submit"][data-icon][data-icon-position="right-near"]::after {
    content: attr(data-icon);
    margin-left: 8px;
    display: inline-block;
}

/* Icon positioning - right far */
input[type="submit"][data-icon][data-icon-position="right-far"],
button[type="submit"][data-icon][data-icon-position="right-far"] {
    position: relative;
}

input[type="submit"][data-icon][data-icon-position="right-far"]::after,
button[type="submit"][data-icon][data-icon-position="right-far"]::after {
    content: attr(data-icon);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
}

/* Icon animations - transition base */
input[type="submit"][data-icon]::before,
input[type="submit"][data-icon]::after,
button[type="submit"][data-icon]::before,
button[type="submit"][data-icon]::after {
    transition: all 0.3s ease;
}

/* Button Icon Animations */
.cf7vc-button-icon {
    transition: all 0.3s ease;
}

/* Bounce animation */
@keyframes cf7vc-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

input[type="submit"][data-icon-animation="bounce"]:hover::before,
input[type="submit"][data-icon-animation="bounce"]:hover::after,
button[type="submit"][data-icon-animation="bounce"]:hover::before,
button[type="submit"][data-icon-animation="bounce"]:hover::after,
button[type="submit"]:hover .cf7vc-icon-bounce {
    animation: cf7vc-icon-bounce 0.6s ease;
}

/* Rotate animation */
input[type="submit"][data-icon-animation="rotate"]:hover::before,
input[type="submit"][data-icon-animation="rotate"]:hover::after,
button[type="submit"][data-icon-animation="rotate"]:hover::before,
button[type="submit"][data-icon-animation="rotate"]:hover::after,
button[type="submit"]:hover .cf7vc-icon-rotate {
    transform: rotate(360deg);
}

/* Scale animation */
input[type="submit"][data-icon-animation="scale"]:hover::before,
input[type="submit"][data-icon-animation="scale"]:hover::after,
button[type="submit"][data-icon-animation="scale"]:hover::before,
button[type="submit"][data-icon-animation="scale"]:hover::after,
button[type="submit"]:hover .cf7vc-icon-scale {
    transform: scale(1.2);
}

/* Shake animation */
@keyframes cf7vc-icon-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

input[type="submit"][data-icon-animation="shake"]:hover::before,
input[type="submit"][data-icon-animation="shake"]:hover::after,
button[type="submit"][data-icon-animation="shake"]:hover::before,
button[type="submit"][data-icon-animation="shake"]:hover::after,
button[type="submit"]:hover .cf7vc-icon-shake {
    animation: cf7vc-icon-shake 0.4s ease;
}

/* Slide animation */
@keyframes cf7vc-icon-slide-right {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

@keyframes cf7vc-icon-slide-left {
    0% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

input[type="submit"][data-icon-animation="slide"]:hover::before,
button[type="submit"][data-icon-animation="slide"]:hover::before,
button[type="submit"]:hover .cf7vc-icon-slide {
    animation: cf7vc-icon-slide-right 0.5s ease;
}

input[type="submit"][data-icon-animation="slide"]:hover::after,
button[type="submit"][data-icon-animation="slide"]:hover::after {
    animation: cf7vc-icon-slide-left 0.5s ease;
}