/* apply.html, step 6: choosing the payment method (card / bit). Owner: F.
   Kept out of apply.css on purpose (another agent owns it). Loaded after apply.css. */

.pay-methods {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
  min-width: 0;
  text-align: start;
}
.pay-methods__title {
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-900);
}
.pay-methods__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .pay-methods__grid { grid-template-columns: 1fr 1fr; } }

.pay-method {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-4);
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.pay-method:hover { border-color: var(--blue-300); }
.pay-method:has(input:checked) { border-color: var(--blue-700); background: var(--sky-50); }
.pay-method:has(input:focus-visible) { outline: 3px solid var(--blue-500); outline-offset: 2px; }

/* The radio stays a real, focusable control (keyboard + screen readers), drawn as a round mark in the corner. */
.pay-method input {
  flex: none;
  order: 3;
  margin: 2px 0 0;
  margin-inline-start: auto;
  width: 22px; height: 22px;
  accent-color: var(--blue-700);
  cursor: pointer;
}
.pay-method__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--sky-100);
  color: var(--blue-700);
}
.pay-method__icon svg { width: 26px; height: 26px; }
.pay-method:has(input:checked) .pay-method__icon { background: var(--blue-700); color: var(--white); }
.pay-method__text { display: grid; gap: 4px; min-width: 0; }
.pay-method__name { font-weight: 700; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pay-method__desc { font-size: .9rem; color: var(--muted); line-height: 1.45; }