/*--------------------------------------------------
  Responsive Adjustments
--------------------------------------------------*/
@media (max-width: 1024px) {
  .car-widget .filter-sort-wrap[data-v-4cd715a2] {
    top: 59.2px !important;
  }
}

/*--------------------------------------------------
  General Styles
--------------------------------------------------*/
.hubspot-form-embed {
  display: none;
}

field_dropdown:valid {
  color: #002D25;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:valid {
  color: black;
}

.is-trading {
  height: 0px;
  overflow: hidden;
  display: none;
}

/*--------------------------------------------------
  Progress Bar Styles
--------------------------------------------------*/
[data-step-progress="back"] {
  margin-left: -1.95rem;
  opacity: 0;
}

[data-step-progress="back"].is-visible {
  margin-left: 0rem;
  opacity: 1;
}

/*--------------------------------------------------
  Company Lookup Styles
--------------------------------------------------*/
[data-company-search="list"] {
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease;
}

[data-company-search="list"].active {
  height: 8.4rem;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  display: flex;
  flex-direction: column;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: var(--_color-modes---scale--scale-4);
  padding-top: 0.5rem;
  box-shadow: 0 0 #57575700, 0 .9px .6px #5757570f, 0 2.1px 1.7px #57575711,
    0 4.6px 4.5px #57575712, 0 11.3px 13.4px #57575714;
  border-radius: 0px 0px 1rem 1rem;
}

[data-company-search="list"].active~.field_combobox {
  border-radius: 0;
  border-style: solid;
  border-bottom: 1px solid white;
  border-radius: 1rem 1rem 0px 0px;
}

[data-company-search="list"].active~.field_combobox::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #fff 2%, #c0c0c0 2% 98%, #fff 98%);
  z-index: 1;
}

.company-search-item,
.company-search-custom {
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.company-search-item:hover,
.company-search-custom:hover {
  background-color: rgba(9, 104, 246, 0.2);
}

[data-company-search="list"].loading {
  opacity: 1;
  visibility: visible;
  display: block;
  overflow: hidden;
}

/* Skeleton Loading Styles */
.company-search_skeleton-loading {
  display: none;
  padding: 0.5rem;
}

[data-company-search="list"].loading .company-search_skeleton-loading {
  display: block;
}

.company-search_skeleton-item {
  background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.company-search_skeleton-item:nth-child(2) {
  width: 75%;
}

.company-search_skeleton-item:nth-child(3) {
  width: 50%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

[data-company-search="loading"] {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/*--------------------------------------------------
  Multi-Step Form Styles
--------------------------------------------------*/
[data-form="step"].hiding {
  opacity: 0;
  transform: translateY(-0.25rem);
}

[data-form="step"].showing {
  opacity: 0;
  transform: translateY(0.25rem);
}

div[data-form="step"]+div[data-form="step"] {
  display: none;
}

.field_error {
  display: none;
}

[data-company-trading="true"] {
  display: none;
}

[data-existing-customer] {
  display: none;
  margin-top: -4rem;
}

/*--------------------------------------------------
  Form Input Styles
--------------------------------------------------*/
input[type="radio"]:checked+.form_radio_label {
  border: 1.4px solid #0968f6;
  background-color: #dee8ff;
  color: #1a1a1a;
}

/*--------------------------------------------------
  Modal Visibility Styles
--------------------------------------------------*/
[data-modal="hide"] {
  display: none !important;
}

.show-modal [data-modal="hide"] {
  display: flex !important;
}

.show-modal {
  overflow: hidden !important;
}