/* Modern dark UI */
:root{
  --bg-0:#07080c;
  --bg-1:#0b0d14;
  --stroke:rgba(255,255,255,.08);
  --stroke-2:rgba(255,255,255,.12);
  --text:#e9ecf4;
  --muted:rgba(233,236,244,.72);
  --muted-2:rgba(233,236,244,.55);
  --accent:#f8bd04;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --maxw: 1380px;
}
*{ box-sizing:border-box; }
html,body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(4,7,16,.84), rgba(3,6,14,.94)),
    url('/taustakuva.webp') center center / cover fixed no-repeat;
}

.app{ min-height:100%; background: transparent; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(154,41,255,.18), transparent 48%),
    radial-gradient(700px 420px at 10% 30%, rgba(255,109,44,.10), transparent 42%),
    radial-gradient(700px 420px at 90% 28%, rgba(31,154,255,.14), transparent 42%);
  pointer-events:none;
  z-index:0;
}
.app, .topbar, .container, .modal{ position:relative; z-index:1; }
.container{
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 54px;
}
/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,8,18,.86), rgba(5,8,18,.58));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.topbar__inner{
  width: min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__icon{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  overflow:hidden;
}

.brand__title{ margin:0; font-size:20px; letter-spacing:.2px; }
.brand__subtitle{ margin:3px 0 0; font-size:12px; color:rgba(233,236,244,.82); }
.topbar__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.brand__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Segmented tabs */
.segmented{
  display:inline-flex;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}
.segmented__btn{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease, color .15s ease, border-color .15s ease;
}
.segmented__btn:hover{ transform: translateY(-1px); color: var(--text); }
.segmented__btn.is-active{
  background: linear-gradient(180deg, rgba(248,189,4,.18), rgba(255,255,255,.05));
  border-color: rgba(248,189,4,.22);
  color: var(--text);
}

/* Buttons */
.btn{
  appearance:none;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: var(--text);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: var(--shadow-soft);
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(248,189,4,.35);
  background: linear-gradient(180deg, rgba(248,189,4,.12), rgba(255,255,255,.03));
}
.icon-btn{
  width: 42px;height:42px;border-radius:999px;
  border: 1px solid var(--stroke-2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  display:grid; place-items:center;
}
#backToTopBtn{ display:none; }

/* Controls */
.controls{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(6,10,22,.78), rgba(8,10,18,.62));
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.controls__row{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
  gap: 12px;
}
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:12px; color: var(--muted); display:flex; align-items:center; gap:8px; }
.field select, .field input{
  width:100%;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(9,11,17,.65);
  color: var(--text);
  padding: 11px 12px;
  outline:none;
}
.controls__meta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  font-size: 12px;
}
.meta-note{ color: var(--muted-2); font-size: 12px; }

/* Grid */
.grid-wrap{ margin-top: 18px; }
.movie-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.movie-card{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(7,10,20,.88), rgba(7,10,20,.45));
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.movie-card:hover{
  transform: translateY(-3px);
  border-color: rgba(248,189,4,.22);
  box-shadow: var(--shadow);
}
.movie-card img{
  width:100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.03);
}
.movie-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 52%, rgba(7,8,12,.92) 100%);
  pointer-events:none;
}

/* Provider badges */
.provider-badges{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  z-index:3;
  max-width: calc(100% - 20px);
}

.provider-badges img{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 5px;
  background: rgba(8,10,18,.82);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}

.provider-badges .more{
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(233,236,244,.85);
  font-size: 11px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
}

.movie-info{
  position:absolute;
  left: 12px; right: 12px; bottom: 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-size: 12px;
}
.pill i{ color: var(--accent); }

.movie-card h2{
  position:absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index:1;
  margin:0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  text-shadow: 0 10px 25px rgba(0,0,0,.65);
}
.footer-actions{ display:flex; justify-content:center; margin-top: 18px; }

/* Modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index: 50;
  padding: 22px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:auto;
}
.modal-content{
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(15,18,32,.92), rgba(12,14,25,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(4,7,16,.84), rgba(3,6,14,.94)),
    url('/taustakuva.webp') center center / cover fixed no-repeat;
}

.modal-poster{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.modal-details{ min-width:0; }
.modal-details h2{ margin: 2px 0 10px; font-size: 22px; line-height: 1.2; }
.modal-details h2 i{ color: var(--accent); }
.modal-details p{ margin: 8px 0; color: var(--muted); line-height: 1.45; }
.modal-details p i{ color: var(--accent); margin-right: 8px; }

.actors{ margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.actors h3{ margin: 0 0 10px; font-size: 13px; color: var(--text); }
.actor{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width: 72px;
  margin: 6px 10px 0 0;
}
.actor img{
  width: 56px;height:56px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
}
.actor p{ margin:0; font-size: 12px; color: var(--muted-2); text-align:center; }

.close{
  position:absolute;
  top: 16px; right: 16px;
  width: 42px;height:42px;
  border-radius: 999px;
  border: 1px solid var(--stroke-2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:grid;place-items:center;
  cursor:pointer;
}
@media (max-width: 1100px){
  .movie-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px){
  .controls__row{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .topbar__inner{ width: min(var(--maxw), calc(100% - 20px)); padding: 12px 0; }
  .container{ width: min(var(--maxw), calc(100% - 20px)); }
  .brand__text{ display:none; }
  .controls__row{ grid-template-columns: 1fr; }
  .movie-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .segmented__btn span{ display:none; }
  .provider-badges img{ background: rgba(6,8,16,.94); }
}


/* =========================
   Plex-style modal
   ========================= */
.modal-content{
  background: transparent;
  border: 0;
  box-shadow: none;
}
.modal-plex{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background: rgba(12,14,25,.92);
}
.modal-plex__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.12);
  opacity: .55;
}
.modal-plex__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(248,189,4,.14), transparent 55%),
    linear-gradient(90deg, rgba(10,12,20,.92) 0%, rgba(10,12,20,.74) 38%, rgba(10,12,20,.88) 100%);
}
.modal-plex__content{
  position: relative;
  padding: 18px;
}
.modal-plex__grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}
.modal-plex__poster{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.modal-plex__poster--empty{
  height: 420px;
  display:grid;
  place-items:center;
  color: var(--muted);
  background: rgba(0,0,0,.22);
}
.modal-plex__cta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}
.watch-btn{
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(248,189,4,1), rgba(248,189,4,.86));
  color: #101015;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  box-shadow: 0 16px 35px rgba(0,0,0,.35);
}
.secondary-btn{
  flex: 1;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor:pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.modal-plex__facts{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  display:grid;
  gap: 10px;
}
.fact{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.fact .k{ color: var(--muted-2); }
.fact .v{ color: var(--text); text-align:right; }

.modal-plex__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}
.modal-plex__rating-wrap{
  flex: 0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.modal-plex__title{
  margin: 0;
  font-size: 34px;
  letter-spacing: .2px;
  line-height: 1.1;
}
.modal-plex__sub{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.modal-plex__sub .dot{ opacity:.7; }
.tmdb-ring{
  --rating-percent: 0;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(11,20,38,0.98) 58%, transparent 59%),
    conic-gradient(#19c3ff calc(var(--rating-percent) * 1%), rgba(255,255,255,0.10) 0);
  box-shadow: inset 0 0 0 6px rgba(4, 9, 18, 0.95), 0 18px 36px rgba(0,0,0,.30);
}
.tmdb-ring__inner{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(16,36,72,0.98), rgba(5,14,28,0.98));
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1;
}
.tmdb-ring__score{
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.rating-badge{
  width: 94px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.rating-badge__label{
  min-height: 2.3em;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-size:11px;
  line-height:1.15;
  font-weight:700;
  color:rgba(255,255,255,.78);
}
.modal-plex__rating{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.modal-plex__rating i{ color: var(--accent); }

.modal-plex__chips{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.genre-pill{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
}
.modal-plex__tagline{
  margin-top: 14px;
  color: var(--muted);
  font-style: italic;
}
.modal-plex__overview{
  margin-top: 14px;
  color: rgba(233,236,244,.90);
  line-height: 1.65;
  max-width: 76ch;
}
.modal-plex__overview-fallback-note{
  color: #f3cf63;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-plex__overview-fallback-text{
  color: rgba(233,236,244,.90);
}
.modal-plex__kv{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.kv{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  font-size: 12px;
}
.kv i{ color: var(--accent); }
.muted{ color: var(--muted-2); }

.modal-section{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.section-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.section-title i{ color: var(--accent); }

.provider-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.provider-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

.cast-line{
  color: var(--muted);
  line-height: 1.5;
}

.video-wrap{
  width: 100%;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.video-wrap iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  display:block;
}

.modal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.modal-close:hover{
  transform: translateY(-1px);
  border-color: rgba(248,189,4,.35);
  background: rgba(0,0,0,.45);
}

@media (max-width: 720px){
  .modal-plex__grid{ grid-template-columns: 1fr; }
  .modal-plex__poster{ max-width: 320px; }
  .modal-plex__header{ flex-direction: column; }
  .modal-plex__rating-wrap{ justify-content: flex-start; }
}


/* Provider logos under poster (modal) */
.modal-plex__providers-under{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Make modal provider logos larger */
.modal-plex__providers-under .provider-icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  padding: 6px;
}

.provider-icon--modal{
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px;
  padding: 9px;
  transition: transform .15s ease, box-shadow .15s ease;

  cursor: default;
}
.provider-icon--modal:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

.provider-badge-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  padding:5px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}


/* Skeleton loader */
.skeleton-card { pointer-events: none; }
.skeleton-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.skeleton-title {
  height: 16px;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.skeleton-pill {
  height: 26px;
  min-width: 84px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.skeleton-badges { min-height: 20px; }
.skeleton-poster::after,
.skeleton-title::after,
.skeleton-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(120%); }
}

/* Modal: original title */
.modal-plex__original {
  margin-top: 6px;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Cast slider */
.cast-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cast-card {
  flex: 0 0 auto;
  width: 88px;
  scroll-snap-align: start;
}
.cast-photo {
  width: 88px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.06);
}
.cast-photo--empty {
  width: 88px;
  height: 120px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.cast-name {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.1;
  opacity: 0.9;
}
/* =========================================================
   FINAL OVERRIDES (Plex modal responsiveness + trailer + cast)
   Keep your existing CSS above. Add this at the very end.
   ========================================================= */

/* Modal should center and allow internal scrolling */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  overflow: hidden;               /* prevent page-like scroll */
  display: none;                  /* JS toggles this */
  align-items: center;
  justify-content: center;
}

/* When JS sets display = 'block', we still want centering. */
.modal[style*="display: block"]{
  display: flex !important;
}

/* Constrain modal area to viewport */
.modal-content{
  width: min(980px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;                 /* KEY: scroll inside modal */
  -webkit-overflow-scrolling: touch;
  border-radius: 22px;
}

/* Plex container must not exceed viewport */
.modal-plex{
  max-height: calc(100vh - 28px);
  overflow: hidden;
}

/* Plex inner content scrolls if tall */
.modal-plex__content{
  max-height: calc(100vh - 28px);
  overflow: auto;                 /* KEY */
  -webkit-overflow-scrolling: touch;
}

/* Ensure grid can shrink properly */
.modal-plex__grid{ min-width: 0; }
.modal-plex__right{ min-width: 0; }

/* Prevent long text from being clipped */
.modal-plex__title,
.modal-plex__overview{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Trailer: lock to 16:9 INSIDE modal ---------- */
.video-wrap{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  aspect-ratio: 16 / 9;          /* KEY */
  background: rgba(0,0,0,.25);
}

.video-wrap iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  aspect-ratio: auto !important;
}

/* ---------- Cast slider: support JS classnames ---------- */
.cast-card__img{
  width: 88px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.06);
}
.cast-card__img--empty{
  width: 88px;
  height: 120px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
}
.cast-card__name{
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.1;
  opacity: 0.9;
  text-align: center;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 720px){
  .modal{ padding: 8px; }

  .modal-content{
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }
  .modal-plex{ max-height: calc(100vh - 16px); }
  .modal-plex__content{
    padding: 14px;
    max-height: calc(100vh - 16px);
  }

  .modal-plex__grid{ grid-template-columns: 1fr; }
  .modal-plex__poster{
    max-width: 320px;
    width: 100%;
  }
}

@media (max-width: 420px){
  .modal-plex__title{ font-size: 26px; }
}
/* Fix: empty provider-badges had 0 size, so IntersectionObserver never triggered */
.provider-badges{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  z-index:3;
  max-width: calc(100% - 20px);
}


body.modal-open{
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  touch-action: none;
}

.provider-badges--loading::after{
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.18), rgba(255,255,255,.10));
  background-size: 200% 100%;
  animation: badgeShimmer 1.1s linear infinite;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.provider-badges--loading:not(:empty)::after{
  display: none;
}

@keyframes badgeShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.modal-plex__providers-label{
  width: 100%;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.video-help{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.trailer-slider{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.trailer-chip{
  flex: 0 0 min(260px, 82vw);
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.trailer-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(248,189,4,.35);
}

.trailer-chip.is-active{
  border-color: rgba(248,189,4,.45);
  background: rgba(248,189,4,.10);
}

.trailer-chip__type{
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.trailer-chip__name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.trailer-link-row{
  margin-top: 12px;
}

.trailer-youtube-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.trailer-youtube-link:hover{
  border-color: rgba(248,189,4,.35);
}

@media (min-width: 1180px){ .movie-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1179px){ .movie-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .controls__row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .movie-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.brand--link{
  color: inherit;
  text-decoration: none;
}
.brand--link:hover .brand__title,
.brand--link:focus-visible .brand__title{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand--link:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 6px;
  border-radius: 16px;
}

.modal-plex__meta-block{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 12px;
}
.modal-plex__meta-block .modal-plex__chips{
  margin-top: 0;
}
.modal-plex__meta-block .modal-plex__rating-wrap{
  justify-content: flex-start;
}


.tmdb-ring--imdb {
  background:
    radial-gradient(circle at center, #0f172a 57%, transparent 58%),
    conic-gradient(#f5c518 calc(var(--rating-percent, 0) * 1%), rgba(245, 197, 24, 0.14) 0);
}

.tmdb-ring--rt {
  background:
    radial-gradient(circle at center, #0f172a 57%, transparent 58%),
    conic-gradient(#e53935 calc(var(--rating-percent, 0) * 1%), rgba(229, 57, 53, 0.16) 0);
}

.tmdb-ring--metacritic {
  background:
    radial-gradient(circle at center, #0f172a 57%, transparent 58%),
    conic-gradient(#2fbf71 calc(var(--rating-percent, 0) * 1%), rgba(47, 191, 113, 0.16) 0);
}

.modal-plex__meta-line--ratings {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* Modern streaming homepage additions */
.hero{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap:22px;
  align-items:stretch;
  margin: 18px 0 18px;
}
.hero__content{
  min-height: 430px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  padding: clamp(24px, 4vw, 52px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(800px 500px at 20% 20%, rgba(248,189,4,.18), transparent 55%),
    radial-gradient(700px 420px at 80% 30%, rgba(90,116,255,.22), transparent 52%);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero__content::after{
  content:"";
  position:absolute;
  inset:auto -15% -45% 35%;
  height:280px;
  background: radial-gradient(circle, rgba(248,189,4,.16), transparent 58%);
  filter: blur(12px);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 13px;
  border:1px solid rgba(248,189,4,.24);
  background:rgba(248,189,4,.10);
  color:#ffe59b;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  margin-bottom:22px;
}
.hero__title{
  max-width: 850px;
  font-size: clamp(36px, 6vw, 76px);
  line-height:.96;
  letter-spacing:-.06em;
  margin:0;
}
.hero__lead{
  max-width: 740px;
  margin:22px 0 0;
  color: rgba(233,236,244,.78);
  font-size: clamp(16px, 2vw, 20px);
  line-height:1.65;
}
.hero-search{
  margin-top: 28px;
  max-width: 760px;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 9px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(5,7,14,.72);
  box-shadow: 0 22px 60px rgba(0,0,0,.36);
}
.hero-search > i{
  margin-left: 14px;
  color: rgba(255,255,255,.55);
}
.hero-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font: inherit;
  font-weight:700;
}
.hero-search input::placeholder{ color: rgba(233,236,244,.52); }
.btn--accent{
  background: linear-gradient(135deg, #f8bd04, #ff7a1a);
  color:#121212;
  border-color: rgba(255,255,255,.12);
}
.hero__quick{
  margin-top: 20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.quick-chip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius:999px;
  padding: 10px 13px;
  cursor:pointer;
  font-weight:800;
}
.quick-chip:hover,
.quick-chip.is-active{
  border-color: rgba(248,189,4,.42);
  background: rgba(248,189,4,.14);
}
.hero-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(12,14,24,.88), rgba(12,14,24,.54));
  box-shadow: var(--shadow);
  min-height: 430px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.hero-card__label{
  color:#ffe59b;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.hero-card__stack{
  min-height: 310px;
  position:relative;
  margin: 18px 0;
}
.hero-card__poster{
  position:absolute;
  width: 48%;
  min-width: 150px;
  aspect-ratio: 2/3;
  border: 1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:0;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow: 0 20px 45px rgba(0,0,0,.55);
  cursor:pointer;
}
.hero-card__poster:nth-child(1){ left: 24%; top: 0; z-index:3; transform: rotate(0deg); }
.hero-card__poster:nth-child(2){ left: 3%; top: 36px; z-index:2; transform: rotate(-9deg) scale(.9); opacity:.72; }
.hero-card__poster:nth-child(3){ right: 3%; top: 42px; z-index:1; transform: rotate(9deg) scale(.88); opacity:.68; }
.hero-card__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-card__poster--empty{
  position:absolute;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
}
.hero-card__meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted);
  font-size:13px;
}
.hero-card__meta strong{ color:var(--text); }

.provider-dock{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap:12px;
  margin:18px 0;
}
.provider-tile{
  min-height: 96px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  color:var(--text);
  border-radius: 22px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:900;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.provider-tile:hover{
  transform: translateY(-3px);
  border-color: rgba(248,189,4,.28);
}
.provider-tile.is-active{
  background: linear-gradient(180deg, rgba(248,189,4,.16), rgba(255,255,255,.04));
  border-color: rgba(248,189,4,.36);
}
.provider-tile__logo{
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  font-weight:1000;
}

.home-sections{
  display:grid;
  gap: 22px;
  margin: 22px 0;
}
.provider-sections{
  display:grid;
  gap:22px;
}
.content-row{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: rgba(6,8,16,.46);
  padding:18px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.section-head h2{
  margin:0;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing:-.03em;
}
.section-kicker{
  margin:0 0 5px;
  color:#ffe59b;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  font-weight:900;
}
.ghost-link{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  border-radius:999px;
  padding:10px 13px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.ghost-link:hover{
  border-color: rgba(248,189,4,.35);
  background: rgba(248,189,4,.12);
}
.poster-row{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 176px);
  gap:14px;
  overflow-x:auto;
  padding: 2px 0 14px;
  scroll-snap-type:x proximity;
}
.poster-row::-webkit-scrollbar{ height:10px; }
.poster-row::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:999px; }
.mini-card{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
}
.mini-card__poster{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  aspect-ratio: 2/3;
  box-shadow: 0 16px 34px rgba(0,0,0,.36);
  transition: transform .16s ease, border-color .16s ease;
}
.mini-card:hover .mini-card__poster{
  transform: translateY(-4px);
  border-color: rgba(248,189,4,.28);
}
.mini-card__poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mini-card__shade{
  position:absolute;
  inset:auto 0 0;
  height:45%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}
.mini-card__rating{
  position:absolute;
  left:9px;
  bottom:9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.64);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:900;
}
.mini-card__rating i{ color:var(--accent); }
.mini-card__body{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 3px 0;
}
.mini-card__body strong{
  font-size:14px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mini-card__body small{ color:var(--muted-2); font-weight:800; }
.empty-row{
  min-height:120px;
  display:grid;
  place-items:center;
  color:var(--muted);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px;
}
.row-skeleton{
  height:250px;
  min-width:160px;
  border-radius:18px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite;
}
.section-head--results{
  margin: 0 0 16px;
}
@keyframes shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

@media (max-width: 1100px){
  .hero{ grid-template-columns: 1fr; }
  .hero-card{ min-height: 360px; }
  .hero-card__stack{ min-height: 270px; }
  .provider-dock{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .container{ width:min(100% - 20px, var(--maxw)); }
  .hero__content{ min-height:auto; border-radius:24px; padding:24px; }
  .hero-search{ border-radius:24px; flex-wrap:wrap; }
  .hero-search input{ flex-basis: calc(100% - 44px); }
  .hero-search .btn{ width:100%; justify-content:center; }
  .provider-dock{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-tile{ min-height:82px; }
  .section-head{ align-items:flex-start; flex-direction:column; }
  .poster-row{ grid-auto-columns: minmax(132px, 42vw); }
}

/* Page navigation + restored browse front page */
.topbar__nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.topbar__link{
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.topbar__link:hover,
.topbar__link.is-active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}
.intro-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin: 10px 0 18px;
  padding: 22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow-soft);
}
.intro-panel h2{
  margin:4px 0 6px;
  font-size: clamp(22px, 3vw, 34px);
}
.intro-panel p{
  margin:0;
  color:var(--muted);
  max-width: 780px;
}
.intro-panel__link{
  flex:0 0 auto;
  text-decoration:none;
}
@media (max-width: 900px){
  .topbar__inner{ align-items:flex-start; }
  .topbar__nav{ order:3; width:100%; margin-left:0; }
  .intro-panel{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .topbar__actions{ width:100%; justify-content:space-between; }
  .segmented{ width:100%; }
  .segmented__btn{ flex:1; justify-content:center; }
}

/* Free streaming page media switch */
.free-media-switch{
  margin: 0 0 14px;
}
.free-media-switch[hidden]{
  display:none !important;
}


/* Header navigation grouping: brand -> Elokuvat -> Sarjat ---- Ilmaiset */
.topbar__inner{
  justify-content:flex-start;
}
.topbar__nav{
  margin-left:0;
}
.topbar__nav--primary{
  margin-left:10px;
}
.topbar__nav--secondary{
  margin-left:auto;
}
.topbar__actions{
  margin-left:8px;
}

@media (max-width: 900px){
  .topbar__inner{
    align-items:center;
    flex-wrap:wrap;
  }
  .topbar__nav{
    width:auto;
    order:initial;
  }
  .topbar__nav--primary{
    margin-left:4px;
  }
  .topbar__nav--secondary{
    margin-left:auto;
  }
}

@media (max-width: 620px){
  .topbar__inner{
    gap:8px;
  }
  .topbar__nav--primary{
    order:3;
    width:auto;
    margin-left:0;
  }
  .topbar__nav--secondary{
    order:4;
    width:auto;
    margin-left:auto;
  }
  .topbar__actions{
    order:2;
    margin-left:auto;
    width:auto;
  }
  .topbar__link{
    padding:9px 10px;
  }
}


/* Compact modal rating row on phones */
@media (max-width: 560px){
  .modal-plex__rating-wrap{
    width:100%;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:4px;
  }
  .rating-badge{
    width:auto;
    min-width:0;
    flex:1 1 0;
    gap:4px;
  }
  .tmdb-ring{
    width:48px;
    height:48px;
    box-shadow:inset 0 0 0 4px rgba(4,9,18,.95),0 10px 22px rgba(0,0,0,.25);
  }
  .tmdb-ring__inner{
    width:38px;
    height:38px;
  }
  .tmdb-ring__score{
    font-size:14px;
  }
  .rating-badge__label{
    min-height:0;
    font-size:9px;
    line-height:1.05;
    white-space:nowrap;
  }
}


/* === 2026 cinematic public UI refresh === */
:root {
  --surface:#151821;
  --surface-raised:#1c202b;
  --surface-soft:rgba(255,255,255,.055);
  --text-soft:#a7adbb;
  --radius-sm:12px;
  --radius-lg:22px;
}

.topbar {
  background:rgba(8,10,16,.78);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
}

.topbar__inner {
  min-height:68px;
  padding:8px 0;
}

.brand__icon {
  width:46px;
  height:46px;
  border-radius:14px;
}

.brand__title {
  font-size:19px;
  letter-spacing:-.025em;
}

.topbar__link {
  border-radius:999px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.topbar__link:hover {
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
}

.topbar__link.is-active {
  background:rgba(248,189,4,.13);
  box-shadow:inset 0 0 0 1px rgba(248,189,4,.18);
}

.controls {
  background:rgba(17,20,29,.74);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 22px 55px rgba(0,0,0,.26);
  backdrop-filter:blur(16px);
}

.field select,
.field input {
  background:rgba(5,7,12,.64);
  border-color:rgba(255,255,255,.09);
  border-radius:13px;
}

.movie-grid {
  gap:18px;
}

.movie-card {
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#11141c;
  border:1px solid rgba(255,255,255,.065);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  isolation:isolate;
}

.movie-card::after {
  content:"";
  position:absolute;
  inset:42% 0 0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,8,13,.88) 62%,rgba(6,8,13,.98));
}

.movie-card:hover {
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(248,189,4,.2);
  box-shadow:0 22px 48px rgba(0,0,0,.42);
}

.movie-card > img {
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.movie-card:hover > img {
  transform:scale(1.025);
}

.movie-card .movie-info {
  position:absolute;
  left:10px;
  right:10px;
  bottom:38px;
  z-index:2;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}

.movie-card > h2 {
  position:absolute;
  left:11px;
  right:11px;
  bottom:10px;
  z-index:2;
  margin:0;
  font-size:.9rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}

.movie-card .pill {
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,7,12,.7);
  backdrop-filter:blur(8px);
  font-size:.72rem;
}

.provider-badges {
  top:9px;
  left:9px;
  right:auto;
  z-index:3;
}

.provider-badge {
  width:26px;
  height:26px;
  border-radius:8px;
  box-shadow:0 5px 16px rgba(0,0,0,.45);
}

.skeleton-card {
  min-height:0;
  aspect-ratio:2/3;
  overflow:hidden;
}

.mobile-filter-bar,
.mobile-filter-actions {
  display:none;
}

/* Cinematic detail modal */
.modal {
  padding:24px;
  background:rgba(2,3,7,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:auto;
}

.modal-content {
  width:min(1080px,100%);
  margin:20px auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  overflow:hidden;
  background:#10131b;
  box-shadow:0 32px 100px rgba(0,0,0,.72);
  animation:modal-enter .24s ease-out both;
}

@keyframes modal-enter {
  from { opacity:0; transform:translateY(14px) scale(.985); }
  to { opacity:1; transform:none; }
}

.modal-plex {
  min-height:620px;
  background:#10131b;
}

.modal-plex__bg {
  height:330px;
  opacity:.78;
  filter:saturate(.9);
}

.modal-plex__overlay {
  background:
    linear-gradient(180deg,rgba(9,11,17,.08) 0%,rgba(9,11,17,.28) 46%,#10131b 100%),
    linear-gradient(90deg,rgba(9,11,17,.55),transparent 58%);
}

.modal-close {
  position:sticky;
  top:14px;
  float:right;
  margin:14px 14px -58px 0;
  z-index:20;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(8,10,16,.72);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
}

.modal-plex__content {
  position:relative;
  z-index:2;
  margin-top:-120px;
  padding:0 36px 38px;
}

.modal-plex__grid {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:30px;
  align-items:start;
}

.modal-plex__poster {
  width:100%;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.1);
}

.modal-plex__right {
  min-width:0;
  padding-top:96px;
}

.modal-plex__title {
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.modal-plex__original,
.modal-plex__sub,
.modal-plex__tagline,
.modal-plex__overview {
  color:var(--text-soft);
}

.modal-plex__meta-block {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.075);
  border-bottom:1px solid rgba(255,255,255,.075);
}

.modal-plex__rating-wrap {
  display:grid;
  grid-template-columns:repeat(4,minmax(58px,1fr));
  gap:12px;
  flex:0 0 auto;
}

.rating-badge {
  min-width:58px;
  text-align:center;
}

.tmdb-ring {
  margin-inline:auto;
}

.modal-plex__overview {
  max-width:760px;
  font-size:1rem;
  line-height:1.72;
}

.modal-section {
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.075);
}

.cast-card {
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.045);
}

/* Compact mobile */
@media (max-width: 720px) {
  .container {
    width:min(100% - 20px,var(--maxw));
    padding-top:12px;
  }

  .topbar__inner {
    width:calc(100% - 20px);
    min-height:58px;
    gap:7px;
  }

  .brand__icon {
    width:38px;
    height:38px;
    border-radius:11px;
  }

  .brand__title {
    font-size:16px;
  }

  .brand__subtitle {
    display:none;
  }

  .topbar__link {
    padding:8px 9px;
    font-size:.78rem;
  }

  .topbar__link i {
    display:none;
  }

  .intro-panel {
    padding:18px;
    border-radius:16px;
  }

  .intro-panel h2 {
    font-size:1.35rem;
  }

  .intro-panel p:not(.section-kicker) {
    font-size:.88rem;
  }

  .controls {
    padding:10px;
    border-radius:15px;
  }

  .mobile-filter-bar {
    display:flex;
  }

  .mobile-filter-trigger {
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    color:var(--text);
    background:rgba(255,255,255,.055);
    font:inherit;
    font-weight:700;
  }

  .mobile-filter-count {
    min-width:20px;
    height:20px;
    padding:0 6px;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    color:#171200;
    background:var(--accent);
    font-size:.72rem;
  }

  .controls__row {
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:130;
    max-height:75dvh;
    overflow:auto;
    padding:48px 16px 84px;
    grid-template-columns:1fr;
    background:#121620;
    border-radius:22px 22px 0 0;
    box-shadow:0 -24px 80px rgba(0,0,0,.62);
  }

  .controls.filters-open::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:125;
    background:rgba(0,0,0,.64);
    backdrop-filter:blur(5px);
  }

  .controls.filters-open .controls__row {
    display:grid;
  }

  .mobile-filter-actions {
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:135;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:10px;
    background:rgba(18,22,32,.96);
    border-top:1px solid rgba(255,255,255,.08);
  }

  .controls.filters-open .mobile-filter-actions {
    display:grid;
    grid-template-columns:1fr 1.35fr;
  }

  .mobile-filter-clear,
  .mobile-filter-apply {
    min-height:44px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
    color:var(--text);
    font:inherit;
    font-weight:800;
  }

  .mobile-filter-clear {
    background:rgba(255,255,255,.055);
  }

  .mobile-filter-apply {
    color:#181300;
    border-color:transparent;
    background:var(--accent);
  }

  body.mobile-filters-open {
    overflow:hidden;
  }

  .controls__meta {
    margin-top:8px;
  }

  .section-head {
    margin-block:18px 10px;
  }

  .section-head h2 {
    font-size:1.25rem;
  }

  .movie-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .movie-card {
    border-radius:12px;
  }

  .movie-card > h2 {
    left:8px;
    right:8px;
    bottom:8px;
    font-size:.76rem;
  }

  .movie-card .movie-info {
    left:7px;
    right:7px;
    bottom:30px;
    gap:4px;
  }

  .movie-card .pill {
    padding:3px 5px;
    font-size:.62rem;
  }

  .provider-badges {
    top:6px;
    left:6px;
    gap:3px;
  }

  .provider-badge {
    width:21px;
    height:21px;
    border-radius:6px;
  }

  .modal {
    padding:0;
    align-items:stretch;
    background:#0c0f16;
  }

  .modal-content {
    width:100%;
    min-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .modal-plex__bg {
    height:230px;
  }

  .modal-plex__content {
    margin-top:-72px;
    padding:0 14px 28px;
  }

  .modal-plex__grid {
    grid-template-columns:86px minmax(0,1fr);
    gap:13px;
  }

  .modal-plex__left {
    position:relative;
    z-index:3;
  }

  .modal-plex__poster {
    border-radius:10px;
  }

  .modal-plex__providers-under {
    grid-column:1 / -1;
  }

  .modal-plex__right {
    padding-top:48px;
  }

  .modal-plex__title {
    font-size:1.42rem;
    letter-spacing:-.03em;
  }

  .modal-plex__original {
    font-size:.77rem;
  }

  .modal-plex__sub {
    font-size:.78rem;
  }

  .modal-plex__meta-block {
    grid-column:1 / -1;
    display:block;
    margin-left:-99px;
    padding-top:16px;
  }

  .modal-plex__chips {
    margin-bottom:12px;
  }

  .modal-plex__rating-wrap {
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
  }

  .rating-badge {
    min-width:0;
  }

  .tmdb-ring {
    width:38px;
    height:38px;
    font-size:.76rem;
  }

  .rating-badge__label {
    margin-top:4px;
    font-size:.58rem;
    white-space:nowrap;
  }

  .modal-plex__tagline,
  .modal-plex__overview,
  .modal-section {
    grid-column:1 / -1;
    margin-left:-99px;
  }

  .modal-plex__overview {
    font-size:.9rem;
    line-height:1.58;
  }

  .modal-close {
    position:fixed;
    top:max(10px,env(safe-area-inset-top));
    right:10px;
    margin:0;
    width:38px;
    height:38px;
  }

  .cast-slider {
    gap:8px;
  }

  .cast-card {
    min-width:82px;
  }

  .cast-card__name {
    font-size:.68rem;
  }
}

@media (max-width: 390px) {
  .topbar__link {
    padding:7px 6px;
    font-size:.72rem;
  }

  .brand__icon {
    display:none;
  }

  .movie-grid {
    gap:7px;
  }

  .tmdb-ring {
    width:35px;
    height:35px;
    font-size:.72rem;
  }

  .rating-badge__label {
    font-size:.54rem;
  }
}


/* === Mobile polish hotfix: filter visibility and modal layout === */
@media (max-width: 720px) {
  .controls__row {
    max-height:88dvh;
    padding:24px 16px 88px;
    gap:14px;
    overscroll-behavior:contain;
    scroll-padding-top:24px;
  }

  .controls__row::before {
    content:"Suodattimet";
    position:sticky;
    top:-24px;
    z-index:2;
    display:block;
    margin:-24px -16px 2px;
    padding:16px 48px 12px 16px;
    color:var(--text);
    background:#121620;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:1rem;
    font-weight:800;
  }

  .controls__row .field {
    min-width:0;
  }

  .controls__row .field:first-of-type {
    display:block;
  }

  .modal {
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .modal-content {
    min-height:100dvh;
    overflow:visible;
  }

  .modal-plex {
    min-height:100dvh;
    overflow:hidden;
  }

  .modal-plex__bg {
    height:210px;
    background-position:center 20%;
  }

  .modal-plex__content {
    margin-top:-48px;
    padding:0 12px calc(28px + env(safe-area-inset-bottom));
  }

  .modal-plex__grid {
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    column-gap:12px;
    row-gap:14px;
    align-items:end;
  }

  .modal-plex__left,
  .modal-plex__right {
    display:contents;
  }

  .modal-plex__poster {
    grid-column:1;
    grid-row:1;
    align-self:end;
    width:78px;
    max-height:117px;
    object-fit:cover;
  }

  .modal-plex__header {
    grid-column:2;
    grid-row:1;
    min-width:0;
    align-self:end;
    padding:0 42px 2px 0;
  }

  .modal-plex__title {
    margin:0;
    font-size:clamp(1.2rem,6vw,1.55rem);
    line-height:1.05;
    overflow-wrap:anywhere;
  }

  .modal-plex__providers-under {
    grid-column:1 / -1;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin:0;
  }

  .modal-plex__providers-label {
    flex:0 0 auto;
    margin:0;
    font-size:.74rem;
  }

  .modal-plex__meta-block {
    grid-column:1 / -1;
    grid-row:3;
    display:grid;
    gap:10px;
    margin:0;
    padding:12px 0;
  }

  .modal-plex__chips {
    margin:0;
  }

  .modal-plex__rating-wrap {
    width:100%;
  }

  .modal-plex__tagline {
    grid-column:1 / -1;
    grid-row:4;
    margin:0;
  }

  .modal-plex__overview {
    grid-column:1 / -1;
    grid-row:5;
    margin:0;
  }

  .modal-section {
    grid-column:1 / -1;
    margin-left:0;
  }

  .modal-plex__right {
    padding-top:0;
  }
}

@media (max-width: 390px) {
  .modal-plex__grid {
    grid-template-columns:68px minmax(0,1fr);
    column-gap:10px;
  }

  .modal-plex__poster {
    width:68px;
    max-height:102px;
  }

  .modal-plex__header {
    padding-right:38px;
  }

  .modal-plex__title {
    font-size:1.16rem;
  }

  .modal-plex__providers-under {
    gap:7px;
  }
}


/* === Modal viewport, overflow and responsive ratings fix === */
.modal[style*="display: block"] {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.modal-content {
  box-sizing: border-box;
  width: min(1080px, 100%);
  max-width: 100%;
  max-height: none;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
}

.modal-plex,
.modal-plex__content {
  box-sizing: border-box;
  max-width: 100%;
  max-height: none;
  min-width: 0;
  overflow: visible;
}

.modal-plex__grid,
.modal-plex__left,
.modal-plex__right,
.modal-plex__header,
.modal-plex__meta-block,
.modal-plex__rating-wrap,
.modal-section {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.modal-plex__rating-wrap {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 1.25vw, 14px);
}

.rating-badge {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.tmdb-ring {
  width: clamp(44px, 6vw, 72px);
  height: clamp(44px, 6vw, 72px);
  font-size: clamp(.82rem, 1.7vw, 1.25rem);
}

.rating-badge__label {
  width: 100%;
  min-height: 2.3em;
  padding-inline: 1px;
  font-size: clamp(.55rem, 1vw, .72rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .modal[style*="display: block"] {
    padding: 0;
    align-items: flex-start;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow-x: hidden;
  }

  .modal-plex {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .modal-plex__content {
    width: 100%;
    margin-top: -42px;
    padding:
      0
      max(12px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    overflow-x: hidden;
  }

  .modal-plex__grid {
    width: 100%;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 11px;
  }

  .modal-plex__poster {
    width: 72px;
    max-width: 72px;
    height: auto;
    max-height: 108px;
  }

  .modal-plex__header {
    padding-right: 42px;
  }

  .modal-plex__providers-under,
  .modal-plex__meta-block,
  .modal-plex__tagline,
  .modal-plex__overview,
  .modal-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .modal-plex__rating-wrap {
    gap: 3px;
  }

  .tmdb-ring {
    width: clamp(35px, 11.5vw, 46px);
    height: clamp(35px, 11.5vw, 46px);
    font-size: clamp(.7rem, 3.5vw, .9rem);
  }

  .rating-badge__label {
    min-height: 2.2em;
    margin-top: 3px;
    font-size: clamp(.48rem, 2.35vw, .62rem);
    white-space: normal;
  }

  .modal-close {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}

@media (max-width: 360px) {
  .modal-plex__grid {
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 9px;
  }

  .modal-plex__poster {
    width: 62px;
    max-width: 62px;
    max-height: 93px;
  }

  .tmdb-ring {
    width: 33px;
    height: 33px;
    font-size: .67rem;
  }

  .rating-badge__label {
    font-size: .46rem;
  }
}



/* === Final viewport-safe modal and mobile filters fix (2026-07-13) === */
.modal[style*="display: block"] {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  scroll-padding-top: max(12px, env(safe-area-inset-top));
}

.modal-content {
  margin-top: 0 !important;
}

.modal-plex__bg {
  inset: 0 0 auto 0 !important;
  height: 360px !important;
  transform: none !important;
  filter: saturate(.92) !important;
}

.modal-plex__overlay {
  pointer-events: none;
}

.modal-plex__content {
  margin-top: 0 !important;
  padding-top: 30px !important;
}

.modal-plex__right {
  padding-top: 0 !important;
}

.modal-plex__title {
  margin-top: 0 !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.modal-plex__rating-wrap {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start;
}

.rating-badge {
  min-width: 0 !important;
}

@media (max-width: 720px) {
  .controls.filters-open .controls__row {
    display: grid !important;
    position: fixed;
    inset:
      max(58px, env(safe-area-inset-top))
      0
      0
      0;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding:
      58px
      16px
      calc(92px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    border-radius: 0;
    box-sizing: border-box;
  }

  .controls__row::before {
    position: fixed !important;
    top: max(58px, env(safe-area-inset-top)) !important;
    left: 0;
    right: 0;
    height: 50px;
    margin: 0 !important;
    padding: 15px 16px !important;
    box-sizing: border-box;
  }

  .controls__row .field:first-of-type {
    display: block !important;
    order: -10;
  }

  .modal[style*="display: block"] {
    padding: 0 !important;
  }

  .modal-plex__bg {
    height: 220px !important;
    background-position: center 20% !important;
  }

  .modal-plex__content {
    margin-top: 0 !important;
    padding:
      20px
      max(12px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
  }

  .modal-plex__grid {
    align-items: start !important;
  }

  .modal-plex__poster,
  .modal-plex__header {
    align-self: start !important;
  }

  .modal-plex__rating-wrap {
    width: 100% !important;
    gap: clamp(2px, 1.6vw, 7px) !important;
  }

  .tmdb-ring {
    width: clamp(34px, 11vw, 46px) !important;
    height: clamp(34px, 11vw, 46px) !important;
    font-size: clamp(.68rem, 3.3vw, .9rem) !important;
  }

  .rating-badge__label {
    font-size: clamp(.46rem, 2.2vw, .62rem) !important;
    line-height: 1.08 !important;
  }
}


/* === Mobile filter sheet usability fix (14.7.2026) === */
.mobile-filter-sheet-header {
  display: none;
}

@media (max-width: 720px) {
  .controls.filters-open .controls__row {
    display: grid !important;
    position: fixed !important;
    top: max(68px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 14px calc(94px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-top: 66px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 20px !important;
    background: #121620 !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.72) !important;
    box-sizing: border-box !important;
  }

  .controls__row::before {
    display: none !important;
    content: none !important;
  }

  .mobile-filter-sheet-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin: 0 -14px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(18,22,32,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 1rem;
    font-weight: 800;
  }

  .mobile-filter-sheet-header > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-filter-close {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: var(--text);
    background: rgba(255,255,255,.07);
    font: inherit;
    cursor: pointer;
  }

  .mobile-filter-close:active {
    transform: scale(.96);
  }

  .controls.filters-open .mobile-filter-actions {
    display: grid !important;
    position: fixed !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 138 !important;
    grid-template-columns: 1fr 1.35fr !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-top-color: rgba(255,255,255,.1) !important;
    border-radius: 0 0 20px 20px !important;
    background: rgba(18,22,32,.98) !important;
    box-shadow: 0 -12px 28px rgba(0,0,0,.28) !important;
    box-sizing: border-box !important;
  }

  .controls.filters-open::before {
    cursor: pointer;
  }

  .controls__row .field:first-of-type {
    margin-top: 0 !important;
  }
}


/* === True viewport mobile filter overlay fix (14.7.2026) ===
   The controls surface uses backdrop-filter, which makes fixed descendants
   use that small element as their containing block in Chromium/WebKit.
   Disable it while the sheet is open so the panel and footer attach to viewport. */
@media (max-width: 720px) {
  .controls.filters-open {
    position: static !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: none !important;
  }

  .controls.filters-open::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
  }

  body.mobile-filters-open #filterPanel,
  .controls.filters-open #filterPanel {
    display: grid !important;
    position: fixed !important;
    inset:
      max(64px, env(safe-area-inset-top))
      6px
      6px
      6px !important;
    z-index: 1001 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      0
      14px
      calc(92px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    border-radius: 20px !important;
    background: #121620 !important;
  }

  body.mobile-filters-open #filterPanel .mobile-filter-sheet-header,
  .controls.filters-open #filterPanel .mobile-filter-sheet-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 60px !important;
    margin: 0 -14px !important;
    padding:
      0
      12px
      0
      16px !important;
    order: -100 !important;
  }

  body.mobile-filters-open #filterPanel .field,
  .controls.filters-open #filterPanel .field {
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-filters-open .mobile-filter-actions,
  .controls.filters-open .mobile-filter-actions {
    display: grid !important;
    position: fixed !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    z-index: 1002 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
    gap: 10px !important;
    padding:
      12px
      12px
      calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 0 20px 20px !important;
  }
}