/**
 * Payment method picker — styles for pic-card.js.
 *
 * Used inside the onboarding module (which sets --pic-* custom properties) and on
 * the standalone demo page (which does not), so every colour has a fallback.
 */

.pic-pay {
  margin: 18px 0 0;
  font-family: inherit;
  color: var(--pic-ink, #24242b);
}

.pic-pay *,
.pic-pay *::before,
.pic-pay *::after { box-sizing: border-box; }

/* ---------- The four choices ---------- */
.pic-pay__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 560px) {
  .pic-pay__tabs { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.pic-pay__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1.5px solid var(--pic-line, #dee2e6);
  border-radius: var(--pic-radius-sm, 6px);
  background: var(--pic-surface, #fff);
  color: var(--pic-ink-2, #4c4c4c);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.pic-pay__tab:hover:not(:disabled) { border-color: var(--pic-line-strong, #c2c8cf); }

.pic-pay__tab:focus-visible {
  outline: 2px solid var(--pic-accent, #1a6b3c);
  outline-offset: 2px;
}

.pic-pay__tab[aria-pressed="true"] {
  border-color: var(--pic-accent, #1a6b3c);
  background: var(--pic-accent-soft, #e8f4ec);
  color: var(--pic-ink, #24242b);
  font-weight: 600;
}

.pic-pay__tab:disabled { opacity: 0.6; cursor: progress; }

.pic-pay__icon { display: inline-flex; color: inherit; }
.pic-pay__tab[aria-pressed="true"] .pic-pay__icon { color: var(--pic-accent, #1a6b3c); }

/* ---------- The open method ---------- */
.pic-pay__panel { margin-top: 16px; }
.pic-pay__panel[hidden] { display: none; }

/* Space is reserved before Stripe draws, so nothing jumps when it arrives. */
.pic-pay__mount { min-height: 56px; }
.pic-pay__panel[data-panel="card"] .pic-pay__mount,
.pic-pay__panel[data-panel="bank"] .pic-pay__mount { min-height: 150px; }

.pic-pay__panel.is-loading .pic-pay__mount {
  border-radius: var(--pic-radius-sm, 6px);
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 50%, #eef0f2 75%);
  background-size: 200% 100%;
  animation: pic-pay-shimmer 1.2s linear infinite;
}

@keyframes pic-pay-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .pic-pay__panel.is-loading .pic-pay__mount { animation: none; }
}

.pic-pay__submit {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--pic-radius-sm, 6px);
  background: var(--pic-accent, #1a6b3c);
  color: var(--pic-on-accent, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pic-pay__submit:disabled { opacity: 0.55; cursor: progress; }

.pic-pay__note {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pic-ink-3, #6c757d);
}
.pic-pay__note[hidden] { display: none; }

.pic-pay__alt {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pic-accent-ink, #145a32);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Messages ---------- */
.pic-pay__status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pic-ink-2, #4c4c4c);
  word-break: break-word;
}
.pic-pay__status--err { color: var(--pic-warn-ink, #c0303e); }
.pic-pay__status--ok { font-weight: 600; }

.pic-pay__cta { margin: 0 0 8px; font-weight: 600; font-size: 15px; text-align: center; }