/* BestCalculator Shared Styles - Used by all calculators */
/* Font: Outfit (consistent across all pages) */

/* Base font - Outfit for all elements */
/* Improved fallback stack with similar metrics to Outfit */
* {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Dark Mode Toggle Override - Remove blue focus and checked states */
#darkSwitch:focus + div,
#darkSwitch:focus-visible + div {
  outline: none;
}
#darkSwitch:focus,
#darkSwitch:focus-visible {
  outline: none;
}
label[for="darkSwitch"]:focus,
label[for="darkSwitch"]:focus-visible {
  outline: none;
}
label[for="darkSwitch"]:focus-within {
  outline: none;
}
/* Dark mode toggle - ensure no blue background when checked */
#darkSwitch:checked + div {
  background: transparent !important;
}
#darkSwitch:checked + div:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
.dark #darkSwitch:checked + div:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Hide Scrollbar for all browsers (consistent with calculators) */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* ============================================
   Mobile Header Styles - Icon Visibility & Sizing
   ============================================ */

/* Ensure all header buttons are exactly the same size - Critical fix */
/* High specificity to override Tailwind and any other styles */
header#mainHeader #mobileSearchBtn,
header#mainHeader #mobileSearchCloseBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Dark mode label wrapper - must match button size exactly */
header#mainHeader label[for="darkSwitch"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

/* Dark mode inner div - must match button size exactly */
header#mainHeader label[for="darkSwitch"] > div {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Ensure the hidden checkbox doesn't affect layout */
header#mainHeader #darkSwitch.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* Mobile Search Button - Proper sizing (not too big) - Override Tailwind w-9 h-9 */
#mobileSearchBtn,
#mobileSearchCloseBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Override Tailwind w-9 and h-9 classes specifically for these buttons */
#mobileSearchBtn.w-9,
#mobileSearchBtn.h-9,
#mobileSearchCloseBtn.w-9,
#mobileSearchCloseBtn.h-9 {
  width: 36px !important;
  height: 36px !important;
}

/* Mobile Search Button Icons - Visible and properly sized */
#mobileSearchBtn svg,
#mobileSearchCloseBtn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#mobileSearchBtn svg path,
#mobileSearchCloseBtn svg path {
  stroke: #a3a3a3 !important; /* neutral-400 */
  stroke-width: 1.5 !important;
  fill: none !important;
  transition: stroke 0.2s !important;
  vector-effect: non-scaling-stroke !important;
}

.dark #mobileSearchBtn svg path,
.dark #mobileSearchCloseBtn svg path {
  stroke: #a3a3a3 !important; /* neutral-400 - visible in dark mode */
}

#mobileSearchBtn:hover svg path,
#mobileSearchCloseBtn:hover svg path {
  stroke: #1d4ed8 !important; /* blue-700 */
}

.dark #mobileSearchBtn:hover svg path,
.dark #mobileSearchCloseBtn:hover svg path {
  stroke: #60a5fa !important; /* blue-400 */
}

/* Dark Mode Toggle Button - Match exact size of other header buttons - Override Tailwind */
label[for="darkSwitch"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(36px) !important;
  height: calc(36px) !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  /* Remove any default label styles */
  font-size: 0 !important;
  text-indent: 0 !important;
  /* Ensure no extra spacing */
  gap: 0 !important;
}

/* Override Tailwind w-9 and h-9 on the inner div - Must match search buttons exactly */
label[for="darkSwitch"] > div {
  width: calc(36px) !important;
  height: calc(36px) !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  /* Ensure no gap or spacing */
  gap: 0 !important;
}

/* Override Tailwind classes specifically with higher specificity */
label[for="darkSwitch"] > div.w-9,
label[for="darkSwitch"] > div.h-9,
label[for="darkSwitch"].w-9 > div,
label[for="darkSwitch"].h-9 > div {
  width: calc(36px) !important;
  height: calc(36px) !important;
}

/* Dark Mode Toggle Icon - Visible and properly sized */
label[for="darkSwitch"] svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* All dark mode toggle icon paths - ensure visibility */
label[for="darkSwitch"] svg path {
  stroke-width: 1.5 !important;
  fill: none !important;
  transition: stroke 0.2s !important;
  stroke: #a3a3a3 !important; /* neutral-400 - default for light mode */
  vector-effect: non-scaling-stroke !important;
}

/* Dark mode - use visible color */
.dark label[for="darkSwitch"] svg path {
  stroke: #a3a3a3 !important; /* neutral-400 - visible in dark mode */
}

/* Hover states */
label[for="darkSwitch"]:hover svg path {
  stroke: #1d4ed8 !important; /* blue-700 */
}

.dark label[for="darkSwitch"]:hover svg path {
  stroke: #60a5fa !important; /* blue-400 */
}

/* Logo text sizing for mobile - ensure readability */
#logoLink {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.125rem !important;
}

#logoLink span {
  font-size: 0.875rem !important; /* text-sm - 14px minimum on mobile */
  line-height: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

@media (min-width: 1025px) {
  #logoLink span {
    font-size: 1rem !important; /* text-base - 16px on desktop */
  }
}

@media (min-width: 1024px) {
  #logoLink span {
    font-size: 1.125rem !important; /* text-lg - 18px on lg+ */
  }
}

/* Header button borders - ensure visibility and consistent sizing */
/* Force exact same dimensions for all header buttons - CRITICAL: All must be identical */
header#mainHeader #mobileSearchBtn,
header#mainHeader #mobileSearchCloseBtn,
header#mainHeader label[for="darkSwitch"] > div {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #d4d4d4 !important; /* neutral-300 */
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  /* CRITICAL: Force exact same size - 36px including border */
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  /* Ensure identical flex properties */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 36px !important;
}

.dark header#mainHeader #mobileSearchBtn,
.dark header#mainHeader #mobileSearchCloseBtn,
.dark header#mainHeader label[for="darkSwitch"] > div {
  border-color: #404040 !important; /* neutral-700 - better visibility in dark mode */
}

header#mainHeader #mobileSearchBtn:hover,
header#mainHeader #mobileSearchCloseBtn:hover,
header#mainHeader label[for="darkSwitch"]:hover > div {
  border-color: #1d4ed8 !important; /* blue-700 */
}

.dark header#mainHeader #mobileSearchBtn:hover,
.dark header#mainHeader #mobileSearchCloseBtn:hover,
.dark header#mainHeader label[for="darkSwitch"]:hover > div {
  border-color: #60a5fa !important; /* blue-400 */
}

/* ========================================
   CRITICAL: Constrain search bar and container in 768px-1023px range
   Shorten the container to prevent search bar from covering close button
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* CRITICAL: Override Tailwind gap classes (gap-4 md:gap-6) which set 24px gap at md breakpoint */
  /* Constrain the container that holds search bar and buttons - balance between search bar, close button, and dark mode button */
  header#mainHeader > div:last-child,
  header#mainHeader > div.flex.items-center.gap-4,
  header#mainHeader > div.flex.items-center.gap-4.md\:gap-6 {
    max-width: 140px !important; /* Fits: search bar (32px) + gap (8px) + close button (36px) + gap (8px) + dark mode (36px) = 120px, with buffer */
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 0.5rem !important; /* Override md:gap-6 (24px) - use 8px instead */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    flex-shrink: 1 !important; /* Allow container to shrink */
  }
  
  /* Make search bar VERY SMALL - override ALL Tailwind classes (w-48, md:w-64) */
  /* Use flex: 0 0 to prevent expansion or shrinking - fixed size */
  header form#searchForm,
  header #searchForm,
  header form#searchForm.w-48,
  header form#searchForm.md\:w-64,
  header #searchForm.w-48,
  header #searchForm.md\:w-64,
  form#searchForm,
  #searchForm,
  form#searchForm.w-48,
  form#searchForm.md\:w-64,
  #searchForm.w-48,
  #searchForm.md\:w-64 {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important; /* Don't grow, don't shrink, fixed at 32px */
    flex-basis: 32px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Remove ALL padding from input - make it fit exactly in 32px form */
  #searchInput {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 0 !important;
    padding-left: 0.25rem !important; /* Minimal padding for icon */
    padding-right: 0 !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Make search icon tiny and position it absolutely */
  #searchForm svg {
    width: 8px !important;
    height: 8px !important;
    left: 0.25rem !important;
    pointer-events: none !important;
  }
  
  /* Ensure close button and dark mode button have space and don't get covered */
  /* Use flex: 0 0 to prevent shrinking or growing */
  #mobileSearchCloseBtn {
    flex: 0 0 36px !important; /* Don't grow, don't shrink, fixed at 36px */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 36px !important; /* w-9 = 36px */
    max-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  #darkSwitch,
  label[for="darkSwitch"] {
    flex: 0 0 36px !important; /* Don't grow, don't shrink, fixed at 36px */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 36px !important; /* w-9 = 36px */
    max-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Ensure the label container doesn't expand */
  label[for="darkSwitch"] {
    display: inline-flex !important;
    box-sizing: border-box !important;
  }
}

/* Hide search bar completely below 768px */
@media (max-width: 767px) {
  header form#searchForm,
  header #searchForm,
  form#searchForm,
  #searchForm {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
  }
}

/* Duplicate rule removed - handled by the rule above */

/* Desktop: Hide mobile search button and close button, show desktop search bar */
@media (min-width: 1024px) {
  #mobileSearchBtn,
  #mobileSearchCloseBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
  #mobileSearchForm {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
  }
  #searchForm,
  #searchForm.search-form-desktop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    width: 240px !important; /* Increased from 160px for better usability */
    min-width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    transform: scale(1) !important;
    overflow: visible !important;
    clip: auto !important;
  }
  
  /* Match search bar height to dark mode button (36px) and border style */
  #searchInput {
    height: 36px !important; /* Match dark mode button height (w-9 h-9 = 36px) */
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1.25rem !important; /* Ensure text is vertically centered */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    /* Keep original padding-left (pl-10 = 2.5rem) and padding-right (pr-4 = 1rem) from HTML */
    border: 1px solid !important;
    border-color: #d4d4d4 !important; /* border-neutral-300 */
    border-radius: 0 !important; /* rounded-none to match dark mode button */
  }
  
  /* Dark mode border color */
  .dark #searchInput {
    border-color: #262626 !important; /* dark:border-neutral-800 */
  }
  
  /* Focus border colors to match dark mode button hover */
  #searchInput:focus {
    border-color: #1d4ed8 !important; /* focus:border-blue-700 */
  }
  
  .dark #searchInput:focus {
    border-color: #60a5fa !important; /* dark:focus:border-blue-400 */
  }
  
  /* Keep original icon positioning - revert to left-3 (0.75rem) */
  #searchForm svg {
    /* Revert to original: left-3 = 0.75rem, keep original size w-3.5 h-3.5 = 14px */
    pointer-events: none !important; /* Prevent icon from interfering with input */
  }
  
  /* Add standardized gap between search bar and dark mode button */
  header#mainHeader > div:last-child {
    gap: 1rem !important; /* 16px standardized gap */
  }
}

/* Note: Search bar hiding for 768px-1023px is handled by the max-width: 1023px rule above */

/* Mobile: Hide desktop search bar, show mobile search button */
@media (max-width: 1023px) {
  /* Ensure header height is correct on mobile */
  header#mainHeader {
    height: 56px !important; /* matches h-14 = 56px */
    min-height: 56px !important;
    max-height: 56px !important;
  }
  
  /* Completely hide desktop search form on mobile - override Tailwind lg:block */
  /* Use more specific selectors to ensure it's hidden */
  form#searchForm,
  #searchForm,
  #searchForm.hidden,
  #searchForm.lg\:block,
  form#searchForm.lg\:block {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
  }
  
  #mobileSearchBtn {
    display: flex !important;
  }
  
  /* Mobile search form - positioned absolutely to overlay header when expanded */
  /* Ensure it's contained within the header */
  header#mainHeader {
    position: relative !important;
  }
  
  /* Mobile search form - hidden by default */
  #mobileSearchForm {
    position: absolute !important;
    left: 0 !important;
    right: 6.5rem !important; /* Leave space for close button (36px) + gap (16px) + dark mode button (36px) - balanced width */
    top: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
    display: none !important; /* Hidden by default */
    visibility: hidden !important;
    align-items: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background: white !important;
  }
  
  .dark #mobileSearchForm {
    background: black !important;
  }
  
  /* Only show when it doesn't have the hidden class */
  #mobileSearchForm:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Ensure it's hidden when it has the hidden class */
  #mobileSearchForm.hidden {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Mobile search input - reduced width to accommodate close button outside */
  #mobileSearchInput {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-left: 2.5rem !important; /* Space for search icon */
    padding-right: 0.75rem !important; /* Normal padding on right */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 36px !important;
    font-size: 13px !important;
  }
  
  /* Mobile search form search icon - left side */
  #mobileSearchForm .search-icon {
    position: absolute !important;
    left: 1.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none !important;
  }
  
  /* Mobile search close button - positioned next to dark mode button */
  /* Hidden by default - only shown when search form is active via JavaScript */
  #mobileSearchCloseBtn {
    display: none !important; /* Always hidden by default */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 36px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #d4d4d4 !important; /* neutral-300 */
  }
  
  /* Ensure close button is hidden when search form is hidden */
  #mobileSearchForm.hidden ~ div #mobileSearchCloseBtn {
    display: none !important;
  }
  
  /* Show close button only when it doesn't have the 'hidden' class AND search form is visible */
  /* JavaScript will add/remove 'hidden' class based on search form state */
  #mobileSearchForm:not(.hidden) ~ div #mobileSearchCloseBtn:not(.hidden) {
    display: flex !important;
  }
  
  .dark #mobileSearchCloseBtn {
    border-color: #404040 !important; /* neutral-700 */
  }
  
  #mobileSearchCloseBtn:hover {
    border-color: #1d4ed8 !important; /* blue-700 */
  }
  
  .dark #mobileSearchCloseBtn:hover {
    border-color: #60a5fa !important; /* blue-400 */
  }
  
  #mobileSearchCloseBtn svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  
  #mobileSearchCloseBtn svg path {
    stroke: #a3a3a3 !important; /* neutral-400 */
    stroke-width: 1.5 !important;
    fill: none !important;
    transition: stroke 0.2s !important;
    vector-effect: non-scaling-stroke !important;
  }
  
  .dark #mobileSearchCloseBtn svg path {
    stroke: #a3a3a3 !important;
  }
  
  #mobileSearchCloseBtn:hover svg path {
    stroke: #1d4ed8 !important; /* blue-700 */
  }
  
  .dark #mobileSearchCloseBtn:hover svg path {
    stroke: #60a5fa !important; /* blue-400 */
  }
  
  /* Hide logo when mobile search is active */
  #logoLink.hidden {
    display: none !important;
  }
  
  /* Standardize gap between mobile search button/close button and dark mode button */
  header#mainHeader > div:last-child {
    gap: 1rem !important; /* 16px standardized gap */
  }
}

/* Header scroll behavior - mobile only */
@media (max-width: 1024px) {
  /* Add padding to body to account for fixed header */
  body {
    padding-top: 56px !important; /* Match h-14 = 56px */
  }
  
  #mainHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
    transition: transform 0.3s ease-in-out !important;
    will-change: transform !important;
    transform: translateY(0) !important;
  }
  #mainHeader.header-hidden {
    transform: translateY(-100%) !important;
  }
}

/* Mobile-specific header height and scroll behavior */
@media (max-width: 1024px) {
  body {
    padding-top: 56px !important; /* Match h-14 = 56px */
  }
  
  /* Ensure header is fixed (not sticky) for scroll behavior to work */
  #mainHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  
  /* Override sticky class on mobile */
  #mainHeader.sticky {
    position: fixed !important;
  }
}

/* Prevent horizontal scrolling on mobile */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100%;
}
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100%;
}
main, .split-layout, .input-section, .result-section {
  max-width: 100%;
  overflow-x: hidden;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 56px);
  overflow: hidden;
}
@media (max-width: 1024px) {
  .split-layout { 
    grid-template-columns: 1fr; 
    height: auto;
    overflow: visible;
  }
}

/* Minimal Input Styles */
.minimal-input {
  border: 1px solid #d4d4d4;
  border-radius: 0;
  height: 56px;
  padding: 0 1rem;
  background: #f9fafb;
  transition: all 0.2s;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
.minimal-input::placeholder {
  color: #d4d4d4;
}
.minimal-input:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 1px #1d4ed8;
}
.dark .minimal-input {
  border-color: #262626;
  background: #0a0a0a;
  color: white;
}
.dark .minimal-input::placeholder {
  color: #525252;
}
.dark .minimal-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #60a5fa;
}

/* Hide number input spinner arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Input color rules for visibility */
input[type="number"].minimal-input,
input[type="number"] {
  color: #171717 !important;
}
.dark input[type="number"].minimal-input,
.dark input[type="number"] {
  color: white !important;
}

/* Custom select arrow for minimal-input */
select.minimal-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #f9fafb !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
  color: #171717 !important;
  margin: 0 !important;
}
select.minimal-input::-ms-expand {
  display: none !important;
}
.dark select.minimal-input {
  background-color: #171717 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  color: white !important;
}

/* Tooltip Styles */
.tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  background-color: #000000;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 0;
  width: 240px;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
  margin-bottom: 0.75rem;
  text-transform: none;
  font-weight: normal;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.dark .tooltip {
  background-color: #ffffff;
  color: #000000;
}
.dark .tooltip::after {
  border-color: #ffffff transparent transparent transparent;
}

/* Copy Button */
.copy-btn {
  padding: 0.25rem;
  color: #737373;
  transition: all 0.2s;
  border: none;
  background: transparent;
  cursor: pointer;
}
.copy-btn:hover {
  color: #000;
  transform: scale(1.1);
}
.dark .copy-btn:hover {
  color: #fff;
}
.copy-btn.copied {
  color: #22c55e;
}
.dark .copy-btn.copied {
  color: #4ade80;
}

/* Clickable result values */
.result-value {
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}
.result-value:hover {
  opacity: 0.8;
}
.dark .result-value:hover {
  opacity: 0.9;
}

/* FAQ Accordion Styles */
.faq-accordion {
  border-radius: 0;
}
.faq-item {
  border-radius: 0;
  background: transparent;
}
.faq-question {
  cursor: pointer;
  outline: none;
}
.faq-question:focus {
  outline: none;
}
.faq-question:focus-visible {
  outline: none;
}
.dark .faq-question:focus {
  outline: none;
}
.dark .faq-question:focus-visible {
  outline: none;
}
.faq-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  transition: all 0.3s ease-out;
  overflow: hidden;
  opacity: 0;
}
.faq-item[aria-expanded="true"] .faq-answer {
  max-height: 500px;
  opacity: 1;
}

/* ============================================
   Related Calculators Section - consistent across all calculator pages
   ============================================ */
#related-calculators,
.related-calculators-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  #related-calculators,
  .related-calculators-section {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}
.related-calculators-section__title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  margin-bottom: 1.5rem;
}
.dark .related-calculators-section__title {
  color: #fff;
}
.related-calculators-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.related-calculators-section__link {
  display: block;
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
  transition: border-color 0.2s, color 0.2s;
}
.dark .related-calculators-section__link {
  border-color: #262626;
}
.related-calculators-section__link:hover {
  border-color: #2563eb;
}
.dark .related-calculators-section__link:hover {
  border-color: #60a5fa;
}
.related-calculators-section__link-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: #000;
  margin-bottom: 0.25rem;
  transition: color 0.2s;
}
.dark .related-calculators-section__link-title {
  color: #fff;
}
.related-calculators-section__link:hover .related-calculators-section__link-title {
  color: #1d4ed8;
}
.dark .related-calculators-section__link:hover .related-calculators-section__link-title {
  color: #93c5fd;
}
.related-calculators-section__link-desc {
  font-size: 1rem;
  line-height: 1.625;
  color: #525252;
}
.dark .related-calculators-section__link-desc {
  color: #a3a3a3;
}

/* Constrain Related Calculators to same column width as FAQ when inside split layout left column */
.input-section > #related-calculators,
.input-section > .related-calculators-section {
  max-width: 48rem; /* same as Tailwind max-w-3xl */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Constrain footer (and its top border / divider line) to same column width when inside split layout */
.input-section > footer {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Slim Ad Card Styles - hidden until ads are needed */
.slim-ad-card {
  display: none !important;
}
.dark .slim-ad-card {
  background: #0a0a0a;
  border-color: #262626;
}
.ad-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9ca3af;
  text-transform: uppercase;
  display: none; /* Hide "Responsive Ad Space" text until ads are used */
}
.dark .ad-text {
  color: #525252;
}

/* Section Spacing */
/* Left Section */
.input-section {
  background-color: #ffffff;
  padding: 4.5rem 3rem;
  overflow-y: auto;
  height: 100%;
}
.dark .input-section {
  background-color: #000000;
  color: #cbd5e1;
}

/* Right Section */
.result-section {
  background-color: #FAFAFA;
  color: #171717;
  padding: 4.5rem 3rem 0 3rem;
  overflow-y: auto;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
}
.dark .result-section {
  background-color: #0A0A0A;
  color: #ffffff;
}

/* Mobile Result Section */
@media (max-width: 1024px) {
  .result-section:not(.mobile-result-section) {
    display: none; /* Hide desktop result section on mobile */
  }
  .mobile-result-section {
    display: block !important;
    margin: 2rem 0;
    padding: 2rem 1.5rem;
    background-color: #FAFAFA;
    height: auto !important;
    overflow: visible !important;
    flex-direction: column;
  }
  .mobile-result-section .h-full {
    height: auto !important;
  }
  .mobile-result-section .absolute {
    position: relative !important;
    inset: auto !important;
  }
  .dark .mobile-result-section {
    background-color: #0A0A0A;
  }
  .input-section {
    padding-top: 2rem !important; /* Standardized top padding for consistent title positioning (32px) */
    padding-bottom: 3rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Ensure consistent spacing from header to h1 title on mobile */
  /* Remove any margin/padding from wrapper divs that could cause inconsistency */
  .input-section > div,
  .input-section > div.max-w-3xl,
  .input-section > div.max-w-3xl.mx-auto {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Standardize h1 title position on mobile - ensure no extra margin/padding */
  .input-section h1,
  .input-section > div h1,
  .input-section > div.max-w-3xl h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Reduce font sizes for result values in mobile mode */
  .mobile-result-section .text-7xl,
  .mobile-result-section .text-6xl,
  .mobile-result-section .text-5xl {
    font-size: 2rem !important; /* text-3xl */
    line-height: 2.5rem !important;
  }
  .mobile-result-section .text-4xl {
    font-size: 1.5rem !important; /* text-2xl */
    line-height: 2rem !important;
  }
  .mobile-result-section .text-3xl {
    font-size: 1.25rem !important; /* text-xl */
    line-height: 1.75rem !important;
  }
  /* Mobile table spacing improvements */
  table th,
  table td {
    padding: 1rem 1.5rem !important;
  }
  table th {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  table td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  /* Ensure tables in colored boxes have adequate padding on mobile */
  .border[class*="border-green"],
  .border[class*="border-blue"],
  .border[class*="border-purple"] {
    padding: 1.5rem !important;
  }
  /* Mobile text size for colored boxes */
  .border[class*="border-green"] .text-sm,
  .border[class*="border-blue"] .text-sm,
  .border[class*="border-purple"] .text-sm,
  .border[class*="border-orange"] .text-sm,
  .border[class*="border-yellow"] .text-sm,
  .border[class*="border-red"] .text-sm,
  .border[class*="border-green"] p,
  .border[class*="border-blue"] p,
  .border[class*="border-purple"] p,
  .border[class*="border-orange"] p,
  .border[class*="border-yellow"] p,
  .border[class*="border-red"] p,
  .border[class*="border-green"] td,
  .border[class*="border-blue"] td,
  .border[class*="border-purple"] td,
  .border[class*="border-orange"] td,
  .border[class*="border-yellow"] td,
  .border[class*="border-red"] td,
  .border[class*="border-green"] th,
  .border[class*="border-blue"] th,
  .border[class*="border-purple"] th,
  .border[class*="border-orange"] th,
  .border[class*="border-yellow"] th,
  .border[class*="border-red"] th,
  .border[class*="border-green"] ul,
  .border[class*="border-blue"] ul,
  .border[class*="border-purple"] ul,
  .border[class*="border-orange"] ul,
  .border[class*="border-yellow"] ul,
  .border[class*="border-red"] ul,
  .border[class*="border-green"] li,
  .border[class*="border-blue"] li,
  .border[class*="border-purple"] li,
  .border[class*="border-orange"] li,
  .border[class*="border-yellow"] li,
  .border[class*="border-red"] li {
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
  }
  .border[class*="border-green"] .text-base,
  .border[class*="border-blue"] .text-base,
  .border[class*="border-purple"] .text-base,
  .border[class*="border-orange"] .text-base,
  .border[class*="border-yellow"] .text-base,
  .border[class*="border-red"] .text-base {
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
  }
  /* FAQ mobile text size */
  .faq-question span,
  .faq-question .text-sm {
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
  }
  .faq-answer,
  .faq-answer .text-base,
  .faq-answer div {
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
  }
}
@media (min-width: 1025px) {
  .mobile-result-section {
    display: none !important; /* Hide mobile result section on desktop */
  }
  .result-section:not(.mobile-result-section) {
    display: block;
  }
  .input-section {
    padding: 4.5rem 3rem;
  }
}

/* Notification System */
.notification {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 9999;
  padding: 1rem 2rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  max-width: 90%;
  text-align: center;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  border: 1px solid #000000;
  background: #000000;
  color: #ffffff;
}
.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.notification.success {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.dark .notification {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
.notification.error {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}
.dark .notification.error {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

/* Validation Error Styles */
.minimal-input.error {
  border-color: #ef4444;
}
.dark .minimal-input.error {
  border-color: #f87171;
}
.minimal-input.error:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
.dark .minimal-input.error:focus {
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
}

/* Input Label */
.input-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a3a3a3;
  font-weight: 700;
  line-height: 1.5;
}
.dark .input-label {
  color: #737373;
}

/* Result Label (for result section labels) */
.result-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #a3a3a3;
  font-weight: 700;
  line-height: 1.5;
}
.dark .result-label {
  color: #737373;
}

/* Helper Text */
.helper-text {
  font-size: 0.75rem;
  color: #737373;
  margin-top: 0.25rem;
  line-height: 1.4;
}
.dark .helper-text {
  color: #737373;
}

/* Date/Time Format Switch (shared) */
.date-format-switch-container,
.time-format-switch-container {
  display: flex;
  border: 1px solid #d4d4d4;
  background: #ffffff;
}
.dark .date-format-switch-container,
.dark .time-format-switch-container {
  border-color: #262626;
  background: #0a0a0a;
}
.date-format-switch-option,
.time-format-switch-option {
  flex: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  color: #a3a3a3;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.date-format-switch-option:hover:not(.active),
.time-format-switch-option:hover:not(.active) {
  color: #000000;
  background: #f5f5f5;
}
.dark .date-format-switch-option:hover:not(.active),
.dark .time-format-switch-option:hover:not(.active) {
  color: #ffffff;
  background: #171717;
}
.date-format-switch-option.active,
.time-format-switch-option.active {
  background: #000000;
  color: #ffffff;
}
.dark .date-format-switch-option.active,
.dark .time-format-switch-option.active {
  background: #ffffff;
  color: #000000;
}

/* Measurement System Switch */
.measurement-switch-container {
  display: flex;
  border: 1px solid #d4d4d4;
  background: #ffffff;
}
.dark .measurement-switch-container {
  border-color: #262626;
  background: #0a0a0a;
}
.measurement-switch-option {
  flex: 1;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  color: #a3a3a3;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
@media (min-width: 1025px) {
  .measurement-switch-option {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .measurement-switch-option {
    font-size: 13px;
  }
}
.measurement-switch-option:hover:not(.active) {
  color: #000000;
  background: #f5f5f5;
}
.dark .measurement-switch-option:hover:not(.active) {
  color: #ffffff;
  background: #171717;
}
.measurement-switch-option.active {
  background: #000000;
  color: #ffffff;
}
.dark .measurement-switch-option.active {
  background: #ffffff;
  color: #000000;
}

/* ============================================
   Cycle Calendar Styles - Used by Period and Ovulation Calculators
   ============================================ */

/* Cycle Calendar Phase Day Colors */
.period-day { 
  background: rgba(254, 242, 242, 0.5) !important; /* bg-red-50/50 */
  color: #B91C1C !important; /* text-red-700 - matches phase box heading */
  border: 1px solid rgb(254, 202, 202) !important; /* border-red-200 */
  font-weight: 600 !important; /* Make text bolder for better visibility */
}
.dark .period-day {
  background: rgba(69, 10, 10, 0.1) !important; /* dark:bg-red-950/10 */
  color: #F87171 !important; /* dark:text-red-400 - matches phase box heading */
  border: 1px solid rgba(127, 29, 29, 0.3) !important; /* dark:border-red-900/30 */
  font-weight: 600 !important;
}
.ovulation-day { 
  background: rgba(240, 253, 244, 0.5) !important; /* bg-green-50/50 */
  color: #15803D !important; /* text-green-700 - matches phase box heading */
  border: 1px solid rgb(187, 247, 208) !important; /* border-green-200 */
  font-weight: 600 !important;
}
.dark .ovulation-day {
  background: rgba(5, 46, 22, 0.1) !important; /* dark:bg-green-950/10 */
  color: #4ADE80 !important; /* dark:text-green-400 - matches phase box heading */
  border: 1px solid rgba(20, 83, 45, 0.3) !important; /* dark:border-green-900/30 */
  font-weight: 600 !important;
}
.fertile-day { 
  background: rgba(239, 246, 255, 0.5) !important; /* bg-blue-50/50 */
  color: #1D4ED8 !important; /* text-blue-700 - matches phase box heading */
  border: 1px solid rgb(191, 219, 254) !important; /* border-blue-200 */
  font-weight: 600 !important;
}
.dark .fertile-day {
  background: rgba(23, 37, 84, 0.1) !important; /* dark:bg-blue-950/10 */
  color: #60A5FA !important; /* dark:text-blue-400 - matches phase box heading */
  border: 1px solid rgba(30, 58, 138, 0.3) !important; /* dark:border-blue-900/30 */
  font-weight: 600 !important;
}
.luteal-day { 
  background: rgba(254, 252, 232, 0.5) !important; /* bg-yellow-50/50 */
  color: #A16207 !important; /* text-yellow-700 - matches phase box heading */
  border: 1px solid rgb(254, 240, 138) !important; /* border-yellow-200 */
  font-weight: 600 !important;
}
.dark .luteal-day {
  background: rgba(66, 32, 6, 0.1) !important; /* dark:bg-yellow-950/10 */
  color: #FACC15 !important; /* dark:text-yellow-400 - matches phase box heading */
  border: 1px solid rgba(113, 63, 18, 0.3) !important; /* dark:border-yellow-900/30 */
  font-weight: 600 !important;
}
.premenstrual-day { 
  background: rgba(250, 245, 255, 0.5) !important; /* bg-purple-50/50 */
  color: #7C3AED !important; /* text-purple-700 - matches phase box heading */
  border: 1px solid rgb(233, 213, 255) !important; /* border-purple-200 */
  font-weight: 600 !important;
}
.dark .premenstrual-day {
  background: rgba(59, 7, 100, 0.1) !important; /* dark:bg-purple-950/10 */
  color: #A78BFA !important; /* dark:text-purple-400 - matches phase box heading */
  border: 1px solid rgba(88, 28, 135, 0.3) !important; /* dark:border-purple-900/30 */
  font-weight: 600 !important;
}

/* ============================================
   Standardized Spacing Guidelines - Used by all calculators
   ============================================ */
/* 
   STANDARD SPACING VALUES (Tailwind classes to use consistently):
   
   TITLE & DESCRIPTION:
   - Title (h1): mb-4
   - Description (p): mb-8 md:mb-12
   
   INPUT SECTION:
   - Label container to input: mb-4
   - Between form fields: space-y-10
   - After form: mb-16
   - Error message after input: mt-2
   - Input group containers (e.g., date format): mb-10
   - Tooltip title: mb-2
   - Tooltip example: mt-2 (NOT mt-1)
   
   RESULT SECTION:
   - Result label to value: mb-2
   - After primary result value: mb-6
   - Between major result sections: mb-16
   - Result grid: gap-x-10 gap-y-10 mb-10
   - Result description text: mb-10
   - Result value baseline gap: gap-2 (for items-baseline)
   
   CONTENT SECTIONS:
   - After divider: mb-8 md:mb-16
   - Section groups: space-y-8 md:space-y-16
   - Section heading: mb-6
   - Section content: space-y-4
   - FAQ items: space-y-3
   
   BUTTONS:
   - Between buttons: gap-4 (NOT gap-2, gap-3, or gap-5)
   
   GRIDS:
   - Input grids: gap-x-6 gap-y-10
   - Content grids: gap-4
   - Internal input field spacing: space-y-1 (for nested fields within same input group)
   
   NOTE BOXES:
   - Note box: mb-8 p-6
   
   BOTTOM ACTIONS:
   - Bottom actions container: mt-auto pt-16 pb-16
   
   All calculators should use these exact spacing values for consistency.
   Any deviations should be standardized to match these values.
*/

/* ============================================
   Tax brackets custom scrollbar (minimal, flat)
   ============================================ */
.tax-brackets-scroll-wrap {
  width: 100%;
  max-width: 100%;
}
.tax-brackets-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tax-brackets-scroll::-webkit-scrollbar {
  display: none;
}
.tax-brackets-scrollbar {
  width: 100%;
  height: 5px;
  margin-top: 4px;
  background-color: rgba(229, 229, 229, 0.5);
  cursor: pointer;
  border: none;
  border-radius: 0;
}
.dark .tax-brackets-scrollbar {
  background-color: rgba(38, 38, 38, 0.5);
}
.tax-brackets-scrollbar-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.tax-brackets-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-width: 40px;
  background-color: rgba(163, 163, 163, 0.6);
  border: none;
  border-radius: 0;
  cursor: grab;
  pointer-events: auto;
}
.tax-brackets-scrollbar-thumb:active {
  cursor: grabbing;
}
.tax-brackets-scrollbar-thumb:hover {
  background-color: rgba(115, 115, 115, 0.7);
}
.dark .tax-brackets-scrollbar-thumb {
  background-color: rgba(82, 82, 82, 0.6);
}
.dark .tax-brackets-scrollbar-thumb:hover {
  background-color: rgba(115, 115, 115, 0.7);
}