/* Knoppen en invulvelden van Navondo (huisstijl 2026-10-04; designsystem, merkboek 'Beweging' en component Button).
   Zelfde bestand in site/dist/, woningzoeker/, makelaar/, adverteren/ en beheer/: pas ze samen aan.
   Laden na het <style>-blok van de pagina, zodat deze regels winnen. Alleen selectors die op elke site hetzelfde betekenen;
   knoppen met een algemene naam (filters, tabs, chips) staan op hun eigen pagina. Statuslabels, tellers, prijsmarkeringen en
   ronde icoonknoppen blijven rond en staan hier niet. --gold blijft voor accenten (punt in het woordmerk, tellers, 'Nieuw'). */
:root{--button:#986440;--button-hover:#87562f;--knop-ease:cubic-bezier(.2,.8,.2,1)}

/* Hoofdknop */
.button,.submit,.check-button,.detail-actions a,.open-huis a.open-huis-button,.compare-bar a,.vergrendeld .slot-knop button,.nv-feedback .verstuur,.welkom .opslaan{
  border:0;border-radius:11px;background-color:var(--button);background-image:none;color:#fff;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--knop-ease),box-shadow .18s var(--knop-ease),background-color .18s,color .25s,background-size .25s var(--knop-ease)}
.button,.submit{padding:12px 20px}
.button:hover,.submit:hover,.check-button:hover,.detail-actions a:hover,.open-huis a.open-huis-button:hover,.compare-bar a:hover,.vergrendeld .slot-knop button:hover,.nv-feedback .verstuur:hover,.welkom .opslaan:hover{
  background-color:var(--button-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(152,100,64,.28)}
.button:active,.submit:active,.check-button:active,.detail-actions a:active,.open-huis a.open-huis-button:active,.compare-bar a:active,.vergrendeld .slot-knop button:active,.nv-feedback .verstuur:active,.welkom .opslaan:active{
  transform:translateY(0) scale(.97);box-shadow:none}

/* Tweede knop: omlijnd in ink, vult zich bij hover van links naar rechts */
.button.secondary,.detail-actions a.secondary,.login-button,.who button,.ep-inlog,.understood .save,.nv-ad-button,.preview .cta,.nav-links a:last-child,.nv-feedback .sluit,.welkom .later{
  border:0;border-radius:11px;background-color:transparent;color:var(--ink,#285f72);box-shadow:inset 0 0 0 1.5px var(--ink,#285f72);
  background-image:linear-gradient(var(--ink,#285f72),var(--ink,#285f72));background-repeat:no-repeat;background-position:left;background-size:0% 100%;
  font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--knop-ease),background-color .18s,color .25s,background-size .25s var(--knop-ease)}
.button.secondary:hover,.detail-actions a.secondary:hover,.login-button:hover,.who button:hover,.ep-inlog:hover,.understood .save:hover,.nv-ad-button:hover,.preview .cta:hover,.nav-links a:last-child:hover,.nv-feedback .sluit:hover,.welkom .later:hover{
  background-color:transparent;background-image:linear-gradient(var(--ink,#285f72),var(--ink,#285f72));background-size:100% 100%;color:var(--on-ink,#fff);transform:none;box-shadow:inset 0 0 0 1.5px var(--ink,#285f72)}
.button.secondary:active,.detail-actions a.secondary:active,.login-button:active,.who button:active,.ep-inlog:active,.understood .save:active,.nv-ad-button:active,.preview .cta:active,.nav-links a:last-child:active,.nv-feedback .sluit:active,.welkom .later:active{
  transform:scale(.97)}

/* Verwijderen en andere onomkeerbare acties */
.button.danger{background-color:transparent;color:var(--red,#a4453a);box-shadow:inset 0 0 0 1.5px var(--red,#a4453a);background-image:linear-gradient(var(--red,#a4453a),var(--red,#a4453a));background-repeat:no-repeat;background-size:0% 100%}
.button.danger:hover{background-color:transparent;background-image:linear-gradient(var(--red,#a4453a),var(--red,#a4453a));background-size:100% 100%;color:var(--on-ink,#fff);transform:none;box-shadow:inset 0 0 0 1.5px var(--red,#a4453a)}
.button.gevaar{background-color:var(--red,#a4453a)}
.button.gevaar:hover{background-color:var(--red,#a4453a);filter:brightness(.9);box-shadow:0 8px 18px rgba(164,69,58,.25)}

.button:focus-visible,.submit:focus-visible,.check-button:focus-visible,.detail-actions a:focus-visible,.open-huis a.open-huis-button:focus-visible,.compare-bar a:focus-visible,.vergrendeld .slot-knop button:focus-visible,.nv-feedback .verstuur:focus-visible,.welkom .opslaan:focus-visible,.login-button:focus-visible,.who button:focus-visible,.ep-inlog:focus-visible,.understood .save:focus-visible,.nv-ad-button:focus-visible,.preview .cta:focus-visible,.nav-links a:last-child:focus-visible,.nv-feedback .sluit:focus-visible,.welkom .later:focus-visible{
  outline:3px solid var(--ink,#285f72);outline-offset:3px}
.button:disabled,.submit:disabled,.nv-feedback .verstuur:disabled,.welkom .opslaan:disabled{opacity:.55;transform:none;box-shadow:none}
.button.secondary:disabled{background-size:0% 100%;color:var(--ink,#285f72);box-shadow:inset 0 0 0 1.5px var(--ink,#285f72)}

/* Pijltje in een knop die verder brengt: <span class="btn-arrow" aria-hidden="true">→</span> */
.btn-arrow{display:inline-block;margin-left:6px;transition:transform .18s var(--knop-ease)}
:hover>.btn-arrow{transform:translateX(4px)}

/* Invulvelden: bij hover een donkere rand, zodat je meteen ziet dat je er iets in kunt typen (keuze Mark 2026-10-04). Een veld
   waar je al in typt, houdt zijn eigen focusstijl. Alleen met een muis (op een telefoon blijft hover anders hangen). */
input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=submit],[type=button],[type=hidden],[type=color]),textarea,select,.searchbar{transition:border-color .18s,box-shadow .18s}
@media (hover:hover){
  input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=submit],[type=button],[type=hidden],[type=color]):not(:disabled):not(:focus):hover,textarea:not(:disabled):not(:focus):hover,select:not(:disabled):not(:focus):hover{border-color:var(--ink,#285f72)}
  /* Zoekbalk op zoeken.navondo.nl: het veld zelf heeft geen rand, dus het hele vak */
  .searchbar:hover{border-color:var(--ink,#285f72);box-shadow:inset 0 0 0 1px var(--ink,#285f72),0 8px 25px rgba(32,75,85,.12)}
}

/* Minder beweging: alleen de kleurwissel */
@media (prefers-reduced-motion:reduce){
  .button,.submit,.check-button,.detail-actions a,.open-huis a.open-huis-button,.compare-bar a,.vergrendeld .slot-knop button,.nv-feedback .verstuur,.welkom .opslaan,.login-button,.who button,.ep-inlog,.understood .save,.nv-ad-button,.preview .cta,.nav-links a:last-child,.nv-feedback .sluit,.welkom .later,.btn-arrow{transition:background-color .18s,color .25s}
  .button:hover,.button:active,.submit:hover,.submit:active,.check-button:hover,.check-button:active,.detail-actions a:hover,.detail-actions a:active,.open-huis a.open-huis-button:hover,.open-huis a.open-huis-button:active,.compare-bar a:hover,.compare-bar a:active,.vergrendeld .slot-knop button:hover,.vergrendeld .slot-knop button:active,.nv-feedback .verstuur:hover,.nv-feedback .verstuur:active,.welkom .opslaan:hover,.welkom .opslaan:active,.login-button:active,.who button:active,.ep-inlog:active,.understood .save:active,.nv-ad-button:active,.preview .cta:active,.nav-links a:last-child:active,.nv-feedback .sluit:active,.welkom .later:active,:hover>.btn-arrow{transform:none}
  .button.secondary:hover,.detail-actions a.secondary:hover,.login-button:hover,.who button:hover,.ep-inlog:hover,.understood .save:hover,.nv-ad-button:hover,.preview .cta:hover,.nav-links a:last-child:hover,.nv-feedback .sluit:hover,.welkom .later:hover,.button.danger:hover{background-size:100% 100%}
}