.maple-slider-input {
    display: flex;
    align-items: center;
    gap: 10px;
}
.maple-slider-input .components-base-control {
    margin-bottom: 0;
}
.maple-slider-input .components-range-control {
    flex-grow: 1;
}
.maple-slider-input .components-text-control {
    width: 65px;
}
.maple-slider-input .components-text-control__input {
    text-align: center;
}

.maple-responsive-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
}

.maple-device-toggle {
    margin-left: auto;
}

.maple-device-toggle button {
    padding: 2px !important;
    height: 24px !important;
    min-width: 24px !important;
}

.maple-device-toggle button svg {
    width: 16px;
    height: 16px;
}

/* Responsive Flex Container */
.maple-flex-container {
    box-sizing: border-box;
    --flex-direction: row;
    --flex-wrap: nowrap;
    --justify-content: flex-start;
    --align-items: stretch;
    --align-content: stretch;
    --gap: 0;
    --width: 100%;
    --height: auto;
    --max-width: none;
    --min-height: auto;
    --aspect-ratio: auto;
    --margin: 0;
    --padding: 0;
    --background-image: none;
    --background-size: cover;
    --background-position: center center;
    --background-repeat: no-repeat;
    --width-tablet: var(--width);
    --width-mobile: var(--width-tablet);
    --height-tablet: var(--height);
    --height-mobile: var(--height-tablet);
    --max-width-tablet: var(--max-width);
    --max-width-mobile: var(--max-width-tablet);
    --min-height-tablet: var(--min-height);
    --min-height-mobile: var(--min-height-tablet);
    --aspect-ratio-tablet: var(--aspect-ratio);
    --aspect-ratio-mobile: var(--aspect-ratio-tablet);
    --margin-tablet: var(--margin);
    --margin-mobile: var(--margin-tablet);
    --padding-tablet: var(--padding);
    --padding-mobile: var(--padding-tablet);
    --gap-tablet: var(--gap);
    --gap-mobile: var(--gap-tablet);
    --flex-direction-tablet: var(--flex-direction);
    --flex-direction-mobile: var(--flex-direction-tablet);
    --flex-wrap-tablet: var(--flex-wrap);
    --flex-wrap-mobile: var(--flex-wrap-tablet);
    --justify-content-tablet: var(--justify-content);
    --justify-content-mobile: var(--justify-content-tablet);
    --align-items-tablet: var(--align-items);
    --align-items-mobile: var(--align-items-tablet);
    --align-content-tablet: var(--align-content);
    --align-content-mobile: var(--align-content-tablet);
    --background-image-tablet: var(--background-image);
    --background-image-mobile: var(--background-image-tablet);
    --background-size-tablet: var(--background-size);
    --background-size-mobile: var(--background-size-tablet);
    --background-position-tablet: var(--background-position);
    --background-position-mobile: var(--background-position-tablet);
    --background-repeat-tablet: var(--background-repeat);
    --background-repeat-mobile: var(--background-repeat-tablet);

    display: flex;
    flex-direction: var(--flex-direction);
    flex-wrap: var(--flex-wrap);
    justify-content: var(--justify-content);
    align-items: var(--align-items);
    align-content: var(--align-content);
    gap: var(--gap);
    width: var(--width);
    height: var(--height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: 0;
    aspect-ratio: var(--aspect-ratio);
    margin: var(--margin);
    padding: var(--padding);
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-repeat: var(--background-repeat);
}

@media (max-width: 1024px) {
    .maple-flex-container {
        flex-direction: var(--flex-direction-tablet, var(--flex-direction));
        flex-wrap: var(--flex-wrap-tablet, var(--flex-wrap));
        justify-content: var(--justify-content-tablet, var(--justify-content));
        align-items: var(--align-items-tablet, var(--align-items));
        align-content: var(--align-content-tablet, var(--align-content));
        gap: var(--gap-tablet, var(--gap));
        width: var(--width-tablet, var(--width));
        height: var(--height-tablet, var(--height));
        max-width: var(--max-width-tablet, var(--max-width));
        min-height: var(--min-height-tablet, var(--min-height));
        aspect-ratio: var(--aspect-ratio-tablet, var(--aspect-ratio));
        margin: var(--margin-tablet, var(--margin));
        padding: var(--padding-tablet, var(--padding));
        background-image: var(--background-image-tablet, var(--background-image));
        background-size: var(--background-size-tablet, var(--background-size));
        background-position: var(--background-position-tablet, var(--background-position));
        background-repeat: var(--background-repeat-tablet, var(--background-repeat));
    }
}

@media (max-width: 600px) {
    .maple-flex-container {
        flex-direction: var(--flex-direction-mobile, var(--flex-direction-tablet, var(--flex-direction)));
        flex-wrap: var(--flex-wrap-mobile, var(--flex-wrap-tablet, var(--flex-wrap)));
        justify-content: var(--justify-content-mobile, var(--justify-content-tablet, var(--justify-content)));
        align-items: var(--align-items-mobile, var(--align-items-tablet, var(--align-items)));
        align-content: var(--align-content-mobile, var(--align-content-tablet, var(--align-content)));
        gap: var(--gap-mobile, var(--gap-tablet, var(--gap)));
        width: var(--width-mobile, var(--width-tablet, var(--width)));
        height: var(--height-mobile, var(--height-tablet, var(--height)));
        max-width: var(--max-width-mobile, var(--max-width-tablet, var(--max-width)));
        min-height: var(--min-height-mobile, var(--min-height-tablet, var(--min-height)));
        aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio-tablet, var(--aspect-ratio)));
        margin: var(--margin-mobile, var(--margin-tablet, var(--margin)));
        padding: var(--padding-mobile, var(--padding-tablet, var(--padding)));
        background-image: var(--background-image-mobile, var(--background-image-tablet, var(--background-image)));
        background-size: var(--background-size-mobile, var(--background-size-tablet, var(--background-size)));
        background-position: var(--background-position-mobile, var(--background-position-tablet, var(--background-position)));
        background-repeat: var(--background-repeat-mobile, var(--background-repeat-tablet, var(--background-repeat)));
    }
}

/* Responsive Grid Container */
.maple-grid-container {
    box-sizing: border-box;
    --grid-columns: 3;
    --grid-gap: 20px;
    --row-gap: 20px;
    --width: 100%;
    --height: auto;
    --max-width: none;
    --min-height: 0;
    --aspect-ratio: auto;
    --margin: 0;
    --padding: 0;
    --background-image: none;
    --background-size: cover;
    --background-position: center center;
    --background-repeat: no-repeat;
    --grid-columns-tablet: var(--grid-columns);
    --grid-columns-mobile: var(--grid-columns-tablet);
    --grid-gap-tablet: var(--grid-gap);
    --grid-gap-mobile: var(--grid-gap-tablet);
    --row-gap-tablet: var(--row-gap);
    --row-gap-mobile: var(--row-gap-tablet);
    --width-tablet: var(--width);
    --width-mobile: var(--width-tablet);
    --height-tablet: var(--height);
    --height-mobile: var(--height-tablet);
    --max-width-tablet: var(--max-width);
    --max-width-mobile: var(--max-width-tablet);
    --min-height-tablet: var(--min-height);
    --min-height-mobile: var(--min-height-tablet);
    --aspect-ratio-tablet: var(--aspect-ratio);
    --aspect-ratio-mobile: var(--aspect-ratio-tablet);
    --margin-tablet: var(--margin);
    --margin-mobile: var(--margin-tablet);
    --padding-tablet: var(--padding);
    --padding-mobile: var(--padding-tablet);
    --background-image-tablet: var(--background-image);
    --background-image-mobile: var(--background-image-tablet);
    --background-size-tablet: var(--background-size);
    --background-size-mobile: var(--background-size-tablet);
    --background-position-tablet: var(--background-position);
    --background-position-mobile: var(--background-position-tablet);
    --background-repeat-tablet: var(--background-repeat);
    --background-repeat-mobile: var(--background-repeat-tablet);

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    row-gap: var(--row-gap);
    width: var(--width);
    height: var(--height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    aspect-ratio: var(--aspect-ratio);
    margin: var(--margin);
    padding: var(--padding);
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-repeat: var(--background-repeat);
}

@media (max-width: 1024px) {
    .maple-grid-container {
        grid-template-columns: repeat(var(--grid-columns-tablet, var(--grid-columns)), 1fr);
        gap: var(--grid-gap-tablet, var(--grid-gap));
        row-gap: var(--row-gap-tablet, var(--grid-gap-tablet));
        width: var(--width-tablet, var(--width));
        height: var(--height-tablet, var(--height));
        max-width: var(--max-width-tablet, var(--max-width));
        min-height: var(--min-height-tablet, var(--min-height));
        aspect-ratio: var(--aspect-ratio-tablet, var(--aspect-ratio));
        margin: var(--margin-tablet, var(--margin));
        padding: var(--padding-tablet, var(--padding));
        background-image: var(--background-image-tablet, var(--background-image));
        background-size: var(--background-size-tablet, var(--background-size));
        background-position: var(--background-position-tablet, var(--background-position));
        background-repeat: var(--background-repeat-tablet, var(--background-repeat));
    }
}

@media (max-width: 600px) {
    .maple-grid-container {
        grid-template-columns: repeat(var(--grid-columns-mobile, var(--grid-columns-tablet, var(--grid-columns))), 1fr);
        gap: var(--grid-gap-mobile, var(--grid-gap-tablet, var(--grid-gap)));
        row-gap: var(--row-gap-mobile, var(--grid-gap-mobile));
        width: var(--width-mobile, var(--width-tablet, var(--width)));
        height: var(--height-mobile, var(--height-tablet, var(--height)));
        max-width: var(--max-width-mobile, var(--max-width-tablet, var(--max-width)));
        min-height: var(--min-height-mobile, var(--min-height-tablet, var(--min-height)));
        aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio-tablet, var(--aspect-ratio)));
        margin: var(--margin-mobile, var(--margin-tablet, var(--margin)));
        padding: var(--padding-mobile, var(--padding-tablet, var(--padding)));
        background-image: var(--background-image-mobile, var(--background-image-tablet, var(--background-image)));
        background-size: var(--background-size-mobile, var(--background-size-tablet, var(--background-size)));
        background-position: var(--background-position-mobile, var(--background-position-tablet, var(--background-position)));
        background-repeat: var(--background-repeat-mobile, var(--background-repeat-tablet, var(--background-repeat)));
    }
}

.maple-unit-buttons {
    margin-bottom: 5px;
}

.maple-shorthand-spacing-control .components-text-control__input {
    text-align: center;
    padding: 2px !important;
    height: 30px !important;
}

.maple-shorthand-spacing-control .components-base-control__label {
    margin-bottom: 8px;
}

.maple-unit-buttons .components-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.maple-unit-buttons .components-button.is-small {
    height: 20px;
    padding: 0 4px;
    font-size: 10px;
    min-width: unset;
    line-height: 1;
}

.maple-control-with-units {
    margin-bottom: 16px;
}

/* Animations */
@keyframes maple-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes maple-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes maple-slide-in-top {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes maple-slide-in-bottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes maple-slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes maple-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes maple-slide-out-top {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}
@keyframes maple-slide-out-bottom {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}
@keyframes maple-slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}
@keyframes maple-slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes maple-blur-in {
    from { filter: blur(10px); opacity: 0; }
    to { filter: blur(0); opacity: 1; }
}

@keyframes maple-zoom-in {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes maple-zoom-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.5); opacity: 0; }
}

@keyframes maple-bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.maple-animate-on-hover:hover {
    animation-name: var(--animation-name);
    animation-duration: var(--animation-duration);
    animation-delay: var(--animation-delay);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: both;
}

/* For on-scroll trigger, usually requires JS to add .is-visible */
.maple-animate-on-scroll.is-visible {
    animation-name: var(--animation-name);
    animation-duration: var(--animation-duration);
    animation-delay: var(--animation-delay);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: both;
}