/*
 * Home v366 — shadowless segmented controls.
 *
 * The search mode and finance calculator use one calm segmented surface.
 * State is communicated by colour and a precise border instead of
 * neumorphic inset/outset shadows or vertical movement.
 */
#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs,
#device-shell #preview-finance-calculator.finance-calculator .finance-category {
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid rgba(83, 126, 171, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(226, 237, 248, 0.78) !important;
  box-shadow: none !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button,
#device-shell #preview-finance-calculator.finance-calculator .finance-category button {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #5b7088 !important;
  transform: none !important;
  text-shadow: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button:hover,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button:hover,
#device-shell #preview-finance-calculator.finance-calculator .finance-category button:hover {
  border-color: rgba(80, 132, 188, 0.12) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  box-shadow: none !important;
  color: #315a82 !important;
  transform: none !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button:is(.is-active, [aria-selected="true"], [aria-pressed="true"]),
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button:is(.is-active, [aria-selected="true"], [aria-pressed="true"]),
#device-shell #preview-finance-calculator.finance-calculator .finance-category button:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
  border-color: rgba(43, 113, 185, 0.2) !important;
  background: rgba(250, 253, 255, 0.96) !important;
  box-shadow: none !important;
  color:var(--mauto-ds-color-primary,#3c78da) !important;
  transform: none !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button:active,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button:active,
#device-shell #preview-finance-calculator.finance-calculator .finance-category button:active {
  border-color: rgba(43, 113, 185, 0.18) !important;
  background: rgba(218, 234, 250, 0.92) !important;
  box-shadow: none !important;
  color:var(--mauto-ds-color-primary-pressed,#3c78da) !important;
  transform: none !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button:focus-visible,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button:focus-visible,
#device-shell #preview-finance-calculator.finance-calculator .finance-category button:focus-visible {
  outline: 2px solid #1976d2 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

#device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button:disabled,
#device-shell #preview-finance-calculator.finance-calculator .finance-tabs button:disabled,
#device-shell #preview-finance-calculator.finance-calculator .finance-category button:disabled {
  opacity: 0.46 !important;
  cursor: not-allowed !important;
}

@media (max-width: 760px) {
  #device-shell[data-device="mobile"] .advanced-search-preview .advanced-search-form .advanced-search-mode button,
  #device-shell[data-device="mobile"] #preview-finance-calculator.finance-calculator .finance-tabs button,
  #device-shell[data-device="mobile"] #preview-finance-calculator.finance-calculator .finance-category button {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #device-shell .advanced-search-preview .advanced-search-form .advanced-search-mode button,
  #device-shell #preview-finance-calculator.finance-calculator .finance-tabs button,
  #device-shell #preview-finance-calculator.finance-calculator .finance-category button {
    transition: none !important;
  }
}