/* =========================================================
   NobarTV LiveScore v7.0 — search.css
   Styles untuk fitur pencarian (search.js).
   ========================================================= */

/* ── Search toggle button (di header kanan) ──────────────── */

.nbtv-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.75);
    border-radius: var(--nbtv-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}

.nbtv-search-btn:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.35);
    color: #fff;
    transform: translateY(-1px);
}

.nbtv-search-btn:active { transform: translateY(0); }

.nbtv-search-btn.nbtv-search-btn-active {
    background: rgba(249,115,22,.2);
    border-color: var(--nbtv-orange);
    color: var(--nbtv-orange);
}

/* ── Search bar (collapsible row antara header dan date-nav) ─ */

.nbtv-search-bar {
    overflow: hidden;
    max-height: 0;
    background: var(--nbtv-navy-mid);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: max-height .25s ease, padding .25s ease, border-color .25s ease;
    padding: 0 12px;
}

.nbtv-search-bar.nbtv-search-open {
    max-height: 64px;
    padding: 8px 12px;
}

.nbtv-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--nbtv-radius-md);
    padding: 6px 10px;
    transition: border-color .15s, background .15s;
}

.nbtv-search-inner:focus-within {
    border-color: rgba(249,115,22,.5);
    background: rgba(255,255,255,.10);
}

.nbtv-search-icon-sm {
    flex-shrink: 0;
    color: rgba(255,255,255,.45);
}

.nbtv-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: var(--nbtv-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .1px;
    min-width: 0;
    caret-color: var(--nbtv-orange);
}

.nbtv-search-input::placeholder {
    color: rgba(255,255,255,.35);
}

/* Hapus default search input styles di berbagai browser */
.nbtv-search-input::-webkit-search-decoration,
.nbtv-search-input::-webkit-search-cancel-button,
.nbtv-search-input::-webkit-search-results-button,
.nbtv-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* ── Result count ── */
.nbtv-search-count {
    font-family: var(--nbtv-mono);
    font-size: 11px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .2px;
    transition: color .15s;
}

.nbtv-search-count.nbtv-search-count-empty {
    color: #f87171;
}

/* ── Clear button ── */
.nbtv-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.12);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    padding: 0;
}

.nbtv-search-clear:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* ── Searching mode — visual cue ── */
.nbtv-wrapper.nbtv-searching .nbtv-filter-bar {
    display: none !important; /* sembunyikan filter pills saat search aktif */
}

/* ── Saat pencarian aktif: liga yang cocok SELALU terbuka ──
   Override max-height collapse agar hasil pencarian langsung terlihat
   tanpa perlu buka-tutup bar liga secara manual.               ── */
.nbtv-searching .nbtv-league:not(.nbtv-search-hidden) .nbtv-league-body {
    max-height: 9999px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;   /* langsung tampil, tanpa animasi */
}

/* Sembunyikan tombol chevron saat searching — tidak relevan */
.nbtv-searching .nbtv-league:not(.nbtv-search-hidden) .nbtv-chevron {
    opacity: 0;
    pointer-events: none;
}

/* ── Match hidden by search ── */
/* (defined in style.css — .nbtv-match.nbtv-search-hidden & .nbtv-league.nbtv-search-hidden) */

/* ─── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .nbtv-search-bar.nbtv-search-open { max-height: 56px; padding: 6px 10px; }
    .nbtv-search-input                { font-size: 12px; }
    .nbtv-search-count                { font-size: 10px; }
}

@media (max-width: 360px) {
    .nbtv-search-btn { width: 30px; height: 30px; }
}