/* ═══════════════════════════════════════════════════════════════════════
   NanoFarm · ОКНО «БЫСТРЫЙ ЗАПРОС ЦЕНЫ» (.nf-qq-*)
   Одна прокрутка, ровные поля, список оборудования с фото,
   кнопка отправки закреплена внизу. Подключается последним.
   ═══════════════════════════════════════════════════════════════════════ */

html body {
  --qq-card: #ffffff;
  --qq-field: #f5f6f6;
  --qq-field-h: #f0f2f2;
  --qq-line: rgba(55, 53, 54, 0.1);
  --qq-line-2: rgba(55, 53, 54, 0.16);
  --qq-text: #1f1e1f;
  --qq-muted: #77736f;
  --qq-teal: #4da0a9;
  --qq-teal-ink: #2f7f88;
  --qq-teal-soft: rgba(77, 160, 169, 0.1);
  --qq-thumb: #eef2f2;
  --qq-pad: 32px;
}
html[data-theme="dark"] body {
  --qq-card: #242324;
  --qq-field: #2e2d2e;
  --qq-field-h: #333233;
  --qq-line: rgba(255, 255, 255, 0.08);
  --qq-line-2: rgba(255, 255, 255, 0.14);
  --qq-text: #f2f1f0;
  --qq-muted: #a6a3a1;
  --qq-teal-ink: #6fb8c0;
  --qq-teal-soft: rgba(77, 160, 169, 0.16);
  --qq-thumb: #f5f5f5;
}

/* фон под окном */
html body .nf-modal.nf-modal-visible:has(.nf-qq-shell) {
  background: rgba(20, 19, 20, 0.42) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* само окно */
html body .nf-modal-inner.nf-qq-shell {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 28px !important;
  border: 1px solid var(--qq-line) !important;
  background: var(--qq-card) !important;
  box-shadow: 0 40px 90px -30px rgba(20, 19, 20, 0.45) !important;
  overflow: hidden !important;
  display: flex !important;
}
html body .nf-qq-shell .nf-qq-left { display: none !important; }
html body .nf-qq-shell .nf-qq-right {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  max-height: inherit !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* закрыть */
html body .nf-qq-shell .nf-qq-close-btn.nf-icon-btn {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 5;
  margin: 0 !important;
}

/* единственная прокрутка */
html body .nf-qq-shell .nf-qq-right-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 30px var(--qq-pad) 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--qq-line-2) transparent;
}
html body .nf-qq-shell .nf-qq-right-scroll::-webkit-scrollbar { width: 8px; }
html body .nf-qq-shell .nf-qq-right-scroll::-webkit-scrollbar-thumb { background: var(--qq-line-2); border-radius: 8px; border: 2px solid var(--qq-card); }

/* заголовок */
html body .nf-qq-shell .nf-qq-right-head { padding: 0 56px 0 0 !important; margin: 0 0 24px !important; border: 0 !important; background: none !important; }
html body .nf-qq-shell .nf-qq-right-title {
  padding: 0 !important;
  margin: 0 0 6px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--qq-text) !important;
}
html body .nf-qq-shell .nf-qq-right-sub { margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--qq-muted) !important; }

/* форма без лишних отступов — выровнена по заголовку */
html body .nf-qq-shell form#quickQuoteForm { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body .nf-qq-shell .nf-qq-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 14px !important;
  margin: 0 0 26px !important;
}
html body .nf-qq-shell .nf-qq-field { display: flex !important; flex-direction: column !important; gap: 7px !important; margin: 0 !important; min-width: 0; }
html body .nf-qq-shell .nf-qq-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--qq-text) !important;
}
html body .nf-qq-shell .nf-qq-label em { font-style: normal; color: var(--qq-teal) !important; margin-left: 2px; }
html body .nf-qq-shell input.nf-qq-input {
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: var(--qq-field) !important;
  color: var(--qq-text) !important;
  font-size: 14.5px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}
html body .nf-qq-shell input.nf-qq-input::placeholder { color: var(--qq-muted) !important; opacity: 0.75; }
html body .nf-qq-shell input.nf-qq-input:hover { background: var(--qq-field-h) !important; }
html body .nf-qq-shell input.nf-qq-input:focus {
  outline: none !important;
  background: var(--qq-card) !important;
  border-color: rgba(77, 160, 169, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(77, 160, 169, 0.14) !important;
}
html body .nf-qq-shell .nf-field-error { font-size: 12px !important; line-height: 1.3 !important; margin: 0 !important; }
html body .nf-qq-shell .nf-field-error:empty { display: none !important; }

/* оборудование */
html body .nf-qq-shell .nf-qq-picker-section { margin: 0 0 8px !important; }
html body .nf-qq-shell .nf-qq-picker-header { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 10px !important; }
html body .nf-qq-shell .nf-qq-picker-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--qq-text) !important;
}
html body .nf-qq-shell .nf-qq-sel-count {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: var(--qq-teal-soft) !important;
  color: var(--qq-teal-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 0 !important;
}
html body .nf-qq-shell .nf-qq-chips { display: flex; flex-wrap: wrap; gap: 6px !important; padding: 0 !important; margin: 0 0 10px !important; background: none !important; border: 0 !important; }
html body .nf-qq-shell .nf-qq-chips[hidden],
html body .nf-qq-shell .nf-qq-chips:empty { display: none !important; }
html body .nf-qq-shell .nf-qq-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 6px 0 12px !important;
  border-radius: 999px !important;
  background: var(--qq-teal-soft) !important;
  border: 0 !important;
  color: var(--qq-teal-ink) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
html body .nf-qq-shell .nf-qq-chip-rm { width: 20px !important; height: 20px !important; border-radius: 50% !important; border: 0 !important; background: rgba(77, 160, 169, 0.18) !important; color: inherit !important; display: grid !important; place-items: center !important; padding: 0 !important; }

html body .nf-qq-shell .nf-qq-picker-wrap {
  border-radius: 18px !important;
  border: 1px solid var(--qq-line) !important;
  background: var(--qq-card) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body .nf-qq-shell .nf-qq-picker-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--qq-line) !important;
  background: transparent !important;
}
html body .nf-qq-shell .nf-qq-picker-search-row svg { color: var(--qq-muted) !important; flex: none; }
html body .nf-qq-shell input.nf-qq-picker-search {
  flex: 1 !important;
  height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--qq-text) !important;
  padding: 0 !important;
}
html body .nf-qq-shell .nf-qq-picker-count { font-size: 12px !important; color: var(--qq-muted) !important; white-space: nowrap; }

html body .nf-qq-shell .nf-qq-picker-list {
  max-height: 292px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--qq-line-2) transparent;
}
html body .nf-qq-shell .nf-qq-picker-list::-webkit-scrollbar { width: 6px; }
html body .nf-qq-shell .nf-qq-picker-list::-webkit-scrollbar-thumb { background: var(--qq-line-2); border-radius: 6px; }
html body .nf-qq-shell .nf-qq-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px 8px 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  cursor: pointer;
  transition: background-color 0.2s !important;
}
html body .nf-qq-shell .nf-qq-item + .nf-qq-item { margin-top: 2px; }
html body .nf-qq-shell .nf-qq-item:hover { background: var(--qq-field) !important; }
html body .nf-qq-shell .nf-qq-item.nf-qq-item--sel { background: var(--qq-teal-soft) !important; }
html body .nf-qq-shell .nf-qq-item-thumb {
  position: relative;
  flex: none !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: var(--qq-thumb) !important;
  overflow: hidden !important;
  border: 0 !important;
}
html body .nf-qq-shell .nf-qq-item-thumb img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
html body .nf-qq-shell .nf-qq-item-info { flex: 1 !important; min-width: 0 !important; }
html body .nf-qq-shell .nf-qq-item-name {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  color: var(--qq-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .nf-qq-shell .nf-qq-item-meta {
  margin-top: 3px;
  font-size: 12.5px !important;
  color: var(--qq-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .nf-qq-shell .nf-qq-item-toggle {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--qq-line-2) !important;
  background: var(--qq-card) !important;
  color: var(--qq-text) !important;
  box-shadow: none !important;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s !important;
}
html body .nf-qq-shell .nf-qq-item:hover .nf-qq-item-toggle { border-color: rgba(77, 160, 169, 0.6) !important; color: var(--qq-teal-ink) !important; }
html body .nf-qq-shell .nf-qq-item-toggle[aria-pressed="true"] {
  background: linear-gradient(180deg, #5cb2bb, #43949d) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html body .nf-qq-shell .nf-qq-picker-empty { padding: 28px 12px !important; text-align: center; color: var(--qq-muted) !important; font-size: 14px; }

/* кнопка отправки — закреплена внизу окна */
html body .nf-qq-shell .nf-qq-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3;
  margin: 18px calc(-1 * var(--qq-pad)) 0 !important;
  padding: 16px var(--qq-pad) 24px !important;
  background: var(--qq-card) !important;
  border-top: 1px solid var(--qq-line) !important;
}
html body .nf-qq-shell .nf-qq-actions .nf-qq-submit.nf-btn { width: 100% !important; height: 52px !important; font-size: 15px !important; }
html body .nf-qq-shell .nf-qq-success { margin-top: 12px !important; border-radius: 14px !important; }

/* телефон: окно-лист снизу, поля в одну колонку */
@media (max-width: 600px) {
  html body {
    --qq-pad: 20px;
  }
  html body .nf-modal.nf-modal-visible:has(.nf-qq-shell) { align-items: flex-end !important; padding: 0 !important; }
  html body .nf-modal-inner.nf-qq-shell {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important;
  }
  html body .nf-qq-shell .nf-qq-right-scroll { padding-top: 24px !important; }
  html body .nf-qq-shell .nf-qq-close-btn.nf-icon-btn { top: 14px !important; right: 14px !important; }
  html body .nf-qq-shell .nf-qq-right-title { font-size: 21px !important; }
  html body .nf-qq-shell .nf-qq-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  html body .nf-qq-shell .nf-qq-picker-list { max-height: 240px !important; }
}