/* Cineby 0.4: black / scarlet palette. */
.s2d-episode-group-card .s2d-episode-group-info {
  display: block;
  padding-top: 48px;
  background: linear-gradient(to bottom, transparent 0, rgba(13,2,3, .93) 52%, rgba(13,2,3, .98) 100%);
}

.s2d-episode-group-card .s2d-episode-group-info .h2,
.s2d-episode-group-card .s2d-episode-group-season,
.s2d-episode-group-card .s2d-episode-group-range {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s2d-episode-group-card .s2d-episode-group-info .h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.s2d-episode-group-card .s2d-episode-group-season {
  margin-top: 3px;
  color: #e77c87;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.s2d-episode-group-card .s2d-episode-group-range {
  margin-top: 2px;
  color: #d1c2c3;
  font-size: 10px;
}

.s2d-episode-series-link {
  padding-top: 8px;
  text-align: center;
}

.s2d-episode-series-link a {
  color: #b90013;
}

/* theme-mode.css is loaded after this file and resets every dark pagination
   link to the same colour. Keep the native Bootstrap structure, but restore
   an unmistakable active page in dark mode only. */
html[data-theme="dark"] body #main.s2d-episode-groups-page #pagination > nav > ul.pagination > li.active > a,
html.night-mode body #main.s2d-episode-groups-page #pagination > nav > ul.pagination > li.active > a,
html.dark-mode body #main.s2d-episode-groups-page #pagination > nav > ul.pagination > li.active > a {
  border-color: #b90013 !important;
  background: #b90013 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.s2d-episode-date-section {
  clear: both;
}

.s2d-episode-date-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 18px 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  color: #f4eaeb;
}

.s2d-episode-date-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.s2d-episode-date-copy strong {
  font-size: 17px;
  line-height: 1.1;
}

.s2d-episode-date-copy time {
  margin-top: 3px;
  color: #9b8184;
  font-size: 11px;
  text-transform: uppercase;
}

.s2d-episode-date-count {
  margin-left: auto;
  color: #ab9597;
  font-size: 12px;
  white-space: nowrap;
}

.s2d-episode-date-calendar {
  display: none;
}

/* Skin 1: restrained divider that leaves the poster grid visually dominant. */
.s2d-episode-date-skin-1 .s2d-episode-date-header {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.s2d-episode-date-skin-1 .s2d-episode-date-header::after {
  content: "";
  order: 2;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(185,0,19, .7), rgba(185,0,19, 0));
}

.s2d-episode-date-skin-1 .s2d-episode-date-count {
  order: 3;
}

.s2d-episode-date-skin-1 .s2d-episode-date-copy strong {
  color: #e07580;
  font-size: 15px;
  text-transform: uppercase;
}

.s2d-episode-date-skin-1 .s2d-episode-date-copy time {
  display: none;
}

/* Skin 2: a compact date bar with a clear calendar landmark. */
.s2d-episode-date-skin-2 .s2d-episode-date-header {
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(185,0,19, .28);
  border-radius: 8px;
  background: linear-gradient(105deg, rgba(185,0,19, .17), rgba(24,6,8, .72) 48%, rgba(24,6,8, .94));
  box-shadow: inset 3px 0 0 #b90013;
}

.s2d-episode-date-skin-2 .s2d-episode-date-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: rgba(185,0,19, .18);
  color: #e46e7a;
  font-size: 16px;
}

.s2d-episode-date-skin-2 .s2d-episode-date-count {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: #d8c9ca;
}

/* Skin 3: each date becomes a self-contained catalogue section. */
.s2d-episode-date-skin-3 .s2d-episode-date-section {
  margin: 18px 0 26px;
  padding: 0 8px 10px;
  border: 1px solid rgba(145,99,104, .2);
  border-radius: 10px;
  background: rgba(28,7,9, .42);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .12);
}

.s2d-episode-date-skin-3 .s2d-episode-date-header {
  margin: 0 -8px 8px;
  padding: 13px 17px;
  border-bottom: 1px solid rgba(185,0,19, .22);
  border-radius: 10px 10px 0 0;
  background: rgba(20,4,6, .78);
}

.s2d-episode-date-skin-3 .s2d-episode-date-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border: 1px solid rgba(185,0,19, .42);
  border-radius: 50%;
  color: #e46e7a;
}

.s2d-episode-date-skin-3 .s2d-episode-date-copy strong {
  color: #fff;
  font-size: 18px;
}

.s2d-episode-date-skin-3 .s2d-episode-date-count {
  color: #de737e;
  font-weight: 700;
}

@media (max-width: 520px) {
  .s2d-episode-group-card .s2d-episode-group-info { padding: 42px 8px 8px; }
  .s2d-episode-date-header { margin-top: 13px; gap: 8px; }
  .s2d-episode-date-copy strong { font-size: 15px; }
  .s2d-episode-date-count { max-width: 118px; white-space: normal; text-align: right; line-height: 1.25; }
  .s2d-episode-date-skin-1 .s2d-episode-date-header::after { display: none; }
  .s2d-episode-date-skin-2 .s2d-episode-date-header { padding: 9px 10px; }
  .s2d-episode-date-skin-3 .s2d-episode-date-section { padding-right: 4px; padding-left: 4px; }
  .s2d-episode-date-skin-3 .s2d-episode-date-header { margin-right: -4px; margin-left: -4px; }
}