/* Montage-zoek UI — videofragmenten.php */

.vf-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.vf-title{font-size:32px;font-weight:700;color:#000;margin:0;letter-spacing:-.02em}
.vf-subtitle{font-size:15px;color:#86868b;margin:8px 0 0;max-width:640px;line-height:1.45}
.vf-stats{display:flex;gap:16px;flex-shrink:0;flex-wrap:wrap}
.vf-stat{
  padding:16px 24px;background:#f5f5f7;border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.vf-stat__label{font-size:11px;color:#86868b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.vf-stat__value{font-size:28px;font-weight:700;color:#000}

.vf-search-block{
  background:#fff;border-radius:16px;padding:20px 24px;margin-bottom:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.vf-search-block__label{
  font-size:13px;font-weight:600;color:#1d1d1f;margin-bottom:10px;display:block;
}
.vf-search-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.vf-search-wrap{position:relative;flex:1;min-width:240px}
.vf-search-wrap::before{
  content:'🎬';position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:16px;opacity:.6;pointer-events:none;
}
.vf-search-wrap input{
  width:100%;padding:14px 14px 14px 42px;font-size:16px;
  border:1px solid #d2d2d7;border-radius:12px;background:#f5f5f7;
  font-family:inherit;box-sizing:border-box;
}
.vf-search-wrap input:focus{
  outline:none;border-color:#0071e3;background:#fff;
  box-shadow:0 0 0 4px rgba(0,113,227,.15);
}
.vf-search-btn{
  padding:0 20px;font-size:15px;font-weight:600;border:none;border-radius:12px;
  background:#0071e3;color:#fff;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.vf-search-btn:hover{background:#0077ed}
.vf-search-btn:disabled{opacity:.5;cursor:default}

.vf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vf-chip{
  padding:6px 12px;font-size:12px;border-radius:999px;border:1px solid #d2d2d7;
  background:#f5f5f7;color:#1d1d1f;cursor:pointer;font-family:inherit;
}
.vf-chip:hover{border-color:#0071e3;color:#0071e3;background:#fff}

.vf-filter{margin-bottom:24px}
.vf-filter-wrap{position:relative;max-width:100%}
.vf-filter-wrap::before{
  content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:16px;opacity:.5;pointer-events:none;
}
.vf-filter input{
  width:100%;padding:12px 14px 12px 40px;font-size:15px;
  border:1px solid #d2d2d7;border-radius:10px;background:#f5f5f7;
  font-family:inherit;
}
.vf-filter input:focus{outline:none;border-color:#0071e3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.15)}

.vf-results{margin-bottom:32px}
.vf-results__summary{
  font-size:14px;color:#86868b;margin-bottom:16px;line-height:1.5;
}
.vf-results__summary strong{color:#1d1d1f}
.vf-results__empty{
  background:#fff;border-radius:12px;padding:24px;color:#86868b;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

.vf-tier{margin-bottom:28px}
.vf-tier__head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.vf-tier__title{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.vf-tier__count{font-size:13px;color:#86868b;font-weight:500}
.vf-tier__hint{font-size:12px;color:#86868b;width:100%;margin:0}

.vf-tier--zeker .vf-tier__title{color:#047857}
.vf-tier--minder .vf-tier__title{color:#b45309}
.vf-tier--variatie .vf-tier__title{color:#6b7280}

.vf-tier__badge{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;
}
.vf-tier--zeker .vf-tier__badge{background:#d1fae5;color:#047857}
.vf-tier--minder .vf-tier__badge{background:#fef3c7;color:#b45309}
.vf-tier--variatie .vf-tier__badge{background:#f3f4f6;color:#6b7280}

.vf-hits{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}

.vf-grid{display:flex;flex-direction:column;gap:24px}
.vf-card{
  background:#fff;border-radius:16px;padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.vf-card__header{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.vf-card__name{font-size:22px;font-weight:700;color:#000;margin:0;letter-spacing:-.02em}
.vf-card__count{font-size:15px;color:#86868b;font-weight:400}
.vf-videos{
  list-style:none;margin:0;padding:0;flex:1;
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:16px;
  overflow-x:auto;padding-bottom:8px;
}
.vf-videos::-webkit-scrollbar{height:8px}
.vf-videos::-webkit-scrollbar-track{background:#f5f5f7;border-radius:4px}
.vf-videos::-webkit-scrollbar-thumb{background:#d2d2d7;border-radius:4px}

.vf-video-item{
  flex:0 0 180px;border-radius:12px;overflow:visible;
  background:#fff;border:1px solid #e8e8ed;position:relative;
  display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.vf-hits .vf-video-item{flex:none;width:auto}
.vf-video-item--hit{border-color:#e8e8ed}
.vf-video-item--zeker{border-color:#6ee7b7}
.vf-video-item--minder{border-color:#fcd34d}
.vf-video-item--variatie{border-color:#d1d5db}

.vf-video-item__thumb-wrap{
  aspect-ratio:16/9;position:relative;cursor:pointer;
  background:#1d1d1f;border-radius:10px;overflow:hidden;
}
.vf-video-item__del{
  position:absolute;top:8px;right:8px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vf-video-item__del:hover{background:rgba(0,0,0,.7)}
.vf-video-item__del svg{width:18px;height:18px;fill:#fff}
.vf-video-item video{width:100%;height:100%;object-fit:contain;display:block}
.vf-video-item__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);cursor:pointer;opacity:0;transition:opacity .15s;z-index:1;
}
.vf-video-item:hover .vf-video-item__play{opacity:1}
.vf-video-item__play-btn{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.vf-video-item__meta{padding:10px 4px 4px}
.vf-video-item__band{font-size:13px;font-weight:600;color:#1d1d1f;margin-bottom:4px}
.vf-video-item__usable{font-size:12px;color:#4b5563;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vf-video-item__reasons{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.vf-reason{
  font-size:10px;padding:2px 6px;border-radius:4px;background:#f3f4f6;color:#6b7280;
}
.vf-video-item__name{
  font-family:monospace;word-break:break-all;color:#86868b;
  font-size:8px;line-height:1.35;
}
.vf-video-item__score{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff;
}

.vf-upload{
  width:200px;padding:10px 16px;font-size:13px;white-space:nowrap;
  border:1px dashed #d2d2d7;border-radius:10px;
  background:#f5f5f7;cursor:pointer;color:#86868b;flex-shrink:0;text-align:center;
}
.vf-upload:hover{background:#e8e8ed;border-color:#0071e3;color:#0071e3}
.vf-empty,.vf-loading{color:#86868b;font-size:15px}
.vf-library-head{
  font-size:13px;font-weight:600;color:#86868b;text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 12px;
}
.vf-library--hidden{display:none}
.vf-index-warn{
  font-size:13px;color:#b45309;background:#fffbeb;border:1px solid #fcd34d;
  border-radius:10px;padding:10px 14px;margin-bottom:16px;
}