/* Layout Containers */
.map-page-wrapper {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.adventure-container {
    display: flex;
    height: 85vh; /* Adjust based on your header height */
    position: relative;
    background-color: #fffaf0;
    gap: 20px;
    font-family: "Georgia", serif;
    padding: 20px;
}

#map {
    flex: 3;
    height: 100%;
    border-radius: 15px;
    border: 1px solid #ffdfc6;
}

#sidebar {
    flex: 1;
    height: 100%;
    background-color: #fffaf0;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-left: 1px solid #ffdfc6;
}

/* --- MOBILE SPECIFIC STYLES --- */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    div#sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        height: 100vh; /* Use viewport height */
        z-index: 2000;
        background-color: #fffaf0;

        /* Initial hidden state */
        transform: translateX(100%) !important;
        visibility: hidden !important;
        transition:
            transform 0.3s ease,
            visibility 0.3s ease;
        display: flex !important;
    }

    #sidebar::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        width: 4px;
        height: 40px;
        background: #94a7ae;
        border-radius: 2px;
        opacity: 0.5;
    }

    div#sidebar.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    #sidebarToggle {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000 !important;
        background: #94a7ae;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        font-family: "Georgia", serif;
    }
}

/* Hide toggle on desktop */
@media (min-width: 769px) {
    #sidebarToggle {
        display: none;
    }
    #sidebar {
        transform: none !important;
    }
}

.leaflet-marker-icon:not(.custom-cluster-wrapper) {
    /* This shifts the default blue marker toward a warm gold/brown */
    filter: hue-rotate(160deg) sepia(0.5) saturate(1.5);
    opacity: 1;
}

#sidebar h3 {
    color: #7a8d94; /* Slate Blue Header */
    border-bottom: 2px solid #ffdfc6; /* Keep the Peach underline for warmth */
    padding-bottom: 5px;
    font-family: "Georgia", serif;
}

.search-container {
    position: relative;
    margin-bottom: 15px;
}

.memory-search {
    width: 100%;
    padding: 10px 35px 10px 10px;
    border-radius: 8px;
    border: 1px solid #94a7ae;
    box-sizing: border-box;
    outline: none;
}

.clear-search {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #94a7ae;
    font-weight: bold;
    display: none;
    font-family: sans-serif;
}

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.filter-bar select {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #94a7ae;
    background: #fffaf0;
    color: #7a8d94;
}

.map-controls {
    padding: 15px;
    padding-top: 5px;
    border-bottom: 1px solid #eee;
    font-size: 0.8rem;
}
#photo-filter {
    accent-color: #94a7ae; /* Dusty Blue checkbox */
    cursor: pointer;
}
.map-controls span {
    cursor: pointer;
}

#trip-list div {
    border-left: 3px solid transparent;
    transition: 0.3s;
}

#trip-list div:hover {
    background: #f0f4f5; /* Very subtle Blue-White tint */
    border-left: 3px solid #94a7ae; /* Dusty Blue accent bar */
    color: #5d6d74;
}

.leaflet-bar a {
    background-color: #fffaf0 !important; /* Your body color */
    color: #94a7ae !important; /* Dusty Blue text */
    border-bottom: 1px solid #ffdfc6 !important; /* Peach separator */
}

.leaflet-bar a:hover {
    background-color: #f0f4f5 !important;
    color: #7a8d94 !important;
}

.trip-entry:hover {
    background: linear-gradient(135deg, #ffdfc6 0%, #fffaf0 100%);
    border-left: 4px solid #94a7ae; /* Dusty Blue accent */
    padding-left: 8px; /* Slight nudge effect */
}

/* Container for the expanded list */
.trip-destinations {
    border-left: 2px solid #ffdfc6; /* Peach line */
    margin-left: 15px;
    overflow: hidden;

    /* Starting State (Closed) */
    max-height: 0;
    opacity: 0;
    visibility: hidden;

    /* Smooth Transition for both Opening and Closing */
    transition:
        max-height 0.5s cubic-bezier(0, 1, 0, 1),
        opacity 0.3s ease,
        visibility 0.3s;
}

.trip-destinations.expanded {
    max-height: 1000px; /* High enough for all trips */
    opacity: 1;
    visibility: visible;

    /* Different easing for the "unroll" feel */
    transition:
        max-height 0.5s ease-in-out,
        opacity 0.5s ease-in;
}

/* The individual destination links */
.dest-link {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #7a8d94; /* Darker Dusty Blue */
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 2px 10px 2px 0;
}

/* Subtle animation for the expansion */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover state for the main trip header */
.trip-header:hover {
    background-color: rgba(255, 223, 198, 0.2); /* Faint Peach */
}

/* Only dim markers IF the map has this class */
#map.map-focus-mode .leaflet-marker-icon:not(.active-trip-marker),
#map.map-focus-mode .custom-cluster-wrapper:not(.active-trip-marker) {
    opacity: 0.45 !important;
    filter: grayscale(1);
}

.popup-photo-wrapper {
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    padding: 5px;
    border: 1px solid #f9f0e5; /* Floral White */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.popup-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.trip-popup strong {
    color: #7a8d94; /* Darker Dusty Blue */
    font-family: "Georgia", serif;
}

.hidden {
    display: none !important;
}
.popup-img:not(.loaded) {
    display: none;
}
/* The placeholder box where the image will load */
.popup-photo-wrapper.loading {
    display: flex;
    height: 150px;
    background: #f9f0e5; /* Floral White */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* The Spinner itself */
.popup-photo-wrapper.loading::after {
    content: "";
    width: 25px;
    height: 25px;
    min-width: 25px;
    border: 3px solid rgba(148, 167, 174, 0.2); /* Faint Dusty Blue */
    border-top: 3px solid #ffdfc6; /* Peach 'active' segment */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.leaflet-marker-icon {
    transition: opacity 0.3s ease-in;
}

.lightbox-overlay {
    visibiltiy: hidden;
    transition:
        opacity 0.4s ease,
        visibility 0.4s;
}
.lightbox-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.photo-indicator {
    font-size: 0.8rem;
    margin-right: 5px;
    filter: sepia(1);
}

/* The container must allow the badge to sit on the edge */
.icon-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The Peach Badge */
.photo-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #ffdfc6; /* Peach */
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 999;
}