/*=====================
  5.5  home CSS start
==========================*/
.home-profile-section {
    background-color: rgba(var(--theme-color), 1);

    .form-input {
        width: 100%;
        position: relative;

        .form-control {
            position: relative;
            padding: 15px;
            color: rgba(var(--title-color), 1);
            background-color: rgba(var(--white), 1);
            border: none;
            border-radius: 6px;

            @media (max-width: 600px) {
                padding: calc(12px + (17 - 12) * ((100vw - 320px) / (600 - 320)));
            }

            &.with-icon {
                padding: 15px 45px;
                background-color: rgba(var(--white), 1);

                @media (max-width: 600px) {
                    padding: calc(12px + (15 - 12) * ((100vw - 320px) / (768 - 320))) 45px;
                }
            }

            &:focus {
                box-shadow: none;
                border-color: none;
            }

            &::placeholder {
                color: rgba(121, 125, 131, 1);
            }
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            --Iconsax-Color: rgba(var(--content-color), 1);
            --Iconsax-Size: 22px;

            [dir="rtl"] & {
                left: unset;
                right: 12px;
            }
        }

        .date-time-picker {
            position: absolute;
            width: 35px;
            height: 35px;
            padding-left: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            border-left: 1px solid rgba(var(--line-color), 1);
            z-index: 1;

            [dir="rtl"] & {
                padding-left: unset;
                padding-right: 6px;
                left: 10px;
                right: unset;
                border-left: unset;
                border-right: 1px solid rgba(var(--line-color), 1);
            }

            .icon {
                --Iconsax-Color: rgba(var(--theme-color), 1);
                --Iconsax-Size: 22px;
            }
        }
    }
}

.home-banner {
    padding-inline: 20px;

    .slider-img {
        width: 100%;
        border-radius: 10px;
    }
}

.categories-list {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    overflow: auto;

    li {
        width: 100%;
        height: 100%;

        .categories-box {
            width: 170px;
            height: 85px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 15px;
            border-radius: 12px;
            background-color: rgba(var(--white), 1);

            @media (max-width: 600px) {
                padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
            }

            .categories-img {
                height: 50px;
                object-fit: contain;
            }

            h6 {
                font-weight: 500;
                color: rgba(var(--theme-color), 1);
            }

            .arrow-icon {
                --Iconsax-Color: rgba(var(--content-color), 1);
                --Iconsax-Size: 22px;
            }
        }
    }
}

.coupon-box {
    position: relative;
    display: flex;
    height: 100%;
    padding: 15px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--line-color), 1);
    border-radius: 8px;
    filter: drop-shadow(0px 4px 20px rgba(var(--title-color), 0.01));

    &::before {
        content: "";
        position: absolute;
        right: 45px;
        top: -8px;
        width: 16px;
        height: 16px;
        background-color: rgba(var(--box-bg), 1);
        border-radius: 100%;
        border: 1px solid rgba(var(--line-color), 1);
        border-left: none;
        border-top: none;
        transform: rotate(45deg);

        [dir="rtl"] & {
            left: 45px;
            right: unset;
        }
    }

    &::after {
        content: "";
        position: absolute;
        right: 45px;
        bottom: -8px;
        width: 16px;
        height: 16px;
        background-color: rgba(var(--box-bg), 1);
        border-radius: 100%;
        border: 1px solid rgba(var(--line-color), 1);
        border-left: none;
        border-top: none;
        transform: rotate(225deg);

        [dir="rtl"] & {
            left: 45px;
            right: unset;
        }
    }

    .coupon-discount {
        writing-mode: vertical-rl;
        padding-left: 12px;
        // width: 43px;
        font-weight: 700;
        font-size: 16px;
        color: rgba(var(--theme-color), 1);
        display: flex;
        align-items: center;
        justify-content: center;

        @media (max-width: 600px) {
            font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (600 - 320)));
        }

        [dir="rtl"] & {
            padding-right: 15px;
            padding-left: unset;
        }
    }

    .coupon-details {
        width: calc(100% - 58px + 20px);
        border-right: 1px dashed rgba(var(--line-color), 1);
        padding-right: 15px;

        [dir="rtl"] & {
            padding-left: 15px;
            padding-right: unset;
            border-right: unset;
            border-left: 1px dashed rgba(var(--line-color), 1);
        }

        .coupon-content {
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            gap: 5px;
            border-bottom: 1px dashed rgba(var(--line-color), 1);

            .coupon-name {
                display: flex;
                align-items: center;
                gap: 10px;

                .coupon-img {
                    width: 33px;
                    height: 33px;
                    object-fit: cover;
                    border-radius: 100%;

                    @media (max-width: 600px) {
                        width: calc(25px + (30 - 25) * ((100vw - 320px) / (600 - 320)));
                        height: calc(25px + (30 - 25) * ((100vw - 320px) / (600 - 320)));
                    }
                }
            }

            .rating {
                display: flex;
                align-items: center;
                gap: 5px;

                h6 {
                    font-weight: 400;
                    color: rgba(var(--title-color), 1);
                }

                .star {
                    width: 10px;
                    height: 10px;
                }
            }
        }

        p {
            margin: 0;
            font-weight: 400;
            color: rgba(var(--title-color), 1);
            padding: 10px 0 5px;
            border-bottom: 1px dashed rgba(var(--dashed-line), 1);

            span {
                color: rgba(var(--title-color), 1);
                font-weight: 500;
            }
        }

        .content-list {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 15px;
            border-bottom: 1px dashed rgba(var(--line-color), 1);

            li {
                display: flex;
                align-items: center;
                gap: 5px;
                color: rgba(var(--content-color), 1);

                .icon {
                    --Iconsax-Color: rgba(var(--content-color), 1);
                    --Iconsax-Size: 19px;

                    @media (max-width: 600px) {
                        --Iconsax-Size: calc(16px + (19 - 16) * ((100vw - 320px) / (600 - 320)));
                    }
                }
            }
        }
    }
}

.total-ride-list {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

    li {
        padding-bottom: 5px;
        background-color: rgba(var(--theme-color), 1);
        border-radius: 8px;
        outline: 1px solid rgba(var(--line-color), 1);

        .ride-box {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: rgba(var(--white), 1);
            border-radius: 8px;

            @media (max-width: 600px) {
                padding: calc(10px + (15 - 10) * ((100vw - 320px) / (600 - 320)));
            }

            h4 {
                font-weight: 700;
                color: rgba(var(--theme-color), 1);
            }

            h6 {
                font-weight: 500;
                color: rgba(var(--title-color), 1);
            }

            .ride-icon {
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(var(--theme-color), 0.1);
                border-radius: 100%;

                .icon {
                    --Iconsax-Color: rgba(var(--theme-color), 1);
                    --Iconsax-Size: 16px;
                }
            }

            .arrow-icon {
                --Iconsax-Color: rgba(var(--content-color), 1);
                --Iconsax-Size: 16px;
            }
        }
    }
}

.upcoming-ride-section {
    background-color: rgba(var(--box-bg), 1);
    border-radius: 8px;
}

.date-time-section {
    .heading-part {
        position: relative;
        z-index: 1;

        h4 {
            position: relative;
            z-index: 1;
        }
    }
}