/*-- Products Custom CSS --*/

/*-- Product Containers --*/
.product-container,
.product-detail-container {
    background-color: rgba(41, 41, 41, 0.8);
    border: 2px solid rgba(250, 250, 250, 0.6);
}

.product-container:hover {
    background-color: rgba(41, 41, 41, 0.95);
    border: 2px solid var(--green);
}

/*-- Product Quantity Input --*/
.product-quantity-input {
    border: 2px solid rgba(250, 250, 250, 0.5);
    background-color: var(--background-lvl2);
    color: var(--white);
    font-weight: 600;
    max-width: 5rem;
}

/*-- Product Quantity Input Disabled Styling --*/
.product-quantity-input[readonly] {
    background-color: var(--background-lvl2);
    color: var(--white);
}

.product-quantity-input[readonly]:focus {
    border: 2px solid rgba(250, 250, 250, 0.5);
    background-color: var(--background-lvl2);
    color: var(--white);
    box-shadow: None;
}

.custom-select option {
    text-align: left;
    background-color: rgba(41, 41, 41, 0.9);
    color: var(--white);
    border: none;
}

.custom-select:focus > option:checked { 
    background-color:  var(--background-lvl3);
}

.custom-select:hover,
.custom-select:checked {
    background: var(--white);
}

.custom-select-option:hover {
    box-shadow: 0 0 10px 100px var(--green) inset !important;
}