body {
  background-color: #0f1014;
  color: #fff;
}

main {
  min-height: 82vh;
}

.login .card-body {
  background: #1E2229;
}

/* --- Movie grid cards ---------------------------------------------- */

.movie-card {position: relative;
  /* anchors the favorite button; also the containing block the stretched-link covers */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-radius: 10px;
  background-color: #1e2229;
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}

.movie-card .card-img-top {
  height: 320px;
  object-fit: cover;
  background-color: #e9ecef;
}

.no-poster {
  height: 320px;
  background-color: #e9ecef;
}

.no-poster-lg {
  min-height: 400px;
  background-color: #e9ecef;
}

/* Lazy-loaded images fade in once the real poster finishes loading. */
.lazy-img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lazy-img.lazy-loaded {
  opacity: 1;
}

.card{
  background-color: #1e2229 !important
}

.card-title > a {
  color: #fff;
}

.card-body {
    position: relative;
}

/* --- Favorite (heart) button ---------------------------------------- */

.favorite-btn {
  position: absolute;
  top: -46px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 3; /* stay above the hover overlay */
}

.favorite-btn.is-favorite {
  color: #dc3545;
}

.favorite-btn:hover {
  color: #dc3545;
}

.favorite-btn:hover .fa-trash-alt {
    color: #fff;
}

.favorites .favorite-btn{
    position: static !important;
}
/* --- Hover-preview tooltip (desktop only, see app.js) ------------------
   A single shared element (#movie-hover-tooltip in the layout) that
   app.js repositions next to whichever card is currently hovered,
   rather than living inside each card - that's what lets it float like
   a real tooltip instead of covering the card underneath.
   pointer-events: none means clicks pass straight through it to
   whatever card/link is underneath, so it never blocks card navigation. */
   
.movie-hover-overlay {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    bottom: 0;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    overflow-y: auto;
    z-index: 10;
    border-radius: 10px;
    margin-left: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.movie-hover-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* When flipped above the card instead of below (not enough room below). */
.movie-hover-tooltip.tooltip-above {
    transform: translateY(-4px);
}

.movie-hover-tooltip.tooltip-above.is-visible {
    transform: translateY(0);
}

.movie-hover-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    font-size: 1.5rem;
}

.movie-hover-poster {
    width: 70px;
    float: left;
    margin-right: 10px;
    border-radius: 4px;
}

.movie-hover-title {
    color: #fff;
    font-weight: 600;
}

.movie-hover-plot {
    font-size: 0.8rem;
    color: #ddd;
    margin-bottom: 6px;
}

.movie-hover-line {
    font-size: 0.75rem;
    color: #ccc;
    margin-bottom: 3px;
}

.movie-hover-ratings {
    clear: both;
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.movie-hover-ratings .badge {
    font-size: 0.7rem;
}

/* The little triangle pointing from the tooltip back at the card. */
.movie-hover-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    background-color: rgba(20, 20, 20, 0.95);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -6px;
}

/* Tooltip is on the right -> arrow points left, sits on left edge */
.movie-hover-tooltip.tooltip-right .movie-hover-tooltip-arrow {
    left: -6px;
    right: auto;
}

/* Tooltip is on the left -> arrow points right, sits on right edge */
.movie-hover-tooltip.tooltip-left .movie-hover-tooltip-arrow {
    right: -6px;
    left: auto;
}

/* --- Search / filter bar --------------------------------------------- */

.filter-form label {
  font-weight: 600;
}

form#filter-form {
  padding: 0 !important;
  border: 0;
}

div#filterFields {
  padding: 1rem;
}

/* --- "You might also like" suggestions -------------------------------- */

#suggestions-section h5 {
  font-weight: 600;
}

/* --- Account page favorites list -------------------------------------- */

.favorite-thumb {
  width: 60px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
}

.favorite-thumb.no-poster {
  height: 88px;
}

/* --- Misc --------------------------------------------------------------- */

.navbar-brand {
  font-size: 1.4rem;
}

footer a {
  text-decoration: none;
}

/* --------------------------------------------------------------------
   MOBILE (below Bootstrap's lg breakpoint, matching navbar-expand-lg)
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Fixed header on mobile so the nav + language switcher + search
       stay reachable while scrolling a long movie grid. */
  #mainNavbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* above Bootstrap's default navbar z-index */
    max-height: 100vh;
    overflow-y: auto; /* lets the expanded mobile menu scroll instead of overflowing off-screen */
  }

  /* Push page content down by roughly the collapsed navbar's height
       so the fixed header doesn't sit on top of it. */
  body {
    padding-top: 56px;
  }/* On touch devices there's no real hover, so the tooltip is disabled
       entirely below lg - the favorite button and tapping through to
       the details page remain the way to interact with a card on mobile. */
.movie-hover-tooltip {
    display: none;
}
}