/* S9 styles (s9-shared) -- consumes pomio.css tokens only; no new global tokens here. */

/* ---------------------------------------------------------------- phone input (phoneInput.js) */
.s9-phone-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.s9-phone-cc {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-primary); min-width: 88px; padding: 0 28px 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  background: var(--input-bg); color: var(--text); font-size: 14px; white-space: nowrap;
}
/* chevron */
.s9-phone-cc::after {
  content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none;
}
.s9-phone-cc:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.s9-phone-cc.is-disabled { opacity: .6; }
/* the native select stays the accessible control; it only covers the visible label */
.field .s9-phone-cc select.s9-phone-country,
.s9-phone-cc select.s9-phone-country {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0;
  opacity: 0; cursor: pointer; border: 0; font-size: 16px;
}
.s9-phone-cc select:disabled { cursor: not-allowed; }
.field .s9-phone-row input.s9-phone-number { flex: 1 1 auto; min-width: 0; min-height: var(--tap-primary); }
.s9-phone-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.s9-phone-hint.is-warning { color: var(--warning-text); }
.s9-phone-hint[hidden] { display: none; }

@media (max-width: 480px) {
  /* 16px avoids iOS zoom-on-focus */
  .field .s9-phone-row input.s9-phone-number { font-size: 16px; }
  .s9-phone-cc { min-width: 84px; padding-left: 10px; }
}

/* ---------------------------------------------------------------- phone display (telHref / formatPhoneDisplay) */
.s9-phone-link { color: inherit; text-decoration: none; white-space: nowrap; }
.s9-phone-link:hover, .s9-phone-link:focus-visible { color: var(--accent-text); text-decoration: underline; }

/* ---------------------------------------------------------------- amounts (money.js) */
.s9-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.s9-amount.is-negative { color: var(--danger-text); }

/* ---------------------------------------------------------------- brand colour preview (brandTheme.js) */
.s9-brand-swatch {
  display: inline-block; width: 20px; height: 20px; border-radius: 6px; vertical-align: middle;
  border: 1px solid var(--border-strong); background: var(--swatch, var(--accent));
}
.s9-brand-sample {
  display: inline-flex; align-items: center; min-height: var(--tap-primary); padding: 0 16px;
  border-radius: var(--radius-button); background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.s9-brand-errors { margin: 6px 0 0; padding-left: 18px; color: var(--danger-text); font-size: 12.5px; }