/**
 * Order for delivery: the branch picker dialog (parts/order-dialog.php) and
 * the Grab / foodpanda buttons it shares with the store cards.
 *
 * Same language as the search overlay: warm paper panel, Playfair title,
 * roast brown text. The app buttons stay plain so the two wordmarks carry
 * their own colour. Tokens for type and spacing; rem for fixed sizes.
 */

/* ================= APP BUTTONS ================= */

.delivery-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* The apps' own brand colours, used only for the hover and focus edge. */
.delivery-link--grab { --app-color: hsl(147 100% 35%); }      /* #00b14f */
.delivery-link--foodpanda { --app-color: hsl(333 88% 45%); }  /* #d60e64 */

.delivery-link {
  display: inline-grid;
  place-items: center;
  min-width: 11.2rem;
  min-height: 4.4rem;
  padding-inline: var(--space-s);
  border: var(--border-width) var(--border-style) var(--border-color-light);
  border-radius: var(--radius-round);
  background: var(--bg-ultra-light);
  box-shadow: 0 0.1rem 0.2rem hsl(var(--shadow-color) / 0.06);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);
}

.delivery-link img {
  display: block;
  width: auto;
  height: 1.9rem;
}

/* foodpanda's wordmark is long and low; a shorter cap height reads as the
   same size as Grab's. */
.delivery-link--foodpanda img { height: 1.6rem; }

.delivery-link:hover {
  border-color: var(--app-color);
  box-shadow: var(--shadow-m);
  transform: translateY(-0.1rem);
}

.delivery-link:active { transform: none; }

.delivery-link:focus-visible {
  outline: var(--btn-border-width) solid var(--app-color);
  outline-offset: 0.2rem;
}

/* ================= DIALOG SHELL ================= */

/* margin: auto is the native dialog's centring, which the site's reset
   (margin: 0 on everything) would otherwise pin to the top-left corner. */
.order-picker {
  width: min(68rem, 100% - 2 * var(--space-xs));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  overflow: visible;
}

.order-picker::backdrop {
  background: var(--tertiary-trans-60);
  backdrop-filter: blur(0.4rem);
}

.order-picker-lock { overflow: hidden; }

.order-picker__panel {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 80rem);
  background: var(--bg-ultra-light);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.order-picker[open] .order-picker__panel {
  animation: order-picker-in var(--duration-normal) var(--ease-out-expo);
}

@keyframes order-picker-in {
  from { opacity: 0; transform: translateY(1.2rem) scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  .order-picker[open] .order-picker__panel { animation: none; }
  .delivery-link,
  .delivery-link:hover { transition: none; transform: none; }
}

/* ================= HEAD ================= */

.order-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-m) var(--space-s);
}

.order-picker__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.order-picker__title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: var(--h3);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-wrap: balance;
}

.order-picker__title em {
  font-style: italic;
  color: var(--secondary);
}

.order-picker__lede {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

.order-picker__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.order-picker__close:hover {
  background: var(--primary-ultra-light);
  color: var(--primary-semi-dark);
}

/* ================= SEARCH + NEAR ME ================= */

.order-picker__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0 var(--space-m) var(--space-xs);
}

.order-picker__field {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 4.8rem;
  padding-inline: var(--space-s);
  border: var(--border-width) var(--border-style) var(--border-color-light);
  border-radius: var(--radius-round);
  background: var(--bg-light);
  color: var(--secondary);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.order-picker__field:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 0.3rem var(--primary-trans-20);
}

.order-picker__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-m);
  color: var(--text-dark);
  caret-color: var(--primary);
  appearance: none;
}

.order-picker__input::placeholder { color: var(--text-dark-muted); }
.order-picker__input::-webkit-search-cancel-button { appearance: none; }

.order-picker__near {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  min-height: 4.8rem;
  padding-inline: var(--space-s);
  border: var(--btn-border-width) solid var(--tertiary);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--tertiary);
  font-family: var(--btn-font-family);
  font-size: var(--text-xs);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.order-picker__near .mesa-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.order-picker__near:hover,
.order-picker__near[aria-pressed="true"] {
  background: var(--tertiary);
  color: var(--text-light);
}

.order-picker__near.is-loading {
  cursor: progress;
  opacity: 0.7;
}

.order-picker__near:focus-visible,
.order-picker__close:focus-visible {
  outline: var(--btn-border-width) solid var(--secondary);
  outline-offset: 0.2rem;
}

.order-picker__status {
  margin: 0;
  padding: 0 var(--space-m) var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
}

/* ================= BRANCH LIST ================= */

.order-picker__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-m);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block: var(--border-width) var(--border-style) var(--border-color-light);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-light) transparent;
}

.order-picker__list[hidden],
.order-branch[hidden] { display: none; }

.order-branch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  padding-block: var(--space-s);
}

.order-branch + .order-branch {
  border-block-start: var(--border-width) var(--border-style) var(--border-color-light);
}

.order-branch__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.order-branch__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
}

.order-branch__where {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-dark-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.order-branch__distance {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
}

.order-branch__distance::after {
  content: " · ";
  font-weight: 400;
  color: var(--text-dark-muted);
}

/* Two equal slots, filled from the left: a branch with only one app shows
   it in the first slot (Seth, 10 November 2026). */
.order-branch__apps {
  display: grid;
  grid-template-columns: repeat(2, 11.2rem);
}

/* 576px and up: name on the left, the app buttons on the right. */
@media (min-width: 36em) {
  .order-branch { grid-template-columns: minmax(0, 1fr) auto; }
}

.order-picker__empty {
  margin: 0;
  padding: var(--space-l) var(--space-m);
  border-block-start: var(--border-width) var(--border-style) var(--border-color-light);
  font-size: var(--text-s);
  color: var(--text-dark-muted);
  text-align: center;
}

/* ================= FOOT ================= */

.order-picker__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-s) var(--space-m);
}

/* ================= STORE CARDS ================= */

.store-card .delivery-links { gap: var(--space-xxs); }

/* Where the actions run in a row (grid view, and list view below 600px),
   the app buttons take a row of their own above the map and directions links. */
.store-list[data-view="grid"] .store-card__actions .delivery-links { flex-basis: 100%; }

@media (max-width: 37.4375em) {
  .store-list[data-view="list"] .store-card__actions { flex-wrap: wrap; }
  .store-list[data-view="list"] .store-card__actions .delivery-links { flex-basis: 100%; }
}

.store-card .delivery-link {
  min-width: 9.2rem;
  min-height: 3.6rem;
  padding-inline: var(--space-xs);
}

.store-card .delivery-link img { height: 1.5rem; }
.store-card .delivery-link--foodpanda img { height: 1.3rem; }