.wpbnb-guidebook-grid .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    max-width: 1280px;
    margin: auto;    
}

.leaflet-tile {
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
}

.wpbnb-guidebook-grid .card {
    text-decoration: none;
    /* background-color: #fff; */
    /* border-radius: 12px; */
    overflow: hidden;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    /* transition: transform 0.3s; */
}

.wpbnb-guidebook-grid .card.loading{
    background-color: transparent !important;
}

/* 
.card img:hover {
    transform: translateY(-5px);
} */

.wpbnb-guidebook-grid .card .image-container {
    overflow: hidden;
    border-radius: 8px; /* Optional: Add rounded corners */
    display: block;
    height: 300px;
    position: relative;
    background-size: cover !important; /* Default background size */
    background-position: center !important; /* Center the background */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for background-size */
    filter: brightness(0.85); /* Dims the background to 50% */
}

/* Hover state */
.wpbnb-guidebook-grid .card:hover .image-container {
    filter: brightness(1); /* Dims the background to 50% */
}

.wpbnb-guidebook-grid .image-container .dashicons {
    position: absolute;
    top: 5px; /* Adjust position */
    right: 20px; /* Adjust position */
    font-size: 20px; /* Adjust icon size */
    color: #FFFFFF80;; /* Icon color */
    padding: 5px;
    border-radius: 50%; /* Optional: Make it circular */
}

.wpbnb-guidebook-grid .image-container:hover .dashicons {
    color: white; /* Icon turns white on hover */
}

.wpbnb-guidebook-grid .card:hover .image-container img {
    transform: scale(1.05);
    transition: transform 0.3s ease; /* Smooth transition */
}

.wpbnb-guidebook-grid .image-container img {
    display: block; /* Avoid extra space below images */
    transition: transform 0.3s ease; /* Ensure smooth scaling */
}

.wpbnb-guidebook-grid .card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s;
    border-radius: 12px;
}

/* .card:hover img {
    transform: scale(1.05);
} */

.wpbnb-guidebook-grid .card-body {
    padding: 8px 0px 15px 0px;
}

.wpbnb-guidebook-grid .location {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
    /* margin-bottom: 8px; */
}

.wpbnb-guidebook-grid .location i {
    margin-right: 5px;
}

.wpbnb-guidebook-grid .title {
    font-size: 1.1rem;
    font-weight: 600;
    /* margin-bottom: 10px; */
}

.wpbnb-guidebook-grid .guidebook-details {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: #555;
    /* margin-bottom: 10px; */
}

.wpbnb-guidebook-grid .guidebook-details i {
    margin-right: 5px;
}

.wpbnb-guidebook-grid .note {
    font-family: 'Caveat', cursive;
    padding: 10px;
    font-size: 1rem;
    color: #000000;
    font-weight: bold;
    background-color: #ECD97D80;
    margin: 08px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
    padding: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 3px 0px 0px 0px;
    border-color:#ECD97D; 
}

@media (max-width: 768px) {
    .wpbnb-guidebook-grid .card img {
        height: 300px;
    }
}

/* Center categories inline */
.categories {
    display: flex;
    justify-content: center; /* Center horizontally */
    flex-wrap: wrap;  /* Allow items to wrap */
    gap: 15px; /* Space between links */
    margin: 20px 0;
}

/* Style for category links */
.category {
    text-decoration: none; /* Remove underline */
    color: #333; /* Default color */
    font-weight: normal; /* Normal weight by default */
    font-size: 16px;
    transition: color 0.3s, font-weight 0.3s; /* Smooth transition */
}

/* Hover effect */
.category:hover {
    color: #007BFF; /* Change color on hover */
}

/* Selected/Active category styling */
.category.selected {
    font-weight: bold; /* Make bold */
    color: #007BFF; /* Change color if needed */
}

a.category.active {
    /* font-weight: bold !important; */
    color: #000000;
}


/* Add a skeleton loader effect to cards */
.wpbnb-guidebook-grid .card.loading {
    background-color: #f1f1f1;
    box-shadow: none;
    transform: none;
}

.wpbnb-guidebook-grid .card.loading .card-body {
    padding: 0;
}

.wpbnb-guidebook-grid .card.loading .card-body .title,
.wpbnb-guidebook-grid .card.loading .card-body .location,
.wpbnb-guidebook-grid .card.loading .card-body .guidebook-details {
    background-color: #e0e0e0;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    animation: loading 1.5s infinite ease-in-out;
}

.wpbnb-guidebook-grid .card.loading .card-body .title {
    width: 60%;
}

.wpbnb-guidebook-grid .card.loading .card-body .location {
    width: 40%;
}

.wpbnb-guidebook-grid .card.loading .card-body .guidebook-details {
    width: 30%;
}

/* New loading div for the image */
.wpbnb-guidebook-grid .card.loading .image-placeholder {
    background-color: #e0e0e0;
    height: 350px;
    width: 100%;
    border-radius: 12px;
    animation: loading 1.5s infinite ease-in-out;
    margin-bottom: 15px; /* Space below the image placeholder */
}

/* Skeleton animation */
@keyframes loading {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e0e0e0;
    }
}

/* When screen size is small */
@media (max-width: 768px) {
    .wpbnb-guidebook-grid .card.loading .image-placeholder {
        height: 300px;
    }
}


.wpbnb-hide{
    display: none;
}

.powered-by{
    text-align: center;
    padding: 20px 0px;
}    


.wpbnb-guidebook-grid .card-body [target="_blank"]{
    text-decoration: none;
}


.map-hover-card {
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: none;
    z-index: 1000;
    pointer-events: none;
    width: 200px;
}

.map-card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

.map-card-title {
    font-size: 14px;
    margin: 5px 0 0;
    text-align: center;
}


#wpbnb-guidebook-lite{
    height: 500px;
}

.leaflet-top.leaflet-left {
    z-index: 998;
}