/* ------------------------------------------------------------------
   Поиск по фотографии — стили модуля.

   Файл отдельный и подключается вместе с assets/search-photo.js: хостинг
   отдаёт css с кэшем на год, поэтому у файла своя версия в ссылке, а править
   style.css на семнадцати страницах ради одной кнопки не нужно.
   ------------------------------------------------------------------ */

.photo-btn__text { margin-left: 2px; }

.photo-box { display: flex; align-items: center; gap: 14px; }
.photo-box__prev {
  width: 96px; height: 96px; object-fit: cover; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.photo-box__state { margin: 0; color: var(--ink-2); max-width: 74ch; }
.photo-box__state--bad { color: #9a3b22; }   /* единственный красный в системе — только для ошибок */

/* display:flex перебивает атрибут hidden — закрываем это явно, иначе плашка
   висит пустой строкой */
.photo-box[hidden], .photo-float[hidden] { display: none; }

/* «По фото» в шапке: иконка без подписи, строка в шапке узкая */
.search-inline__photo {
  flex: none; display: inline-flex; align-items: center;
  border: 0; background: transparent; color: var(--ink-2); padding: 2px; border-radius: 999px;
}
.search-inline__photo:hover { color: var(--ink); }
.search-inline__photo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Состояние фото-поиска на страницах без плашки: полоска снизу экрана */
.photo-float {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(760px, calc(100vw - 32px));
  padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-lift);
}
.photo-float img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.photo-float__text { font-size: .86rem; color: var(--ink-2); }

/* Перетаскивание фото на страницу: подсказка поверх всего */
.photo-drop { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; }
.photo-drop.on { display: grid; background: rgba(23, 25, 27, .42); }
.photo-drop__card {
  background: var(--surface); color: var(--ink); border-radius: var(--r-md);
  padding: 20px 28px; font-size: .97rem; box-shadow: var(--shadow-lift);
  border: 2px dashed var(--accent);
}

@media (max-width: 620px) {
  .photo-btn__text { display: none; }        /* на узком экране остаётся иконка */
  .photo-box__prev { width: 72px; height: 72px; }
  .photo-float { bottom: 12px; padding: 10px 14px; }
}