.sifuim-image-responsive-container {
    position: relative;
    width: 100%;
    line-height: 0; /* Remove extra space below image */
}

.sifuim-image-responsive-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Gradient Mask Styles */
.sifuim-image-gradient-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Mask Positions */
.sifuim-image-gradient-mask.sifuim-mask-bottom {
    background: linear-gradient(to top, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%));
}

.sifuim-image-gradient-mask.sifuim-mask-top {
    background: linear-gradient(to bottom, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%));
}

.sifuim-image-gradient-mask.sifuim-mask-left {
    background: linear-gradient(to right, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%));
}

.sifuim-image-gradient-mask.sifuim-mask-right {
    background: linear-gradient(to left, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%));
}

.sifuim-image-gradient-mask.sifuim-mask-vertical {
    background: linear-gradient(to bottom, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%), transparent calc(100% - var(--mask-size, 30%)), var(--mask-color, #fff) 100%);
}

.sifuim-image-gradient-mask.sifuim-mask-horizontal {
    background: linear-gradient(to right, var(--mask-color, #fff) 0%, transparent var(--mask-size, 30%), transparent calc(100% - var(--mask-size, 30%)), var(--mask-color, #fff) 100%);
}

/* Badge Styles */
.sifuim-image-badge {
    position: absolute;
    z-index: 20;
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    pointer-events: none;
}

/* Badge Positioning */
.sifuim-image-badge.sifuim-badge-top-left {
    top: var(--badge-offset-y, 10px);
    left: var(--badge-offset-x, 10px);
}

.sifuim-image-badge.sifuim-badge-top-center {
    top: var(--badge-offset-y, 10px);
    left: 50%;
    transform: translateX(-50%);
}

.sifuim-image-badge.sifuim-badge-top-right {
    top: var(--badge-offset-y, 10px);
    right: var(--badge-offset-x, 10px);
}

.sifuim-image-badge.sifuim-badge-bottom-left {
    bottom: var(--badge-offset-y, 10px);
    left: var(--badge-offset-x, 10px);
}

.sifuim-image-badge.sifuim-badge-bottom-center {
    bottom: var(--badge-offset-y, 10px);
    left: 50%;
    transform: translateX(-50%);
}

.sifuim-image-badge.sifuim-badge-bottom-right {
    bottom: var(--badge-offset-y, 10px);
    right: var(--badge-offset-x, 10px);
}

/* Mobile Responsive Logic */
@media (max-width: 767px) {
    /* Auto Remove Padding Logic (Individual) */
    .sifuim-image-responsive-container.remove-mobile-padding-left {
        padding-left: 0 !important;
    }
    .sifuim-image-responsive-container.remove-mobile-padding-right {
        padding-right: 0 !important;
    }
    .sifuim-image-responsive-container.remove-mobile-padding-top {
        padding-top: 0 !important;
    }
    .sifuim-image-responsive-container.remove-mobile-padding-bottom {
        padding-bottom: 0 !important;
    }

    /* Legacy support if needed */
    .sifuim-image-responsive-container.remove-mobile-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Force Full Width Logic (Negative Margins) */
    .sifuim-image-responsive-container.force-full-width-mobile {
        width: auto;
        margin-left: var(--mobile-negative-margin, -20px);
        margin-right: var(--mobile-negative-margin, -20px);
        max-width: none !important; /* Override Elementor max-width constraints */
    }
    
    .sifuim-image-responsive-container.force-full-width-mobile .sifuim-image-responsive-img {
        width: 100%; /* Ensure image fills the new expanded width */
        max-width: none !important;
    }
}