/* Custom SlimSelect styles — Sunset Energy warm mid-theme */
/* Ultra-high specificity to override all form classes */

/* Override SlimSelect CSS variables to remove all default blue */
:root {
  --ss-primary-color: rgba(251,139,36,0.15) !important;
  --ss-bg-color: #2D2420 !important;
  --ss-font-color: #F5EDE6 !important;
  --ss-font-placeholder-color: rgba(255,255,255,0.4) !important;
  --ss-disabled-color: rgba(255,255,255,0.02) !important;
  --ss-border-color: rgba(255,255,255,0.1) !important;
  --ss-highlight-color: rgba(251,139,36,0.2) !important;
  --ss-success-color: #FB8B24 !important;
  --ss-error-color: #EF4444 !important;
  --ss-focus-color: rgba(251,139,36,0.4) !important;
}

/* Main container */
.ss-main.ss-main.ss-main {
  appearance: none !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 0.5rem !important;
  width: 100% !important;
  min-height: 41px !important;
  padding: 0.5rem 0.75rem !important;
  background-color: rgba(255,255,255,0.05) !important;
  color: #F5EDE6 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition-property: border-color !important;
  transition-timing-function: ease-in-out !important;
  transition-duration: 0.2s !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-shadow: none !important;
  --tw-shadow-colored: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Focus states */
.ss-main.ss-main.ss-main.ss-focused,
.ss-main.ss-main.ss-main:focus-within,
.ss-main.ss-main.ss-main:focus {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: rgba(251,139,36,0.4) !important;
  box-shadow: 0 0 0 1px rgba(251,139,36,0.2) !important;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/) !important;
  --tw-ring-offset-width: 0px !important;
  --tw-ring-offset-color: transparent !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* Remove the internal single-selected styling */
.ss-main .ss-single-selected {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  color: inherit !important;
  outline: none !important;
}

/* Dropdown content */
.ss-content {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  background-color: #2D2420 !important;
  z-index: 10000 !important;
  margin-top: 0.25rem !important;
  padding: 0 !important;
}

/* Open state fix for version mismatch */
.ss-content.ss-open,
.ss-content.ss-open-below,
.ss-content.ss-open-above {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  height: auto !important;
  overflow: auto !important;
}

/* Options styling */
.ss-content .ss-list .ss-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer;
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  font-family: 'Space Grotesk', sans-serif;
}

.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
  background-color: rgba(251,139,36,0.1) !important;
  color: #FB8B24 !important;
}

.ss-content .ss-list .ss-option.ss-disabled {
  color: rgba(255,255,255,0.35) !important;
  cursor: not-allowed;
  background-color: transparent;
}

.ss-content .ss-list .ss-option.ss-disabled:hover {
  background-color: transparent;
  color: rgba(255,255,255,0.35) !important;
}

/* Search input */
.ss-content .ss-search {
  padding: 0.5rem;
}

.ss-content .ss-search input {
  width: 100%;
  border-width: 1px;
  border-color: rgba(255,255,255,0.1) !important;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #F5EDE6 !important;
  background-color: rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
  font-family: 'Space Grotesk', sans-serif;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  margin: 0;
}

.ss-content .ss-search input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: rgba(251,139,36,0.4) !important;
  box-shadow: 0 0 0 1px rgba(251,139,36,0.2) !important;
}

.ss-content .ss-search input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Arrow styling */
.ss-main .ss-arrow {
  border-color: rgba(255,255,255,0.5) transparent transparent transparent !important;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ss-main.ss-open-above .ss-arrow {
  border-color: transparent transparent rgba(255,255,255,0.5) transparent !important;
}

.ss-main:hover .ss-arrow {
  border-top-color: rgba(255,255,255,0.5) !important;
}

.ss-main.ss-focused .ss-arrow,
.ss-main .ss-single-selected:focus + .ss-arrow {
  border-top-color: #FB8B24 !important;
}

/* Placeholder text */
.ss-main .ss-values .ss-placeholder {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.875rem;
}

/* Multi-select values (pills/badges) */
.ss-main .ss-values .ss-value {
  background-color: rgba(251,139,36,0.12) !important;
  border: 1px solid rgba(251,139,36,0.2) !important;
  border-radius: 100px !important;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FB8B24 !important;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1rem);
}

.ss-main .ss-values .ss-value .ss-value-text {
  color: #FB8B24 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ss-main .ss-values .ss-value .ss-value-delete {
  margin-left: 0.25rem;
  color: rgba(255,255,255,0.4) !important;
  font-weight: 600;
  cursor: pointer;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ss-main .ss-values .ss-value .ss-value-delete:hover {
  color: #EF4444 !important;
}

/* Addable option — "Add new" button in dropdown */
.ss-content .ss-addable {
  padding: 8px 12px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ss-content .ss-addable .ss-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: #FB8B24 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.ss-content .ss-addable .ss-add:hover {
  background: #D90368 !important;
}

/* Selected option */
.ss-content .ss-list .ss-option.ss-option-selected,
.ss-content .ss-list .ss-option.ss-selected {
  background-color: rgba(251,139,36,0.08) !important;
  color: #FB8B24 !important;
}

/* Search highlight text match */
.ss-content .ss-list .ss-option .ss-search-highlight,
.ss-content .ss-list .ss-option mark {
  background-color: rgba(251,139,36,0.2) !important;
  color: #FB8B24 !important;
}

.ss-content .ss-no-results {
  padding: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* Disabled state */
.ss-main.ss-disabled .ss-single-selected {
  background-color: rgba(255,255,255,0.02) !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: not-allowed;
}

.ss-main.ss-disabled .ss-arrow {
  border-top-color: rgba(255,255,255,0.15) !important;
}

/* Native select elements — dark theme */
select.block,
select.rounded-lg,
.simple_form select {
  background-color: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #F5EDE6 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: 0.5rem !important;
}

select.block option,
select.rounded-lg option,
.simple_form select option {
  background-color: #2D2420 !important;
  color: #F5EDE6 !important;
}

/* SlimSelect content dropdown — closed by default, visible when open */
.ss-content {
  opacity: 0 !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: 300px !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.ss-content.ss-open,
.ss-content.ss-open-below,
.ss-content.ss-open-above {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  height: auto !important;
  overflow: auto !important;
}