/* ===== PAYMENT-METHOD CHOOSER (#screen-paymethod) =====
 *
 * Task #9 (11-field-findings-4.md, docs/plans/07-payment-methods.md). Its own
 * sheet because style.css is FROZEN (00-contracts.md §5 [A3]); linked last in
 * index.html so these rules win by cascade order without !important.
 *
 * Deliberately built from the tip screen's vocabulary (.tip-content /
 * .tip-grid / .tip-btn) rather than something new: this screen sits one tap
 * before it in the same journey, and two checkout screens that look unrelated
 * read as two different kiosks. The one departure is the fixed two-column grid
 * — Group B (task #10) adds two more buttons to the same list, so the columns
 * have to survive four tiles without a rewrite.
 */

#screen-paymethod { background: var(--white); }

.paymethod-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 80px;
}

.paymethod-emoji { font-size: 96px; margin-bottom: 24px; }
.paymethod-title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
  max-width: 800px;
}
.paymethod-sub { font-size: 22px; color: var(--mid-gray); margin-bottom: 48px; }

.paymethod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 760px;
}
/* A kiosk offering one method never renders this screen at all (app.js skips
   the state), so a single tile can only mean a render bug — but if it happens,
   one full-width button beats one half-width button floating left. */
.paymethod-grid:has(> :only-child) { grid-template-columns: 1fr; }

.paymethod-btn {
  border: 2px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cream);
  padding: 34px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.paymethod-btn:active {
  transform: scale(0.96);
  border-color: var(--red);
  background: #FFF4F5;
}

.paymethod-btn-icon { font-size: 52px; }
.paymethod-btn-label { font-size: 30px; font-weight: 800; color: var(--dark); }
.paymethod-btn-en { font-size: 18px; font-weight: 600; color: var(--mid-gray); }

/* "SZÉP kártyával borravaló nem adható." — printed under the tile, not raised
 * as a dialog after the tap. The guest is choosing between two cards and the
 * only difference they can act on is this one; telling them afterwards would
 * be telling them once the choice is already made. Empty (and hidden) on a
 * kiosk with tips switched off, where the sentence would be noise. */
.paymethod-btn-note {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mid-gray);
  margin-top: 4px;
  max-width: 260px;
}
.paymethod-btn-note:empty { display: none; }