/* Base styles for a polished look */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden;
}
.dark body {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Gradient text for branding */
.gradient-text {
    background: linear-gradient(to right, #0033a0, #facc15, #ce1021);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Scrollbar */
.app-scrollbar::-webkit-scrollbar { width: 6px; }
.app-scrollbar::-webkit-scrollbar-track { background: transparent; }
.app-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark .app-scrollbar::-webkit-scrollbar-thumb { background: #475569; }

/* Leaflet Map Styles */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
}
.leaflet-popup-content {
    margin: 0;
    font-family: 'Inter', sans-serif;
    min-width: 250px !important;
}
.dark .leaflet-popup-content-wrapper, .dark .leaflet-popup-tip {
    background: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
}
.dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

#map-container, #microtransit-map-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.75rem;
    overflow: hidden;
}
.leaflet-container {
    height: 100%;
    width: 100%;
}

/* Animations */
.view-enter { animation: viewEnter 0.4s ease-out forwards; }
@keyframes viewEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.modal-enter { animation: modalEnter 0.3s ease-out forwards; }
@keyframes modalEnter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* Navigation Buttons */
.nav-button.active { background-color: #e0f2fe; color: #0369a1; }
.dark .nav-button.active { background-color: #1e40af; color: #bfdbfe; }

.focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6); }

/* DRC Flag Icon */
.drc-flag-icon {
    width: 28px; height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><path fill="%23007fff" d="M0 0h800v600H0z"/><path fill="%23ce1021" d="M0 600L800 0H0z"/><path stroke="%23f7d618" stroke-width="90" d="M0 600L800 0"/><path fill="%23f7d618" d="M123.1 211.9l-85.3 262.1-275.5-162.1h340.6L-94 574.1z" transform="matrix(.45 0 0 .45 100 20)"/></svg>');
    background-size: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* Card Hover Effect */
.card-hover { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.07); }
.dark .card-hover:hover { box-shadow: 0 10px 20px -5px rgba(0,0,0,0.4); }

/* Transport View Specific Styles */
.tab-btn { transition: all 0.2s ease-in-out; }
.tab-btn.tab-active { 
    border-color: #2563eb; 
    background-color: #eff6ff; 
    color: #1d4ed8;
    font-weight: 600;
}
.dark .tab-btn.tab-active { 
    border-color: #3b82f6;
    background-color: #1e293b; 
    color: #60a5fa;
}
.details-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-in-out; 
}
.details-content.open {
    max-height: 2000px; /* Adjust as needed */
}

/* Mobile Navigation Active State */
.mobile-nav-button.active { color: #0ea5e9; }
.dark .mobile-nav-button.active { color: #38bdf8; }

/* Toast Styles */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
.toast { padding: 16px 20px; margin-bottom: 10px; border-radius: 8px; color: white; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateX(400px); transition: transform 0.3s ease; }
.toast.show { transform: translateX(0); }
.toast.success { background: #10b981; }
.toast.error { background: #ef4444; }
.toast.info { background: #3b82f6; }
.toast.warning { background: #f59e0b; }

/* Pricing Tables */
.pricing-table { overflow-x: auto; }
.pricing-table table { width: 100%; border-collapse: collapse; min-width: 600px; }
.pricing-table th, .pricing-table td { border: 1px solid #d1d5db; padding: 12px; text-align: left; }
.dark .pricing-table th, .dark .pricing-table td { border-color: #475569; }
.pricing-table th { background-color: #f3f4f6; font-weight: 600; color: #0f172a; }
.dark .pricing-table th { background-color: #374151; color: #f8fafc; }

/* Go to Top Button */
#go-to-top { position: fixed; bottom: 80px; right: 20px; background-color: #0ea5e9; color: white; width: 48px; height: 48px; border-radius: 50%; display: none; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: opacity 0.3s, transform 0.3s; align-items: center; justify-content: center; }
#go-to-top.visible { display: flex; opacity: 1; transform: translateY(0); }
#go-to-top:hover { background-color: #0369a1; }

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .mobile-touch-optimized {
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    #go-to-top {
        bottom: 80px; /* Adjust for mobile nav bar */
    }
}

/* Improved dark mode text contrast */
.dark .text-slate-600, .dark .text-slate-500, .dark .text-slate-400, .dark .text-slate-300 { color: #e2e8f0 !important; }
.dark .bg-white { background-color: #1e293b; }
.dark .bg-slate-50 { background-color: #1e293b; }
.dark .bg-slate-100 { background-color: #334155; }
.dark .text-slate-800 { color: #f8fafc; }
.dark .border-slate-200 { border-color: #475569; }