/* ============================================================
   betterbedesign – Ribbon Widget-Erweiterung
   ============================================================ */

/* ── Wrapper ── */

.bbd-has-ribbon {
    position: relative;
}

/* overflow:hidden nur für Typen die eine Ecken-Beschneidung brauchen */
.bbd-ribbon-type-sloping-line,
.bbd-ribbon-type-triangle {
    overflow: hidden;
}

/* ── Basis ── */

.bbd-ribbon {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    line-height: 1;
}

/* Farben kommen via PHP als CSS-Variablen (--bbd-rb-bg, --bbd-rb-color) */
.bbd-ribbon__text {
    display: block;
    background: var(--bbd-rb-bg, #333333);
    color: var(--bbd-rb-color, #ffffff);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    text-align: center;
}

/* ============================================================
   SLOPING LINE
   ============================================================ */

.bbd-ribbon--sloping-line {
    width:  var(--bbd-rb-dist, 80px);
    height: var(--bbd-rb-dist, 80px);
    overflow: hidden;
}

.bbd-ribbon--sloping-line .bbd-ribbon__text {
    position: absolute;
    width: 170%;
    padding: 6px 0;
}

.bbd-ribbon--sloping-line.bbd-ribbon--top-left {
    top: 0; left: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--top-left .bbd-ribbon__text {
    top: 22%; left: -35%;
    transform: rotate(-45deg);
}

.bbd-ribbon--sloping-line.bbd-ribbon--top-right {
    top: 0; right: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--top-right .bbd-ribbon__text {
    top: 22%; right: -35%;
    transform: rotate(45deg);
}

.bbd-ribbon--sloping-line.bbd-ribbon--bottom-left {
    bottom: 0; left: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-left .bbd-ribbon__text {
    bottom: 22%; left: -35%;
    transform: rotate(45deg);
}

.bbd-ribbon--sloping-line.bbd-ribbon--bottom-right {
    bottom: 0; right: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-right .bbd-ribbon__text {
    bottom: 22%; right: -35%;
    transform: rotate(-45deg);
}

/* ============================================================
   LINE  (horizontales Band über volle Breite)
   ============================================================ */

.bbd-ribbon--line {
    left: 0; right: 0;
    width: 100%;
}

.bbd-ribbon--line.bbd-ribbon--top-left,
.bbd-ribbon--line.bbd-ribbon--top-right    { top: 0; }
.bbd-ribbon--line.bbd-ribbon--bottom-left,
.bbd-ribbon--line.bbd-ribbon--bottom-right { bottom: 0; }

.bbd-ribbon--line .bbd-ribbon__text {
    width: 100%;
    padding: 6px 12px;
}

/* ============================================================
   SQUARE  (Rechteck in der Ecke)
   ============================================================ */

.bbd-ribbon--square.bbd-ribbon--top-left     { top: 0;    left: 0; }
.bbd-ribbon--square.bbd-ribbon--top-right    { top: 0;    right: 0; }
.bbd-ribbon--square.bbd-ribbon--bottom-left  { bottom: 0; left: 0; }
.bbd-ribbon--square.bbd-ribbon--bottom-right { bottom: 0; right: 0; }

.bbd-ribbon--square .bbd-ribbon__text {
    padding: 6px 14px;
}

/* ============================================================
   CIRCLE  (runde Badge)
   ============================================================ */

.bbd-ribbon--circle.bbd-ribbon--top-left     { top: 8px;    left: 8px; }
.bbd-ribbon--circle.bbd-ribbon--top-right    { top: 8px;    right: 8px; }
.bbd-ribbon--circle.bbd-ribbon--bottom-left  { bottom: 8px; left: 8px; }
.bbd-ribbon--circle.bbd-ribbon--bottom-right { bottom: 8px; right: 8px; }

.bbd-ribbon--circle .bbd-ribbon__text {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--bbd-rb-dist, 60px);
    height: var(--bbd-rb-dist, 60px);
    border-radius: 50%;
    padding: 4px;
    overflow: hidden;
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
}

/* ============================================================
   TRIANGLE  (Eck-Dreieck aus CSS-Border)
   ============================================================ */

.bbd-ribbon--triangle {
    width: 0;
    height: 0;
    overflow: visible;
    background: transparent !important;
}

.bbd-ribbon--triangle.bbd-ribbon--top-left {
    top: 0; left: 0;
    border-top:   var(--bbd-rb-dist, 80px) solid var(--bbd-rb-bg, #333333);
    border-right: var(--bbd-rb-dist, 80px) solid transparent;
}
.bbd-ribbon--triangle.bbd-ribbon--top-right {
    top: 0; right: 0;
    border-top:  var(--bbd-rb-dist, 80px) solid var(--bbd-rb-bg, #333333);
    border-left: var(--bbd-rb-dist, 80px) solid transparent;
}
.bbd-ribbon--triangle.bbd-ribbon--bottom-left {
    bottom: 0; left: 0;
    border-bottom: var(--bbd-rb-dist, 80px) solid var(--bbd-rb-bg, #333333);
    border-right:  var(--bbd-rb-dist, 80px) solid transparent;
}
.bbd-ribbon--triangle.bbd-ribbon--bottom-right {
    bottom: 0; right: 0;
    border-bottom: var(--bbd-rb-dist, 80px) solid var(--bbd-rb-bg, #333333);
    border-left:   var(--bbd-rb-dist, 80px) solid transparent;
}

/* Text innerhalb des Dreiecks */
.bbd-ribbon--triangle .bbd-ribbon__text {
    position: absolute;
    background: transparent;
    font-size: 10px;
    padding: 0;
}

.bbd-ribbon--triangle.bbd-ribbon--top-left .bbd-ribbon__text {
    top: calc(var(--bbd-rb-dist, 80px) * -0.72);
    left: 4px;
    transform: rotate(-45deg);
}
.bbd-ribbon--triangle.bbd-ribbon--top-right .bbd-ribbon__text {
    top: calc(var(--bbd-rb-dist, 80px) * -0.72);
    right: 4px;
    transform: rotate(45deg);
}
.bbd-ribbon--triangle.bbd-ribbon--bottom-left .bbd-ribbon__text {
    bottom: calc(var(--bbd-rb-dist, 80px) * -0.72);
    left: 4px;
    transform: rotate(45deg);
}
.bbd-ribbon--triangle.bbd-ribbon--bottom-right .bbd-ribbon__text {
    bottom: calc(var(--bbd-rb-dist, 80px) * -0.72);
    right: 4px;
    transform: rotate(-45deg);
}