/* Price Card ---------------------------------- */
.box-list {
    ul {
        padding: 0;
        margin: 0;
    }
    li {
        display: block;
        list-style: none;
    }
}
.price-card,
.price-card-list {
    .box-list {
        li {
            padding: 15px 10px;
            &:nth-child(odd) {
                background-color: #F8F8F8;
                position: relative;
                &:before {
                    content: '';
                    height: 100%;
                    width: 30px;
                    border-radius: 90px 0 0 90px;
                    position: absolute;
                    top: 0;
                    left: -30px;
                    background-color: #F8F8F8;
                }
            }
            @include md {
                font-size: 14px;
            }
            @include sm {
                font-size: 16px;
            }
            &.unavailable {
                color: #BABEC9;
            }
        }
    }
    .box-footer {
        height: 144px;
        display: grid;
        align-content: center;
        justify-content: center;
    }
}
.price-card {
    &-list {
        position: relative;
        z-index: 3;
        margin-left: 30px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 100%;
            border-radius: 30px;
            background-color: $border-color;
            z-index: -1;
        }
        .box-icon {
            height: 180px;
            width: 180px;
            display: grid; 
            align-content: center;
            justify-content: center;
        }
        .box-list {
            li {
                color: $title-color;
                font-weight: 600;
                padding-left: 30px; 
                padding-right: 30px;
            }
        }
        .box-footer {
            width: 180px;
        }
    }
    &-wrap {
        --bs-gutter-x: 8px;
        @include sm {
            --bs-gutter-y: 30px;
        }
    }
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 2;
    padding: 1px;
    background-color: $border-color;
    @include xs {
        border-radius: 20px;
    }
    &:after,
    &:before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: -1;
        transition: 0.4s ease-in-out;
    }
    &:before {
        opacity: 0;
        background-image: $gr-bg1;
    }
    &:after {
        background-color: $white-color;
        inset: 1px;
    }
    .box-header {
        height: 180px;
        padding: 30px 10px 8px 10px;
    }
    .box-title {
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .box-price {
        font-size: 48px;
        font-weight: 700;
        color: $theme-color;
        margin-bottom: 8px;
        @include md {
            font-size: 40px;
        }
    }
    .box-list {
        li {
            &:nth-child(odd) {
                &:before {
                    border-radius: 0;
                    width: 7px;
                    left: -8px;
                    @include sm {
                        display: none;
                    }
                }
            }
        }
    }
    .box-footer {
        height: 144px;
    }
}
.item-active {
    .price-card {
        &:before {
            opacity: 1;
        }
        .th-btn {
            background-color: $theme-color2;
            &:before {
                background-image: $gr-bg1;
                transform: scaleX(1) scaleY(1);
            }
        }
    }
}