/* Bollaert FAQ Chatbot v1.7.9 */

/* ---- CSS custom properties (fallbacks; echte waarden via PHP inline style) ---- */
:root {
	--bfc-primary:      #3399cc;
	--bfc-primary-dark: #2b82ae;
	--bfc-white:        #ffffff;
	--bfc-gray-50:      #f7f9fb;
	--bfc-gray-100:     #eff2f6;
	--bfc-gray-200:     #e3e8ef;
	--bfc-gray-400:     #9aa3af;
	--bfc-gray-600:     #5a6370;
	--bfc-gray-900:     #1a1f26;
	--bfc-radius:       14px;
	--bfc-radius-sm:    9px;
	--bfc-shadow:       0 10px 36px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.07);
	--bfc-shadow-btn:   0 4px 18px rgba(51,153,204,0.38);
	--bfc-ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--bfc-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--bfc-w:            360px;
	--bfc-z:            9999;
}

/* ---- Wrapper ---- */
#bfc-chatbot {
	position:       fixed;
	bottom:         24px;
	right:          24px;
	z-index:        var(--bfc-z);
	font-family:    var(--bfc-font);
	line-height:    1;
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
}

/* ---- Toggle knop ---- */
#bfc-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           56px;
	height:          56px;
	border-radius:   50%;
	border:          none;
	background:      linear-gradient(140deg, var(--bfc-primary) 0%, var(--bfc-primary-dark) 100%);
	cursor:          pointer;
	box-shadow:      var(--bfc-shadow-btn);
	transition:      transform 0.2s var(--bfc-ease), box-shadow 0.2s var(--bfc-ease);
	position:        relative;
}

#bfc-toggle:hover {
	transform:   scale(1.09);
	box-shadow:  0 6px 22px rgba(51,153,204,0.48);
}

#bfc-toggle:active {
	transform: scale(0.96);
}

#bfc-toggle:focus-visible {
	outline:        3px solid rgba(51,153,204,0.55);
	outline-offset: 3px;
}

.bfc-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.bfc-icon-close {
	display: none;
}

/* ---- Label onder toggle ---- */
.bfc-toggle-label {
	font-size:      11.5px;
	font-weight:    600;
	color:          var(--bfc-gray-900);
	background:     var(--bfc-white);
	padding:        4px 10px;
	border-radius:  20px;
	box-shadow:     0 2px 10px rgba(0,0,0,0.13);
	margin-top:     7px;
	white-space:    nowrap;
	pointer-events: none;
	transition:     opacity 0.2s var(--bfc-ease), transform 0.2s var(--bfc-ease);
}

#bfc-toggle[aria-expanded="true"] ~ .bfc-toggle-label {
	opacity:   0;
	transform: translateY(4px);
}

/* ---- Chatvenster ---- */
#bfc-window {
	position:        absolute;
	bottom:          68px;
	right:           0;
	width:           var(--bfc-w);
	height:          520px;
	background:      var(--bfc-white);
	border-radius:   var(--bfc-radius);
	box-shadow:      var(--bfc-shadow);
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
	max-height:      calc(100vh - 116px);
	transform-origin: bottom right;
	transform:        scale(0.90) translateY(10px);
	opacity:          0;
	pointer-events:   none;
	transition:       transform 0.24s var(--bfc-ease),
	                  opacity   0.22s var(--bfc-ease);
}

#bfc-window.bfc-open {
	transform:     scale(1) translateY(0);
	opacity:       1;
	pointer-events: all;
}

/* ---- Header ---- */
.bfc-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         15px 16px 13px;
	background:      linear-gradient(130deg, var(--bfc-primary) 0%, var(--bfc-primary-dark) 100%);
	flex-shrink:     0;
}

.bfc-header-left {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.bfc-status-dot {
	width:        9px;
	height:       9px;
	border-radius: 50%;
	background:   #4cff91;
	box-shadow:   0 0 0 2.5px rgba(76,255,145,0.28);
	flex-shrink:  0;
	animation:    bfc-pulse 2.6s ease-in-out infinite;
}

@keyframes bfc-pulse {
	0%,100% { box-shadow: 0 0 0 2.5px rgba(76,255,145,0.28); }
	50%     { box-shadow: 0 0 0 6px   rgba(76,255,145,0.08); }
}

.bfc-status-dot--closed {
	background:  #e53535;
	box-shadow:  0 0 0 2.5px rgba(229,53,53,0.28);
	animation:   none;
}

.bfc-header-title {
	font-size:   13.5px;
	font-weight: 650;
	color:       var(--bfc-white);
	line-height: 1.25;
}

.bfc-header-sub {
	font-size:  10.5px;
	color:      rgba(255,255,255,0.72);
	margin-top: 2px;
}

.bfc-close-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	border-radius:   6px;
	border:          none;
	background:      rgba(255,255,255,0.16);
	cursor:          pointer;
	transition:      background 0.18s ease;
	flex-shrink:     0;
}

.bfc-close-icon {
	position:    relative;
	display:     block;
	width:       14px;
	height:      14px;
	flex-shrink: 0;
}

.bfc-close-icon::before,
.bfc-close-icon::after {
	content:          '';
	position:         absolute;
	width:            14px;
	height:           2px;
	background-color: #ffffff;
	border-radius:    1px;
	left:             0;
	top:              6px;
	transform-origin: center;
}

.bfc-close-icon::before { transform: rotate(45deg);  }
.bfc-close-icon::after  { transform: rotate(-45deg); }

.bfc-close-btn:hover {
	background: rgba(255,255,255,0.28);
}

.bfc-close-btn:focus-visible {
	outline:        2px solid rgba(255,255,255,0.75);
	outline-offset: 2px;
}

/* ---- Body ---- */
.bfc-body {
	display:             flex;
	flex-direction:      column;
	flex:                1 1 auto;
	overflow:            hidden;
	min-height:          0;
	overscroll-behavior: contain;
}

.bfc-view {
	flex:                1 1 auto;
	min-height:          0;
	overflow-y:          auto;
	padding:             20px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:     thin;
	scrollbar-color:     var(--bfc-gray-200) transparent;
}

.bfc-view::-webkit-scrollbar       { width: 4px; }
.bfc-view::-webkit-scrollbar-thumb { background: var(--bfc-gray-200); border-radius: 4px; }

.bfc-hidden {
	display: none;
}

/* ---- Introtekst ---- */
.bfc-intro {
	font-size:   13px;
	color:       var(--bfc-gray-400);
	margin:      0 0 18px;
	line-height: 1.5;
}

/* ---- FAQ lijst ---- */
.bfc-faq-list {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.bfc-faq-btn {
	width:        100%;
	text-align:   left;
	background:   var(--bfc-gray-50);
	border:       1.5px solid var(--bfc-gray-200);
	border-radius: var(--bfc-radius-sm);
	padding:      13px 15px;
	font-size:    13.5px;
	font-weight:  500;
	color:        var(--bfc-gray-600);
	cursor:       pointer;
	font-family:  var(--bfc-font);
	display:      flex;
	align-items:  center;
	justify-content: space-between;
	gap:          8px;
	line-height:  1.4;
	transition:   background      0.18s ease,
	              border-color    0.18s ease,
	              color           0.18s ease,
	              transform       0.18s ease;
}

.bfc-faq-btn:hover {
	background:   #e8f5fb;
	border-color: var(--bfc-primary);
	color:        var(--bfc-gray-900);
	transform:    translateX(2px);
}

.bfc-faq-btn:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 2px;
}

.bfc-faq-arrow {
	flex-shrink: 0;
	color:       var(--bfc-primary);
	opacity:     0.55;
	transition:  opacity 0.18s ease, transform 0.18s ease;
}

.bfc-faq-btn:hover .bfc-faq-arrow {
	opacity:   1;
	transform: translateX(2px);
}

.bfc-category-btn {
	font-weight: 650;
	color:       var(--bfc-gray-900);
}

.bfc-category-back {
	align-self:    flex-start;
	margin-bottom: 6px;
}

/* ---- Antwoordweergave ---- */
.bfc-back-btn {
	display:     flex;
	align-items: center;
	gap:         5px;
	background:  none;
	border:      none;
	cursor:      pointer;
	font-family: var(--bfc-font);
	font-size:   12px;
	font-weight: 500;
	color:       var(--bfc-primary);
	padding:     0;
	margin-bottom: 18px;
	transition:  opacity 0.18s ease;
}

.bfc-back-btn:hover { opacity: 0.72; }

.bfc-back-btn:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 3px;
	border-radius:  3px;
}

.bfc-answer-card {
	background:    var(--bfc-gray-50);
	border:        1.5px solid var(--bfc-gray-200);
	border-radius: var(--bfc-radius-sm);
	padding:       18px;
}

.bfc-answer-qline {
	font-size:      11px;
	font-weight:    650;
	color:          var(--bfc-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:         0 0 12px;
	line-height:    1.3;
}

.bfc-answer-body {
	font-size:   13.5px;
	color:       var(--bfc-gray-600);
	line-height: 1.7;
}

.bfc-answer-actions {
	margin-top:     16px;
	display:        flex;
	flex-direction: column;
	gap:            9px;
}

/* Primaire actieknop */
.bfc-action-btn {
	display:       block;
	padding:       11px 16px;
	background:    var(--bfc-primary);
	color:         var(--bfc-white) !important;
	border-radius: var(--bfc-radius-sm);
	font-size:     13px;
	font-weight:   500;
	font-family:   var(--bfc-font);
	text-decoration: none;
	text-align:    center;
	border:        none;
	cursor:        pointer;
	transition:    background 0.18s ease, transform 0.18s ease;
	line-height:   1.4;
}

.bfc-action-btn:hover {
	background:      var(--bfc-primary-dark);
	transform:       translateY(-1px);
	color:           var(--bfc-white) !important;
	text-decoration: none;
}

.bfc-action-btn:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 3px;
}

/* Secundaire (contact)knop */
.bfc-action-btn-secondary {
	background:  transparent;
	color:       var(--bfc-primary) !important;
	border:      1.5px solid var(--bfc-primary);
}

.bfc-action-btn-secondary:hover {
	background: #e8f5fb;
	color:      var(--bfc-primary-dark) !important;
}

/* ---- Was dit nuttig? ---- */
.bfc-vote-wrap {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin-top:  14px;
	padding-top: 13px;
	border-top:  1px solid var(--bfc-gray-200);
	flex-wrap:   wrap;
}

.bfc-vote-label {
	font-size:   12px;
	font-weight: 500;
	color:       var(--bfc-gray-400);
	flex-shrink: 0;
}

.bfc-vote-btns {
	display: flex;
	gap:     6px;
}

.bfc-vote-btn {
	display:      flex;
	align-items:  center;
	gap:          5px;
	padding:      5px 13px;
	border:       1.5px solid var(--bfc-gray-200);
	border-radius: 20px;
	background:   var(--bfc-white);
	cursor:       pointer;
	font-size:    12.5px;
	font-weight:  500;
	color:        var(--bfc-gray-600);
	font-family:  var(--bfc-font);
	transition:   border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
	line-height:  1;
}

.bfc-vote-btn:hover {
	border-color: var(--bfc-primary);
	color:        var(--bfc-primary);
	background:   #e8f5fb;
}

.bfc-vote-up:hover   { border-color: #2a9d5c; color: #2a9d5c; background: #eaf7ee; }
.bfc-vote-down:hover { border-color: #e74c3c; color: #e74c3c; background: #fef0ef; }

.bfc-vote-btn--selected.bfc-vote-up   { border-color: #2a9d5c; background: #2a9d5c; color: #fff; }
.bfc-vote-btn--selected.bfc-vote-down { border-color: #e74c3c; background: #e74c3c; color: #fff; }

.bfc-vote-thanks {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin-top:  12px;
	font-size:   12.5px;
	font-weight: 500;
	color:       #2a9d5c;
}

/* ---- Footer ---- */
.bfc-footer {
	padding:     7px 16px 8px;
	border-top:  1px solid var(--bfc-gray-100);
	background:  var(--bfc-white);
	flex-shrink: 0;
}

.bfc-footer-text {
	font-size:      10px;
	color:          var(--bfc-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
	#bfc-chatbot { bottom: 14px; right: 14px; }
	#bfc-window  { width: calc(100vw - 28px); }
}