/* MTG Shared Render Matrix: mtg-home-template-demo-badge */


/*
 * El preview conserva completamente
 * su estructura, tamaño e imagen.
 */
.mdg-templates .mdg-template-preview{
    position:relative !important;
}

/*
 * SOLO el SPAN interno se convierte en badge.
 */
.mdg-templates
.mdg-template-preview
> span.mtg-demo-badge{

    position:absolute !important;

    top:14px !important;
    left:14px !important;
    z-index:5 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:8px 12px !important;

    border:
        1px solid
        rgba(255,255,255,.22) !important;

    border-radius:999px !important;

    background:
        rgba(8,20,45,.88) !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;

    letter-spacing:.025em !important;
    text-transform:uppercase !important;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.22) !important;

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    white-space:nowrap !important;

    pointer-events:none !important;

    transform:none !important;
}


/*
 * Pequeño play.
 */
.mdg-templates
.mdg-template-preview
> span.mtg-demo-badge::before{

    content:"▶";

    display:inline-block;

    margin-right:6px;

    font-size:9px;
    line-height:1;

    color:#fff;
}


/*
 * Hover sobre la CARD, no sobre la imagen.
 */
.mdg-templates
.mdg-template-card:hover
.mdg-template-preview
> span.mtg-demo-badge{

    background:
        rgba(22,119,255,.95) !important;

    box-shadow:
        0 10px 26px
        rgba(0,0,0,.25) !important;
}


/*
 * Blindaje:
 * el enlace preview NUNCA debe adquirir
 * estilos de badge aunque alguna clase vieja
 * llegue a quedar en el DOM.
 */
.mdg-templates
a.mdg-template-preview.mtg-demo-badge{

    display:block !important;

    width:100% !important;
    padding:0 !important;

    border-radius:0 !important;

    background:none !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}


/*
 * Evitar pseudo-icono sobre el enlace.
 */
.mdg-templates
a.mdg-template-preview.mtg-demo-badge::before{

    content:none !important;
}