/* Container principal do ribbon */
.ribbon-wrapper {
    display: inline-block;
    position: relative;
}

.ribbon-container {
    position: relative;
    display: inline-block;
    overflow: visible !important;
}

/* Ribbon - posição inicial no canto superior direito */
.custom-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background-image: url('ribbon.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 8;
    /* Sem efeitos de transição ou hover */
}

/* Garantir que a imagem fique acima do ribbon */
.ribbon-container img {
    position: relative;
    z-index: 10;
    display: block;
}

/* Tamanhos padrão */
.ribbon-container[data-size="small"] .custom-ribbon {
    width: 60px;
    height: 60px;
}

.ribbon-container[data-size="medium"] .custom-ribbon {
    width: 80px;
    height: 80px;
}

.ribbon-container[data-size="large"] .custom-ribbon {
    width: 100px;
    height: 100px;
}

.ribbon-container[data-size="xlarge"] .custom-ribbon {
    width: 150px;
    height: 150px;
}

.ribbon-container[data-size="xxlarge"] .custom-ribbon {
    width: 200px;
    height: 200px;
}

/* Garantir que o container não corte o ribbon */
.ribbon-wrapper,
.ribbon-container {
    overflow: visible !important;
}

/* Responsividade - apenas ajuste de tamanho */
@media (max-width: 1200px) {
    .ribbon-container[data-size="xxlarge"] .custom-ribbon {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .ribbon-container[data-size="xxlarge"] .custom-ribbon {
        width: 150px;
        height: 150px;
    }
    
    .ribbon-container[data-size="xlarge"] .custom-ribbon {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .ribbon-container[data-size="xxlarge"] .custom-ribbon {
        width: 120px;
        height: 120px;
    }
    
    .ribbon-container[data-size="xlarge"] .custom-ribbon {
        width: 100px;
        height: 100px;
    }
}

/* Suporte para temas que usam overflow hidden */
.ribbon-wrapper {
    overflow: visible !important;
}

.ribbon-container {
    overflow: visible !important;
}