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

/*
 * Card description: full width, centered.
 * RichEditor/TipTap often persists inline style="text-align: left" on <p> etc.; those beat normal
 * CSS until we use !important so live x-html updates stay centered like the initial render.
 */
#preview-card-description {
    max-width: none !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

#preview-card-description * {
    text-align: center !important;
}

#preview-card-description ul,
#preview-card-description ol {
    list-style-position: inside;
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block;
    text-align: center !important;
}

#preview-card-description li {
    text-align: center !important;
}

#preview-card-description blockquote {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/*
 * Footer text (RichEditor HTML): same constraints as card description — full width, centered,
 * inline TipTap text-align must not win after x-html updates.
 */
#preview-footer-text {
    max-width: none !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

#preview-footer-text * {
    text-align: center !important;
}

#preview-footer-text ul,
#preview-footer-text ol {
    list-style-position: inside;
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block;
    text-align: center !important;
}

#preview-footer-text li {
    text-align: center !important;
}

#preview-footer-text blockquote {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* 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: color 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out, border-color 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%;
}