/* =========================================================================
   Sayed AB - Receipt / voucher action buttons                     v262

   Fixes the broken button row inside the receipt card (pricing.html) and
   the matching row in the Receipt Generator (portal.html).

   What was wrong: `.receipt-actions .btn` carried `min-width:130px` and
   `.gt-actions .btn` carried `min-width:150px`, while both cards are
   narrow. Three buttons were therefore forced onto one row with less width
   than their labels needed, so every label broke onto two lines, the icons
   ended up sitting beside a two-line text block, and the buttons finished
   at three different heights - exactly the unaligned, oversized mess in the
   screenshot.

   What this does: gives each button a real flex basis so a row only holds
   as many buttons as genuinely fit, keeps every label on one line, locks
   icon + text onto one centred line, and makes all buttons the same height.
   Loaded after style-v229.css so it wins cleanly.
   ========================================================================= */

.receipt,
.receipt-actions,
.gt-actions {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.receipt-actions,
.gt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.receipt-actions .btn,
.gt-actions .btn {
  /* grow to fill the row, but never sit narrower than the label needs */
  flex: 1 1 180px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

/* keep icons a fixed size and on the text's centre line */
.receipt-actions .btn .btn-ico,
.receipt-actions .btn > svg,
.gt-actions .btn .btn-ico,
.gt-actions .btn > svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  vertical-align: 0;
}

/* the site-wide icon nudge-on-hover would break the centring here */
.receipt-actions .btn:hover .btn-ico,
.gt-actions .btn:hover .btn-ico {
  transform: none;
}

/* ---- phones: one full-width button per row ----------------------------- */
@media (max-width: 560px) {
  .receipt-actions .btn,
  .gt-actions .btn {
    flex: 1 1 100%;
    font-size: 13.5px;
  }
}

/* ---- very narrow phones: allow a graceful two-line label --------------- */
@media (max-width: 330px) {
  .receipt-actions .btn,
  .gt-actions .btn {
    white-space: normal;
    padding: 10px 12px;
  }
}