/**
 * 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;
}

/* Ensure icons show even when disabled */
input[type="submit"][data-icon][disabled]::before,
input[type="submit"][data-icon][disabled]::after,
button[type="submit"][data-icon][disabled]::before,
button[type="submit"][data-icon][disabled]::after {
    content: attr(data-icon);
    display: inline-block;
}

/* Button wrapper for input[type="submit"] with icons */
.cf7vc-button-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}

.cf7vc-button-wrapper input[type="submit"] {
    position: relative;
    /* Don't reset margin - respect the user's button margin settings */
}

.cf7vc-button-icon {
    transition: all 0.3s ease;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* For absolute positioned icons (left-far, right-far), use flexbox centering */
.cf7vc-button-wrapper .cf7vc-button-icon[style*="position: absolute"] {
    /* Flexbox parent (wrapper) will center this vertically */
    top: auto !important;
    transform: none !important;
}

/* Icon animations for wrapper approach */
.cf7vc-button-wrapper:hover .cf7vc-icon-bounce {
    animation: cf7vc-icon-bounce 0.6s ease;
}

.cf7vc-button-wrapper:hover .cf7vc-icon-rotate {
    transform: rotate(360deg);
}

.cf7vc-button-wrapper:hover .cf7vc-icon-scale {
    transform: scale(1.2);
}

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

.cf7vc-button-wrapper:hover .cf7vc-icon-slide {
    animation: cf7vc-icon-slide 0.6s ease;
}

/* 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 */
@keyframes cf7vc-icon-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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 {
    animation: cf7vc-icon-rotate 0.6s ease;
}

/* Scale animation */
@keyframes cf7vc-icon-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

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 {
    animation: cf7vc-icon-scale 0.6s ease;
}

/* 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;
}

/* Button Hover Animations */
.cf7-custom-form input[type="submit"].cf7vc-button-hover-lift:hover,
.cf7-custom-form button[type="submit"].cf7vc-button-hover-lift:hover {
    transform: translateY(-4px) !important;
}

.cf7-custom-form input[type="submit"].cf7vc-button-hover-grow:hover,
.cf7-custom-form button[type="submit"].cf7vc-button-hover-grow:hover {
    transform: scale(1.05) !important;
}

.cf7-custom-form input[type="submit"].cf7vc-button-hover-shrink:hover,
.cf7-custom-form button[type="submit"].cf7vc-button-hover-shrink:hover {
    transform: scale(0.95) !important;
}

@keyframes pulse-animation {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.cf7-custom-form input[type="submit"].cf7vc-button-hover-pulse:hover,
.cf7-custom-form button[type="submit"].cf7vc-button-hover-pulse:hover {
    animation: pulse-animation 1s ease-in-out infinite !important;
}