/* Consent of the payment panel and the footer of the tip page */

/* Consent: a native checkbox drawn as the mockup's square, a tick when checked */
.checkbox {
  appearance: none;
  position: relative;
  flex: none;
  inline-size: var(--checkbox);
  block-size: var(--checkbox);
  border: var(--border) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  cursor: pointer;
}
.checkbox[data-state="invalid"] { border-color: var(--color-invalid); }
.checkbox:checked { background: var(--color-accent); border-color: var(--color-accent); }
.checkbox:checked::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--tick-x);
  inset-block-start: var(--tick-y);
  inline-size: var(--tick-w);
  block-size: var(--tick-h);
  border: solid var(--color-on-accent);
  border-width: 0 var(--border-focus) var(--border-focus) 0;
  transform: rotate(var(--tick-angle));
}
.consent-text { font-size: var(--size-xs); line-height: var(--leading-compact); }
.consent-text label { cursor: pointer; }

.link {
  padding: 0;
  font-size: inherit;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

.foot { padding-block-end: var(--space-xs); text-align: center; font-size: var(--size-s); color: var(--color-text-muted); }
.foot b { color: var(--color-text); }
.foot .link { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.logos { padding: var(--space-m) var(--space-sm); border-radius: var(--radius-l); background: var(--color-surface); }
.logos img { inline-size: 100%; block-size: auto; }