/* GENERAL */
section {
    aspect-ratio: unset;
}

.hotel-title {
    width: 90%;
    margin: 1rem auto;
    font-size: 1.65rem;
}

.hotel-title.top {
    font-family: 'Stella', sans-serif;
    margin-bottom: 0.5rem;
}

.swiper-slide:nth-of-type(4n+1) .product-content {
    background-color: var(--gotifi-orange);
}

.swiper-slide:nth-of-type(4n+2) .product-content {
    background-color: var(--gotifi-green);
}

.swiper-slide:nth-of-type(4n+3) .product-content {
    background-color: var(--gotifi-blue);
}

.swiper-slide:nth-of-type(4n+4) .product-content {
    background-color: var(--gotifi-red);
}

.swiper-slide .product-content {
    display: flex!important;
}

.swiper-button-next, .swiper-button-prev {
    background-color: var(--gotifi-yellow);
    width: 2.85rem!important;
    border-radius: 50%;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.5rem!important;
    font-weight: bold;
    color: #000;
}

.btn-book {
    background: rgb(var(--gotifi-orange-rgb) / 100%);
    border: 1.5px solid var(--gotifi-yellow);
    color: var(--white);
    border-radius: 10rem;
}

.btn-search {
    background: var(--gotifi-yellow);
    border: 2px solid var(--black);
    color: var(--black);
    font-weight: bold;
    border-radius: 10rem;
}

.btn-primary {
    background: rgb(var(--gotifi-orange-rgb) / 100%)!important;
    border: 1.5px solid var(--gotifi-orange);
    color: var(--white)!important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Counter Input */
.counter-container .btn-outline-secondary {
    background-color: var(--gotifi-yellow);
    border: 1.5px solid var(--black);
    color: var(--black);
}

/* SEARCH SECTION */
.section-search {
    margin-top: 128px;
}
.hotel-people {
    width: 75%;
    z-index: 9;
    bottom: -3rem;
}
.hotel-search-container {
    transform: rotate(-8deg) translateY(4rem);
    position: absolute;
    min-width: 500px;
    min-height: 380px;
    bottom: 0;
    right: 2rem;
    border-top-right-radius: 4rem;
    background-color: var(--gotifi-green);
    z-index: 10;
}
.hotel-search-content {
    transform: rotate(8deg) translateY(-1rem);
}
.hotel-search-container .field-input, .hotel-search-container .field-select {
    background-color: var(--white);
    border: 2px solid var(--black);
    border-radius: 8px;
    overflow: hidden;
}
.hotel-search-container .field-select select {
    border: none;
    background-color: rebeccapurple;
}
.hotel-search-container .field-select select:nth-of-type(1) {
    border-right: 1.5px solid var(--black);
}
.hotel-search-container .field-select select:focus-visible {
    outline: none;
    box-shadow: none;
}


/* TOP RATED HOTEL */
.section-rated {
    background-color: var(--gotifi-green);
}
.rated-hotel {
    background-color: var(--white);
    width: 31%;
    aspect-ratio: 3/2;
    border-radius: 8px;
    margin-block: 1rem;
}


/* EXPLORE */
.explore-mobile {
    display: none!important;
}
.product-content .product-description h3 {
    font-size: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.exclusive-btn {
    transform: rotate(-25deg);
    transform-origin: 80% 30%;
}
.exclusive-btn .main-sub {
    transform: rotate(-10deg);
}
.exclusive-btn .main-sub {
    transform-origin: -20% 125%;
}
.next-btn.deals {
    background-color: var(--gotifi-yellow);
    color: var(--black);
}


/* REVIEW */
.section-review {
    background-color: var(--gotifi-blue);
}
.title-section{
    height:40px;
    overflow-y: auto;
}
.feedback-container {
    border-top-left-radius: 2rem;
    /* min-width: 18.5rem; */
    min-width: 16rem;
    min-height: 270px;
}
.feedback-header .detail {
    font-size: 12.5px;
}
.feedback-header .quadrant {
    top: 0;
    right: 0;
    height: 100%;
}
.feedback-content .rating, .feedback-content .comment {
    font-size: 12px;
}
.feedback-content .rating, .feedback-content .comment p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* line-clamp: 4;
    -webkit-line-clamp: 4;  */
    /* number of lines to show */
    -webkit-box-orient: vertical;
}
.left-gradient, .right-gradient {
    height: 100%;
    position: absolute;
    max-width: 200px;
    z-index: 2;
}
.left-gradient {
    width: 6%;
    left: 0;
    background-image: linear-gradient(to left, rgba(97,199,241,0), rgba(97,199,241,1));
}
.right-gradient {
    width: 14%;
    right: 0;
    background-image: linear-gradient(to right, rgba(97,199,241,0), rgba(97,199,241,0.7), rgba(97,199,241,1));
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.5rem!important;
    font-weight: bold;
    color: #000;
}
.swiper-button-next {
    right: 1rem;
}
.swiper-button-prev {
    left: 1rem;
}
.swiper-button-next.feedback, .swiper-button-prev.feedback {
    background-color: var(--white);
}


@media screen and (max-width:1024px) {
    /* SEARCH SECTION */
    .section-search {
        min-height: 400px!important;
    }
    .hotel-people {
        width: 65%;
        bottom: -2.2rem;
    }
    .hotel-search-container {
        min-width: 490px;
        min-height: 365px;
    }
    .hotel-search-content {
        transform: rotate(8deg) translateY(-1rem);
    }

    /* EXPLORE */
    .product-content {
        border-radius: 2.5rem 0 14rem 0;
    }
    .exclusive-btn {
        right: 0;
    }

    /* REVIEW */
    .right-gradient {
        right: -1rem;
    }
}
@media only screen and (max-width: 992px) and (min-width: 718px) {
    /* SEARCH SECTION */
    .hotel-people {
        display: none;
    }

    /* EXPLORE */
    .section-explore {
        margin-bottom: 4rem!important;
    }
    .section-explore > div {
        width: 100%!important;
    }
    .product-content {
        margin-inline: 4px!important;
        border-radius: 2.5rem 0 12.5rem 0;
    }
    .product-content:nth-of-type(1), .product-content:nth-of-type(2) {
        display: flex!important;
    }
    .product-content .product-description h3 {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
}
@media screen and (max-width:480px) {
    /* SEARCH SECTION */
    .section-search {
        min-height: 250px !important;
    }
    .hotel-people {
        display: none;
    }
    .hotel-search-container {
        min-width: 100%;
        min-height: 250px;
        background-color: unset;
        position: unset;
        padding: 0 !important;
        padding-bottom: 2rem !important;
        transform: unset;
        align-items: end !important;
    }
    .hotel-search-content {
        transform: unset;
    }

    /* TOP RATED HOTEL */
    .rated-hotel {
        width: 48%;
        margin-block: 0.5rem;
    }

    /* EXPLORE */
    .explore-desktop {
        display: none!important;
    }
    .explore-mobile {
        display: block!important;
        padding-bottom: 2rem;
    }
    .product-content:nth-of-type(1), .product-content:nth-of-type(2) {
        display: flex!important;
    }
    .product-content {
        border-radius: 2.5rem 0 15.5rem 0;
        aspect-ratio: 2/3.1;
        padding-top: 1.5rem!important;
        margin-top: 1rem;
    }
    .product-content .product-description h3 {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
    .swiper-button-next {
        right: 0;
    }
    .swiper-button-prev {
        left: 0;
    }
    .exclusive-btn {
        bottom: 2rem;
        z-index: 5;
    }

    /* REVIEW */
    .hotel-title.sub {
        margin-top: 2rem!important;
        padding-left: 1rem!important;
        font-size: 1.45rem;
    }
    .section-review .reviewSwiper .swiper-slide:first-of-type {
        margin-left: 0!important;
    }
    .section-review .reviewSwiper .right-gradient.feedback {
        background-image: none;
    }

    /* MODAL */
    .pax-modal .modal-title {
        font-size: 24px;
    }
    .pax-modal .modal-dialog {
        width: 90%;
    }
    .counter-container {
        width: 65% !important;
    }
}