.confirmation-toggle { justify-content: flex-start; gap: 10px; }
.confirmation-title { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.confirmation-title label { cursor: pointer; }
.confirmation-title .info-button {
  flex: 0 0 18px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; background: #c8cdd3; color: white;
  font-size: 13px; line-height: 18px; font-weight: 700;
  transition: background-color 160ms ease;
}
.info-button:hover { background-color: #8c97a5; }
.info-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: var(--tip-left, 0px); width: min(320px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 10px; background: #454f5c; color: white;
  font-size: 14px; font-weight: 400; line-height: 1.5; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.info-tooltip::before { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; }
.info-tooltip::after {
  content: ""; position: absolute; left: var(--tip-arrow, 20px); bottom: -3px;
  width: 6px; height: 6px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px;
}
.confirmation-title.info-open .info-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .info-tooltip, .confirmation-title .info-button { transition: none; }
}