/**
 * iOS-style Search Component
 * 
 * Поле поиска в стиле iOS с иконкой лупы и кнопкой очистки
 * Переиспользуемый компонент для различных страниц списков
 * 
 * Использование:
 * <link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
 * 
 * HTML структура:
 * <div class="ios-search">
 *   <i class="bi bi-search"></i>
 *   <input type="text" class="ios-search-input" placeholder="Поиск...">
 *   <button class="ios-search-clear" type="button">
 *     <i class="bi bi-x-lg"></i>
 *   </button>
 * </div>
 */

/* ===== CSS ПЕРЕМЕННЫЕ ДЛЯ ОТСТУПОВ ===== */
:root {
  --ios-search-padding-left: 36px;
  --ios-search-padding-right: 36px;
  --ios-search-icon-left: 10px;
  --ios-search-clear-right: 4px;
}

/* ===== Контейнер поиска ===== */
.ios-search {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* ===== Поле ввода ===== */
.ios-search-input {
  width: 100%;
  height: 40px;
  padding-left: var(--ios-search-padding-left);
  padding-right: var(--ios-search-padding-right);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  border-radius: 14px;
  border: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-body-bg), #000 4%);
  font-size: 15px;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* Скрываем нативный крестик браузера у type="search" */
.ios-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.ios-search-input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

.ios-search-input::-ms-clear {
  display: none;
}

/* Тёмная тема */
[data-bs-theme="dark"] .ios-search-input {
  background: color-mix(in srgb, var(--bs-body-bg), #fff 6%);
}

/* Фокус */
.ios-search-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
  background: var(--bs-body-bg);
}

/* Placeholder */
.ios-search-input::placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.6;
}

/* ===== Иконка поиска (лупа) ===== */
.ios-search > .bi-search {
  position: absolute;
  left: var(--ios-search-icon-left);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
  font-size: 0.95rem;
  color: var(--bs-body-color);
}

/* ===== Кнопка очистки ===== */
.ios-search-clear {
  position: absolute;
  right: var(--ios-search-clear-right);
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: var(--space-1);
  display: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.ios-search-clear:hover {
  background: color-mix(in srgb, var(--bs-body-color), transparent 90%);
}

.ios-search-clear:active {
  background: color-mix(in srgb, var(--bs-body-color), transparent 85%);
}

.ios-search-clear .bi-x-lg {
  opacity: 0.6;
  font-size: 0.9rem;
  color: var(--bs-body-color);
}

/* Показываем кнопку очистки когда есть текст */
.ios-search-input:not(:placeholder-shown) ~ .ios-search-clear {
  display: block;
}

/* ===== Вариации размеров ===== */

/* Маленький размер */
.ios-search.sm .ios-search-input {
  height: 34px;
  font-size: 14px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  border-radius: 12px;
}

.ios-search.sm > .bi-search {
  left: 8px;
  font-size: 0.85rem;
}

.ios-search.sm .ios-search-clear {
  right: 3px;
  padding: var(--space-1);
}

/* Большой размер */
.ios-search.lg .ios-search-input {
  height: 48px;
  font-size: 16px;
  padding-left: 42px;
  padding-right: 42px;
  padding-top: calc(var(--space-1) + var(--space-1));
  padding-bottom: calc(var(--space-1) + var(--space-1));
  border-radius: 16px;
}

.ios-search.lg > .bi-search {
  left: 12px;
  font-size: 1.1rem;
}

.ios-search.lg .ios-search-clear {
  right: 6px;
  padding: var(--space-1);
}

/* ===== Вариация: только иконка без кнопки очистки ===== */
.ios-search.icon-only .ios-search-input {
  padding-right: 12px;
}

.ios-search.icon-only .ios-search-clear {
  display: none !important;
}

/* ===== Адаптивность ===== */
@media (max-width: 576px) {
  .ios-search {
    max-width: 100%;
  }
  
  .ios-search-input {
    height: 38px;
    font-size: 14px;
  }
}