/* Shared typography and interaction rules for the public property search forms. */
.mobile-select-dropdown {
  display: none;
}

@media (max-width: 767.98px) {
  #home-property-search,
  #listing-property-search {
    --search-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    --search-label-font-size: 15px;
    --search-control-font-size: 16px;
    --search-control-height: 48px;
    --search-focus-color: var(--color-primary, #123a56);
    --search-focus-ring: 0 0 0 3px rgba(18, 58, 86, 0.18);
    font-family: var(--search-font-family);
    font-feature-settings: normal;
    letter-spacing: 0;
  }

  #home-property-search .form-label,
  #listing-property-search .form-label {
    margin-bottom: 8px;
    color: var(--color-text, #20262d);
    font-family: var(--search-font-family);
    font-size: var(--search-label-font-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .hero-search #home-property-search > .mb-3:has(.type-grid) > .form-label {
    display: block;
  }

  .hero-search #home-property-search > .home-type-selector.mb-3:has(.type-grid) {
    margin-right: 0;
    margin-left: 0;
  }

  #home-property-search .search-condensed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  #home-property-search .search-condensed-grid :is(.mobile-select-toggle, .multi-select-toggle) {
    height: var(--search-control-height);
  }

  #home-property-search .search-condensed-grid .mobile-select-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #home-property-search .search-condensed-grid .search-condensed-field .dropdown-menu.show {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    width: calc(200% + 10px) !important;
    max-width: none;
    margin-top: 0 !important;
    transform: none !important;
  }

  #home-property-search .search-condensed-grid .search-condensed-field:nth-child(odd) .dropdown-menu.show {
    right: auto !important;
    left: 0 !important;
  }

  #home-property-search .search-condensed-grid .search-condensed-field:nth-child(even) .dropdown-menu.show {
    right: 0 !important;
    left: auto !important;
  }

  #listing-property-search .listing-condensed-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #home-property-search :is(.type-btn, .pref-check, .city-check, .form-select, .multi-select-toggle, .multi-select-option, .mobile-select-option),
  #listing-property-search :is(.type-btn, .pref-check, .city-check, .form-select, .multi-select-toggle, .multi-select-option, .mobile-select-option) {
    font-family: var(--search-font-family);
    font-size: var(--search-control-font-size);
    line-height: 1.5;
    letter-spacing: 0;
  }

  #home-property-search :is(.type-btn, .pref-check, .city-check),
  #listing-property-search :is(.type-btn, .pref-check, .city-check) {
    min-height: var(--search-control-height);
    font-weight: 700;
  }

  #home-property-search :is(.form-select, .multi-select-toggle),
  #listing-property-search :is(.form-select, .multi-select-toggle) {
    min-height: var(--search-control-height);
    border-radius: 8px;
    font-weight: 600;
  }

  #home-property-search :is(.form-select, .multi-select-toggle):focus-visible,
  #listing-property-search :is(.form-select, .multi-select-toggle):focus-visible,
  #home-property-search :is(.type-btn, .pref-check, .city-check):has(input:focus-visible),
  #listing-property-search :is(.type-btn, .pref-check, .city-check):has(input:focus-visible) {
    border-color: var(--search-focus-color);
    outline: 0;
    box-shadow: var(--search-focus-ring);
  }

  #home-property-search .multi-select-option,
  #listing-property-search .multi-select-option {
    display: flex;
    align-items: center;
    min-height: var(--search-control-height);
    padding: 10px 12px 10px 40px;
    font-weight: 600;
  }

  #home-property-search .multi-select-option .form-check-input,
  #listing-property-search .multi-select-option .form-check-input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: -28px;
  }

  #home-property-search .multi-select-menu,
  #listing-property-search .multi-select-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(60vh, 420px);
    max-height: min(60dvh, 420px);
  }

  #home-property-search .search-condensed-field .dropdown-menu.show,
  #listing-property-search :is(.search-condensed-field, .listing-sort-field) .dropdown-menu.show {
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  #home-property-search .multi-select-option,
  #listing-property-search .multi-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #home-property-search .multi-select-option:has(input:focus-visible),
  #listing-property-search .multi-select-option:has(input:focus-visible) {
    outline: 2px solid var(--search-focus-color);
    outline-offset: -2px;
  }

  #home-property-search .mobile-select-native,
  #listing-property-search .mobile-select-native {
    display: none;
  }

  #home-property-search .mobile-select-dropdown,
  #listing-property-search .mobile-select-dropdown {
    display: block;
  }

  .mobile-select-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text, #20262d);
    text-align: left;
  }

  .mobile-select-menu {
    width: 100%;
    max-height: min(60vh, 420px);
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid var(--color-border, #d9e1e7);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(17, 39, 57, 0.2);
  }

  .mobile-select-option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--search-control-height);
    padding: 10px 42px 10px 12px;
    border-radius: 6px;
    color: var(--color-text, #20262d);
    font-weight: 600;
    white-space: normal;
  }

  .mobile-select-option.active {
    background: var(--color-soft-bg, #eaf1f5);
    color: var(--search-focus-color);
    font-weight: 700;
  }

  .mobile-select-option.active::after {
    content: "✓";
    position: absolute;
    right: 14px;
    color: var(--color-success, #16776b);
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-select-option:focus-visible {
    outline: 2px solid var(--search-focus-color);
    outline-offset: -2px;
  }

  #home-property-search > .btn-primary,
  #listing-property-search .listing-filter-body > .btn-primary {
    min-height: 52px;
    font-family: var(--search-font-family);
    font-size: var(--search-control-font-size);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .city-modal {
    --search-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    --search-label-font-size: 15px;
    --search-control-font-size: 16px;
    --search-control-height: 48px;
    --search-focus-color: var(--color-primary, #123a56);
    --search-focus-ring: 0 0 0 3px rgba(18, 58, 86, 0.18);
    font-family: var(--search-font-family);
    font-feature-settings: normal;
    letter-spacing: 0;
  }

  .city-modal .city-panel-title {
    font-family: var(--search-font-family);
    font-size: var(--search-label-font-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
  }

  .city-modal .city-check {
    min-height: var(--search-control-height);
    font-family: var(--search-font-family);
    font-size: var(--search-control-font-size);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .city-modal .city-check:has(input:focus-visible) {
    border-color: var(--search-focus-color);
    outline: 0;
    box-shadow: var(--search-focus-ring);
  }

  .city-modal .modal-footer .btn {
    min-height: var(--search-control-height);
    font-family: var(--search-font-family);
    font-size: var(--search-control-font-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
  }
}

@media (max-width: 374.98px) {
  #listing-property-search .type-btn,
  .city-modal .city-check {
    min-height: 64px;
  }

  #home-property-search .type-btn {
    height: var(--search-control-height);
    min-height: var(--search-control-height);
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #home-property-search .type-btn .type-btn-label {
    line-height: 1.2;
  }
}