/* --- Editor Styles --- */
.sac-editor-container {
    border: 1px dashed #ccc;
    padding: 10px;
    position: relative;
    max-width: 100%; 
    box-sizing: border-box;
}
.sac-editor-label {
    background: #f0f0f0;
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 4px;
    text-transform: capitalize;
}
.sac-editor-container .wp-block-cover {
    margin-bottom: 20px; 
    opacity: 1 !important;
}

/* --- Front End Styles --- */
.wp-block-simple-animated-cover {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden; /* This cuts off any accidental spillover */
    box-sizing: border-box;
    width: 100%; /* Default to 100% of parent, let Theme handle alignfull */
}

/* NOTE: I removed the .alignfull rule here. 
   We now rely on your Theme to stretch the block. 
   This prevents the "100vw + scrollbar" width bug.
*/

/* --- Slide Logic --- */
.wp-block-simple-animated-cover > .wp-block-cover {
    grid-area: stack; 
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
    width: 100% !important; 
    
    /* DEFAULT: Force fit to container (for Fixed/Viewport modes) */
    height: 100% !important;
    min-height: inherit; 
    margin: 0 !important;
}

/* AUTO MODE OVERRIDE */
.wp-block-simple-animated-cover[data-height-mode="auto"] > .wp-block-cover {
    height: auto !important; 
    min-height: 400px; 
}

.wp-block-simple-animated-cover > .wp-block-cover.sac-active {
    opacity: 1;
    z-index: 2;
}

/* --- Navigation Arrows --- */
.sac-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
    border-radius: 4px;
}
.sac-nav:hover { background: rgba(0, 0, 0, 0.8); }
.sac-prev { left: 20px; }
.sac-next { right: 20px; }