/**
 * @file
 * Theme overrides for Tom Select (searchable Județ / Oraș / Specialitate),
 * matching the Medici input styling. Loaded after tom-select.css.
 */

/* Tom Select copies the original <select>'s classes (including .form-select)
   onto the wrapper. Neutralise our global select styling there so the wrapper
   does not draw a second border / chevron around the real control. */
.ts-wrapper.form-select {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  appearance: auto;
}

/* The control is the styled box. Fixed height + centered content keeps the
   padding even and stops any shift between resting and focused states. */
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
  --ts-pr-min: 34px;
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  box-sizing: border-box;
  height: var(--control-h-md);
  min-height: var(--control-h-md);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-900);
  background: var(--white);
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: var(--transition-base);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--blue-600);
  box-shadow: var(--shadow-focus);
}

.ts-control .item {
  color: var(--ink-900);
  line-height: 1.2;
}

.ts-control > input {
  font-size: 0.9375rem;
  color: var(--ink-900);
  line-height: 1.2;
}

.ts-control > input::placeholder {
  color: var(--gray-500);
}

/* Single-select: keep everything on one line; while focused, hide the chosen
   value so the search cursor stays inline (not wrapped under the item). */
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
  cursor: pointer;
}

.ts-wrapper.single.focus .ts-control > .item {
  display: none;
}

/* Single caret (our chevron), inside the control, non-interactive so the whole
   control — including the arrow — opens the dropdown on click. */
.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 0;
  pointer-events: none;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA5B0' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Dropdown */
.ts-dropdown {
  margin-top: 4px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-body);
  font-size: 0.9rem;
  overflow: hidden;
}

.ts-dropdown .option {
  padding: 8px 12px;
  color: var(--ink-900);
}

.ts-dropdown .option.active {
  background: var(--blue-050);
  color: var(--blue-600);
}

.ts-dropdown .ts-dropdown-content {
  max-height: 280px;
}

.ts-dropdown .no-results {
  padding: 8px 12px;
  color: var(--gray-500);
}

.views-exposed-form .form-item .ts-wrapper {
  width: 100%;
}

/* ---- Compact variant for the persistent bar on inner pages ---- */
.region-hero-search .views-exposed-form {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-2);
}

.region-hero-search .views-exposed-form label {
  font-size: 0.75rem;
  margin-bottom: 2px;
}

.region-hero-search .views-exposed-form .form-item {
  min-width: 150px;
  max-width: 210px;
  gap: 3px;
}

.region-hero-search .ts-wrapper .ts-control,
.region-hero-search .views-exposed-form input[type="text"],
.region-hero-search .views-exposed-form input[type="search"],
.region-hero-search .views-exposed-form .form-text {
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  font-size: 0.875rem;
}

.region-hero-search .views-exposed-form .form-submit {
  height: var(--control-h-sm);
  font-size: 0.85rem;
  padding: 0 14px;
}