/**
 * Refined mask element positioning
 */

/* Target front element with many variations */
img[alt="Front Element"],
img[alt="Front element"],
img[alt="front element"],
img[alt="front Element"],
.mask-front-element,
.mask-image img[alt*="front" i][alt*="element" i],
#mask-front-element,
img.mask-front-element,
img[class*="front" i][class*="element" i],
[alt*="front" i][alt*="element" i] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 99 !important; /* Higher z-index to ensure visibility */
    border: none !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Target top element with many variations */
img[alt="Top Element"],
img[alt="Top element"],
img[alt="top element"],
img[alt="top Element"],
.mask-top-element,
.mask-image img[alt*="top" i][alt*="element" i],
#mask-top-element,
img.mask-top-element,
img[class*="top" i][class*="element" i],
[alt*="top" i][alt*="element" i] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 90 !important;
    border: none !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Make material component semi-transparent */
img[alt="Material"],
img[alt="material"],
.mask-material,
.mask-image img[alt*="material" i],
img.mask-material,
[alt*="material" i] {
    opacity: 0.7 !important;
    position: absolute !important;
    z-index: 5 !important;
}

/* Base mask container */
.mask-container,
#mask-container,
.mask-image > div {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    background-color: #1a1a1a !important;
    overflow: visible !important; /* Allow elements to show outside the container */
    margin: 0 auto !important;
}

/* Card sizing consistency for all types of cards */
.mask-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important; 
    height: 100% !important;
    min-height: 250px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    background-color: #222 !important;
    box-sizing: border-box !important;
}

.mask-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 150px !important;
    min-height: 150px !important; /* Force minimum height */
    max-height: 150px !important; /* Force maximum height */
    width: 100% !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
}

/* Make mask details area consistent height */
.mask-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Consistent button positioning */
.mask-actions {
    margin-top: auto !important;
}

/* Force element visibility */
img[alt="Front Element"], #mask-front-element, .mask-front-element {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}