/* ========================
   Custom theme styles beyond Tailwind
   ======================== */

/* Active state override for elements hidden with inline display:none */
#timelineContainer.active,
#yogaAlert.active,
#buildBar.active { display: block !important; }
#explainerPanel.active { display: flex !important; }

/* City search dropdown */
.city-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #0f1a3a; border: 1px solid #333;
  border-top: none; border-radius: 0 0 8px 8px;
  max-height: 200px; overflow-y: auto; z-index: 20; display: none;
}
.city-suggestions.active { display: block; }
.city-suggestion {
  padding: 10px 12px; cursor: pointer; font-size: 0.85rem;
  border-bottom: 1px solid #1e1e3a; color: #ccc;
}
.city-suggestion:hover { background: #1a3060; }

/* Date input dark theme */
.date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Planet tables */
.planet-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.planet-table th { color: #888; text-align: left; padding: 6px 8px; border-bottom: 1px solid #333; font-weight: 500; }
.planet-table td { padding: 6px 8px; border-bottom: 1px solid #1a1a30; }
.planet-table .birth-row td { color: #f0c040; }
.planet-table .transit-row td { color: #60b0ff; }

/* Yoga items */
.yoga-item {
  background: #1a1a30; border-left: 3px solid; padding: 10px 12px;
  margin-bottom: 8px; border-radius: 0 8px 8px 0; font-size: 0.82rem;
}

/* Yoga alert items */
.yoga-alert-item {
  padding: 8px 12px; margin-bottom: 6px;
  border-left: 3px solid; border-radius: 0 8px 8px 0;
  font-size: 0.78rem; background: #1a1a30;
}

/* Trikona buttons */
.trikona-btn {
  padding: 8px 18px; border-radius: 8px; border: 1.5px solid #333;
  background: #1a1a2e; color: #888; font-size: 0.8rem;
  cursor: pointer; transition: all 0.25s;
}
.trikona-btn.active {
  border-color: var(--color);
  color: var(--color);
  background: var(--bg);
  box-shadow: 0 0 12px var(--glow);
}
.trikona-btn:hover { border-color: var(--color, #666); color: var(--color, #aaa); }

/* Timeline */
.timeline-slider { width: 100%; accent-color: #9b4dca; }
.timeline-controls button.playing { background: #7b2d8e !important; border-color: #9b4dca !important; }

/* Build mode */
.build-dots { display: flex; gap: 5px; justify-content: center; }
.build-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a2a4a; transition: all 0.3s;
}
.build-dot.done { background: #9b4dca; }
.build-dot.current { background: #f0c040; box-shadow: 0 0 6px #f0c040; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a14; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Landing page animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(155, 77, 202, 0.2); }
  50% { box-shadow: 0 0 40px rgba(155, 77, 202, 0.4); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-fade-in { animation: fade-in-up 0.6s ease forwards; }

/* Carousel */
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Print styles */
#printContainer { display: none; }

@media print {
  body > *:not(#printContainer) { display: none !important; }
  #printContainer {
    display: block !important;
    position: absolute; left: 0; top: 0; width: 100%;
    background: white; color: black;
  }
  @page { margin: 12mm; }
}