/* Typography Strategy
--------------------------------------------------
This project primarily relies on Bootstrap 5.3.3 for its base typography.
Global font family, font sizes, line heights, and heading styles are
inherited from Bootstrap's defaults.

Custom styles in this file should generally avoid overriding these core
Bootstrap typographic elements unless for very specific, localized components.
The aim is to maintain consistency through Bootstrap's established scheme.
Refer to Bootstrap documentation for details on its typographic scale
and native font stack.
-------------------------------------------------- */
/* Sticky footer styles
-------------------------------------------------- */
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.container {
  flex: 1 0 auto;
  max-width: 960px;
  width: 100%;
  padding: 20px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

/* Enhanced footer styles for dark/light mode */
.footer {
  flex-shrink: 0;
  width: 100%;
}

/* Dark mode */
html[data-bs-theme="dark"] .footer {
  background-color: #212529 !important;
}

html[data-bs-theme="dark"] .footer-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-bs-theme="dark"] .footer-container {
  background-color: #212529 !important;
}

/* Light mode */
html[data-bs-theme="light"] .footer {
  background-color: #f5f5f5 !important;
}

html[data-bs-theme="light"] .footer-text {
  color: #6c757d !important;
}

html[data-bs-theme="light"] .footer-container {
  background-color: #f5f5f5 !important;
}

/* Basic styling for loading indicator */
.htmx-indicator{
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator{
    display: inline;
    opacity: 1;
}
.htmx-request.htmx-indicator{
    display: inline;
    opacity: 1;
}
.clickable-item {
  cursor: pointer;
}

[data-bs-theme="light"] .clickable-item:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] .clickable-item:hover {
  background-color: #2b3035;
  color: #fff;
  transform: translateX(5px);
  transition: all 0.2s ease;
}

.arrow-icon {
  transition: transform 0.3s ease;
  font-size: 1.2em;
  color: #6c757d;
}

.expanded .arrow-icon {
  transform: rotate(90deg) !important;
  color: #0d6efd !important;
}