/*!
 * smit-input — поле ввода: иконки, приставка и окончание, кнопка вплотную,
 * очистка, показ пароля, счётчик. Пара с smit-input.js.
 * Подпись, подсказка и текст ошибки берутся у .smit-field (smit-ui.css).
 */

.smit-input.is-block { width: 100%; }

.smit-input-box {
  position: relative; display: flex; align-items: stretch; min-width: 0;
}
.smit-input-box .smit-input-el {
  flex: 1 1 auto; min-width: 0;
  /* цвет рамки берём общий: у Bootstrap он свой, и в одном контроле
     получалось три разных оттенка — приставка, поле и кнопка */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
/* стык с приставкой: одна линия на двоих, углы шва прямые */
.smit-input-fix + .smit-input-el {
  border-left: 0;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* стык с кнопкой */
.smit-input-box.has-action > .smit-input-el {
  border-right: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* фокус подсвечивает весь контрол, а не одну его часть */
.smit-input-box:focus-within .smit-input-fix,
.smit-input-box:focus-within .smit-input-action { border-color: var(--focus-outline); }
.smit-input-box .smit-input-el:focus {
  border-color: var(--focus-outline);
  box-shadow: var(--shadow-sm);
  outline: none;
}

/* приставка и окончание — часть поля, а не отдельный блок */
.smit-input-fix {
  display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--border-subtle); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-muted); color: var(--text-muted);
  font-size: var(--sc-fz-sm); white-space: nowrap;
}
.smit-input-fix.right {
  border-right: 1px solid var(--border-subtle); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.smit-input-el:has(+ .smit-input-fix.right) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* иконки внутри поля */
.smit-input-ic {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; font-size: .9em;
}
.smit-input-ic.left { left: 11px; }
.smit-input-ic.right { right: 11px; }
.smit-input-box:has(.smit-input-ic.left) .smit-input-el { padding-left: 32px; }
.smit-input-box:has(.smit-input-ic.right) .smit-input-el,
.smit-input-box:has(.smit-input-btn-x) .smit-input-el,
.smit-input-box:has(.smit-input-eye) .smit-input-el { padding-right: 34px; }

/* крестик очистки и «глазик» пароля */
.smit-input-btn-x, .smit-input-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
}
.smit-input-btn-x:hover, .smit-input-eye:hover { color: var(--text-primary); background: var(--surface-muted); }
.smit-input-btn-x:focus-visible, .smit-input-eye:focus-visible {
  outline: 2px solid var(--focus-outline); outline-offset: 1px;
}

/* кнопка вплотную к полю: одна рамка на двоих, без зазора */

.smit-input-action {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-muted); color: var(--text-primary);
  font-family: inherit; font-size: var(--sc-fz-sm); font-weight: 600; white-space: nowrap;
}
.smit-input-action:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.smit-input-action:disabled { opacity: .55; cursor: not-allowed; }
.smit-input-action:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: -2px; }
.smit-input-action.tone-primary {
  background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
.smit-input-action.tone-primary:hover:not(:disabled) { background: var(--brand-primary-dark); color: #fff; }

/* счётчик символов */
.smit-input-count {
  align-self: flex-end; margin-top: 3px;
  font-size: var(--sc-fz-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* Размеры. Высоту задаём явно: у .form-control она набирается вертикальными
   отступами Bootstrap (~38px), и min-height её не ужимает — поле оказывалось
   выше кнопки рядом. */
.smit-input.size-sm .smit-input-el, .smit-input.size-sm .smit-input-action,
.smit-input.size-sm .smit-input-fix {
  height: var(--ctl-h-sm); padding-top: 0; padding-bottom: 0; font-size: var(--sc-fz-xs);
}
.smit-input.size-md .smit-input-el, .smit-input.size-md .smit-input-action,
.smit-input.size-md .smit-input-fix {
  height: var(--ctl-h-md); padding-top: 0; padding-bottom: 0; font-size: var(--sc-fz-sm);
}
.smit-input.size-lg .smit-input-el, .smit-input.size-lg .smit-input-action,
.smit-input.size-lg .smit-input-fix {
  height: var(--ctl-h-lg); padding-top: 0; padding-bottom: 0; font-size: var(--sc-fz-md);
}
/* textarea живёт по своим правилам: высота у неё в строках */
.smit-input textarea.smit-input-el { height: auto; padding-top: 6px; padding-bottom: 6px; }

/* ошибка: рамка поля и кнопки заодно, иначе кнопка выглядит «не с этим полем» */
.smit-field.err .smit-input-action { border-color: var(--smit-state-danger); }

/* ── телефон: кнопка под полем, иначе на неё не хватает ширины ── */
@media (max-width: 575.98px) {
  .smit-input-box.has-action { flex-wrap: wrap; }
  .smit-input-box.has-action > .smit-input-el {
    border-right: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); width: 100%;
  }
  /* приставка на телефоне остаётся слева от поля, но поле переносится под неё
     целиком — иначе на 360px от ввода остаётся сантиметр */
  .smit-input-fix + .smit-input-el { border-left: 1px solid var(--border-subtle); }
  .smit-input-action {
    width: 100%; justify-content: center; margin-top: 6px;
    border-radius: var(--radius-sm); height: 44px;
  }
  /* ⚠ селекторы той же силы, что и размеры выше: иначе кнопка оставалась
     32px рядом с 44-пиксельным полем — на телефоне это видно сразу */
  .smit-input.size-sm .smit-input-el, .smit-input.size-md .smit-input-el,
  .smit-input.size-lg .smit-input-el,
  .smit-input.size-sm .smit-input-action, .smit-input.size-md .smit-input-action,
  .smit-input.size-lg .smit-input-action,
  .smit-input.size-sm .smit-input-fix, .smit-input.size-md .smit-input-fix,
  .smit-input.size-lg .smit-input-fix { height: 44px; }
  .smit-input textarea.smit-input-el { height: auto; }
}