/* TOPBAR (NAV + SEARCH) */
.header{padding:0;display:flex;align-items:center}
.header .container{height:100%;display:flex;align-items:center;gap:14px;padding:0}
.header-left{display:flex;align-items:center;gap:16px;min-width:0}
.header-nav{display:flex;align-items:center;gap:8px;min-width:0}
.header-search{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:280px;max-width:520px;flex:1}
.header-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.search{
  flex:1;height:44px;padding:0 16px;border-radius:16px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text);outline:none;font-size:14px;
  transition:all .15s ease;appearance:none;-webkit-appearance:none;
}
.search::placeholder{color:var(--muted)}
.search:focus{border-color:rgba(255,77,90,.45);box-shadow:0 0 0 4px rgba(255,77,90,.10)}
#clearSearch{height:44px;min-width:44px;padding:0}

.filters-inline,
.popular-block{
  width:100%;
  padding:18px;
  gap:12px;
  border-radius:30px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(14,20,36,.84), rgba(8,12,22,.92));
  box-shadow:var(--shadow-md);
}
.filters-inline{display:flex;align-items:flex-end;flex-wrap:wrap;margin-top:18px}
.filters-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;width:100%}
.fi{display:flex;flex-direction:column;gap:8px;min-width:140px}
.fi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.fi-btn{
  height:34px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  cursor:pointer;padding:0 12px;text-align:left
}
.fi-btn:hover{border-color:rgba(255,255,255,.14)}
.fi-years{display:flex;gap:8px}
.fi-small{min-width:120px}
.fi-grow{flex:1;min-width:220px}
.fi-actions{display:flex;gap:10px;align-items:center;margin-left:auto}

.popular-block{margin-top:18px}
.popular-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.popular-title{font-weight:900;font-size:18px;letter-spacing:-.02em}
.popular-row{display:flex;gap:16px;overflow:auto;scroll-behavior:smooth;padding:0 48px 6px;scrollbar-width:none}
.popular-row::-webkit-scrollbar{display:none}
.popular-strip{position:relative}
.popular-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(7,11,20,.76);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;backdrop-filter:blur(8px)
}
.popular-arrow:hover{border-color:rgba(255,255,255,.22)}
.popular-arrow-prev{left:0}.popular-arrow-next{right:0}
.popular-row .movie-card{flex:0 0 auto;width:200px}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:14px 0 16px}
.section-head h2{margin:0;font-size:28px;letter-spacing:-.03em}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);font-size:12px
}
.chip strong{color:var(--text)}
.chip button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}

.popover{
  position:fixed;top:calc(var(--topbar-h) + 24px);left:300px;width:360px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 140px);background:linear-gradient(180deg,rgba(18,26,46,.98),rgba(8,12,22,.98));
  border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:4000;overflow:hidden
}
.popover.open{display:flex}
.popover-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border)}
.popover-title{font-weight:700}
.popover-body{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.gline{display:flex;gap:10px;align-items:center}
.gline input{accent-color:var(--accent)}
.gline span{font-size:13px}

.seg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:4px;gap:4px}
.seg-btn{height:30px;padding:0 12px;border-radius:10px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;white-space:nowrap}
.seg-btn.active{background:rgba(255,77,90,.18);color:var(--text)}
.seg-btn:hover{color:var(--text)}

@media(max-width:900px){
  .header .container{padding:0}
  .header-nav{overflow:auto;scrollbar-width:none}
  .header-nav::-webkit-scrollbar{display:none}
  .header-search{min-width:180px;max-width:none}
  .filters-inline,.popular-block{padding:14px 12px;border-radius:24px}
  .fi{min-width:132px}
  .fi-small{min-width:110px}
  .fi-years{gap:6px}
  .fi-actions{margin-left:0}
  .popover{left:12px}
}