/* Make image full height of card */
.tour-img.h-100 {
    height: 100%;
}

.filter-section {
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
    height: 100vh;
}

.filter-section .container {
    max-width: 100%;
}

/* Ensure image covers the area properly */
.object-fit-cover {
    object-fit: cover;
}

/* Adjust badge styles */
.badge {
    padding: 0.4em 0.8em;
    font-weight: 500;
}

/* Adjust star rating for 4.7/5 */
.rate-47 {
    width: 94%;
    /* 4.7/5 = 94% */
}

/* Ensure content has proper padding */
.tour-content.p-4 {
    padding: 1rem !important;
}

.tour-itinerary .badge {
    background: #e23f480a;
    border: #e31e2970 1px solid;
    color: #222;
}

/* Adjust view count styling */
.views-count {
    font-size: 0.875rem;
}

.link-hover:hover {
    color: #e31e29 !important;
}

/* ===== Filter Sidebar – fixed overlay on all devices ===== */
.filter-sidebar {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    right: 0;
    /* Slide in from right */
    width: 100%;
    height: 100%;
    z-index: 1050;
    background: white;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On larger screens, limit the width and keep it on the right */
@media (min-width: 768px) {
    .filter-sidebar {
        width: 400px;
        /* Adjust as needed */
        left: auto;
        right: 0;
    }
}

@media (max-width: 768px) {
    .filter-section {
        /* padding-top: 20px; */
        /* padding-bottom: 20px; */
        height: 100% !important;
    }
}

.filter-sidebar.show {
    display: block;
    transform: translateX(0);
    animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.filter-sidebar.hiding {
    animation: slideOutRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== Filter Sidebar – Slide From Left ===== */
.filter-sidebar2 {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    /* Keep sidebar on left */
    width: 100%;
    height: 100%;
    z-index: 1050;
    background: white;
    overflow-y: auto;
    padding: 20px;

    /* Start hidden on left side */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On larger screens */
@media (min-width: 768px) {
    .filter-sidebar2 {
        width: 400px;
    }
}

/* Show Sidebar */
.filter-sidebar2.show {
    display: block;
    transform: translateX(0);
    animation: slideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Hide Sidebar */
.filter-sidebar2.hiding {
    animation: slideOutLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Slide In Animation */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Slide Out Animation */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Overlay backdrop */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-overlay.show {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

.filter-overlay.hiding {
    animation: fadeOut 0.3s ease forwards;
}

body.filter-open {
    overflow: hidden;
}

/* Tour list scroll on desktop */
@media (min-width: 1200px) {
    .tour-list {
        max-height: calc(100vh - 65px);
        overflow-y: auto;
        padding-right: 10px;
    }
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}