
.paym { display: grid; gap: 8px; margin: 0 0 18px; }
.paym__opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 72px; padding: 12px 16px 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-2);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.paym__opt:hover { border-color: var(--line-strong); color: var(--fg); }
.paym__opt.is-on {
  color: var(--fg);
  border-color: var(--blue-sky);
  box-shadow: inset 0 0 0 1px var(--blue-sky);
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
}
.paym__opt:disabled { opacity: 0.5; cursor: default; }
.paym__opt:disabled:hover { border-color: var(--line); color: var(--fg-2); }
.paym__opt.is-on:disabled:hover { border-color: var(--blue-sky); color: var(--fg); }

.paym__icons { display: flex; align-items: center; }
.paym__ic {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden;
}
.paym__ic + .paym__ic { margin-left: -12px; box-shadow: -2px 0 0 var(--surface); }
.paym__opt.is-on .paym__ic + .paym__ic { box-shadow: -2px 0 0 color-mix(in srgb, var(--blue) 16%, var(--surface)); }
.paym__ic img { width: 100%; height: 100%; object-fit: contain; }
.paym__ic svg { width: 24px; height: 24px; fill: #1e3a5f; }
.paym__ic--blik { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: #000; letter-spacing: -0.02em; }
.paym__txt { display: grid; gap: 2px; min-width: 0; }
.paym__label { font-size: var(--fs-body); font-weight: 600; line-height: 1.25; color: var(--fg); }
.paym__sub { font-size: var(--fs-fine); font-weight: 500; line-height: 1.35; color: var(--fg-3); text-wrap: pretty; }
.paym__opt.is-on .paym__sub { color: var(--fg-2); }
.paym__dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--fg-3);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.paym__opt.is-on .paym__dot { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 10px #fff; }

.payother { margin: 0 0 18px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }

.blik { margin: 0 0 18px; }
.blik__label {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-small); font-weight: 600; color: var(--fg-2);
}
.blik__input {
  display: block; width: 100%; height: 68px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.16em; text-indent: 0.16em; text-align: center;
  font-variant-numeric: tabular-nums;
  caret-color: var(--blue-sky);
  scroll-margin-bottom: 120px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blik__input::placeholder { color: var(--fg-3); opacity: 0.75; }
.blik__input:hover { border-color: var(--line-strong); }
.blik__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.38); }
.blik__hint { margin-top: 8px; font-size: var(--fs-fine); line-height: 1.45; color: var(--fg-3); text-align: center; text-wrap: balance; }

.paywait {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 20px; padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--fg);
  text-align: left;
}
.paywait__spin {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--blue-sky);
  animation: paywait-spin 0.9s linear infinite;
}
@keyframes paywait-spin { to { transform: rotate(360deg); } }

.payagree {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 20px;
  font-size: 0.875rem; line-height: 1.5; color: var(--fg-2);
  cursor: pointer;
  text-wrap: pretty;
}
.payagree input {
  flex: none;
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin: 1px 0 0;
  border-radius: 6px;
  border: 1.5px solid var(--fg-3);
  background: var(--surface) no-repeat center / 14px 14px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.payagree input:hover { border-color: var(--fg-2); }
.payagree input:checked {
  border-color: var(--blue);
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.payagree input:focus-visible { outline: 2px solid var(--blue-sky); outline-offset: 2px; }
.payagree a {
  color: var(--fg);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

.payfoot {
  margin-top: 16px;
  font-size: var(--fs-fine); line-height: 1.5; color: var(--fg-3);
  text-align: center;
}
.payfoot summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer; list-style: none;
  transition: color var(--dur) var(--ease);
}
.payfoot summary::-webkit-details-marker { display: none; }
.payfoot summary:hover { color: var(--fg-2); }
.payfoot__lock { width: 12px; height: 12px; flex: none; }
.payfoot__more { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.payfoot__body {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.payfoot__body p { margin: 0 0 8px; }
.payfoot__title { font-weight: 600; color: var(--fg-2); }
.payfoot ul, .payfoot ol { margin: 6px 0 8px; padding-left: 1.2em; list-style: disc; }
.payfoot ol { list-style: decimal; }
.payfoot li + li { margin-top: 2px; }
.payfoot a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }

.footer__pay { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78125rem; color: var(--text-dim); }
.footer__pay img { height: 1.125rem; width: auto; }
