.svgplus-widget {
    display: inline-block !important; /* Change to inline-block */
    max-width: 100%; /* Use max-width instead of width */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* For resize handles */
}

.svgplus-widget img {
    display: block; /* Remove any inline spacing */
    width: 100%;
    height: auto;
    object-fit: contain; /* Maintain aspect ratio */
}

/* SVG Resize Handles */
.svgplus-resize-wrapper {
    position: relative;
    display: inline-block;
}

.svgplus-resize-handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.svgplus-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #007cba;
    pointer-events: all;
    z-index: 1000;
}

/* Position the handles */
.svgplus-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.svgplus-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.svgplus-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.svgplus-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
.svgplus-handle.n { top: -5px; left: 50%; margin-left: -5px; cursor: n-resize; }
.svgplus-handle.s { bottom: -5px; left: 50%; margin-left: -5px; cursor: s-resize; }
.svgplus-handle.e { right: -5px; top: 50%; margin-top: -5px; cursor: e-resize; }
.svgplus-handle.w { left: -5px; top: 50%; margin-top: -5px; cursor: w-resize; }

/* Animation on hover */
.svgplus-animate-hover img {
    transition: transform 0.3s ease;
}

.svgplus-animate-hover:hover img {
    transform: scale(1.1);
}

/* Looping animation */
.svgplus-animate-loop img {
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Additional custom CSS can be added via settings */