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

/* ── Wrapper ── */

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

/* overflow:hidden nur für Typen die Beschneidung am Container-Rand 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 {
    /* Kein eigenes overflow:hidden – der Widget-Wrapper clippt.
       Die Größe bestimmt wo der Band-Mittelpunkt liegt (= Abstand von der Ecke). */
    width:  var(--bbd-rb-dist, 120px);
    height: var(--bbd-rb-dist, 120px);
}

.bbd-ribbon--sloping-line .bbd-ribbon__text {
    position: absolute;
    /* 200% + left:-50% → Bandmitte liegt immer bei 50% des Ribbon-Containers */
    width: 200%;
    left: -50%;
    /* Dicke per Slider (--bbd-rb-thickness), Fallback 8px */
    padding: var(--bbd-rb-thickness, 8px) 0;
}

/* top-left: Container oben-links, Band läuft von oben-rechts → unten-links */
.bbd-ribbon--sloping-line.bbd-ribbon--top-left {
    top: 0; left: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--top-left .bbd-ribbon__text {
    top: 50%;
    transform: translateY(calc(-50% + var(--bbd-rb-text-offset, 0px))) rotate(-45deg);
}

/* top-right: Container oben-rechts, Band läuft von oben-links → unten-rechts */
.bbd-ribbon--sloping-line.bbd-ribbon--top-right {
    top: 0; right: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--top-right .bbd-ribbon__text {
    top: 50%;
    transform: translateY(calc(-50% + var(--bbd-rb-text-offset, 0px))) rotate(45deg);
}

/* bottom-left */
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-left {
    bottom: 0; left: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-left .bbd-ribbon__text {
    bottom: 50%;
    transform: translateY(calc(50% + var(--bbd-rb-text-offset, 0px))) rotate(45deg);
}

/* bottom-right */
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-right {
    bottom: 0; right: 0;
}
.bbd-ribbon--sloping-line.bbd-ribbon--bottom-right .bbd-ribbon__text {
    bottom: 50%;
    transform: translateY(calc(50% + var(--bbd-rb-text-offset, 0px))) rotate(-45deg);
}

/* ============================================================
   LINE  (horizontales Band über volle Breite)
   --bbd-rb-dist   = Abstand vom Rand (0 = direkt an der Wand)
   --bbd-rb-thickness = halbe Bandhöhe (= padding oben/unten)
   ============================================================ */

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

.bbd-ribbon--line.bbd-ribbon--top-left,
.bbd-ribbon--line.bbd-ribbon--top-right {
    top: var(--bbd-rb-dist, 0px);
}
.bbd-ribbon--line.bbd-ribbon--bottom-left,
.bbd-ribbon--line.bbd-ribbon--bottom-right {
    bottom: var(--bbd-rb-dist, 0px);
}

.bbd-ribbon--line .bbd-ribbon__text {
    width: 100%;
    padding: var(--bbd-rb-thickness, 8px) 12px;
}

/* ============================================================
   SQUARE  (Rechteck-Badge in der Ecke)
   --bbd-rb-dist   = Abstand von der Ecke (Rand-Offset in px)
   --bbd-rb-thickness = Padding (Badge-Größe)
   ============================================================ */

.bbd-ribbon--square.bbd-ribbon--top-left {
    top:  var(--bbd-rb-dist, 0px);
    left: var(--bbd-rb-dist, 0px);
}
.bbd-ribbon--square.bbd-ribbon--top-right {
    top:   var(--bbd-rb-dist, 0px);
    right: var(--bbd-rb-dist, 0px);
}
.bbd-ribbon--square.bbd-ribbon--bottom-left {
    bottom: var(--bbd-rb-dist, 0px);
    left:   var(--bbd-rb-dist, 0px);
}
.bbd-ribbon--square.bbd-ribbon--bottom-right {
    bottom: var(--bbd-rb-dist, 0px);
    right:  var(--bbd-rb-dist, 0px);
}

.bbd-ribbon--square .bbd-ribbon__text {
    padding: var(--bbd-rb-thickness, 6px) calc(var(--bbd-rb-thickness, 6px) * 2);
}

/* ============================================================
   CIRCLE  (runde Badge)
   --bbd-rb-dist   = Größe des Kreises UND Abstand von der Ecke
   ============================================================ */

.bbd-ribbon--circle.bbd-ribbon--top-left {
    top:  var(--bbd-rb-dist, 8px);
    left: var(--bbd-rb-dist, 8px);
}
.bbd-ribbon--circle.bbd-ribbon--top-right {
    top:   var(--bbd-rb-dist, 8px);
    right: var(--bbd-rb-dist, 8px);
}
.bbd-ribbon--circle.bbd-ribbon--bottom-left {
    bottom: var(--bbd-rb-dist, 8px);
    left:   var(--bbd-rb-dist, 8px);
}
.bbd-ribbon--circle.bbd-ribbon--bottom-right {
    bottom: var(--bbd-rb-dist, 8px);
    right:  var(--bbd-rb-dist, 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);
}