/* =========================================================================
   ADD PROPERTY (property search) — modern redesign. Matches the dashboard
   theme (Montserrat, Modern-Clean/Light tokens). EVERYTHING is scoped under
   #add-property-redesign because property_search.html is a SHARED include
   (also used by the registration/landing search) — these overrides must only
   apply inside the dashboard Add Property panel. Icons: FA5 Pro.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");

#add-property-redesign {
  --brand-blue: #00b4ff;
  --brand-blue-2: #2b9cd3;
  --brand-green: #36bea6;
  --brand-green-2: #2cdd9b;
  --surface: #fff;
  --surface-2: #f7f9fc;
  --line: #e7ecf3;
  --line-strong: #d8e0ea;
  --ink: #1f2a37;
  --ink-2: #5b6b7f;
  --ink-3: #8a99ad;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.07);
  --grad-blue: linear-gradient(135deg, #2b9cd3, #00b4ff);
  --grad-green: linear-gradient(135deg, #36bea6, #2cdd9b);
  --red: #e8533a;

  /* reset the shared dark/min-width chrome for the dashboard context */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink);
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  backdrop-filter: none !important;
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 920px;
  margin: 0 auto;
}
#add-property-redesign *,
#add-property-redesign *::before,
#add-property-redesign *::after {
  box-sizing: border-box;
}

/* ===== header ===== */
#add-property-redesign .ap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px;
}
#add-property-redesign .ap-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
#add-property-redesign .ap-head .ap-ic {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--grad-blue);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(0, 180, 255, 0.28);
}
#add-property-redesign .ap-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
#add-property-redesign .ap-subtitle {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
}
/* the shared include renders its own "Property Search" title — hide it here
   (our .ap-head already provides the heading) but keep the county subtitle. */
#add-property-redesign .search-tabs-wrapper > div > .search-title,
#add-property-redesign .search-title {
  display: none !important;
}
#add-property-redesign .search-subtitle {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  margin: 0 0 4px 0 !important;
}

/* ===== tabs (pills) ===== */
#add-property-redesign .search-tabs-wrapper,
#add-property-redesign .adv-search-tabs-wrapper {
  margin: 0 !important;
  min-width: 0 !important;
}
#add-property-redesign .nav-pills {
  display: inline-flex;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px !important;
}
#add-property-redesign .nav-pills .nav-link {
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2) !important;
  background: transparent !important;
}
#add-property-redesign .nav-pills .nav-link:hover {
  color: var(--brand-blue-2) !important;
}
#add-property-redesign .nav-pills .nav-link.active,
#add-property-redesign .nav-pills .show > .nav-link {
  color: #fff !important;
  background: var(--grad-blue) !important;
  box-shadow: 0 4px 12px rgba(0, 180, 255, 0.28);
}

/* ===== address search field ===== */
/* breathing room around the address input area (the address tab content) */
#add-property-redesign #search-address {
  padding: 24px !important;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#add-property-redesign .google-autocomplete-wrapper {
  margin: 0 !important;
}
#add-property-redesign .input-group {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 0 !important;
  flex-wrap: nowrap;
  align-items: stretch;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#add-property-redesign .input-group:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.14);
}
/* neutralize Bootstrap .row negative margins inside this scope so the input
   group sits flush within the padded #search-address panel */
#add-property-redesign .google-autocomplete-wrapper.row {
  margin: 0 !important;
}
#add-property-redesign .input-group-prepend {
  display: flex;
}
#add-property-redesign .input-group-text {
  height: 48px;
  background: var(--surface-2) !important;
  border: none !important;
  color: var(--ink-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4 !important;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
/* themed inputs (override the shared white/gray input rule) */
#add-property-redesign input {
  width: 100% !important;
  height: 48px !important;
  background: var(--surface) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  font-family: inherit;
  font-size: 14px !important;
  color: var(--ink) !important;
}
#add-property-redesign input::placeholder {
  color: var(--ink-3);
}
#add-property-redesign .google-autocomplete {
  height: 48px !important;
}

/* ===== advanced search ===== */
#add-property-redesign #search-advanced {
  border-top: 1px solid var(--line) !important;
  margin: 4px 0 0 0 !important;
  padding-top: 16px !important;
}
#add-property-redesign .adv-search-select-county {
  color: var(--ink) !important;
  margin-bottom: 8px;
}
#add-property-redesign .adv-search-select-county .dropdown-toggle {
  background: var(--grad-green) !important;
  border: none !important;
  color: #04261e !important;
  font-weight: 600;
  border-radius: 10px !important;
  padding: 9px 18px;
  box-shadow: 0 4px 12px rgba(44, 221, 155, 0.25);
}
#add-property-redesign .adv-search-tabs-wrapper .nav-pills {
  border-bottom: none !important;
}
#add-property-redesign .adv-search-tabs-wrapper label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
/* advanced street-number input + md-autocomplete container */
#add-property-redesign #advanced_search_number {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  height: 46px !important;
}
#add-property-redesign md-autocomplete {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#add-property-redesign md-autocomplete input {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  height: 46px !important;
}

/* ===== property-found results ===== */
#add-property-redesign .property-found {
  text-align: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
#add-property-redesign .property-found > div > div:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
#add-property-redesign .property-selector,
#add-property-redesign .property-selector-multiple {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  text-align: center;
  cursor: pointer;
  margin: 10px auto !important;
  max-width: 460px;
  padding: 14px 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#add-property-redesign .property-selector:hover,
#add-property-redesign .property-selector-multiple:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 180, 255, 0.4);
}
#add-property-redesign .property-selector .address,
#add-property-redesign .property-selector-multiple .address {
  font-size: 15px !important;
  font-weight: 700;
  color: var(--ink);
}
#add-property-redesign .property-selector .owner,
#add-property-redesign .property-selector-multiple .owner {
  font-size: 12.5px !important;
  color: var(--ink-2);
  margin-top: 2px;
}
#add-property-redesign .property-selector .account,
#add-property-redesign .property-selector-multiple .account {
  font-size: 12.5px !important;
  color: var(--brand-blue-2) !important;
  font-weight: 600;
  margin-top: 2px;
}
/* result action buttons (override bootstrap btn coloring within scope) */
#add-property-redesign .property-found .btn {
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 6px 0;
}
#add-property-redesign .property-found .btn-success {
  background: var(--grad-green);
  color: #04261e;
  box-shadow: 0 6px 16px rgba(44, 221, 155, 0.28);
}
#add-property-redesign .property-found .btn-warning {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
#add-property-redesign .property-found .alert {
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
  max-width: 460px;
  margin: 12px auto !important;
}
#add-property-redesign .property-found .alert-info {
  background: rgba(0, 180, 255, 0.08);
  border: 1px solid rgba(0, 180, 255, 0.25);
  color: #0a5a78;
}
#add-property-redesign .property-found .alert-danger {
  background: var(--red, #fff0ed);
  background: #fff0ed;
  border: 1px solid rgba(232, 83, 58, 0.3);
  color: #a3341f;
}

/* ===== responsive ===== */
@media (max-width: 600px) {
  #add-property-redesign .ap-card {
    padding: 18px 16px;
  }
  #add-property-redesign .ap-head .ap-ic {
    width: 42px;
    height: 42px;
    font-size: 19px;
  }
  #add-property-redesign .nav-pills {
    display: flex;
    width: 100%;
  }
  #add-property-redesign .nav-pills .nav-item {
    flex: 1 1 auto;
  }
  #add-property-redesign .nav-pills .nav-link {
    width: 100%;
    text-align: center;
  }
  /* advanced address row stacks */
  #add-property-redesign #adv-search-address .row > .col-sm {
    max-width: 100% !important;
  }
}