/* CSS Custom Properties */
:root {
    --primary-color: #3A6B35;
    --primary-hover: #2D5429;
    --primary-light: #5A8F55;
    --secondary-color: #7EB356;
    --accent-color: #D4A843;
    --accent-hover: #B8922E;
    --background: #FAF7F2;
    --card-bg: #FFFFFF;
    --text-primary: #2C2416;
    --text-secondary: #6B5E4F;
    --text-light: #6B5E4F; /* WCAG AA compliant contrast ratio 4.5:1 on white */
    --border-color: #D4CBBF;
    --error: #D32F2F;
    --error-bg: #FFEBEE;
    --success: #388E3C;
    --notable-highlight: #FF5722;
    --lifer-highlight: #6A1B9A;
    --lifer-bg: #F3E5F5;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --radius: 8px;
    --radius-large: 12px;
    --transition: 0.2s ease;
    --hover-bg: #F0EDE5;
    /* Typography */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Card hierarchy */
    --card-bg-muted: #F7F4EE;
    /* Target/alert/stop semantic colors */
    --target-color: #2196F3;
    --target-hover: #1976D2;
    --target-light: #64B5F6;
    --alert-color: #FF9800;
    --alert-dark: #E65100;
    --alert-medium: #F57C00;
    --stop-start: #22c55e;
    --stop-end: #ef4444;
    --stop-end-hover: #dc2626;
    /* Semantic colors: weather conditions */
    --weather-excellent: #3A6B35;
    --weather-good: #689F38;
    --weather-fair: #FFA000;
    --weather-poor: #D32F2F;
    --weather-cloudy: #607D8B;
    /* Semantic colors: lifer badges */
    --lifer-text: #7B1FA2;
    --lifer-glow: rgba(156, 39, 176, 0.3);
    /* Semantic colors: seasons */
    --season-spring: #3A6B35;
    --season-fall: #F57F17;
    --season-winter: #546E7A;
    /* Error badge */
    --error-badge-bg: #d32f2f;
    --error-badge-text: #fff;
    /* Spacing scale */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
}

/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #5A8F55;
        --primary-hover: #6FA869;
        --primary-light: #81C784;
        --secondary-color: #A3C98A;
        --background: #1A1610;
        --card-bg: #252018;
        --text-primary: #E5DED3;
        --text-secondary: #A09585;
        --text-light: #A09585;
        --border-color: #3D362C;
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
        --hover-bg: #302A20;
        --error-bg: #3E1E1E;
        --lifer-bg: #2A1E2E;
        --card-bg-muted: #201C14;
    }
}

/* Dark Mode - Specific overrides for non-variable elements */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .loading-overlay {
        background: rgba(26, 22, 16, 0.95);
    }
    :root:not([data-theme="light"]) .select-input {
        background: var(--card-bg);
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) .stop-content {
        background: var(--card-bg);
    }
    :root:not([data-theme="light"]) .favorite-hotspot-btn {
        background: var(--card-bg);
    }
}

/* Dark Mode - Manual Toggle */
[data-theme="dark"] {
    --primary-color: #5A8F55;
    --primary-hover: #6FA869;
    --primary-light: #81C784;
    --secondary-color: #A3C98A;
    --background: #1A1610;
    --card-bg: #252018;
    --text-primary: #E5DED3;
    --text-secondary: #A09585;
    --text-light: #A09585;
    --border-color: #3D362C;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
    --hover-bg: #302A20;
    --error-bg: #3E1E1E;
    --lifer-bg: #2A1E2E;
    --card-bg-muted: #201C14;
    /* Semantic colors: softened for dark backgrounds */
    --weather-excellent: #66BB6A;
    --weather-good: #8BC34A;
    --weather-fair: #FFB74D;
    --weather-poor: #EF5350;
    --weather-cloudy: #90A4AE;
    --lifer-text: #CE93D8;
    --lifer-glow: rgba(206, 147, 216, 0.3);
    --season-spring: #66BB6A;
    --season-fall: #FFD54F;
    --season-winter: #90A4AE;
    --error-badge-bg: #ef5350;
    --error-badge-text: #fff;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(26, 22, 16, 0.95);
}

[data-theme="dark"] .select-input {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .stop-content {
    background: var(--card-bg);
}

[data-theme="dark"] .favorite-hotspot-btn {
    background: var(--card-bg);
}

/* Reset and Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Fieldset reset for accessible radio groups */
.fieldset-reset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Global focus-visible styles for keyboard accessibility (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Remove focus ring on mouse click for elements with custom focus styles */
.text-input:focus:not(:focus-visible),
.species-search-input:focus:not(:focus-visible),
.select-input:focus:not(:focus-visible) {
    outline: none;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--background) 0%, var(--hover-bg) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* Skip Link - Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    padding: 12px 16px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius);
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Container */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 600px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

/* Header */
.header {
    text-align: center;
    padding: 20px 0 30px;
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-color), var(--primary-color), transparent);
    border-radius: 2px;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.logo-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(58, 107, 53, 0.35));
}

.header h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.tagline {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Main Content - Single column centered by default */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Two-column desktop layout - only when results are showing */
@media (min-width: 1024px) {
    .main-content.has-results {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: var(--spacing-md);
        align-items: start;
        max-width: 1200px;
    }
}

/* Settings Sidebar */
.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    .main-content.has-results .settings-sidebar {
        position: sticky;
        top: var(--spacing-md);
        max-height: calc(100vh - var(--spacing-lg));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }

    .main-content.has-results .settings-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .main-content.has-results .settings-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .main-content.has-results .settings-sidebar::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }

    .main-content.has-results .settings-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--primary-light);
    }
}

/* Results Area */
.results-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-large);
    padding: 20px;
    box-shadow: var(--shadow);
}

/* Primary cards: API key, search type, location - top accent border */
.settings-sidebar > .card:not(.collapsible-section) {
    border-top: 3px solid var(--primary-color);
}

/* Collapsible sections: muted background, no shadow, subtle border */
.card.collapsible-section {
    background: var(--card-bg-muted);
    box-shadow: none;
    border: 1px solid var(--border-color);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Section Header with Reset Button */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.section-header .section-title {
    margin-bottom: 16px;
    flex: 1;
}

.btn-reset {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-reset:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--hover-bg);
}

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

.btn-reset svg {
    flex-shrink: 0;
}

/* Input Groups */
.input-group {
    margin-bottom: 12px;
    position: relative;
}

.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Help Text */
.help-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-style: italic;
}

/* Recent Searches */
.recent-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.recent-searches.hidden {
    display: none;
}

.recent-search-chip {
    padding: 6px 12px;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-search-chip:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.recent-searches-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.recent-searches-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 6px;
}

.recent-searches-clear:hover {
    color: var(--danger-color);
}

.text-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.text-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(58, 107, 53, 0.1);
}

.text-input::placeholder {
    color: var(--text-light);
}

/* Input with inline button */
.input-with-button {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-with-button .text-input {
    flex: 1;
}

.location-btn {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--hover-bg);
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition);
}

.location-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

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

/* GPS Fields */
.gps-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gps-field {
    display: flex;
    flex-direction: column;
}

/* Input Mode Toggle */
.input-mode-toggle {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

/* Radio Buttons */
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-primary);
    min-height: 44px;
    padding: 8px 0;
}

.radio-label input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: border-color var(--transition);
    flex-shrink: 0;
}

.radio-label input[type="radio"]:checked + .radio-custom {
    border-color: var(--primary-color);
}

.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    transition: transform var(--transition);
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Radio Cards for Sort Options */
.sort-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-card {
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color var(--transition), background-color var(--transition);
}

.radio-card:hover {
    border-color: var(--primary-light);
}

.radio-card:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(58, 107, 53, 0.05);
}

.radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-title {
    font-weight: 600;
    color: var(--text-primary);
}

.radio-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Range Options */
.range-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 480px) {
    .range-options {
        flex-direction: column;
    }
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    min-height: 44px;
    padding: 8px 0;
}

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

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: all var(--transition);
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--transition);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    transform: rotate(45deg) scale(1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(58, 107, 53, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
    box-shadow: 0 4px 16px rgba(58, 107, 53, 0.35);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(58, 107, 53, 0.2);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: rgba(58, 107, 53, 0.1);
}

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

.btn-small {
    padding: 10px 16px;
    font-size: 0.875rem;
    min-height: 44px;
}

.btn-large {
    width: 100%;
    padding: 18px 28px;
    font-size: 1.15rem;
    border-radius: var(--radius-large);
    font-family: var(--font-heading);
    letter-spacing: 0.01em;
}

.btn-icon {
    background: transparent;
    border: none;
    padding: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition);
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--background);
    color: var(--text-primary);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    background: var(--background);
}

/* Help Link */
.help-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.help-link:hover {
    color: var(--primary-color);
}

/* Favorites List */
.favorites-list {
    margin-bottom: 12px;
}

.no-favorites {
    color: var(--text-light);
    font-size: 0.9rem;
    font-style: italic;
}

.favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--background);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color var(--transition);
}

.favorite-item:hover {
    background: var(--hover-bg);
}

.favorite-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.favorite-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.favorite-address {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.favorite-delete {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
    transition: all var(--transition);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-delete:hover {
    color: var(--error);
    background: var(--error-bg);
}

/* Error Message */
.error-message {
    background: var(--error-bg);
    color: var(--error);
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    border-left: 4px solid var(--error);
}

/* Inline Input Error */
.input-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-error::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D32F2F'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-size: contain;
    flex-shrink: 0;
}

/* Input validation states */
.text-input.error {
    border-color: var(--error);
}

.text-input.error:focus {
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

/* Success state for input border */
.text-input.success {
    border-color: var(--primary-color);
}

.text-input.success:focus {
    box-shadow: 0 0 0 3px rgba(58, 107, 53, 0.1);
}

/* Wrapper for input with validation indicator */
.input-with-validation {
    position: relative;
}

.input-with-validation .text-input {
    padding-right: 40px;
}

/* Input validation indicator (success/error/loading icon) */
.input-validation-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-validation-indicator.success {
    color: var(--primary-color);
}

.input-validation-indicator.error {
    color: var(--error);
}

.input-validation-indicator.loading {
    color: var(--text-secondary);
    animation: spin 1s linear infinite;
}

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

/* Map Preview Section */
.map-preview-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.map-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.map-preview-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.map-preview-container {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--background);
    min-height: 200px;
    position: relative;
}

#mapPreviewContainer, #routePreviewMap {
    height: 200px;
    border-radius: var(--radius);
}

.input-with-button .input-with-validation {
    flex: 1;
}

.section-title-icon {
    fill: var(--primary-color);
    vertical-align: middle;
    margin-right: 4px;
}

.map-preview-container iframe {
    display: block;
    width: 100%;
    height: 200px;
}

.map-preview-hint {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.map-preview-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive adjustments for map preview */
@media (max-width: 480px) {
    .map-preview-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .map-preview-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Route Preview Section */
.route-preview-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.route-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.route-preview-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.route-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 12px;
}

.route-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.route-stat-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.route-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.route-preview-container {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--background);
    min-height: 200px;
}

@media (max-width: 480px) {
    .route-preview-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .route-preview-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Route Hotspots Selection */
.route-hotspots-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.route-hotspots-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.route-hotspot-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--background);
    border-radius: var(--radius);
    border: 2px solid transparent;
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}

.route-hotspot-card:hover {
    background: var(--hover-bg);
}

.route-hotspot-card.selected {
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

.route-hotspot-checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.route-hotspot-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

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

.route-hotspot-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.route-hotspot-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.route-hotspot-species {
    color: var(--primary-color);
    font-weight: 500;
}

.route-hotspot-distance {
    display: flex;
    align-items: center;
    gap: 4px;
}

.route-hotspot-distance svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Route Hotspot Card Badges */
.route-hotspot-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.route-rare-badge {
    background: linear-gradient(135deg, #FF5722 0%, #F4511E 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.route-rare-badge svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.route-lifer-badge {
    background: linear-gradient(135deg, var(--lifer-highlight) 0%, var(--lifer-text) 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.route-target-badge {
    background: linear-gradient(135deg, var(--target-color) 0%, var(--target-hover) 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Route Key Birds Section */
.route-key-birds {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.route-key-birds-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.route-key-birds-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
}

.route-key-bird {
    font-size: 0.85rem;
    padding: 2px 0;
    color: var(--text-primary);
}

.route-key-bird.notable {
    color: var(--notable-highlight);
    font-weight: 500;
}

.route-key-bird.lifer {
    color: var(--lifer-highlight);
    font-weight: 500;
}

.route-key-bird.target {
    color: var(--target-hover);
    font-weight: 500;
}

.route-key-birds-more {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
    display: block;
}

/* Route Diversity Indicator */
.route-diversity-indicator {
    font-size: 0.8rem;
    margin-top: 8px;
    min-height: 1.2em;
}

.route-diversity-indicator.has-unique {
    color: var(--primary-color);
    font-weight: 500;
}

.route-diversity-indicator.high-overlap {
    color: var(--text-secondary);
    font-style: italic;
}

.route-hotspots-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

#selectedHotspotsCount {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

#buildRouteItinerary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Map popup toggle button */
.popup-toggle-btn {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: var(--primary-color);
    color: white;
    transition: background 0.2s;
}

.popup-toggle-btn:hover {
    background: var(--primary-hover);
}

.popup-toggle-btn .add-text {
    display: none;
}

.popup-toggle-btn .remove-text {
    display: inline;
}

.popup-toggle-btn:not(.selected) {
    background: var(--text-light);
}

.popup-toggle-btn:not(.selected) .add-text {
    display: inline;
}

.popup-toggle-btn:not(.selected) .remove-text {
    display: none;
}

@media (max-width: 480px) {
    .route-hotspots-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    #selectedHotspotsCount {
        text-align: center;
    }
    #buildRouteItinerary {
        width: 100%;
        justify-content: center;
    }
}

/* Footer */
.footer {
    text-align: center;
    padding: 24px 0 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-md);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

.footer a {
    color: var(--primary-color);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--accent-color);
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 0 auto 20px;
}

.loading-status {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.progress-bar {
    width: 200px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cancel-btn {
    margin-top: 20px;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--radius-large);
    width: 90%;
    max-width: 400px;
    box-shadow: var(--shadow-hover);
}

.modal-content h3 {
    font-family: var(--font-heading);
    margin-bottom: 16px;
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Error Badge (on Feedback link) */
.error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--error-badge-bg);
    color: var(--error-badge-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

/* Error Report Dialog */
.error-report-dialog {
    max-width: 540px;
    width: 95%;
}

.error-report-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.error-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    font-size: 13px;
}

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

.error-item-type {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--error);
    font-weight: 600;
    text-transform: uppercase;
}

.error-item-message {
    margin-top: 2px;
    color: var(--text-primary);
    word-break: break-word;
}

.error-item-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.error-item-actions {
    flex-shrink: 0;
}

.error-report-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive Design */

/* Tablet breakpoint */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-sm);
    }

    .sort-options {
        flex-direction: column;
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    .container {
        padding: var(--spacing-sm);
    }

    .header h1 {
        font-size: 1.5rem;
    }

    .gps-fields {
        grid-template-columns: 1fr;
    }

    .input-mode-toggle {
        flex-direction: column;
        gap: 10px;
    }

    .btn-large {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

/* Small phone breakpoint */
@media (max-width: 360px) {
    .container {
        padding: var(--spacing-xs);
    }

    .header h1 {
        font-size: 1.35rem;
    }

    .map-preview-container {
        min-height: 150px;
    }

    #mapPreviewContainer {
        height: 150px !important;
    }

    .section-title {
        font-size: 0.95rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .btn-primary:hover {
        box-shadow: var(--shadow);
    }

    .radio-card:hover {
        border-color: var(--border-color);
    }

    .favorite-item:hover {
        background: var(--background);
    }

    /* Active state feedback for touch */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .radio-card:active {
        border-color: var(--primary-light);
    }

    .favorite-item:active {
        background: var(--hover-bg);
    }

    /* Minimum 44px touch targets (WCAG 2.5.5) */
    .btn,
    .radio-card,
    .favorite-item,
    .species-option,
    .route-hotspot-card,
    .popup-toggle-btn {
        min-height: 44px;
    }

    .radio-card {
        padding: 14px 16px;
    }

    .species-option {
        padding: 14px 16px;
    }

    .favorite-item {
        padding: 14px 12px;
    }
}

/* Touch highlight color */
* {
    -webkit-tap-highlight-color: rgba(58, 107, 53, 0.2);
}

/* Print Styles */
@media print {
    .container {
        max-width: 100%;
    }

    .btn, .footer, .loading-overlay, .modal {
        display: none !important;
    }
}

/* Focus Styles for Accessibility */
.btn:focus-visible,
.text-input:focus-visible,
.radio-label:focus-within .radio-custom,
.checkbox-label:focus-within .checkbox-custom {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* About Section (Collapsible) */
.about-section {
    margin-bottom: 16px;
    box-shadow: none;
    border: 1px dashed var(--border-color);
    background: var(--card-bg-muted);
}

.about-section .about-title {
    font-size: 14px;
    color: var(--text-secondary);
}

.about-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
}

.about-toggle::-webkit-details-marker {
    display: none;
}

.about-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.about-chevron {
    transition: transform var(--transition);
    color: var(--text-secondary);
}

details.about-section[open] .about-chevron {
    transform: rotate(180deg);
}

.about-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}

.about-content p {
    margin: 0 0 12px 0;
}

.about-content ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.about-content li {
    margin-bottom: 8px;
}

.about-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.about-content a:hover {
    text-decoration: underline;
}

.about-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 0 !important;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== RESULTS SECTION ========== */

.results-section {
    margin-top: 24px;
    animation: fadeIn 0.3s ease;
}

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

/* Results Header - Sticky */
.results-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--card-bg);
    padding: 16px 20px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.results-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.results-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

/* Sort Toggle in Results */
.sort-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.sort-btn {
    padding: 8px 16px;
    border: none;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    min-height: 44px; /* WCAG touch target size */
}

.sort-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.sort-btn:hover:not(.active) {
    background: var(--background);
}

.sort-btn.active {
    background: var(--primary-color);
    color: white;
}

.sort-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    z-index: 1;
}

.results-actions {
    display: flex;
    gap: 12px;
}

/* Results Map */
.results-map-container {
    margin-bottom: 16px;
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.results-map {
    height: 300px;
    width: 100%;
    background: var(--background);
}

/* Custom numbered markers */
.hotspot-marker {
    background: #FF5722;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    width: 28px;
    height: 28px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.origin-marker {
    background: var(--primary-color);
    border: 3px solid white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.origin-marker svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Highlight card when marker clicked */
.hotspot-card.highlight {
    box-shadow: 0 0 0 3px var(--primary-color), var(--shadow-hover);
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Hotspot Cards */
.hotspot-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotspot-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.hotspot-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Hotspot Header */
.hotspot-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    padding-right: 52px; /* Space for star button */
    background: linear-gradient(135deg, rgba(58, 107, 53, 0.05) 0%, rgba(126, 179, 86, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
}

.hotspot-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(58, 107, 53, 0.3);
}

.hotspot-title-section {
    flex: 1;
    min-width: 0;
}

.hotspot-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    word-wrap: break-word;
}

.hotspot-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hotspot-stats .stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.hotspot-stats .stat svg {
    color: var(--primary-color);
}

.species-count {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color) !important;
}

/* Hotspot Quality Indicators */
.hotspot-quality {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    font-size: 0.85rem;
}

.quality-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

.quality-stat svg {
    color: var(--text-light);
}

.quality-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.quality-badge.established {
    background: linear-gradient(135deg, #EBF2E4, #D4E5CB);
    color: var(--season-spring);
}

.quality-badge.active {
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    color: var(--season-fall);
}

.quality-badge.new {
    background: linear-gradient(135deg, #ECEFF1, #CFD8DC);
    color: var(--season-winter);
}

/* Hotspot Details */
.hotspot-details {
    padding: 16px 20px;
}

.hotspot-address {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.hotspot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hotspot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition);
}

.hotspot-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.hotspot-link svg {
    flex-shrink: 0;
}

/* Species Section */
.species-section {
    border-top: 1px solid var(--border-color);
}

.species-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--background);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: background-color var(--transition);
    font-family: inherit;
}

.species-toggle:hover {
    background: var(--hover-bg);
}

.species-toggle .chevron {
    transition: transform var(--transition);
}

.species-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.species-list {
    padding: 0 20px 20px;
}

.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.species-item {
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 4px 0;
}

.species-item.notable {
    color: var(--notable-highlight);
    font-weight: 500;
}

.species-item.lifer {
    color: var(--lifer-highlight);
    font-weight: 500;
}

.species-item.lifer::before {
    content: "\2605 ";
}

/* Species that is BOTH notable AND lifer */
.species-item.notable.lifer {
    background: linear-gradient(90deg, rgba(255, 243, 224, 0.5), rgba(243, 229, 245, 0.5));
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--lifer-highlight);
}

.notable-legend {
    margin: 12px 0 0 0;
    font-size: 0.8rem;
    color: var(--notable-highlight);
    font-style: italic;
}

/* Copy Species List Button */
.copy-species-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.copy-species-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition);
}

.copy-species-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.copy-species-btn svg {
    flex-shrink: 0;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    background: var(--text-primary);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    z-index: 10000;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: var(--shadow-hover);
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.toast-success {
    background: var(--success);
}

.toast-notification.toast-error {
    background: var(--error);
}

/* Favorite Hotspot Button on Cards */
.favorite-hotspot-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Expand tap target to 44px without changing visual size */
.favorite-hotspot-btn::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
}

.favorite-hotspot-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--border-color);
    transition: fill var(--transition);
}

.favorite-hotspot-btn:hover {
    border-color: var(--accent-color);
    background: #FFF8E1;
}

.favorite-hotspot-btn:hover svg {
    fill: var(--accent-color);
}

.favorite-hotspot-btn.is-favorite svg {
    fill: var(--accent-color);
}

/* Favorite Hotspots Section */
.favorite-hotspots-section {
    margin-top: 16px;
}

.favorite-hotspot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--hover-bg);
    margin-bottom: 8px;
}

.favorite-hotspot-info {
    color: var(--text-primary);
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.favorite-hotspot-info:hover {
    color: var(--primary-color);
}

.favorite-hotspot-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-hotspot-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.favorite-hotspot-delete:hover {
    color: var(--error);
}

/* Results Section Mobile Responsive */
@media (max-width: 600px) {
    .results-header {
        flex-direction: column;
        align-items: stretch;
    }

    .results-map {
        height: 250px;
    }

    .sort-toggle {
        width: 100%;
    }

    .sort-btn {
        flex: 1;
        text-align: center;
    }

    .results-actions {
        flex-direction: column;
    }

    .results-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hotspot-header {
        flex-direction: column;
        gap: 12px;
        padding-right: 48px; /* Less padding needed on mobile column layout */
    }

    .hotspot-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .favorite-hotspot-btn {
        top: 12px;
        right: 12px;
    }

    .species-grid {
        grid-template-columns: 1fr;
    }
}

/* Print styles for results */
@media print {
    .results-header {
        position: static;
    }

    .results-actions {
        display: none !important;
    }

    .species-list {
        display: block !important;
    }

    .species-toggle {
        display: none !important;
    }
}

/* ========== RARE BIRD ALERT ========== */

.rare-bird-alert {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    border: 2px solid var(--alert-color);
    border-radius: var(--radius-large);
    padding: 16px 20px;
    margin-bottom: 16px;
    animation: alertPulse 2s ease-in-out 3;
}

@keyframes alertPulse {
    0%, 100% { border-color: var(--alert-color); }
    50% { border-color: var(--alert-medium); box-shadow: 0 0 8px rgba(255, 152, 0, 0.3); }
}

.rare-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rare-alert-icon {
    color: var(--alert-dark);
    flex-shrink: 0;
}

.rare-alert-title {
    font-weight: 700;
    color: var(--alert-dark);
    font-size: 1rem;
    margin: 0;
}

.rare-alert-count {
    font-size: 0.875rem;
    color: var(--alert-medium);
    margin-left: auto;
}

.rare-alert-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.rare-alert-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 152, 0, 0.2);
    font-size: 0.9rem;
    color: var(--text-primary);
}

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

.rare-alert-item strong {
    color: var(--alert-dark);
}

.rare-alert-location {
    color: var(--text-secondary);
}

.rare-alert-date {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-left: 8px;
}

.rare-alert-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--alert-dark);
    transition: all var(--transition);
    font-family: inherit;
}

.rare-alert-toggle:hover {
    background: rgba(255, 152, 0, 0.2);
}

.rare-alert-toggle .chevron {
    transition: transform var(--transition);
}

.rare-alert-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Rare Badge on Hotspot Cards */
.rare-badge {
    background: linear-gradient(135deg, #FF5722 0%, #F4511E 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(244, 81, 30, 0.3);
}

.rare-badge svg {
    width: 14px;
    height: 14px;
}

/* Notable Highlight Section in Hotspot Card */
.notable-highlight {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    border-left: 4px solid var(--alert-color);
    padding: 12px 16px;
    margin: 0;
    border-radius: 0;
}

.notable-highlight-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--alert-dark);
    cursor: pointer;
    font-family: inherit;
}

.notable-highlight-toggle svg {
    color: var(--alert-color);
    flex-shrink: 0;
}

.notable-highlight-toggle .chevron {
    margin-left: auto;
    transition: transform var(--transition);
}

.notable-highlight-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.notable-highlight-content {
    margin-top: 8px;
}

.notable-bird {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 152, 0, 0.15);
}

.notable-bird:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.notable-bird-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.notable-bird-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Responsive adjustments for rare bird alert */
@media (max-width: 480px) {
    .rare-bird-alert {
        padding: 14px 16px;
    }

    .rare-alert-header {
        flex-wrap: wrap;
    }

    .rare-alert-count {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .notable-bird {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ========== LIFER ALERT ========== */

.lifer-alert {
    background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
    border: 2px solid var(--lifer-highlight);
    border-radius: var(--radius-large);
    padding: 16px 20px;
    margin-bottom: 16px;
    animation: liferPulse 2s ease-in-out 3;
}

@keyframes liferPulse {
    0%, 100% { border-color: var(--lifer-highlight); }
    50% { border-color: var(--lifer-text); box-shadow: 0 0 8px var(--lifer-glow); }
}

.lifer-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lifer-alert-icon {
    color: var(--lifer-text);
    flex-shrink: 0;
}

.lifer-alert-title {
    font-weight: 700;
    color: var(--lifer-text);
    font-size: 1rem;
    margin: 0;
}

.lifer-alert-count {
    font-size: 0.875rem;
    color: var(--lifer-text);
    margin-left: auto;
}

.lifer-alert-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.lifer-alert-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(156, 39, 176, 0.2);
    font-size: 0.9rem;
    color: var(--text-primary);
}

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

.lifer-alert-item strong {
    color: var(--lifer-text);
}

.lifer-alert-location {
    color: var(--text-secondary);
}

.lifer-alert-date {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-left: 8px;
}

.lifer-alert-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: rgba(156, 39, 176, 0.1);
    border: 1px solid rgba(156, 39, 176, 0.3);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lifer-text);
    transition: all var(--transition);
    font-family: inherit;
}

.lifer-alert-toggle:hover {
    background: rgba(156, 39, 176, 0.2);
}

.lifer-alert-toggle .chevron {
    transition: transform var(--transition);
}

.lifer-alert-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Lifer Badge on Hotspot Cards */
.lifer-badge {
    background: linear-gradient(135deg, var(--lifer-highlight) 0%, var(--lifer-text) 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.3);
}

.lifer-badge svg {
    width: 14px;
    height: 14px;
}

/* Lifer Highlight Section in Hotspot Card */
.lifer-highlight {
    background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
    border-left: 4px solid var(--lifer-highlight);
    padding: 12px 16px;
    margin: 0;
    border-radius: 0;
}

.lifer-highlight-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lifer-text);
    cursor: pointer;
    font-family: inherit;
}

.lifer-highlight-toggle svg {
    color: var(--lifer-highlight);
    flex-shrink: 0;
}

.lifer-highlight-toggle .chevron {
    margin-left: auto;
    transition: transform var(--transition);
}

.lifer-highlight-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.lifer-highlight-content {
    margin-top: 8px;
}

.lifer-bird {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(156, 39, 176, 0.15);
}

.lifer-bird:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lifer-bird-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.lifer-bird-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Life List Section Styling */
.life-list-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--lifer-bg);
    color: var(--lifer-highlight);
    border-radius: 10px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 8px;
}

.life-list-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.life-list-import-btn {
    cursor: pointer;
}

.help-text-small {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 12px;
}

.help-text-small a {
    color: var(--primary-color);
}

/* Responsive adjustments for lifer alert */
@media (max-width: 480px) {
    .lifer-alert {
        padding: 14px 16px;
    }

    .lifer-alert-header {
        flex-wrap: wrap;
    }

    .lifer-alert-count {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .lifer-bird {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ========== WEATHER FEATURE ========== */

/* Weather Summary in Results Header */
.weather-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.weather-summary-icon {
    color: var(--primary-color);
}

.weather-summary-text {
    color: var(--text-secondary);
}

.weather-summary.excellent .weather-summary-icon { color: var(--weather-excellent); }
.weather-summary.good .weather-summary-icon { color: var(--weather-good); }
.weather-summary.fair .weather-summary-icon { color: var(--weather-fair); }
.weather-summary.poor .weather-summary-icon { color: var(--weather-poor); }

/* Weather Badge on Hotspot Cards */
.weather-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-radius: var(--radius);
    margin: 0 20px 12px;
}

.weather-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-icon {
    width: 36px;
    height: 36px;
    color: var(--target-hover);
}

.weather-temp {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.weather-condition {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.weather-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.weather-detail svg {
    width: 14px;
    height: 14px;
    color: var(--target-light);
}

/* Weather condition colors */
.weather-badge.clear { background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%); }
.weather-badge.clear .weather-icon { color: var(--alert-color); }

.weather-badge.cloudy { background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%); }
.weather-badge.cloudy .weather-icon { color: var(--weather-cloudy); }

.weather-badge.rain { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); }
.weather-badge.rain .weather-icon { color: var(--target-hover); }

.weather-badge.snow { background: linear-gradient(135deg, #FAFAFA 0%, #EEEEEE 100%); }
.weather-badge.snow .weather-icon { color: #90A4AE; }

.weather-badge.storm { background: linear-gradient(135deg, #ECEFF1 0%, #B0BEC5 100%); }
.weather-badge.storm .weather-icon { color: #455A64; }

/* Sunrise/Sunset in weather summary banner */
.weather-sun-times {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-left: auto;
    white-space: nowrap;
}

.weather-sun-times.golden-active {
    color: var(--accent-color);
    font-weight: 600;
}

/* Sunrise/Sunset row in hotspot weather badge */
.weather-sun-times-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 100%;
}

.weather-sun-times-badge .daylight {
    opacity: 0.8;
    font-style: italic;
}

/* Temperature Unit Toggle */
.temp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-light);
    cursor: pointer;
    margin-left: 4px;
}

.temp-toggle:hover {
    color: var(--primary-color);
}

/* Birding Condition Badge */
.birding-condition {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.birding-condition.excellent {
    background: #C8E6C9;
    color: var(--weather-excellent);
}

.birding-condition.good {
    background: #DCEDC8;
    color: #558B2F;
}

.birding-condition.fair {
    background: #FFF3E0;
    color: #EF6C00;
}

.birding-condition.poor {
    background: #FFEBEE;
    color: #C62828;
}

/* Responsive adjustments for weather */
@media (max-width: 480px) {
    .weather-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 16px 12px;
    }

    .weather-details {
        margin-left: 0;
        width: 100%;
    }

    .weather-summary {
        flex-wrap: wrap;
    }

    .weather-sun-times {
        margin-left: 0;
        width: 100%;
    }
}

/* ========== SPECIES SEARCH FEATURE ========== */

/* Search Mode Toggle */
.search-mode-toggle {
    display: flex;
    background: var(--background);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 16px;
}

.search-mode-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition);
    font-family: inherit;
}

.search-mode-btn:hover:not(.active) {
    color: var(--text-primary);
}

.search-mode-btn.active {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow);
}

/* Species Search Input with Autocomplete */
.species-search-container {
    position: relative;
}

.species-search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.species-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(58, 107, 53, 0.1);
}

.species-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
}

/* Autocomplete Dropdown */
.species-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-hover);
    max-height: 300px;
    overflow-y: auto;
    z-index: 200;
}

.species-option {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color var(--transition);
    border-bottom: 1px solid var(--border-color);
}

.species-option:last-child {
    border-bottom: none;
}

.species-option:hover,
.species-option.highlighted {
    background: var(--hover-bg);
}

.species-option-name {
    font-weight: 500;
    color: var(--text-primary);
}

.species-option-scientific {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.species-dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.species-dropdown-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
}

/* Selected Species Display */
.selected-species {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--hover-bg);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.selected-species-info {
    flex: 1;
}

.selected-species-name {
    font-weight: 600;
    color: var(--text-primary);
}

.selected-species-scientific {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.selected-species-clear {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.selected-species-clear:hover {
    background: var(--error-bg);
    color: var(--error);
}

/* Route Planning Panel */
.route-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.route-inputs .input-group {
    margin-bottom: 0;
}

.route-option {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Target Species Input Container */
.target-species-input-container {
    position: relative;
}

.target-species-input-container .species-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 250px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Target Species Tags */
.target-species-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.target-species-tags:empty {
    display: none;
}

.target-species-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: linear-gradient(135deg, var(--target-color) 0%, var(--target-hover) 100%);
    color: white;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.target-species-tag-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.target-species-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background-color var(--transition);
}

.target-species-tag-remove:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Species Search Results */
.species-results-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.species-results-icon {
    width: 48px;
    height: 48px;
    background: var(--hover-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.species-results-title {
    flex: 1;
}

.species-results-title h3 {
    font-size: 1.1rem;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.species-results-title p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Species Sighting Card */
.species-sighting-card {
    background: var(--card-bg);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow var(--transition);
}

.species-sighting-card:hover {
    box-shadow: var(--shadow-hover);
}

.species-sighting-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(58, 107, 53, 0.05) 0%, rgba(126, 179, 86, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
}

.sighting-rank {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

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

.sighting-location {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    word-wrap: break-word;
}

.sighting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sighting-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sighting-details {
    padding: 12px 20px;
}

.sighting-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.sighting-date strong {
    color: var(--primary-color);
}

.sighting-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sighting-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--background);
}

.sighting-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition);
}

.sighting-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* No Results State */
.species-no-results {
    text-align: center;
    padding: 40px 20px;
    background: var(--card-bg);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.species-no-results-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--text-light);
}

.species-no-results h3 {
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.species-no-results p {
    color: var(--text-secondary);
    margin: 0;
}

/* ===========================================
   SEASONAL INSIGHTS STYLES
   =========================================== */

/* Migration Alert Banner (in results header) */
.migration-alert-banner {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    border: 1px solid #FFB74D;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.migration-alert-banner.peak {
    background: linear-gradient(135deg, #FFECB3 0%, #FFD54F 100%);
    border-color: #FFC107;
}

.migration-alert-icon {
    flex-shrink: 0;
    color: var(--alert-medium);
}

.migration-alert-banner.peak .migration-alert-icon {
    color: var(--alert-dark);
    animation: pulse-migration 2s ease-in-out infinite;
}

@keyframes pulse-migration {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.migration-alert-content {
    flex: 1;
}

.migration-alert-title {
    font-weight: 600;
    color: var(--alert-dark);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.migration-alert-subtitle {
    color: #BF360C;
    font-size: 0.8rem;
}

/* Seasonal Insights Section (collapsible on hotspot cards) */
.seasonal-insights-section {
    border-top: 1px solid var(--border-color);
    margin: 0;
    padding: 12px 20px;
}

.seasonal-insights-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: color var(--transition);
}

.seasonal-insights-toggle > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.seasonal-insights-toggle > span:first-child svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.seasonal-insights-toggle .chevron {
    width: 16px;
    height: 16px;
}

.seasonal-insights-toggle:hover {
    color: var(--primary-color);
}

.seasonal-insights-toggle .chevron {
    transition: transform var(--transition);
}

.seasonal-insights-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.seasonal-insights-content {
    padding: 12px 0 0;
}

.seasonal-insights-content.hidden {
    display: none;
}

/* Best Time of Day Bars */
.time-of-day-chart {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 60px;
    margin-bottom: 12px;
}

.time-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time-bar-fill {
    width: 100%;
    background: var(--primary-light);
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    transition: height 0.3s ease;
}

.time-bar-fill.high {
    background: var(--primary-color);
}

.time-bar-fill.medium {
    background: var(--secondary-color);
}

.time-bar-fill.low {
    background: #E0E0E0;
}

.time-bar-label {
    font-size: 0.65rem;
    color: var(--text-light);
    text-align: center;
    white-space: nowrap;
}

/* Monthly Activity Sparkline */
.activity-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
    margin: 8px 0;
}

.sparkline-bar {
    flex: 1;
    background: var(--border-color);
    border-radius: 2px;
    min-width: 6px;
    transition: background 0.2s ease;
}

.sparkline-bar.current {
    background: var(--primary-color);
}

.sparkline-bar.high {
    background: var(--secondary-color);
}

.sparkline-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-light);
    margin-top: 4px;
}

/* Season Badge */
.season-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--hover-bg);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
}

.season-badge svg {
    width: 14px;
    height: 14px;
}

/* Activity Level Indicator */
.activity-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.activity-dots {
    display: flex;
    gap: 3px;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
}

.activity-dot.filled {
    background: var(--primary-color);
}

.activity-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Best Time Recommendation */
.best-time-recommendation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--hover-bg);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--primary-color);
}

.best-time-recommendation svg {
    flex-shrink: 0;
}

/* Seasonal Summary in Results Header */
.seasonal-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--hover-bg);
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.seasonal-summary-icon {
    color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .search-mode-toggle {
        flex-direction: column;
    }

    .species-sighting-header {
        flex-direction: column;
        gap: 8px;
    }

    .sighting-meta {
        flex-direction: column;
        gap: 6px;
    }

    .time-of-day-chart {
        height: 50px;
    }

    .time-bar-label {
        font-size: 0.6rem;
    }

    .migration-alert-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   ITINERARY BUILDER STYLES
   =========================================== */

/* Accent button */
.btn-accent {
    background: var(--accent-color);
    color: #2C2416;
    font-weight: 600;
}

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

/* Icon button */
.btn-icon {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}

.btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

/* Itinerary Panel */
.itinerary-panel {
    background: var(--card-bg);
    border-radius: var(--radius-large);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.itinerary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.itinerary-header h3 {
    font-family: var(--font-heading);
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.itinerary-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.itinerary-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Select input */
.select-input {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    transition: border-color var(--transition);
}

.select-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Range input */
.range-input {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition);
}

.range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Radio group */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Itinerary Results */
.itinerary-results {
    background: var(--card-bg);
    border-radius: var(--radius-large);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.itinerary-summary {
    background: linear-gradient(135deg, var(--hover-bg) 0%, #C8E6C9 100%);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.itinerary-summary-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.itinerary-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.itinerary-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.itinerary-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.itinerary-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.itinerary-export-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Itinerary Stops */
.itinerary-stops {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.itinerary-stop {
    position: relative;
    padding: 16px;
    padding-left: 48px;
    border-left: 3px solid var(--border-color);
    margin-left: 16px;
}

.itinerary-stop:last-child {
    border-left-color: transparent;
}

.itinerary-stop.start {
    border-left-color: var(--primary-color);
}

.itinerary-stop.hotspot {
    border-left-color: var(--accent-color);
}

.itinerary-stop.end {
    border-left-color: var(--error);
}

.stop-marker {
    position: absolute;
    left: -14px;
    top: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background: var(--accent-color);
}

.itinerary-stop.start .stop-marker {
    background: var(--primary-color);
}

.itinerary-stop.end .stop-marker {
    background: var(--error);
}

.stop-content {
    background: white;
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
}

.stop-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stop-address {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.stop-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stop-species-count {
    background: var(--hover-bg);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

/* Leg connector */
.itinerary-leg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 32px;
    padding: 8px 0;
    font-size: 0.8rem;
    color: var(--text-light);
}

.itinerary-leg svg {
    color: var(--border-color);
}

/* Itinerary Map Route Line */
.itinerary-route-line {
    stroke: var(--primary-color);
    stroke-width: 4;
    stroke-opacity: 0.8;
}

/* Responsive itinerary */
@media (max-width: 480px) {
    .itinerary-summary-stats {
        grid-template-columns: 1fr;
    }

    .itinerary-export-buttons {
        flex-direction: column;
    }

    .itinerary-export-buttons .btn {
        width: 100%;
    }

    .stop-meta {
        flex-direction: column;
        gap: 6px;
    }
}

/* ===========================================
   SKELETON LOADING STATES
   =========================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--background) 25%, var(--hover-bg) 50%, var(--background) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}

.skeleton-card {
    padding: 20px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
    background: var(--card-bg);
}

.skeleton-line {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* Toast warning type */
.toast-notification.toast-warning {
    background: var(--alert-dark);
    max-width: 400px;
    text-align: center;
}

/* ===========================================
   EMPTY STATE STYLES
   =========================================== */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--card-bg);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.empty-state-icon {
    color: var(--text-light);
    margin-bottom: 16px;
}

.empty-state h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin: 0 0 8px 0;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* Inline empty state for sidebar sections */
.empty-state-inline {
    text-align: center;
    padding: 20px 12px;
    color: var(--text-light);
}

.empty-state-inline .empty-state-icon {
    color: var(--text-light);
    margin-bottom: 8px;
    opacity: 0.6;
}

.empty-state-inline p {
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
}

/* Route Itinerary Results */
.route-itinerary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.route-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.route-header-content h3 {
    font-size: 1.2rem;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.route-endpoints {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.route-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--hover-bg);
    border-radius: var(--radius);
}

.route-summary-stats .stat-item {
    text-align: center;
}

.route-summary-stats .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
}

.route-summary-stats .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Route Stop Cards */
.route-stop-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    margin-bottom: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    position: relative;
}

.route-stop-card:not(:last-of-type) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.route-stop-card + .route-stop-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

.stop-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.stop-marker.start {
    background: var(--stop-start);
}

.stop-marker.end {
    background: var(--stop-end);
}

.stop-marker.hotspot {
    background: var(--primary-color);
}

.stop-content {
    flex: 1;
    min-width: 0;
}

.stop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.stop-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.stop-time {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 500;
}

.stop-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-details {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stop-details .species-count {
    color: var(--primary-color);
    font-weight: 500;
}

/* Leg connector between stops */
.leg-connector {
    position: absolute;
    bottom: -28px;
    left: 34px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leg-line {
    width: 2px;
    height: 20px;
    background: var(--border-color);
}

.leg-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--background);
    padding: 2px 8px;
    border-radius: 10px;
}

.leg-info svg {
    flex-shrink: 0;
}

/* Route Export Section */
.route-export-section {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.route-export-section .btn {
    flex: 1;
}

/* Responsive adjustments for route stats */
@media (max-width: 480px) {
    .route-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .route-endpoints {
        font-size: 0.8rem;
    }

    .stop-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ========================================
   Table of Contents (Support Page)
   ======================================== */

.toc-card {
    margin-bottom: var(--spacing-sm);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.toc-list li {
    flex: 1 1 auto;
    min-width: 120px;
}

.toc-list a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--hover-bg);
    border-radius: var(--radius);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    text-align: center;
    white-space: nowrap;
}

.toc-list a:hover {
    background: var(--primary-color);
    color: white;
}

@media (max-width: 600px) {
    .toc-list {
        flex-direction: column;
    }

    .toc-list li {
        min-width: auto;
    }

    .toc-list a {
        text-align: left;
    }
}

/* ========================================
   FAQ / Support Page Styles
   ======================================== */

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

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

.faq-question {
    font-family: var(--font-heading);
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 400;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.faq-item[open] .faq-question::after {
    content: '\2212'; /* minus sign */
}

.faq-answer {
    padding: 12px 0 8px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.faq-answer p {
    margin-bottom: 12px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
    margin: 12px 0;
    padding-left: 24px;
}

.faq-answer li {
    margin-bottom: 8px;
}

.faq-answer a {
    color: var(--primary-color);
    text-decoration: none;
}

.faq-answer a:hover {
    text-decoration: underline;
}

.back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}

/* ========================================
   Header Navigation
   ======================================== */

.header-nav {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-nav .help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(58, 107, 53, 0.1);
    transition: background 0.2s, color 0.2s;
}

.header-nav .help-link:hover {
    background: rgba(58, 107, 53, 0.2);
    color: var(--primary-color);
}

.header-nav .feedback-link svg {
    flex-shrink: 0;
}

.theme-toggle-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

/* ========================================
   Tooltips
   ======================================== */

.has-tooltip {
    position: relative;
    cursor: help;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    max-width: 250px;
    width: max-content;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
    pointer-events: none;
}

.has-tooltip:hover::after,
.has-tooltip:hover::before,
.has-tooltip:focus::after,
.has-tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Tooltip positioning adjustments for edge cases */
.has-tooltip.tooltip-left::after {
    left: 0;
    transform: translateX(0);
}

.has-tooltip.tooltip-left::before {
    left: 16px;
    transform: translateX(0);
}

.has-tooltip.tooltip-right::after {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.has-tooltip.tooltip-right::before {
    left: auto;
    right: 16px;
    transform: translateX(0);
}

/* Help icon for navigation */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Responsive tooltip adjustments */
@media (max-width: 480px) {
    .has-tooltip::after {
        max-width: 200px;
        font-size: 0.75rem;
    }
}

/* ========================================
   Search Type Cards (Step 1)
   ======================================== */

.search-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.search-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-large);
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.search-type-card:hover {
    border-color: var(--primary-color);
    background: var(--hover-bg);
    transform: scale(1.02);
}

.search-type-card.active {
    border-color: var(--primary-color);
    background: rgba(58, 107, 53, 0.08);
    box-shadow: 0 2px 12px rgba(58, 107, 53, 0.2);
}

.search-type-icon {
    color: var(--primary-color);
    margin-bottom: 12px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hover-bg);
    transition: all 0.2s;
}

.search-type-card.active .search-type-icon {
    background: var(--primary-color);
    color: white;
}

.search-type-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-type-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.search-type-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Sub-toggle (hotspot vs species) */
.search-sub-toggle {
    display: flex;
    gap: 8px;
    margin: 20px 0 16px 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.sub-toggle-btn {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.2s;
}

.sub-toggle-btn:hover {
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

.sub-toggle-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

@media (max-width: 480px) {
    .search-type-cards {
        grid-template-columns: 1fr;
    }

    .search-type-card {
        flex-direction: row;
        text-align: left;
        padding: 16px;
        gap: 16px;
    }

    .search-type-icon {
        margin-bottom: 0;
    }
}

/* Leaflet Popup Styling for Hotspot Preview */
.hotspot-preview-popup-container .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hotspot-preview-popup-container .leaflet-popup-content {
    margin: 12px 14px;
}

.hotspot-preview-popup {
    text-align: center;
}

.popup-hotspot-name {
    display: block;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 4px;
    line-height: 1.3;
}

.popup-species-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.popup-itinerary-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.popup-btn-add {
    background: var(--primary-color);
    color: white;
}

.popup-btn-add:hover {
    background: var(--primary-hover);
}

.popup-btn-remove {
    background: var(--stop-end);
    color: white;
}

.popup-btn-remove:hover {
    background: var(--stop-end-hover);
}

/* Preview Selection Count Display */
.preview-selection-count {
    text-align: center;
    padding: 10px 16px;
    margin: 12px 0;
    background: var(--hover-bg);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.preview-selection-count .selection-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    margin-right: 4px;
}

/* Collapsible Section Styles */
.collapsible-section {
    padding: 0;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition);
}

.collapsible-header:hover {
    background-color: rgba(58, 107, 53, 0.06);
    border-radius: var(--radius-large);
}

.collapsible-header .section-title {
    margin: 0;
}

.collapse-icon {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.collapsible-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    padding: 0 20px 16px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    max-height: 1500px;
    opacity: 1;
}

.collapsible-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Advanced Options Styling */
.advanced-option-group {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.advanced-option-group:first-child {
    padding-top: 0;
}

.advanced-option-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.advanced-option-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: block;
}

/* ========================================
   Tier 4: Micro-Interactions + Polish
   ======================================== */

/* 4A. Staggered Card Entrance */
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hotspot-cards .hotspot-card {
    animation: cardEnter 0.3s ease both;
}

.hotspot-cards .hotspot-card:nth-child(1) { animation-delay: 0s; }
.hotspot-cards .hotspot-card:nth-child(2) { animation-delay: 0.05s; }
.hotspot-cards .hotspot-card:nth-child(3) { animation-delay: 0.1s; }
.hotspot-cards .hotspot-card:nth-child(4) { animation-delay: 0.15s; }
.hotspot-cards .hotspot-card:nth-child(5) { animation-delay: 0.2s; }
.hotspot-cards .hotspot-card:nth-child(6) { animation-delay: 0.25s; }
.hotspot-cards .hotspot-card:nth-child(7) { animation-delay: 0.3s; }
.hotspot-cards .hotspot-card:nth-child(8) { animation-delay: 0.35s; }
.hotspot-cards .hotspot-card:nth-child(9) { animation-delay: 0.4s; }
.hotspot-cards .hotspot-card:nth-child(10) { animation-delay: 0.45s; }

/* 4B. Card Hover Lift */
.hotspot-card {
    transition: box-shadow var(--transition), transform var(--transition);
}

.hotspot-card:hover {
    transform: translateY(-2px);
}

/* 4C. Link Underline Animation */
.hotspot-link {
    position: relative;
    text-decoration: none;
}

.hotspot-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.hotspot-link:hover::after {
    width: 100%;
}

.hotspot-link:hover {
    text-decoration: none;
}