/* .poster-tile is a plain <div> here instead of the <a> the shared
   macros/poster_tile.html macro uses, because this tile also needs a star
   <button> overlaying the poster - nesting a button inside an <a> is
   invalid HTML content model and unreliable for keyboard/screen-reader
   users. Keeping them as absolutely-positioned siblings inside the same
   position:relative .poster-tile avoids that: .favorites-tile-link fills
   the tile and carries the click-through, .favorites-tile-star sits above
   it via z-index. */
.favorites-tile-link {
    position: absolute;
    inset: 0;
    display: block;
}

.favorites-tile-link:focus-visible {
    outline: 2px solid var(--cinema-accent);
    outline-offset: 2px;
}

/* cinema.css's .poster-tile:hover .poster-tile-scrim already reveals the
   title on hover regardless of nesting depth. .poster-tile:focus-visible
   never matches here though, since .poster-tile is a plain <div> and
   .favorites-tile-link is the thing that actually receives keyboard focus -
   so the scrim needs its own focus-visible rule off that link instead. */
.favorites-tile-link:focus-visible .poster-tile-scrim {
    opacity: 1;
    transform: translateY(0);
}

.favorites-tile-star {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 1;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--cinema-accent);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    /* every star on this page starts filled (data-wanted="true" by
       definition - this is your favorites list), so a solid chip behind it
       reads as chrome rather than information. A drop-shadow keeps it
       legible over bright posters without adding a second loud badge next
       to the star. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.45));
}

.favorites-tile-star[data-wanted="false"] {
    color: rgba(255, 255, 255, 0.75);
}

.favorites-section-subhead {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.favorites-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 3rem 1rem;
}

/* reels-want-to-watch.js / reels-share.js look up these toasts by id
   (#reels-wtw-toast / #reels-share-toast) and no-op if missing - ids stay
   as-is for that, but the visual styling can't come from reels.css's
   .reels-wtw-toast (scoped to .reels-root, which this page no longer has),
   so it gets its own class here using base.html's existing bootstrap
   variables instead of reels-specific tokens. */
.favorites-toast {
    position: fixed;
    top: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    background: var(--bs-content-bg);
    border: 1px solid var(--bs-content-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}