/**
 * product-list.css
 *
 * The productlist is used to display magazines and bonuses.
 * The number of elements in one row is defined by the flex-basis attribute.
 * 
 *
 * Index
 * - PRODUCT-LIST
 *   - MAGAZINE
 *   - BONUS
 *
 * Media
 * - MOBILE (only)
 * - TABLET
 * - DESKTOP
 */

/* ------------------------------------ *
 * #PRODUCT-LIST
 * ------------------------------------ */
.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100% + 20px);
    margin: 10px -10px 0;
    list-style: none;
    box-sizing: border-box;
}
.product-list li {
    min-width: 140px;
    max-width: 230px;
    flex: 1 1 50%;
    margin: 10px 0 20px;
    padding: 0 10px;
    box-sizing: border-box;
}

.product-list a {
    position: relative;
    display: flex;
    text-decoration: none;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}
.product-list a > img {
    display: block;
    width: 100%;
    max-width: 210px;
    clear: both;
}
.product-list a > h3 {
    margin: 5px 0;
    font-family: Amble;
    text-decoration: underline;
}

/* Headline of the product-list */
.product-list-headline {

}
.product-list-headline span {
    font-family: Amble;
    font-size: 1rem;
}

/* product-list desc */
.product-list-longdesc {

}


.listprice-box {
    font-size: 1.2em;
}
.listprice-price {

}
.listprice-price strong {
    color: rgb(131, 192, 41);
}
.listprice-duration {

}
.product-list .button-container {
    margin-bottom: 0;
}


/* additonal classes for quick order */
.product-list .selected {

}
.product-list .selected button {

}
.product-list .selected button:before {
    content: '\f00c';
    font-family: FontAwesome;
    font-size: 0.9em;
    padding: 0 3px 0 0;
}

.product-list .disabled {
    opacity: 0.4;
}
.product-list .disabled:hover {
    opacity: 1;
}


.product-list .product-list-loading {
    flex: 1 1 100%;
    max-width: 100%;
    height: 40px;
    background: url(../../img/loading.gif) no-repeat center center transparent;
}



/* #PRODUCT-LIST-MAGAZINE */
.product-list-magazine {

}
.product-list-magazine .price-add-cost {
    display: block;
}



/* #PRODUCT-LIST-BONUS */
.product-list-bonus {

}
.product-list-bonus a {
    text-align: center;
}
.product-list-bonus a > img {
    margin: 0 auto 5px;
}
.product-list-bonus a > h3 {
    flex: 1 1 auto;
    margin-top: 5px;
    font-size: 1.1em;
    font-family: AmbleBold;
    text-decoration: none;
}
.product-list-bonus .price-add {
    font-family: AmbleBold;
    color: rgb(153, 153, 153);
    font-size: 1rem;
}

/* Tooltip in a product list */
.product-list-bonus .tooltip {
    position: absolute;
    top: -25px;
    right: 2px;
}
.product-list-bonus .tooltip i {
    font-size: 1.5em;
}

/* Price handling */
.product-list-bonus .price-add-new {
    display: block;
}





/* #CHAR-LIST - on a-z view for magzines */
.char-list {
    overflow: hidden;
}
.char-list ul {
    list-style: none;
}
.char-list li {
    display: block;
    float: left;
}
.char-list a {
    display: block;
    padding: 4px 7px;
    border-radius: 2px;
    font-size: 1.2em;
    text-decoration: none;
    color: rgb(131, 192, 41);
}
.char-list a:hover {
    text-decoration: underline;
}
.char-list li.char-list-selected a {
    color: rgb(255, 255, 255);
    background: rgb(131, 192, 41);
}





/* #MOBILE: only mobile */
@media not screen and (min-width: 640px) {
    /* #PRODUCT-LIST */
    .product-list:after {
        content: ' ';
        min-width: 140px;
        max-width: 230px;
        flex: 1 1 50%;
    }
}



/* #TABLET */
@media screen and (min-width: 640px) {
    /* #PRODUCT-LIST */
    .product-list li {
        flex-basis: auto;
    }
}



/* #DESKTOP */
@media screen and (min-width: 1024px) {
    /* #PRODUCT-LIST */
    .product-list-headline {
        margin-top: 5px;
    }
    .product-list {
        justify-content: space-around;
        margin-right: 0;
    }
    .product-list li {
        flex-basis: 30%;
        max-width: 210px;
        font-size: 0.9em;
    }
    .product-list li:nth-child(3n+1):last-child {
        margin-right: 500px;
    }
    .product-list li:nth-child(3n+2):last-child {
        margin-right: 250px;
    }



    /* #TOOLTIP */
    .product-list-bonus li:nth-child(4n) .tooltip-text {
        left: -310px;
    }
}