/* RMIT University Vietnam
  Course: COSC2430 Web Programming
  Semester: 2023A
  Assessment: Assignment 1
  Author: Do Le Long An
  ID: s3963207
  Acknowledgement: 
  MDN Web Docs, RMIT Canvas (HTML, CSS learning materials)
  shapedivider.app (For wavy divider svg), 
  sketchfab.com (For the 3D background)
  unplash.com (For quality images)
  flaticon.com, fontawesome.com (For icons and fonts)
  dribble.com, canva.com, Codepen.com (For design idea inspiration) */

.card-wrapper{
    max-width: 1100px;
    position: relative;
    line-height: 1.5;
    color: white;
    text-align: center;
    opacity: 0.9;
    padding-bottom: 25%;
    padding-top: 26%;
    margin: 0 auto;
    font-family: var(--roboto);
    z-index: 4;
}
.card {
    margin: -50% auto -25% auto;
}
.img-display{
    overflow: hidden;
}
.img-showcase{
    display: flex;
    width: 100%;
    transition: all 0.5s ease;
}
.img-showcase img{
    min-width: 100%;
}
.img-select{
    display: flex;
}
.img-item{
    margin: 0.3rem;
}
.img-item img{
    width: 100%;
    display: block;
}
.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3){
    margin-right: 0;
}
.img-item:hover{
    opacity: 0.8;
}
.product-content{
    padding: 2rem 1rem;
    background-color: black;
    opacity: 0.9;
}
.product-title{
    font-size: 3rem;
    text-transform: capitalize;
    font-weight: 700;
    position: relative;
    margin: 1rem 0;
    background-color: var(--primary-color);
}
.product-title::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 80px;
    background: var(--secondary-color);
}
.product-rating{
    color: #ffc107;
}
.product-rating span{
    font-weight: 600;
    color: white;
}
.product-price{
    margin: 1rem 0;
    font-size: 1.3rem;
    font-weight: 700;
}
.product-price span{
    font-weight: 400;
}
.new-price span{
    color: var(--secondary-color);
}
.product-detail h2{
    text-transform: capitalize;
    color: white;
    padding-bottom: 0.6rem;
    font-size: 2rem;
}
.product-detail p{
    font-size: 1.3rem;
    padding: 0.3rem;
    opacity: 0.8;
}
.product-detail ul{
    margin: 1rem 0;
    font-size: 1.3rem;
}
.product-detail ul li{
    margin: 0;
    list-style: none;
    background: url('../../.././assets/checked.png') left center no-repeat;
    background-size: 18px;
    padding-left: 1.7rem;
    margin: 0.4rem 0;
    font-weight: 600;
    opacity: 0.9;
}
.product-detail ul li span{
    font-weight: 400;
}
.purchase-info{
    margin: 1.5rem 0;
}
.purchase-info input,
.purchase-info .btn{
    border: 1.5px solid #ddd;
    border-radius: 25px;
    text-align: center;
    padding: 0.45rem 0.8rem;
    outline: 0;
    margin-right: 0.2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 4;
}
.purchase-info input{
    width: 60px;
}
.purchase-info .btn{
    cursor: pointer;
    color: #fff;
}
.purchase-info .btn:last-of-type{
    background: var(--secondary-color);
}
.purchase-info .btn:hover{
    opacity: 0.9;
}
@media screen and (min-width: 992px){
    .card{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1.5rem;
    }
    .card-wrapper{
        height: 97.8vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30%;
        transform: translateY(-25%);
    }
    .product-imgs{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .product-content{
        padding-top: 0;
    }
}

@media screen and (max-width:1000px) {
    .card-wrapper {
        padding: 0;
        margin-top: 40%;
        transform: translateY(-12%);
    }
    .product-title {
        transform: translateX(0);
        background-color: black;
    }
    .card {
        margin-top: 0;
        margin-bottom: 5%;
    }
}

@media screen and (max-width:500px) {
    .card {
        margin-top: 60%;
    }
}