@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.BookingWrapper {
    .BookingContentWrap {
        .DetailsListWrap {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                &:last-child {
                    border-bottom: 0px;
                    padding-bottom: 0px;
                }

                .ListNameSpan {
                    color: $grey344Color;
                }

                .ListValueDiv {
                    background-color: $bgColor;
                    padding: 6px 14px;

                    button {
                        i {
                            background-color: $blackColor;
                        }
                    }

                    .AddressWrap {
                        overflow-x: auto;

                        @media screen and (min-width: $xsm) {
                            min-width: 300px;
                            max-width: 300px;
                        }

                        @media screen and (min-width: $lg) {
                            min-width: 350px;
                            max-width: 450px;
                        }

                        &::-webkit-scrollbar {
                            width: 5px;
                            height: 5px;
                        }

                        &::-webkit-scrollbar-track {
                            background-color: $whiteColor;
                            border-radius: 12px;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: $grey344Color;
                            border-radius: 12px;
                        }

                        &::-webkit-scrollbar-thumb:hover {
                            background: #555;
                            border-radius: 12px;
                        }

                        p {
                            text-align: right;

                            @media screen and (min-width: $xsm) {
                                width: max-content;
                            }
                        }
                    }
                }
            }
        }

        .CardnumberInputWrap {
            .CardnumberInput {
                position: relative;

                input {
                    padding-left: 57px;
                }

                &::after {
                    width: 35px;
                    height: 25px;
                    background-image: url("../../../../../public/images/icon-visa.svg");
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    content: "";
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                }
            }
        }
    }
}

.TabItem {
    &:last-child {
        margin-bottom: 0px;
    }

    .TabItemHeader {
        cursor: pointer;

        .TabHeaderIcon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            max-width: 28px;
            height: 28px;
            transition: 0.2s all;
            background-color: $whiteColor;
            border-radius: 100%;

            @media (min-width: $sm) {
                min-width: 30px;
                max-width: 30px;
                height: 30px;
            }

            @media (min-width: $md) {
                min-width: 36px;
                max-width: 36px;
                height: 36px;
            }

            i {
                position: relative;
                transition: 0.2s all;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    background-color: $whiteColor;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                &::after {
                    width: 2px;
                    height: 14px;
                }

                &::before {
                    width: 14px;
                    height: 2px;
                }
            }
        }
    }

    .TabItemBody {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
        background-color: $whiteColor;
    }

    &.TabActive {
        transition: max-height 0.4s ease-in-out;
        max-height: 1000px;
        overflow: visible;

        .TabItemHeader {
            transition: 0.4s all;
            background-color: $whiteColor;

            .TabHeading {
                color: $blackColor;
            }

            .TabHeaderIcon {
                background-color: $whiteColor;

                i {

                    &::before,
                    &::after {
                        background-color: $blackColor;
                    }

                    &:after {
                        display: none;
                    }
                }
            }
        }
    }
}

// .PolicyLabel {
//     span {
//         &::before {
//             top: 0px !important;
//             transform: none !important;
//         }

//         &::after {
//             top: 4px !important;
//             left: 6px !important;
//             transform: none !important;
//         }
//     }
// }