/* 
 * Stili per il blocco MultiLayer Image and Text
 * Version: 1.0.0
 * Ultimo aggiornamento: Test modifica
 */

/* Stili per l'editor */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block {
    position: relative;
    padding: 0 20px; /* nessuna padding verticale per allineare y con il front-end */
    background-color: transparent !important; /* Forza trasparente in editor */
}

/* Background nel editor per fixed-width */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    background-color: var(--container-background-color) !important;
}

/* Regola specifica per l'editor */
.editor-styles-wrapper [data-fit-mode="free"] {
    top: var(--layer-top-calc) !important;
    /* Aggiunta trasformazione per centratura vera quando necessario */
    transform: var(--layer-transform, none) !important;
}

/* Quick intro notice styling (editor only) */
.mlitb-quick-intro {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    border-left: 4px solid #007cba !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    padding: 16px 18px !important;
    margin-bottom: 18px !important;
    color: #0a213a !important;
}

.mlitb-quick-intro strong {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
}

.mlitb-quick-intro ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mlitb-quick-intro li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.mlitb-quick-intro li:last-child {
    margin-bottom: 0;
}

.mlitb-quick-intro .dashicons {
    font-size: 18px;
    color: #005b99;
    margin-top: 2px;
}

.mlitb-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.mlitb-quick-actions__item {
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid rgba(0, 92, 153, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.mlitb-quick-actions__item p {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 12px;
    color: #1f2d3d;
}

.mlitb-quick-actions__item--accent {
    background: linear-gradient(135deg, #e6f3ff 0%, #ffffff 100%);
    border-color: rgba(0, 92, 153, 0.2);
}

.mlitb-quick-actions__item--compact {
    background: linear-gradient(145deg, #ffffff 0%, #f0fbff 100%);
    border-color: rgba(0, 92, 153, 0.22);
}

.mlitb-quick-actions__item:hover,
.mlitb-quick-actions__item:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 92, 153, 0.28);
}

.mlitb-quick-actions__item button {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mlitb-quick-actions__item button:focus-visible {
    outline: 2px solid #1c6edc;
    outline-offset: 2px;
}

.mlitb-quick-actions__item button:hover {
    transform: translateX(2px);
}

.mlitb-tooltip {
    position: relative;
    display: inline-flex;
}

.mlitb-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    max-width: 220px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(5, 36, 65, 0.92);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 24px rgba(5, 36, 65, 0.25);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 50;
    text-align: center;
    white-space: normal;
}

.mlitb-tooltip:hover::after,
.mlitb-tooltip:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mlitb-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(5, 36, 65, 0.92) transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 51;
}

.mlitb-tooltip:hover::before,
.mlitb-tooltip:focus-within::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.mlitb-quick-help {
    margin-top: 18px;
    background: linear-gradient(145deg, rgba(4, 36, 70, 0.12), rgba(8, 26, 52, 0.06));
    border: 1px solid rgba(4, 36, 70, 0.14);
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(4, 36, 70, 0.08);
}

.mlitb-quick-help__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #0a1f38;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mlitb-quick-help__toggle:hover,
.mlitb-quick-help__toggle:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.mlitb-quick-help__icon {
    font-size: 16px;
}

.mlitb-quick-help__chevron {
    font-size: 11px;
    opacity: 0.7;
}

.mlitb-quick-help__content {
    padding: 0 18px 18px;
    display: grid;
    gap: 12px;
}

.mlitb-quick-help__content ol {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    font-size: 12px;
}

.mlitb-quick-help__content ol strong {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    color: #041730;
}

.mlitb-quick-help__content ol span {
    color: #2a3f57;
    font-size: 12px;
    line-height: 1.5;
}

.mlitb-quick-help__hint {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #0a1f38;
    opacity: 0.8;
}

.mlitb-quick-actions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

.mlitb-quick-actions__label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #0b2a4b;
}

.mlitb-quick-actions__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mlitb-quick-actions__badge--hero {
    background: linear-gradient(135deg, #0b5fff, #3ea6ff);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(11, 95, 255, 0.25);
}

.mlitb-quick-actions__badge--new {
    background: linear-gradient(135deg, #ffe680, #ffd452);
    color: #563900;
    box-shadow: 0 6px 14px rgba(255, 214, 82, 0.35);
}

.mlitb-quick-actions__divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px;
}

.mlitb-quick-actions__divider::before,
.mlitb-quick-actions__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 92, 153, 0), rgba(0, 92, 153, 0.3), rgba(0, 92, 153, 0));
}

.mlitb-quick-actions__divider span {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 10px;
    color: rgba(11, 41, 66, 0.7);
}

.mlitb-demo-heading,
.mlitb-demo-body,
.mlitb-demo-cta {
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(4, 32, 60, 0.22);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background-color 0.28s ease, color 0.28s ease;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
}

.mlitb-demo-heading {
    letter-spacing: 0.01em;
}

.mlitb-demo-body {
    box-shadow: 0 10px 24px rgba(4, 32, 60, 0.18);
}

.mlitb-demo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(8, 24, 46, 0.24);
    border-radius: 999px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

@media (hover: hover) {
    .mlitb-demo-heading:hover,
    .mlitb-demo-body:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(4, 32, 60, 0.25);
    }

    .mlitb-demo-cta:hover {
        transform: translateY(-3px) scale(1.01);
        background: rgba(255, 255, 255, 0.98) !important;
        color: #041730 !important;
        box-shadow: 0 18px 30px rgba(8, 24, 46, 0.26);
    }
}

.mlitb-demo-cta:focus-visible,
.mlitb-demo-heading:focus-visible,
.mlitb-demo-body:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .mlitb-quick-actions__item,
    .mlitb-quick-actions__item button,
    .mlitb-demo-heading,
    .mlitb-demo-body,
    .mlitb-demo-cta {
        transition: none !important;
    }
}

.mlitb-preset-toast {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(3, 19, 38, 0.82);
    color: #ffffff;
    box-shadow: 0 18px 46px rgba(3, 19, 38, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    text-align: center;
    animation: mlitbToastSlide 0.35s ease-out, mlitbToastFadeOut 0.6s ease-out 2.1s forwards;
    z-index: 25;
}

.mlitb-preset-toast__title {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}

.mlitb-preset-toast__copy {
    font-size: 12px;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.mlitb-preset-toast--compact {
    background: rgba(10, 36, 64, 0.86);
}

.mlitb-preset-toast--hero .mlitb-preset-toast__title {
    color: #ffe7b4;
}

.mlitb-preset-toast--compact .mlitb-preset-toast__title {
    color: #d8f0ff;
}

@keyframes mlitbToastSlide {
    from {
        transform: translateX(-50%) translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes mlitbToastFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

.mlitb-demo-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(4, 23, 48, 0.78);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 18px 40px rgba(4, 23, 48, 0.35);
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    pointer-events: none;
}

.mlitb-demo-badge__title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}

.mlitb-demo-badge__hint {
    font-size: 11px;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.mlitb-demo-badge--compact {
    background: rgba(8, 32, 46, 0.78);
}

.mlitb-demo-badge--compact .mlitb-demo-badge__title {
    color: #d8f0ff;
}

.mlitb-demo-badge--hero .mlitb-demo-badge__title {
    color: #ffe7b4;
}

.mlitb-splash-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #0b5fff 0%, #3ea6ff 100%);
    border-radius: 18px;
    padding: 16px 18px;
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(11, 95, 255, 0.25);
    margin-bottom: 18px;
}

.mlitb-splash-hero__icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.mlitb-splash-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mlitb-splash-hero__eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
    font-weight: 600;
}

.mlitb-splash-hero__headline {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.editor-styles-wrapper .mlitb-splash-hero {
    margin-top: 12px;
}

.mlitb-demo-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.28), transparent 48%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.22), transparent 52%);
    mix-blend-mode: screen;
    opacity: 0.18;
    animation: mlitbGlowPulse 8s ease-in-out infinite;
}

.mlitb-demo-glow--compact {
    background: radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.28), transparent 46%),
                radial-gradient(circle at 40% 74%, rgba(255, 255, 255, 0.2), transparent 55%);
}

/* Selezione layer nel canvas */
.multi-layer-container .mlitb-layer-selection-toast {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 9999;
    background: rgba(10, 24, 46, 0.88);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 12px 24px rgba(8, 24, 46, 0.25);
    pointer-events: none;
    animation: mlitbFadeSlideIn 220ms ease-out;
}

.mlitb-layer-selection-toast__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 10px;
}

@keyframes mlitbFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.multi-layer-container .image-layer-wrapper::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 8px;
    border: 2px solid rgba(82, 125, 245, 0);
    box-shadow: 0 0 0 0 rgba(82, 125, 245, 0);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
}

.multi-layer-container .image-layer-wrapper.is-selected::after {
    border-color: rgba(82, 125, 245, 0.9);
    box-shadow: 0 0 0 4px rgba(82, 125, 245, 0.2);
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: inherit;
}

.multi-layer-container .image-layer-wrapper:focus-visible::after {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 5px rgba(82, 125, 245, 0.45);
}

.mlitb-layer-panel.is-selected {
    position: relative;
}

.mlitb-layer-panel.is-selected::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(82, 125, 245, 0.12), rgba(82, 125, 245, 0));
    border-radius: 12px;
    pointer-events: none;
    z-index: -1;
}

.mlitb-layer-panel__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.mlitb-layer-panel__toggle.components-button {
    border-radius: 999px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mlitb-layer-panel__label {
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.mlitb-layer-panel.is-selected .mlitb-layer-panel__label {
    color: #1a73e8;
}

.mlitb-layer-panel__heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mlitb-layer-panel__preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.mlitb-layer-panel__preview-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: rgba(12, 18, 28, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.mlitb-layer-panel__preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mlitb-layer-panel__preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(12, 18, 28, 0.65);
}

.mlitb-layer-panel__preview-textbadge {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: rgba(12, 18, 28, 0.8);
}

.mlitb-layer-panel__preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.mlitb-layer-panel__preview-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(12, 18, 28, 0.58);
}

.mlitb-layer-panel__preview-detail {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(12, 18, 28, 0.85);
    word-break: break-word;
}

.mlitb-layer-panel__text-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.mlitb-layer-panel__preview-textbox {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(82, 125, 245, 0.12);
    border: 1px solid rgba(82, 125, 245, 0.25);
    color: rgba(12, 18, 28, 0.9);
    font-size: 13px;
    line-height: 1.55;
    min-height: 48px;
    word-break: break-word;
}

.mlitb-layer-panel__preview-textbox.is-empty {
    background: rgba(12, 18, 28, 0.04);
    border-color: rgba(12, 18, 28, 0.08);
    color: rgba(12, 18, 28, 0.6);
    font-style: italic;
}

.mlitb-layer-panel__toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(82, 125, 245, 0.1);
    border-radius: 999px;
    padding: 4px;
}

.mlitb-layer-panel__toolbar .components-button {
    border-radius: 999px;
    height: 26px;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mlitb-layer-panel__toolbar .components-button[disabled] {
    opacity: 0.35;
}

.mlitb-layer-panel__hint {
    margin-top: 4px;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(12, 18, 28, 0.72);
}

@keyframes mlitbGlowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.16;
    }
    45% {
        transform: scale(1.05);
        opacity: 0.26;
    }
    70% {
        transform: scale(0.98);
        opacity: 0.12;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mlitb-demo-glow {
        animation: none;
    }
}

/* Stili comuni per editor e front-end */
.wp-block-nick-digital-plugins-multilayer-image-text-block {
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 auto !important; /* Auto per centrare quando è a larghezza fissa */
    overflow: visible !important;
    background-color: var(--general-background-color, transparent) !important;
    transition: background-color 0.01s; /* Forza reflow */
    will-change: background-color; /* Forza il browser a tenere traccia dello stile */
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
    position: relative;
    width: 100%;
    overflow: hidden !important; /* Tornato a hidden per impedire che gli elementi escano dal contenitore */
    display: block !important;
    box-sizing: border-box !important;
    /* Rimosse le proprietà di trasformazione 3D che causavano la discrepanza */
    /* transform-style: preserve-3d !important;
    perspective: 1000px !important; */
    /* Supporto per il tema corrente */
    border-radius: var(--wp--custom--border-radius, 0) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .layers-wrapper {
    position: absolute !important;
     top: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

/* Allineamento frontend MultiLayer */
.wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-align-wrapper {
    display: flex;
    width: 100%;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="right"] .multi-layer-align-wrapper {
    justify-content: flex-end;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="center"] .multi-layer-align-wrapper {
    justify-content: center;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="left"] .multi-layer-align-wrapper {
    justify-content: flex-start;
}

/* Base layer styles */
.wp-block-nick-digital-plugins-multilayer-image-layer {
    grid-area: 1/1 !important;
    align-self: start !important;
    justify-self: start !important;
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer {
    grid-area: 1/1 !important;
    align-self: start !important;
    justify-self: start !important;
    position: absolute !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* Non-free fit mode */
.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]) {
    /* width: 100% !important; */
    height: 100% !important;
    overflow: hidden !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer:not([data-fit-mode="free"]) {
    /* width: 100% !important; */
    height: auto !important;
    /* top: 0 !important; */
    /* left: 0 !important; */
    overflow: hidden !important;
    max-height: 100%;
    /* Il testo in eccesso verrà semplicemente nascosto, senza ellissi multilinea */
    white-space: pre-wrap;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]) img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img {
    transform: translate(var(--x-pos, 0), var(--y-pos, 0)) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img[style*="cover"],
.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img[style*="fill"] {
    object-position: center !important;
}

/* Free fit mode */
.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] {
    overflow: visible !important;
    position: absolute !important;
    /* Utilizziamo le variabili CSS per dimensioni e posizionamento */
    width: var(--layer-width) !important;
    height: var(--layer-height) !important;
    left: var(--layer-left) !important;
    top: var(--layer-top) !important;
    transform: none !important; /* Previene trasformazioni indesiderate */
}

.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] img,
.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] .mlitb-text-layer-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    max-width: none !important;
    max-height: none !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .button-container {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

/* Supporto per allineamenti */
.wp-block-nick-digital-plugins-multilayer-image-text-block.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.alignwide {
    width: calc(100% + 4rem) !important;
    max-width: calc(100% + 4rem) !important;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-left {
    float: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right {
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Gestione del colore di sfondo */


/* Applica il colore di sfondo anche in modalità FIXED */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"]:not(.has-background) .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* Modalità FULL WIDTH: solo se non c'è la palette */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
    position: relative;
}

/* Modalità FIXED: solo se non c'è la palette */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
}


/* Permetti a WordPress di gestire il colore della palette in full width 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"].has-background {
    background-color: unset !important;
} */

/* Applica il colore tramite variabile CSS solo se NON c'è la palette di WordPress */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
    position: relative;
}

/* Assicura che il container interno erediti il colore */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] .multi-layer-container {
    background-color: inherit !important;
}

/* Stile specifico per l'editor */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] {
    background-color: var(--general-background-color, transparent) !important;
}

/* Rimuove eventuali sfondi bianchi sovrapposti */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] > div:not(.multi-layer-container) {
    background-color: transparent !important;
}



/* Applica il colore di sfondo anche al fixed-bg-layer e overlay, usando la variabile CSS */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer,
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .bg-overlay-element {
    background-color: var(--container-background-color, transparent) !important;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer[style],
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .bg-overlay-element[style] {
    background-color: var(--container-background-color, transparent) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    min-height: var(--container-height, 400px);
    box-sizing: border-box;
}



.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer {
    background-color: var(--container-background-color, transparent) !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 780px) {
    .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer {
        display: none !important;
    }
}

/* Nuova regola per applicare il colore di sfondo tramite variabile CSS */

/* Wrapper flex per frontend */
/* Il wrapper principale resta full-width: l'allineamento è gestito dal wrapper interno */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-align-wrapper {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    box-sizing: border-box;
    background-color: var(--container-background-color, transparent);
}
/* Supporto responsive per colonne e gruppi */
@media (max-width: 781px) {
    .wp-block-column .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
        padding-bottom: 50% !important; /* Aspect ratio 1:1 */
    }
}

@media (max-width: 599px) {
    .wp-block-column .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
        padding-bottom: 50% !important; /* Aspect ratio 1:1 */
    }
    .wp-block-nick-digital-plugins-multilayer-image-text-block.alignwide,
    .wp-block-nick-digital-plugins-multilayer-image-text-block.alignfull {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Editor specific styles */
.wp-block-nick-digital-plugins-multilayer-image-text-block .components-placeholder {
    min-height: 200px !important;
    background: transparent !important;
}

/* Supporto per il tema corrente nei pulsanti */
.wp-block-nick-digital-plugins-multilayer-image-text-block .components-button {
    background: var(--wp--preset--color--background, #fff) !important;
    color: var(--wp--preset--color--foreground, #000) !important;
    border-color: var(--wp--preset--color--foreground, #000) !important;
}

/* === OVERRIDE FINALE PER L'EDITOR === */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[class*="has-"] {
    background-color: transparent !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* 
 * FIX: Altezza layer assoluti (es: .fixed-bg-layer) in editor Gutenberg
 * In editor (WordPress/Gutenberg), i layer assoluti vuoti possono collassare a height: 0
 * anche se il contenitore ha height > 0, a causa di override o rendering React.
 * Questa regola forza il layer a riempire il parent SOLO in editor, senza effetti collaterali in frontend.
 * Da riutilizzare per ogni blocco con layer assoluti che deve essere visibile in editor!
 */

.editor-styles-wrapper .fixed-bg-layer {
    height: 100% !important;
    min-height: 1px !important;
}

.editor-styles-wrapper 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] 
.multi-layer-container 
.fixed-bg-layer {
    background-color: var(--container-background-color, transparent) !important;
    height: 100% !important;
    min-height: 1px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.editor-styles-wrapper 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] 
.multi-layer-container {
    position: relative !important;
}

.editor-styles-wrapper .fixed-bg-layer {
    width: 100% !important;
    min-width: 1px !important;
    height: 100% !important;
    min-height: 1px !important;
}

/* Allineamento blocco multilayer in editor Gutenberg */
/* Allineamento del wrapper interno in editor Gutenberg */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    margin-left: auto !important;
    margin-right: 0 !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-align-wrapper {
    width: fit-content !important;
    max-width: 100% !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    width: 100% !important;
    /* display: block !important; */
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    align-self: center !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    align-self: flex-end !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    align-self: flex-start !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    text-align: center !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    text-align: right !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    text-align: left !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    display: block !important;
    width: var(--container-width, 400px);
    margin-left: auto;
    margin-right: auto;
}

/* Forza il colore di sfondo del container SOLO in editor */
.editor-styles-wrapper .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* Forza il colore custom del blocco in modalità fixed anche in presenza di colore wrapper Gutenberg (solo frontend) */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer,
.wp-block-nick-digital-plugins-multilayer-text-layer > div {
    box-sizing: border-box;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
}

/* Outline tratteggiato solo in editor Gutenberg */
.block-editor-block-list__block .wp-block-nick-digital-plugins-multilayer-text-layer > div {
    outline: 2px dashed #007cba;
    outline-offset: -2px;
}

/* Nessun outline in frontend */
.wp-block-nick-digital-plugins-multilayer-text-layer > div {
    outline: none;
}