/* Treasures Untold - products app CSS styling */
#product-page,
#product-details-page {
    background-color: var(--tu-mid-grey);
}

#product-details-image-container {
    display: flex;
    justify-content: center;
}

#products-container,
#product-details-container {
    background-color: var(--tu-off-white);
}

.product-details-image {
    max-width: 400px;
}

#product-name,
#product-realm-link,
#product-description,
#product-price,
#product-availability,
#sold-text,
#login-prompt,
#login-buttons,
#countdown-container {
    text-align: center;
}

.btn-prompt {
    width: 40%;
}

#quantity-input,
#add-button {
    width: 130px;
    min-width: fit-content;
}

#quantity-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input[type="checkbox"] {
    accent-color: var(--tu-yellow);
}

.card {
    border-radius: 15px;
}

.card-img-top {
    border-radius: 15px 15px 0px 0px;
}

.card-spacer {
    padding-bottom: 1rem;
}

.out-of-stock {
    filter: saturate(0) blur(1.5px) brightness(1.5);
}

.rubbing {
    cursor: grab;
}

/* Media queries for larger screens. */
@media screen and (min-width: 768px) {
    #product-name,
    #product-realm-link,
    #product-description,
    #product-price,
    #sold-text,
    #product-availability,
    #login-prompt,
    #login-buttons,
    #countdown-container {
        text-align: left;
    }

    #quantity-form {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    #product-details-image-container {
        max-width: fit-content;
    }

}

@media screen and (min-width: 992px) {
    #product-details-image-container {
        align-items: center;
    }
}