/* === Базовый стиль для иконок === */
.icon {
  display: inline-block;
  width: 18px;   /* базовый размер для кнопок */
  height: 18px;
  background-color: var(--text-color); /* линии маски */
}

/* === Маски === */
.calendar-icon {
  -webkit-mask: url("../assets/icons/calendar-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/calendar-icon.svg") no-repeat center / contain;
}
.darkmode-icon {
  -webkit-mask: url("../assets/icons/darkmode-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/darkmode-icon.svg") no-repeat center / contain;
}
.search-icon {
  -webkit-mask: url("../assets/icons/search-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/search-icon.svg") no-repeat center / contain;
}
.clear-icon {
  -webkit-mask: url("../assets/icons/clear-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/clear-icon.svg") no-repeat center / contain;
}
.export-icon {
  -webkit-mask: url("../assets/icons/export-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/export-icon.svg") no-repeat center / contain;
}
.metrics-icon {
  -webkit-mask: url("../assets/icons/metrics-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/metrics-icon.svg") no-repeat center / contain;
}
.summary-icon {
  -webkit-mask: url("../assets/icons/summary-icon.svg") no-repeat center / contain;
  mask: url("../assets/icons/summary-icon.svg") no-repeat center / contain;
}
.expand-icon {
  -webkit-mask: url("../assets/icons/expand.svg") no-repeat center / contain;
  mask: url("../assets/icons/expand.svg") no-repeat center / contain;
}
.fullscreen-icon {
  -webkit-mask: url("../assets/icons/Maximize.svg") no-repeat center / contain;
  mask: url("../assets/icons/Maximize.svg") no-repeat center / contain;
}
.collapse-icon {
  -webkit-mask: url("../assets/icons/collapse.svg") no-repeat center / contain;
  mask: url("../assets/icons/collapse.svg") no-repeat center / contain;
}
.minimize-icon {
  -webkit-mask: url("../assets/icons/Minimize.svg") no-repeat center / contain;
  mask: url("../assets/icons/Minimize.svg") no-repeat center / contain;
}

/* === Календарь внутри input === */
.input-with-icon { position: relative; }
.input-with-icon input {
  width: 100%;
  padding: 4px 32px 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  pointer-events: none;
}
.input-with-icon .calendar-wrapper {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 2px;
  transition: background 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
}
.input-with-icon .calendar-wrapper:hover { background: var(--hover-color); }
.input-with-icon .calendar-wrapper:active { background: var(--active-color); }
.input-with-icon .calendar-icon {
  width: 16px;
  height: 16px;
  background-color: var(--text-color);
}

/* === Кастомные стрелки для input number === */
/* Скрываем нативные стрелки в Chrome/Safari */
#cost-per-action::-webkit-inner-spin-button,
#cost-per-action::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Основные стили для поля ввода */
#cost-per-action {
  -webkit-appearance: textfield; /* Chrome, Safari, Edge (старые версии) */
  -moz-appearance: textfield;    /* Firefox */
  appearance: textfield;         /* Современные браузеры */
  padding-right: 36px;
  box-sizing: border-box;
  height: 36px;
}

/* Контейнер для кастомных стрелок */
.input-with-spinner {
  position: relative;
  display: inline-block;
}

/* Сами стрелки */
.spinner-icons {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;  /* Чтобы клики проходили сквозь контейнер к самим иконкам */
  z-index: 2;
}

.spinner-icons .up,
.spinner-icons .down {
  width: 14px;
  height: 14px;
  background-color: var(--text-color);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease;
  pointer-events: auto;   /* Иконки сами ловят клики */
}

/* Иконки через маски (с префиксами для совместимости) */
.spinner-icons .up {
  -webkit-mask: url("../assets/icons/arrow-up.svg") no-repeat center / contain;
  mask: url("../assets/icons/arrow-up.svg") no-repeat center / contain;
}

.spinner-icons .down {
  -webkit-mask: url("../assets/icons/arrow-down.svg") no-repeat center / contain;
  mask: url("../assets/icons/arrow-down.svg") no-repeat center / contain;
}

/* Состояния при наведении и нажатии */
.spinner-icons .up:hover,
.spinner-icons .down:hover {
  background: var(--hover-color);
}

.spinner-icons .up:active,
.spinner-icons .down:active {
  background: var(--active-color);
}

/* === Логотип XP в фильтр-баре === */
.filter-logo {
  height: var(--filterbar-height);
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.logo-wrapper {
  height: var(--filterbar-height);
  width: var(--filterbar-height);   /* квадрат */
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wallet-icon {
  -webkit-mask: url("../assets/icons/wallet.svg") no-repeat center / contain;
  mask: url("../assets/icons/wallet.svg") no-repeat center / contain;
}

/* Скрываем нативные стрелки для полей в модальном окне */
#campaign-cpa::-webkit-inner-spin-button,
#campaign-cpa::-webkit-outer-spin-button,
#campaign-budget::-webkit-inner-spin-button,
#campaign-budget::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#campaign-cpa,
#campaign-budget {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  padding-right: 36px; /* место для кастомных стрелок */
  box-sizing: border-box;
  height: 36px; /* чтобы соответствовать другим полям */
}

.info-icon {
  -webkit-mask: url("../assets/icons/info.svg") no-repeat center / contain;
  mask: url("../assets/icons/info.svg") no-repeat center / contain;
  width: 18px;
  height: 18px;
  background-color: var(--text-color);
}

.edit-icon {
  -webkit-mask: url("../assets/icons/edit.svg") no-repeat center / contain;
  mask: url("../assets/icons/edit.svg") no-repeat center / contain;
}