.bdg {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: var(--z-badge);
    isolation: isolate;
}
.bdg-fitty {
    font-family: var(--wp--preset--font-family--forum);
    font-weight: 600;
    color: var(--text-color, gold);
    letter-spacing: 0.1rem;
    text-indent: 0.1em; 

}

/* #region Badge Clip */
.bdg--clip {
    position: absolute;
    width: var(--bdg-w, auto);
    height: var(--bdg-h, auto);
    left: var(--bdg-left);
    top: var(--bdg-top);
    display: flex;

}
.bdg--clip-border
{
    width: 100%;
    height: 100%;
    background: var(--badge-border);
    clip-path: var(--path);
    padding: var(--bw);
}
.bdg--clip-inner {
    width: 100%;
    height: 100%;
    clip-path: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--badge-bg);
 
}

.bdg--clip-flag {  
    --cut-par: 20%;
    --path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-par)), 50% 100%, 0 calc(100% - var(--cut-par))); 
}
.bdg--clip-flag-alt { 
  --cut-par: 20%; 
  --path: polygon(50% 0%, 100% var(--cut-par), 100% 100%, 0% 100%, 0% var(--cut-par)); 
}

.bdg--clip-ribbon { 
  --cut-par: 15%;
  --path: polygon(0% 0%, 100% 0%, calc(100% - var(--cut-par)) 50%, 100% 100%, 0% 100%);  
}
.bdg--clip-ribbon-alt { 
    --cut-par: 15%;
    --path: polygon(100% 0%, 0% 0%, var(--cut-par) 50%, 0% 100%, 100% 100%);  
  }
  .bdg--clip-text-container-ribbon-alt { width: 50%; text-align: end; right: 10px; position: absolute;}

.bdg--clip-ribbon-2-alt { 
  --cut-par: 15%; 
  --path: polygon(var(--cut-par) 0%, 100% 0%, 100% 100%, var(--cut-par) 100%, 0% 50%);  
}
.bdg--clip-text-container-ribbon {width: 50%; }
.bdg--clip-text-container-ribbon-alt {width: 50%; }

.bdg--clip-chevron { 
  --cut-par: 15%;
  --path: polygon(0% 0%, calc(100% - var(--cut-par)) 0%, 100% 50%, calc(100% - var(--cut-par)) 100%, 0% 100%, var(--cut-par) 50%);
}
.bdg--clip-chevron-alt { 
  --cut-par: 15%; 
  --path: polygon(0% 0%, 50% var(--cut-par), 100% 0%, 100% calc(100% - var(--cut-par)), 50% 100%, 0% calc(100% - var(--cut-par)));
}
.bdg--clip-text-container-chevron { width: 60%;   }


.bdg--clip-skewrect {
    --cut-par: 15%;
    --path: polygon(var(--cut-par) 0%, 100% 0%, calc(100% - var(--cut-par)) 100%, 0% 100%);
}
.bdg--clip-skewrect-alt {
    --cut-par: 15%;
    --path: polygon(0% 0%, calc(100% - var(--cut-par)) 0%, 100% 100%, var(--cut-par) 100%);
}
.bdg--clip-text-container-skewrect {width: 60%;   }


.bdg--stepped {
    --path: polygon(0% 100%, 0% 45%, 15% 45%, 15% 25%, 35% 25%, 35% 5%, 65% 5%, 65% 25%, 85% 25%, 85% 45%, 100% 45%, 100% 100%);
}
.bdg--stepped .bdg__inner {
    justify-content: flex-end; /* Прижимаем к низу */
    padding-bottom: 0;      /* Регулируем зазор от нижней границы */
    padding-top: 35px;        /* Увеличиваем верхний отступ, чтобы "освободить" шпиль */
    min-height: 45px;         /* Задаем высоту, чтобы шпиль был выразительным */
}

.bdg--clip-ticket { --path: polygon(0% 20%, 10% 0%, 90% 0%, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80%); }
.bdg--clip-diamond { --path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
/* #endregion */

.bdg--corner {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;


    --ribbon-height: 60px;
    
    --center-x: 90px;         
    --center-y: 90px;
}
.bdg--corner-pos-left { top: 0; left: 0; }
.bdg--corner-pos-right { top: 0; right: 0; }


.bdg-corner-ribbon {
    position: absolute;
    width: calc(100% * 1.4142); 
    height: var(--ribbon-height);
    line-height: var(--ribbon-height);
    text-align: center;

    /* 2. ПОЗИЦИОНИРОВАНИЕ: помещаем геометрический центр ленты в точку (center-x, center-y) */
    left: var(--center-x);
    top: var(--center-y);
    
    
}

/* Поворот в зависимости от угла */
.bdg--corner-pos-left .bdg-corner-ribbon {
    top: var(--offset);
    left: calc(var(--offset) * -1);
    transform: rotate(-45deg);
}

.bdg--corner-pos-right .bdg-corner-ribbon {
    transform: translate(-50%, -50%) rotate(-45deg); 
}


.bdg--corner-style-double-line .bdg-corner-ribbon {
    /* Черный фон и золотые полоски по 1px сверху и снизу */
    background: 
        linear-gradient(red 1px, transparent 1px),
        linear-gradient(to top, red 1px, transparent 1px),
        #000;
    background-size: 100% 100%;
}

.bdg--corner-style-gradient .bdg-corner-ribbon {
    background: linear-gradient(135deg, 
        #b08d26 0%, 
        #f9d976 45%, 
        #ffffff 50%, 
        #f9d976 55%, 
        #b08d26 100%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Легкий объем */
}



/*#region SVG-based badge */
.bdg--svg {
    /* width:  var(--badge_width); */
    aspect-ratio: 1/1;

    top: var(--bdg-top, 0);
    left: var(--bdg-left, 0);
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bdg-w { width: var(--badge_size);}
.bdg-h { height: var(--badge_size); }
.bdg--svg-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: none !important;
}
.bdg--svg-container svg {
    width: 100%; height: 100%;
    overflow: visible !important; 
}
.bdg--svg-container svg path {
    stroke-width: var(--bdg-border-width, 1);
    vector-effect: non-scaling-stroke;
}


.bdg--svg-text-container {
    width: var(--w, 60%);
    height: var(--h, 60%);
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Задаем контейнер для текста в зависимости от характера SVG шаблона; работаем через ширину и угол*/
.bdg--svg-text-container-cross {
    transform: rotate(-45deg);
    width: 90%;
}
.bdg--svg-text-container-rombus {
    width: 50%;
}

.bdg--svg-text {
    color: var(--txt-color, yellow);
    display: inline-block;
    max-width: 100%;
    white-space: nowrap; 
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    font-family: var(--wp--preset--font-family--forum);
    font-weight: 600;
}

/*#endregion */