/* Zelle / Venmo rows in the block checkout's Payment step. */
.simms-zv-option {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.simms-zv-option__name {
  font-weight: 600;
}
.simms-zv-option__pill {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(43 141 133 / 0.12);
  color: #1f6f69;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
/* Square app icons, one size for both. Beats WooCommerce's 24px rule for payment-label images. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label .simms-zv-option img.simms-zv-option__logo {
  flex: none;
  width: 26px;
  height: 26px;
  max-height: 26px;
  margin-inline-start: auto;
}
/* WooCommerce wraps the label in a span that doesn't stretch; let the logo reach the right edge. */
.wc-block-components-radio-control__label:has(> .simms-zv-option),
.wc-block-components-payment-method-label:has(> .simms-zv-option) {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.simms-zv-steps {
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.55;
}
.simms-zv-steps ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-inline-start: 20px;
}
.simms-zv-steps strong {
  font-weight: 600;
}
.simms-zv-steps__note {
  margin: 0;
  opacity: 0.6;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* WooCommerce outlines a checkout radio on any focus (packages-style.css, `__input:focus`), so a mouse click
   leaves a second ring around the selected option until the checkout re-renders. Keep it for keyboard focus only.
   Covers every block radio on the checkout (shipping too), since this file loads there. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus:not(:focus-visible) {
  outline: none;
}