:root {
  /* Colors */
  --color-primary: hsla(26, 81%, 52%);
  --color-select-bg: hsl(0, 0%, 0%);
  --color-select-text: hsl(0, 0%, 100%);
  --color-restricted-bg: hsl(0, 0%, 90%);
  --color-restricted-text: hsla(0, 0%, 40%);

  /* Typography */
  --font-primary: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --font-size-default: 1em;
  --font-size-large: 1.5em;

  /* Text weight */
  --text-weight-light: 400;

  /* Border and Shapes */
  --border-radius-default: 3px;

  /* Transitions */
  --transition-default: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

  /* Text max-width */
  --text-max-width: 400px;
}

::view-transition-group(root) {
  animation-duration: .75s;
  animation-timing-function: ease-in-out;

}

/* Focus visible for non-button elements */
#vehicle-selector-root select:focus-visible {
  color: invert(var(--color-select-text));
  background-color: invert(var(--color-select-bg));
  border: 2px solid;
  border-color: invert(var(--color-select-text));
}


#vehicle-selector-root .hidden {
  display: none !important;
}

#vehicle-selector-root select.error-border {
  border: 2px solid red;
}

#vehicle-selector-root .error {
  color: red;
}

#vehicle-selector-root p {
  margin: 0;
  text-transform: capitalize;
}

/* Vehicle selector grid layout */
#vehicle-selector-root:has(:not(:empty)) {
  display: grid;
  gap: 1em;
  width: 100%;
}

#vehicle-selector-root .form-wrapper {
  grid-column: 1/3;
  display: grid;
  gap: 1em;
}

/* General styling for vehicle selector */
#vehicle-selector-root * {
  font-family: var(--font-primary);
  font-size: var(--font-size-default);
  transition: var(--transition-default);
}

/* Styling for active select elements */
#vehicle-selector-root select:not(:restricted):not(:focus-visible) {
  color: var(--color-select-text);
  background-color: var(--color-select-bg);
}

/* Additional select styles */
select,
#vehicle-name {
  width: 100%;
  padding: 1em;
  margin: 0;
  appearance: none;
  text-transform: uppercase;
  color: var(--color-select-text);
  font-weight: 500;
  background: var(--color-select-bg) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%239d9d9d'/></g></svg>") no-repeat;
  background-position: right 1em top 50%, 0 0;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Grid area declarations */
#vehicle-selector-root .dropdown-wrapper {
  grid-column: 1 / 3;
}

#vehicle-selector-root #inventory-notice {
  grid-column: 1 / 2;
  grid-row: 4;
  align-self: center;
}

#vehicle-selector-root #price-display {
  grid-column: 2 / 3;

  margin: 0.5em 0;
  text-align: end;
  font-size: var(--font-size-large);

  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform-origin: top;
  display: inline-block;
}

#vehicle-selector-root #configure-button {
  grid-column: 1 / 3;
}

#vehicle-selector-root #buy-now-button {
  grid-column: 1 / 3;
}

#vehicle-selector-root #shop-accessories-button,
#vehicle-selector-root #custom-button {
  grid-column: 1 / 3;
}

#vehicle-selector-root #error-message {
  grid-column: 1 / 3;
  grid-row: 6;
  font-weight: bold;
  text-align: end;
  color: red;
  text-transform: capitalize;
}


#vehicle-selector-root #inventory-notice * {
  text-transform: capitalize;
}

/* Button styling */
#vehicle-selector-root [role="button"] {
  padding: 1em;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  transition: var(--transition-default);
  border-radius: var(--border-radius-default);
  cursor: pointer;
  text-transform: uppercase;
}

#vehicle-selector-root [role="button"][restricted="true"] {
  background-color: var(--color-primary);
  color: var(--color-select-text);
}

#vehicle-selector-root [role="button"][restricted="false"] {
  color: invert(var(--color-select-text));
  background-color: invert(var(--color-select-bg));
  border: 2px solid;
  border-color: invert(var(--color-select-text));
}

#vehicle-selector-root #buy-now-button:is([restricted="false"]):not(:where(a:hover, a:focus)) {
  color: var(--color-select-text);
  background-color: var(--color-primary);
}

/* Hover and focus states for buttons */
#vehicle-selector-root [role="button"][restricted="false"]:where(a:hover, a:focus) {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: invert(var(--color-select-bg));
  border: 2px solid;
}

/* restricted state styling */
#vehicle-selector-root *[restricted="true"],
#vehicle-selector-root *:disabled {
  color: var(--color-restricted-text);
  background-color: var(--color-restricted-bg);
  border-color: transparent;
  opacity: 0.7;
  cursor: not-allowed;
}



/* animations */
#vehicle-selector-root .price-hide {
  transform: translateY(100%);
  opacity: 0;
}

#vehicle-selector-root .price-show {
  transform: translateY(0);
  opacity: 1;
}

/* alternative options box */
#vehicle-selector-root #alternative-options-box {
  width: 100%;
  margin-left: auto;
  grid-column: 1 / 3;
  border: 1px solid black;
  padding: 1rem;

}

#vehicle-selector-root #alternative-options-box .alternative-options {
  text-transform: none;
}

#vehicle-selector-root #alternative-options-box .alternative-options a {
  color: var(--color-restricted-text);
  text-decoration: underline;
}

#vehicle-selector-root #alternative-options-box .alternative-options h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* title */

#vehicle-selector-root #kuat-title {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

#vehicle-selector-root #kuat-title h1 {
  margin: 0;
  font-size: var(--font-size-large);
}

#vehicle-selector-root #kuat-title .subtitle-container {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

#vehicle-selector-root #kuat-title h2 {
  margin: 0;
  font-weight: var(--text-weight-light);
  font-size: var(--font-size-default);
}

#vehicle-selector-root #kuat-title .divider {
  margin: 12px 0 0 0;
  border: 1px solid black;
}

#vehicle-selector-root .description {
  max-width: var(--text-max-width);
  font-weight: var(--text-weight-light);
  line-height: 1.5;
  text-transform: none;
}

/* Finished State Container  */
#vehicle-selector-root #finished-state-container {
  grid-column: 1/3;
}

#vehicle-selector-root #finished-state-container #vehicle-name {
  width: auto;
  background: var(--color-select-bg);
  display: flex;
  gap: 1em;
  cursor: default;
}

#vehicle-selector-root #finished-state-container #sku-display {
  float: left;
  margin: 1em .5em 0;
  font-weight: var(--text-weight-light);
}

#vehicle-selector-root #finished-state-container #reset-form {
  float: right;
  margin: 1em .5em 0;
  font-weight: var(--text-weight-light);
  text-decoration: underline;
  cursor: pointer;
}

#vehicle-selector-root .fitment-notes {
  border: 1px solid var(--color-select-bg);
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

a[href="undefined"] {
  display: none;
}