.masked-container {
    position: relative;
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.masked-container-placeholder {
    padding: 20px;
    text-align: center;
    background-color: rgba(0,0,0,0.05);
    border: 2px dashed #ccc;
    border-radius: 3px;
    font-size: 14px;
    color: #555;
}

/* Ensure mask properties are applied correctly */
.masked-container {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Style for when container has content */
.masked-container .elementor-widget {
    width: 100%;
}

/* Base container styles */
.elementor-widget-masked-container {
    width: 100%;
    position: relative;
}

/* Ensure mask properties are applied correctly */
.elementor-mask-yes {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    display: flex;
    align-items: stretch;
}

/* Fix for mask sizing and cover system */
.elementor-mask-yes[style*="mask-size: cover"],
.elementor-mask-yes[style*="-webkit-mask-size: cover"] {
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    overflow: hidden !important;
}

/* Force proper height in preview mode */
body:not(.elementor-editor-active) .elementor-mask-yes[style*="mask-size: cover"] {
    height: var(--mask-height, 400px) !important;
    min-height: var(--mask-height, 400px) !important;
}

body:not(.elementor-editor-active) .elementor-mask-yes[style*="mask-size: cover"] > .elementor-container {
    height: 100% !important;
    min-height: 100% !important;
}

/* Aspect ratio handling */
.elementor-mask-yes[style*="aspect-ratio"] {
    height: auto !important;
    min-height: 0 !important;
}

.elementor-mask-yes[style*="aspect-ratio"] > .elementor-container {
    height: 100% !important;
    min-height: 0 !important;
}

/* Force cover mode */
.elementor-mask-yes.elementor-mask-force-cover {
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    width: 100% !important;
    height: var(--mask-height, 400px) !important;
}

/* Background handling */
.elementor-mask-yes .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
}

/* Fix mask sizing relative to background */
.elementor-mask-yes.elementor-section {
    overflow: hidden;
    position: relative;
}

/* Ensure proper height calculation */
.elementor-editor-active .elementor-mask-yes {
    min-height: var(--mask-height, 400px);
}

/* Preview mode specific fixes */
@media (min-width: 768px) {
    body:not(.elementor-editor-active) .elementor-mask-yes[style*="mask-size: cover"] {
        min-height: var(--mask-height, 400px) !important;
    }
}

/* Custom height handling */
.elementor-mask-yes[style*="height"] {
    height: var(--mask-height) !important;
    min-height: var(--mask-height) !important;
}

.elementor-mask-yes[style*="height"] > .elementor-container {
    height: 100% !important;
    min-height: 100% !important;
}

/* Ensure container and background sizing match */
.elementor-mask-yes > .elementor-container {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.elementor-mask-yes > .elementor-container > .elementor-column {
    height: 100%;
}

/* Fix background and mask alignment */
.elementor-mask-yes .elementor-background-overlay,
.elementor-mask-yes .elementor-background-video-container {
    width: 100%;
    height: 100%;
}

/* Cover mode specific fixes */
.elementor-mask-yes[style*="mask-size: cover"] .elementor-background-overlay,
.elementor-mask-yes[style*="-webkit-mask-size: cover"] .elementor-background-overlay {
    background-size: cover !important;
}

/* Container sizing for different mask modes */
.elementor-mask-yes[style*="mask-size: contain"] {
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
}

.elementor-mask-yes[style*="mask-size: auto"] {
    -webkit-mask-size: auto !important;
    mask-size: auto !important;
}

/* Fix mask sizing relative to background */
.elementor-mask-yes.elementor-section {
    overflow: hidden;
    position: relative;
}

.elementor-mask-yes .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
}

/* Ensure mask image covers full content in cover mode */
.elementor-mask-yes[style*="mask-size: cover"] {
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    height: 100% !important;
    min-height: inherit !important;
}

.elementor-mask-yes[style*="mask-size: cover"] > .elementor-container {
    height: 100% !important;
    min-height: inherit !important;
}

/* Image and video background fixes */
.elementor-mask-yes .elementor-background-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.elementor-mask-yes .elementor-background-video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Force background to maintain aspect ratio */
.elementor-mask-yes .elementor-background-overlay,
.elementor-mask-yes .elementor-background-slideshow,
.elementor-mask-yes .elementor-background-video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Keep aspect ratio for video backgrounds */
.elementor-mask-yes .elementor-background-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preview improvements */
.elementor-control-media__preview {
    width: 100%;
    height: auto;
    min-height: 100px;
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Preview fixes */
.elementor-control-media-preview {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.elementor-control-media-area {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Apply mask properties only when mask is active */
.elementor-widget-masked-container.elementor-mask-active {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Ensure proper container behavior */  
.elementor-widget-masked-container .elementor-widget-container {
    position: relative;
    width: 100%;
    overflow: visible !important;
}

/* Editor styles */
.elementor-editor-active .elementor-widget-masked-container:empty {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border: 2px dashed #ccc;
    border-radius: 3px;
}

.elementor-editor-active .elementor-widget-masked-container:empty::before {
    content: "Masked Container";
    font-size: 14px;
    color: #555;
}

/* Editor placeholder styles */
.elementor-editor-active .elementor-widget-masked-container:not(:has(.elementor-element)) {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border: 2px dashed #ccc;
    border-radius: 3px;
}

.elementor-editor-active .elementor-widget-masked-container:not(:has(.elementor-element))::before {
    content: "Masked Container: Drop elements here";
    font-size: 14px;
    color: #555;
}

.elementor-mask-enabled {
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
}

/* Ensure proper sizing behavior */
.elementor-mask-yes > .elementor-container {
    width: 100%;
    height: auto;
    min-height: 100%;
}

/* Media preview container fix */
.elementor-control-media__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Improve preview image scaling */
.elementor-control-media__preview img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ensure mask image covers full content */
.elementor-mask-yes.elementor-section {
    overflow: visible;
    height: auto !important;
}

.elementor-mask-yes .elementor-container {
    overflow: visible;
}

/* Override any max-height restrictions */
.elementor-mask-yes[style*="max-height"],
.elementor-mask-yes .elementor-container[style*="max-height"] {
    max-height: none !important;
}

/* Fix for container aspect ratio */
.elementor-mask-yes[style*="aspect-ratio"],
.elementor-mask-yes .elementor-container[style*="aspect-ratio"] {
    aspect-ratio: auto !important;
}

/* Base styles */
.elementor-mask-yes {
    position: relative !important;
    width: 100% !important;
}

/* Dynamic mask sizing */
.elementor-mask-yes[style*="mask-size: cover"],
.elementor-mask-yes[style*="-webkit-mask-size: cover"] {
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}

/* Height control */
.elementor-mask-yes[style*="height"],
.elementor-mask-yes[style*="min-height"] {
    height: var(--mask-height) !important;
    min-height: var(--mask-height) !important;
}

/* Container and background sizing */
.elementor-mask-yes > .elementor-container {
    width: 100% !important;
    height: 100% !important;
}

.elementor-mask-yes .elementor-background-overlay {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
}

/* Dynamic ratio handling */
.elementor-mask-yes.maintain-ratio {
    height: auto !important;
    min-height: 0 !important;
}

/* Preview mode fixes */
.elementor-editor-active .elementor-mask-yes {
    min-height: var(--mask-height, 400px);
}

/* Force proper display in all screen sizes */
@media (max-width: 767px) {
    .elementor-mask-yes {
        height: var(--mask-height) !important;
        min-height: var(--mask-height) !important;
    }
}

/* Ensure mask covers container */
.elementor-mask-yes.elementor-section {
    overflow: hidden;
}

/* Container alignment */
.elementor-mask-yes > .elementor-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dynamic height transitions */
.elementor-mask-yes {
    transition: height 0.3s ease-in-out;
}

/* Enhanced cover mode */
.elementor-mask-yes[data-mask-mode="dynamic-cover"] {
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}