/* =================================================================
   MULT FLEX — widget de mídia com posicionamento livre  v1.0
   ================================================================= */

/* ── Container do widget ── */
.wmx-container {
    position: relative;
}

/* ── MODO FLOAT: posição livre sobre a página ── */
.wmx-container.wmx-modo-float {
    position: absolute;
    z-index:  var(--wmx-z, 999);
    top:      var(--wmx-top,  auto);
    left:     var(--wmx-left, auto);
    right:    var(--wmx-right, auto);
    bottom:   var(--wmx-bottom, auto);
    width:    var(--wmx-w, auto);
    height:   var(--wmx-h, auto);
    pointer-events: all;
}
/* flag "sobrepor tudo" */
.wmx-container.wmx-sobrepor {
    position: fixed;
    z-index:  9999;
}

/* ── MODO BOX: comportamento normal de bloco ── */
.wmx-container.wmx-modo-box {
    position: relative;
    width:    100%;
}

/* ── Inner: aplica fundo, borda, raio ── */
.wmx-inner {
    position:      relative;
    overflow:      hidden;
    width:         100%;
    height:        100%;
    border-radius: var(--wmx-r-tl, 0) var(--wmx-r-tr, 0) var(--wmx-r-br, 0) var(--wmx-r-bl, 0);
}

/* ── Fundo ── */
.wmx-fundo {
    position: absolute;
    inset:    0;
    z-index:  0;
}
.wmx-fundo-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}
.wmx-mascara {
    position:       absolute;
    inset:          0;
    z-index:        1;
    pointer-events: none;
}

/* ── Mídia principal ── */
.wmx-midia {
    position: relative;
    z-index:  2;
    display:  flex;
    width:    100%;
    height:   100%;
}
.wmx-midia img,
.wmx-midia video {
    display:    block;
    max-width:  none;
    max-height: none;
}
/* object-fit e transform controlados via inline style */

/* ── Alinhamentos da mídia ── */
.wmx-alinhar-topo-esq  .wmx-midia { align-items: flex-start;  justify-content: flex-start; }
.wmx-alinhar-topo-cen  .wmx-midia { align-items: flex-start;  justify-content: center; }
.wmx-alinhar-topo-dir  .wmx-midia { align-items: flex-start;  justify-content: flex-end; }
.wmx-alinhar-meio-esq  .wmx-midia { align-items: center;      justify-content: flex-start; }
.wmx-alinhar-meio-cen  .wmx-midia { align-items: center;      justify-content: center; }
.wmx-alinhar-meio-dir  .wmx-midia { align-items: center;      justify-content: flex-end; }
.wmx-alinhar-baixo-esq .wmx-midia { align-items: flex-end;    justify-content: flex-start; }
.wmx-alinhar-baixo-cen .wmx-midia { align-items: flex-end;    justify-content: center; }
.wmx-alinhar-baixo-dir .wmx-midia { align-items: flex-end;    justify-content: flex-end; }

/* ── Mobile: força modo box ── */
@media (max-width: 767px) {
    .wmx-container.wmx-modo-float {
        position: relative !important;
        top:      auto !important;
        left:     auto !important;
        right:    auto !important;
        bottom:   auto !important;
        width:    100% !important;
        z-index:  auto !important;
    }
    .wmx-container.wmx-sobrepor {
        position: relative !important;
        z-index:  auto !important;
    }
}