/* The cart page and the order ticket. Same cream and coffee-brown as the rest of BrewLink; the
   header is the brown bar the customize page uses (.customize-header in style.css). */

.cart-page {
  min-height: calc(100vh / var(--fit, 1));
  color: #1d1815;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    #f6f0ec;
  font-family: 'Josefin Sans', sans-serif;
}

.cart-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(18px, 4vw / var(--fit, 1), 34px) clamp(14px, 4vw / var(--fit, 1), 32px) 64px;
}

.cart-title {
  margin: 0 0 4px;
  text-align: center;
  color: #1d1815;
  font-size: clamp(1.7rem, 4.4vw / var(--fit, 1), 2.3rem);
}

.cart-sub {
  margin: 0 0 24px;
  text-align: center;
  color: #786357;
  font-weight: 600;
}

/* why the order didn't go through, and a guest's limits (orders.guest) */
.cart-alert,
.cart-guest {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  border-radius: 12px;
}

.cart-alert { color: #7d1f18; background: #fdeeec; border: 1px solid #f3cbc5; }
.cart-guest { color: #4a3527; background: #f6efe8; border: 1px solid #e2d3c5; }
.cart-alert i, .cart-guest i { flex: none; margin-top: 1px; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

/* ---------- one drink ---------- */
.cart-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--bl-white, #fff);
  border-radius: var(--bl-radius-lg, 14px);
  box-shadow: var(--bl-shadow-card, 0 5px 14px rgba(29,24,21, 0.12));
  transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
}

.cart-item:hover {
  box-shadow: var(--bl-shadow-card-hover, 0 10px 20px rgba(29,24,21, 0.16));
}

.cart-anim .cart-item { animation: cartIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.cart-item.is-leaving { opacity: 0; transform: translateX(28px) scale(0.97); }

@keyframes cartIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}

/* a little cup drawn from what is really in the drink, stacked the way the cup pours */
.cart-cup {
  position: relative;
  width: 56px;
  height: 84px;
  justify-self: center;
  filter: drop-shadow(0 0 0.6px rgba(87,59,42, 0.9)) drop-shadow(0 5px 4px rgba(29,24,21, 0.2));
}

.cart-cup::before {                 /* the straw */
  content: "";
  position: absolute;
  top: -14px;
  left: 62%;
  width: 5px;
  height: 78px;
  background: #f2ece7;
  border-radius: 3px;
  transform: rotate(9deg);
}

.cart-cup::after {                  /* the rim */
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

.cart-cup-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}

.cart-cup-body i { display: block; flex: none; }

/* a hot coffee: no straw */
.cart-cup--hot::before { display: none; }

/* off the Café Hans Menu: made the café's way, so an icon of what it is instead of the layers */
.cart-pic {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 64px;
  height: 64px;
  font-size: 1.9rem;
  color: #3d5a32;
  background: #e5ede0;
  border-radius: 18px;
}

.cart-cup-body i.is-ice {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0 4px, rgba(190, 220, 235, 0.95) 4px 8px);
}

/* ---------- what is in it ---------- */
.cart-info h2 {
  margin: 0;
  font-size: 1.2rem;
  color: #1d1815;
}

.cart-size {
  margin-left: 6px;
  color: #786357;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* a named drink still says what it is under its name */
.cart-kind { margin: 2px 0 0; font-size: 0.82rem; font-weight: 700; color: #786357; }

/* the customer's own name for the drink: a small box with a pencil, and Save -- and under it, the
   same for a note to the barista */
.cart-name { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 8px 0 2px; }
.cart-note { margin-top: 4px; }

/* a drink's note to the barista, on the ticket, the receipt and the tracking page */
.item-note { display: block; margin-top: 2px; font-style: italic; color: #62412d; overflow-wrap: anywhere; }

.cart-name__box {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  color: #786357;
  background: #f9f6f3;
  border: 1px solid #e4dcd5;
  border-radius: 999px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.cart-name__box:focus-within { background: #fff; border-color: #62412d; box-shadow: 0 0 0 3px rgba(98, 65, 45, 0.15); }
.cart-name__box i { flex: none; font-size: 0.9rem; }

.cart-name__box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1d1815;
  background: transparent;
  border: 0;
  outline: none;
}

.cart-name__box input::placeholder { color: #938379; opacity: 1; }

.cart-name__save {
  flex: none;
  height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  color: #62412d;
  background: transparent;
  border: 1.5px solid #d9cec4;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cart-name__save:hover,
.cart-name__save:focus-visible { background: #f7efe9; border-color: #62412d; }

.cart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.cart-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #faf7f5;
  border: 1px solid #e9e0d9;
  border-radius: 999px;
}

.cart-chip i {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

.cart-meta {
  margin: 0;
  color: #786357;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- price, quantity, remove ---------- */
.cart-buy {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.cart-price { color: #786357; font-size: 0.85rem; font-weight: 600; }
.cart-price small { font-size: 0.72rem; }
.cart-line { font-size: 1.25rem; font-weight: 700; }

.cart-qty {
  display: inline-flex;
  align-items: center;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--bl-brown, #62412d);
  border-radius: var(--bl-radius-pill, 999px);
  box-shadow: 0 2px 6px rgba(29,24,21, 0.12);
}

.cart-qty button {
  width: 34px;
  height: 32px;
  padding: 0;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  color: #62412d;
  background: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.cart-qty button:hover:not(:disabled) { color: #fff; background: #62412d; }
.cart-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty span { min-width: 30px; text-align: center; font-weight: 700; }

.cart-remove,
.cart-clear {
  padding: 2px 4px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a3221b;
  background: none;
  border: 0;
  cursor: pointer;
}

.cart-remove:hover,
.cart-clear:hover { text-decoration: underline; }

/* ---------- summary ---------- */
.cart-summary {
  position: sticky;
  top: 16px;
  padding: 20px;
  background: var(--bl-white, #fff);
  border-radius: var(--bl-radius-lg, 16px);
  box-shadow: var(--bl-shadow-card, 0 5px 14px rgba(29,24,21, 0.12));
}

.cart-summary h2 { margin: 0 0 12px; font-size: 1.25rem; }

.cart-summary dl { margin: 0 0 16px; }

.cart-summary dl div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #e9e0d9;
  font-weight: 600;
}

.cart-summary dt, .cart-summary dd { margin: 0; }
.cart-total { font-size: 1.25rem; font-weight: 700; border-bottom: 0 !important; }

.cart-summary form { margin: 10px 0 0; text-align: center; }

.cart-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  border-radius: var(--bl-radius-pill, 10px);
  border: 2px solid var(--bl-brown, #62412d);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.cart-btn:hover { transform: translateY(-2px); }

.cart-btn--primary {
  color: #fff;
  background: var(--bl-grad-brown, linear-gradient(180deg, #7d553c 0%, #62412d 100%));
  box-shadow: var(--bl-shadow-btn, 0 6px 14px rgba(29,24,21, 0.3));
}

.cart-btn--primary:hover { color: #fff; background: var(--bl-grad-brown-hover, #16110f); box-shadow: var(--bl-shadow-btn-hover, none); }

.cart-btn--ghost { color: #62412d; background: #fff; }
.cart-btn--ghost:hover { color: #fff; background: #62412d; }

.ticket-btn-short { display: none; }     /* phones only, see the end of the file */

.ticket-fav-btn.is-active { color: #a3221b; border-color: #a3221b; }
.ticket-fav-btn.is-active:hover { color: #fff; background: #a3221b; }

/* ---------- empty cart ---------- */
.cart-empty {
  max-width: 420px;
  margin: 28px auto 0;
  padding: 34px 24px 28px;
  text-align: center;
  background: var(--bl-white, #fff);
  border-radius: var(--bl-radius-lg, 16px);
  box-shadow: var(--bl-shadow-card, 0 5px 14px rgba(29,24,21, 0.12));
}

.cart-empty h2 { margin: 18px 0 6px; font-size: 1.4rem; }
.cart-empty p { margin: 0 0 8px; color: #786357; font-weight: 600; }
.cart-empty-cup {
  display: block;
  width: 116px;
  height: auto;
  margin: 2px auto 0;
  filter: drop-shadow(0 8px 6px rgba(29,24,21, 0.18));
}

/* ---------- the order ticket: a receipt hanging out of a printer ---------- */
.receipt-stage {
  --paper: #fdfefd;
  --ink: #181310;
  --ink-soft: #66756d;
  --rule: #d3cfcc;
  --red: #b3261e;
  max-width: 440px;
  margin: 0 auto 34px;
}

.receipt-printer {
  position: relative;
  z-index: 2;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, #5c473b 0%, #201b18 16%, #140f0d 58%, #0d0806 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 16px 26px -10px rgba(13, 9, 7, 0.6);
}

.receipt-printer::before {          /* gloss along the top */
  content: "";
  position: absolute;
  top: 3px;
  left: 14px;
  right: 14px;
  height: 42%;
  border-radius: 12px 12px 40% 40% / 12px 12px 8px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.receipt-printer::after {           /* the lip the paper comes out of */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -9px;
  height: 12px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #080503, #191411);
  box-shadow: 0 3px 5px rgba(13, 9, 7, 0.35);
}

.receipt-printer__brand {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.3);
  font: 700 0.62rem/1 'JetBrains Mono', ui-monospace, Consolas, monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.receipt-printer__led {             /* amber while printing, green once done */
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #4be08f;
  box-shadow: 0 0 7px 2px rgba(75, 224, 143, 0.55);
}

/* Starts just inside the printer, and clips only its top edge: the paper is hidden until it feeds
   out below the lip, while its shadow still shows to the sides and underneath. */
.receipt-slot {
  position: relative;
  z-index: 1;
  margin: -4px 24px 0;
  clip-path: inset(0 -60px -90px -60px);
}

.receipt-slot::before {             /* the printer's shadow falling on the paper */
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: linear-gradient(180deg, rgba(13, 9, 7, 0.24), rgba(13, 9, 7, 0));
  pointer-events: none;
}

.receipt-paper {
  transform-origin: 50% 0;
  filter: drop-shadow(0 12px 16px rgba(29, 24, 21, 0.14)) drop-shadow(0 2px 3px rgba(29, 24, 21, 0.1));
}

.receipt {
  position: relative;
  padding: 26px 22px 20px;
  color: var(--ink);
  background: var(--paper);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}

.receipt::after {                   /* zigzag tear along the bottom */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 7px;
  margin-top: -1px;
  background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 50% 0 / 14px 100% repeat-x;
}

.receipt p { margin: 0; }

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.receipt-brand { font-size: 1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.receipt-kind { margin-top: 3px !important; color: var(--ink-soft); font-size: 0.68rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.receipt-logo { width: 46px; height: auto; flex: none; mix-blend-mode: multiply; }

.receipt-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  margin: 18px 0 16px;
  padding: 8px 10px;
  background: #f1f0ee;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.receipt-band h1 { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; line-height: inherit; }

.receipt-amount {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
}

.receipt-big { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }

.receipt .status {                  /* the live status pill, stamped like a receipt mark */
  padding: 4px 9px;
  font-size: 0.64rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-width: 1.5px;
  border-radius: 4px;
}

.receipt-meta {
  margin-top: 6px !important;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.receipt-lines {
  margin: 16px 0 0;
  padding: 12px 0;
  list-style: none;
  border-top: 1.5px dashed var(--rule);
  border-bottom: 1.5px dashed var(--rule);
}

.receipt-lines li + li { margin-top: 10px; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.receipt-row > span:last-child { white-space: nowrap; }
.receipt-detail { margin-top: 2px !important; color: var(--ink-soft); font-size: 0.7rem; }

.receipt-sums { margin: 12px 0 0; }
.receipt-sums div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #544a44; }
.receipt-sums dt, .receipt-sums dd { margin: 0; font-weight: 400; }
.receipt-discount dd { color: var(--red); }

.receipt-grand {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px solid #3d332d;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.receipt-note { margin-top: 16px !important; text-align: center; color: var(--ink-soft); font-size: 0.72rem; }
.receipt-warning { color: var(--red); }

.receipt-pay {
  margin-top: 16px;
  padding: 10px 12px;
  text-align: center;
  background: #fdeeec;
  border: 1.5px dashed var(--red);
  border-radius: 4px;
}

.receipt-pay__title { color: var(--red); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.5px; }
.receipt-pay__sub { margin-top: 4px !important; color: var(--ink-soft); font-size: 0.68rem; }

.receipt-thanks {
  max-width: 30ch;
  margin: 20px auto 4px !important;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.6;
  text-transform: uppercase;
}

/* who took the payment: fine print under everything, so it never gets in the way of the receipt */
.receipt-cashier {
  margin: 8px 0 0 !important;
  text-align: center;
  font-size: 0.56rem;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* The print run, only right after Order Now. The printer drops in, then feeds the receipt out of
   its slot like a real one: the bottom comes out first and the header last, one line per step, the
   printer twitching with each line and its light blinking amber. Then the paper is torn off (it
   swings a little), the light goes green and the buttons come up.
   --feed-steps is how many lines there are; ticket.js counts them for the order's real length.
   Set on the page, not the stage, so the buttons after the stage can time themselves by it too. */
.ticket-page {
  --feed-steps: 40;
  --feed-step: 75ms;
  --feed-time: calc(var(--feed-steps) * var(--feed-step));
}

@media (prefers-reduced-motion: no-preference) {
  .is-printing .receipt-printer {
    animation: printerIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both,
               printerBuzz var(--feed-step) linear 0.6s var(--feed-steps);
  }

  .is-printing .receipt-printer__led { animation: ledBlink calc(var(--feed-time) / 10) linear 0.6s 10; }

  /* the feed holds the paper up inside the printer until it starts (backwards), and the tear
     takes over the moment it ends */
  .is-printing .receipt-paper {
    animation: receiptFeed var(--feed-time) steps(var(--feed-steps), end) 0.6s backwards,
               receiptTear 0.8s ease-out calc(var(--feed-time) + 0.6s);
  }

  .receipt-stage.is-printing + .ticket-actions { animation: receiptActionsIn 0.45s ease-out calc(var(--feed-time) + 0.9s) both; }
}

@keyframes printerIn {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}

@keyframes printerBuzz {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-0.6px, 0.3px); }
  75%      { transform: translate(0.6px, -0.3px); }
}

@keyframes ledBlink {
  0%, 49%   { background: #ffb020; box-shadow: 0 0 9px 3px rgba(255, 176, 32, 0.6); }
  50%, 100% { background: #6e5a25; box-shadow: none; }
}

/* out of the slot, bottom first: the slot's clip hides whatever is still inside the printer */
@keyframes receiptFeed {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* torn off: it swings from the printer and settles */
@keyframes receiptTear {
  0%   { transform: none; }
  30%  { transform: rotate(0.7deg); }
  65%  { transform: rotate(-0.35deg); }
  100% { transform: none; }
}

@keyframes receiptActionsIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .receipt-slot { margin-left: 14px; margin-right: 14px; }
  .receipt-printer::after { left: 8px; right: 8px; }
  .receipt { padding: 22px 16px 18px; font-size: 0.78rem; }
  .receipt-big { font-size: 1.7rem; }
}

.ticket-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.ticket-actions { flex-wrap: wrap; }
.ticket-actions form { flex: 1; margin: 0; }
.ticket-actions > .cart-btn { flex: 1; }
.ticket-actions > .ticket-track-btn { flex-basis: 100%; }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 820px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
}

@media (max-width: 560px) {
  .cart-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .cart-cup { width: 46px; height: 70px; }

  .cart-buy {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    padding-top: 10px;
    border-top: 1px dashed #e9e0d9;
  }

  .cart-price { display: none; }
  .cart-line { justify-self: end; }
  .cart-buy form:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-anim .cart-item { animation: none; }
  .cart-item { transition: none; }
}

/* the ticket prints on its own: no bars, no buttons */
@media print {
  .customize-header, .ticket-actions, .site-footer { display: none !important; }
  .cart-page { background: #fff; }
  .receipt-printer, .receipt-slot::before { display: none; }
  .receipt-slot { margin: 0; clip-path: none; }
  .receipt-paper { filter: none; animation: none !important; }
}


/* ---------- order status pills (ticket) ---------- */
.status {
  display: inline-block;
  padding: 4px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.3s, color 0.3s;
}

.status--received  { color: #8a5a0a; background: #fdf1d6; border-color: #efcd7d; }
.status--paid      { color: #62412d; background: #f7efe9; border-color: #c0ceb6; }
.status--preparing { color: #1f5f8b; background: #e3f0fa; border-color: #9cc7e6; }
.status--ready     { color: #1f6b2c; background: #e3f4e6; border-color: #86ca92; }
.status--completed { color: #57473e; background: #f2ece7; border-color: #d9d1cb; }
.status--cancelled { color: #a3221b; background: #fde8e6; border-color: #eaa39d; }

.status.is-new { animation: statusPop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes statusPop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.cart-summary .cart-order { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .status.is-new { animation: none; }
}


/* ---------- order tracking (once the cashier has taken payment) ---------- */
.track {
  max-width: 440px;
  margin: 0 auto 22px;
  padding: 26px 22px 20px;
  text-align: center;
  background: #fafefc;
  border-radius: var(--bl-radius-lg, 16px);
  box-shadow: 0 8px 20px rgba(29,24,21, 0.18);
}

.track-head { padding-bottom: 14px; border-bottom: 2px dashed #ddd2c9; }
.track-kicker {
  margin: 0;
  color: #786357;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.track-number { margin: 4px 0 2px; font-size: 1.7rem; font-weight: 700; letter-spacing: 2px; }
.track-for { margin: 0; font-weight: 600; }

/* what is happening right now: big icon, headline, one line of detail */
.track-now { padding: 22px 0 4px; }
.track-msg h2 { margin: 12px 0 4px; font-size: 1.35rem; font-weight: 700; }
.track-msg p { margin: 0; color: #786357; font-weight: 600; }

.track-msg__icon {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  font-size: 2.1rem;
  border-radius: 50%;
  border: 3px solid;
}

/* same colours as the status pills on the ticket */
.track-msg[data-for="received"]  .track-msg__icon { color: #62412d; background: #f3ece7; border-color: #d9cec4; }
.track-msg[data-for="preparing"] .track-msg__icon { color: #1f5f8b; background: #e3f0fa; border-color: #9cc7e6; }
.track-msg[data-for="ready"]     .track-msg__icon { color: #1f6b2c; background: #e3f4e6; border-color: #86ca92; }
.track-msg[data-for="completed"] .track-msg__icon { color: #57473e; background: #f2ece7; border-color: #d9d1cb; }
.track-msg[data-for="cancelled"] .track-msg__icon { color: #a3221b; background: #fde8e6; border-color: #eaa39d; }

.track-msg[data-for="ready"] h2 { color: #1f6b2c; }
.track-msg[data-for="cancelled"] h2 { color: #a3221b; }

/* the cup bobs gently while it's being made; the bell rings out when it's ready */
.track-msg[data-for="preparing"] .track-msg__icon i { animation: trackBob 1.8s ease-in-out infinite; }
.track-msg[data-for="ready"] .track-msg__icon { animation: trackRing 1.8s ease-out infinite; }
.track-msg.is-new .track-msg__icon { animation: statusPop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes trackBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes trackRing {
  0%   { box-shadow: 0 0 0 0 rgba(31, 107, 44, 0.35); }
  100% { box-shadow: 0 0 0 16px rgba(31, 107, 44, 0); }
}

/* progress bar: Paid -> Preparing -> Ready -> Picked up */
.track-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 22px 0 6px;
  padding: 0;
  list-style: none;
}

.track-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #a18f85;
}

/* the line from the step before up to this one */
.track-step + .track-step::before {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(-50% + 20px);
  right: calc(50% + 20px);
  height: 4px;
  border-radius: 2px;
  background: #e9e0d9;
  transition: background 0.4s;
}

.track-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  color: #a18f85;
  background: #f5efeb;
  border: 2px solid #e9e0d9;
  border-radius: 50%;
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.track-step.is-done .track-step__dot { color: #fff; background: #62412d; border-color: #62412d; }
.track-step.is-current .track-step__dot {
  color: #62412d;
  background: #fff;
  border-color: #62412d;
  box-shadow: 0 0 0 5px rgba(98,65,45, 0.15);
}
.track-step.is-done, .track-step.is-current { color: #1d1815; }
.track-step.is-done::before, .track-step.is-current::before { background: #62412d; }

/* a cancelled order has no progress to show */
.track[data-status="cancelled"] .track-steps { display: none; }

/* what was ordered and paid */
.track-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dashed #ddd2c9;
  text-align: left;
}

.track-lines { margin: 0; padding: 0; list-style: none; }
.track-lines li,
.track-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: #786357;
  font-size: 0.9rem;
  font-weight: 600;
}

.track-discount { color: var(--bl-success, #1f6b2c); }
.track-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed #e9e0d9;
  color: #1d1815;
  font-size: 1.05rem;
  font-weight: 700;
}

@media (max-width: 380px) {
  .track { padding-left: 16px; padding-right: 16px; }
}

/* ---------- phones: bigger things to tap ---------- */
@media (max-width: 560px) {
  .cart-qty button { width: 44px; height: 42px; font-size: 1.3rem; }
  .cart-qty span { min-width: 34px; font-size: 1.05rem; }

  .cart-remove,
  .cart-clear { min-height: 40px; padding: 8px 6px; font-size: 0.92rem; }

  /* ticket and tracking: one full-width button a row, its words centred (side by side they
     wrapped onto two lines, and a one-line neighbour sat at the top of its button) */
  .ticket-actions { flex-direction: column; gap: 10px; }
  .ticket-actions > *,
  .ticket-actions form { flex: none; width: 100%; }

  .ticket-actions .cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 0;
  }

  /* but on the ticket, Order another drink (left) and Favorite (right) share one row, so they fit
     on the screen under the receipt. Two full labels don't fit a phone side by side, so Favorite
     takes its short label and just the room that needs; Order another drink gets the rest. Track
     my order, once it is paid, keeps a row of its own above them. */
  .ticket-page .ticket-actions { flex-direction: row; gap: 10px 8px; }
  .ticket-page .ticket-actions > .cart-btn { flex: 1 1 auto; width: auto; min-width: 0; }
  .ticket-page .ticket-actions > .ticket-track-btn { flex-basis: 100%; }
  .ticket-page .ticket-actions form { display: flex; flex: 0 0 auto; width: auto; }
  .ticket-page .ticket-actions .cart-btn { gap: 6px; padding: 10px 14px; font-size: 0.9rem; line-height: 1.2; }

  .ticket-page .ticket-btn-long {   /* still read out by screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ticket-page .ticket-btn-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .track-msg .track-msg__icon,
  .track-msg .track-msg__icon i { animation: none !important; }
  .track-step::before, .track-step__dot { transition: none; }
}

@media print {
  .track { box-shadow: none; }
}
/* ---------- Cancel order: the customer's own unpaid order, a row of its own under the others ---------- */
.ticket-cancel-btn { color: #a3221b; border-color: #e7b8b3; }
.ticket-cancel-btn i { margin-right: 4px; }
.ticket-cancel-btn:hover,
.ticket-cancel-btn:focus-visible { color: #fff; background: #a3221b; border-color: #a3221b; }

/* ---------- phones, upright: the ticket is exactly one screen. The header and the buttons stay
   put; the receipt takes the room between them and, only if the order is long, scrolls inside
   its own paper. Short or sideways screens scroll the page as before. ---------- */
@media (max-width: 560px) and (min-height: 520px) {
  .ticket-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh / var(--fit, 1));
    height: calc(100dvh / var(--fit, 1));
    min-height: 0;
    overflow: hidden;
  }

  .ticket-page ~ .site-footer { display: none; }

  .ticket-page .customize-header { flex: none; height: 56px; }

  .ticket-page .cart-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .ticket-page .receipt-stage {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin: 0 auto 10px;
  }

  .ticket-page .receipt-printer { flex: none; height: 44px; }

  /* the paper's own scroll box; the side room keeps its shadow in view */
  .ticket-page .receipt-slot {
    flex: 1 1 auto;
    min-height: 0;
    margin: -4px 0 0;
    padding: 0 14px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    clip-path: none;
  }

  .ticket-page .receipt-slot::-webkit-scrollbar { display: none; }

  .ticket-page .ticket-actions { flex: none; width: 100%; }
  .ticket-page .ticket-actions .cart-btn { min-height: 46px; }
}

/* ---------- "Cancel order #0028?": a box on the page, not the browser's own ---------- */
.tk-dialog {
  width: min(92vw / var(--fit, 1), 380px);
  padding: 26px 22px 20px;
  color: #1d1815;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(16, 11, 8, 0.35);
}

.tk-dialog::backdrop { background: rgba(16, 11, 8, 0.5); }

.tk-dialog__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  font-size: 1.7rem;
  color: #a3221b;
  background: #fde8e6;
  border-radius: 50%;
}

.tk-dialog h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.tk-dialog p { margin: 8px 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: #786357; }

.tk-dialog__actions { display: flex; gap: 10px; margin: 20px 0 0; }
.tk-dialog__actions .cart-btn { flex: 1; margin-top: 0; padding: 12px 10px; font-size: 0.95rem; }

.tk-dialog__confirm { color: #fff; background: #a3221b; border-color: #a3221b; }
.tk-dialog__confirm:hover,
.tk-dialog__confirm:focus-visible { color: #fff; background: #861b15; border-color: #861b15; }

@media (prefers-reduced-motion: no-preference) {
  .tk-dialog[open] { animation: tkDialogIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .tk-dialog[open]::backdrop { animation: tkBackdropIn 0.22s ease-out; }
}

@keyframes tkDialogIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

@keyframes tkBackdropIn { from { opacity: 0; } }

/* the Cancel order button is a button now (the box holds the form): its own row as before */
.ticket-actions > .ticket-cancel-btn,
.ticket-page .ticket-actions > .ticket-cancel-btn { flex: 1 1 100%; width: 100%; }

/* ---------- ordered, not paid yet: the order number for the cashier, what to pay, and a pulse
   while the page waits for the payment (then the receipt prints in its place) ---------- */
.pay-first {
  --red: #b3261e;
  --ink: #181310;
  --ink-soft: #66756d;
  max-width: 440px;
  margin: 0 auto 24px;
  padding: 24px 22px 20px;
  text-align: center;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--bl-shadow-card, 0 5px 14px rgba(29, 24, 21, 0.12));
}

.pay-first__label { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #786357; }

.pay-first__number {
  margin: 4px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(3rem, 16vw / var(--fit, 1), 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: #1d1815;
}

.pay-first__amount { margin: 8px 0 0; font-size: 1.4rem; font-weight: 800; color: #1d1815; }
.pay-first__amount span { font-size: 0.9rem; font-weight: 700; color: #786357; }

.pay-first .receipt-pay__title { font-size: 0.95rem; }
.pay-first .receipt-pay__sub { font-size: 0.82rem; }

.pay-first__items {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  text-align: left;
  list-style: none;
  border-top: 1px dashed #d3cfcc;
}

.pay-first__items strong { display: block; font-size: 0.92rem; font-weight: 800; color: #1d1815; }
.pay-first__items small { display: block; font-size: 0.78rem; font-weight: 600; color: #66756d; }

.pay-first__wait { display: grid; justify-items: center; gap: 6px; margin: 16px 0 0; }

.pay-first__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #8a5a0a;
  background: #fdf1d6;
  border: 1px solid #efcd7d;
  border-radius: 999px;
}

.pay-first__status i {
  width: 8px;
  height: 8px;
  background: #d9a21b;
  border-radius: 50%;
  animation: payPulse 1.4s ease-in-out infinite;
}

.pay-first__wait small { font-size: 0.8rem; font-weight: 600; color: #786357; }

@keyframes payPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .pay-first__status i { animation: none; }
}

/* on the one-screen phone ticket, it takes the room the receipt would, scrolling inside if need be */
@media (max-width: 560px) and (min-height: 520px) {
  .ticket-page .pay-first {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin-bottom: 10px;
    padding: 20px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- a computer screen: the ticket's and the tracker's buttons beside them instead of under
   them, so the whole page fits a short monitor without scrolling ---------- */
@media (min-width: 900px) {
  .ticket-page .cart-main,
  .track-page .cart-main {
    display: grid;
    grid-template-columns: minmax(0, 440px) 240px;
    justify-content: center;
    align-items: start;
    gap: 0 28px;
    padding-bottom: 34px;
  }
  .ticket-page .cart-main > *,
  .track-page .cart-main > * { margin: 0; }          /* auto side margins would shrink them in the grid */

  .ticket-page .ticket-actions,
  .track-page .ticket-actions {
    position: sticky;
    top: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: none;
    margin: 0;
  }
  .ticket-page .ticket-actions > *,
  .track-page .ticket-actions > * { flex: none; width: 100%; }
  .ticket-page .ticket-actions .cart-btn,
  .track-page .ticket-actions .cart-btn { width: 100%; margin-top: 0; }
}

@media (min-width: 900px) and (max-height: 800px) {
  .ticket-page .cart-main,
  .track-page .cart-main { padding-top: 18px; padding-bottom: 18px; }
}

/* ---------- Notify me (orders/_notify_button.html, push.js): a row of its own under a phone's
   ticket, green once it's on; its note under it ---------- */
.push-btn { white-space: nowrap; }
.push-btn .bi { margin-right: 6px; }
.push-btn.is-on { color: var(--bl-success, #1f6b2c); border-color: var(--bl-success, #1f6b2c); }
.push-btn.is-on:hover { color: #fff; background: var(--bl-success, #1f6b2c); }
.push-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.push-note { flex: 1 1 100%; margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.35; text-align: center; color: #786357; }

@media (max-width: 899px) {
  .ticket-page .ticket-actions > .push-btn,
  .track-page .ticket-actions > .push-btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .ticket-page .ticket-actions .push-btn .bi { margin-right: 0; }     /* the row's buttons space their icons already */
}

/* Pay online on the ticket (orders.paymongo): the button, the ways PayMongo takes, and how it's going */
.pay-online { margin: 16px 0 0; padding: 14px 14px 12px; background: #f3faf3; border: 1.5px solid #bfdcc0; border-radius: 16px; }
.pay-online form { margin: 0; }
.pay-online__btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; font-size: 1.02rem; background: linear-gradient(180deg, #3f8a52 0%, #2e6a3f 100%); }
.pay-online__btn:hover { background: #255a35; }
.pay-online__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.pay-online__ways span { padding: 3px 10px; font-size: 0.76rem; font-weight: 800; color: #2e6a3f; background: #fff; border: 1px solid #bfdcc0; border-radius: 999px; }
.pay-online__secure { margin: 8px 0 0; font-size: 0.74rem; font-weight: 700; color: #5c7a62; }
.pay-online__problem { margin: 10px 0 0; padding: 8px 10px; font-size: 0.8rem; font-weight: 700; color: #b3261e; background: #fdecea; border-radius: 10px; }
.pay-online__checking { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 0.8rem; font-weight: 700; color: #7a5200; }
.pay-online__checking i { flex: none; width: 8px; height: 8px; background: #d9a21b; border-radius: 50%; animation: payPulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pay-online__checking i { animation: none; } }

/* Pay by QR on the ticket: first that it's pick-up only, then the café's GCash / Maya QR and the reference number */
.qr-pay { margin: 16px 0 0; padding: 14px; text-align: left; background: #f2f6fd; border: 1.5px solid #c3d3ef; border-radius: 16px; }
.qr-pay__heading { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-size: 1.02rem; font-weight: 800; color: #0b3f9e; }
.qr-pay__pickup { padding: 10px 12px; background: #fff7e6; border: 1.5px solid #f0c36d; border-radius: 12px; }
.qr-pay__pickup-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.92rem; font-weight: 800; color: #7a4a00; }
.qr-pay__pickup p { margin: 4px 0 0; font-size: 0.82rem; font-weight: 600; line-height: 1.4; color: #5e4a2a; }
.qr-pay__agree { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 10px; font-size: 0.88rem; font-weight: 800; color: #3d2a0d; background: #fff; border: 1.5px solid #f0c36d; border-radius: 10px; cursor: pointer; }
.qr-pay__agree input { flex: none; width: 20px; height: 20px; accent-color: #0b5bd3; }
.qr-pay__body { margin-top: 12px; text-align: center; }
.qr-pay__body[hidden] { display: none; }
.qr-pay__code { display: block; width: min(240px, 100%); height: auto; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(11, 63, 158, 0.16); }
.qr-pay__send { margin: 10px 0 0; font-size: 0.9rem; font-weight: 700; color: #1b2a44; }
.qr-pay__send strong { font-weight: 800; }
.qr-pay__save { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 8px auto 0; padding: 8px 14px; font-size: 0.86rem; }
.qr-pay__how { margin: 8px 0 0; font-size: 0.76rem; font-weight: 600; line-height: 1.45; color: #4a5a76; }
.qr-pay__form { margin: 14px 0 0; padding-top: 12px; text-align: left; border-top: 1px dashed #c3d3ef; }
.qr-pay__form fieldset { display: flex; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.qr-pay__form legend { margin-bottom: 6px; font-size: 0.8rem; font-weight: 800; color: #1b2a44; }
.qr-pay__app { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; font-size: 0.9rem; font-weight: 800; color: #1b2a44; background: #fff; border: 1.5px solid #c3d3ef; border-radius: 10px; cursor: pointer; }
.qr-pay__app:has(input:checked) { color: #fff; background: #0b5bd3; border-color: #0b3f9e; }
.qr-pay__app input { accent-color: #0b5bd3; }
.qr-pay__form label[for] { display: block; margin-bottom: 4px; font-size: 0.8rem; font-weight: 800; color: #1b2a44; }
.qr-pay__form label small { font-weight: 600; color: #4a5a76; }
.qr-pay__ref { width: 100%; padding: 10px 12px; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: #1b2a44; background: #fff; border: 1.5px solid #c3d3ef; border-radius: 10px; }
.qr-pay__ref:focus { outline: 3px solid rgba(11, 91, 211, 0.25); border-color: #0b5bd3; }
.qr-pay__or { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #4a5a76; }
.qr-pay__or::before, .qr-pay__or::after { content: ""; flex: 1; height: 1px; background: #c3d3ef; }
.qr-pay__file { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 12px; font-size: 0.92rem; font-weight: 800; color: #0b3f9e; background: #fff; border: 1.5px dashed #9db8e6; border-radius: 10px; cursor: pointer; }
.qr-pay__file:hover, .qr-pay__file:focus-within { border-color: #0b5bd3; background: #f7faff; }
.qr-pay__file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qr-pay__file.has-file { color: #1f6b2c; border-style: solid; border-color: #8fbf86; background: #f1f8ef; }
.qr-pay__need { margin: 10px 0 0; padding: 8px 10px; font-size: 0.84rem; font-weight: 800; color: #b3261e; background: #fdecea; border-radius: 10px; }
.qr-pay__need[hidden] { display: none; }
.qr-pay__go { width: 100%; margin-top: 10px; background: linear-gradient(180deg, #1f6fe0 0%, #0b4fb8 100%); }
.qr-pay__go:hover { background: #0b4fb8; }
.qr-pay__problem { margin: 0 0 10px; padding: 8px 10px; font-size: 0.82rem; font-weight: 700; color: #b3261e; background: #fdecea; border-radius: 10px; }
.qr-pay--sent { text-align: center; }
.qr-pay--sent .qr-pay__heading { color: #7a5200; }
.qr-pay--sent p { margin: 4px 0 0; font-size: 0.86rem; font-weight: 600; color: #1b2a44; }
.qr-pay--sent .qr-pay__pickup { margin-top: 10px; text-align: left; }