.vbb-service-badge {
    --vbb-badge-color-normal: var(--vbb-accent);
    --vbb-badge-color-light: var(--vbb-accent-hover, var(--vbb-accent));
    position: relative;
    width: 100%;
    height: 32px;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    border-radius: 8px;
    background: var(--vbb-accent-soft);
    color: var(--vbb-badge-color-light);
    border: 1px solid transparent;
    transition: border-color 250ms ease, background 250ms ease;
}

.vbb-service-badge-inner {
    position: relative;
    z-index: 3;
    width: 150px;
    height: 32px;
    display: grid;
    grid-template-columns: 28px 94px 28px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.vbb-service-leaf {
    width: 19px;
    height: 23px;
    display: block;
    flex: 0 0 auto;
    transition: transform 250ms ease, opacity 250ms ease;
}

.vbb-service-leaf-left {
    grid-column: 1;
    justify-self: end;
    margin-right: -2px;
}

.vbb-service-leaf-right {
    grid-column: 3;
    justify-self: start;
    margin-left: -2px;
}

.vbb-service-text-wrap {
    grid-column: 2;
    width: 94px;
    height: 24px;
    overflow: hidden;
}

.vbb-service-text-slide {
    width: 94px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(0);
    transition: transform 250ms cubic-bezier(0.6, 0.6, 0, 1);
}

.vbb-service-text-line {
    width: 94px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbb-service-text-line span {
    max-width: 94px;
    display: block;
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.vbb-service-text-line:nth-child(2) span {
    color: var(--vbb-badge-color-light);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.vbb-service-text-line em {
    color: var(--vbb-badge-color-light);
    font-style: normal;
}

.vbb-service-text-line strong {
    color: var(--vbb-text-main);
    font-weight: 950;
}

.vbb-service-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    opacity: 1;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.vbb-service-pattern svg {
    flex: 0 0 auto;
}

.vbb-service-badge:hover {
    border-color: var(--vbb-badge-color-light);
}

.vbb-service-badge:hover .vbb-service-text-slide {
    transform: translateY(-24px);
}

.vbb-service-badge:hover .vbb-service-pattern {
    opacity: 0.25;
}

.vbb-service-badge:hover .vbb-service-leaf-left {
    transform: translateX(-2px);
}

.vbb-service-badge:hover .vbb-service-leaf-right {
    transform: translateX(2px);
}

/* Days */
.day-1,
.day-2,
.day-3,
.day-4,
.day-5,
.day-6,
.day-7 {
    --vbb-badge-color-normal: #475569;
    --vbb-badge-color-light: #cbd5e1;
    color: #cbd5e1;
    background: rgba(148,163,184,0.07);
}

.day-8,
.day-9,
.day-10,
.day-11,
.day-12,
.day-13,
.day-14 {
    --vbb-badge-color-normal: #0f766e;
    --vbb-badge-color-light: #5eead4;
    color: #5eead4;
    background: rgba(45,212,191,0.07);
}

.day-15,
.day-16,
.day-17,
.day-18,
.day-19,
.day-20,
.day-21 {
    --vbb-badge-color-normal: #0369a1;
    --vbb-badge-color-light: #7dd3fc;
    color: #7dd3fc;
    background: rgba(125,211,252,0.07);
}

.day-22,
.day-23,
.day-24,
.day-25,
.day-26,
.day-27,
.day-28,
.day-29,
.day-30,
.day-31 {
    --vbb-badge-color-normal: #9333ea;
    --vbb-badge-color-light: #c084fc;
    color: #c084fc;
    background: rgba(192,132,252,0.07);
}

/* Months */
.month-1,
.month-2,
.month-3 {
    --vbb-badge-color-normal: #1fcd76;
    --vbb-badge-color-light: #78f3b2;
    color: #78f3b2;
    background: rgba(31,205,118,0.07);
}

.month-4,
.month-5,
.month-6 {
    --vbb-badge-color-normal: #2563eb;
    --vbb-badge-color-light: #60a5fa;
    color: #60a5fa;
    background: rgba(96,165,250,0.07);
}

.month-7,
.month-8,
.month-9 {
    --vbb-badge-color-normal: #ea580c;
    --vbb-badge-color-light: #fb923c;
    color: #fb923c;
    background: rgba(251,146,60,0.07);
}

.month-10,
.month-11,
.month-12 {
    --vbb-badge-color-normal: #7c3aed;
    --vbb-badge-color-light: #a78bfa;
    color: #a78bfa;
    background: rgba(167,139,250,0.07);
}

/* Years */
.year-1 {
    --vbb-badge-color-normal: #ca8a04;
    --vbb-badge-color-light: #fbbf24;
    color: #fbbf24;
    background: rgba(251,191,36,0.07);
}

.year-2 {
    --vbb-badge-color-normal: #7c3aed;
    --vbb-badge-color-light: #a78bfa;
    color: #a78bfa;
    background: rgba(167,139,250,0.07);
}

.year-3 {
    --vbb-badge-color-normal: #0891b2;
    --vbb-badge-color-light: #22d3ee;
    color: #22d3ee;
    background: rgba(34,211,238,0.07);
}

.year-4 {
    --vbb-badge-color-normal: #be185d;
    --vbb-badge-color-light: #f472b6;
    color: #f472b6;
    background: rgba(244,114,182,0.07);
}

.year-5 {
    --vbb-badge-color-normal: #65a30d;
    --vbb-badge-color-light: #a3e635;
    color: #a3e635;
    background: rgba(163,230,53,0.07);
}

.year-6 {
    --vbb-badge-color-normal: #b91c1c;
    --vbb-badge-color-light: #f87171;
    color: #f87171;
    background: rgba(248,113,113,0.07);
}

.year-7,
.year-8,
.year-9,
.year-10 {
    --vbb-badge-color-normal: #b45309;
    --vbb-badge-color-light: #fcd34d;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(180,83,9,0.15) 0%, rgba(252,211,77,0.12) 50%, rgba(180,83,9,0.15) 100%);
    border-color: rgba(252,211,77,0.25);
}