/* Bereikbaarheid: statusregel bij de belknoppen (bereikbaar.js) en het dimmen buiten de beltijden. */
.jn-bel-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 8px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

span.jn-bel-status {
    display: inline-flex;
    margin: 0 0 0 8px !important;
}

/* onder een knop: een eigen blokje direct na de knopmodule (de ruimte ertussen komt van de box) */
.jn-bel-status.jn-bel-status--knop {
    display: flex;
    max-width: 360px;
    margin: -6px 0 0 !important;
}

.jn-bel-status.jn-bel-status--knop.is-midden {
    align-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jn-bel-stip {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9aa39f;
}

.jn-bel-status.is-open .jn-bel-stip {
    background: #3f9a83;
    animation: jn-bel-puls 2s ease-out infinite;
}

/* de tekst krimpt naast het bolletje, anders springt hij eronder */
.jn-bel-tekst {
    flex: 1 1 0%;
    min-width: 0;
}

/* tweede regel onder de tekst, niet onder het bolletje */
.jn-bel-extra {
    flex-basis: 100%;
    padding-left: 16px;
    opacity: .75;
}

.jn-bel-status.is-midden {
    justify-content: center;
    text-align: center;
}

.jn-bel-status.is-rechts {
    justify-content: flex-end;
    text-align: right;
}

.jn-bel-status:is(.is-midden, .is-rechts) .jn-bel-tekst {
    flex: 0 1 auto;
}

.jn-bel-status:is(.is-midden, .is-rechts) .jn-bel-extra {
    padding-left: 0;
}

/* in het mobiele menu (donker), onder het nummer */
.jn-bel-status.jn-bel-status--menu {
    display: flex;
    margin: 8px 0 0 !important;
    color: rgba(251, 244, 237, .75);
}

@keyframes jn-bel-puls {
    0% { box-shadow: 0 0 0 0 rgba(63, 154, 131, .55); }
    100% { box-shadow: 0 0 0 9px rgba(63, 154, 131, 0); }
}

/* buiten de beltijden gedimd, maar nog klikbaar; de statusregel zelf blijft goed leesbaar */
.jn-bel--uit > .fl-module-icon,
.jn-bel--uit .fl-module-icon,
.jn-bel--uit .fl-rich-text > :not(.jn-bel-status),
a.jn-bel--uit {
    opacity: .45;
    filter: grayscale(.7);
    transition: opacity .2s ease, filter .2s ease;
}

.jn-bel--uit:hover .fl-module-icon,
.jn-bel--uit:hover .fl-rich-text > :not(.jn-bel-status),
a.jn-bel--uit:hover {
    opacity: .75;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .jn-bel-status.is-open .jn-bel-stip {
        animation: none;
    }
}

/* links in de tweede regel ({app:…} / {mail:…}, 03-11-2026) */
.jn-bel-extra .jn-bel-link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Gecentreerd (03-11-2026): het bolletje loopt mee in de tekst. Als flex kwam het bij een tekst van twee regels op een
   eigen regel boven de tekst te staan. */
.jn-bel-status.is-midden,
.jn-bel-status.jn-bel-status--knop.is-midden {
	display: block;
	text-align: center;
}

.jn-bel-status.is-midden .jn-bel-stip {
	display: inline-block;
	margin-right: 8px;
	vertical-align: 1px;
}

.jn-bel-status.is-midden .jn-bel-tekst {
	display: inline;
}

.jn-bel-status.is-midden .jn-bel-extra {
	display: block;
	margin-top: 2px;
}

/* Bolletje op de eerste regel als de tekst over twee regels loopt (03-11-2026); met align-items: center stond het
   tussen de regels in. 0.42em = (regelhoogte 1.45 - 8px bolletje) / 2 bij 13px. */
.jn-bel-status:not(.is-midden) {
	align-items: flex-start;
}

.jn-bel-status:not(.is-midden) > .jn-bel-stip {
	margin-top: .42em;
}

/* In een menu (PowerPack) krijgt elke <a> de menuopmaak: blok, 24px, ruime padding. De links in de statusregel blijven
   gewone tekstlinks (03-11-2026). */
.pp-advanced-menu .jn-bel-status a.jn-bel-link,
.pp-menu-overlay .jn-bel-status a.jn-bel-link,
.menu .jn-bel-status a.jn-bel-link {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	color: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.pp-advanced-menu .jn-bel-status a.jn-bel-link::before,
.pp-advanced-menu .jn-bel-status a.jn-bel-link::after,
.pp-menu-overlay .jn-bel-status a.jn-bel-link::before,
.pp-menu-overlay .jn-bel-status a.jn-bel-link::after {
	content: none !important;
}