/* Material Design 3 for DLE Template */

:root {
  /* MD3 Color Palette - Dark Theme (Blue) */
  --md-sys-color-primary: #a8c7fa;
  --md-sys-color-on-primary: #003062;
  --md-sys-color-primary-container: #00468b;
  --md-sys-color-on-primary-container: #d6e3ff;
  --md-sys-color-secondary: #7fcfff;
  --md-sys-color-on-secondary: #003355;
  --md-sys-color-secondary-container: #004d80;
  --md-sys-color-on-secondary-container: #cce8ff;
  --md-sys-color-tertiary: #d7c2ff;
  --md-sys-color-on-tertiary: #381e72;
  --md-sys-color-tertiary-container: #4f378b;
  --md-sys-color-on-tertiary-container: #eaddff;
  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;

  /* Typography */
  --md-sys-typescale-body-large-font: 'Inter', sans-serif;
  --md-sys-typescale-headline-large-font: 'Inter', sans-serif;

  /* Elevation */
  --md-sys-elevation-level-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);

  /* Shapes */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;

  /* Fix sidebar menu width */
  --left-nav-width: 230px !important;
}

/* Inter font application */
body {
  font-family: var(--md-sys-typescale-body-large-font), 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Text Logo Styles */
.text-logo-main {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.5px;
  background: linear-gradient(45deg, #a8c7fa, #d6e3ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  display: inline-block;
  padding: 5px 0;
}

.text-logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Card Improvements */
.new-short {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.new-short:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-sys-elevation-level-2);
}

/* MD3 Colors for Ratings */
.kp,
.new-short__rating .kp {
  background: rgba(255, 129, 0, 0.2) !important;
}

.kp__span {
  background: rgba(255, 129, 0, 0.25) !important;
}

.imdb,
.new-short__rating .imdb {
  background: rgba(239, 255, 0, 0.2) !important;
}

.imdb__span {
  background: rgba(239, 255, 0, 0.25) !important;
}

/* Poster Improvements */
.new-short__poster,
.fs__poster-block {
  box-shadow: var(--md-sys-elevation-level-1);
}

/* Smooth Animations */
.md3-animate-fade {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Poster Image Improvements - Ensure images fit properly */
.new-short__poster {
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 2/3;
}

.new-short__poster--link {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.new-short__poster--img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  display: block !important;
}

.new-short:hover .new-short__poster--img {
  transform: scale(1.05);
}

/* Fix for large poster cards (short-big) - keep original height but ensure image fills */
.short-big .new-short__poster {
  overflow: hidden !important;
}

.short-big .new-short__poster--link {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.short-big .new-short__poster--img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Fix info icon z-index without breaking position */
.new-short__i {
  z-index: 10 !important;
}

/* Make tooltip more readable with opaque background */
.new-short__info {
  background: rgb(30 30 30 / 98%) !important;
}