/* ============================================================
   QUOTE PAGE — SERVICE PICKER
   ============================================================
   The list of services a customer chooses from at the top of the
   quote page. One markup, two layouts:

     strip    (default)      the underline tab row — what a wide
                             screen gets while every service fits
                             on a single line
     stacked  (.is-stacked)  a wrapping grid of tiles — every
                             service on screen at once, nothing
                             parked off the right edge

   service-picker.js flips .is-stacked by measuring the row, so the
   strip lives on for exactly as long as it genuinely fits. How wide
   it needs to be depends on how many services the company sells and
   how long their names are — a company with three services keeps the
   strip on a tablet, one with eleven loses it earlier — and CSS can
   see neither. flex-wrap in strip mode is the belt-and-braces: even
   with that script missing, the row breaks onto a second line rather
   than scrolling a service out of sight.

   Named service-picker* rather than navigation-tabs*: the quote page
   and the invoices/orders pages each load one of those two files, and
   the class names used to collide.
   ============================================================ */

.service-picker {
  position: relative;
  margin: 42px 0 28px;
  border-bottom: 1px solid var(--color-border);
}

.service-picker__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  padding: 0 36px;
}

@media (max-width: 575.98px) {
  .service-picker.is-stacked .service-picker__list { padding: 0 6px; }

  .service-picker.is-stacked .service-picker__item {
    padding: 0 10px;
    --underline-inset: 10px;
    font-size: 13px;
  }

  .service-picker.is-stacked .service-picker__icon {
    width: 22px;
    height: 22px;
  }
}


/* ── A SERVICE ─────────────────────────────────────────────── */

.service-picker__item {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-height: var(--tabs-h);
  padding: 0 14px;
  --underline-inset: 14px;   /* keeps the underline in step with the padding */
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-base);
}

/* the underline that slides out under the chosen service */
.service-picker__item::after {
  content: '';
  position: absolute;
  right: var(--underline-inset);
  bottom: 0;
  left: var(--underline-inset);
  height: 2.5px;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-navy);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.service-picker__item:hover { color: var(--color-text-muted); }
.service-picker__item:hover::after { opacity: .4; transform: scaleX(.5); }

.service-picker__item.active { color: var(--color-text-primary); }
.service-picker__item.active::after { opacity: 1; transform: scaleX(1); }

.service-picker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  opacity: .55;
  transition: opacity var(--transition-base);
}

.service-picker__item:hover .service-picker__icon,
.service-picker__item.active .service-picker__icon { opacity: 1; }

/* the icons ship as a bare <svg viewBox> with no width or height, so
   they take their size from this box */
.service-picker__icon svg {
  width: 100%;
  height: 100%;
}


/* ── STACKED ───────────────────────────────────────────────────
   Every service on screen, because a service a customer never
   scrolls to is a service they never buy. */

.service-picker.is-stacked {
  margin: 16px 0 24px;
  border-bottom: 0;
}

.service-picker.is-stacked .service-picker__list {
  justify-content: center;
  gap: 0;
  padding: 0 16px;
}

.service-picker.is-stacked .service-picker__item {
  flex-direction: row;
  min-width: 0;
  justify-content: space-around;
  gap: 8px;
  padding: 0 15px;
  --underline-inset: 15px;
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  border-radius: 0;
  background: var(--color-surface-white);
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  transition: color var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.service-picker.is-stacked .service-picker__icon { opacity: .85; }

.service-picker.is-stacked .service-picker__item:hover {
  color: var(--color-text-primary);
}

.service-picker.is-stacked .service-picker__item.active {
  border-color: var(--color-border);
  background: var(--color-surface-white);
}

.service-picker.is-stacked .service-picker__item.active .service-picker__icon {
  opacity: 1;
}

/* wider screens that still cannot hold the strip on one line */
@media (min-width: 576px) {
  .service-picker.is-stacked .service-picker__list { padding: 0 24px; }
}

@media (min-width: 768px) {
  .service-picker.is-stacked .service-picker__list { padding: 0 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-picker__item,
  .service-picker__item::after,
  .service-picker__icon { transition: none; }
}


/* ── PAGE-LEVEL CARRY-OVERS ────────────────────────────────────
   Not part of this component, but the quote page has been getting
   them from this file since before the split: scrollbar.css sets an
   8px thumb further up the cascade and this page has always hidden
   it, and the smooth scroll is what the in-page jumps ride on. Kept
   here so renaming the component does not quietly restyle the page.
   ============================================================ */

::-webkit-scrollbar { width: 0px; }

html { scroll-behavior: smooth; }