.tv-search-bar {
  position: relative;
  width: 50%;
  padding: 0 1rem;
}

/* --- RECOMMENDATIONS & SIMILAR SECTION --- */
.tv-recommendations-similar-section {
  margin: 2rem 0 1.5rem 0;
}

.tv-recommendations-similar-section h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-dark, #2a2a2a);
}

body.dark-mode .tv-recommendations-similar-section h2 {
  color: var(--color-white, #fff);
}

.tv-recommendations-similar-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.tv-recommendations-section,
.tv-similar-section {
  flex: 1;
  min-width: 280px;
}

.tv-recommendations-section h3,
.tv-similar-section h3 {
  font-family: var(--font-slab);
  text-transform: uppercase;
  font-size: .5rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  color: var(--color-dark, #2a2a2a);
}

body.dark-mode .tv-recommendations-section h3,
body.dark-mode .tv-similar-section h3 {
  color: var(--color-white, #fff);
}

.tv-recommendations-grid,
.tv-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.tv-recommendation-card,
.tv-similar-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  border-radius: var(--border-radius-l, 0.75rem);
  overflow: hidden;
  background: var(--color-white, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .tv-recommendation-card,
body.dark-mode .tv-similar-card {
  background: var(--color-dark-mode, #171717);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tv-recommendation-card:hover,
.tv-similar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.dark-mode .tv-recommendation-card:hover,
body.dark-mode .tv-similar-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tv-recommendation-poster,
.tv-similar-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}

.tv-recommendation-title,
.tv-similar-title {
  padding: 0.6rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--color-dark, #2a2a2a);
  background: var(--color-white, #fff);
}

body.dark-mode .tv-recommendation-title,
body.dark-mode .tv-similar-title {
  color: var(--color-white, #fff);
  background: var(--color-dark-mode, #171717);
}

@media (max-width: 700px) {
  .tv-recommendations-similar-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .tv-recommendations-grid,
  .tv-similar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  
  .tv-recommendation-title,
  .tv-similar-title {
    font-size: 0.8rem;
    padding: 0.5rem 0.4rem;
  }
}

@media (max-width: 500px) {
  .tv-recommendations-grid,
  .tv-similar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- HERO SECTION --- */
.tv-hero-section {
  position: relative;
  min-height: 370px;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}
.tv-hero-bg {
  position: absolute;
  z-index: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.45) grayscale(0.05) blur(3px);
  pointer-events: none;
  transition: filter .3s;
}
body.dark-mode .tv-hero-bg {
  filter: brightness(0.22) grayscale(0.08) blur(3px);
}
.tv-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 2.8rem;
  max-width: 1050px;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 2.5rem 2.5rem;
  min-height: 340px;
}
.tv-hero-poster {
  width: 220px;
  min-width: 110px;
  border-radius: var(--border-radius-l, 0.75rem);
  box-shadow: 0 5px 30px #0006;
  margin-top: 0;
  background: #fff;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tv-hero-meta {
  flex: 1;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
body.dark-mode .tv-hero-meta {
  color: var(--color-white, #fff);
}
.tv-hero-title {
  font-size: 2.6rem;
  font-family: var(--font-heading, 'Roboto', sans-serif);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: -1.5px;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.tv-hero-year {
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: 0.1em;
}
.tv-hero-info {
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 0.6em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: center;
}

.tv-hero-info span[title="TV Rating"] {
  font-family: var(--font-slab);
  display: inline-block;
  background: #222;
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
  font-size: 1em;
  padding: 0.18em 0.55em;
  margin-right: 0.25em;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.tv-hero-creator,
.tv-hero-writer {
    color: var(--color-white);
    font-size: 1rem;
    margin: 0.12em 0;
}

/* Credit Link Styling */
.credit-link {
    color: var(--color-white, #fff);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
    padding: 1px 0;
    position: relative;
}

.credit-link:hover {
    color: var(--color-accent, #f5c518);
    border-bottom-color: var(--color-accent, #f5c518);
    transform: translateY(-1px);
}

body.dark-mode .credit-link {
    color: var(--color-white, #fff);
}

body.dark-mode .credit-link:hover {
    color: var(--color-accent-light, #f5c518);
    border-bottom-color: var(--color-accent-light, #f5c518);
}
.tv-hero-stream {
    color: var(--color-white);
    margin: 0.7em 0 0 0;
}
.providers {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0;
}
.provider-logo {
  height: 28px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px #2222;
  margin-right: 0.12rem;
  transition: transform 0.2s;
  vertical-align: middle;
}
.provider-logo:hover {
  transform: scale(1.09);
}


/* --- MAIN CONTENT --- */
.tv-main-content {
  max-width: 1050px;
  margin: 0 auto 2.5rem auto;
  padding: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
body.dark-mode .tv-main-content {
  background: var(--color-dark-mode, #171717);
}

.tv-description-trailer {
  flex: 2.5;
  min-width: 340px;
}
.tv-description-block {
  font-size: 1.18rem;
}
.tv-description-block b {
  font-size: 1.1em;
  display: block;
  margin-bottom: .16em;
}
.tv-trailer-block {
  margin-bottom: 1.7rem;
}
.tv-trailer-embed {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 16/9;
  margin: .4em 0 0 0;
  border-radius: var(--border-radius-l, 0.75rem);
  overflow: hidden;
  box-shadow: 0 2px 14px #2223;
}
.tv-trailer-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.tv-cast-block {
  flex: 1.2;
  min-width: 220px;
  font-size: 1.11rem;
}
.tv-cast-block b {
  display: block;
  margin-bottom: .4em;
  font-size: 1.12em;
}
.tv-cast-block ul {
  list-style: disc inside;
  padding-left: 0;
  margin: 0 0 1em 0;
}
.tv-cast-block li {
  margin-bottom: 0.41em;
  color: var(--color-dark, #2a2a2a);
}
body.dark-mode .tv-cast-block li {
  color: var(--color-white, #eee);
}


@media (max-width: 650px) {
  .tv-hero-content,
  .tv-main-content {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    margin-top: 2rem;
  }
  .tv-hero-title {
    font-size: 1.35rem;
  }
  .tv-hero-poster {
    width: 200px;
  }
  .tv-main-content {
    flex-direction: column;
  }
  .tv-description-block {
    font-size: 1rem;
  }
}


.tv-content-columns {
  display: flex;
  gap: 2.5rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tv-desc-trailer {
  flex: 2.2;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tv-description-block, .tv-trailer-block {
  margin-bottom: 1.6rem;
}
.tv-description-block h2,
.tv-trailer-block h2,
.tv-cast-headshots h2 {
  font-size: 1.26rem;
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-weight: 700;
  margin: 0 0 0.5em 0;
  letter-spacing: 0.01em;
}

.tv-cast-headshots {
  flex: 1.3;
  min-width: 230px;
}

.tv-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 0.5rem;
}
.cast-member-card {
  background: var(--color-off-white, #f4f4f4);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0.5rem 0.5rem 0.5rem;
  box-shadow: 0 1px 8px #2221;
  min-width: 0;
  transition: box-shadow 0.18s;
  text-align: center;
}
body.dark-mode .cast-member-card {
  background: #181818;
  color: #fff;
}
.cast-headshot-link {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 50%;
  margin-bottom: 0.5em;
}

.cast-headshot-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.3);
}

.cast-headshot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px #0003;
  background: #ececec;
  border: 2.5px solid #fff;
  transition: border-color 0.2s ease;
}

.cast-headshot-link:hover .cast-headshot {
  border-color: #007bff;
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.2);
}

/* Dark mode hover effects */
body.dark-mode .cast-headshot-link:hover {
  box-shadow: 0 4px 20px rgba(77, 166, 255, 0.4);
}

body.dark-mode .cast-headshot-link:hover .cast-headshot {
  border-color: #4da6ff;
  box-shadow: 0 4px 20px rgba(77, 166, 255, 0.3);
}
.cast-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}
.cast-name {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.05;
  margin-bottom: 0.1em;
}
.cast-character {
  font-size: 0.97em;
  color: #777;
  font-weight: 400;
}

@media (max-width: 1000px) {
  .tv-content-columns {
    flex-direction: column;
    gap: 2rem;
  }
  .tv-cast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .tv-content-columns {
    gap: 1rem;
  }
  .tv-cast-grid {
    grid-template-columns: 1fr;
  }
}

.tv-search-section {
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0 0 2rem 0;
  display: flex;
  justify-content: center;
}

/* Search styles moved to global-search.css */



/* ========== Base Container ========== */
.tv-watch-info {
  /* card look */
  background: #fff;
  color: #111;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid #333  ;
  
  /* spacing & layout */
  max-width: 720px;
  margin: 2rem auto;
  padding: 1em;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .5rem;
  opacity: 0;
  animation: watchInfoFadeIn .5s .15s ease-out forwards;
}

.tv-watch-info.hidden {
  display: none !important;
}

/* ========== Title ========== */
.tv-watch-info .watch-title {
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.5rem;
  position: relative;
  padding-left: 1rem;
  letter-spacing: 0.05em;
  color: #111;
}


/* ========== List ========== */
.tv-watch-info ul {
  display: block;
  flex-direction: column;
  justify-content: unset;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tv-watch-info li {
  display: flex;
  align-items: flex-start;
  padding-left: 1rem;
  font-family: var(--font-slab);
  font-size: 1.1rem;
  font-weight: 500;
  transition: color .2s;
  list-style: none;
}
.tv-watch-info li::before {
  content: none;
  color: #111;
  margin-right: 0.8em;
  line-height: 1.2;
}
.tv-watch-info li strong {
  font-weight: 700;
  transition: color .2s;
  margin-left: 0.25em;
}

.tv-watch-info li::marker {
  content: '';
}

/* ========== Count Footer ========== */
.tv-watch-info .watched-count {
  font-family: var(--font-slab);
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.8;
  padding-top: 1em;
  border-top: 1px solid #eee;
  text-align: right;
  color: #111;
}

/* ========== Animations ========== */
@keyframes watchInfoFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ========== Dark Mode ========== */
body.dark-mode .tv-watch-info {
  background: #111;
  color: #eee;
  box-shadow: 0 6px 18px rgba(255,255,255,0.1);
}
body.dark-mode .tv-watch-info .watch-title,
body.dark-mode .tv-watch-info li::before {
  color: #eee;
}
body.dark-mode .tv-watch-info li {
  border-color: #222;
}
body.dark-mode .tv-watch-info .watched-count {
  color: #ccc;
  border-top-color: #222;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 700px) {
  .tv-watch-info {
    padding: 1.5rem;
    margin: 1rem;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
  }
  .tv-watch-info .watch-title {
    font-size: 1.3rem;
    padding-left: 1em;
  }
  .tv-watch-info li {
    font-size: 1rem;
    padding: 0.5em 0;
  }
  .tv-watch-info .watched-count {
    font-size: 0.9rem;
  }
}


/* Keywords container */
.tv-keywords {
  margin-top: 1em;
  padding-top: 0.75em;
  border-top: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: var(--font-slab);
  font-size: 0.95em;
  color: #555;
}

.tv-keywords strong {
  margin-right: 0.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
}

/* Individual keyword pills */
.tv-keyword {
  display: inline-block;
  background: linear-gradient(135deg, #f9f9f9, #e5e5e5);
  color: #333;
  border-radius: 6px;
  padding: 0.3em 0.8em;
  font-size: 0.9em;
  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
  cursor: default;
}

.tv-keyword:hover {
  background: linear-gradient(135deg, #e5e5e5, #f9f9f9);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Dark mode overrides */
body.dark-mode .tv-keywords {
  border-color: #444;
  color: #ccc;
}
body.dark-mode .tv-keywords strong {
  color: #eee;
}
body.dark-mode .tv-keyword {
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
  color: #ddd;
}
body.dark-mode .tv-keyword:hover {
  background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}


.tv-tagline {
  font-family: var(--font-slab, 'Hepta Slab', serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: #191919;
  background: linear-gradient(90deg, #eee 40%, #fff 100%);
  border-left: 4px solid #111;
  padding: 0.5em 1em;
  margin: 0 0 1.1em 0;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  word-spacing: 0.08em;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.02);
  text-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: background 0.3s, color 0.3s;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

body.dark-mode .tv-tagline {
  color: #f8f8f8;
  background: linear-gradient(90deg, #191c20 40%, #232323 100%);
  border-left: 4px solid #fff;
  text-shadow: 0 4px 16px #0009;
}

/* Powered By Section */

.powered-by {
  margin: 2rem;
}

.powered-and,
.powered-by p {
  text-align: center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-sm);
}

.powered-and {
  margin-right: 1rem;
}

.powered-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

  .logo-letterboxd img,
  .logo-tmdb img {
    width: 20rem;
  }

body.dark-mode .powered-by p {
  color: var(--color-white, #fff);
}

/* --- TV SHOW SPECIFIC STYLES --- */

/* Season and Episode Information */
.tv-seasons-info {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--color-off-white, #f8f8f8);
  border-radius: var(--border-radius-m, 0.5rem);
  border-left: 4px solid var(--color-primary, #007bff);
}

body.dark-mode .tv-seasons-info {
  background: var(--color-dark-mode, #171717);
  border-left-color: var(--color-primary-light, #4da6ff);
}

.tv-seasons-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-dark, #2a2a2a);
}

body.dark-mode .tv-seasons-info h3 {
  color: var(--color-white, #fff);
}

.tv-show-status {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.tv-show-status.ended {
  background: #dc3545;
  color: white;
}

.tv-show-status.ongoing {
  background: #28a745;
  color: white;
}

.tv-show-status.cancelled {
  background: #6c757d;
  color: white;
}

.tv-network-info {
  font-size: 0.95rem;
  color: var(--color-text-muted, #666);
  margin-bottom: 0.5rem;
}

body.dark-mode .tv-network-info {
  color: var(--color-text-muted-dark, #999);
}

/* --- RECOMMENDED & SIMILAR GRID --- */
.tv-recsim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.tv-recsim-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--border-radius-l, 0.75rem);
  overflow: hidden;
  background: var(--color-white, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

body.dark-mode .tv-recsim-card {
  background: var(--color-dark-mode, #171717);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tv-recsim-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.dark-mode .tv-recsim-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tv-recsim-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}

.tv-recsim-title {
  padding: 0.6rem 0.5rem 0.3rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--color-dark, #2a2a2a);
  background: var(--color-white, #fff);
  position: relative;
}

body.dark-mode .tv-recsim-title {
  color: var(--color-white, #fff);
  background: var(--color-dark-mode, #171717);
}

.tv-recsim-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #007bff);
  margin-top: 0.2rem;
  letter-spacing: 0.5px;
}

body.dark-mode .tv-recsim-label {
  color: var(--color-primary-light, #4da6ff);
}

.tv-recsim-card-empty {
  /* Empty placeholder for grid layout */
}

/* --- POSTER MODAL --- */
.poster-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  animation: posterModalFadeIn 0.3s ease-out;
}

@keyframes posterModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.poster-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.poster-close {
  position: absolute;
  top: -50px;
  right: 0;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}

.poster-close:hover {
  color: #ff6b6b;
  background: rgba(0, 0, 0, 0.7);
}

#poster-modal-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: posterImageZoomIn 0.3s ease-out;
}

@keyframes posterImageZoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.poster-modal-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  max-width: 100%;
  word-wrap: break-word;
}

/* Hover effect for the poster */
.tv-hero-poster:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .poster-modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .poster-close {
    top: -40px;
    right: 10px;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
  }
  
  .poster-modal-title {
    font-size: 1.2rem;
  }
  
  #poster-modal-image {
    max-height: 75vh;
  }
}

@media (max-width: 480px) {
  .poster-close {
    top: -35px;
    right: 5px;
    font-size: 1.3rem;
    width: 30px;
    height: 30px;
  }
  
  .poster-modal-title {
    font-size: 1rem;
  }

  .tv-search-bar {
    width: 100%;
    padding: 0 1rem;
  }
}

/* --- TV LANDING PAGE STYLES --- */
.tv-landing-section {
  padding: 3rem 2rem;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

.tv-landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tv-logo-container {
  margin-bottom: 1rem;
}

.tv-logo {
  height: 80px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

body.dark-mode .tv-logo {
  filter: brightness(0) invert(1);
}

.tv-logo:hover {
  transform: scale(1.05);
}

.tv-welcome-text {
  max-width: 600px;
}

.tv-welcome-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-dark, #2a2a2a);
  font-family: var(--font-slab);
}

body.dark-mode .tv-welcome-text h1 {
  color: var(--color-white, #fff);
}

.tv-welcome-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-dark, #2a2a2a);
  opacity: 0.8;
}

body.dark-mode .tv-welcome-text p {
  color: var(--color-white, #fff);
  opacity: 0.9;
}

/* Responsive Design for Landing Page */
@media (max-width: 768px) {
  .tv-landing-section {
    padding: 2rem 1rem;
  }
  
  .tv-welcome-text h1 {
    font-size: 2rem;
  }
  
  .tv-welcome-text p {
    font-size: 1rem;
  }
  
  .tv-logo {
    height: 60px;
  }
}

@media (max-width: 480px) {
  .tv-landing-section {
    padding: 1.5rem 0.75rem;
  }
  
  .tv-welcome-text h1 {
    font-size: 1.75rem;
  }
}