/* tt-header.css - Techniek Totaal, zoekbalk in de desktop-header (28 sep 2026, v5: oranje omlijning #ff9902, 10px afronding zoals winkelwagen/checkout, vierkante knop met 8px, resultatenvak even breed als de balk).
   Geladen in snippets/head.rain (na custom.css), dus meteen bij de eerste tekening: geen flits van de oude stijl.
   Alleen de dichte balk (#header-search); de uitgeklapte resultaten (#search-results) blijven zoals ze zijn.
   Mobiel (#subheader-search op de oranje balk) blijft ongemoeid. Bron: ~/tt-thema/header/tt-header.css */
#header-search { position: relative; max-width: 720px !important; width: 100%; margin-right: 24px; }   /* was 600px; krimpt mee op smallere schermen */
#header-search .header-search-input {
  height: 48px !important; padding: 0 60px 0 22px !important;
  background: #fff !important; border: 2px solid #ff9902 !important; border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(20, 24, 33, .06) !important;
  font-size: 15px !important; color: #1d1f24 !important;
  transition: border-color .15s, box-shadow .15s;
}
#header-search .header-search-input::placeholder { color: #6b7079 !important; opacity: 1; }
#header-search .header-search-input:hover { box-shadow: 0 2px 8px rgba(255, 153, 2, .25) !important; }
#header-search .header-search-input:focus { border-color: #e68a00 !important; box-shadow: 0 0 0 3px rgba(255, 153, 2, .22) !important; outline: none !important; }
/* zoekknop: oranje rondje met wit icoon, binnen de balk */
#header-search .search-button {
  position: absolute !important; right: 5px !important; left: auto !important; top: 5px !important; bottom: auto !important; transform: none !important;
  height: 38px !important; width: 38px !important; min-width: 0 !important; line-height: 38px !important; margin: 0 !important; padding: 0 !important; z-index: 2;
  border: 0 !important; border-radius: 8px !important; background: #f3f4f6 !important;   /* lichtgrijs vlak, oranje vergrootglas (Lennart) */
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, box-shadow .15s;
}
#header-search .search-button:hover { background: #e9ebee !important; box-shadow: none; }
html body #header-search .search-button i, html body #header-search .search-button i.icon-search.c-body-text, html body #header-search .search-button i:before { color: #ff9902 !important; font-size: 17px !important; line-height: 1; margin: 0 !important; }
#header-search .ls-clear { right: 50px !important; }
/* uitklapvak met resultaten precies even breed als de balk (thema zet 650px + margin-left 50%) */
#header-search #search-results { left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 8px 0 0 !important; transform: none !important; box-sizing: border-box; border-radius: 10px !important; }