/* ============================================================
 * City chips autocomplete widget — used in spontaneous job
 * application form (/apply). Renders inside group_cv between
 * the CV upload and the message field.
 * ============================================================ */

.ville-chips-wrapper {
  margin: 1rem 0 1.5rem;
  
}

.ville-chips-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
  font-size: 0.95rem;
  color: #1a2e5a;
}

.ville-chips-label em {
  font-style: italic;
  font-weight: 400;
  color: #1a2e5a;
}

.ville-chips-label .form-required {
  color: #1a2e5a;
  margin-left: 2px;
}

/* The rounded box containing chips + search input */
.ville-chips-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 2.5rem 0.6rem 1rem;
  border: 5px solid #B8D1EC !important;
  border-radius: 8px;
  background-color: #fff;
  min-height: 48px; 
  height: auto;
  cursor: text;
  transition: border-color 0.15s ease-in-out;
}

.ville-chips-area:focus-within {
  border-color: #1a2e5a;
}

/* Magnifier icon (right side) */
.ville-chips-area::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a2e5a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Search input — invisible inside the chip area */
.ville-chips-area .ville-search-input,
.ville-chips-area input.ville-search-input.form-text {
  flex: 1;
  min-width: 120px;
  padding: 0.2rem 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 1rem;
  color: #1a2e5a;
}

.ville-chips-area .ville-search-input:disabled {
  cursor: not-allowed;
}

/* Chips */
.ville-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem;
  background-color: #c8dff3;
  border-radius: 20px;
  color: #1a2e5a;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.ville-chip-label {
  display: inline-block;
}

.ville-chip-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background-color: #1a2e5a;
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.ville-chip-remove:hover,
.ville-chip-remove:focus {
  background-color: #0d1e3d;
  outline: none;
}

/* jQuery UI autocomplete dropdown — same theme */
.ui-autocomplete .ui-menu-item {
  padding: 6px 12px;
  color: #1a2e5a;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: #c8dff3;
  border: none;
  color: #1a2e5a;
}

label.ville-chips-label {
  display: block !important;
}

.ville-chips-area .js-form-item-ville-search {
  flex: 1 1 120px;
  min-width: 120px;
  width: auto;
}