/* ===== SLUSH DESIGN SYSTEM — Angkot Medan ===== */

/* --- Global --- */
*, *::before, *::after { box-sizing: border-box; }

.slush-canvas {
  background-color: #dceeff;
  background-image:
    radial-gradient(circle at 15% 20%, #ffd73120 0%, transparent 50%),
    radial-gradient(circle at 85% 60%, #4da2ff15 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, #55db9c12 0%, transparent 40%);
}

[data-view="home"],
[data-view="result"],
[data-view="about"],
[data-view="tracking"], 
[data-view="explorer"] {
  display: flex;
  flex-direction: column;
}
[data-view="home"].hidden,
[data-view="result"].hidden,
[data-view="about"].hidden,
[data-view="tracking"].hidden,
[data-view="explorer"].hidden {
  display: none;
}

/* --- Marquee --- */
.slush-marquee { overflow: hidden; }
.marquee-track {
  animation: marquee-scroll 25s linear infinite;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Sticker Float Animation --- */
.sticker-float {
  animation: sticker-bob 3s ease-in-out infinite;
}
@keyframes sticker-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-3px) rotate(2deg); }
  66% { transform: translateY(2px) rotate(-1deg); }
}

/* --- Loading --- */
.loading-dots { display: flex; gap: 0.5rem; }
.loading-dot {
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.4); opacity: 0.6; }
}

.angkot-bounce {
  animation: angkot-bounce 1.5s ease-in-out infinite;
}
@keyframes angkot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.signal-pulse circle:not(:last-child) {
  animation: signal-ring 2s ease-out infinite;
}
.signal-pulse circle:last-child {
  animation: signal-core 2s ease-in-out infinite;
}
@keyframes signal-ring {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes signal-core {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.3); }
}

.road-dash {
  animation: road-scroll 1.2s linear infinite;
}
@keyframes road-scroll {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

/* --- Nav active state --- */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #4da2ff;
  border-radius: 9999px;
  border: 1px solid #000000;
}

/* --- Suggestion items --- */
.suggestion-item {
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 1px solid #00000010;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: #000000;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item.highlighted {
  background: #4da2ff12;
}

/* --- Route Cards --- */
.route-card,
.popular-route,
.explorer-card {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 1rem;
  padding: 1rem;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.route-card::before,
.popular-route::before,
.explorer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
}
.route-card:hover,
.popular-route:hover,
.explorer-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px 0px #000000;
}

/* Livery stripe colors on cards */
.livery-kuning::before { background: #ffd731; }
.livery-biru::before   { background: #4da2ff; }
.livery-hijau::before  { background: #55db9c; }
.livery-merah::before  { background: #fb4903; }
.livery-putih::before  { background: #cccccc; }
.livery-ungu::before   { background: #5c4ade; }
.livery-hitam::before  { background: #000000; }

/* --- Result Cards --- */
.result-card {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.15s;
}
.result-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px 0px #000000;
}
.result-card .route-header {
  padding: 1rem 1.25rem;
  border-bottom: 2px solid #00000010;
}
.result-card .route-body {
  padding: 1rem 1.25rem;
}
.result-card .route-stops {
  padding: 1rem 1.25rem;
  border-top: 2px solid #00000010;
}

/* Livery stripe on result cards */
.result-card .livery-stripe {
  height: 6px;
  width: 100%;
}
.stripe-kuning { background: #ffd731; }
.stripe-biru   { background: #4da2ff; }
.stripe-hijau  { background: #55db9c; }
.stripe-merah  { background: #fb4903; }
.stripe-putih  { background: #cccccc; }
.stripe-ungu   { background: #5c4ade; }
.stripe-hitam  { background: #000000; }

/* --- Route SVG Map --- */
.route-map,
.route-map-multi {
  width: 100%;
  border: 2px solid #000000;
  border-radius: 0.75rem;
  background: #dceeff;
  overflow: hidden;
}
.route-map svg,
.route-map-multi svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Leaflet overrides --- */
.leaflet-container {
  font-family: 'Inter', sans-serif;
  background: #dceeff;
}
.leaflet-control-zoom a {
  border: 2px solid #000000 !important;
  border-radius: 0.5rem !important;
  font-weight: 700;
  color: #000000;
}
.leaflet-popup-content-wrapper {
  border: 2px solid #000000;
  border-radius: 0.75rem;
  box-shadow: 3px 3px 0px 0px #000000;
}
.leaflet-popup-tip {
  border-top-color: #000000;
}

.brutalist-tooltip {
  background: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 0.5rem;
  font-family: 'Bowlby One SC', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 8px;
  box-shadow: 2px 2px 0px 0px #4da2ff;
}
.brutalist-tooltip::before {
  border-top-color: #000000;
}

/* --- Pagination --- */
.page-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  border-radius: 0.5rem;
  font-family: 'Bowlby One SC', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #000000;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.page-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px 0px #000000;
}
.page-btn.active {
  background: #ffd731;
  color: #000000;
}

/* --- Toast --- */
.toast-notification {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
}
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

/* --- Tracking pulse --- */
.tracking-pulse {
  animation: track-pulse 2s ease-out infinite;
}
@keyframes track-pulse {
  0% { opacity: 0.2; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* --- Sticker decorations (decorative dots scattered on sections) --- */
.sticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: 1.5px solid #000000;
  position: absolute;
  pointer-events: none;
  animation: sticker-bob 4s ease-in-out infinite;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #dceeff; }
::-webkit-scrollbar-thumb {
  background: #4da2ff;
  border: 2px solid #000000;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: #3b8ae6; }

/* --- Selection --- */
::selection {
  background: #ffd731;
  color: #000000;
}

/* --- Focus ring --- */
input:focus, button:focus-visible {
  outline: 3px solid #4da2ff;
  outline-offset: 2px;
}