/* this will be used for both the front end and the back as a central place for all media panels */
    
/* Container for thumbnail and overlays - SIMPLE APPROACH */

.cm-panel-container {
    container-type: inline-size;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* New text content containers */
.text-top-content,
.text-bottom-content {
    position: relative;
    width: 100%;
    line-height: normal;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

/* Hide empty text containers */
.text-top-content:empty,
.text-bottom-content:empty {
    display: none;
}

/* New inner container for media and effects */
.cm-panel-inner-container {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0;
    display: inline-block; /* Allow shrink-wrapping for original aspect ratio mode */
    /* for debugging only
    border-top: 5px solid green;
    */
}

/* Layer that all effects are applied to */
/* was .cm-panel-container .cm-panel-effects but shortened it */
.cm-panel-effects{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none;
    line-height: normal;

}

/* Base styling for all dynamic text overlay elements */
.cm-panel-effects [class^="dyn_"] {
    position: absolute;
    box-sizing: border-box;
    padding: 5px;
    pointer-events: none;
    line-height: normal;
    max-width: calc(100% - 10px);
}

 

/* Text elements in top/bottom content areas */
.text-top-content [class^="dyn_"],
.text-bottom-content [class^="dyn_"] {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    line-height: normal;
    width: auto;
    max-width: 100%;
}

/* Top position */
.cm-panel-effects .position-top {
    top: 5px;
}

/* Middle position */
.cm-panel-effects .position-middle {
    top: 50%;
    transform: translateY(-50%);
}
/* Combined transform for middle+center */
/*
.cm-panel-effects .position-middle.position-center {
    transform: translate(-50%, -50%);
}
*/
/* More robust middle+center positioning using multiple techniques */
.cm-panel-effects .position-middle.position-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* Reset any margins */
    text-align: center; /* Center the text within the element */
}


/* Bottom position */
.cm-panel-effects .position-bottom {
    bottom: 5px;
}

/* Left position */
.cm-panel-effects .position-left {
    left: 5px;
}

/* Center position */
.cm-panel-effects .position-center {
    left: 50%;
    transform: translateX(-50%);
}

/* Right position */
.cm-panel-effects .position-right {
    right: 5px;
}

/* Ensure the image is properly contained */
.cm-panel-inner-container img.dyn_cm_media_panel {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
    /* Image is now relative positioned within inner container */
    position: relative;
    top: 0;
    left: 0;
}

/* Special handling for tiles to allow shrink-wrapping */
.cm-tile .cm-panel-inner-container {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

/* Ensure effects container matches inner container size for tiles */
.cm-tile .cm-panel-inner-container .cm-panel-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* Just for debugging purposes */
/*
.cm-panel-effects{
    background: rgba(35, 112, 156, 0.288); 
    border-top: 5px solid red !important;
    border-bottom: 5px solid red !important;
}
.cm-panel-container {
    border-top: 5px solid blue;
    border-bottom: 5px solid blue;
}
.cm-panel-effects .dyn_text_overlay{
    background-color: purple !important;
    color:white !important;
}
.text-top-content, .text-bottom-content{
    background-color: green !important;
}

.text-top-content .dyn_text_overlay,
.text-bottom-content .dyn_text_overlay { 
    color:yellow !important; 
 }
*/