:root {
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --color-green-600: oklch(0.627 0.194 149.214);
}

.sp-line-1,
.sp-line-2,
.sp-line-3,
.sp-line-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.sp-line-1 {
    -webkit-line-clamp: 1;
}

.sp-line-2 {
    -webkit-line-clamp: 2;
}


.sp-line-3 {
    -webkit-line-clamp: 3;
}

.sp-line-4 {
    -webkit-line-clamp: 4;
}

.object-cover {
    object-fit: cover;
}


.post-mini .post-title {
    margin-bottom: .5rem;
    font-size: 14px;
    font-weight: 600;
}

.tag-list li a {
    display: inline-block;
    font-size: 16px;
    background-color: var(--bs-gray-300);
    padding: .15rem .75rem;
    margin: .275rem 0;
    color: var(--bs-body-color);
    border-radius: .25rem;
    transition: 0.35s all ease-in-out;
    font-weight: 500;
}

.vh-50 {
    height: 50vh;
}

.vh-80 {
    height: 80vh;
}

.post .post-title {
    font-size: 18px;
    min-height: 74px;
}

.post-mini .post-content {
    flex-grow: 1;
    padding-left: 1rem;
}

.post-mini .post-img img {
    min-height: 80px;
}

.image-hover img {
    min-height: 233px;
}

.post .post-content {
    min-height: 168px;
}

.mini-card .card-title {
    font-size: 18px;
}

.circle-icon.like-icon:hover, .circle-icon.like-icon:focus, .circle-icon.like-icon.liked {
    color: unset;
}

.text-success {
    color: var(--bs-primary) !important;
}

.img-maxh-242 figure {
    max-height: 242px;
}


/* Custom CSS for features not covered by Tailwind */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.sticky-booking {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

@media (max-width: 768px) {
    .sticky-booking {
        position: static;
        margin-top: 20px;
    }

}

.tab-active {
    color: #6cb015;
    border-bottom: 3px solid #6cb015;
}
.tab-hover:hover {
    color: #6cb015;
}
.sticky-booking {
    position: sticky;
    top: 200px;
}
.carousel-item {
    display: none;
}
.carousel-item.active {
    display: block;
    animation: fade 0.5s;
}
@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}
.review-criteria-bar {
    background-color: #e0e0e0;
    height: 8px;
    border-radius: 4px;
}
.review-criteria-progress {
    background-color: #6cb015;
    height: 100%;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .sticky-booking {
        position: static;
        margin-top: 20px;
    }
}


.detail-homestay .image-hover img {
    max-height: 200px;
}


/* Custom CSS for lightbox and animations */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.thumbnail-container {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

.thumbnail-container::-webkit-scrollbar {
    height: 5px;
}

.thumbnail-container::-webkit-scrollbar-track {
    background: transparent;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.price-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.amenity-icon {
    transition: transform 0.2s ease;
}

.amenity-icon:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .room-details-container {
        flex-direction: column;
    }

    .gallery-section, .info-section {
        width: 100% !important;
    }
}

.fi-logo {
    object-fit: contain;
}

.z-1111 {
    z-index: 1111;
}

.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.star-rate-view .star-value.rate-5 {
    width: 100%;
}

.star-rate-view .star-value.rate-4 {
    width: 80%;
}

.star-rate-view .star-value.rate-35 {
    width: 70%;
}

.star-rate-view .star-value.rate-3 {
    width: 60%;
}

.star-rate-view .star-value.rate-25 {
    width: 50%;
}

.star-rate-view .star-value.rate-2 {
    width: 40%;
}

.star-rate-view .star-value.rate-15 {
    width: 30%;
}

.star-rate-view .star-value.rate-1 {
    width: 20%;
}

.star-rate-view .star-value.rate-05 {
    width: 10%;
}

.star-rate-view .star-value.rate-0 {
    width: 0%;
}