/* --- SLIDESHOW MEDIA DETAILS (from slideshow.css) --- */
/* Ensure all text within the slideshow uses white text color unless overridden by primary color strong tags */
.slideshow-description-container,
.slideshow-description-container * {
    color: #fff !important;
}

/* NEW: Remove hover tooltip and pointer cursor from MPA rating badges inside slideshow */
.slideshow-description-container .mpa-rating-badge {
    cursor: default !important;
}
.slideshow-description-container .mpa-rating-badge:hover::after,
.slideshow-description-container .mpa-rating-badge:hover::before {
    content: none !important;
    display: none !important;
}

/* NEW: Text shadow for readability in transparency mode */
:root[data-ss-transparency="true"] .slideshow-description-container h2,
:root[data-ss-transparency="true"] .slideshow-description-container .slideshow-overview,
:root[data-ss-transparency="true"] .slideshow-description-container .media-runtime,
:root[data-ss-transparency="true"] .slideshow-description-container .media-runtime *,
:root[data-ss-transparency="true"] .slideshow-description-container .field-icon-wrapper,
:root[data-ss-transparency="true"] .slideshow-description-container .field-icon-wrapper *,
:root[data-ss-transparency="true"] .slideshow-description-container .slideshow-genres-list .ss-genre,
:root[data-ss-transparency="true"] .slideshow-description-container p:has(strong.field-label),
:root[data-ss-transparency="true"] .slideshow-description-container p:has(.field-icon-wrapper) {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

/* Overrides for structure elements (h2, strong, etc.) to use text color */
.slideshow-description-container h2,
.slideshow-description-container p strong {
    color: var(--text-color) !important; /* Use text color for labels */
}
.slideshow-description-container .field-label,
.slideshow-description-container .category-label,
.slideshow-description-container .ss-crew-title {
  color: var(--primary-color) !important;
}

/* Specific override for title to use primary color */
.slideshow-description-container h2 {
    color: var(--primary-color) !important;
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Apply lighter primary color override for secondary title parts in slideshow H2 titles */
.slideshow-description-container h2 .title-part-secondary {
    color: var(--lighter-primary-color) !important;
}

.slideshow-description-container p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 8px 0;
}

/* Apply line clamping only to the overview paragraph */
.slideshow-description-container .slideshow-overview {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* New styles for genre list display */
.slideshow-description-container .slideshow-genres-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Left justify the categories shown */
    gap: 10px; /* Space between genres */
    margin: 15px 0; /* Add some vertical space */
    padding-left: 30px; /* Add 30px space in front of the category listings */
}

/* New styles for individual genre pill */
.ss-genre { 
  background-color: rgba(0, 0, 0, 0.2); /* Dark background */
  color: var(--lighter-primary-color) !important; /* Lightly theme colored font */
  padding: 0 5px;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--lighter-primary-color);
  white-space: nowrap;
  text-transform: uppercase;
}

/* New: Add transition for text details wrapper */
#ssTextDetails {
    transition: opacity 0.5s ease;
}

/* Mimic modal media-poster styling and float behavior */
.slideshow-poster {
    float: right;
    width: var(--ss-desktop-main-w, 500px); /* desktop main image width */
    aspect-ratio: 2 / 3; 
    border-radius: 8px;
    overflow: hidden;
    cursor: default;
    box-shadow: none; 
    border: 1px solid var(--primary-color);
    flex-shrink: 0;
    z-index: 1; 
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
    transform: translateY(0); /* Anchor position to 0 to prevent initial jump */
}

/* Style for paused movie image (float and pulse) */
.slideshow-poster.paused-long {
    /* Keep only the pulse effect so the poster stays in place (no transform animation) */
    animation: pulseImage 3s ease-in-out infinite;
    transition: none;
}

.slideshow-poster img {
    width: 100%;
    height: 100%; 
    display: block;
    object-fit: cover;
    transition: opacity 0.5s ease; 
}

/* Clear float after the poster */
.slideshow-details-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* New: Style for inline release date inside media-runtime */
.slideshow-description-container .ss-release-inline {
    margin-left: 10px; 
    color: var(--lighter-primary-color) !important;
    font-weight: 500;
    white-space: nowrap;
}

/* New: Style for the vote score inside media-runtime */
.slideshow-description-container .ss-vote {
    margin-left: 5px; 
    color: #ffd700 !important; 
    font-weight: 700;
    white-space: nowrap;
}

/* Utility class mirroring modal runtime style */
.media-runtime {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.1rem;
}

/* --- CAST AREA STYLING (from slideshow.css) --- */
/* NEW: Styles for icon replacement for Director/Producer */
.slideshow-person-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
    filter: invert(0); 
}

/* Wrapper for spacing and alignment of the icon */
.field-icon-wrapper {
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 10px; /* 10px spacing between icon and name list */
    flex-shrink: 0; /* Don't shrink the icon wrapper */
}

/* Light theme icon filter override */
[data-theme^="light"] .slideshow-person-icon {
    filter: invert(1) grayscale(1) brightness(0.5); /* Invert to dark gray/black */
}

/* NEW: Target Director/Producer lines for 2pt smaller text (field name and names) */
.slideshow-description-container p:has(strong.field-label),
.slideshow-description-container p:has(.field-icon-wrapper) {
    font-size: calc(1.1rem - 2px); /* 2 points smaller than the default 1.1rem paragraph size */
    display: flex; /* Enable flex layout for vertical centering of icon/links */
    align-items: center;
    line-height: normal;
}

/* Override .person-link styling specifically for Director/Producer lists in slideshow to remove box */
.slideshow-description-container p:has(strong.field-label) .person-link,
.slideshow-description-container p:has(.field-icon-wrapper) .person-link {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    margin: 0 4px 0 0; /* Add small horizontal margin for spacing, remove vertical margin */
    text-decoration: none !important; /* Ensure no underline */
    line-height: inherit;
    font-size: inherit; /* Inherit the smaller size from parent <p> */
}

/* Always hide Director/Producer lines in slideshow */
.slideshow-description-container p:has(.field-icon-wrapper) {
    display: none !important;
}

.slideshow-cast-area {
    position: absolute; 
    left: 30px; 
    right: 30px; 
    z-index: 2;        
    margin-top: 0;     
    opacity: 0;        
    transition: opacity 0.5s ease;
}

/* Responsive adjustments for desktop */
@media (min-width: 769px) {
    .slideshow-poster {
        margin-top: 100px; /* Push the poster down by 100 pixels on desktop */
    }
}

/* Mobile-specific adjustments for slideshow */
@media (max-width: 768px) {
  .slideshow-poster {
      /* Fixed mobile main image size: 150x225px */
      width: 150px;
      height: 225px;
      /* Center the poster and ensure block flow for title to start underneath */
      float: none; 
      margin: 0 auto 15px auto; /* 15px bottom margin for separation */
      
      /* NEW: Move left by 80px and allow buttons to sit outside */
      transform: translateX(-80px);
      overflow: visible;
      position: relative; 
      /* NEW: Mobile main image rounded corners */
      border-radius: 5px;
  }

  /* NEW: Ensure the image itself matches the 5px rounded corners on mobile */
  .slideshow-poster img {
      border-radius: 5px;
  }

  /* NEW: Mobile action buttons container */
  .ss-mobile-actions {
      display: flex !important;
      flex-direction: column;
      position: absolute;
      right: -65px;        /* Place outside to the bottom-right with horizontal padding */
      bottom: 0;           /* Align preview button with bottom of the image */
      left: auto;
      top: auto;
      transform: none;
      gap: 15px;           /* 15px spacing between listen and preview buttons */
      align-items: center;
      z-index: 10;
  }

  /* NEW: Mobile action buttons sizing */
  .ss-mobile-btn {
      width: 50px;
      height: 50px;
      cursor: pointer;
      display: block;
      transition: transform 0.2s ease;
      border-radius: 50%;
      object-fit: contain;
  }
  .ss-mobile-btn:hover {
      transform: scale(1.05);
  }

  /* Ensure the Preview button sits at the bottom of the image stack */
  .ss-mobile-btn.preview-mobile {
      order: 2;
  }
  .ss-mobile-btn.listen-mobile {
      order: 1;
  }

  /* UPDATED: Expanded full-width main image state on mobile -> 100% of screen width */
  .slideshow-poster.expanded {
      width: 100vw !important;    /* full viewport width */
      height: auto !important;    /* keep aspect ratio */
      max-height: 80vh;
      margin: 0 auto 15px auto;
      transform: translateX(0);   /* center expanded image */
  }

  /* Cast Card and Image Sizing */
  .cast-card,
  .cast-card img {
      width: 75px !important;
  }
  .cast-card img {
      height: 113px !important;
  }

  /* Ensure the wrapper matches the 75x113 image size */
  .cast-image-wrapper {
      width: 75px !important;
      height: 113px !important;
  }

  /* Font Size Reductions (-4pt) */
  /* Title: 6pt smaller than desktop value (mobile-only) */
  .slideshow-description-container h2 { font-size: 16pt; }
  .slideshow-description-container p { font-size: calc(1.1rem - 4pt); }
  .ss-genre { font-size: calc(0.8rem - 2pt); }
  .slideshow-description-container .ss-release-inline { font-size: calc(1.1rem - 4pt); }
  .slideshow-description-container .ss-vote { font-size: calc(1.1rem - 4pt); }
  .media-runtime { 
      font-size: calc(1.1rem - 4pt);
      gap: 0; /* Remove the 5px gap between clock icon and runtime text on mobile */
  }
  .slideshow-description-container p:has(strong.field-label),
  .slideshow-description-container p:has(.field-icon-wrapper) { 
      font-size: 8px !important; /* Director/Producer Names (6pt) */
      justify-content: center;
      text-align: center;
  } 
  .ss-crew-name { font-size: 0.85rem; /* Approx 4px/4pt reduction from 1.1rem (17.6px -> 13.6px) */ }
  
  .cast-row { gap: 5px; } /* 5px space between cast images */
  /* Place cast area in normal flow so it can't run off the screen */
  .slideshow-cast-area { 
      position: static; 
      left: auto; 
      right: auto; 
      margin-top: 15px; 
  }
  .cast-slider { 
      display:flex; 
      overflow-x:auto; 
      gap:5px; 
      -webkit-overflow-scrolling:touch; 
      scroll-snap-type:x mandatory; 
      max-width: 100%; 
      padding-bottom: 0; /* Let container’s 10px padding define end of window */
  }
  .cast-slider .cast-card { scroll-snap-align:start; }

  /* NEW: enforce 6pt for character and real names on mobile */
  .cast-char {
      font-size: 6pt !important;
      height: 2.4em; /* keep two-line container height at smaller font */
  }
  .cast-name {
      font-size: 6pt !important;
  }
}

/* NEW: Desktop toggle to hide Director/Producer lines */
[data-hide-dir-pro-desktop="true"] .slideshow-description-container p:has(.field-icon-wrapper) {
    display: none !important;
}

.ss-cast-title {
    font-size: 1.5rem;
    color: var(--primary-color) !important;
    margin-bottom: 15px;
    text-align: center;
    display: none;
}

.slideshow-cast-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
    justify-content: flex-start;
    overflow: visible;     
    margin-top: 0;         
    position: relative;
    z-index: 2;
}

/* Cast Row Styling */
.cast-row {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: visible;
}

.cast-row-first {
    /* First row specific styles if needed */
}

.cast-row-second {
    /* Second row specific styles if needed */
}

/* Cast Card Styling (200h x 100w perspective list) */
.cast-card { 
    position: relative;
    /* padding-top: 36px; Removed to control name box height below */ 
    width: var(--slideshow-cast-img-width, 150px); /* Use CSS variable */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: 0 5px; 
    opacity: 0; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}
.cast-card.visible { opacity: 1; transform: translateY(0); }
.cast-card.disappear {
  opacity: 0;
  transform: translateY(10px);
}

/* NEW: Wrapper to position name overlay on the image */
.cast-image-wrapper {
    position: relative;
    width: var(--slideshow-cast-img-width, 150px);
    height: var(--slideshow-cast-img-height, 200px);
    border-radius: 8px;
    overflow: hidden;
}

/* Updated: Real name overlaid at bottom of image, centered, single 50% transparent background */
.cast-name {
    position: absolute;
    bottom: 0;
    left: 0; 
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.5); /* 50% transparent background */
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    line-height: 1.2;
    text-align: center; 
    white-space: normal; 
    padding: 6px 8px;
    font-size: 0.875rem; /* keep same font size */
}

/* Updated: Character name above image, centered, keep same sizing and spacing rules */
/* Container reserves two lines of height and bottom-aligns the text block */
.cast-char {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    margin-bottom: 7px;
    font-size: 10pt; /* Explicit 10 point size for character names */
    font-style: normal;
    display: flex;
    align-items: flex-end;      /* bottom-align when only one line is needed */
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    height: 2.4em;              /* room for up to 2 lines at this line-height */
}

/* Inner span: clamp to max 2 lines and show ellipsis on the second line if needed */
.cast-char-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove obsolete fixed-height block styling from previous cast-name placement */
.cast-card .cast-name {
    height: auto; 
    padding: 6px 8px;
}

/* Maintain existing image styling inside wrapper */
.cast-card img { 
    width: var(--slideshow-cast-img-width, 150px); /* Use CSS variable */
    height: var(--slideshow-cast-img-height, 200px); /* Use CSS variable */
    object-fit: cover; 
    border-radius: 8px; 
    border: 2px solid var(--text-color); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
    margin-top: 7px; 
    margin-bottom: 7px;
    transition: transform 0.3s ease; 
}

/* Hover and Active states for Cast/Crew Images */
.cast-card img:hover,
.crew-card img:hover {
    animation: floatSlow 3s ease-in-out infinite;
    transform: none; 
}

.cast-card img:active,
.crew-card img:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
    animation: none; 
}

/* New: Styles for the 'B' (Bio) button on cast cards */
.cast-card .bio-button {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 27px;  /* 15% smaller than previous 32px */
    height: 27px; /* 15% smaller than previous 32px */
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #000000 !important;
    border: 1px solid var(--text-color);
    font-size: 1.0rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.cast-card .bio-button:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--primary-color);
}

/* Adjust cast name & character font-sizes based on cast image size (set via data attribute on <html>) */
/* When cast image is 100px (100x150) -> make names 3pt smaller */
:root[data-slideshow-cast-size="100"] .cast-name { font-size: calc(0.875rem - 3pt) !important; }
:root[data-slideshow-cast-size="100"] .cast-char { font-size: calc(1rem - 3pt) !important; }

/* When cast image is 120px (120x180) -> make names 2pt smaller */
:root[data-slideshow-cast-size="120"] .cast-name { font-size: calc(0.875rem - 2pt) !important; }
:root[data-slideshow-cast-size="120"] .cast-char { font-size: calc(1rem - 2pt) !important; }

/* When cast image is 200px (200x300) -> make names 3pt larger than default */
:root[data-slideshow-cast-size="200"] .cast-name { font-size: calc(0.875rem + 3pt) !important; }
:root[data-slideshow-cast-size="200"] .cast-char { font-size: calc(1rem + 3pt) !important; }

/* NEW: Style for Director/Producer names (4 points smaller than current paragraph text (1.1rem)) */
.ss-crew-name {
    font-size: 0.85rem; /* Approx 4px/4pt reduction from 1.1rem (17.6px -> 13.6px) */
    line-height: 1.2;
}

/* NEW: Apply floating animation to subject person's image during their slideshow */
.cast-card.subject-active img,
.crew-card.subject-active img {
    animation: floatSlow 3s ease-in-out infinite !important;
}

/* --- TV SHOW SELECTOR STYLING --- */
.slideshow-tv-selector {
    display: flex;
    gap: 15px; /* Spacing between season and episode selectors */
    margin-top: 15px; /* Space below director/producer info */
}

/* New wrapper to hold label and select for better layout control */
.slideshow-tv-selector .ss-select-wrapper {
    display: flex;
    flex-direction: row; /* Keep label and select on the same line */
    align-items: center;
    gap: 5px;
    flex-grow: 1;
    max-width: 50%; /* Ensure both wrappers take max 50% */
}

/* Ensure options also have dark background/white text */
.ss-tv-select option {
    background-color: var(--background-color);
    color: var(--text-color);
}

.slideshow-tv-selector .ss-select-label {
    font-size: 0.95rem; 
    font-weight: 700;
    color: var(--primary-color) !important; /* Use primary color for label */
    white-space: nowrap;
    flex-shrink: 0;
}

.slideshow-tv-selector .ss-tv-select {
    flex-grow: 1;
    max-width: none; /* Let the flex container handle width distribution within the wrapper */
}

/* New: Style for bio not available message */
.bio-not-available-msg {
    position: fixed;
    transform: translate(-50%, -120%);
    background-color: rgba(200, 0, 0, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    z-index: 70000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bio-not-available-msg.visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}


/* Light Theme overrides for TV Selector */
[data-theme^="light"] .slideshow-tv-selector .ss-tv-select {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-color) !important;
    border: 1px solid var(--primary-color);
}

[data-theme^="light"] .slideshow-tv-selector .ss-tv-select option {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

/* --- CREW AREA STYLING (from slideshow.css) --- */
.slideshow-crew-area { 
    display: none !important;
}

.slideshow-crew-list { display: flex; gap: 10px; flex-wrap: nowrap; }
.crew-card { 
    position: relative; 
    padding-top: 44px; 
    width: 100px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    opacity: 0; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}
.crew-card.visible { opacity: 1; transform: translateY(0); }

.crew-card img { 
    width: 100px; 
    height: 133px; 
    object-fit: cover; 
    border-radius: 8px; 
    border: 2px solid var(--text-color); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
    margin-top: 7px; 
    margin-bottom: 7px;
}

.crew-name, .crew-role { 
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.crew-name {
    position: absolute;
    top: 0;
    width: 100%; 
    height: 44px;
    padding: 0 4px;
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
    overflow: hidden;
    line-height: 1.2;
}

.crew-name-inner {
    display: block;
    width: 100%;
    text-align: center; 
    white-space: normal;
}

.crew-role {
    margin-top: 0px; 
    text-align: center;
    font-size: 0.9rem; 
    font-weight: 600;
    
    color: var(--primary-color) !important;
    text-shadow: none !important;
    margin-bottom: 7px;
}

.cast-card img:hover { border-color: var(--primary-color); }
.crew-card img:hover { border-color: var(--primary-color); }

/* Enforce white color and text shadow for info boxes */
.slideshow-info-bar .ss-search-summary,
.slideshow-info-bar .ss-release {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    /* Remove min constraints so base file can lock exact size */
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 12px;
    position: relative;
    display: flex;               /* center content */
    flex-direction: column;      /* Stack children vertically */
    align-items: center;         /* vertical center (now horizontal in column) */
    justify-content: center;     /* horizontal center (now vertical in column) */
}

/* Keep the background overlay styling */
.slideshow-info-bar .ss-search-summary::before,
.slideshow-info-bar .ss-release::before {
    content:"";
    position:absolute;
    inset:0;
    background: var(--primary-color);
    opacity:.5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius:inherit;
    z-index:-1;
}

/* Typography for release month and year */
.ss-release .release-month {
    font-size: calc(1.75rem - 6px);
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
}

.ss-release .release-year {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0;
}

/* Ensure the search summary remains centered and sized like the release box */
.ss-search-summary {
  position: static; 
  top: auto;
  right: auto;
  font-size: 1.2rem; 
  font-weight:700; 
  z-index:2; 
  padding:10px; 
  border-radius:12px; 
  display: flex; 
  flex-direction: column; 
  white-space: nowrap;
  gap: 2px; 
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease; 
  opacity: 0; 
  min-width: 300px;
}
/* Remove older ::before to avoid duplication (kept here but overridden by unified style above) */
/* .ss-search-summary::before { ... } */

/* Mobile adjustments keep sizes proportional */
@media (max-width: 768px) {
    .slideshow-info-bar .ss-search-summary,
    .slideshow-info-bar .ss-release {
        min-width: 110px;
        min-height: 70px;
        padding: 8px;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    .ss-release .release-month { font-size: 1.35rem; }
    .ss-release .release-year { font-size: 1.55rem; }
}

.slideshow-info-bar .ss-search-summary .result-count {
    font-size: 2.15em;
    font-weight: bold;
    opacity: 1;
    display: inline-block; /* ensure it stays inline with the badge */
}

.ss-search-prefix{
    opacity:.9;
    font-size: 0.8em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ss-search-prefix .credits-remaining-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;               /* slightly larger to better center with result-count */
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff !important;
  font-size: calc(1rem + 5.33px);
  border: none;
  font-weight: 800;
  margin-left: 0;           /* spacing handled by parent gap */
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

.ss-search-term{ 
    font-size: 1em;
    font-size: calc(1rem - 2.67px);
    line-height:1.1; 
    margin-bottom: 2px; 
}

.ss-subject-role {
    color: var(--primary-color) !important; 
    font-size: calc(1.05rem + 2.67px);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    opacity: 0.9;
    margin-top: -4px; 
}

/* Remove 'as' label styling (no longer used) */
.cast-char .cast-as-label { display: none; }