/* tenans-geo-search v1.1 — refined styles */
.tg-search {
  --tg-accent: #1B7EA8;
  --tg-accent-soft: #d6ecf4;
  --tg-accent-deep: #14668A;
  --tg-text: #0f172a;
  --tg-muted: #64748b;
  --tg-border: #e2e8f0;
  --tg-border-strong: #cbd5e1;
  --tg-bg: #ffffff;
  --tg-bg-soft: #f8fafc;
  --tg-bg-hover: #f1f5f9;
  --tg-radius: 14px;
  --tg-radius-sm: 10px;
  --tg-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --tg-shadow-pop: 0 20px 48px -12px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .06);

  display: flex; gap: 10px; align-items: stretch;
  width: 100%; max-width: 720px;
  font-family: inherit; box-sizing: border-box;
}
.tg-search * { box-sizing: border-box; }

/* ------------------ Field ------------------ */
.tg-field {
  position: relative; flex: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-height: 56px;
  padding: 8px 44px 8px 44px;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: text;
}
.tg-field::before {
  /* Search icon — inline SVG via mask so it inherits accent color */
  content: '';
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background-color: var(--tg-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
  transition: background-color .18s ease;
  pointer-events: none;
}
.tg-field:hover { border-color: var(--tg-border-strong); }
.tg-field:focus-within {
  border-color: var(--tg-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-accent) 18%, transparent), var(--tg-shadow);
  background: var(--tg-bg);
}
.tg-field:focus-within::before { background-color: var(--tg-accent); }

/* ------------------ Chips ------------------ */
.tg-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.tg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--tg-bg-soft);
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  line-height: 1.2; white-space: nowrap;
  animation: tg-chip-in .18s ease-out;
  transition: border-color .15s, transform .15s;
}
.tg-chip:hover { border-color: var(--tg-border-strong); }
.tg-chip--city     { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.tg-chip--district { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
.tg-chip--postal   { background: #fef3c7; border-color: #fde68a; color: #92400e; font-feature-settings: 'tnum'; }
.tg-chip__label { max-width: 240px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.tg-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: transparent; border: 0; border-radius: 50%;
  color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
  opacity: .55;
  transition: background .15s, opacity .15s, transform .15s;
}
.tg-chip__x:hover { background: rgba(0,0,0,.08); opacity: 1; transform: rotate(90deg); }

@keyframes tg-chip-in {
  from { opacity: 0; transform: scale(.85) translateY(-2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ------------------ Input ------------------ */
/* Bulletproof: defeat Avada / Toolset / theme defaults that paint borders
   on every input[type="text"]. */
.tg-search .tg-input,
.tg-search--legacy .tg-input,
input.tg-input,
input[data-tg-input] {
  flex: 1 !important;
  min-width: 140px !important;
  width: auto !important;
  height: 38px !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: var(--tg-text) !important;
  letter-spacing: -.01em !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}
.tg-search .tg-input:focus,
input.tg-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.tg-search .tg-input::placeholder,
input.tg-input::placeholder {
  color: var(--tg-muted) !important;
  opacity: .85 !important;
}

/* ------------------ Clear ------------------ */
.tg-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--tg-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.tg-clear:hover { background: var(--tg-bg-hover); color: var(--tg-text); }
.tg-field:has(.tg-chip) .tg-clear,
.tg-field:has(.tg-input:not(:placeholder-shown)) .tg-clear { display: inline-flex; }

/* ------------------ Submit ------------------ */
.tg-submit {
  height: 56px; padding: 0 26px;
  background: var(--tg-accent);
  color: #fff;
  border: 0; border-radius: var(--tg-radius);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 126, 168, .25), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.tg-submit:hover  { background: var(--tg-accent-deep); }
.tg-submit:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(27, 126, 168, .25); }
.tg-submit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-accent) 25%, transparent);
}

/* ------------------ Suggestions ------------------ */
.tg-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 8px;
  list-style: none;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow-pop);
  max-height: 420px; overflow-y: auto; z-index: 1000;
  animation: tg-pop-in .14s ease-out;
}
@keyframes tg-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-suggest::-webkit-scrollbar { width: 8px; }
.tg-suggest::-webkit-scrollbar-thumb { background: var(--tg-border-strong); border-radius: 4px; }

.tg-suggest__group {
  padding: 10px 12px 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tg-muted);
}
.tg-suggest__group:not(:first-child) { border-top: 1px solid var(--tg-border); margin-top: 4px; }

.tg-suggest__item {
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  color: var(--tg-text);
  border-radius: 8px;
  position: relative;
  transition: background .12s ease;
}
.tg-suggest__item.is-active,
.tg-suggest__item:hover { background: var(--tg-bg-hover); }
.tg-suggest__item.is-active::before,
.tg-suggest__item:hover::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
  background: var(--tg-accent);
}

.tg-suggest__label {
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.tg-suggest__sublabel {
  font-size: 12.5px; color: var(--tg-muted);
  margin-left: auto;
  white-space: nowrap;
}
.tg-suggest__item--postal .tg-suggest__label { font-feature-settings: 'tnum'; }

/* Kind icons */
.tg-suggest__label::before {
  content: ''; width: 22px; height: 22px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background-size: 14px 14px; background-repeat: no-repeat; background-position: center;
}
.tg-suggest__item--city .tg-suggest__label::before {
  background-color: #ecfeff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V7l7-4 7 4v14M9 9h0M9 13h0M9 17h0M15 9h0M15 13h0M15 17h0'/></svg>");
}
.tg-suggest__item--district .tg-suggest__label::before {
  background-color: #f5f3ff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s-8-4.5-8-11a8 8 0 1 1 16 0c0 6.5-8 11-8 11z'/><circle cx='12' cy='11' r='3'/></svg>");
}
.tg-suggest__item--postal .tg-suggest__label::before {
  background-color: #fef3c7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
}

.tg-suggest__empty,
.tg-suggest__hint {
  padding: 16px 14px;
  color: var(--tg-muted);
  font-size: 13.5px;
  text-align: center;
}

/* ------------------ Legacy compat ------------------ */
/* The legacy input lives inside our widget so the form still submits, but it
   must be 100% invisible — no box, no space, no border. */
.tg-legacy-hidden,
.tg-search--legacy input.tg-legacy-hidden,
.tg-search--legacy input[data-tg-hidden] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* The original Toolset/Avada wrapper that exclusively contained the input is
   now empty — collapse it so it doesn't render as an empty box above ours. */
.tg-host-collapsed {
  display: none !important;
}

/* ------------------ Mobile ------------------ */
@media (max-width: 720px) {
  .tg-search { flex-direction: column; }
  .tg-field { min-height: 56px; }
  .tg-submit { height: 50px; }
}

/* Mobile fullscreen */
.tg-fs {
  position: fixed; inset: 0;
  background: var(--tg-bg);
  z-index: 9999;
  display: flex; flex-direction: column;
  animation: tg-fs-in .22s ease-out;
}
@keyframes tg-fs-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-fs__bar {
  display: flex; align-items: center; gap: 8px;
  height: 60px; padding: 0 8px;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-bg);
  position: sticky; top: 0; z-index: 2;
}
.tg-fs__close {
  width: 44px; height: 44px;
  border: 0; background: transparent;
  font-size: 22px; cursor: pointer;
  color: var(--tg-text);
  border-radius: 12px;
  transition: background .15s;
}
.tg-fs__close:hover { background: var(--tg-bg-hover); }
.tg-fs__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.tg-fs .tg-field { margin: 14px; flex: 0 0 auto; min-height: 60px; }
.tg-fs .tg-suggest {
  position: static !important;
  margin: 0 14px; max-height: none; flex: 1;
  border: 0; box-shadow: none; padding: 0;
  animation: none;
}
.tg-fs .tg-suggest__item { border-radius: 10px; padding: 12px; }
body.tg-fs-open { overflow: hidden; }

/* color-mix() polyfill — Firefox <113. Provides a static fallback. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .tg-field:focus-within { box-shadow: 0 0 0 4px rgba(27, 126, 168, .18), var(--tg-shadow); }
  .tg-submit:focus-visible { box-shadow: 0 0 0 4px rgba(27, 126, 168, .25); }
}

/* ============================================================
   FORM POLISH — unify the rest of the WPV/Toolset filter inputs
   so they match the Zona widget. Scoped via :has() so we ONLY
   touch forms that contain our widget — never the rest of the site.
   ============================================================ */

/* The whole filter card */
form:has(.tg-search--legacy),
.wpv-filter-form:has(.tg-search--legacy),
.js-wpv-filter-form:has(.tg-search--legacy) {
  --tg-accent: #1B7EA8;
  --tg-text: #0f172a;
  --tg-muted: #64748b;
  --tg-border: #e2e8f0;
  --tg-border-strong: #cbd5e1;
  --tg-bg: #ffffff;
  --tg-radius: 12px;
}

/* Labels */
form:has(.tg-search--legacy) label,
form:has(.tg-search--legacy) .wpv-filter-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--tg-text);
  letter-spacing: -.01em;
  margin-bottom: 6px;
  display: block;
}

/* Helper text under labels */
form:has(.tg-search--legacy) .wpv-filter-help,
form:has(.tg-search--legacy) .description,
form:has(.tg-search--legacy) small {
  color: var(--tg-muted);
  font-size: 12.5px;
  font-weight: 400;
  display: block;
  margin-top: 2px;
  margin-bottom: 6px;
}

/* All text-ish inputs and selects */
form:has(.tg-search--legacy) input[type="text"]:not(.tg-input):not(.tg-legacy-hidden),
form:has(.tg-search--legacy) input[type="number"]:not(.tg-input),
form:has(.tg-search--legacy) input[type="search"]:not(.tg-input),
form:has(.tg-search--legacy) input[type="email"]:not(.tg-input),
form:has(.tg-search--legacy) input[type="tel"]:not(.tg-input),
form:has(.tg-search--legacy) input[type="url"]:not(.tg-input),
form:has(.tg-search--legacy) select,
form:has(.tg-search--legacy) textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tg-text);
  background: var(--tg-bg);
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: -.005em;
  outline: 0;
}

form:has(.tg-search--legacy) input:not(.tg-input):not(.tg-legacy-hidden):hover,
form:has(.tg-search--legacy) select:hover,
form:has(.tg-search--legacy) textarea:hover {
  border-color: var(--tg-border-strong) !important;
}

form:has(.tg-search--legacy) input:not(.tg-input):not(.tg-legacy-hidden):focus,
form:has(.tg-search--legacy) select:focus,
form:has(.tg-search--legacy) textarea:focus {
  border-color: var(--tg-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-accent) 18%, transparent), 0 1px 2px rgba(15,23,42,.04) !important;
}

/* Selects: custom chevron, hide native arrow */
form:has(.tg-search--legacy) select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* Number inputs: hide native spinner for cleaner look */
form:has(.tg-search--legacy) input[type="number"]::-webkit-inner-spin-button,
form:has(.tg-search--legacy) input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
form:has(.tg-search--legacy) input[type="number"] { -moz-appearance: textfield; }

/* Inputs that have the € prefix in the field — keep symbol visible */
form:has(.tg-search--legacy) .wpv-filter-import-lloguer input,
form:has(.tg-search--legacy) input[name*="import"],
form:has(.tg-search--legacy) input[name*="precio"] {
  text-align: right;
  font-feature-settings: 'tnum';
}

/* Submit/reset buttons inside the filter form */
form:has(.tg-search--legacy) input[type="submit"],
form:has(.tg-search--legacy) button[type="submit"],
form:has(.tg-search--legacy) .wpv-filter-submit input,
form:has(.tg-search--legacy) .wpv-filter-submit button {
  min-height: 48px;
  padding: 0 24px;
  background: var(--tg-accent);
  color: #fff;
  border: 0;
  border-radius: var(--tg-radius);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 126, 168, .25), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .15s, transform .1s;
  -webkit-appearance: none;
  appearance: none;
}
form:has(.tg-search--legacy) input[type="submit"]:hover,
form:has(.tg-search--legacy) button[type="submit"]:hover,
form:has(.tg-search--legacy) .wpv-filter-submit input:hover {
  background: #14668A;
}
form:has(.tg-search--legacy) input[type="submit"]:active,
form:has(.tg-search--legacy) button[type="submit"]:active {
  transform: translateY(1px);
}

/* "Veure més característiques" toggle — secondary button look */
form:has(.tg-search--legacy) a.wpv-filter-toggle,
form:has(.tg-search--legacy) button.wpv-filter-toggle,
form:has(.tg-search--legacy) .wpv-filter-toggle a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--tg-bg);
  color: var(--tg-text);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
form:has(.tg-search--legacy) a.wpv-filter-toggle:hover,
form:has(.tg-search--legacy) button.wpv-filter-toggle:hover {
  border-color: var(--tg-border-strong);
  background: #f8fafc;
}

/* Section headings inside the filter (e.g. "Requisits d'habitatge") */
form:has(.tg-search--legacy) h3,
form:has(.tg-search--legacy) h4,
form:has(.tg-search--legacy) .wpv-filter-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tg-text);
  letter-spacing: -.01em;
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tg-border);
}
form:has(.tg-search--legacy) h3:first-child,
form:has(.tg-search--legacy) h4:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Tighten vertical rhythm between fields */
form:has(.tg-search--legacy) .wpv-filter-row,
form:has(.tg-search--legacy) .wpv-filter-controls-wrapper {
  margin-bottom: 14px;
}

/* The card title that wraps the whole filter form */
.wpv-form-card:has(.tg-search--legacy),
form:has(.tg-search--legacy) {
  font-feature-settings: 'cv11';
}