/* Live Update Flash Effect - subtle feedback for instant updates */
.field-flash {
    animation: liveUpdateFlash 0.3s ease-out;
}

@keyframes liveUpdateFlash {
    0% {
        filter: brightness(1.3);
        transform: scale(1.01);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/* Smooth transitions for all preview elements */
#profile-name,
#preview-position,
#preview-card-description,
#preview-footer-text,
#preview-card-color-box,
#preview-landing-background,
#preview-landing-content,
#preview-footer,
.preview-header-button,
.preview-phone-container,
.preview-email-container,
.preview-whatsapp-container,
.sticky-button {
    transition: all 0.2s ease-out;
}

.field-highlight {
    animation: highlightPulse 1.5s ease-in-out;
    position: relative;
}

@keyframes highlightPulse {
    0% {
        background-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        transform: scale(1);
    }
    50% {
        background-color: rgba(59, 130, 246, 0.5);
        box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.5);
        transform: scale(1.02);
    }
    100% {
        background-color: rgba(59, 130, 246, 0.2);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

.field-highlight::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(59, 130, 246, 0.6);
    border-radius: 8px;
    animation: borderPulse 1.5s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

.field-highlight-text::after {
    display: none;
}

.field-highlight-text {
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: none;
}

@keyframes borderPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

#profile-name.field-highlight,
#preview-position.field-highlight {
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

#preview-footer-text.field-highlight {
    padding: 0;
    animation: none;
}

#preview-card-description.field-highlight {
    padding: 4px 8px;
    border-radius: 6px;
}

#address-information.field-highlight {
    padding: 4px 8px;
    border-radius: 6px;
}

.preview-phone-container.field-highlight,
.preview-email-container.field-highlight,
.preview-whatsapp-container.field-highlight,
[data-button-type="phone"].field-highlight,
[data-button-type="email"].field-highlight,
[data-button-type="whatsapp"].field-highlight,
#preview-custom-buttons.field-highlight,
#preview-special-buttons.field-highlight,
#preview-file-buttons.field-highlight,
#preview-custom-buttons > div.field-highlight,
#preview-special-buttons > div.field-highlight,
#preview-file-buttons > div.field-highlight {
    padding: 4px;
    border-radius: 12px;
    display: inline-block;
}

#preview-profile-photo-container.field-highlight,
#preview-profile-photo.field-highlight,
#preview-cover-photo.field-highlight,
#preview-logo.field-highlight {
    padding: 4px;
    border-radius: 12px;
    display: inline-block;
}

#preview-qr-code-container.field-highlight,
#preview-qr-code.field-highlight {
    padding: 4px;
    border-radius: 12px;
}

#preview-card-color-box.field-highlight {
    padding: 4px;
    border-radius: 12px;
}

#preview-background.field-highlight {
    padding: 4px;
    border-radius: 12px;
}

#preview-landing-background.field-highlight::after,
#preview-landing-content.field-highlight::after {
    position: relative;
    border-radius: 12px;
}

#preview-landing-content.field-highlight {
    padding: 4px;
    border-radius: 12px;
}

#preview-main-buttons.field-highlight {
    padding: 4px;
    border-radius: 12px;
}

#preview-footer.field-highlight {
    padding: 4px 8px;
    border-radius: 12px;
}

.preview-header-button.field-highlight {
    padding: 4px;
    border-radius: 50%;
}