/* ==========================================================================
   GLOBAL STYLES
   ==========================================================================

   This stylesheet provides global navigation and utility components:
   - Responsive navbar with mega menus
   - Theme toggle (light/dark mode)
   - Mobile hamburger menu
   - Scroll-to-top button
   - Info popups and modals
   - Search dropdowns (Fuse.js powered)
   - Step components (instruction/info)
   - Warning/alert boxes

   Note: Some pages override these styles (mainpage.style.css, event-timeline.css)
   Be careful when changing selectors or cascade order.
   ========================================================================== */

@import url('toast.css');

/* ==========================================================================
   1. BASE & THEME VARIABLES
   ========================================================================== */

/* Global font size scaling for responsive design */
html {
  font-size: 16px; /* Desktop base */
}

@media (max-width: 768px) {
  html {
    font-size: 15px; /* Tablet - 6.25% smaller */
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px; /* Mobile - 12.5% smaller */
  }
}

body {
  font-family: "Noto Sans KR", "Roboto", sans-serif;
}

body,
body.dark-mode {
  --footer-bg: rgba(255, 255, 255, 0.02);
  --footer-border: rgba(255, 255, 255, 0.05);
  --footer-text: rgba(255, 255, 255, 0.6);
}

body:not(.dark-mode) {
  --footer-bg: rgba(0, 0, 0, 0.02);
  --footer-border: rgba(0, 0, 0, 0.05);
  --footer-text: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   2. NAVBAR - GENERAL STYLES
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  padding: 0.5rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, sans-serif;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  gap: 1.5rem;
}

/* ==========================================================================
   3. NAVBAR - LOGO & MENU ITEMS
   ========================================================================== */

.nav-logo {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s ease;
  order: 1;
}

.nav-logo:hover {
  transform: translateY(-2px);
  color: #e0e0e0;
}

.nav-logo .material-symbols-outlined {
  font-size: 1.6rem;
}

.nav-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s ease;
}

.nav-logo:hover .nav-portrait {
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  order: 3;
  margin-left: auto;
  gap: 0.5rem;
}

.nav-item {
  position: relative;
}

.nav-links {
  color: #e0e0e0;
  text-decoration: none;
  padding: 0.6rem 1rem;
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav-links:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ==========================================================================
   4. NAVBAR - MEGA MENU
   ========================================================================== */

.mega-dropdown {
  position: static;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border-top: 2px solid #404040;
  max-height: 0;
  overflow: hidden;
}

/* Desktop only hover behavior
   On desktop (>768px): Mega menus open on hover
   On mobile (≤768px): Mega menus become accordions (click to toggle) */
@media screen and (min-width: 769px) {
  .mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 600px;
  }

  .mega-dropdown:hover > .nav-links::after {
    transform: rotate(180deg);
  }
}

.mega-menu-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  display: flex;
  gap: 2.5rem;
}

.mega-menu-column {
  flex: 1;
  min-width: 0;
}

.mega-menu-title {
  color: #909090;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 0.75rem 0;
  padding: 0 1rem;
}

.mega-menu-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  color: #e0e0e0;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-bottom: 0.2rem;
}

.mega-menu-link:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.mega-menu-link .material-symbols-outlined {
  font-size: 1.4rem;
  color: #b0b0b0;
  transition: color 0.2s ease;
}

.mega-menu-link:hover .material-symbols-outlined {
  color: #ffffff;
}

.mega-menu-link strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.1rem;
}

.mega-menu-link small {
  display: block;
  font-size: 0.75rem;
  color: #808080;
  font-weight: 400;
}

/* Arrow indicator for mega menu dropdown */
.mega-dropdown > .nav-links::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.2s ease;
}

/* ==========================================================================
   5. THEME (LIGHT & DARK)
   ========================================================================== */

/* Light Theme */
.navbar.navbar-light {
  background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.navbar.navbar-light.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar.navbar-light .nav-logo,
.navbar.navbar-light .nav-links {
  color: #2a2a2a;
}

.navbar.navbar-light .nav-links:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

.navbar.navbar-light .nav-portrait {
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar.navbar-light .nav-logo:hover .nav-portrait {
  border-color: rgba(0, 0, 0, 0.3);
}

.navbar.navbar-light .mega-menu {
  background: #f5f5f5;
  border-top: 2px solid #d0d0d0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.navbar.navbar-light .mega-menu-title {
  color: #666666;
}

.navbar.navbar-light .mega-menu-link {
  color: #2a2a2a;
}

.navbar.navbar-light .mega-menu-link:hover {
  background: rgba(0, 0, 0, 0.06);
}

.navbar.navbar-light .mega-menu-link .material-symbols-outlined {
  color: #666666;
}

.navbar.navbar-light .mega-menu-link:hover .material-symbols-outlined {
  color: #1a1a1a;
}

.navbar.navbar-light .mega-menu-link strong {
  color: #1a1a1a;
}

.navbar.navbar-light .mega-menu-link small {
  color: #707070;
}

.navbar.navbar-light .menu-icon {
  color: #2a2a2a;
}

/* Theme Toggle Button
   Switches between light and dark mode
   Theme preference is saved to localStorage via global.script.js */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #ffffff;
  min-width: 40px;
  min-height: 40px;
  order: 2;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.navbar.navbar-light .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #2a2a2a;
}

.navbar.navbar-light .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Theme Icon Visibility */
.theme-icon-hidden {
  display: none;
}

body:not(.dark-mode) .theme-icon-sun {
  display: block;
}

body:not(.dark-mode) .theme-icon-moon {
  display: none;
}

body.dark-mode .theme-icon-sun {
  display: none;
}

body.dark-mode .theme-icon-moon {
  display: block;
}

/* ==========================================================================
   6. MOBILE & RESPONSIVE STYLES
   ========================================================================== */

/* Hamburger Menu Icon (visible on mobile ≤768px)
   Toggles navigation menu visibility
   Animated rotation when active (90deg) */
.menu-icon {
  display: none;
  cursor: pointer;
  color: #ffffff;
  order: 4;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.3s ease;
}

.menu-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-icon.active {
  transform: rotate(90deg);
}

/* Mobile Responsive Styles (≤768px)
   Key behaviors:
   - Navbar uses flexbox with flex-wrap to stack menu below
   - Hamburger icon appears (order: logo → theme → hamburger → menu)
   - Mega menus become accordions (click to expand/collapse)
   - Navigation menu uses max-height transition for smooth animation */
@media screen and (max-width: 768px) {
  .navbar {
    padding: 0.75rem 1rem;
  }

  .nav-container {
    flex-wrap: wrap;
    gap: 0.15rem;
  }

  .nav-logo {
    order: 1;
    font-size: 1.2rem;
  }

  .nav-portrait {
    width: 32px;
    height: 32px;
  }

  .nav-logo .material-symbols-outlined {
    font-size: 1.5rem;
  }

  .theme-toggle {
    order: 2;
    padding: 0.5rem;
    min-width: 40px;
    min-height: 40px;
  }

  .menu-icon {
    display: block;
    order: 3;
    margin-left: auto;
  }

  .nav-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    width: 100%;
    flex-direction: column;
    order: 4;
    margin-left: 0;
    gap: 0;
  }

  .nav-menu.active {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding-top: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .nav-item {
    margin: 0;
  }

  .nav-links {
    padding: 0.875rem 1rem;
    border-radius: 0;
  }

  /* Mobile mega menu becomes an accordion */
  .mega-dropdown {
    position: relative;
  }

  .mega-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: none;
    background: rgba(0, 0, 0, 0.2);
    margin-top: 0;
  }

  .navbar.navbar-light .mega-menu {
    background: rgba(0, 0, 0, 0.03);
  }

  .mega-dropdown.active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 1000px;
  }

  .mega-menu-content {
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0;
  }

  .mega-menu-title {
    padding: 0.5rem 1.5rem;
    font-size: 0.7rem;
    margin: 0.5rem 0 0.25rem 0;
  }

  .mega-menu-link {
    padding: 0.75rem 1.5rem;
    gap: 0.75rem;
  }

  .mega-menu-link:hover {
    transform: none;
  }

  .mega-menu-link .material-symbols-outlined {
    font-size: 1.3rem;
  }

  .mega-menu-link strong {
    font-size: 0.9rem;
  }

  .mega-menu-link small {
    font-size: 0.75rem;
  }

  /* Arrow rotation on mobile */
  .mega-dropdown > .nav-links::after {
    transition: transform 0.2s ease;
  }

  .mega-dropdown.active > .nav-links::after {
    transform: rotate(180deg);
  }
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--footer-bg);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
  text-align: center;
  padding: 1rem 0;
  margin-top: 4rem;
}

/* ==========================================================================
   8. GLOBAL UTILITY COMPONENTS
   ==========================================================================

   These components are available globally across all pages.
   Usage: Simply add the HTML structure and functionality is automatic.
   Styling is consistent but can be overridden in page-specific CSS.
   ========================================================================== */

/* --- Scroll to Top Button ---
   Usage: Add button with .scroll-to-top class to any page
   Auto-shows when scrolled >300px (handled by global.script.js)
   Note: Some pages override this (event-timeline.css) */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: linear-gradient(135deg, #7289da, #43b581);
  color: white;
  border: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
}

.scroll-to-top:not(.hidden),
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
}

.scroll-to-top:active {
  transform: translateY(-2px);
}

.scroll-to-top i {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-to-top:hover i {
  transform: translateY(-3px);
}

/* Let the scroll-to-top button animate instead of disappearing */
.scroll-to-top.hidden {
  /* cancel the global .hidden display:none for this component only */
  display: flex !important;

  /* animate to the "hidden" state instead of popping out */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  pointer-events: none; /* prevents clicks while hidden */
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: none;
  }
}

/* --- Info Button ---
   Usage: <button class="info-button"><i class="material-symbols-outlined">info</i></button>
   Inline variant: Add .info-button-inline for smaller buttons in page titles */
#info-button,
.info-button {
  background: none;
  border: none;
  color: #7289da;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inline variant for smaller buttons in page titles */
.info-button-inline {
  font-size: 0.7em;
  padding: 0.25rem;
}

#info-button:hover,
.info-button:hover {
  color: #8ea1e1;
  background: rgba(114, 137, 218, 0.1);
  transform: scale(1.1) rotate(15deg);
}

#info-button:focus,
.info-button:focus {
  outline: 2px solid #7289da;
  outline-offset: 2px;
}

/* --- Info Popup (Modal) ---
   Usage: Create overlay with .info-popup, add .visible class to show
   Contains .info-popup-content with .popup-header and .popup-body
   Used for help dialogs, instructions, and feature explanations */
#info-popup,
.info-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#info-popup.visible,
.info-popup.visible {
  opacity: 1;
  visibility: visible;
}

.info-popup-content {
  background: #2f3136;
  border: 1px solid #4f545c;
  border-radius: 1rem;
  max-width: 37.5rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
  animation: popup-scale-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

@keyframes popup-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #4f545c;
  background: linear-gradient(135deg, #202225 0%, #2f3136 100%);
  border-radius: 1rem 1rem 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.popup-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #8ea1e1;
}

.close-popup-btn {
  background: #3d4148;
  border: 1px solid #4f545c;
  color: #b9bbbe;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.close-popup-btn:hover {
  color: #ffffff;
  background: #f04747;
  border-color: #f04747;
  transform: rotate(90deg);
}

.popup-body {
  padding: 1.5rem;
  text-align: left;
}

.info-popup-content p {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
  color: #b9bbbe;
}

.info-popup-content strong {
  color: #ffffff;
  font-weight: 600;
}

/* Light Mode Info Popup */
body:not(.dark-mode) .info-popup {
  background: rgba(0, 0, 0, 0.5);
}

body:not(.dark-mode) .info-popup-content {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

body:not(.dark-mode) .popup-header {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  border-bottom: 1px solid #e0e0e0;
}

body:not(.dark-mode) .popup-header h2 {
  color: #0071eb;
}

body:not(.dark-mode) .close-popup-btn {
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  color: #666666;
}

body:not(.dark-mode) .close-popup-btn:hover {
  color: #ffffff;
  background: #f04747;
  border-color: #f04747;
}

body:not(.dark-mode) .info-popup-content p {
  color: #4a4a4a;
}

body:not(.dark-mode) .info-popup-content strong {
  color: #1a1a1a;
}

/* --- Dropdown Container (for Fuse.js search) ---
   Usage: Wrap search input in .dropdown-container
   Results shown in .dropdown-content with fuzzy match highlighting
   Fuse.js must be loaded globally (via default.html) */
.dropdown-container {
  position: relative;
  width: 100%;
}

.dropdown-container input {
  font-size: 1rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 2px solid #4f545c;
  background-color: #3d4148;
  color: #dcddde;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.dropdown-container input:hover {
  border-color: #5c6067;
  background-color: #2f3136;
}

.dropdown-container input:focus {
  outline: none;
  border-color: #7289da;
  box-shadow: 0 0 0 3px rgba(114, 137, 218, 0.2);
  transform: translateY(-1px);
}

.dropdown-container input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-container input::placeholder {
  color: #8e9297;
}

.dropdown-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #b9bbbe;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-container input:focus + .dropdown-icon {
  transform: translateY(-50%) rotate(180deg);
  color: #7289da;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3d4148;
  width: 100%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  z-index: 100;
  max-height: 18.75rem;
  overflow-y: auto;
  border: 1px solid #4f545c;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  animation: dropdown-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-content a {
  color: #dcddde;
  padding: 0.875rem 1rem;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent;
}

.dropdown-content a:hover {
  background: linear-gradient(
    90deg,
    rgba(114, 137, 218, 0.2) 0%,
    transparent 100%
  );
  color: #ffffff;
  border-left-color: #7289da;
  padding-left: 1.25rem;
}

.dropdown-content a:focus {
  outline: 2px solid #7289da;
  outline-offset: -2px;
}

.dropdown-content .no-results {
  color: #72767d;
  padding: 1.5rem;
  text-align: center;
  font-style: italic;
}

.dropdown-content a mark {
  background-color: #7289da;
  color: white;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

/* Light Mode Dropdown */
body:not(.dark-mode) .dropdown-container input {
  border: 2px solid #d0d0d0;
  background-color: #ffffff;
  color: #1a1a1a;
}

body:not(.dark-mode) .dropdown-container input:hover {
  border-color: #b0b0b0;
  background-color: #f8f9fa;
}

body:not(.dark-mode) .dropdown-container input:focus {
  border-color: #0071eb;
  box-shadow: 0 0 0 3px rgba(0, 113, 235, 0.1);
}

body:not(.dark-mode) .dropdown-container input::placeholder {
  color: #999999;
}

body:not(.dark-mode) .dropdown-icon {
  color: #666666;
}

body:not(.dark-mode) .dropdown-container input:focus + .dropdown-icon {
  color: #0071eb;
}

body:not(.dark-mode) .dropdown-content {
  background-color: #ffffff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
}

body:not(.dark-mode) .dropdown-content a {
  color: #1a1a1a;
}

body:not(.dark-mode) .dropdown-content a:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 113, 235, 0.08) 0%,
    transparent 100%
  );
  color: #0071eb;
  border-left-color: #0071eb;
}

body:not(.dark-mode) .dropdown-content .no-results {
  color: #999999;
}

body:not(.dark-mode) .dropdown-content a mark {
  background-color: #0071eb;
  color: white;
}

/* ==========================================================================
   9. STEP COMPONENTS (Unified Info Steps)
   ==========================================================================

   Unified step component that supports both numbered and icon-based displays:
   - Use .info-step as container
   - Use .info-icon as badge (works for numbers, Font Awesome icons, Material Icons)
   - Use .info-content for text content

   Example usage:
   <div class="info-step">
     <div class="info-icon">1</div>  <!-- Number -->
     <div class="info-content">
       <h3>Step Title</h3>
       <p>Description</p>
     </div>
   </div>

   <div class="info-step">
     <div class="info-icon"><i class="fas fa-star"></i></div>  <!-- Icon -->
     <div class="info-content">...</div>
   </div>
   ========================================================================== */

/* Step container */
.info-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #3d4148;
  border-radius: 0.5rem;
  border-left: 3px solid #7289da;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-step:hover {
  transform: translateX(4px);
  border-left-color: #43b581;
}

/* Step badge (works for both numbers and icons) */
.info-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #7289da, #5b6eae);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* Step content */
.info-content {
  text-align: left;
  flex: 1;
}

.info-content h3 {
  text-align: left;
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.info-content p {
  margin: 0;
  color: #b9bbbe;
  font-size: 0.9375rem;
  text-align: left;
  line-height: 1.6;
}

/* Light Mode Step Components */
body:not(.dark-mode) .info-step {
  background: #f8f9fa;
  border-left: 3px solid #0071eb;
}

body:not(.dark-mode) .info-step:hover {
  border-left-color: #43b581;
  background: #ffffff;
}

body:not(.dark-mode) .info-icon {
  background: linear-gradient(135deg, #0071eb, #4da3ff);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 113, 235, 0.2);
}

body:not(.dark-mode) .info-content h3 {
  color: #1a1a1a;
}

body:not(.dark-mode) .info-content p {
  color: #4a4a4a;
}

/* ==========================================================================
   10. WARNING & ALERT COMPONENTS
   ==========================================================================

   Usage: Add .warning-box for important notices and cautions
   Contains icon (<i>) + content (<div>) with <strong> title + <p> description
   Orange color scheme indicates caution but not critical errors
   ========================================================================== */

/* Warning box - for important notices and alerts */
.warning-box {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(250, 166, 26, 0.1);
  border: 1px solid #faa61a;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  text-align: left;
  align-items: flex-start;
}

.warning-box i {
  color: #faa61a;
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.warning-box div {
  text-align: left;
  flex: 1;
}

.warning-box strong {
  color: #faa61a;
  display: block;
  margin-bottom: 0.5rem;
  text-align: left;
  font-size: 1rem;
}

.warning-box p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  color: #dcddde;
}

/* Light Mode Warning Box */
body:not(.dark-mode) .warning-box {
  background: rgba(250, 166, 26, 0.08);
  border: 1px solid rgba(250, 166, 26, 0.5);
}

body:not(.dark-mode) .warning-box i {
  color: #d68910;
}

body:not(.dark-mode) .warning-box strong {
  color: #d68910;
}

body:not(.dark-mode) .warning-box p {
  color: #4a4a4a;
}

/* ==========================================================================
   11. TOOLTIP BUBBLE COMPONENT
   ==========================================================================

   Usage: Toggle tooltip with button click
   Example:
   <button class="tooltip-toggle-button" data-tooltip-target="myTooltip">
     <span class="material-symbols-outlined">help</span>
   </button>
   <div class="info-tooltip" id="myTooltip">
     <div class="tooltip-content">
       <h4>Title</h4>
       <p>Content here...</p>
     </div>
   </div>
   ========================================================================== */

.tooltip-toggle-button {
  background: #e0e0e0;
  color: #424242;
  border: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

body.dark-mode .tooltip-toggle-button {
  background: #616161;
  color: #212121;
}

.tooltip-toggle-button .material-symbols-outlined {
  font-size: 1.25rem;
}

.tooltip-toggle-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .tooltip-toggle-button:hover {
  background: #757575;
}

.info-tooltip {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--primary-color);
  border-radius: 0.75rem;
  padding: 0;
  margin-bottom: 0;
  box-shadow: 0 4px 12px var(--shadow-color);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease, max-height 0.4s ease;
}

.info-tooltip.visible {
  max-height: 500px;
  opacity: 1;
  padding: 1rem;
  margin-bottom: 1rem;
}

.tooltip-content h4 {
  color: var(--primary-color);
  margin: 0 0 0.75rem 0;
  font-size: 1.1em;
}

.tooltip-content p {
  margin: 0.5rem 0;
  color: var(--text-primary);
  font-size: 0.9em;
  line-height: 1.5;
}

.tooltip-content strong {
  color: var(--primary-color);
}

/* Tooltip formula display styles */
.tooltip-formula {
  background: var(--section-bg);
  padding: 0.75rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--primary-color);
  margin: 1rem 0;
}

.tooltip-details {
  background: var(--section-bg);
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}

.tooltip-details p {
  margin: 0.375rem 0;
  padding-left: 0.5rem;
}

.tooltip-note {
  font-size: 0.85em;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.75rem;
}

/* Light Mode Tooltip */
body:not(.dark-mode) .tooltip-toggle-button {
  background: var(--primary-color);
}

body:not(.dark-mode) .info-tooltip {
  background: var(--card-bg);
  border-color: var(--primary-color);
}

body:not(.dark-mode) .tooltip-content h4 {
  color: var(--primary-color);
}

body:not(.dark-mode) .tooltip-content p {
  color: var(--text-primary);
}

/* --- Utility Classes --- */
.no-scroll {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* --- Mobile Responsive (Global Components) ---
   Adjustments for utility components on mobile devices */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
  }

  .info-popup {
    align-items: flex-start;
    padding: 0;
  }

  .info-popup-content {
    max-height: 90vh;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 5vh;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
  }

  .popup-header {
    padding: 1rem;
  }

  .popup-body {
    padding: 1rem;
  }

  .dropdown-container {
    width: 100%;
  }
}

/* Small mobile devices (≤480px)
   Further reductions in size and spacing */
@media (max-width: 480px) {
  .info-popup-content {
    width: calc(100% - 1rem);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 3vh;
    margin-bottom: 0.5rem;
    max-height: 94vh;
  }

  .popup-header {
    padding: 0.5rem 1rem;
  }

  .popup-header h2 {
    font-size: 1rem;
  }

  .popup-body {
    padding: 0.5rem 1rem;
  }

  /* Step components mobile adjustments */
  .info-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  .info-content h3 {
    font-size: 0.9375rem;
  }

  .info-content p {
    font-size: 0.875rem;
  }

  .info-step {
    padding: 0.5rem;
    margin-bottom: 1rem;
  }

  /* Warning box mobile adjustments */
  .warning-box {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .warning-box i {
    font-size: 1.25rem;
  }
}