/* "Närmaste återförsäljare": the card under the profile button that slides in
   from the right. Above the scene and its buttons, below dialogs and menus.
   Its top and right are set by the script (below the top row of buttons). */
.nearest-retailer-card {
  position: fixed;
  z-index: 10033;
  top: 80px;
  right: 16px;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 16px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 6px 14px 14px;
  border: 1px solid rgba(105, 91, 74, 0.22);
  border-radius: 5px;
  background: #fff;
  box-shadow: var(--mui-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.18));
  color: #2b2520;
  font-family: var(--mui-font, Aptos, sans-serif);
  opacity: 0;
  transform: translateX(calc(100% + 24px));
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 260ms ease;
}
.nearest-retailer-card[hidden] { display: none; }
.nearest-retailer-card.is-visible {
  opacity: 1;
  transform: none;
}

.nearest-retailer-card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3efe8;
  color: #796951;
  font-size: 16px;
}

.nearest-retailer-card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.nearest-retailer-card__eyebrow {
  color: #796951;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nearest-retailer-card__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.nearest-retailer-card__hours {
  font-size: 14px;
  line-height: 1.4;
}
.nearest-retailer-card__hours[hidden] { display: none; }
.nearest-retailer-card__hours[data-status="open"]::before,
.nearest-retailer-card__hours[data-status="closed"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #4f8a5b;
}
.nearest-retailer-card__hours[data-status="closed"]::before { background: #b5654a; }

.nearest-retailer-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 32px;
  margin-top: 4px;
  color: #2b2520;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nearest-retailer-card__link i { font-size: 12px; }
.nearest-retailer-card__link:focus-visible,
.nearest-retailer-card__close:focus-visible {
  outline: 2px solid #796951;
  outline-offset: 2px;
}

.nearest-retailer-card__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}
.nearest-retailer-card__close:hover { background: rgba(73, 63, 46, 0.06); }

@media (max-width: 600px) {
  .nearest-retailer-card {
    padding: 10px 4px 10px 12px;
    gap: 10px;
  }
  .nearest-retailer-card__icon { width: 32px; height: 32px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .nearest-retailer-card { transition: opacity 160ms ease; transform: none; }
}