/* Retailer result row — Find a Retailer panel list item. */

.retailer-result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--secan-space-m);
  padding: var(--secan-space-l) var(--secan-space-xl);
  border-bottom: 1px solid var(--secan-divider);
  cursor: pointer;
  background: var(--secan-white);
  transition: background-color 0.15s ease;
}

.retailer-result-row:last-child {
  border-bottom: 0;
}

.retailer-result-row:hover,
.retailer-result-row:focus-visible,
.retailer-result-row.is-active {
  background: var(--secan-input-bg);
  outline: none;
}

.retailer-result-row:focus-visible {
  box-shadow: inset var(--secan-focus-ring);
}

.retailer-result-row__main {
  min-width: 0;
  flex: 1 1 auto;
}

.retailer-result-row__name {
  display: block;
  margin: 0 0 var(--secan-space-xxs);
  color: var(--secan-black);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-body);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-body);
  text-decoration: none;
}

.retailer-result-row__name:hover,
.retailer-result-row__name:focus-visible {
  color: var(--secan-red);
}

.retailer-result-row__address {
  display: flex;
  align-items: flex-start;
  gap: var(--secan-space-xs);
  margin: 0;
  color: var(--secan-gray);
  font-family: var(--secan-font-body);
  font-size: var(--secan-fs-body-medium);
  line-height: var(--secan-lh-body-medium);
}

.retailer-result-row__pin {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: var(--secan-gray);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.retailer-result-row__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--secan-space-xxs);
  flex: 0 0 auto;
  min-width: 3rem;
  text-align: center;
}

.retailer-result-row__directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--secan-radius-3);
  color: var(--secan-red);
  text-decoration: none;
}

.retailer-result-row__directions:hover,
.retailer-result-row__directions:focus-visible {
  background: var(--secan-tab-bg);
  outline: none;
  box-shadow: var(--secan-focus-ring);
}

.retailer-result-row__directions-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.retailer-result-row__distance {
  color: var(--secan-black);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Seed-class tags — Figma variety Where to Buy Chip (1862:35650), in the
   brand pill style so classes stand out from the grey address line. */
.retailer-result-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--secan-space-xxxs);
  margin: var(--secan-space-xxxs) 0 var(--secan-space-xs);
  padding: 0;
  list-style: none;
}

.retailer-result-row__tag {
  padding: 3px 10px;
  border-radius: var(--secan-radius-pill);
  background-color: var(--secan-blue);
  font-family: var(--secan-font-heading);
  font-size: var(--secan-fs-small);
  font-weight: var(--secan-fw-bold);
  line-height: var(--secan-lh-small);
  letter-spacing: 0.02em;
  color: var(--secan-white);
  white-space: nowrap;
}