/* General Styles */

a {
  color: inherit !important;
}

.btn-primary {
  background-color: #333;
  border-color: #333;
}

.btn-primary:hover {
  background-color: #555;
  border-color: #555;
}

/* Movie Cards */
.card-body {
  height: 100%;
}

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Limit to 3 lines of text */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-text.long {
  -webkit-line-clamp: 6;
  /* Limit to 3 lines of text */
}

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.card-link:hover .card,
.card-link:hover .card-body,
.card-link:hover img {
  transition: background-color 0.5s ease;
  background-color: rgba(255, 255, 255, 0.15) !important;
  /* Adjust the alpha value for the desired fade effect */
}

.card-link:hover .card-header {
  transition: background-color 0.5s ease;
  background-color: rgba(255, 255, 255, 0.005);
  /* Adjust the alpha value for the desired fade effect */
}

.card-link:hover .card-img {
  transition: opacity 0.3s ease;
  opacity: 0.8;
  /* Adjust the opacity value for the desired fade effect */
}

/* Vue */

[v-cloak] {
  display: none;
}

/* Rounding only the top-left corner */
.rounded-top-start {
  border-top-left-radius: var(--bs-border-radius) !important;
}

/* Rounding only the top-right corner */
.rounded-top-end {
  border-top-right-radius: var(--bs-border-radius) !important;
}

/* Rounding only the bottom-left corner */
.rounded-bottom-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

/* Rounding only the bottom-right corner */
.rounded-bottom-end {
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.custom-tooltip {

  --bs-tooltip-opacity: 1;
}

/* remove a underline and default color unless hovered */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: underline;
  color: inherit;
}

/* ribbon */
.ribbon {
  --f: 10px;
  /* control the folded part*/
  --r: 15px;
  /* control the ribbon shape */
  --t: 10px;
  /* the top offset */

  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path:
    polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

.ribbon.green {
  background: #15bd39;
}

.ribbon.blue {
  background: #1596bd;
}

.ribbon.yellow {
  background: #b2be02;
}

.ribbon.orange {
  background: #bd8d15;
}

/* Filter Badge Positioning */
.filter-badge-container {
  position: relative;
}

.filter-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  z-index: 2;
}

/* noUiSlider Dark Theme Customization */
.noUi-target {
  background-color: #2c3034;
  border-color: #444;
  border-radius: 0.375rem;
  height: 8px;
  box-shadow: none;
}

.noUi-connect {
  background-color: #0d6efd;
}

.noUi-handle {
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 50%;
  box-shadow: none;
  height: 16px !important;
  width: 16px !important;
  top: -5px !important;
  right: -8px !important;
  cursor: pointer;
}

.noUi-handle:before,
.noUi-handle:after {
  content: none; /* Remove the default lines in the handles */
}

.noUi-handle:hover {
  background-color: #6c757d;
}

.range-display {
  font-size: 0.9rem;
  color: #adb5bd;
}