/* ── Wrapper ── */
.city-covered-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
}

/* ── Card ── */
.city-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  overflow: visible;
}

.city-card:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.city-card:last-child {
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.city-card:only-child {
  border-radius: 0.5rem;
  border-top: 1px solid #e5e7eb;
}

/* ── Card header ── */
.city-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
}

.city-card__header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Step badge ── */
.city-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #dbeafe;
  color: #1d4ed8;
  font-size: 0.6875rem;
  font-weight: 700;
  user-select: none;
}

/* ── Card title ── */
.city-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

/* ── Status badge ── */
.city-status-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  user-select: none;
}

/* ── Fields row ── */
.city-card__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
}

/* ── Field group ── */
.city-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 200px;
  flex: 1;
}

.city-field-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

/* ── Required asterisk ── */
.city-required {
  color: #dc2626;
}

/* ── Select wrapper (city field) ── */
.city-select-wrapper {
  position: relative;
}

/* ── City text input (Google Maps autocomplete) ── */
.city-select {
  appearance: none;
  -webkit-appearance: none;
  height: 2.25rem;
  padding-left: 0.625rem;
  padding-right: 1.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: 0.8125rem;
  color: #111827;
  cursor: text;
  width: 100%;
  outline: none;
  transition: border-color 150ms ease;
  box-sizing: border-box;
}

.city-select:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px #dbeafe;
}

/* Google maps search container */
.google-map-search-container {
  position: relative;
}

/* ── Tags container (old, kept for compatibility) ── */
.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
  min-height: 1.5rem;
}

.city-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.5rem;
  padding-inline: 0.5rem;
  border-radius: 9999px;
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.6875rem;
  font-weight: 500;
  user-select: none;
}

.city-tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: #3b82f6;
  padding: 0;
  line-height: 1;
  font-size: 0.8rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.city-tag__remove:hover {
  background-color: #bfdbfe;
  color: #1e40af;
}

/* ── Vertical separator ── */
.city-separator {
  display: none;
  width: 1px;
  height: 2.25rem;
  background-color: #e5e7eb;
  flex-shrink: 0;
  margin-inline: 0.125rem;
  align-self: flex-start;
  margin-top: 1.375rem;
}

@media (min-width: 768px) {
  .city-separator {
    display: block;
  }
}

/* ── Summary bar ── */
.city-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  min-height: 36px;
}

.city-summary-bar__text {
  font-size: 0.6875rem;
  color: #9ca3af;
  font-style: italic;
}

.city-summary-bar__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.375rem;
  padding-inline: 0.5rem;
  border-radius: 9999px;
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 0.6875rem;
  font-weight: 500;
}

/* ── Card footer ── */
.city-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

/* ── Buttons ── */
.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding-inline: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  background-color: #ffffff;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.city-btn--default {
  border-color: #d1d5db;
  color: #374151;
}

.city-btn--default:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.city-btn--danger {
  border-color: #fca5a5;
  color: #b91c1c;
}

.city-btn--danger:hover {
  background-color: #fef2f2;
  border-color: #f87171;
}

.city-btn svg {
  flex-shrink: 0;
}

/*.city-card {*/
/*  position: relative;*/
/*  z-index: 1;*/
/*}*/
.city-card,
.city-field-group {
  position: relative;
  z-index: auto;
}

/*.city-field-group {*/
/*  position: relative;*/
/*  z-index: 2;*/
/*}*/

/*.s2-wrapper {*/
/*  position: relative;*/
/*  z-index: 10;*/
/*}*/

/* ============================================================
   SELECT2-STYLE SIGHTSEEING WIDGET  (prefix: s2-)
   ============================================================ */

/* Outer wrapper — positions the dropdown */
.s2-wrapper {
  position: relative;
  width: 100%;
}

/* The "selection box" — mimics Select2's selection area.
   Clicking anywhere inside opens the dropdown. */
.s2-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  cursor: text;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}

.s2-selection:focus,
.s2-selection.s2-open {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px #dbeafe;
}

/* Inline search input — grows to fill remaining space */
.s2-search-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 80px;
  font-size: 0.8125rem;
  color: #111827;
  background: transparent;
  padding: 0.125rem 0.25rem;
  line-height: 1.5;
}

.s2-search-input::placeholder {
  color: #9ca3af;
  font-size: 0.8125rem;
}

/* ── Selected tag pills (inside the selection box) ── */
.s2-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.375rem;
  padding: 0 0.125rem 0 0.5rem;
  border-radius: 0.25rem;
  background-color: #e5edff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.6875rem;
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
  max-width: 160px;
}

.s2-tag__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ✕ button inside each pill */
.s2-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #3b82f6;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 2px;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.s2-tag__remove:hover {
  background-color: #bfdbfe;
  color: #1e40af;
}

/* ── Dropdown list ── */
.s2-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0 0 0.375rem 0.375rem;
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  display: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.s2-dropdown.s2-open {
  display: block;
}

/* Each option row */
.s2-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #111827;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  line-height: 1.4;
  transition: background-color 100ms ease;
}

.s2-option:last-child {
  border-bottom: none;
}

.s2-option:hover,
.s2-option.s2-highlighted {
  background-color: #eff6ff;
  color: #1d4ed8;
}

/* Already-selected options shown with a lighter ticked style */
.s2-option.s2-selected {
  background-color: #dbeafe;
  color: #1e40af;
  font-weight: 500;
}

/* Empty / no results state */
.s2-option--empty {
  color: #9ca3af;
  font-style: italic;
  cursor: default;
}

.s2-option--empty:hover {
  background-color: transparent;
  color: #9ca3af;
}

.s2-wrapper {
  position: relative;
  /*z-index: 999;*/
}

.s2-dropdown {
  position: absolute;
  z-index: 10000;
}
/* ── Nights input (matches city-select styling) ── */
.city-input {
  appearance: none;
  -webkit-appearance: none;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: 0.8125rem;
  color: #111827;
  width: 100%;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}

/* Focus same as other fields */
.city-input:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px #dbeafe;
}

/* Remove number input arrows (optional for cleaner UI) */
.city-input::-webkit-outer-spin-button,
.city-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.city-input[type="number"] {
  -moz-appearance: textfield;
}



/*!* ============================================================*/
/*   city-covered.css — City Covered Card Component*/
/*   All classes prefixed with city-*/
/*   ============================================================ *!*/

/*!* ── Wrapper ── *!*/
/*.city-covered-list {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 0;*/
/*  max-width: 100%;*/
/*}*/

/*!* ── Card ── *!*/
/*.city-card {*/
/*  background-color: #ffffff;*/
/*  border: 1px solid #e5e7eb;*/
/*  overflow: hidden;*/
/*}*/

/*.city-card:first-child {*/
/*  border-radius: 0.5rem 0.5rem 0 0;*/
/*}*/

/*.city-card:last-child {*/
/*  border-top: none;*/
/*  border-radius: 0 0 0.5rem 0.5rem;*/
/*}*/

/*.city-card:only-child {*/
/*  border-radius: 0.5rem;*/
/*  border-top: 1px solid #e5e7eb;*/
/*}*/

/*!* ── Card header ── *!*/
/*.city-card__header {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*  padding: 0.75rem 1rem;*/
/*  border-bottom: 1px solid #e5e7eb;*/
/*  background-color: #ffffff;*/
/*}*/

/*.city-card__header-left {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 0.5rem;*/
/*}*/

/*!* ── Step badge ── *!*/
/*.city-step-badge {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  width: 22px;*/
/*  height: 22px;*/
/*  flex-shrink: 0;*/
/*  border-radius: 50%;*/
/*  background-color: #dbeafe;*/
/*  color: #1d4ed8;*/
/*  font-size: 0.6875rem;*/
/*  font-weight: 700;*/
/*  user-select: none;*/
/*}*/

/*!* ── Card title ── *!*/
/*.city-card__title {*/
/*  font-size: 0.8125rem;*/
/*  font-weight: 600;*/
/*  color: #374151;*/
/*}*/

/*!* ── Status badge ── *!*/
/*.city-status-badge {*/
/*  display: inline-block;*/
/*  font-size: 0.6875rem;*/
/*  font-weight: 500;*/
/*  padding: 0.125rem 0.5rem;*/
/*  border-radius: 9999px;*/
/*  background-color: #fffbeb;*/
/*  color: #b45309;*/
/*  border: 1px solid #fde68a;*/
/*  user-select: none;*/
/*}*/

/*!* ── Fields row ── *!*/
/*.city-card__fields {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  align-items: flex-start;*/
/*  gap: 0.75rem;*/
/*  padding: 1rem;*/
/*}*/

/*!* ── Field group ── *!*/
/*.city-field-group {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 0.25rem;*/
/*  min-width: 200px;*/
/*  flex: 1;*/
/*}*/

/*.city-field-group label {*/
/*  font-size: 0.75rem;*/
/*  font-weight: 500;*/
/*  color: #374151;*/
/*}*/

/*!* ── Required asterisk ── *!*/
/*.city-required {*/
/*  color: #dc2626;*/
/*}*/

/*!* ── Select wrapper ── *!*/
/*.city-select-wrapper {*/
/*  position: relative;*/
/*}*/

/*!* ── Select ── *!*/
/*.city-select {*/
/*  appearance: none;*/
/*  -webkit-appearance: none;*/
/*  height: 2.25rem;*/
/*  padding-left: 0.625rem;*/
/*  padding-right: 1.75rem;*/
/*  border: 1px solid #d1d5db;*/
/*  border-radius: 0.375rem;*/
/*  background-color: #ffffff;*/
/*  background-image: 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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");*/
/*  background-repeat: no-repeat;*/
/*  background-position: right 0.5rem center;*/
/*  font-size: 0.8125rem;*/
/*  color: #111827;*/
/*  cursor: pointer;*/
/*  width: 100%;*/
/*  outline: none;*/
/*  transition: border-color 150ms ease;*/
/*}*/

/*.city-select:focus {*/
/*  border-color: #1d4ed8;*/
/*  box-shadow: 0 0 0 2px #dbeafe;*/
/*}*/

/*!* ── Tags container (selected sightseeing pills) ── *!*/
/*.city-tags {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  gap: 0.375rem;*/
/*  margin-top: 0.375rem;*/
/*  min-height: 1.5rem;*/
/*}*/

/*.city-tag {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.25rem;*/
/*  height: 1.5rem;*/
/*  padding-inline: 0.5rem;*/
/*  border-radius: 9999px;*/
/*  background-color: #eff6ff;*/
/*  color: #1d4ed8;*/
/*  border: 1px solid #bfdbfe;*/
/*  font-size: 0.6875rem;*/
/*  font-weight: 500;*/
/*  user-select: none;*/
/*}*/

/*.city-tag__remove {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  width: 14px;*/
/*  height: 14px;*/
/*  border-radius: 50%;*/
/*  border: none;*/
/*  background: none;*/
/*  cursor: pointer;*/
/*  color: #3b82f6;*/
/*  padding: 0;*/
/*  line-height: 1;*/
/*  font-size: 0.8rem;*/
/*  transition: background-color 150ms ease, color 150ms ease;*/
/*}*/

/*.city-tag__remove:hover {*/
/*  background-color: #bfdbfe;*/
/*  color: #1e40af;*/
/*}*/

/*!* ── Vertical separator ── *!*/
/*.city-separator {*/
/*  display: none;*/
/*  width: 1px;*/
/*  height: 2.25rem;*/
/*  background-color: #e5e7eb;*/
/*  flex-shrink: 0;*/
/*  margin-inline: 0.125rem;*/
/*  align-self: flex-start;*/
/*  margin-top: 1.375rem;*/
/*}*/

/*@media (min-width: 768px) {*/
/*  .city-separator {*/
/*    display: block;*/
/*  }*/
/*}*/

/*!* ── Summary bar ── *!*/
/*.city-summary-bar {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  align-items: center;*/
/*  gap: 0.375rem;*/
/*  padding: 0.5rem 1rem;*/
/*  background-color: #f9fafb;*/
/*  border-top: 1px solid #e5e7eb;*/
/*  min-height: 36px;*/
/*}*/

/*.city-summary-bar__text {*/
/*  font-size: 0.6875rem;*/
/*  color: #9ca3af;*/
/*  font-style: italic;*/
/*}*/

/*.city-summary-bar__pill {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.25rem;*/
/*  height: 1.375rem;*/
/*  padding-inline: 0.5rem;*/
/*  border-radius: 9999px;*/
/*  background-color: #f0fdf4;*/
/*  color: #166534;*/
/*  border: 1px solid #bbf7d0;*/
/*  font-size: 0.6875rem;*/
/*  font-weight: 500;*/
/*}*/

/*!* ── Card footer ── *!*/
/*.city-card__footer {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 0.5rem;*/
/*  padding: 0.625rem 1rem;*/
/*  border-top: 1px solid #e5e7eb;*/
/*  background-color: #f9fafb;*/
/*}*/

/*!* ── Buttons ── *!*/
/*.city-btn {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.375rem;*/
/*  height: 2rem;*/
/*  padding-inline: 0.75rem;*/
/*  border-radius: 0.375rem;*/
/*  font-size: 0.75rem;*/
/*  font-weight: 500;*/
/*  cursor: pointer;*/
/*  border: 1px solid;*/
/*  background-color: #ffffff;*/
/*  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;*/
/*}*/

/*.city-btn--default {*/
/*  border-color: #d1d5db;*/
/*  color: #374151;*/
/*}*/

/*.city-btn--default:hover {*/
/*  background-color: #f9fafb;*/
/*  border-color: #9ca3af;*/
/*}*/

/*.city-btn--danger {*/
/*  border-color: #fca5a5;*/
/*  color: #b91c1c;*/
/*}*/

/*.city-btn--danger:hover {*/
/*  background-color: #fef2f2;*/
/*  border-color: #f87171;*/
/*}*/

/*.city-btn svg {*/
/*  flex-shrink: 0;*/
/*}*/