/* public/assets/ui/framework/16_header_search_bridge.css
   KomodUI Header Search Bridge v0.1
   Goal: header search never forces horizontal overflow on mobile.
   Works with legacy /assets/css/header-search.css markup.
*/

/* Allow center area to shrink */
.header-center-area {
  min-width: 0;
}

/* Search wrapper must not exceed available space */
.header-search {
  width: 100%;
  max-width: 640px; /* desktop cap */
  min-width: 0;
}

/* Legacy form wrappers */
.search-form,
.search-input-wrapper {
  width: 100%;
  min-width: 0;
}

/* Input can shrink inside flex */
.search-input {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Icon buttons: keep fixed size, prevent pushing layout */
.search-input-wrapper .btn-icon {
  flex: 0 0 auto;
}

/* Prevent long placeholder/text from blowing up layout */
.search-input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: tighter header spacing */
@media (max-width: 576px) {
  .header-inner {
    gap: var(--space-3);
  }

  .header-search {
    max-width: 100%;
  }

  /* Reduce inner padding if legacy CSS uses large padding */
  .search-input-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Make sure separators don’t create extra width */
  .search-separator {
    flex: 0 0 auto;
  }
}