/* smit-tariff-select — build 1557. Тёмная тема + мобильно. */
.stf { position: relative; display: block; }

.stf-trigger {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; min-height: 40px;
  background: #fff; border: 1px solid #ced4da; border-radius: 8px;
  cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.stf-trigger:hover { border-color: #43b77a; }
.stf-trigger:focus-visible { outline: 2px solid #43b77a; outline-offset: 1px; }
.stf-trig-empty { color: #8a94a6; flex: 1; }
.stf-trig-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.stf-trig-name { font-weight: 600; color: #212529; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stf-trig-meta { font-size: 11px; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stf-trig-meta i { margin-right: 2px; opacity: .8; }
.stf-trig-meta .fa-arrow-down { color: #2b8a3e; }
.stf-trig-meta .fa-arrow-up { color: #1971c2; }
.stf-chev { margin-left: auto; color: #adb5bd; font-size: 12px; flex: none; }

.stf-cover {
  flex: none; border-radius: 6px; object-fit: cover;
  background: #eef1f5; display: inline-flex; align-items: center; justify-content: center;
}
.stf-cover-ph { color: #9aa4b2; }
.stf-cover-ph i { font-size: 13px; }

.stf-menu {
  position: absolute; z-index: 3000; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e0e4ea; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); overflow: hidden;
}
.stf-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #eef1f5; }
.stf-search i { color: #adb5bd; font-size: 13px; }
.stf-search input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: #212529; }
.stf-list { max-height: 320px; overflow-y: auto; padding: 4px; }

.stf-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; transition: background .12s;
}
.stf-item:hover { background: #f1f8f4; }
.stf-item.sel { background: #e6f4ec; }
.stf-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.stf-item-name { font-weight: 600; color: #212529; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stf-item-meta { display: flex; gap: 10px; font-size: 11px; color: #6c757d; margin-top: 1px; }
.stf-sp i { margin-right: 3px; }
.stf-sp .fa-arrow-down { color: #2b8a3e; }
.stf-sp .fa-arrow-up { color: #1971c2; }
.stf-price { flex: none; font-weight: 700; font-size: 13px; color: #43b77a; white-space: nowrap; }
.stf-check { flex: none; color: #43b77a; font-size: 13px; opacity: 0; margin-left: 4px; }
.stf-item.sel .stf-check { opacity: 1; }
.stf-empty { padding: 16px; text-align: center; color: #adb5bd; font-size: 13px; }

/* ── тёмная тема ── */
[data-bs-theme="dark"] .stf-trigger,
.dark-theme .stf-trigger,
body.dark-theme .stf-trigger {
  background: #2b3245; border-color: #3d4658; color: #e9ecf1;
}
[data-bs-theme="dark"] .stf-trig-name,
.dark-theme .stf-trig-name,
body.dark-theme .stf-trig-name { color: #e9ecf1; }
[data-bs-theme="dark"] .stf-menu,
.dark-theme .stf-menu,
body.dark-theme .stf-menu {
  background: #262c3b; border-color: #3d4658; box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .stf-search,
.dark-theme .stf-search,
body.dark-theme .stf-search { border-bottom-color: #333b4d; }
[data-bs-theme="dark"] .stf-search input,
.dark-theme .stf-search input,
body.dark-theme .stf-search input { color: #e9ecf1; }
[data-bs-theme="dark"] .stf-item:hover,
.dark-theme .stf-item:hover,
body.dark-theme .stf-item:hover { background: #2f3849; }
[data-bs-theme="dark"] .stf-item.sel,
.dark-theme .stf-item.sel,
body.dark-theme .stf-item.sel { background: #2b3b32; }
[data-bs-theme="dark"] .stf-item-name,
.dark-theme .stf-item-name,
body.dark-theme .stf-item-name { color: #e9ecf1; }
[data-bs-theme="dark"] .stf-cover,
.dark-theme .stf-cover,
body.dark-theme .stf-cover { background: #333b4d; }

/* ── мобильно ── */
@media (max-width: 575.98px) {
  .stf-trigger { min-height: 44px; }
  .stf-item { padding: 9px 10px; }
  .stf-list { max-height: 60vh; }
  .stf-item-meta { gap: 8px; }
  .stf-price { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .stf-trigger, .stf-item { transition: none; }
}