/* ============================================================
   Printer Tag Search Widget — printertagsearch.css
   Compatible with Hummingbird theme (Bootstrap 5 base)
   ============================================================ */

/* ── Widget card ─────────────────────────────────────────── */
.pts-widget {
  margin-bottom: 1.25rem;
  overflow: visible;
}

.pts-widget__header {
  padding: 0.65rem 1rem;
	background: #fff;
}

.pts-widget__title {
  margin: 0;
  font-size: calc(var(--bs-body-font-size)*1.25);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #111;
}

.pts-widget__body {
  padding: 1rem;
}

/* ── Steps ───────────────────────────────────────────────── */
.pts-step {
  margin-bottom: 0.85rem;
  transition: opacity 0.2s ease;
}

.pts-step--locked {
  opacity: 0.45;
  pointer-events: none;
}

.pts-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0945c4;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  cursor: default;
}

.pts-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Combo (input + dropdown) ────────────────────────────── */
.pts-combo {
  position: relative;
}

.pts-input {
  width: 100%;
	border:1px solid #bbd;
  font-size: 0.875rem;
  padding-right: 2rem; /* room for chevron if desired */
}

.pts-input:focus {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.2);
}

/* ── Dropdown list ───────────────────────────────────────── */
.pts-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pts-dropdown__item {
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-body-color, #212529);
}

.pts-dropdown__item:hover,
.pts-dropdown__item--focused {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}

/* ── Go button ───────────────────────────────────────────── */
.pts-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: opacity 0.15s ease, transform 0.1s ease;
  margin-top: 0.25rem;
}

.pts-go:not(:disabled):active {
  transform: scale(0.97);
}

.pts-go:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner while loading */
.pts-go--loading svg {
  animation: pts-spin 0.7s linear infinite;
}

@keyframes pts-spin {
  to { transform: rotate(360deg); }
}

/* ── Status messages ─────────────────────────────────────── */
.pts-status {
  margin-top: 0.6rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  font-size: 0.8rem;
}

.pts-status--info {
  background: var(--bs-info-bg-subtle, #cff4fc);
  color: var(--bs-info-text-emphasis, #055160);
  border: 1px solid var(--bs-info-border-subtle, #9eeaf9);
}

.pts-status--warning {
  background: var(--bs-warning-bg-subtle, #fff3cd);
  color: var(--bs-warning-text-emphasis, #664d03);
  border: 1px solid var(--bs-warning-border-subtle, #ffecb5);
}

.pts-status--error {
  background: var(--bs-danger-bg-subtle, #f8d7da);
  color: var(--bs-danger-text-emphasis, #58151c);
  border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
}

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 575px) {
  .pts-widget__body {
    padding: 0.75rem;
  }
}