/* Dark Mode Support */
:root {
   /* Light mode colors (default) */
   --bg-primary: #f8f9fa;
   --bg-secondary: white;
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --text-muted: #868e96;
   --border-color: #e9ecef;
   --border-light: #dee2e6;
   --shadow: rgba(0, 0, 0, 0.08);
   --shadow-strong: rgba(0, 0, 0, 0.15);
   --accent-blue: #007bff;
   --accent-blue-hover: #0056b3;
   --success: #28a745;
   --success-hover: #1e7e34;
   --danger: #dc3545;
   --danger-hover: #c82333;
   --warning: #ffc107;
   --info: #17a2b8;
   --secondary: #6c757d;
   --secondary-hover: #545b62;
   --modal-overlay: rgba(0, 0, 0, 0.5);
   --modal-shadow: rgba(0, 0, 0, 0.3);
   --input-bg: white;
   --input-border: #dee2e6;
   --input-focus: #007bff;
   --toast-close-hover-bg: #f8f9fa;
   --toast-close-hover-color: #495057;
   --activity-bar-bg: #f1f3f4;
   --loading-bg: rgba(255, 255, 255, 0.95);
   --error-bg: #f8d7da;
   --error-border: #f5c6cb;
   --grabber-color: #d1d5db;
   --popup-bg: white;
   --popup-close-hover: #f5f5f5;

   /* Shared dark mode color definitions */
   --dark-bg-primary: #1a1a1a;
   --dark-bg-secondary: #2d2d2d;
   --dark-text-primary: #ffffff;
   --dark-text-secondary: #b0b0b0;
   --dark-text-muted: #888888;
   --dark-border-color: #404040;
   --dark-border-light: #505050;
   --dark-shadow: rgba(0, 0, 0, 0.3);
   --dark-shadow-strong: rgba(0, 0, 0, 0.5);
   --dark-accent-blue: #007bff;
   --dark-accent-blue-hover: #0056b3;
   --dark-success: #40a85a;
   --dark-success-hover: #2d7a3e;
   --dark-danger: #dc3545;
   --danger-hover: #c82333;
   --dark-warning: #f39c12;
   --dark-info: #3498db;
   --dark-secondary: #888888;
   --dark-secondary-hover: #777777;
   --dark-modal-overlay: rgba(0, 0, 0, 0.3);
   --dark-modal-shadow: rgba(0, 0, 0, 0.6);
   --dark-input-bg: #3a3a3a;
   --dark-input-border: #505050;
   --dark-input-focus: #4a9eff;
   --dark-toast-close-hover-bg: #404040;
   --dark-toast-close-hover-color: #ffffff;
   --dark-activity-bar-bg: #404040;
   --dark-loading-bg: rgba(45, 45, 45, 0.95);
   --dark-error-bg: #4a2c2c;
   --dark-error-border: #6b3535;
   --dark-grabber-color: #606060;
   --dark-popup-bg: #2d2d2d;
   --dark-popup-close-hover: #404040;
}

@media (prefers-color-scheme: dark) {
   :root:not(.light-mode) {
      /* Dark mode colors using shared variables */
      --bg-primary: var(--dark-bg-primary);
      --bg-secondary: var(--dark-bg-secondary);
      --text-primary: var(--dark-text-primary);
      --text-secondary: var(--dark-text-secondary);
      --text-muted: var(--dark-text-muted);
      --border-color: var(--dark-border-color);
      --border-light: var(--dark-border-light);
      --shadow: var(--dark-shadow);
      --shadow-strong: var(--dark-shadow-strong);
      --accent-blue: var(--dark-accent-blue);
      --accent-blue-hover: var(--dark-accent-blue-hover);
      --success: var(--dark-success);
      --success-hover: var(--dark-success-hover);
      --danger: var(--dark-danger);
      --danger-hover: var(--dark-danger-hover);
      --warning: var(--dark-warning);
      --info: var(--dark-info);
      --secondary: var(--dark-secondary);
      --secondary-hover: var(--dark-secondary-hover);
      --modal-overlay: var(--dark-modal-overlay);
      --modal-shadow: var(--dark-modal-shadow);
      --input-bg: var(--dark-input-bg);
      --input-border: var(--dark-input-border);
      --input-focus: var(--dark-input-focus);
      --toast-close-hover-bg: var(--dark-toast-close-hover-bg);
      --toast-close-hover-color: var(--dark-toast-close-hover-color);
      --activity-bar-bg: var(--dark-activity-bar-bg);
      --loading-bg: var(--dark-loading-bg);
      --error-bg: var(--dark-error-bg);
      --error-border: var(--dark-error-border);
      --grabber-color: var(--dark-grabber-color);
      --popup-bg: var(--dark-popup-bg);
      --popup-close-hover: var(--dark-popup-close-hover);
   }
}

/* Manual dark mode override using shared variables */
:root.dark-mode {
   --bg-primary: var(--dark-bg-primary);
   --bg-secondary: var(--dark-bg-secondary);
   --text-primary: var(--dark-text-primary);
   --text-secondary: var(--dark-text-secondary);
   --text-muted: var(--dark-text-muted);
   --border-color: var(--dark-border-color);
   --border-light: var(--dark-border-light);
   --shadow: var(--dark-shadow);
   --shadow-strong: var(--dark-shadow-strong);
   --accent-blue: var(--dark-accent-blue);
   --accent-blue-hover: var(--dark-accent-blue-hover);
   --success: var(--dark-success);
   --success-hover: var(--dark-success-hover);
   --danger: var(--dark-danger);
   --danger-hover: var(--dark-danger-hover);
   --warning: var(--dark-warning);
   --info: var(--dark-info);
   --secondary: var(--dark-secondary);
   --secondary-hover: var(--dark-secondary-hover);
   --modal-overlay: var(--dark-modal-overlay);
   --modal-shadow: var(--dark-modal-shadow);
   --input-bg: var(--dark-input-bg);
   --input-border: var(--dark-input-border);
   --input-focus: var(--dark-input-focus);
   --toast-close-hover-bg: var(--dark-toast-close-hover-bg);
   --toast-close-hover-color: var(--dark-toast-close-hover-color);
   --activity-bar-bg: var(--dark-activity-bar-bg);
   --loading-bg: var(--dark-loading-bg);
   --error-bg: var(--dark-error-bg);
   --error-border: var(--dark-error-border);
   --grabber-color: var(--dark-grabber-color);
   --popup-bg: var(--dark-popup-bg);
   --popup-close-hover: var(--dark-popup-close-hover);
}


html {
   font-size: 16px;
   /* Base font size */
   /* Prevent zooming on mobile devices */
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   text-size-adjust: 100%;
   /* Prevent zoom on double tap */
   touch-action: manipulation;
   /* Prevent horizontal scroll on iPhone */
   overflow-x: hidden;
   width: 100%;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   background-color: var(--bg-primary);
   color: var(--text-primary);
   line-height: 1.6;
   transition: background-color 0.3s ease, color 0.3s ease;
   /* Additional mobile zoom prevention */
   touch-action: manipulation;
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
   /* Prevent horizontal scroll on iPhone */
   overflow-x: hidden;
   width: 100%;
   max-width: 100vw;
}

.container {
   max-width: 768px;
   margin: 0 auto;
   padding: 1.25rem;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   transition: padding 0.3s ease;
   /* Prevent horizontal scroll on iPhone */
   width: 100%;
   max-width: min(768px, 100vw);
   overflow-x: hidden;
   animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.header {
   text-align: center;
   margin-bottom: 40px;
   position: relative;
}

.header h1 {
   font-size: 2.125rem;
   line-height: 2.5rem;
   font-weight: 300;
   color: var(--text-primary);
   margin-bottom: 8px;
}

.header p {
   color: var(--text-secondary);
   font-size: 1.1rem;
   font-weight: 400;
}

.language-switcher {
   position: fixed;
   top: 0rem;
   right: 0rem;
   display: flex;
   z-index: 100;
}


.theme-switcher {
   position: fixed;
   top: 0rem;
   left: 0rem;
   display: flex;
   z-index: 100;
}

/* Shared toggle button styles */
.btn-toggle {
   background-color: transparent;
   border: none;
   padding: 1rem;
   font-size: 1.2rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   color: var(--text-primary);   
   width:2.5rem;
   height:2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--border-color);
}

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

.theme-switcher .btn-toggle {   
   border-bottom-right-radius: 0.5rem;
   padding-right:1.25rem;
}

.language-switcher .btn-toggle {   
   border-bottom-left-radius: 0.5rem;
   padding-left:1.25rem;
}

.section {
   background: var(--bg-secondary);
   border-radius: 0.75rem;
   box-shadow: 0 2px 8px var(--shadow);
   margin-bottom: 2rem;
   overflow: hidden;
   transition: all 0.3s ease;
   animation: fadeInUp 0.6s ease-out forwards;
   opacity: 0;
}

.section:nth-child(1) { animation-delay: 0.1s; }
.section:nth-child(2) { animation-delay: 0.2s; }
.section:nth-child(3) { animation-delay: 0.3s; }
.section:nth-child(4) { animation-delay: 0.4s; }
.section:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.section-content {
   max-height: 0px;
   overflow: hidden;
   transition: max-height 1s ease-out;
}

.section-content.visible {
   max-height: 1000px; /* Arbitrary large value to allow expansion */   
}

.section-header {
   padding: 1rem;
}

.section-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 8px;
}

.section-subtitle {
   color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.5;
}

.map-container {
   height: 300px;
   position: relative;
   border-radius: 0.5rem;
   overflow: hidden;
   background: var(--bg-primary);
   transition: height 0.3s ease, border-radius 0.3s ease;
}

#map {
   width: 100%;
   height: 100%;
   border-radius: 0.5rem;
   transition: border-radius 0.3s ease;
}

.mapboxgl-ctrl,
a.mapboxgl-ctrl-logo {
   display: none;
}

/* 1. Take the body out of the document flow and make it fill the dynamic viewport */
.explore-active {
    /* Lock the body in place relative to the viewport */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    
    /* CRITICAL: Use 100dvh (dynamic viewport height). This automatically adjusts
       whether the URL bar is visible or not, solving the height problem on mobile. */
    height: 100dvh;   
    
    /* Prevent the user from scrolling the body itself */
    overflow: hidden;  
}

/* 2. Ensure your main container doesn't interfere when in explore mode */
.explore-active .container {
    padding: 0;
    max-width: none;
    min-height: 0; /* Override the default min-height */
    height: 100%;
}

/* 3. Hide elements that are not part of the explore view more definitively */
.explore-active .header,
.explore-active .section:not(.map-section) {      
    
    max-height: 0px; 
    opacity: 0; 
    pointer-events: none;
}

/* 4. Make the map section fill its new fixed-position parent (the body) */
.explore-active .map-section {
    position: absolute; /* Position relative to the fixed body */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Make it fill the 100dvh of the body */
    z-index: 1;
    margin: 0;
    border-radius: 0;
    box-shadow: none; /* Remove shadow in explore mode */
}

/* 5. Ensure the map container and the map itself also fill their parent */
.explore-active .map-container,
.explore-active #map,
.explore-active .mapboxgl-canvas {
    width: 100%!important;    
    height: 100%; /* CHANGED from 100vw/100vh to 100% to inherit correctly */
    border-radius: 0;
}


/* --- End Explore Active State --- */

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
   gap: 0;
}

.stat-item {
   text-align: center;
   padding: 1rem;
   border-right: 1px solid var(--border-color);
   min-width: 0;
}

.stat-item:last-child {
   border-right: none;
}

.stat-number {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-primary);
   display: block;
   margin-bottom: 0.25rem;
   word-break: break-word;
}

.stat-label {
   color: var(--text-secondary);
   font-size: 0.9rem;
   font-weight: 500;
}

.stat-detail {
   color: var(--text-muted);
   font-size: 0.8rem;
   margin-top: 2px;
   word-break: break-word;
}

.motion-chart {
   padding: 1.5rem;
   padding-top: 0px;
}

.metric-selector {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   justify-content: center;
}

.metric-btn {
   background: var(--bg-primary);
   color: var(--text-secondary);
   border: 1px solid var(--border-light);
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   gap: 0.375rem;
}

.metric-btn:hover {
   background: var(--border-color);
   border-color: var(--text-muted);
}

.metric-btn.active {
   background: var(--accent-blue);
   color: white;
   border-color: var(--accent-blue);
}

.activity-bar {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   font-size: 0.9rem;
}

.activity-icon {
   width: 2.75rem;
   height: 2.75rem;
   margin-right: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.125rem;
   color: white;
   border-radius: 20px;
   flex-shrink: 0;
}

.activity-label {
   min-width: 5rem;
   color: var(--text-primary);
   font-weight: 500;
}

.activity-bar-bg {
   flex: 1;
   height: 1.25rem;
   background: var(--activity-bar-bg);
   border-radius: 0.625rem;
   margin: 0 0.75rem;
   position: relative;
   overflow: hidden;
}

.activity-bar-fill {
   height: 100%;
   border-radius: 0.625rem;
   transition: width 0.6s ease;
}

.activity-count {
   min-width: 3.75rem;
   text-align: right;
   color: var(--text-secondary);
   font-weight: 600;
   font-size: 0.85rem;
}

.controls {
   padding: 1rem;
   padding-top: 0px;
   display: flex;
   gap: 0.754rem;
   flex-wrap: wrap;
   justify-content: center;
}

.btn {
   background: var(--accent-blue);
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
}

.btn:hover {
   background: var(--accent-blue-hover);
   transform: translateY(-1px);
}

.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}

.btn-secondary {
   background: var(--secondary);
}

.btn-secondary:hover {
   background: var(--secondary-hover);
}

.btn-success {
   background: var(--success);
}

.btn-success:hover {
   background: var(--success-hover);
}

.btn-danger {
   background: var(--danger);
}

.btn-danger:hover {
   background: var(--danger-hover);
}

.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--modal-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
   padding: 20px;   
   backdrop-filter: blur(20px);
}

.modal {
   background: var(--bg-secondary);
   border-radius: 0.755rem;
   box-shadow: 0px 10px 30px var(--modal-shadow);
   max-width: 500px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
}

.modal-slide-enter-active,
.modal-slide-leave-active {
  transition: opacity 0.3s ease;
}

.modal-slide-enter-from,
.modal-slide-leave-to {
  opacity: 0;
}

.modal-slide-enter-active .modal,
.modal-slide-leave-active .modal {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-slide-enter-from .modal,
.modal-slide-leave-to .modal {
  transform: translateY(100vh);
}

.modal-header {
   background: var(--accent-blue);
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 0.75rem 0.75rem 0 0;
}

.modal-header h3 {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
}

.modal-body {
   padding: 1.5rem;
}

.modal-body p {
   margin-bottom: 1rem;
   color: var(--text-primary);
   line-height: 1.5;
}

.modal-body p:last-child {
   margin-bottom: 0;
}

.form-group {
   margin-top: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
   color: var(--text-primary);
}

.form-input {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid var(--input-border);
   border-radius: 8px;
   font-size: 0.9rem;
   transition: border-color 0.2s ease;
   background: var(--input-bg);
   color: var(--text-primary);
}

.form-input:focus {
   outline: none;
   border-color: var(--input-focus);
   box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.checkbox-group {
   margin-top: 1.25rem;
}

.checkbox-item {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
   cursor: pointer;
   font-size: 0.95rem;
   color: var(--text-primary);
}

.checkbox-item input[type="checkbox"] {
   display: none;
}

.checkbox-item i {
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid var(--border-light);
   border-radius: 0.25rem;
   margin-right: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--input-bg);
   color: transparent;
   font-size: 0.75rem;
   transition: all 0.2s ease;
}

.checkbox-item input[type="checkbox"]:checked+i {
   background: var(--accent-blue);
   border-color: var(--accent-blue);
   color: white;
}

.modal-footer {
   padding: 1.25rem 1.5rem;
   border-top: 1px solid var(--border-color);
   display: flex;
   gap: 0.75rem;
   justify-content: space-between;
}

.loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--loading-bg);
   padding: 20px 30px;
   border-radius: 12px;
   box-shadow: 0 4px 16px var(--shadow-strong);
   z-index: 1000;
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--text-primary);
}

.spinner {
   width: 20px;
   height: 20px;
   border: 2px solid var(--border-color);
   border-top: 2px solid var(--accent-blue);
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Loading Overlay - Full Screen */
.loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--bg-primary);
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
}

.loading-spinner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}

.loading-spinner span {
   color: var(--text-primary);
   font-size: 1rem;
   font-weight: 500;
}

.spinner-large {
   width: 64px;
   height: 64px;
   border: 4px solid var(--border-color);
   border-top: 4px solid var(--accent-blue);
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

/* Error Message */
.error-message {
   background: var(--toast-error-bg, #dc3545);
   color: white;
   padding: 1rem 1.5rem;
   border-radius: 8px;
   margin-bottom: 2rem;
   display: flex;
   align-items: center;
   gap: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-message i {
   font-size: 1.25rem;
}

/* Explore Sheet Styles */
.explore-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1500;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   pointer-events: none;
}



.explore-sheet {
   background: var(--bg-secondary);
   border-radius: 1.5rem 1.5rem 0 0;
   box-shadow: 0 -5px 25px var(--shadow);
   height: 50vh;
   /* Initial height */
   max-height: 85vh;
   /* Max draggable height */
   min-height: 20vh;
   /* Min draggable height */
   display: flex;
   flex-direction: column;
   pointer-events: auto;
   will-change: height;
   /* Optimize for height changes */
   position: relative;
   width: 100%;
   max-width: min(728px, 100vw);
   margin-right: auto;
   margin-left: auto;   
   overflow: hidden;
}

.explore-sheet.is-snapping {
   transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide-up transition */
.slide-up-enter-active,
.slide-up-leave-active {
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-up-enter-from,
.slide-up-leave-to {
   transform: translateY(100%);
}

.grabber {
   width: 100%;
   padding: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: grab;
   touch-action: none;
   /* Prevent scrolling on touch devices */
   position: absolute;
   top: -1rem;
   padding-top: 1.75rem;
   padding-bottom: 3rem;
}

.grabber:active {
   cursor: grabbing;
}

.grabber-line {
   width: 40px;
   height: 5px;
   background-color: var(--grabber-color);
   border-radius: 2.5px;
}

.explore-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.5rem 1.25rem 0.5rem 1.25rem;
   flex-shrink: 0;
}

.explore-header-text h2 {
   font-size: 1.75rem;
   font-weight: 700;
   margin: 0;
   line-height: 1.2;
   color: var(--text-primary);
}

.explore-header-text p {
   font-size: 0.9rem;
   color: var(--text-secondary);
   margin: 0;
}

.explore-back-btn {
   background: var(--activity-bar-bg);
   color: var(--text-primary);
   border: none;
   padding: 0.6rem 1.2rem;
   border-radius: 2rem;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   z-index: 200;
}

.explore-back-btn:hover {
   background: var(--border-color);
}

.explore-back-btn .fa-chevron-left {
   font-size: 0.8rem;
}

.explore-list-container {
   overflow-y: auto;
}

.area-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.area-item {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   padding: 0.6rem 1rem;
   /* Reduced vertical padding */
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;
   transition: background-color 0.2s ease;
   pointer-events: none;
}

.interactive .area-item{
   pointer-events:all;
}

/* Only allow hover when explore view is active and body has pointer events */
.explore-active .area-item:hover {
   background-color: var(--bg-primary);   
}

/* Prevent hover when explore view is closing (when pointer events are disabled) */
body[style*="pointer-events: none"] .area-item:hover {
   background-color: transparent;
}

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

.area-rank {
   font-size: 1rem;
   font-weight: 500;   
   color: var(--text-primary);
   text-align: center;
   flex-shrink: 0;
}

.area-info {
   flex: 1;
   min-width: 0;
}

.area-name {
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--text-primary);
   margin-bottom: 0;
   /* Reduced margin */
}

.area-details {
   font-size: 0.8rem;
   /* Matched size */
   color: var(--text-secondary);
}

.area-count {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--accent-blue);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.area-count-label {
   font-size: 0.8rem;
   /* Matched size */
   color: var(--text-secondary);
   font-weight: 500;
   text-transform: lowercase;
}

/*mobile view */
@media (max-width: 768px) {
   html {
      font-size: 14px;
   }
}

/* Mapbox Popup Animation */
.animated-popup .mapboxgl-popup-content {
   border-radius: 8px;
   box-shadow: 0 4px 20px var(--shadow-strong);
   padding: 12px 16px;
   max-width: 220px;
   opacity: 0;
   transform: scale3d(0, 0, 0);
   animation: fadeInScale 0.2s ease-out forwards;
   background: var(--popup-bg);
   color: var(--text-primary);
}

.animated-popup .mapboxgl-popup-tip {
   border-top-color: var(--popup-bg);
}

.animated-popup .mapboxgl-popup-close-button {
   font-size: 18px;
   color: var(--text-secondary);
   padding: 4px 8px;
}

.animated-popup .mapboxgl-popup-close-button:hover {
   background-color: var(--popup-close-hover);
   color: var(--text-primary);
}

@keyframes fadeInScale {
   0% {
      opacity: 0;
      transform: scale3d(0, 0, 0);
   }

   100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
   }
}

/* Toast Notifications */
.toast-container {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   top: env(safe-area-inset-top, 0px);
   z-index: 10000;
   max-width: 760px;
   width: 100%;
   padding: 0 1rem;
   box-sizing: border-box;
}

.toast {
   padding: 0.75rem 1rem;
   border-radius: 8px;
   background: var(--toast-bg, white);
   color: white;
   margin-top: 1rem;
   box-shadow: 0 0px 32px rgba(0, 0, 0, 0.12);
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   animation: slideInTop 0.3s ease-out;
   max-width: 100%;
   word-wrap: break-word;
   word-break: break-word;
   overflow-wrap: break-word;
   min-height: fit-content;
   font-size: 0.9rem;
   border: none;   
}

.toast:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.toast.success {
   --toast-bg: var(--success);
}

.toast.error {
   --toast-bg: var(--danger);
}

.toast.info {
   --toast-bg: var(--info);
}

.toast.warning {
   --toast-bg: var(--warning);
}

.toast-icon {
   font-size: 18px;
   flex-shrink: 0;
   color: white;
}

.toast-content {
   flex: 1;
   min-width: 0;
   overflow-wrap: break-word;
   word-break: break-word;
}

.toast-title {
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 4px;
}

.toast-message {
   font-size: 13px;
   line-height: 1.4;
   overflow-wrap: break-word;
   word-break: break-word;
   white-space: normal;
}

.toast-close {
   background: none;
   border: none;
   font-size: 16px;
   color: white;
   cursor: pointer;
   padding: 0;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all 0.2s ease;
   flex-shrink: 0;
}

.toast-close:hover {
   background-color: var(--toast-close-hover-bg);
   color: var(--toast-close-hover-color);
}

@keyframes slideInTop {
   from {
      opacity: 0;
      transform: translateY(-100%);
   }

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

@keyframes slideOutTop {
   from {
      opacity: 1;
      transform: translateY(0);
   }

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

.toast.slide-out {
   animation: slideOutTop 0.3s ease-in forwards;
}

/* Modal Transitions */
.modal-enter-active,
.modal-leave-active {
   transition: opacity 0.3s ease-out;
}

.modal-enter-active .modal,
.modal-leave-active .modal {
   transition: all 0.3s ease-out;
}

.modal-enter-from,
.modal-leave-to {
   opacity: 0;
}

.modal-enter-from .modal,
.modal-leave-to .modal {
   opacity: 0;
   transform: translateY(100px);
}

.modal-enter-to,
.modal-leave-from {
   opacity: 1;
}

.modal-enter-to .modal,
.modal-leave-from .modal {
   opacity: 1;
   transform: translateY(0);
}