/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Font family */
.font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Ensure html and body fill viewport height */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure main content area has no padding for map pages */
main.map-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Ensure the map container takes full remaining height */
main.map-container > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Important: allows flex child to shrink below content size */
}

/* Ensure nested flex containers expand properly */
main.map-container .flex-1 {
  flex: 1 1 0%;
  min-height: 0;
}

.korea-map-error-container {
  position: relative;
}

.korea-map-error-message {
  z-index: 40;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
  transform: translate(-50%, -10px);
}

.korea-map-error-message.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Hide scrollbar utility for carousels */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Turbo Frame loading state - show loading overlay */
turbo-frame[busy] .pagination-content {
  position: relative;
  opacity: 0.4;
  pointer-events: none;
}

turbo-frame[busy] .pagination-loading {
  display: flex !important;
}

.pagination-loading {
  display: none;
  background: rgba(255, 255, 255, 0.9);
}

.dark .pagination-loading {
  background: rgba(17, 24, 39, 0.9);
}

/* Spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #16a34a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.dark .loading-spinner {
  border-color: #374151;
  border-top-color: #22c55e;
}