@import "../../sass/base/mixins";

.page-taptapstar{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .bg-mask{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(#000, 0.6);
    }
    .box-shop-wrap{
        position: absolute;
        z-index: 2;
        top: px2rem(150);
        left: px2rem(24);
        right: px2rem(24);
        bottom: px2rem(45);
        border-radius: 6px;
        background: #f9e3bd;
        border-radius: px2rem(15);
        &:before{
            content: "";
            position: absolute;
            top: px2rem(-120);
            left: 50%;
            z-index: 2;
            margin-left: px2rem(-368);
            width: px2rem(736);
            height: px2rem(198);
            background: url(../../img/taptapstar/shop_mask.png) 0 0 / 100% no-repeat;
        }
    }
    .box-shop{
        position: absolute;
            top: px2rem(15);
            right: px2rem(15);
            bottom: px2rem(15);
            left: px2rem(15);
        border-radius: 6px;
        background: #fff6ed;
        .box-hd{
            ul{
                display: flex;
                padding: px2rem(60) 0 0 px2rem(30);
            }
            li{
                width: px2rem(150);
                height: px2rem(96);
                margin-right: px2rem(10);
                text-align: center;
                font-size: px2rem(30);
                font-weight: 700;
                color: #b6896b;
                line-height: px2rem(90);
                background: url(../../img/taptapstar/bg_tab.png) 0 px2rem(6) / 100% no-repeat;
                &.active{
                    line-height: px2rem(84);
                    color: #fff3ce;
                    text-shadow: 0 0 2px #ffae00;
                    background: url(../../img/taptapstar/bg_tab_active.png) 0 0 / 100% no-repeat;
                }
            }
        }
        .box-bd{
            position: absolute;
            top: px2rem(170);
            bottom: 0;
            width: 100%;
            overflow: auto;
            .tab-panel{
                display: none;
                &.active{
                    display: block;
                }
            }
        }
    }
    .list-recommend{
        width: px2rem(630);
        margin: 0 auto;
    }
    .recommend-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: px2rem(160);
        margin-bottom: px2rem(10);
        padding: 0 px2rem(18) 0 px2rem(21);
        background: url(../../img/taptapstar/bg_item_purple.png) 0 0 / 100% no-repeat;
        &.bg0,&.bg1{
            background: url(../../img/taptapstar/bg_item_yellow.png) 0 0 / 100% no-repeat;
        }
        &.bg2{
            background: url(../../img/taptapstar/bg_item_green.png) 0 0 / 100% no-repeat;
        }
        &.bg3{
            background: url(../../img/taptapstar/bg_item_blue.png) 0 0 / 100% no-repeat;
        }
        &.bg4{
            background: url(../../img/taptapstar/bg_item_purple.png) 0 0 / 100% no-repeat;
        }
        .item-fl{
            display: flex;
            font-weight: 700;
            flex: 1;
            align-items: center;
        }
        .item-pic{
            width: px2rem(120);
            height: px2rem(120);
            margin-right: px2rem(15);
        }
        .item-cont{
            font-size: px2rem(18);
            color: #2e2e2e;
            line-height: px2rem(30);
            flex: 1;
        }
        h3{
            font-size: px2rem(21);
            margin: px2rem(12) 0 ;
            color: #FFFFFF;
            text-shadow: 0 2px px2rem(4) #612716;
        }
        .item-btn{
            display: flex;
            justify-content: center;
            align-items: center;
            width: px2rem(170);
            height: px2rem(66);
            line-height: px2rem(27);
            font-size: px2rem(21);
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            background: url(../../img/taptapstar/btn_buy.png) 0 0 / 100% no-repeat;
            &.ext-buy{
                font-size: px2rem(30);
            }
            &:hover{
                opacity: 0.8;
            }
        }
    }
    .list-gold{
        display: flex;
        text-align: center;
        font-weight: 700;
        margin-left: px2rem(60);
        flex-wrap: wrap;
        .gold-item{
            position: relative;
            width: px2rem(280);
            height: px2rem(306);
            margin: 0 px2rem(15) px2rem(21) 0;
            background: url(../../img/taptapstar/bg_gold.png) 0 0 / auto 100% no-repeat;
        }
        h3{
            font-size: px2rem(21);
            color: #a1201b;
        }
        p{
            font-size: px2rem(18);
            color: #4a190a;
            width: 70%;
            margin: px2rem(-12) auto px2rem(6);
            line-height: px2rem(24);
        }
        .item-pic{
            width: 80%;
            margin: px2rem(12) auto 0 auto;
        }
        button{
            width: px2rem(170);
            height: px2rem(66);
            font-size: px2rem(30);
            color: #FFFFFF;
            -webkit-appearance: none;
            background: url(../../img/taptapstar/btn_buy.png) 0 0 / 100% 100% no-repeat;
            &:hover{
                opacity: 0.8;
            }
        }
        .icon-double{
            position: absolute;
            top: px2rem(-9);
            left: px2rem(-9);
            width: px2rem(154);
            height: px2rem(145);
            background: url(../../img/taptapstar/icon_double.png) 0 0 / 100% 100% no-repeat;
        }
    }
    .popup{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        display: none;
        &.active{
            display: block;
        }
        .box-pop-wrap{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 2;
            width: px2rem(600);
            height: px2rem(930);
            background: #f9e3bd;
            border-radius: px2rem(15);
        }
        .box-pop{
            position: absolute;
            top: px2rem(15);
            right: px2rem(15);
            bottom: px2rem(15);
            left: px2rem(15);
            background: #fff6ed;
            text-align: center;
            border-radius: px2rem(9);
            font-weight: 700;
            box-shadow: 0 0 px2rem(15) 1px #d5d5d5;
        }
        .box-pop_title{
            color: #fff;
            text-shadow: 0 0 4px #612716;
            height: px2rem(90);
            line-height: px2rem(90);
            margin: px2rem(36) 0;
            font-size: px2rem(36);
            background: url(../../img/taptapstar/popup_bg_title.png) center 0 / auto 100% no-repeat;
            img{
                height: px2rem(51);
                vertical-align: middle;
            }
        }
        .box-pop_close{
            position: absolute;
            top: px2rem(-6);
            right: px2rem(-6);
            width: px2rem(66);
            height: px2rem(71);
            background: url(../../img/taptapstar/icon-close.png) center 0 / auto 100% no-repeat;
            &:hover{
                opacity: 0.8;
            }
        }
        .btn-buy{
            -webkit-appearance: none;
           width: px2rem(420);
           height: px2rem(90);
           color: #FFFFFF;
           font-size: px2rem(30);
           background: url(../../img/taptapstar/btn_buy_xl.png) 0 0 / auto 100% no-repeat;
       }
    }
    .popup-book{
        .book-pic{
            width: px2rem(490);
        }
        .book-desc{
            font-size: px2rem(21);
            color: rgb(84,9,4);
            line-height: px2rem(30);
            margin: px2rem(18) 0 px2rem(21);
        }
       .list-book{
           display: flex;
           margin: 0 0 px2rem(30) px2rem(30);
       } 
       .book-item{
           position: relative;
           width: px2rem(160);
           height: px2rem(185);
           color: rgb(84,9,4);
           margin-right: px2rem(15);
           background: url(../../img/taptapstar/popup_cont.png) 0 0 / auto 100% no-repeat;
           &:hover{
                opacity: 0.8;
            }
           &.ext-recommend{
               &:before{
                   content: "";
                   position: absolute;
                   top: px2rem(-6);
                   left: px2rem(-6);
                    width: px2rem(94);
                    height: px2rem(89);
                    background: url(../../img/taptapstar/icon_recommend.png) 0 0 / auto 100% no-repeat;
               }
           }
           h3{
               font-size: px2rem(21);
               margin-top: px2rem(24);
           }
           p{
               position: absolute;
               width: 100%;
               bottom: px2rem(18);
           }
       }
       .btn-close{
           width: px2rem(420);
           height: px2rem(90);
           background: url(../../img/taptapstar/btn-close.png) 0 0 / 100% 100% no-repeat;
           &:hover{
               opacity: 0.8;
           }
       }
    }
    .popup-first{
        .box-pop-wrap{
            width: px2rem(700);
            height: px2rem(1020);
        }
        h2{
            margin: px2rem(51) 0;
            height: px2rem(45);
            background: url(../../img/taptapstar/first_diamond_title.png) center 0 / auto 100% no-repeat;
        }
        p{
            font-size: px2rem(24);
            color: rgb(97, 39, 22);
            margin: px2rem(21) 0;
            span{
                color: rgb(255, 54, 0);
            }
        }
        .list-first{
            display: flex;
            flex-wrap: wrap;
            margin-left: px2rem(50);
        }
        .first-item{
            position: relative;
            width: px2rem(280);
            height: px2rem(306);
            margin: 0 px2rem(15) px2rem(21) 0;
            background: url(../../img/taptapstar/bg_gold.png) center 0 / auto 100% no-repeat;
            &.active{
                &:before{
                    content: "";
                    position: absolute;
                    width: px2rem(264);
                    height: px2rem(289);
                    top: 0;
                    left: 0;
                    border-radius: px2rem(9);
                    border: px2rem(7) solid #ff3600;
                }
            }
            img{
                margin: 0 auto;
                display: block;
                width: 86%;
            }
        }
    }
    .popup-gift{
        .box-pop-wrap{
            height: px2rem(900);
        }
        .star-wrap{
           position: relative;
           margin: px2rem(66) auto px2rem(57) px2rem(102);
           width: px2rem(386);
           height: px2rem(302);
           background: url(../../img/taptapstar/bg-star.png) 0 0 / auto 100% no-repeat;
        }
        p{
            width: 50%;
            font-size: px2rem(21);
            color: rgb(84,9,4);
            line-height: px2rem(27);
            margin: 0 auto px2rem(39) auto;
        }
        img{
                position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
        }
    }
    @for $i from 1 through 2{
        .recommend-title#{$i}{
            background: url(../../img/taptapstar/recommend_title#{$i}.png) 0 0 / auto 100% no-repeat;
        }
    }
    @for $i from 1 through 4{
        .gift-title#{$i}{
            background: url(../../img/taptapstar/gift-title#{$i}.png) 0 0 / auto 100% no-repeat;
        }
    }
}