/* Fotostap van de online trimboeking en de wachtlijst (2026-10-25): zelfde vorm als de pensionstap
   (.pv-foto-* in pension_extra.css). De salonkleur komt binnen via --bf-kleur op #bfStap. */
.bf-sub { margin: 6px 0 14px; color: #5b6470; }
.bf-kies { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 13px 22px; border-radius: 14px;
  background: var(--bf-kleur, #43A09A); color: #fff !important; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bf-kleur, #43A09A) 28%, transparent); }
.bf-kies:hover { filter: brightness(1.05); }
.bf-kies i { font-size: 16px; }
.bf-bezig { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #5b6470; font-size: 14px; }
.bf-bezig[hidden], .bf-meld[hidden] { display: none; }
.bf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e3e8f0; border-top-color: var(--bf-kleur, #43A09A); animation: bfSpin .8s linear infinite; }
@keyframes bfSpin { to { transform: rotate(360deg); } }
.bf-meld { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #fdecec; color: #b42318; font-size: 14px; }
.bf-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 16px; max-width: 560px; }
.bf-lijst:empty { display: none; }
.bf-foto { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #f2f4f9; }
.bf-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-foto-weg { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; padding: 0;
  background: rgba(17, 24, 39, .6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bf-foto-weg:hover { background: rgba(17, 24, 39, .85); }