/*
 * BeBusy Master — sector Dieren (alle stijlen).
 * Spoedbalk, header met nu-open, diersoortenkeuze, chips met dier-iconen, faciliteiten-balk,
 * spoedkaarten die bij een gesloten praktijk wisselen, prijstabellen en de rustige afscheidspagina.
 * Kleuren via --klant-* en de stijltokens. Spoed in rustige kleuren, nooit alarmrood.
 */

/* ---------- Spoedbalk (boven de header) ---------- */
.bb-spoedbalk { background: var(--klant-primair-zacht); color: var(--klant-primair-op-licht); font-size: .9375rem; line-height: 1.45; }
.bb-spoedbalk__wrap { max-width: var(--bb-wrap); margin-inline: auto; padding: .55em var(--bb-gutter); display: flex; align-items: center; justify-content: center; gap: .3em .7em; flex-wrap: wrap; text-align: center; }
.bb-spoedbalk .bb-icoon { width: 1.2em; height: 1.2em; color: var(--klant-accent-op-licht); }
.bb-spoedbalk .bb-icoon .bb-vul { fill-opacity: .18; }
.bb-spoedbalk a { color: inherit; font-weight: 700; text-underline-offset: .2em; }
.bb-spoedbalk__link { font-weight: 600 !important; opacity: .9; }
.bb-spoedbalk .bb-spoeddienst--kort { font-weight: 600; }
html[data-bb-praktijk="dicht"] .bb-spoedbalk { background: #F3EEE3; color: #4E4224; }
@media (max-width: 640px) {
	.bb-spoedbalk { font-size: .875rem; }
	.bb-spoedbalk__buiten, .bb-spoedbalk__link { display: none; }
	.bb-spoedbalk > .bb-spoedbalk__wrap > .bb-icoon { display: none; }
}

/* ---------- Header: telefoon met nu-open ---------- */
/* Blocksy verdeelt de rij als 1fr auto 1fr; met telefoon, nu-open en knop rechts is die kolom te smal
   en schuift hij over het menu. Logo en acties nemen hun eigen breedte, het menu de rest. */
@media (min-width: 1000px) {
	.bb-sector-dieren #header [data-row="middle"] .ct-container { grid-template-columns: auto 1fr auto; column-gap: 16px; }
	.bb-sector-dieren #header [data-row="middle"] [data-column="middle"] { justify-content: center; min-width: 0; }
	/* Tekstlogo: nooit midden in een woord afbreken ("Dierenartsenpraktijk" is lang); de kolom groeit dan mee. */
	.bb-sector-dieren #header [data-id="logo"] .site-title { font-size: 22px; min-width: min-content; }
	.bb-sector-dieren #header [data-id="logo"] .site-title a { overflow-wrap: normal; word-break: normal; }
	.bb-sector-dieren #header [data-id="menu"] > ul > li > .ct-menu-link { padding-inline: 7px; font-size: 14.5px; }
}
.bb-sector-dieren .bb-header-contact { align-items: flex-end; gap: 2px; }
.bb-sector-dieren .bb-header-contact .bb-nu-open { font-size: .78rem; }
#offcanvas .bb-header-contact .bb-nu-open { justify-content: center; }

/* ---------- Vertrouwensregel (hero) ---------- */
.bb-vertrouwensregel { margin-top: 4px !important; }
.bb-vertrouwen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: .95rem; color: var(--bb-muted); }
.bb-vertrouwen__item { display: inline-flex; align-items: center; gap: .45em; }
.bb-vertrouwen__item .bb-icoon { color: var(--klant-accent-op-licht); }

/* ---------- Chips met dier-icoon ---------- */
.bb-dierchips li { display: inline-flex; align-items: center; gap: .4em; }
.bb-dierchips .bb-icoon { width: 1.15em; height: 1.15em; }
.bb-chips--aandacht li { background: var(--bb-vlak); color: var(--bb-tekst); }
.bb-teamstrip__soorten { justify-content: center; margin-top: 6px !important; }
.bb-filter__knop .bb-icoon { width: 1.1em; height: 1.1em; margin-right: .3em; vertical-align: -.2em; }
.bb-kop--klein { font-size: 1rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-muted) !important; }

/* ---------- Diersoortenkeuze ---------- */
.bb-dierkaart { align-items: center; text-align: center; gap: 10px !important; }
.bb-dierkaart .bb-icoonrond { width: 76px; height: 76px; }
.bb-dierkaart .bb-icoonrond .bb-icoon { width: 40px; height: 40px; }
.bb-dierkaart h3 { font-size: 1.12rem; }

/* ---------- Spoedkaarten: de kaart die nu geldt, staat bovenaan ---------- */
.bb-spoedkaarten > .wp-block-uagb-container { transition: box-shadow .2s; }
html[data-bb-praktijk="dicht"] .bb-spoedkaart--buiten { order: -1; }
html[data-bb-praktijk="open"] .wp-block-uagb-container.bb-spoedkaart--tijdens,
html[data-bb-praktijk="dicht"] .wp-block-uagb-container.bb-spoedkaart--buiten { --bb-k-schaduw: 0 0 0 3px var(--klant-accent), var(--bb-schaduw); background: var(--bb-kaart); }
.bb-nu-badge-regel:empty, .bb-nu-badge-regel:has(> [hidden]:only-child) { display: none; }
.bb-nu-badge { display: inline-flex; align-items: center; gap: .4em; padding: .25em .75em; border-radius: 999px; background: var(--klant-accent); color: var(--klant-accent-tekst); font-size: .85rem; font-weight: 700; }
.bb-nu-badge .bb-icoon { width: 1.1em; height: 1.1em; }
.bb-nu-badge .bb-icoon .bb-vul { fill-opacity: .25; }

/* Spoeddienst (naam, telefoon, adres + route, uitleg) */
.bb-spoeddienst:not(.bb-spoeddienst--kort) { display: grid; gap: 6px; }
.bb-spoeddienst__naam { font-family: var(--bb-font-koppen); color: var(--bb-kop); font-size: 1.1em; }
.bb-spoeddienst__tel, .bb-spoeddienst__adres { display: flex; gap: .5em; align-items: flex-start; }
.bb-spoeddienst__tel a { font-weight: 800; font-size: 1.15em; }
.bb-spoeddienst__tel .bb-icoon, .bb-spoeddienst__adres .bb-icoon { margin-top: .2em; color: var(--klant-accent-op-licht); }
.bb-spoeddienst__uitleg { color: var(--bb-muted); font-size: .95em; }
.bb-footer .bb-spoeddienst a, .bb-spoedbalk .bb-spoeddienst a { color: inherit; }

/* Spoedmelding boven het afspraakformulier: rustig, geen alarmrood. */
.bb-spoedmelding { padding: 14px 18px; border-radius: var(--bb-radius); background: #F4EEDF; color: #4A3B14; border-left: 5px solid #B88A2E; }
.bb-spoedmelding a { color: inherit !important; }

/* ---------- Faciliteiten-balk ---------- */
.bb-faciliteiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.bb-faciliteiten li { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.1em .6em .7em; border-radius: 999px; background: var(--bb-kaart); border: 1px solid var(--bb-rand); font-weight: 600; }
.bb-faciliteiten .bb-icoon { width: 1.6em; height: 1.6em; padding: .3em; border-radius: 50%; background: var(--bb-icoon-rond); color: var(--klant-accent-op-licht); box-sizing: content-box; }
.bb-keurmerk-regel { display: flex; align-items: center; gap: .5em; font-weight: 600; color: var(--klant-primair-op-licht); }
.bb-keurmerk-regel .bb-icoon { color: var(--klant-accent-op-licht); }

/* ---------- Preventie ---------- */
.bb-preventiekaart .bb-link-pijl { margin-top: auto; }

/* ---------- Prijstabellen: eerste kolom is een omschrijving ---------- */
.bb-page .wp-block-table.bb-tabel--prijs td:first-child, .bb-page .wp-block-table.bb-tabel--schema td:first-child { font-weight: 400; white-space: normal; width: auto; }
.bb-page .wp-block-table.bb-tabel--schema td:first-child { font-weight: 700; width: 34%; }
.bb-page .wp-block-table.bb-tabel--schema td:last-child, .bb-page .wp-block-table.bb-tabel--schema th:last-child { text-align: left; white-space: normal; }
.bb-page .wp-block-table.bb-tabel--prijs table, .bb-page .wp-block-table.bb-tabel--schema table { min-width: 0; }
.bb-prijskop { display: flex; align-items: center; gap: .45em; font-size: 1.05rem !important; }
.bb-prijskop .bb-icoon { color: var(--klant-accent-op-licht); }
.bb-tariefgroep { scroll-margin-top: 120px; }

/* ---------- Webshop-banner ---------- */
.bb-webshop__knop { align-items: flex-end !important; }
@media (max-width: 1024px) { .bb-webshop__knop { align-items: flex-start !important; } }

/* ---------- Afscheid-blok (FAQ) ---------- */
.bb-afscheidblok { background: var(--bb-kaart); border: 1px solid var(--bb-rand); border-radius: var(--bb-radius); padding: 22px !important; margin-top: 8px; }
.bb-afscheidblok .bb-icoonrond { background: var(--bb-vlak); color: var(--bb-muted); }

/* ---------- Mobiele balk: spoedknop bij gesloten praktijk ---------- */
@media (max-width: 999.98px) {
	.bb-mobiele-balk__spoed { background: #F3EEE3; color: #4E4224; }
}

/* ---------- Footer: bij gesloten praktijk staat spoed buiten openingstijden bovenaan ---------- */
.bb-footer__spoed { display: flex; flex-direction: column; gap: 6px; }
html[data-bb-praktijk="dicht"] .bb-footer__spoed-buiten { order: -1; font-weight: 700; }
.bb-footer__keurmerk { display: flex; gap: .5em; align-items: flex-start; font-size: .925rem; opacity: .9; }
.bb-footer__contact li span { min-width: 0; }

/* ---------- Rustige pagina (afscheid): gedempt, geen knoppen in de accentkleur ---------- */
.bb-rustig { --bb-zacht: #F1EFEB; --bb-vlak: #F5F3EF; }
.bb-rustig .bb-sectie--zacht { background: #F1EFEB; }
.bb-rustig .bb-sectie--zacht::before, .bb-rustig .bb-sectie--zacht::after { display: none; }
.bb-rustig .bb-icoonrond { background: #E7E3DC; color: #5E6A66; }
.bb-rustig .bb-page a { color: var(--klant-primair-op-licht); }
.bb-rustig .bb-header-knop, .bb-rustig .bb-knop { background: transparent !important; color: var(--klant-primair-op-licht) !important; border-color: currentColor !important; }
.bb-rustig .wp-block-button .wp-block-button__link { background: transparent !important; color: var(--klant-primair-op-licht) !important; border-color: currentColor !important; }
.bb-rustig .bb-mobiele-balk__bel { background: #ECE9E3; color: #3B4643; }
.bb-rustig .bb-afscheid-hero .bb-icoonrond { width: 64px; height: 64px; }
.bb-afscheid-contact .bb-lead { color: var(--bb-tekst); }

/* ---------- Eerste bezoek: knop en link naast elkaar ---------- */
.bb-eerste-bezoek__acties { justify-content: flex-start !important; }
.bb-eerste-bezoek__acties > * { width: auto !important; flex: 0 0 auto !important; }

/* ---------- Postcodecheck "Komen wij bij jou?" (v2 Mobiel, v3 Opvang; inc/dieren/postcodecheck.php) ---------- */
.bb-postcodecheck { display: grid; gap: 8px; }
.bb-postcodecheck[hidden] { display: none; }
.bb-postcodecheck__titel { margin: 0; font-weight: 700; }
.bb-postcodecheck label { font-weight: 700; }
.bb-postcodecheck__rij { display: flex; gap: 8px; }
.bb-postcodecheck__rij input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; font: inherit; border: 1.5px solid #B9C3C7; border-radius: calc(var(--bb-radius-knop) - 2px); background: var(--bb-kaart); color: var(--bb-tekst); }
.bb-postcodecheck__rij input:focus { outline: none; border-color: var(--klant-accent-op-licht); box-shadow: 0 0 0 3px var(--klant-accent-zacht); }
.bb-postcodecheck__rij input[aria-invalid="true"] { border-color: #B88A2E; }
.bb-postcodecheck__rij .bb-knop { border: 0; cursor: pointer; flex: 0 0 auto; }
/* De live-regio blijft in de toegankelijkheidsboom (geen display:none); leeg = visueel niets. */
.bb-postcodecheck__uitkomst { margin: 0; padding: 0; border-radius: var(--bb-radius); }
.bb-postcodecheck__uitkomst:not(:empty) { padding: 10px 14px; background: var(--bb-kaart); }
.bb-postcodecheck__uitkomst.is-ja { border-left: 4px solid var(--bb-open); }
.bb-postcodecheck__uitkomst.is-nee, .bb-postcodecheck__uitkomst.is-fout { border-left: 4px solid #B88A2E; }
.bb-postcodecheck__uitkomst .bb-link-pijl { white-space: nowrap; }
.bb-postcodekaart { gap: 14px !important; }