@import url("https://cache.epicgfs.com/static/styles/all-responsive-metal.css?v=8.3");
@import url("https://cache.epicgfs.com/static/styles/jquery.fancybox-metal.css?v=8.3");

/* Self-hosted icomoon icon font. The remote metal CSS declares this @font-face
   pointing at cache.epicgfs.com, but that server does not send CORS headers so
   the browser refuses to load the font cross-origin and every icon renders as a
   tofu box. Re-declaring it here (same family name, later in the cascade, served
   same-origin from /public) overrides the remote face and fixes all icons. */
@font-face {
  font-family: "icomoon";
  src: url("/kvs_v1/icomoon.woff") format("woff"),
       url("/kvs_v1/icomoon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* --- Header logo visibility (text fallback was near-invisible on dark bg) --- */
.kvs-v1-body .header .logo a,
.kvs-v1-body .footer .footer-logo a {
  color: #fff;
  text-decoration: none;
}
.kvs-v1-text-logo {
  color: #fff;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.kvs-v1-body .header .logo a:hover .kvs-v1-text-logo {
  color: #ea1853;
}

/* --- Sidebar link hover --- */
.kvs-v1-body .sidebar .list li a {
  transition: color 0.2s;
}
.kvs-v1-body .sidebar .list li a:hover {
  color: #ea1853;
}
.kvs-v1-body .sidebar .list li a:hover .rating {
  color: #fff;
}

/* --- Pagination --- pagy.series_nav emits bare <a> elements (no <ul><li>), and
   metal sets `.pagination a { display:block }`, so the pills stack vertically.
   Lay the series-nav wrapper out as a horizontal flex row and highlight the
   current page (marked with aria-current, not the .page-current class metal
   expects). */
.kvs-v1-body .pagination .pagy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.kvs-v1-body .pagination .pagy a[aria-current="page"] {
  pointer-events: none;
  background-color: #ea1853;
  color: #fff;
  box-shadow: 0 8px 10px rgba(29, 4, 11, 0.25);
}
.kvs-v1-body .pagination .pagy a[aria-disabled="true"]:not([aria-current]) {
  opacity: 0.45;
}

/* --- Video watch page: two-column layout (player + right-hand banner rail) ---
   The custom video-cols/col-video/col-asside classes are not part of the metal
   theme, so without this the aside stacks below the player full-width. */
.kvs-v1-body .block-video .video-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.kvs-v1-body .video-cols .col-video {
  flex: 1 1 auto;
  min-width: 0;
}
.kvs-v1-body .video-cols .col-asside {
  flex: 0 0 300px;
  width: 300px;
}
@media screen and (max-width: 1023px) {
  .kvs-v1-body .block-video .video-cols {
    flex-direction: column;
  }
  .kvs-v1-body .video-cols .col-asside {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Player meta row (duration / views / date) */
.kvs-v1-body .title-holder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0;
  color: #8b8f96;
  font-size: 13px;
}
.kvs-v1-body .title-holder .count-item {
  display: inline-flex;
  align-items: center;
}

/* Tag / category / model buttons under the title */
.kvs-v1-body .top-options .buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.kvs-v1-body .buttons-row .btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #2e2f35;
  color: #cfd2d6;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.kvs-v1-body .buttons-row .btn:hover {
  background-color: #52555f;
  color: #fff;
}
.kvs-v1-body .buttons-row .btn.gold {
  background-color: #ea1853;
  color: #fff;
}
.kvs-v1-body .buttons-row .btn.gold:hover {
  background-color: #c71146;
}

/* CLICK HERE full-video call to action */
.kvs-v1-body .btn-holder .tab-btn {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #ea1853;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.kvs-v1-body .btn-holder .tab-btn:hover {
  background-color: #c71146;
}

/* Description block */
.kvs-v1-body .video-description {
  margin: 16px 0;
  padding: 14px 16px;
  background-color: #1c1d22;
  border-radius: 8px;
  color: #b7bbc1;
  font-size: 14px;
  line-height: 1.6;
}
.kvs-v1-body .video-description a {
  color: #ea1853;
  text-decoration: none;
}
.kvs-v1-body .video-description a:hover {
  text-decoration: underline;
}

/* Report button */
.kvs-v1-body .kvs-video-report {
  margin: 12px 0;
}
.kvs-v1-body .btn-report-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background-color: #2e2f35;
  color: #8b8f96;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.kvs-v1-body .btn-report-trigger:hover {
  background-color: #52555f;
  color: #fff;
}

/* Right-hand aside: ad banners + recommended videos */
.kvs-v1-body .col-asside .asside-link .title,
.kvs-v1-body .col-asside .title-asside {
  margin: 0 0 8px;
  color: #8b8f96;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kvs-v1-body .col-asside .asside-link .table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.kvs-v1-body .col-asside .asside-thumb {
  margin-bottom: 18px;
}
.kvs-v1-body .col-asside .asside-thumb iframe {
  max-width: 100%;
}
/* Recommended list in the narrow aside renders single-column, full width. */
.kvs-v1-body .col-asside .list-videos .item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
}

/* The video watch page yields directly into `.content`, which is a
   `display:flex; flex-wrap:wrap` row. Metal's own blocks (.headline, .block-video)
   are width:100% so they each take a full row; our extra direct children must do
   the same or they collapse to their min-content width. */
.kvs-v1-body .content > .above-player-showcase,
.kvs-v1-body .content > .list-videos {
  width: 100%;
}

/* Above-title showcase strip (cross-site videos, replaces the old hardcoded
   thumbs). Sits above the H1, thumbnail-only — no title/duration/date rows. */
.kvs-v1-body .above-player-showcase {
  padding-top: 12px;
  margin-bottom: 16px;
}
.kvs-v1-body .above-player-showcase .item .title,
.kvs-v1-body .above-player-showcase .item .wrap {
  display: none;
}

/* --- Small Rails-specific tweaks on top of KVS “metal” styles --- */
.kvs-v1-body .pagination form.button_to {
  display: inline;
}

.kvs-v1-body .pagination form.button_to input[type="submit"] {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.kvs-v1-text-logo {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.kvs-v1-deadbro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #b6b9ff;
  background: linear-gradient(180deg, #1a1d3a, #14162e);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(120, 130, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.kvs-v1-deadbro-badge:hover {
  box-shadow: 0 0 0 1px rgba(150, 160, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.kvs-v1-deadbro-badge strong {
  font-weight: 600;
  color: #d6d9ff;
}

/* Missing video (404) landing */
.video-not-found-banner--kvs1 {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
}

.video-not-found-banner__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.video-not-found-banner__text {
  margin: 0 0 0.75rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
}

.video-not-found-banner__cta {
  margin: 0;
}

.video-not-found-banner__link {
  font-weight: 600;
  text-decoration: underline;
}