.carousel-controls {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 1px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    user-select: none;
}

.carousel-controls__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-header-bg);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.carousel-controls__button + .carousel-controls__button {
    border-left: 1px solid var(--color-border);
}

.carousel-controls__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.carousel-controls__button:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-black);
}

.carousel-controls__button--prev:hover:not(:disabled) .carousel-controls__icon {
    transform: translateX(-2px);
}

.carousel-controls__button--next:hover:not(:disabled) .carousel-controls__icon {
    transform: translateX(2px);
}

.carousel-controls__button:active:not(:disabled) {
    transform: scale(0.96);
}

.carousel-controls__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.carousel-controls__button:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-controls__button,
    .carousel-controls__icon {
        transition: none;
    }
}