/*
 * Общие состояния формы для любого дизайна контура: телефонная маска и ошибки.
 * Геометрию маски phone-mask.js снимает с реального input.
 */
[data-phone-mask-shell] {
  position: relative;
}

[data-phone-mask-shell] input[data-phone-mask] {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

[data-phone-mask-visual] {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

[data-phone-mask-shell][data-mask-ready="true"] [data-phone-mask-visual] {
  visibility: visible;
}

[data-ss-form] .ss-trap {
  display: none !important;
}

[data-ss-form] [data-ss-error][hidden] {
  display: none !important;
}

[data-phone-mask-visual] [data-phone-mask-fixed],
[data-phone-mask-visual] [data-phone-mask-digit][data-filled="true"] {
  color: transparent;
}

[data-ss-form] input[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .2) !important;
}

[data-ss-form] [data-invalid="true"] {
  color: #dc2626 !important;
}

[data-ss-form] [data-invalid="true"] input[type="checkbox"] {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}