/* National Account code tools (code-tools.js): code search + oil change picker.
   Scorecard controls (4px radii, 1px --sa-border, primary on select) using the --sa-* tokens
   from extra.css, so light and slate both work. */

/* ---------- Code search ---------- */

.md-typeset .code-search {
  margin: 1em 0 1.25em;
}

.md-typeset .code-search__label {
  position: relative;
  display: flex;
  align-items: center;
}

.md-typeset .code-search__input {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 2.4rem 0.6rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--sa-text);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-card);
  box-shadow: var(--sa-card-shadow);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.md-typeset .code-search__input::placeholder {
  color: var(--sa-text-3);
  opacity: 1;
}
.md-typeset .code-search__input:focus {
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px var(--sun-red-tint);
}
.md-typeset .code-search__input::-webkit-search-cancel-button { display: none; }

.md-typeset .code-search__clear,
.md-typeset .code-search__kbd {
  position: absolute;
  right: 0.5rem;
}
.md-typeset .code-search__clear {
  padding: 0 0.35rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--sa-text-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.md-typeset .code-search__clear:hover,
.md-typeset .code-search__clear:focus-visible { color: var(--sa-primary); }
.md-typeset .code-search__kbd { pointer-events: none; }

.md-typeset .code-search__status {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-label);
  color: var(--sa-text-3);
}
.md-typeset .code-search__empty {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  background: var(--sa-layer-3);
  border: 1px solid var(--sa-border);
  border-left: var(--status-w) solid var(--sa-watch);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Code tables fill the sheet so columns line up from group to group. */
.md-typeset .na-codes .md-typeset__table { display: block; }
.md-typeset .na-codes table:not([class]) { display: table; width: 100%; }

.md-typeset .na-codes tr[hidden],
.md-typeset [data-code-search] ~ [hidden] { display: none !important; }

/* ---------- Oil change picker ---------- */

.md-typeset .oil-picker { margin: 1em 0 1.5em; }

.md-typeset .oil-picker__card {
  padding: var(--sp-4);
  border: 1px solid var(--sa-panel-border);
  border-radius: var(--radius-panel);
  background: var(--sa-layer-1);
}

.md-typeset .oil-picker__title {
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--sa-primary);
}

.md-typeset .oil-picker__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
}
.md-typeset .oil-picker__types legend,
.md-typeset .oil-picker__qty > label {
  display: block;
  width: 100%;
  margin-bottom: var(--sp-2);
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--sa-text-2);
}
.md-typeset .oil-picker__types input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.md-typeset .oil-picker__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--sa-text);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  user-select: none;
}
.md-typeset .oil-picker__chip:hover { border-color: var(--sa-primary); color: var(--sa-primary); }
.md-typeset .oil-picker__types input:focus-visible + .oil-picker__chip {
  box-shadow: 0 0 0 3px var(--sun-red-tint);
  border-color: var(--sa-primary);
}
.md-typeset .oil-picker__types input:checked + .oil-picker__chip {
  color: var(--sun-white);
  background: var(--sa-primary);
  border-color: var(--sa-primary);
}

.md-typeset .oil-picker__qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.md-typeset .oil-picker__stepper { display: inline-flex; }
.md-typeset .oil-picker__step,
.md-typeset .oil-picker__qty-input {
  height: 32px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--sa-text);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
}
.md-typeset .oil-picker__step {
  width: 32px;
  font-weight: 700;
  cursor: pointer;
}
.md-typeset .oil-picker__step:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.md-typeset .oil-picker__step:last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.md-typeset .oil-picker__step:hover { color: var(--sa-primary); }
.md-typeset .oil-picker__qty-input {
  width: 4rem;
  text-align: center;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.md-typeset .oil-picker__qty-input::-webkit-outer-spin-button,
.md-typeset .oil-picker__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.md-typeset .oil-picker__qty-input:focus { outline: 2px solid var(--sa-primary); outline-offset: -2px; }
.md-typeset .oil-picker__hint { font-size: var(--fs-label); color: var(--sa-text-3); }

.md-typeset .oil-picker__result:not(:empty) {
  margin-top: var(--sp-3);
  padding: 12px var(--sp-3);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-left: var(--status-w) solid var(--sa-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--sa-card-shadow);
}
.md-typeset .oil-picker__line + .oil-picker__line { margin-top: 0.7rem; }
.md-typeset .oil-picker__kicker {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sa-text-3);
}
.md-typeset .oil-picker__coderow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
}
.md-typeset .oil-picker__code {
  font-family: var(--sun-font-code);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sa-text);
  font-variant-numeric: tabular-nums;
}
.md-typeset .oil-picker__code--sm { font-size: 1.05rem; }
.md-typeset .oil-picker__plus { font-weight: 700; }
.md-typeset .oil-picker__copy {
  height: 24px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--sa-text);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.md-typeset .oil-picker__copy:hover,
.md-typeset .oil-picker__copy:focus-visible { border-color: var(--sa-primary); color: var(--sa-primary); }
/* Preview of the copied VAST Part Number, light grey beside the button */
.md-typeset .oil-picker__copywrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.md-typeset .oil-picker__vastgroup {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-left: var(--sp-3); border-left: 1px solid var(--sa-border);
}
.md-typeset .oil-picker__vast {
  font-family: var(--sun-font-code);
  font-size: var(--fs-label);
  color: var(--sa-text-3);
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.md-typeset .oil-picker__desc {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
}
.md-typeset .oil-picker__price { white-space: nowrap; }
.md-typeset .oil-picker__total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  font-size: var(--fs-card-title);
  font-weight: 600;
  border-top: 2px solid var(--sa-rule);
}
.md-typeset .oil-picker__note {
  margin: 0.6rem 0 0;
  font-size: var(--fs-label);
  font-style: italic;
  color: var(--sa-text-3);
}
/* "1.7 qt over the 6 qt package, rounded up to 2 qt." */
.md-typeset .oil-picker__round {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--sa-text-2);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .oil-picker__card { padding: var(--sp-3); }
  .md-typeset .oil-picker__code { font-size: 1.35rem; }
}