.btn-success {
    background-color: #28a745;
    color: #fff;
    border: none;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

.btn-success:hover {
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.8), 0 0 40px rgba(40, 167, 69, 0.6);
    transform: scale(1.05);
}

.btn-success::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50px;
    background: radial-gradient(circle, rgba(40, 167, 69, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.btn-success:hover::after {
    opacity: 1;
}

/* "Rated by" meter of a recommendation card. 5rem leaves room around a bold "100.00%" (it was 50px, the
   percentage touched both edges). */
.vertical-progress {
    display: flex;
    align-items: flex-end;
    background-color: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    width: 5rem;
    height: 100px;
}

.vertical-progress-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    min-height: 2.75rem;
    /* the two lines of text ("72.01%" and "users") fit even for tiny values */
}

/* AVG / MAL badges at the bottom of a card. The MAL badge has an icon, which made its box taller inside and
   pushed its text lower than the AVG text. Both are the same flex box now, so the text is centred alike. */
.stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    line-height: 1;
    font-size: 0.8rem;
    white-space: nowrap;
}

.stat-badge > i {
    font-size: 1rem;
    line-height: 1;
}

.table thead th {
    padding: 0.1rem 0.2rem !important;
}

.table.table-bordered.table-dark thead th {
    padding: 0.1rem 0.4rem !important;
    width: auto !important;
    min-width: 0 !important;
}

.table.table-bordered tbody td {
    padding: 0.1rem 0.4rem !important;
}

.table.table-bordered td.genres-column {
    max-width: 80px !important;
}

.nav-icon {
    font-size: 1.5rem;
    vertical-align: middle;
    /* keeps it aligned nicely with text */
}

/* Remove Material Kit arrow on dropdowns */
@media (min-width: 992px) {

    .dropdown .dropdown-toggle:after,
    .dropend .dropdown-toggle:after,
    .dropstart .dropdown-toggle:after,
    .dropup .dropdown-toggle:after,
    .dropdown-menu:before {
        content: none !important;
    }
}

.header-bg {
    background-image: url('/assets/image/ian-valerio-road-header-unsplash-21e293986a9ab3a7d3a961e0b3a963e5.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(1);
    /* Adjust brightness to make text pop */
    z-index: 1;
}

#main-page {
    background-image: url('/assets/image/ian-valerio-road-header-unsplash-21e293986a9ab3a7d3a961e0b3a963e5.jpg');
}

/* Poster of a card: a fixed 2:3 frame that the picture fills. The posters come in slightly different
   proportions (0.64 - 0.75), which used to give 19 different picture heights and gaps below the shorter ones;
   now they are cropped a little instead and all cards are equally tall. */
a.mal-link {
    display: block;
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
}

a.mal-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ---------------------------------------------------------------------------
   Site header on small screens (below Bootstrap's lg breakpoint, where the navbar
   collapses): the title and the hamburger button share the first row and the opened
   menu takes the full width of the second row. Without this the menu opened as a narrow
   column beside the title, which made the page wider than the screen (the menu appeared
   cut off on the right). Screens of 992px and more are not affected.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .header-row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 0.5rem;
    }

    .header-spacer {
        display: none !important;
    }

    .header-title {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        font-size: 1.6rem !important; /* .fs-1 is !important as well */
        line-height: 1.2;
    }

    /* the toggler and the menu become cells of the grid */
    .header-actions {
        display: contents !important;
    }

    .header-row .navbar-toggler {
        grid-column: 2;
        grid-row: 1;
    }

    .header-row .navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0.75rem;
    }
}