/* --- Editor-only styles --- */

/* ── Slider wrapper in editor ── */
.embla-slider.is-editor-preview {
    position:       relative;
    overflow:       visible;
    min-height:     120px;
    border:         1px solid rgba(0, 0, 0, 0.08);
    border-radius:  2px;
}

/* ── EDIT MODE — stacked slides ── */
.embla-slider.is-editor-preview:not(.is-previewing) .embla-edit-container > .wp-block {
    height:         auto;
    min-height:     180px;
    margin-bottom:  12px;
}

/* Slide label */
.embla-slide-label {
    position:       absolute;
    top:            6px;
    left:           6px;
    background:     rgba(0, 0, 0, 0.55);
    color:          #fff;
    font-size:      10px;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding:        2px 8px;
    border-radius:  2px;
    pointer-events: none;
    z-index:        10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height:    1.4;
}

/* Slide editor hint outline */
.embla__slide--editor {
    outline:        1px dashed rgba(0, 0, 0, 0.12);
    outline-offset: -1px;
    position:       relative;
    border-radius:  2px;
}

/* Hidden slide */
.embla__slide--hidden {
    opacity: 0.35;
}
.embla-hidden-badge {
    position:       absolute;
    top:            6px;
    right:          6px;
    background:     rgba(204, 0, 0, 0.75);
    color:          #fff;
    font-size:      10px;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding:        2px 8px;
    border-radius:  2px;
    pointer-events: none;
    z-index:        11;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Editor arrow indicators (visual only) */
.embla-editor-arrows {
    display:         flex;
    gap:             8px;
    justify-content: center;
    padding:         8px 0 4px;
    pointer-events:  none;
    opacity:         0.4;
}
.embla-editor-arrows .embla-btn {
    position:        static;
    transform:       none;
    width:           28px;
    height:          28px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.1);
}

/* Editor dots placeholder */
.embla-dots--editor {
    pointer-events: none;
}
.embla-dots__placeholder {
    font-size:   11px;
    color:       #949494;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style:  italic;
}

/* Block appender */
.embla-slider.is-editor-preview .block-list-appender {
    margin: 8px 16px;
}

/* ── Chip Picker (unified) ── */
.embla-chip-group {
    margin-bottom: 12px;
}
.embla-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}
.embla-chip {
    display:       inline-flex;
    align-items:   center;
    padding:       5px 12px;
    font-size:     12px;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height:   1;
    border-radius: 999px;
    border:        1px solid rgba(0, 0, 0, 0.12);
    background:    transparent;
    color:         #1e1e1e;
    cursor:        pointer;
    transition:    background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space:   nowrap;
}
.embla-chip:hover {
    background:   rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.2);
}
.embla-chip.is-selected {
    background:   var(--wp-admin-theme-color, #3858e9);
    border-color: var(--wp-admin-theme-color, #3858e9);
    color:        #fff;
}
.embla-chip.is-selected:hover {
    opacity: 0.9;
}

/* ── Panel utility styles ── */
.embla-section-label {
    display:        block;
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          #757575;
    margin-bottom:  6px;
}
.embla-separator {
    border:     none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin:     16px 0;
}
.embla-hint {
    font-size:     12px;
    color:         #757575;
    margin-top:    6px;
    margin-bottom: 0;
    line-height:   1.4;
}
.embla-mt-12 {
    margin-top: 12px;
}

/* ── Navigation Colors ToolsPanel inside PanelBody ── */
.embla-nav-colors-panel.components-tools-panel {
    padding: 16px 0;
}
.embla-nav-colors-panel.components-tools-panel > div:nth-child(2) {
    margin-top: 0;
}

/* ── PREVIEW MODE ── */
.embla-slider.is-previewing {
    border-color: rgba(0, 128, 0, 0.15);
    overflow:     hidden;
}
.embla-slider.is-previewing .embla-preview-wrapper {
    position: relative;
    overflow: hidden;
}
.embla-slider.is-previewing .embla__viewport {
    overflow: hidden;
}
.embla-slider.is-previewing .embla__container {
    display:                    flex;
    flex-wrap:                  nowrap;
    gap:                        var(--slide-gap, 0px);
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
}
.embla-slider.is-previewing .embla__container::-webkit-scrollbar {
    display: none;
}
.embla-slider.is-previewing .embla__container > .wp-block {
    flex:              0 0 calc(100% / var(--slides-per-view, 1));
    min-width:         0;
    scroll-snap-align: start;
    height:            auto;
    min-height:        var(--slide-min-height, 250px);
    margin:            0 !important;
}

/* When Embla is active it sets overflow:hidden inline on the viewport.
   Neutralise the scroll-snap fallback so it doesn't fight Embla transforms. */
.embla-slider.is-previewing .embla__viewport[style*="overflow"] .embla__container {
    scroll-snap-type: none;
    overflow-x:       hidden;
}

/* Preview dots */
.embla-dots--preview {
    display:         flex;
    justify-content: center;
    gap:             6px;
    padding:         8px 0;
    pointer-events:  none;
}

/* Preview arrows */
.embla-slider.is-previewing > .embla-btn {
    pointer-events: none;
    opacity:        0.5;
}

/* Preview nav bar */
.embla-slider.is-previewing .embla-nav-bar {
    pointer-events: none;
    opacity:        0.65;
}
.embla-slider.is-previewing .embla-nav-bar .embla-btn {
    opacity: 1;
}
.embla-slider.is-previewing .embla-nav-bar .embla-dots--preview {
    padding: 0;
    min-width: 0;
}
/* Counter inside nav-bar preview */
.embla-slider.is-previewing .embla-nav-bar .embla-counter {
    position:    static;
    flex-shrink: 0;
    opacity:     1;
}

/* Preview progress bar */
.embla-slider.is-previewing .embla-progress {
    pointer-events: none;
    opacity:        0.65;
}