body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overscroll-behavior-y: none; /* Prevent pull-to-refresh globally */
}

/* Screen Reader Only Class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

#map {
    height: 100vh;
    width: 100%;
}

.meme-popup {
    text-align: center;
    max-width: 300px; /* Increased width for bigger images */
    /* max-height: 380px; */ /* Removed to prevent scroll */
    /* overflow-y: auto; */ 
    /* padding-right: 5px; */ 
}

.meme-popup::-webkit-scrollbar {
    width: 6px;
}
.meme-popup::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

.meme-popup img {
    max-width: 100%;
    height: auto;
    max-height: 200px; /* Limit height to prevent huge popups */
    border-radius: 8px;
    margin-bottom: 8px;
    object-fit: contain;
    background: rgba(0,0,0,0.05); /* Slight background for contained images */
    cursor: zoom-in;
}

.meme-popup h3 {
    margin: 5px 0;
    font-size: 1.1em;
}

.meme-popup p {
    margin: 5px 0;
    font-size: 1.15em;
    color: #555;
    /* text-align: justify; */ /* Justify handled below specifically for non-address */
}

/* Specific justify for description */
.meme-popup p:not(.popup-address) {
    margin: 0 15px 10px 15px;
    text-align: center;
    font-size: 1.15em;
}

.meme-popup a {
    display: inline-block;
    color: #007bff;
    text-decoration: none;
    /* margin-bottom handled specifically or globally */
}

.meme-popup .sheet-actions a {
    margin-bottom: 0; /* Fix button spacing */
}

.meme-popup a:hover {
    text-decoration: underline;
}

/* Custom marker icon style */
.custom-meme-icon {
    background: none;
    border: none;
}

.meme-pin {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    background: #fff;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    box-shadow: -3px 3px 5px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
}

.meme-pin-inner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    transform: rotate(45deg);
}

.drawer-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.drawer-toggle-btn:focus, .drawer-toggle-btn:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.drawer-toggle-btn:hover {
    transform: translateX(-50%) scale(1.1);
}

.drawer-toggle-btn img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.drawer-toggle-btn.open img {
    transform: rotate(180deg);
}

.sidebar-toggle-btn {
    display: none;
}

.drawer-toggle-btn.hidden {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    pointer-events: none;
}

.bottom-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Default height for JS to override, or initial state */
    height: 35vh; 
    background: white;
    z-index: 2000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    will-change: height, transform;
    transform: translateY(0);
    transition: height 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);
    overflow: hidden; /* Fix toggle button blocking */
    pointer-events: auto; /* Default auto, but will be set to none when hidden */
}

.bottom-drawer.hidden {
    transform: translateY(110%);
    pointer-events: none; /* Ensure clicks pass through when hidden */
}

.bottom-drawer.expanded .drawer-title {
    display: none;
}

/* Header Area for easier dragging */
.drawer-header {
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    background: white; /* Ensure it has background to handle clicks */
    padding-bottom: 5px;
}

.drawer-header:active {
    cursor: grabbing;
}

.drawer-handle-container {
    width: 100%;
    padding: 12px 0 0 0; /* Adjusted padding */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Cursor handling moved to header */
}

/*.drawer-handle-container:active {
    cursor: grabbing;
}*/ /* Handled by header now */

.drawer-handle {
    width: 40px;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 3px;
    margin-bottom: 5px;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 30px 20px; /* Increased bottom padding to clear fade */
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; /* Prevent pull-to-refresh on mobile */
}

.list-fade-overlay {
    height: 30px;
    margin-top: -30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    z-index: 15;
    pointer-events: none;
    flex-shrink: 0;
    width: 100%;
}

.drawer-title {
    margin: 5px 0 12px 0;
    text-align: center;
    font-size: 1.6em;
    line-height: 1.2;
    flex-shrink: 0;
    user-select: none;
}

.drawer-subtitle {
    display: block;
    font-size: 0.5em; /* relative to 1.6em title */
    color: #888;
    font-weight: normal;
    margin-top: 2px;
}

/* Footer Sticky */
.drawer-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 15px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    background: white;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    z-index: 10;
}

/* Donate button specific override not strictly needed if grid handles column width, 
   but let's ensure it spans if we used repeating grid. 
   With explicit columns 1fr 1fr 2fr 1fr, no span needed on .btn-donate unless we want it.
   Actually, grid items automatically fill cells. 
   Item 3 (Donate) will go into the 3rd column which is 2fr wide.
*/ 
.btn-donate {
    /* grid-column: span 2; - Not needed if we defined template matching items count */
    background: #fff8e1; /* Slight highlight for donate? Optional */
    border-color: #ffe082;
}

.footer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-decoration: none;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    cursor: pointer;
    color: #444;
    font-size: 0.85em; /* Smaller font for mobile */
    font-weight: 500;
    width: 100%;
    padding: 6px;
    height: 70px; /* Fixed height instead of aspect ratio */
    box-sizing: border-box;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.footer-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.footer-btn:active {
    transform: scale(0.98);
}

.footer-btn span {
    margin-top: 0;
}

.footer-icon {
    width: auto; 
    height: 60%;
    max-width: 80%;
    object-fit: contain;
}

/* Modal for Info */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    max-width: 90%;
    width: 320px;
    position: relative;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
}

/* Dark Mode Adjustments */
body.dark-mode .bottom-drawer,
body.dark-mode .drawer-footer,
body.dark-mode .modal-content,
body.dark-mode .drawer-header {
    background: #1a1a1a;
    color: #fff;
    border-top-color: #333;
}

body.dark-mode .list-fade-overlay {
    background: linear-gradient(to bottom, rgba(26,26,26,0), rgba(26,26,26,1));
}

body.dark-mode .footer-btn {
    background: #2a2a2a;
    border-color: #333;
    color: #eee;
}

body.dark-mode .footer-btn:hover {
    background: #333;
    border-color: #444;
}

body.dark-mode .drawer-handle {
    background-color: #444;
}

body.dark-mode .drawer-title {
    color: #fff;
}

body.dark-mode .close-modal {
    color: #fff;
}

/* Meme List */
.meme-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meme-list-item {
    padding: 15px 0; /* Slightly larger vertical padding */
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
}

.meme-list-item:last-child {
    border-bottom: none;
}

.meme-list-item:hover {
    background-color: #fafafa;
}

.meme-list-item img {
    width: 65px; /* Increased from 50px */
    height: 65px; /* Increased from 50px */
    border-radius: 8px; /* Slightly squarer looks modern */
    object-fit: cover;
    background: #e0e0e0;
}

.meme-list-info {
    flex: 1;
}

.meme-list-title {
    font-weight: 600;
    font-size: 1.05em;
    margin-bottom: 4px;
}

.meme-list-city {
    font-size: 0.85em;
    color: #888;
}

/* Floating Theme Toggle */
.map-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 500; /* Below Leaflet Popups (700) but above OverlayPane (400) */
    width: 60px; /* Matched to sidebar toggle size (increased from 44px) */
    height: 60px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s, transform 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.map-theme-toggle:active {
    transform: scale(0.95);
}

.map-theme-toggle img {
    width: 30px;
    height: 30px;
    display: block;
}

body.dark-mode .map-theme-toggle {
    background: #222;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

/* Compact Credits */
.compact-credits {
    text-align: center;
    padding: 10px 0;
}

.compact-credits p {
    margin: 6px 0;
    font-size: 1.25em; /* Increased from 1em */
    color: #333;
    line-height: 1.5;
}

.compact-credits strong {
    font-size: 1.1em; /* Relative to parent p, so ends up ~1.375em total */
    color: #000;
}

body.dark-mode .compact-credits p {
    color: #ccc;
}

body.dark-mode .compact-credits strong {
    color: #fff;
}

/* Fix link visibility in dark mode */
body.dark-mode .compact-credits a,
body.dark-mode .privacy-link {
    color: #6eb9ff; /* Light readable blue */
}

body.dark-mode .drawer-toggle-btn {
    background: #222; /* Darker background */
    border: 4px solid rgba(255, 255, 255, 0.8); /* Add border for visibility */
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

body.dark-mode .bottom-drawer {
    background: #222;
    color: #fff;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

body.dark-mode .drawer-handle {
    background-color: #555; /* Visible handle color */
}

body.dark-mode .drawer-content {
    background: #222;
    color: #fff;
}

body.dark-mode .drawer-title {
    color: #fff;
}

body.dark-mode .drawer-tabs {
    border-bottom-color: #333;
}

body.dark-mode .tab-btn {
    color: #888;
}

body.dark-mode .tab-btn:hover {
    color: #ccc;
}

body.dark-mode .tab-btn.active {
    color: #fff;
    border-bottom-color: #fff;
}

body.dark-mode .meme-list-item {
    border-bottom-color: #333;
}

body.dark-mode .meme-list-item:hover {
    background-color: #2a2a2a;
}

body.dark-mode .meme-list-city {
    color: #aaa;
}

body.dark-mode .social-card {
    background: #1a1a1a;
    border-color: #444;
    color: #fff;
    border:none
}

body.dark-mode .social-card:hover {
    background: #3a3a3a;
}

body.dark-mode .theme-toggle-wide {
    background: #333;
    color: #fff;
}

body.dark-mode .info-item {
    border-bottom-color: #333;
}

body.dark-mode .drawer-credits {
    color: #aaa;
}





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

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 6001;
}

#close-lightbox:hover,
#close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#close-info-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

#close-info-modal:hover,
#close-info-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

body.dark-mode .modal-content {
    background-color: #222;
    color: #fff;
    border-color: #444;
}

body.dark-mode .modal-content a {
    color: #4da3ff;
}

body.dark-mode #close-info-modal {
    color: #ccc;
}

body.dark-mode #close-info-modal:hover {
    color: #fff;
}

/* Dark Mode Styles */
body.dark-mode #social-links {
    background: rgba(30, 30, 30, 0.9);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}

body.dark-mode .mobile-sheet,
body.dark-mode .mobile-sheet-header {
    background: #222;
    color: #fff;
}

body.dark-mode #mobile-sheet-content p {
    color: #ccc;
}

body.dark-mode #close-mobile-sheet {
    color: #fff;
}

body.dark-mode #mobile-sheet-title {
    color: #fff;
}

/* Center Zoom Controls */
.leaflet-top.leaflet-right {
    top: 50%;
    transform: translateY(-50%);
}

/* Custom Tooltip */
#custom-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 3000;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

#custom-tooltip.visible {
    opacity: 1;
}
/* Custom Cluster Icon */
.custom-cluster-icon {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #555;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    box-sizing: border-box;
}

.dark-mode .custom-cluster-icon {
    background: rgba(40, 40, 40, 0.95);
    border-color: #ccc;
}

.cluster-img {
    width: 50%;
    height: 50%;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
}

.cluster-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}


/* Cluster Customization - Black/White Theme */
/* Light Mode (Default) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Outer ring - light grey */
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Inner circle - white */
    color: #333 !important; /* Text - dark grey */
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-weight: bold;
}

/* Dark Mode Overrides */
body.dark-mode .marker-cluster-small,
body.dark-mode .marker-cluster-medium,
body.dark-mode .marker-cluster-large {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Outer ring - lighter grey */
}

body.dark-mode .marker-cluster-small div,
body.dark-mode .marker-cluster-medium div,
body.dark-mode .marker-cluster-large div {
    background-color: rgba(40, 40, 40, 0.9) !important; /* Inner circle - dark grey */
    color: #eee !important; /* Text - light grey */
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}


/* Cluster Customization - Black/White Theme */
/* Light Mode (Default) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Outer ring - light grey */
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Inner circle - white */
    color: #333 !important; /* Text - dark grey */
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-weight: bold;
}

/* Dark Mode Overrides */
body.dark-mode .marker-cluster-small,
body.dark-mode .marker-cluster-medium,
body.dark-mode .marker-cluster-large {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Outer ring - lighter grey */
}

body.dark-mode .marker-cluster-small div,
body.dark-mode .marker-cluster-medium div,
body.dark-mode .marker-cluster-large div {
    background-color: rgba(40, 40, 40, 0.9) !important; /* Inner circle - dark grey */
    color: #eee !important; /* Text - light grey */
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Updated Popup Layout */
.leaflet-popup-content-wrapper {
    padding: 0; /* Remove default padding to let header stretch */
    overflow: hidden; /* rounded corners clip header */
}

/* Fix right border whitespace */
.leaflet-popup-content {
    margin: 0 !important;
    width: 300px !important; /* Force width */
}

.meme-popup {
    display: flex;
    flex-direction: column;
}

/* Header Title Area */
.meme-popup .popup-title {
    background-color: #f0f0f0;
    margin: 0;
    padding: 12px 30px 12px 30px; /* Equal padding for centering, Right padding prevents close button overlap */
    font-size: 1.4em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    text-align: center;
    color: #333;
    border-radius: 12px 12px 0 0; /* Match popup corner radius */
}

/* Address Line */
.popup-address {
    margin: 8px 15px 4px 15px;
    font-size: 0.9em;
    color: #666;
    font-weight: 600;
    text-align: center;
}

/* Content adjustments */
.meme-popup img {
    margin: 5px 15px;
    width: 270px; /* Account for margins */
    max-width: none;
}

.meme-popup p:not(.popup-address) {
    margin: 0 15px 10px 15px;
    /* text-align: justify; */
    font-size: 1.15em;
}

.meme-popup a {
    margin-bottom: 15px;
}

/* Mobile Popup Override - Keep original clean for logic separation, 
   but ensuring we don't accidentally style the hidden leaflet popup on mobile if we switch. */
@media (max-width: 600px) {
    /* Hide default leaflet popup on mobile if it accidentally opens */
    /* .leaflet-popup {
       display: none !important;  -- handled by JS preventing open
    } */
}

/* Mobile Popup Sheet (New Bottom Sheet) */
.popup-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* remove max-height constraint or increase slightly, but let flex handle content if possible */
    max-height: 85vh; 
    background: white;
    z-index: 3000; /* Above drawer (2000) */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);
    display: flex;
    flex-direction: column;
    /* Ensure content scrolls if too long */
    overflow: hidden; 
    padding-bottom: 20px; /* Safe area */
}

.popup-sheet.hidden {
    transform: translateY(110%);
    pointer-events: none;
}

.popup-sheet-handle {
    width: 100%;
    height: 30px; /* Larger tap area */
    background-color: transparent; /* Invisible container */
    margin: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    z-index: 20; /* Ensure on top */
}

/* The visible handle bar */
.popup-sheet-handle::after {
    content: '';
    width: 40px;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 3px;
}

.close-sheet-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #888;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
}

#popup-sheet-content {
    overflow-y: auto; 
    padding: 0 20px 20px 20px; /* Restored left/right padding */
    -webkit-overflow-scrolling: touch;
}

/* Re-use popup styles inside sheet but adjusted */
#popup-sheet-content .popup-title {
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    margin: 5px 0 10px 0; /* Reduced margin */
    padding: 0; 
    background: none; /* No distinct background */
    border: none;
    color: #333;
}

#popup-sheet-content img {
    width: 100%;
    height: auto;
    max-height: 25vh; /* Reduced from 35vh to fit better */
    object-fit: contain;
    background: #f5f5f5;
    margin-bottom: 20px; /* Restored breathing room */
    border-radius: 12px; /* Added rounded corners */
    cursor: zoom-in;
}

#popup-sheet-content p {
    padding: 0; /* Removing internal padding since container has padding */
    font-size: 1em; 
    line-height: 1.5;
    color: #333;
    margin-bottom: 12px;
}

#popup-sheet-content .popup-address {
    color: #666;
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 15px;
    margin-top: -5px;
}

#popup-sheet-content a {
    display: block;
    text-align: center;
    /* margin: 15px 0 0 0;  */
    /* padding: 12px;  */
    background: #f0f0f0; 
    color: #333;
    /* border: 1px solid #eee; */
    /* border-radius: 12px; */
    text-decoration: none;
    /* font-weight: bold; */
    /* font-size: 1em; */
    transition: background 0.3s, border-color 0.3s;
}

#popup-sheet-content a:hover {
    background: #e5e5e5;
    border-color: #ddd;
}

/* Dark Mode for Sheet */
body.dark-mode .popup-sheet {
    background: #222;
    color: #fff;
}

body.dark-mode .popup-sheet-handle::after {
    background-color: #444;
}

body.dark-mode #popup-sheet-content .popup-title {
    color: #fff;
}

body.dark-mode #popup-sheet-content p {
    color: #ddd;
    text-align: center;
}

body.dark-mode #popup-sheet-content .popup-address {
    color: #bbb;
}

body.dark-mode #popup-sheet-content img {
    background: #333;
}

body.dark-mode #popup-sheet-content a {
    background: #333; /* Dark gray for dark theme */
    color: #fff;
    border-color: #444;
}

body.dark-mode #popup-sheet-content a:hover {
    background: #444;
}

/* Dark Mode Support for Popup */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
    background: #222;
    color: #fff;
}

body.dark-mode .popup-title {
    background-color: #333;
    border-bottom-color: #555;
    color: #fff;
}

body.dark-mode .popup-address {
    color: #aaa;
}

body.dark-mode #mobile-sheet-content .popup-address {
    color: #ccc;
}

body.dark-mode .meme-popup p:not(.popup-address) {
    color: #fff;
}

body.dark-mode .suggestion-popup {
    background: rgba(34, 34, 34, 0.95);
    color: #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

body.dark-mode .suggestion-popup a {
    color: #4db3ff;
}

body.dark-mode .suggestion-popup button {
    color: #aaa;
}
body.dark-mode .suggestion-popup button:hover {
    color: #fff;
}

/* Move close button slightly to align with header */
.leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    color: #555 !important;
    font-size: 18px !important;
}

body.dark-mode .leaflet-popup-close-button {
    color: #ccc !important;
}

body.dark-mode .leaflet-popup-close-button:hover {
    color: #fff !important;
}


/* Image Wrapper & Spyglass */
.meme-image-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.zoom-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.3);
}

.zoom-indicator::after {
    content: "🔍";
    font-size: 14px;
    line-height: 1;
}

/* Adjustments for Desktop Popup */
.meme-popup .meme-image-wrapper {
    margin: 5px 15px; /* Moved from img */
    width: 270px;     /* Moved from img */
    display: block;   /* It was behaving as block with margins */
}

.meme-popup .meme-image-wrapper img {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Suggestion Popup */
.suggestion-popup {
    text-align: center;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95em;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s, visibility 0.3s;
}

.suggestion-popup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.suggestion-popup a {
    color: #0088cc;
    text-decoration: none;
    font-weight: bold;
}

.suggestion-popup button {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #888;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.suggestion-popup button:hover {
    color: #333;
}

/* Desktop Sidebar Adaptation */
@media (min-width: 768px) {
    /* Transform bottom drawer to sidebar */
    .bottom-drawer {
        width: 380px;
        height: 100vh !important; /* Override inline styles */
        top: 0;
        left: 0;
        bottom: auto;
        border-radius: 0;
        transform: translateX(0); /* Default open state */
        border-right: 1px solid #ddd;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        /* Flex Layout */
        display: flex;
        flex-direction: column;
    }

    .bottom-drawer.hidden {
        transform: translateX(-100%);
    }

    /* Hide Mobile UI */
    .drawer-handle-container { display: none; }
    .drawer-toggle-btn { display: none !important; }

    /* 1. Title */
    .drawer-title {
        /* order: 1 removed - rely on DOM order of drawer-header */
        margin: 0;
        padding: 20px 20px 10px;
        text-align: center; /* Centered Title */
        flex-shrink: 0;
    }

    /* 2. Sticky Icons (Formerly Footer) */
    .drawer-footer {
        /* order: 2 removed - rely on DOM order */
        position: relative; 
        border-top: none;
        padding: 0 20px 15px; /* Added 20px padding left/right */
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
        background: transparent;
        
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .footer-btn {
        font-size: 1.1em;
        border-radius: 16px;
        padding: 10px;
        height: auto;
        aspect-ratio: 1;
    }

    /* 3. Scrollable List */
    .drawer-content {
        /* order: 3 removed - rely on DOM order */
        flex: 1; /* Take remaining space */
        overflow-y: auto; /* Scrollable */
        padding: 0;
        height: auto;
    }
    
    .meme-list {
        padding-bottom: 20px;
    }

    /* Fix List Item Padding and Alignment */
    .meme-list-item {
        display: flex;
        padding: 10px 20px; /* Ensure 20px padding on left/right */
        align-items: center; /* Center vertically */
    }

    .meme-list-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 15px; /* Spacing between image and text */
        flex: 1;
    }

    /* Desktop Sidebar Toggle Button */
    .sidebar-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed; /* Changed from absolute to fixed */
        top: 20px;
        left: 395px; /* Open state: 380px drawer + 15px gap */
        width: 60px;
        height: 60px;
        background: white;
        border: none;
        border-radius: 50%; /* Circle */
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        z-index: 2500; /* Ensure above everything else */
        outline: none;
        transition: transform 0.3s ease, left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Match drawer timing */
    }

    .sidebar-toggle-btn.drawer-closed {
        left: 20px; /* Moves to left edge when closed */
    }
    
    .sidebar-toggle-btn:hover {
        transform: scale(1.1);
        background: white;
    }

    .sidebar-toggle-btn img {
        width: 30px;
        height: 30px;
        transition: transform 0.3s ease;
        /* Default: Open State (Arrow Left) */
        transform: rotate(-90deg);
    }

    .sidebar-toggle-btn.drawer-closed img {
        /* Closed State (Arrow Right) */
        transform: rotate(90deg);
    }
    
    body.dark-mode .sidebar-toggle-btn {
        background: #2e2e2e; /* Match theme toggle dark bg if appropriate or keep simple */
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    
    body.dark-mode .drawer-footer {
         border-bottom-color: #333;
    }
    
    /* Scrollbar styling */
    .drawer-content::-webkit-scrollbar {
        width: 6px;
    }
    .drawer-content::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 3px;
    }
    body.dark-mode .drawer-content::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.2);
    }
}

@media (min-width: 768px) {
    body.dark-mode .bottom-drawer {
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        border-right: 1px solid #444;
    }
    
    body.dark-mode #tab-memes::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.2);
    }
}

/* Smooth Zoom Controls */
.leaflet-bar {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.leaflet-bar a {
    background-color: #fff !important;
    color: #333 !important;
    border-bottom: 1px solid #eee !important;
    transition: background-color 0.2s, color 0.2s;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 16px !important;
    font-weight: bold;
}

.leaflet-bar a:hover {
    background-color: #f4f4f4 !important;
    color: #000 !important;
}

.leaflet-bar a:last-child {
    border-bottom: none !important;
}

.leaflet-bar a.leaflet-disabled {
    cursor: default;
    background-color: #f9f9f9 !important;
    color: #bbb !important;
}

/* Dark Mode Zoom Controls */
body.dark-mode .leaflet-bar {
    box-shadow: 0 2px 5px rgba(0,0,0,0.6) !important;
}

body.dark-mode .leaflet-bar a {
    background-color: #222 !important;
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}

body.dark-mode .leaflet-bar a:hover {
    background-color: #333 !important;
}
    
    body.dark-mode .leaflet-bar a.leaflet-disabled {
        background-color: #1a1a1a !important;
        color: #555 !important;
    }

/* Sheet Actions */
.sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

.sheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border: none;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    box-sizing: border-box; /* Match box model */
    line-height: normal; /* Reset line-height if needed */
    font-family: inherit; /* Inherit font */
}

/* Ensure button and a behave same */
a.sheet-btn {
    color: #333; /* Override link color */
}
a.sheet-btn:hover {
    color: #333;
    text-decoration: none;
}

.sheet-btn:hover {
    background-color: #e0e0e0;
}

.share-btn {
    background-color: #007bff;
    color: white;
}

.share-btn:hover {
    background-color: #0069d9;
}


.sheet-actions {
    justify-content: center;
}

@media (min-width: 768px) { .drawer-footer { grid-template-columns: 1fr 1fr; } }

body.dark-mode .sheet-btn {
    background-color: #333;
    color: #fff;
    border: 1px solid #444; 
}

body.dark-mode .sheet-btn:hover {
    background-color: #444;
}

body.dark-mode a.sheet-btn {
    color: #fff;
}