/* Filmoteka public CSS — automatski izdvojeno pri pakovanju. */
button,

    input,

    select {
      font: inherit;
    }

.control-panel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.055);
      border-radius: 24px;
      box-shadow: 0 18px 55px rgba(0,0,0,.24);
      margin-bottom: 18px;
    }

.field {
      position: relative;
    }

.field label {
      position: absolute;
      top: 7px;
      left: 14px;
      color: var(--dim);
      font-size: .78rem;
      z-index: 1;
      pointer-events: none;
    }

input,

    select {
      width: 100%;
      min-height: 58px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 17px;
      background: rgba(5,7,12,.72);
      color: var(--text);
      outline: 0;
      padding: 25px 14px 9px;
      transition: border-color .16s ease, background .16s ease;
    }

input:focus,

    select:focus {
      border-color: rgba(243,198,107,.55); background: rgba(5,7,12,.92);
    }

.catalog-filter-panel {
      max-width: 1160px;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      gap: 14px;
    }

.catalog-search-wide {
      grid-column: 1 / -1;
    }

.catalog-search input {
      min-height: 64px;
      font-size: 1.04rem;
    }

.catalog-filter-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
      gap: 12px;
      align-items: end;
    }

.catalog-filter-grid .field {
      min-width: 0;
    }

.catalog-filter-grid select {
      min-height: 56px;
      padding-right: 34px;
      font-size: .94rem;
      text-overflow: ellipsis;
    }

.catalog-sort-field {
      min-width: 210px;
    }

.catalog-clear-filters {
      min-height: 56px;
      white-space: nowrap;
      align-self: stretch;
    }

.search-help {
      display: block;
      margin: 9px 4px 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: .9rem;
    }

.catalog-performance-note {
      margin-top: -2px;
      padding: 0 2px;
      color: rgba(232,228,218,.66);
    }

.catalog {
      display: grid;
      grid-template-columns: var(--catalog-cols, repeat(2, minmax(0, 1fr)));
      gap: var(--catalog-gap, 18px);
      align-items: var(--catalog-align, normal);
      contain: layout paint;
    }

.catalog.is-virtualized {
      align-items: start;
    }

.catalog-virtual-spacer {
      grid-column: 1 / -1;
      pointer-events: none;
      visibility: hidden;
      min-height: 0;
    }

.movie-card {
      --gradient-border-width: 3px;
      --movie-card-cover-width: 190px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      display: grid;
      grid-template-columns: var(--movie-card-cols, var(--movie-card-cover-width) minmax(0, 1fr));
      gap: 0;
      min-height: var(--movie-card-min-height, 330px);
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
      transition: transform .2s ease, box-shadow .2s ease;
      content-visibility: auto;
      contain: layout paint style;
      contain-intrinsic-size: 360px;
    }

.movie-card .cover,
    .movie-card .movie-body {
      will-change: transform;
    }

.movie-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 26px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.10);
    }

.movie-card:focus-within {
      box-shadow: 0 26px 80px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.10);
    }

.cover {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      background: #12151e;
      isolation: isolate;
      transform: translateZ(0);
    }

.cover::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: var(--poster-img), var(--poster-fallback-img), var(--poster-bg);
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      opacity: var(--poster-opacity, .92);
      transition: opacity .20s ease, filter .20s ease;
      backface-visibility: hidden;
      will-change: opacity;
    }

.poster-direct-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      opacity: 0;
      transition: opacity .18s ease, filter .18s ease, transform .18s ease;
      backface-visibility: hidden;
      will-change: opacity;
      contain: paint;
      user-select: none;
      pointer-events: none;
      background: transparent;
    }

.poster-direct-img.poster-direct-loaded,
    .poster-direct-img.poster-direct-swapping {
      opacity: 1;
    }

.cover .poster-direct-img {
      z-index: 1;
      transform: scale(1.012);
    }

.cover .poster-direct-img.poster-direct-fallback {
      filter: saturate(.96) contrast(1.03);
    }

@media (prefers-reduced-motion: reduce) {
.cover::before,
      .poster-direct-img {
        transition: none !important;
      }
}

.movie-card.poster-deferred .cover::before {
      --poster-opacity: .78;
      filter: blur(3px) saturate(.92);
    }

.movie-card.poster-deferred .cover::after {
      background:
        radial-gradient(circle at 28% 20%, rgba(243,198,107,.20), transparent 36%),
        linear-gradient(to right, transparent 62%, rgba(18,22,34,.88)),
        linear-gradient(to top, rgba(0,0,0,.78), transparent 48%);
    }

.movie-card.poster-ready .cover::before {
      --poster-opacity: 1;
      filter: none;
    }

.cover::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(to right, transparent 62%, rgba(18,22,34,.88)),
        linear-gradient(to top, rgba(0,0,0,.78), transparent 48%);
    }

.cover-title {
      position: absolute;
      z-index: 3;
      left: 16px;
      right: 16px;
      bottom: 16px;
    }

.catalog-title-box {
      right: auto;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: fit-content;
      max-width: calc(100% - 32px);
      padding: 10px 12px 11px;
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(8,11,17,.78), rgba(20,24,34,.58));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      pointer-events: none;
    }

.cover-title span {
      display: inline-block;
      border-radius: 999px;
      color: #18120a;
      background: var(--gold-2);
      padding: 6px 9px;
      font-size: .75rem;
      font-weight: 850;
      margin-bottom: 10px;
    }

.cover-title strong {
      display: -webkit-box;
      max-width: 100%;
      font-family: var(--serif);
      font-size: clamp(1.18rem, 2.6vw, 1.82rem);
      line-height: .96;
      text-shadow: 0 8px 24px rgba(0,0,0,.5);
      letter-spacing: -.04em;
      overflow: hidden;
      overflow-wrap: anywhere;
      word-break: break-word;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

.cover-title strong.catalog-cover-title {
      display: block;
      width: 100%;
      min-width: 0;
      font-size: var(--catalog-cover-title-size, clamp(1.18rem, 2.6vw, 1.82rem));
      line-height: var(--catalog-cover-title-line, .96);
      -webkit-line-clamp: unset;
      overflow: visible;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      white-space: normal;
      text-wrap: balance;
    }

.catalog-original-title {
      display: block;
      max-width: 100%;
      color: rgba(245,239,226,.78);
      font-style: normal;
      font-size: clamp(.64rem, 1.4vw, .82rem);
      font-weight: 650;
      line-height: 1.15;
      letter-spacing: -.015em;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      text-wrap: balance;
    }

.catalog-meta-body {
      justify-content: space-between;
      gap: 16px;
    }

.tag {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      max-width: 100%;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.13);
      color: #e7e1d7;
      background: rgba(255,255,255,.055);
      font-size: .78rem;
      white-space: nowrap;
    }

.tag.gold {
      color: var(--gold-2); border-color: rgba(243,198,107,.28); background: rgba(243,198,107,.08);
    }

.movie-body h3.catalog-card-title {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      font-size: var(--catalog-title-size, clamp(1.45rem, 2.55vw, 2.35rem));
      line-height: var(--catalog-title-line, .98);
      overflow: visible;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      white-space: normal;
      text-wrap: balance;
      -webkit-line-clamp: unset;
    }

.catalog-director {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      max-width: 100%;
      margin-top: auto;
      padding: 11px 12px;
      border-radius: 16px;
      color: #f1eadf;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.105);
    }

.catalog-director small {
      color: var(--muted);
      font-size: .67rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

.catalog-director b {
      max-width: 100%;
      font-size: clamp(.88rem, 1.7vw, 1.04rem);
      line-height: 1.18;
      font-weight: 850;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }

.ratings {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: auto;
    }

.rating {
      min-height: 74px;
      padding: 10px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.045);
    }

.rating-link {
      display: block;
      color: inherit;
      text-decoration: none;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

.rating-link:hover,
    .rating-link:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(243,198,107,.45);
      background: rgba(243,198,107,.08);
      outline: none;
    }

.rating-text-link {
      color: var(--gold-2);
      text-decoration: none;
      border-bottom: 1px solid rgba(243,198,107,.35);
    }

.rating-text-link:hover,
    .rating-text-link:focus-visible {
      color: #fff2cf;
      border-bottom-color: rgba(255,242,207,.75);
      outline: none;
    }

.rating small {
      display: block;
      color: var(--dim);
      font-size: .74rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.rating strong {
      display: block;
      margin-top: 6px;
      color: var(--gold-2);
      font-size: 1rem;
      line-height: 1;
    }

.rating .bar {
      height: 4px;
      background: rgba(255,255,255,.11);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 10px;
    }

.rating .bar i {
      display: block;
      width: var(--score);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #bd8d35, var(--gold-2));
    }

.small-btn {
      position: relative;
      z-index: 6;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--text);
      border-radius: 999px;
      min-height: 42px;
      padding: 10px 13px;
      transition: transform .16s ease, border-color .16s ease;
    }

.small-btn:hover {
      transform: translateY(-1px); border-color: rgba(243,198,107,.42);
    }

.small-btn.primary {
      background: rgba(243,198,107,.13); border-color: rgba(243,198,107,.35); color: var(--gold-2);
    }

.empty {
      display: none;
      padding: 4px 0 0;
      color: var(--muted);
      text-align: center;
    }

.empty-card {
      position: relative;
      overflow: hidden;
      max-width: 620px;
      margin: 0 auto;
      padding: 28px 24px 26px;
      border: 1px solid rgba(243,198,107,.20);
      border-radius: 28px;
      background:
        radial-gradient(circle at 50% 0%, rgba(243,198,107,.14), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    }

.empty-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
      opacity: .55;
      transform: translateX(-60%);
    }

.empty-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-bottom: 14px;
      border: 1px solid rgba(243,198,107,.30);
      border-radius: 16px;
      background: rgba(243,198,107,.10);
      color: var(--gold-2);
      font-size: 1.25rem;
      font-weight: 900;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

.empty-card strong {
      display: block;
      color: var(--text);
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(1.25rem, 2.4vw, 1.75rem);
      line-height: 1.15;
      letter-spacing: -.02em;
    }

.empty-card p {
      max-width: 460px;
      margin: 10px auto 18px;
      color: var(--muted);
      line-height: 1.55;
    }

.empty-clear-filters {
      min-width: 150px;
    }

.catalog-status {
      display: none;
      margin: 18px 0 0;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 18px;
      color: var(--muted);
      text-align: center;
      background: rgba(255,255,255,.035);
      line-height: 1.45;
    }

.catalog-status.show {
      display: block;
    }

.catalog-more-wrap {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 16px 0 0;
      flex-wrap: wrap;
    }

.catalog-more-wrap.show {
      display: flex;
    }

.catalog-pager-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: 100%;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.24);
    }

.catalog-more {
      min-width: 118px;
      justify-content: center;
      color: var(--gold-2);
      border-color: rgba(243,198,107,.34);
      background: rgba(243,198,107,.10);
      font-weight: 850;
    }

.catalog-more:disabled {
      cursor: not-allowed;
      opacity: .42;
      transform: none;
    }

.catalog-page-status {
      width: 100%;
      text-align: center;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.4;
    }

.catalog-page-numbers {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 0;
    }

.catalog-page-number {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.045);
      font-weight: 850;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }

.catalog-page-number:hover {
      transform: translateY(-1px);
      color: var(--text);
      border-color: rgba(243,198,107,.35);
      background: rgba(243,198,107,.09);
    }

.catalog-page-number.is-current {
      color: #16110a;
      border-color: rgba(255,222,138,.72);
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      box-shadow: 0 8px 22px rgba(243,198,107,.18), inset 0 1px 0 rgba(255,255,255,.40);
    }

.catalog-page-ellipsis {
      min-width: 18px;
      color: var(--dim);
      text-align: center;
      font-weight: 900;
    }

.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

@media (max-width: 1060px) {
.control-panel {
      grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
.control-panel {
      grid-template-columns: 1fr; padding: 10px; border-radius: 20px;
    }

.movie-card {
      --movie-card-cols: 1fr;
      --movie-card-min-height: 350px;
    }

.cover {
      min-height: 270px;
    }

.cover::after {
      background: linear-gradient(to top, rgba(18,22,34,.95), transparent 70%);
    }
}

@media (max-width: 430px) {
.rating {
      min-height: 68px;
    }

.tag {
      min-height: 23px; padding: 4px 7px; font-size: .69rem;
    }
}

.catalog-icon {
      overflow: hidden;
    }

.catalog-lines {
      width: 24px;
      display: grid;
      gap: 4px;
      z-index: 1;
    }

.catalog-lines i {
      display: block;
      height: 4px;
      border-radius: 999px;
      background: #1b1308;
      box-shadow: 0 1px 0 rgba(255,255,255,.18);
    }

.catalog-lines i:nth-child(2) {
      width: 82%;
    }

.catalog-lines i:nth-child(3) {
      width: 62%;
    }

.catalog-section {
      min-height: 100dvh;
      padding-top: 22px;
      scroll-margin-top: 86px;
    }

.catalog-scroll {
      overflow: visible;
    }

@media (max-width: 720px) {
.catalog-filter-panel {
        padding: 14px;
        border-radius: 22px;
      }

.catalog-filter-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

.catalog-sort-field,
      .catalog-clear-filters {
        grid-column: 1 / -1;
      }
}

.movie-card .ratings {
      display: none;
    }

@media (prefers-reduced-motion: reduce) {
.movie-card .cover,
      .movie-card .movie-body {
        will-change: auto;
      }
}

@media (min-width: 1024px) {
.catalog {
        --catalog-cols: repeat(auto-fill, minmax(300px, 1fr));
        --catalog-gap: 20px;
        --catalog-align: stretch;
      }

.catalog .movie-card {
        --movie-card-cover-width: clamp(132px, 41%, 168px);
      }

.movie-card {
        --movie-card-min-height: 360px;
      }

.movie-card:hover .cover {
        transform: scale(1.018);
      }
}

@media (min-width: 1400px) {
.catalog {
        --catalog-cols: repeat(auto-fill, minmax(330px, 1fr));
      }

.catalog .movie-card {
        --movie-card-cover-width: clamp(150px, 41%, 185px);
      }

.movie-card {
        --movie-card-min-height: 390px;
      }
}

@media (hover: hover) and (pointer: fine) {
.small-btn:hover {
        transform: translateY(-1px);
      }
}

.cover {
  transform: none !important;
  contain: paint;
}

.movie-card:hover .cover {
  transform: none !important;
}

.catalog-filter-toggle {
  display: none;
  justify-content: center;
  width: 100%;
  color: var(--gold-2);
  border-color: rgba(243,198,107,.30);
  background: rgba(243,198,107,.095);
  font-weight: 900;
}

.catalog-filter-toggle.has-active-filters {
  border-color: rgba(243,198,107,.55);
  background: rgba(243,198,107,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.20);
}

.catalog-status {
  display: none;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: .9rem;
}

@media (max-width: 720px) {
.catalog-filter-panel {
    gap: 11px;
  }

.catalog-filter-toggle {
    display: inline-flex;
  }

.catalog-filter-panel:not(.filters-open) .catalog-filter-grid,
  .catalog-filter-panel:not(.filters-open) .catalog-performance-note {
    display: none;
  }

.catalog-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

.catalog-status {
    font-size: .86rem;
    padding: 8px 12px;
  }

.catalog-page-status {
    width: 100%;
    order: -1;
  }

.catalog-pager-main {
    width: min(100%, 430px);
    border-radius: 24px;
    gap: 10px;
  }

.catalog-page-numbers {
    display: none;
  }

.catalog-more {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 430px) {
.catalog-filter-grid {
    grid-template-columns: 1fr;
  }

.catalog-sort-field,
  .catalog-clear-filters {
    grid-column: auto;
  }

.catalog-performance-note {
    font-size: .82rem;
  }

.catalog-pager-main {
    width: 100%;
    padding: 7px;
  }

.catalog-more {
    padding-inline: 10px;
    font-size: .9rem;
  }
}

.rating-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 1024px) {
.total-count-box,
  .data-tools-box,
  .control-panel,
  .stats-metric,
  .stats-panel {
    box-shadow:
      0 24px 70px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.065);
  }

.catalog-section {
    padding-top: 34px;
  }

.catalog-filter-panel {
    max-width: 1240px;
    padding: 18px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 8% 0%, rgba(243,198,107,.105), transparent 28rem),
      linear-gradient(135deg, rgba(255,255,255,.072), rgba(255,255,255,.024)),
      rgba(9,12,19,.80);
    border-color: rgba(255,255,255,.14);
  }

.catalog-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
  }

.catalog-sort-field {
    min-width: 0;
  }

.catalog-clear-filters {
    justify-content: center;
  }

.catalog {
    --catalog-gap: 24px;
    padding-top: 4px;
  }

.catalog .movie-card {
    border-radius: 30px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.021)),
      rgba(14,18,29,.84);
    box-shadow:
      0 24px 76px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 0 0 1px rgba(255,255,255,.045);
  }

.catalog .movie-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 34px 95px rgba(0,0,0,.46),
      0 0 0 1px rgba(243,198,107,.06),
      inset 0 1px 0 rgba(255,255,255,.09);
  }

.catalog .movie-card::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 27px;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 19%, transparent 75%, rgba(243,198,107,.055));
    opacity: .50;
    z-index: 4;
  }

.catalog .cover::after {
    background:
      linear-gradient(to right, transparent 54%, rgba(13,17,27,.92)),
      linear-gradient(to top, rgba(0,0,0,.82), transparent 54%);
  }

.catalog-title-box,
  .catalog-director,
  .catalog-average,
  .rating {
    border-color: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 24px rgba(0,0,0,.18);
  }

.catalog-meta-body {
    padding: 24px;
    gap: 18px;
  }

.catalog-meta-body .kicker {
    gap: 7px;
    margin-bottom: 0;
  }

.catalog-meta-body .tag {
    min-height: 28px;
    padding: 5px 9px;
  }

.catalog-director {
    background:
      linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.028));
  }

.catalog-pager-main {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
      rgba(7,10,16,.76);
    box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  }
}

.catalog .movie-card.poster-ready .cover::before {
  opacity: 1;
  filter: none;
}

.catalog .movie-card.poster-ready .cover::after {
  background:
    linear-gradient(to right, transparent 60%, rgba(18,22,34,.88)),
    linear-gradient(to top, rgba(0,0,0,.80), transparent 50%);
}

.movie-card .poster-direct-img,
.catalog-card .poster-direct-img,
.poster-card .poster-direct-img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.movie-card .poster-direct-img.poster-direct-loaded,
.catalog-card .poster-direct-img.poster-direct-loaded,
.poster-card .poster-direct-img.poster-direct-loaded {
  opacity: 1;
}

.movie-card,
.catalog-card,
.poster-card {
  background-size: cover;
  background-position: center;
}

.catalog .movie-card .cover::before {
  background-size: cover;
  background-position: center;
}

.catalog .movie-card .cover-poster-img {
  object-fit: cover;
  object-position: center;
}