/* ============================================================================
 * 슬롯 게임목록 모달 — 게임명 검색 (전 스킨 공용 기본)
 * _GamePopup.cshtml 이 body 끝에서 로드 → head 의 스킨 CSS 보다 나중에 적용됨.
 * 여기는 낮은 특이도(단일 클래스)만 사용하고, 스킨 오버라이드는
 * ".game-popup .game-popup-search-input" 처럼 특이도 상위로 작성해 이기게 한다.
 * 색은 반투명 회색 기반이라 라이트/다크 어느 스킨에서도 무난히 동작(오버라이드 없어도 안 깨짐).
 * ========================================================================== */

/* 좁은 화면에서 검색줄이 타이틀 아래로 내려갈 수 있게 (스킨들은 flex-wrap 미지정 = 충돌 없음) */
.game-popup-header { flex-wrap: wrap; }

.game-popup-search { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; }
.game-popup-search[hidden] { display: none; }

.game-popup-search-count { font-size: 12px; opacity: .75; white-space: nowrap; }

.game-popup-search-box { position: relative; display: inline-flex; align-items: center; }

.game-popup-search-icon {
    position: absolute; left: 11px; font-size: 12px; opacity: .55; pointer-events: none;
}

.game-popup-search-input {
    width: 200px; height: 34px; padding: 0 30px 0 30px;
    font-size: 16px; /* iOS 사파리 포커스 자동 줌 방지: 16px 미만 금지 */
    color: inherit;
    background: rgba(127, 127, 127, .12);
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 17px;
    outline: none;
}
.game-popup-search-input::placeholder { font-size: 13px; color: inherit; opacity: .55; }
.game-popup-search-input:focus { border-color: rgba(127, 127, 127, .7); }

.game-popup-search-clear {
    position: absolute; right: 6px; width: 20px; height: 20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(127, 127, 127, .4); color: inherit;
    border: none; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1;
}
.game-popup-search-clear[hidden] { display: none; }

/* 검색 필터 — 미일치 카드 숨김 (game.js 가 토글) */
.game-popup-list > li.is-hidden { display: none; }

/* 검색 0건 안내 */
.game-popup-search-empty { text-align: center; padding: 40px 0; font-size: 14px; opacity: .7; }
.game-popup-search-empty[hidden] { display: none; }

/* 모바일: 검색줄 전체 폭으로 타이틀 아래 배치 */
@media (max-width: 767px) {
    .game-popup-search { order: 3; width: 100%; margin-left: 0; margin-right: 0; }
    .game-popup-search-box { flex: 1; }
    .game-popup-search-input { width: 100%; }
    .game-popup-search-count { order: 2; }
}