/* ----- Search Bar ----- */
.filters {
    background-color: var(--secondary-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Pagination Element */
.pagination .page-link {
    text-decoration: none;
    color: var(--dark-color);
}

#current-page {
    background-color: var(--primary-color);
    color: var(--highlight-color);
}

/* ----- Products List View ----- */

.product-card img {
    width: auto;
    height: 250px;
    max-width: 250px;
    -webkit-filter: drop-shadow(0.5rem 0.5rem 0.5rem #202020);
            filter: drop-shadow(0.5rem 0.5rem 0.5rem #202020);
}

.product-card {
    font-size: 1.25rem;
    color: var(--primary-color);
    font-family: var(--heading-font);
    cursor: pointer;
    font-weight: bold;
}

/* Select parent link element of class product-card */
a:has(.product-card) {
    text-decoration: none;
}

/* ----- Products List View - Admin ----- */

.product-card-admin img {
    width: auto;
    height: 120px;
    max-width: 90px;
}

.edit img {
    width: auto;
    height: 180px;
    max-width: 160px;
}

/* Icons for edit and delete */

.button-edit,
.button-delete {
    padding: 0px;
    margin: 0px;
    border: none;
}

.button-edit {
    color: #045879;
}

.button-delete {
    color: #c92939;
}

.product-card-admin .admin-icons {
    display: none;
    cursor: pointer;
}

.product-card-admin:hover .admin-icons {
    display: block;
}

/* ----- Product Details View ----- */

.product-details img {
    width: auto;
    height: 300px;
    max-width: 250px;
    -webkit-filter: drop-shadow(0.5rem 0.5rem 0.5rem #202020);
            filter: drop-shadow(0.5rem 0.5rem 0.5rem #202020);
}

.product-details h2,
.product-details h3 {
    color: var(--dark-color);
}


/* ----- Media Queries ----- */

/* Large screen sizes - 992px up*/

@media screen and (min-width: 992px) {
    .product-details img {
        height: 400px;
        max-width: 350px;
    }

    .product-card-admin img {
        width: auto;
        height: 160px;
        max-width: 140px;
    }

    .edit img {
        height: 300px;
        max-width: 280px;
    }
}