:root {
  --frosted-glass-bg-light: rgba(255, 255, 255, 0.5);
  --frosted-glass-bg-dark: rgba(33, 37, 41, 0.5);
  --frosted-glass-blur: 30px;
  --frosted-glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --bs-letter-spacing-sm: 1px;
  --bs-letter-spacing-md: 2px;
  --bs-letter-spacing-lg: 4px;
}

body {
  padding-top: 0;
  background-color: #fff;
}

[data-bs-theme="dark"] body {
  background-color: #212529;
}

.letter-spacing-sm {
  letter-spacing: var(--bs-letter-spacing-sm);
}

.letter-spacing-md {
  letter-spacing: var(--bs-letter-spacing-md);
}

.letter-spacing-lg {
  letter-spacing: var(--bs-letter-spacing-lg);
}

/* Navbar and hero container solid backgrounds */
.navbar {
  background-color: #ffffff;
}

#heroContainer {
  background-color: #ffffff;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] #heroContainer {
  background-color: #000000;
}

.navbar-brand {
}

.logo-light {
  display: inline-block;
}

.logo-dark {
  display: none;
}

[data-bs-theme="dark"] .logo-light {
  display: none;
}

[data-bs-theme="dark"] .logo-dark {
  display: inline-block;
}

.fixed-top-container {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--frosted-glass-bg-light);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    var(--frosted-glass-bg-light)
  );
  backdrop-filter: blur(var(--frosted-glass-blur));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur));
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    transform 0.3s ease-out;
  will-change: transform, opacity;
}

.fixed-top-container.hiding {
  transition:
    transform 0.2s ease-out,
    opacity 0.15s ease-out;
}

.fixed-top-container.revealing {
  transition: none !important;
}

[data-bs-theme="dark"] .fixed-top-container {
  background-color: var(--frosted-glass-bg-dark);
  background-image: linear-gradient(
    to bottom,
    rgba(33, 37, 41, 0.9),
    var(--frosted-glass-bg-dark)
  );
}

/* Styles for top section visibility */
.top-section-hidden {
  transform: translateY(-100%);
  pointer-events: none; /* prevent interaction when hidden */
}

.top-section-visible {
  transform: translateY(0);
}

/* Apply transition to the card container for smooth movement */
#card-container-component {
  transition: transform 0.3s ease-out; /* Match top section's animation */
}

/* Class to shift card container up */
.cards-shifted-up {
  transform: translateY(calc(-1 * var(--top-section-height, 0px)));
}

/* Class to ensure card container is in its default place */
.cards-in-place {
  transform: translateY(0);
}

/* Class to condense CardContainer's bottom margin when TopSection is hidden and BottomSection is static */
.card-container-condensed-bottom {
  margin-bottom: 0 !important; /* Adjust this value if needed, e.g., to a small positive value or target padding */
}

.card-container {
  padding: 15px;
}

/* Bottom section styles */
.bottom-section {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 666;
  background-color: var(--frosted-glass-bg-light);
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.9),
    var(--frosted-glass-bg-light)
  );
  backdrop-filter: blur(var(--frosted-glass-blur));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur));
  transition:
    all 0.3s ease,
    transform 0.3s ease-out !important;
}

/* When bottom section becomes unfixed */
.bottom-section.position-static {
  position: static !important;
  transform: none !important;
}

/* Container for cards and bottom section */
#mainContentWrapper {
  position: relative;
}

/* Footer container styles */
#footerContainer {
  position: relative;
  margin-top: 0;
}

/* Add a placeholder div that takes up space when bottom section is fixed */
#bottomSectionPlaceholder {
  display: none;
}
#bottomSectionPlaceholder.visible {
  display: block;
}

/* dark mode adjustments */
[data-bs-theme="dark"] .bottom-section {
  background-color: var(--frosted-glass-bg-dark);
  background-image: linear-gradient(
    to top,
    rgba(33, 37, 41, 0.9),
    var(--frosted-glass-bg-dark)
  );
}

[data-bs-theme="light"] .bottom-section {
  background-color: var(--frosted-glass-bg-light);
}

.slider-container {
  padding: 20px 15px;
  background: transparent;
}

/* transparent table styles */
.table-transparent {
  background-color: transparent !important;
}

.table-transparent thead th,
.table-transparent tbody td,
.table-transparent tbody tr.table-active {
  background-color: transparent !important;
}

#bottomEditorSection p {
  font-size: 0.875em;
}

#lastCardMessageDisplay {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

/* When lh-sm is applied to any element, reduce the line height */
.lh-sm {
  line-height: 1.2;
}

/* Remove margin from elements with mb-0 class */
.mb-0 {
  margin-bottom: 0;
}

/* Add max-width constraints for larger screens */
@media (min-width: 768px) {
  .card-wrapper {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fix for date input alignment in Safari */
input[type="date"] {
  text-align: left !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  direction: ltr !important;
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0.75rem !important;
  }
}

/* Additional specific styling for our date input */
.date-input-left::-webkit-date-and-time-value {
  text-align: left !important;
}

.date-input-left::-webkit-datetime-edit {
  padding-left: 0 !important;
  text-align: left !important;
}

.date-input-left::-webkit-inner-spin-button,
.date-input-left::-webkit-calendar-picker-indicator {
  margin-left: auto !important;
}

/* Make date picker background transparent */
.date-input-left {
  background-color: transparent !important;
  border-color: var(--bs-border-color);
}

/* datepicker border consistency */
.date-input-left {
  border: 1px solid var(--bs-border-color) !important;
}

/* datepicker border consistency */
[data-bs-theme="light"] .date-input-left {
  border: 1px solid var(--bs-secondary) !important;
}

[data-bs-theme="dark"] .date-input-left {
  border: 1px solid var(--bs-gray-300) !important;
}

/* focus state for datepicker */
.date-input-left:focus {
  border-color: var(--bs-primary) !important;
}

/* focus state for datepicker - monochromatic */
[data-bs-theme="light"] .date-input-left:focus {
  border-color: var(--bs-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

[data-bs-theme="dark"] .date-input-left:focus {
  border-color: white !important;
  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.25) !important;
}

[data-bs-theme="dark"] .date-input-left:focus {
  border-color: var(--bs-gray-200) !important;
}

/* Class to shift bottom section up in sync with card container */
#bottomEditorSection.bottom-section-shifted-up {
  transform: translateY(calc(-1 * var(--top-section-height, 0px)));
}

/* New styles for shifting general content sections */
.content-shifted-up {
  transform: translateY(calc(-1 * var(--top-section-height, 0px)));
  transition: transform 0.3s ease-out;
}

.content-in-place {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}