/* home page hero section */

.tqc-pet-hero-heading {
  font-size: 40px;
  line-height: 1;
  max-width: 15ch;
  @media (min-width: 768px) {
    font-size: 63px;
    max-width: 24ch;
  }
}

.tqc-pet-hero--rounded-rectangle {
  .tqc-pet-hero-container {
    padding: 40px 24px 72px 24px;
    background-color: var(--color-background-brand-accent);
    @media (min-width: 768px) {
      padding: 112px 48px 72px 48px;
      border-radius: 56px;
    }
  }
  .tqc-pet-hero-emphasis {
    font-style: italic;
  }

  @media (min-width: 768px) {
    padding: 40px;
  }
}

.tqc-pet-hero--fade-up {
  /* gutters for gradient background on large screens */
  @media (min-width: 768px) {
    padding: 0 48px;
  }

  .tqc-pet-hero-container {
    padding: 40px 24px 72px 24px;
    background: radial-gradient(
      84% 67% at 50% 123%,
      var(--color-background-brand-accent) 55%,
      #fff 100%
    );
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;

    @media (min-width: 768px) {
      padding: 112px 48px 72px 48px;
    }
  }
  .tqc-pet-hero-emphasis {
    color: var(--color-text-brand, #176f6f);
  }
}

/* home page section spacing */
.tqc-pet-inset-section {
  padding-inline: 24px;
  @media (min-width: 768px) {
    padding-inline: 96px;
  }
}

.pv-surface-critical .ts-wrapper input {
  /* temporary hack: needs to be exposed as a var() in pit-viper. */
  background-color: #fff1f1;
}

/* Subway line indicators */
.subway-line-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background-color: #808183; /* Default gray background */
  margin: 0 2px;
}

/* NYC Subway line colors - based on official MTA colors */
.subway-line-1,
.subway-line-2,
.subway-line-3 {
  background-color: #ee352e;
}
.subway-line-4,
.subway-line-5,
.subway-line-6 {
  background-color: #00933c;
}
.subway-line-6X {
  background-color: #00933c;
}
.subway-line-7,
.subway-line-7X {
  background-color: #b933ad;
}
.subway-line-N,
.subway-line-Q,
.subway-line-R,
.subway-line-W {
  background-color: #fccc0a;
  color: #000;
}
.subway-line-B,
.subway-line-D,
.subway-line-F,
.subway-line-M {
  background-color: #ff6319;
}
.subway-line-A,
.subway-line-C,
.subway-line-E {
  background-color: #0039a6;
}
.subway-line-G {
  background-color: #6cbe45;
}
.subway-line-J,
.subway-line-Z {
  background-color: #996633;
}
.subway-line-L {
  background-color: #a7a9ac;
}
.subway-line-S {
  background-color: #808183;
}
.subway-line-SIR {
  background-color: #2e3092;
}

/* Fallback styling for any subway line indicator that doesn't match above */
.subway-line-indicator:not([class*="subway-line-"]) {
  background-color: #808183; /* Gray fallback */
}

.tqc-separated-list {
  display: flex;
  > * + * {
    border-left: 1px solid var(--separated-list-color, var(--color-border));
    padding-left: var(--separated-list-gap-size, 1rem);
    margin-left: var(--separated-list-gap-size, 1rem);
  }
}

.tqc-pet-wrapper {
  border-top: 1px solid var(--color-border);
  padding-top: 32px;
  @media (min-width: 768px) {
    padding-top: 40px;
  }
}

.tqc-pet-result-card-wrapper {
  container-type: inline-size;
  container-name: card;
  contain: layout;
}

.tqc-pet-result-card {
  display: block;
  text-decoration: none;

  .tqc-pet-result-title {
    color: var(--color-text-body);
  }
  .tqc-see-cost-breakdown {
    color: var(--color-text-interactive, #176f6f);
    &:hover {
      text-decoration: underline;
    }
  }

  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(12, 12, 12, 0.1);
    text-decoration: none;

    .tqc-see-cost-breakdown,
    .tqc-provider-name,
    .tqc-pet-result-title {
      color: var(--color-text-interactive, #176f6f);
    }
  }
}

.tqc-pet-result-card__price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@container card (max-width: 500px) {
  .tqc-pet-result-card__provider-content {
    margin-bottom: 16px;
  }
  /* Wrap the price label on mobile so it doesn't bleed to close to the "View details" link */
  .tqc-pet-result-card__price dfn {
    max-width: 15ch;
    display: inline-block;
  }
}

/* when the card (not the screen) is above 500px wide,
   it uses more horizontal space. the breakpoint here is eyeballed. */
@container card (min-width: 500px) {
  .tqc-pet-result-card {
    display: flex;
    justify-content: space-between;
  }

  .tqc-pet-result-card__price {
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
  }
}

.tqc-rate-chart {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  row-gap: 0;
}

.tqc-rate-chart__annotation-wrapper {
  grid-column: 2;
  grid-row: 1;
}

.tqc-rate-chart__bound {
  grid-row: 2;
  line-height: 1;
}

.tqc-rate-chart__annotation {
  display: inline-block;
  position: relative;
  transform: translateX(-50%);
}

.tqc-rate-chart__bar {
  grid-row: 2;
  position: relative;
  height: 4px;
  border-radius: 24px;
  background: linear-gradient(
    90deg,
    var(--brand-gradient-start, #6fd6ce) 0%,
    var(--brand-gradient-end, #0043ce) 100%
  );
  align-self: center;
}

.tqc-rate-chart__dot {
  position: absolute;
  top: -4px;
  border: 1px solid white;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: black;
}

.tqc-rate-chart__line {
  position: absolute;
  width: 1px;
  background: black;
  left: 50%;
  top: calc(-100% - 3px);
  transform: translateX(-50%);
  height: 12px;
}

.tqc-calculator-field-group {
  border-radius: 6px;
  border: 1px solid var(--color-border);
  box-shadow:
    0px 0px 40px 0px rgba(12, 12, 12, 0.01),
    0px 1px 5px 0px rgba(12, 12, 12, 0.05);
  padding: 20px;

  margin-bottom: 1rem;
  &:last-of-type {
    margin-bottom: 0;
  }

  /* begin: convoluted workarounds to share calculator markup across apps */
  .pv-label-selectable {
    padding: 0;
    border: none;
  }

  .pv-stack-16 {
    margin: 0;
  }

  .pv-stack-16 + .pv-stack-16 {
    margin-top: 1rem;
  }

  /* "Hide field groups that do not have visible children" */
  &:not(:has(> :not(.pv-hide))) {
    display: none;
  }
  /* end: convoluted workarounds */
}

.htmx-request #results-main,
.htmx-request #rate-chart-section,
.htmx-request #desktop-mapbox {
  position: relative;
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    z-index: 10;
  }
}

.tqc-line-items {
  tr:last-of-type td {
    border-bottom: none;
  }

  /*
    hides the 6th-and-beyond table rows when the --collapsed class is applied.

    exclude the last row from the hiding, since that's containing the show/hide button.
  */
  &.tqc-line-items--collapsed tr:nth-of-type(n + 6):not(:last-of-type) {
    display: none;
  }
}

.tqc-disabled-dropdown-item {
  color: #8a95a5;
  pointer-events: none;
}

.tqc-package-details-description {
  @media (min-width: 768px) {
    padding-inline-end: 80px;
  }
}

pet-location-selector[data-standalone] {
  .item {
    font-size: 1rem;
    font-weight: 400;
    line-height: 27px;
  }

  input {
    background: var(--color-background-accent);
  }
}

.tqc-check-coverage {
  color: var(--button-text-color);
}
.tqc-check-coverage:hover .tqc-check-coverage__fake-button,
.tqc-check-coverage:active .tqc-check-coverage__fake-button {
  background: var(--button-primary-outline-hover-background-color);
  color: var(--button-primary-outline-hover-color);
}

.tqc-pet-contact-table {
  border-spacing: 0;
  td {
    padding-block: 4px;

    &:first-of-type {
      padding-inline-start: 12px;
    }

    &:last-of-type {
      padding-inline-end: 12px;
    }
  }
  tr:not(:last-of-type) td {
    border-bottom: 1px solid var(--color-border);
  }
}

.tqc-pet-cost-summary {
  .search-bar__group {
    border-right: none;
  }
  .ts-wrapper {
    &.single .ts-control,
    &.single .ts-control input {
      font-size: 16px;
    }
  }
}

.tqc-flex-on-large {
  @media (min-width: 768px) {
    --flex-align: center;
    --flex-gap: 0.5rem;
    --flex-justify: flex-start;
    --flex-wrap: nowrap;
    display: flex;
    align-items: var(--flex-align);
    justify-content: var(--flex-justify);
    gap: var(--flex-gap);
    flex-wrap: var(--flex-wrap);
  }
}

.subway-station-marker {
  background-color: #007cbf;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/**
  * When .tqc-dropdown-browse elements are nested in a dropdown menu,
  * we only want to display the last one.
  *
  * This is the best way we've found using Tom Select to implement
  * a link that stays fixed at the bottom of the menu regardless
  * of typeahead inputs.
  */
.ts-dropdown .optgroup .tqc-dropdown-browse {
  display: none;
}
.ts-dropdown .optgroup:last-of-type .tqc-dropdown-browse {
  display: block;
  border-top: 1px solid #eee;
  padding: 0.5rem;
  margin-block: 0.5rem;

  @media (min-width: 768px) {
    padding: 0.5rem;
    padding-inline-end: 1rem;
    margin-inline: 0.5rem;
  }
  &:hover {
    background-color: #f8f8fa;
  }
}

.tqc-treatment-plan:not(.tqc-treatment-plan--expanded)
  .tqc-treatment-plan__item-wrapper:nth-of-type(n + 6) {
  display: none;
}

.tqc-treatment-plan__item-wrapper {
  container-type: inline-size;
  container-name: treatment-item;
  contain: layout;
}

@container treatment-item (max-width: 499px) {
  .tqc-treatment-plan__item-cost-container {
    margin-top: 12px;
  }
  .tqc-treatment-plan__item-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@container treatment-item (min-width: 500px) {
  .tqc-treatment-plan__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.tqc-footer-links {
  --flex-justify: end;

  @media (max-width: 767px) {
    --flex-justify: center;
  }
}