/* Extra styles for the customer payment pages (on top of the portal's pamui.css). */

[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; margin: 12px 0 0; }
.center { text-align: center; }
.spaced { margin-top: 18px; }
.card h2, .state-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.state-title.ok { color: var(--ok); }
.card p { margin: 0 0 10px; }
.card a { color: var(--blue); }
.card a.btn { color: #fff; }
.card a.btn.ghost { color: var(--ink); }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  padding: 14px 12px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.choice input:checked + .choice-body { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); background: var(--card); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--blue); outline-offset: 2px; }
.choice-name { font-size: 18px; font-weight: 700; }
.choice-price { font-size: 13px; color: var(--muted); }
.choice-price b { font-size: 20px; color: var(--ink); font-weight: 800; }
.choice .badge {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--gold);
  color: #3a2800;
  font-size: 11px;
  font-weight: 700;
}

.phone-input { font-size: 22px; letter-spacing: 0.06em; }

.timer { margin: 14px 0 4px; padding: 16px; border-radius: 14px; background: var(--blue-soft); text-align: center; }
.timer small { display: block; font-size: 13px; color: var(--muted); }
.timer b { display: block; font-size: 34px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }

.big-code {
  margin: 6px 0 4px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.ok-note { padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); color: var(--ink); }

.privacy p { margin: 0; font-size: 14px; color: var(--muted); }
.privacy b { color: var(--ink); }

.my-order { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.my-order:last-child { border-bottom: 0; }
.my-code { font-size: 20px; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; }

.pay-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; font-size: 14px; }
.pay-links a { color: var(--muted); }