/**
 * In mijn buurt – Concurrentietool
 * Extern CSS voor cachebaarheid en snellere herhaalde loads.
 */
.bconc-page {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem);
  background: #fff;
  color: #1e293b;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .bconc-page {
    max-width: 1100px;
  }
}
.bconc-page h1 {
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  color: #1e293b;
}
.bconc-page .lead {
  color: #64748b;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.bconc-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.bconc-form label {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.bconc-form input[type="text"],
.bconc-form input[type="number"] {
  width: 100%;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}
.bconc-form .field:has(#bconc-plaatsnaam) input {
  max-width: 340px;
}
.bconc-form .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.bconc-form .row:last-of-type {
  margin-bottom: 0;
}
.bconc-form .field {
  flex: 0 0 auto;
}
.bconc-form .field.straal {
  max-width: 100px;
}
.bconc-form .field.bedrijf {
  max-width: 320px;
}
.bconc-form button[type="submit"],
.bconc-form .btn-kvk {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.bconc-form button[type="submit"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.bconc-form button[type="submit"]:hover {
  opacity: 0.95;
}
.bconc-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bconc-form .btn-kvk {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
  margin-left: 0.5rem;
}
.bconc-form .btn-kvk:hover {
  background: #e2e8f0;
}
.bconc-form .btn-kvk:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bconc-row-bedrijf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}
.bconc-result-wrap {
  margin-top: 1rem;
  display: none;
}
.bconc-result-wrap.visible {
  display: block;
}
.bconc-result {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  color: #334155;
}
.bconc-result h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: #334155;
}
.bconc-result .message {
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.bconc-result .error {
  color: #b91c1c;
  background: #fef2f2;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.bconc-regio {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  font-size: 0.9rem;
}
.bconc-filter {
  margin-bottom: 0.75rem;
}
.bconc-filter input {
  width: 100%;
  max-width: 400px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.bconc-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.bconc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.bconc-table th,
.bconc-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
.bconc-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #475569;
}
.bconc-table tr:hover {
  background: #f8fafc;
}
.bconc-table td.col-wat {
  max-width: 320px;
  min-width: 140px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.bconc-table td.col-actie {
  white-space: nowrap;
}
.bconc-count {
  font-size: 1rem;
  color: #0f766e;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.bconc-table a {
  color: #0d9488;
  text-decoration: none;
}
.bconc-table a:hover {
  text-decoration: underline;
}
.bconc-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.bconc-actions .btn-download {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  text-decoration: none;
  display: inline-block;
}
.bconc-actions .btn-download:hover {
  background: #f1f5f9;
}
.bconc-links {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
.bconc-links a {
  color: #334155;
  text-decoration: none;
}
.bconc-links a:hover {
  text-decoration: underline;
  color: #0d9488;
}
#bconc-loading {
  display: none;
  padding: 1rem;
  color: #64748b;
  align-items: center;
  gap: 0.75rem;
}
#bconc-loading.visible {
  display: flex;
}
.bconc-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #e2e8f0;
  border-top-color: #0d9488;
  border-radius: 50%;
  animation: bconc-spin 0.7s linear infinite;
}
@keyframes bconc-spin {
  to {
    transform: rotate(360deg);
  }
}
.bconc-kvk-multiple {
  margin-top: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: none;
}
.bconc-kvk-multiple.visible {
  display: block;
}
.bconc-kvk-multiple h4 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem 0;
  color: #334155;
}
.bconc-kvk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.bconc-kvk-list li {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 6px;
}
.bconc-kvk-list li:hover {
  background: #f0fdfa;
}
.bconc-kvk-list .name {
  font-weight: 600;
  color: #0f172a;
}
.bconc-kvk-list .meta {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 0.2rem;
}
.bconc-loaded {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 10px;
  font-size: 0.9rem;
  display: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.bconc-loaded.visible {
  display: block;
}
.bconc-loaded strong {
  color: #0f766e;
}
.bconc-sbi-wrap {
  position: relative;
  max-width: 360px;
  margin-top: 0.75rem;
}
.bconc-sbi-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.bconc-sbi-dropdown.visible {
  display: block;
}
.bconc-sbi-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
}
.bconc-sbi-item:hover {
  background: #e8f4fd;
}
.bconc-sbi-item:last-child {
  border-bottom: none;
}
.bconc-status.error {
  color: #b91c1c;
}
.bconc-status.ok {
  color: #0f766e;
}
.bconc-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #64748b;
  min-height: 1.2em;
}
.bconc-sbi-wrap .bconc-form input#bconc-branche,
.bconc-sbi-wrap input#bconc-branche {
  width: 100%;
  max-width: 360px;
}
.bconc-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
}
#bconc-result-wrap.visible .bconc-result h3 {
  scroll-margin-top: 1rem;
}
.bconc-website-uitleg {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}
.bconc-result .error p {
  margin-top: 0.75rem;
}
.bconc-actie-muted {
  color: #94a3b8;
}
.bconc-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.bconc-icon-google {
  width: 14px;
  height: 14px;
}
.bconc-table .col-actie a {
  display: inline-flex;
  align-items: center;
}

/* Modal Rapport op maat */
.bconc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bconc-modal[hidden] {
  display: none;
}
.bconc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.bconc-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.bconc-modal-content h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #1e293b;
}
.bconc-modal-intro {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 1.25rem;
}
.bconc-rapport-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bconc-modal-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  margin-bottom: 0.25rem;
}
.bconc-modal-label input[type="email"],
.bconc-modal-label input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}
.bconc-modal-label .required {
  color: #b91c1c;
}
.bconc-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.bconc-modal-actions .bconc-modal-close {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.bconc-dashboard-cta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #64748b;
}
.bconc-dashboard-cta a {
  color: #0d9488;
  text-decoration: none;
}
.bconc-dashboard-cta a:hover {
  text-decoration: underline;
}
