.bpa-front-happy-hour--note-desc{
    background-color: var(--bpa-pt-main-green-alpha-12);
    padding: 8px 12px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    font-family: var(--bpa-primary-font);
    line-height: 16px;
    font-weight: 500;
    color: var(--bpa-dt-black-400);
    border-radius: var(--bpa-radius-4px);
    margin-bottom: 16px;
}
.bpa-front-happy-hour--note-desc span{
    color: var(--bpa-dt-black-300);
    font-weight: normal;
}
/* Vue3 booking form — additive highlight for Happy Hours timeslots (display only).
   Scoped under the Vue3 root so the legacy Vue2 form is unaffected; uses :not on
   the selected state so a picked slot still renders its normal selected styling. */
.bpa-frontend-vue3 .bpa-front--dt__ts-body--item.bpa-front--ts-slot--happy-hour:not(.__bpa-is-selected){
    background-color: var(--bpa-pt-main-green-alpha-12);
    box-shadow: inset 0 0 0 1px var(--bpa-pt-main-green-alpha-12);
}