.coupon-group {
    &.unable{
        @screen <xs{
            padding-bottom: 0rem
        }
        pointer-events: none;
        filter: grayscale(1);
        .coupon-act{
            transform-origin: center;
            transform: rotate(-35deg) translateY(-50%);
            text-align: center;
            top: 50%;
            left: 50%;
            @screen <tn{
                top: 70%;
                left: 60%;
            }
        }
    }
}
.coupon-item{
    @apply rounded-lg px-3 bg-white flex flex-row items-center shadow relative border;
    border-color: rgba(#ccc,.3);
}
.coupon-img {
    @screen <xs{
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }
    @screen <lg{
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
    }
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    img{
        object-fit: contain;
    }
}
.coupon-sep{
    @apply hidden tn:block relative px-3 ;
    height: 100px;
    // @if $temp{
    //     mask-border: url('../../assets/img/mask-coupon.svg') 30;
    //     -webkit-mask-box-image: url('../../assets/img/mask-coupon.svg') 30;
    // }
    // @else{
    //     mask-border: url('../../assets/img/mask-coupon.svg') 30;
    //     -webkit-mask-box-image: url('../../assets/img/mask-coupon.svg') 30;
    // }
}
.coupon-circ{
    position: absolute;
    border-radius: 999999px;
    height: 30px;
    width: 30px;
    background-color: #fff;
    content: '';
    left: 50%;
    transform: translateX(-50%);
}
.circ-t{
    top: -10px;
    --tw-shadow: inset 0 -1px 1px -1px rgb(0 0 0 / 0.15);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.circ-b{
    bottom: -10px;
    --tw-shadow: inset 0 4px 5px -3px rgb(0 0 0 / 0.15);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    @screen <xs{
        display: none
    }
}
.coupon-content{
    @apply py-2 px-2 flex justify-between self-stretch;
}

.coupon-detail{
    @apply flex flex-col justify-between h-full w-full;
    .lim-2{
        -webkit-line-clamp: 1!important;
        @screen sm{
            -webkit-line-clamp: 2!important;
        }
    }
    .lim-3{
        -webkit-line-clamp: 2!important;
        @screen sm{
            -webkit-line-clamp: 3!important;
        }

    }
}
.coupon-act{
@apply     flex items-center pl-2 sm:pl-4;
    button{
        @apply w-auto whitespace-nowrap
    }
    // @screen sm{
    //     flex: 0 0 100px
    // }
}

.bg-ss{
    background-color: #FFB6CD;
}

.form-style.disl{
    pointer-events: none;
}


// coupon modal selector
.coupon-modal{
    .coupon-act{
        @screen <xs{
            position: initial;
            left: initial;
            right: initial;
            top: initial;
        }
        .radck-wicn{
            label{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                text-align: center;
            }
            .rdo-stl{
                margin-right: 2.5rem;
                margin-left: auto;
                margin-top: 0;
                width: 1.75rem;
                height: 1.75rem;
            }
            input[type=radio]:checked + label > span{
                position: relative;
                box-shadow: none;
                @apply border-primary;
                &:after{
                    position: absolute;
                    content: '\f00c';
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    font-family: 'Font Awesome 5 Free';
                    font-size: 1rem;
                    width: 1.25rem;
                    height: 1.25rem;
                    color: #fff;
                    font-weight: 900;
                }
            }
            @screen <lg{
                .rdo-stl{
                    margin-right: 1.5rem;
                    width: 1.5rem;
                    height: 1.5rem;
                }
                input[type=radio]:checked + label > span{
                    &:after{
                        font-size: .95rem;
                        width: 1.25rem;
                        height: 1.25rem;
                    }
                }
            }
            @screen <xs{
                .rdo-stl{
                    margin-right: .5rem;
                }
                input[type=radio]:checked + label > span{
                    @apply bg-primary;
                    &:after{
                        font-size: .95rem;
                        width: 1.25rem;
                        height: 1.25rem;
                    }
                }
            }
        }
    }
    @screen <xs{
        .coupon-detail{
            padding-right: 25px
        }
    }
    @screen <tn{
        label{
            padding-top: 90px
        }
    }
}

.collector-coup .coupon-circ{
    background-color: #FEF6F3;
}

// ModalCoupon
#couponModal{
    .modal-dialog{
        max-width: 1199px;
        @apply sm:w-[95%];
    }
    .coupon-img{
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }
    .coupon-circ{
        width: 20px;
        height: 20px;
    }
    .modal-body{
        overflow-x: hidden;
    }
}


.coupon-changing{
    cursor: pointer;
}
.coupon-changing,
.coupon-apply,
.coupon-display{
    display: none;
    &.activ{
        display: block;
    }
} 


.coupon-irl-wrapper{
    @apply p-2 bg-no-repeat bg-cover rounded-md w-full h-[120px];
    background-image: url('../img/coupon-bg.jpg');

.coupon-irl-container{
    border: 1px solid;
    @apply pr-1 relative h-full flex rounded-md border-white border-opacity-40;
    background-color: rgba(255,255,255,.9);
    .text-editor{
        @apply line-clamp-3;
    }
}
.coupon-cd-wrapper{
    @apply relative text-16 font-semibold text-center bg-transparent p-1 flex items-center justify-center leading-5 text-black border-black;
    width: 80px;
    border-right: 2px dashed;
    img{
        @apply h-full w-full object-cover object-center
    }
}

.coupon-irl-stitle{
    @apply font-light text-black text-12 leading-4 line-clamp-2;
}
.coupon-irl-mtitle{
    @apply font-medium text-black text-13 md:text-14 leading-4 line-clamp-1;
}
}
.coupon-irl-content{
    @apply pt-2;
}
.discount-rate{
    position: absolute;
    top: 5px;
    right: 5px;
    @apply text-20 font-semibold whitespace-nowrap text-black;
}
.cp-cd{
    @apply text-12 md:text-14 font-medium text-black;
} 

.butn-coupon{
    @apply text-[12px] text-dark xl:text-12 bg-secondary font-light px-4 py-1 leading-4 ml-1 rounded-2xl absolute;
}
.butn-coupon.unable,.coupon-irl-wrapper.unable{
    pointer-events: none;
    filter: grayscale(1);
    opacity: .5;
}

.cv{
    @apply w-[20px] absolute;
    left: calc(80px - 10px);
    top: -1px;
    &.cv-revert{
        top: initial;
        bottom: -2px;
        transform: rotate(180deg);
        transform-origin: center;
    }
}