h1 {
    text-align: center;
}

.w-0 {
    width: 0 !important;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

.loader-icon {
    height: 37px;
}

/* Define the fade out animation */
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

#hybrid-client {
    position: relative;
    width: 100%;
    /* Reserve the player box BEFORE the external player.js mounts, or the div
       is 0px tall and the whole profile jumps down when the player renders.
       Measured on the live player (SophiaWren): at >=768px it mounts landscape
       at height ~= 0.514 x width (657px@1265, 513px@1009, 388px@753) -> 1.94. */
    aspect-ratio: 1.94;
    z-index: 100;
    margin: 0 auto;
}

/* Below 768px the player switches to a full-viewport layout (measured exactly
   100vh at 375 / 600 / 767px), so reserve a full screen instead of the ratio. */
@media (max-width: 767.98px) {
    #hybrid-client {
        aspect-ratio: auto;
        min-height: 100vh;
    }
}

/* LCP poster: fills the reserved player box until the external player mounts.
   First child of #hybrid-client, so player content appended later paints on
   top of it; absolutely positioned so it adds zero layout of its own. */
#hybrid-client .player-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

[class^=HybridClient__ClientModalTarget] {
    bottom: unset !important;
    height: 100vh !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 100000 !important
}


/* Add these styles to your CSS file */
.favourite-card-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.favourite-card-link, .favourite-card-remove {
    width: 50%;
    height: 100%;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.favourite-card-remove.full {
    width: 100%;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateX(0);
}

.favourite-card-link {
    transform: translateX(-100%);
    background-color: blue;
}

.favourite-card-remove {
    transform: translateX(100%);
    background-color: red;
}


.favourite-card:hover .favourite-card-hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.favourite-card:hover .favourite-card-link, .favourite-card:hover .favourite-card-remove {
    opacity: 1;
    transform: translateX(0);
}

.favourite-card-body {
    transition: all 0.3s ease;
}

.favourite-card-body a {
    color: black !important;
}
[data-bs-theme="dark"] .favourite-card-body a {
    color: white !important;
}


/* Prevent the card-hover animation from going outside of the card */
.favourite-card {
    overflow: hidden;
}

/* Apply the animation to the card when it has the card-fade-out class */
.favourite-card-fade-out {
    animation: fade-out 1s ease;
}

.live-count {
    font-size: 0.75em;
}