/* ==========================================================================
   COMING ONLINE — Stripotica
   Bevat: .stl-* (herbruikbare lijst/hero/kaart-basis) + .cos-* (specifiek
   voor de coming-online pagina: zoekbalk, countdown-badge, confidence)
   ========================================================================== */

/* ── Streamer List (stl-*) ── */
.stl-wrap { max-width:1400px; margin:0 auto; padding:0 20px 60px; }

/* Hero */
.stl-hero { background:linear-gradient(135deg, #fff 0%, #fff5f8 100%); border:1px solid rgba(233,30,140,.12); border-radius:12px; padding:28px 24px 20px; margin-bottom:20px; }
.stl-hero__title { font-size:24px; font-weight:800; color:#1a1a1a; margin:0 0 6px; }
.stl-hero__title span { color:#e91e8c; }
.stl-hero__sub { font-size:13px; color:#6b7280; margin:0 0 16px; }
.stl-hero__stats { display:flex; flex-wrap:wrap; gap:8px; }
.stl-hero__stat { display:inline-flex; align-items:center; gap:6px; padding:4px 14px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; font-size:12px; color:#6b7280; }
.stl-hero__stat strong { color:#1a1a1a; font-weight:700; }
.stl-hero__stat i { color:#e91e8c; }

/* Filter bar */
.stl-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; padding:12px 16px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; }
.stl-filters__label { font-size:12px; font-weight:600; color:#6b7280; display:flex; align-items:center; gap:4px; }
.stl-select { height:32px; padding:0 28px 0 10px; font-size:12px; border:1px solid rgba(0,0,0,.1); border-radius:100px; background-color:#f5f5f5; color:#1a1a1a; cursor:pointer; font-family:inherit; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; transition:border-color .15s; }
.stl-select:hover, .stl-select:focus { border-color:rgba(233,30,140,.35); }
.stl-check { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#6b7280; cursor:pointer; user-select:none; }
.stl-check input { accent-color:#e91e8c; width:14px; height:14px; cursor:pointer; }
.stl-count { margin-left:auto; font-size:12px; color:#9ca3af; font-weight:600; }

/* Grid */
.stl-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
@media(max-width:1100px) { .stl-grid { grid-template-columns:repeat(3, 1fr); } }
@media(max-width:768px)  { .stl-grid { grid-template-columns:repeat(2, 1fr); } }
@media(max-width:420px)  { .stl-grid { grid-template-columns:1fr; } }

/* Card */
.stl-card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; overflow:hidden; transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.stl-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(233,30,140,.1); border-color:rgba(233,30,140,.2); text-decoration:none; color:inherit; }
.stl-card.is-live { border-color:rgba(34,197,94,.25); }

/* Card image */
.stl-card__img { position:relative; aspect-ratio:3/4; overflow:hidden; background:#e8e8e8; }
.stl-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.stl-card:hover .stl-card__img img { transform:scale(1.04); }

/* Badges */
.stl-card__badges { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; z-index:2; }
.stl-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.04em; }
.stl-badge--live { background:#22c55e; color:#fff; }
.stl-badge--sites { background:rgba(233,30,140,.9); color:#fff; }

/* Stats overlay */
.stl-card__stats-overlay { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; align-items:flex-end; gap:3px; z-index:2; }
.stl-viewers { background:rgba(0,0,0,.6); color:#fff; padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; backdrop-filter:blur(4px); display:flex; align-items:center; gap:3px; }
.stl-hours { background:rgba(0,0,0,.5); color:rgba(255,255,255,.9); padding:2px 7px; border-radius:4px; font-size:10px; font-weight:600; backdrop-filter:blur(4px); }

/* Card info */
.stl-card__info { padding:12px; flex:1; display:flex; flex-direction:column; gap:6px; }
.stl-card__name { font-size:14px; font-weight:700; color:#1a1a1a; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stl-card__meta { font-size:11px; color:#9ca3af; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.stl-card__meta span { display:inline-flex; align-items:center; gap:3px; }
.stl-card__site-list { font-size:11px; color:#6b7280; margin:0; line-height:1.4; }

/* No results */
.stl-empty { text-align:center; padding:60px 20px; }
.stl-empty i { font-size:48px; color:#d1d5db; display:block; margin-bottom:12px; }
.stl-empty h3 { font-size:18px; color:#1a1a1a; margin:0 0 6px; }
.stl-empty p { color:#6b7280; }

/* Pagination */
.stl-pagination { text-align:center; padding:24px 0; }
.stl-pagination__nav { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; }
.stl-page-link { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid rgba(0,0,0,.1); border-radius:6px; background:#fff; color:#1a1a1a; font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; }
.stl-page-link:hover { border-color:#e91e8c; color:#e91e8c; background:#fce4ec; }
.stl-page-link.active { background:#e91e8c; border-color:#e91e8c; color:#fff; }
.stl-page-link.disabled { color:#d1d5db; pointer-events:none; }
.stl-pagination__info { font-size:12px; color:#9ca3af; margin-top:8px; }

/* Footer SEO */
.stl-footer { margin-top:32px; padding:28px 24px; background:linear-gradient(135deg, #fff 0%, #fff5f8 100%); border:1px solid rgba(233,30,140,.1); border-radius:12px; }
.stl-footer h2 { font-size:18px; font-weight:700; color:#1a1a1a; margin:0 0 12px; }
.stl-footer p { font-size:14px; color:#6b7280; line-height:1.75; margin:0 0 10px; }
.stl-footer p:last-child { margin-bottom:0; }

@media(max-width:600px) {
    .stl-hero { padding:20px 16px 16px; }
    .stl-hero__title { font-size:20px; }
    .stl-filters { padding:10px 12px; }
}

/* ── Coming Online specifics (cos-*) ── */

/* Search box */
.cos-search{position:relative;max-width:420px;margin:0 0 16px}
.cos-search i.bi-search{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:13px;pointer-events:none}
.cos-search input{width:100%;height:38px;padding:0 14px 0 36px;font-size:13px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#fff;color:#1a1a1a;font-family:inherit;outline:none;transition:border-color .15s}
.cos-search input:focus{border-color:rgba(233,30,140,.4)}
.cos-search__results{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow-y:auto;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:50}
.cos-search__empty{padding:16px;text-align:center;font-size:12px;color:#9ca3af}
.cos-search__item{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;color:inherit;transition:background .15s;border-bottom:1px solid rgba(0,0,0,.04)}
.cos-search__item:last-child{border-bottom:none}
.cos-search__item:hover{background:#fff5f8}
.cos-search__item img{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#e8e8e8}
.cos-search__item-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cos-search__item-name{font-size:12px;font-weight:700;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cos-search__status{font-size:10px;color:#6b7280}
.cos-search__status--live{color:#16a34a;font-weight:700;text-transform:uppercase}
.cos-search__status--muted{color:#9ca3af}

/* Countdown badge */
.cos-badge--countdown{background:#e91e8c;color:#fff}

/* Confidence indicator */
.cos-conf{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:11px;backdrop-filter:blur(4px)}
.cos-conf--high{color:#22c55e}
.cos-conf--medium{color:#f59e0b}
.cos-conf--low{color:#9ca3af}

/* Card expected-time line */
.cos-card__expected{font-size:11px;color:#6b7280;margin:2px 0 0}
.cos-card__expected strong{color:#e91e8c;font-weight:700}