/* Fix Leaflet tiles disappearing due to Tailwind CSS */
.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
}
#map {
    background-color: #e5e7eb; /* slate-200 */
    outline: none;
}
/* Custom styles for Discover Rangsit */
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important; /* matches rounded-3xl */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    width: 200px !important;
}
.leaflet-popup-tip-container {
    display: none;
}
/* Scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
/* Marker Clusters */
.marker-cluster-small { background-color: rgba(0, 153, 51, 0.6); }
.marker-cluster-small div { background-color: rgba(0, 153, 51, 0.6); color: white; }
.marker-cluster-medium { background-color: rgba(30, 58, 138, 0.6); }
.marker-cluster-medium div { background-color: rgba(30, 58, 138, 0.6); color: white; }
.marker-cluster-large { background-color: rgba(15, 118, 110, 0.6); }
/* Global Input Focus Styles */
input:focus, select:focus, textarea:focus, button:focus {
    outline: none !important;
}

#homeSearch:focus, #searchInput:focus {
    box-shadow: none !important;
    border: none !important;
}

/* Custom FontAwesome Markers */
.custom-div-icon {
    background: none;
    border: none;
}
.custom-marker {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 2px solid white;
    transition: all 0.3s ease;
}
.custom-marker i {
    transform: rotate(45deg);
}
.custom-marker:hover {
    transform: rotate(-45deg) scale(1.2);
    z-index: 1000;
}

/* Star Rating Styles */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.star-rating input { display: none; }
.star-rating label {
    font-size: 2rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #fbbf24; /* yellow-400 */
}
.star-rating label:active { transform: scale(0.9); }