/* src/assets/css/style.css */

/* --- Kleuren Palet & Variabelen --- */
:root {
  --color-primary: #007BFF;
  --color-primary-darker: #0056b3;
  --color-secondary: #6C757D;
  /* Grijs */
  --color-secondary-darker: #5a6268;
  --color-success: #28A745;
  --color-danger: #DC3545;
  /* Rood */
  --color-danger-darker: #c82333;
  --color-info: #17A2B8;
  --color-warning: #ffc107;
  --color-light: #F8F9FA;
  --color-dark: #212529;
  --color-white: #FFFFFF;
  --color-text: var(--color-dark);
  --color-text-muted: var(--color-secondary);
  --color-background: var(--color-white);
  --color-background-alt: var(--color-light);
  --color-border: #DEE2E6;
  --color-border-subtle: #E9ECEF;

  --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --border-radius: 0.25rem;
}


html {
  height: 100%;
  /* Zorg dat html ook hoogte heeft */
}

/* --- Globale Stijlen --- */
body {
  display: flex;
  /* Maak body een flex container */
  flex-direction: column;
  min-height: 100vh; 
  /* Zet elementen onder elkaar */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-darker);
  text-decoration: underline;
}

h1,
h2,
h3 {
  color: var(--color-text);
  /* Standaard tekstkleur voor koppen */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* --- Header, Navigatie & Footer --- */
header,
footer {
  flex-shrink: 0;
  background-color: var(--color-background-alt);
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

footer {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  margin-top: 3rem;
  color: var(--color-text-muted);
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-block;
  /* Changed from inline for potential display: none usage */
  margin: 0 0.75rem;
}

nav ul li a {
  padding: 0.5rem;
  /* Maakt het klikgebied groter */
}

#user-status {
  color: var(--color-text-muted);
  /* Subtiele kleur voor 'Welkom...' */
  margin-right: 0.5em;
}

/* --- Knoppen --- */
button,
input[type="submit"] {
  /* Stijl ook submit inputs als knoppen */
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-background);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.5rem 1rem;
  /* Iets meer padding */
  font-size: 1rem;
  border-radius: var(--border-radius);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

button:hover,
input[type="submit"]:hover {
  color: var(--color-background);
  background-color: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}

button:disabled,
input[type="submit"]:disabled {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.65;
  cursor: not-allowed;
}

#logout-button {
  /* Optioneel: iets subtielere knop voor uitloggen */
  background-color: var(--color-text-muted);
  border-color: var(--color-text-muted);
  color: var(--color-background);
  padding: 0.25rem 0.75rem;
  /* Iets kleiner */
  font-size: 0.9rem;
}

#logout-button:hover {
  background-color: var(--color-danger);
  /* Rood bij hover voor duidelijkheid */
  border-color: var(--color-danger);
}


/* --- Formulieren --- */
label {
  font-weight: bold;
  margin-bottom: 0.3em;
  display: inline-block;
  color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select,
input[type="time"] {
  display: block;
  width: 100%;
  /* Maak velden breder */
  max-width: 500px;
  /* Maar niet té breed */
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  appearance: none;
  /* remove default styling */
  border-radius: var(--border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-sizing: border-box;
  /* Include padding and border in the element's total width and height */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus {
  color: var(--color-text);
  background-color: var(--color-background);
  border-color: #86b7fe;
  /* Lichtblauw bij focus */
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
  /* Subtiele blauwe gloed */
}

textarea {
  min-height: 80px;
  /* Zorg dat textarea een minimale hoogte heeft */
}

/* Berichten (bv. onder formulieren) */
#auth-message,
#edit-message,
#dashboard-message {
  margin-top: 1em;
  padding: 0.5rem;
  border-radius: var(--border-radius);
  /* Kleur wordt via JS ingesteld, maar we kunnen defaults toevoegen */
}

/* Voorbeeld voor styling via classes (als je dat later wilt ipv inline style)
  .message-error { color: var(--color-danger); background-color: #f8d7da; border: 1px solid #f5c6cb;}
  .message-success { color: var(--color-success); background-color: #d4edda; border: 1px solid #c3e6cb;}
  .message-info { color: var(--color-info); background-color: #d1ecf1; border: 1px solid #bee5eb;}
  */


/* --- Main Content Area --- */
main {
  flex-grow: 1;
  padding: 1.5rem;
  max-width: 960px;
  /* Maximale breedte voor content */
  margin: 2rem auto;
  /* Centreren met marge boven/onder */
  background-color: var(--color-background);
  /* Wit voor content gebied */

  width: 100%; /* Zorg dat het breedte inneemt voor centreren werkt */
  box-sizing: border-box; /* Zorg dat padding binnen width valt */
  margin-top: 0;
  padding-top: 55px; /* Bijvoorbeeld 30px logo + 2x 0.5rem (16px) padding = ~46px, dus 50px is veilig */
}

main > *:first-child {
  margin-top: -2rem; /* Reset top marge van directe kinderen */
}


/* --- Chat Specifiek --- */
.chat-widget {
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-top: 1.5rem;
  /* Wat ruimte boven de chat */
}

#chat-header {
  position: relative;
  z-index: 1;
  /* <-- VOEG TOE/ZORG DAT DEZE ER STAAT */
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-subtle);

  
}

/* #chat-header-image-container img { ... eventuele extra styling ... } */

.chat-output-area {
  height: 400px;
  overflow-y: auto;
  border: 1px solid var(--color-border-subtle);
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: var(--color-background-alt);
  /* Lichtgrijs voor chat achtergrond */
  border-radius: var(--border-radius);
}

.chat-input-area {
  display: flex;
  gap: 0.5rem;
  /* Ruimte tussen textarea en knop */
}

.chat-input-area textarea {
  flex-grow: 1;
  margin-right: 0;
  /* Verwijderd ivm gap */
  max-width: none;
  /* Overerft styling van algemene textarea */
}

.chat-input-area button {
  /* Overerft styling van algemene button */
  flex-shrink: 0;
  /* Voorkom dat knop krimpt */
}

.message {
  position: relative;
  margin-bottom: 0.75rem;
  padding: 0.6rem 1rem;
  /* Iets meer padding */
  border-radius: var(--border-radius);
  max-width: 85%;
  /* Berichten niet te breed maken */
  word-wrap: break-word;
  /* Lange woorden afbreken */
}

.message p {
  margin: 0;
}

.message-user {
  background-color: var(--color-primary);
  /* Blauwe achtergrond voor gebruiker */
  color: var(--color-background);
  /* Witte tekst */
  margin-left: auto;
  /* Rechts uitlijnen */
  border-bottom-right-radius: 0;
  /* Klein visueel detail */
}
/* 2. Driehoekje voor User berichten (rechts) */
.message-user::after {
  content: "";             /* Nodig voor pseudo-element */
  position: absolute;      /* Positioneer t.o.v. .message-user */
  right: -10px;            /* Plaats net buiten de rechterrand (pas aan op border-width) */
  top: 12px;               /* Verticale positie (pas aan naar wens) */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;     /* Bovenkant transparant */
  border-bottom: 8px solid transparent;  /* Onderkant transparant */
  border-left: 10px solid var(--color-primary); /* Linkerkant = kleur user bubble, wijst naar rechts */
  /* De breedte van de driehoek is de border-left-width (10px) */
  /* De hoogte is 2 * border-top/bottom-width (16px) */
}

.message-ai {
  background-color: var(--color-background); /* Nieuw: Wit */
  border: 1px solid var(--color-border-subtle); /* Voeg subtiele rand toe */
  /* Lichtgrijs voor AI */
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
  /* Subtiele rand */
  margin-right: auto;
  /* Links uitlijnen */
  border-bottom-left-radius: 0;
  /* Klein visueel detail */
}

.message-ai p {
  /* Behoud de pre-wrap voor newlines */
  white-space: pre-wrap;
}

/* 3. Driehoekje voor AI berichten (links) */
.message-ai::before {
  content: "";
  position: absolute;
  left: -10px;            /* Plaats net buiten de linkerrand */
  top: 12px;              /* Zelfde verticale positie */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--color-background); /* Rechterkant = kleur AI bubble (lichtgrijs) */
}

/* 4. Driehoekjes voor Alert berichten (links, met hun eigen kleur) */
.alert-success::before {
  content: ""; position: absolute; left: -10px; top: 12px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-right: 10px solid #d1e7dd; /* Kleur alert-success background */
}
.alert-error::before {
  content: ""; position: absolute; left: -10px; top: 12px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-right: 10px solid #f8d7da; /* Kleur alert-error background */
}
.alert-info::before {
  content: ""; position: absolute; left: -10px; top: 12px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-right: 10px solid #cff4fc; /* Kleur alert-info background */
}
.alert-warning::before {
   content: ""; position: absolute; left: -10px; top: 12px; width: 0; height: 0;
   border-top: 8px solid transparent; border-bottom: 8px solid transparent;
   border-right: 10px solid #fff3cd; /* Kleur alert-warning background */
}
/* Thinking Indicator (Aangepast) */
.is-thinking {
  /* Misschien wat padding in de bubble zelf? */
   padding: 0.75rem 1rem; /* Als .is-thinking op de bubble staat */
}

.is-thinking .dot {
  animation: thinkingDots 1.4s infinite both;
  display: inline-block;
  /* Maak er zichtbare cirkels van */
  width: 8px;   /* Pas grootte aan naar wens */
  height: 8px;
  border-radius: 50%;
  /* background-color: #adb5bd; Middengrijs (Bootstrap's $gray-500) */
  background-color: var(--color-secondary); /* Alternatief: gebruik je secondary kleur */
  /* background-color: var(--color-primary); */ /* Alternatief: gebruik je primaire kleur */
  margin: 0 3px;  /* Iets meer ruimte ertussen */
  vertical-align: middle; /* Lijn mooi uit als er tekst naast zou staan */
}

.is-thinking .dot:nth-child(2) {
  animation-delay: .2s;
}

.is-thinking .dot:nth-child(3) {
  animation-delay: .4s;
}

/* Vervang @keyframes blink door deze: */
@keyframes thinkingDots {
  0%, 80%, 100% { /* Houd laag voor langer */
    opacity: .4;
    transform: translateY(0); /* Begin/eind op basislijn */
  }
  40% { /* Piek van de animatie */
    opacity: 1;
    transform: translateY(-4px); /* Beweeg iets omhoog (pas -4px aan naar wens) */
  }
}
/* --- Dashboard Specifiek --- */
#restaurant-list div {
  border: 1px solid var(--color-border);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  background-color: var(--color-background-alt);
}

#restaurant-list h3 {
  margin-top: 0;
}

#restaurant-list button {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  /* Gebruikt standaard knopstijl */
}

/* --- Modal Stijlen --- */
.modal {
  display: none;
  /* Initieel verborgen */
  position: fixed;
  /* Blijft staan bij scrollen */
  z-index: 1000;
  /* Zorg dat het boven andere content komt */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Scrollen mogelijk als content te lang is */
  background-color: rgba(0, 0, 0, 0.4);
  /* Semi-transparante achtergrond */
}

.modal-content {
  background-color: var(--color-background);
  margin: 10% auto;
  /* Centreren (ongeveer) */
  padding: 2rem;
  border: 1px solid var(--color-border);
  width: 80%;
  max-width: 600px;
  /* Maximale breedte */
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.close-button {
  color: var(--color-text-muted);
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}



/* --- Stijl voor de Page Header Container --- */
.page-header-container {
  display: flex;
  /* Maak er een flex container van */
  justify-content: space-between;
  /* Duwt H1 naar links, link naar rechts */
  align-items: center;
  /* Lijnt ze verticaal mooi uit in het midden */
  margin-bottom: 1.5rem;
  /* Ruimte onder de header (vervangt <hr>) */
  /* Optioneel: als je toch een lijn wilt */
  /* border-bottom: 1px solid var(--color-border-subtle); */
  /* padding-bottom: 0.5rem; */
}

/* Optioneel: verwijder standaard marges van H1 binnen deze container */
.page-header-container h1 {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Aangepaste stijl voor .back-link --- */
.back-link {
  /* display: inline-block; VERWIJDEREN (flex regelt dit nu) */
  /* margin-bottom: 1rem; VERWIJDEREN */
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  /* Voorkom dat de link afbreekt */
  margin-left: 1rem;
  /* Voeg wat ruimte toe voor als de H1 lang is */
  text-decoration: none;
  /* Geen onderlijning standaard */
}

.back-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  /* Onderlijning bij hover */
}

/* Zorg dat de H1 geen onnodige marge heeft */
.page-header-container h1 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Nieuwe stijl voor de subtitel */
.page-subtitle {
  font-size: 1rem;
  /* Of bv. 0.9rem als je het kleiner wilt */
  color: var(--color-text-muted);
  /* Gebruik de subtiele tekstkleur */
  margin-top: 0.25rem;
  /* Kleine ruimte onder de H1 */
  margin-bottom: 0;
  /* Geen extra ruimte eronder */
  font-weight: 400;
  /* Normaal gewicht */
}

/* Optioneel: Geef het H1/subtitle blok wat ruimte t.o.v. de terug-link */
.page-header-container>div:first-child {
  margin-right: 1rem;
  /* Ruimte rechts van het titelblok */
}

/* === Gecentraliseerde Knop Styling === */
/* === Gecentraliseerde Knop Styling === */

/* Basis voor ALLE knoppen */
button,
.button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  /* BELANGRIJK: Geen default background/border hier */
  border: 1px solid transparent;
  /* Start met transparante border */
  padding: 0.375rem 0.75rem;
  /* Standaard padding */
  font-size: 1rem;
  /* Standaard grootte */
  border-radius: var(--border-radius);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  margin: 0.1em 0.2em;
  /* Basis marge rondom */
}

/* --- Kleur Variaties --- */

.button-primary,
button[type="submit"] {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.button-primary:hover,
button[type="submit"]:hover {
  color: var(--color-white);
  background-color: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}

.button-delete {
  color: var(--color-white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.button-delete:hover {
  color: var(--color-white);
  background-color: var(--color-danger-darker);
  border-color: #bd2130;
  /* Iets donkerder rood border */
}

.button-secondary {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.button-secondary:hover {
  color: var(--color-white);
  background-color: var(--color-secondary-darker);
  border-color: #545b62;
  /* Iets donkerder grijs border */
}

.button-edit {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.button-edit:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Grootte Variaties --- */

.button-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Focus stijl (geldt voor alle knoppen) */
button:focus,
.button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
  /* Blauwe gloed, kan aangepast */
}

/* Disabled stijl */
button:disabled,
.button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.qrcode-container {
  display: block; /* Maak er weer een block van */
  width: -moz-fit-content; /* Firefox */
  width: fit-content; /* Laat breedte aanpassen aan inhoud */
  margin: 0.5em auto; /* Centreer het blok horizontaal, met marge boven/onder */
  padding: 8px;         /* Behoud padding */
  border: 1px solid var(--color-border-subtle); /* Behoud rand */
  text-align: center; /* Centreer inline inhoud (zoals de knoppen) */
  border-radius: var(--border-radius); /* Behoud radius */
}

.qrcode-container svg.qr-code-svg { /* Zorg dat je de SVG selecteert */
  display: block;    /* Gedraagt zich als blok */
  height: auto;      /* Behoud aspect ratio */
  
 /* max-width: 150px; */ /* Verwijder deze regel */
  margin: 0 auto 0.5em auto; /* Centreer SVG binnen container, ruimte eronder */
}

.qrcode-container a,
.qrcode-container button { /* Stijl download links/knoppen */
    font-size: 0.8em;
    display: block; /* Zorgt dat ze onder elkaar komen i.p.v. naast */
    margin-top: 0.5em; /* Ruimte tussen knoppen */
    /* Knoppen erven verder button-sm etc. */
}

/* --- Responsive Aanpassingen --- */
@media (max-width: 576px) { /* Stijlen voor schermen kleiner dan 576px */

  main {
    padding-top: 40px; /* Iets minder padding bovenaan main op mobiel? */
     /* OF/EN pas margin van eerste element aan: */
  }

  /* Bijvoorbeeld specifiek voor de chat pagina: */
  #chat-container {
      margin-top: 0.5rem; /* Kleinere marge boven chat box op mobiel */
  }

  /* Bijvoorbeeld specifiek voor andere pagina's: */
   .page-header-container {
       margin-top: 0.5rem; /* Kleinere marge boven pagina titels */
       margin-bottom: 1rem; /* Kleinere marge onder titels */
   }
   h1 { font-size: 1.8rem; } /* Kleinere H1 op mobiel */


  /* NIEUW: Maak alleen de SVG kleiner op mobiel */
  .qrcode-container svg.qr-code-svg {
    max-width: 150px; /* Kleinere max-width voor SVG op mobiel */
    /* height: auto; blijft van de basisregel */
    /* margin: ... auto ...; blijft van de basisregel */
  }

  /* De aanpassing voor de knopgrootte kunnen we laten staan als die beviel */
  .restaurant-dashboard-item ul a.button,
  .restaurant-dashboard-item ul button.button-delete {
      font-size: 0.8em;
      padding: 0.2rem 0.5rem;
  }

} /* Einde media query */


.chat-back-link {
  position: absolute;
  /* Positioneer t.o.v. de header */
  top: 1rem;
  /* Afstand vanaf BOVENkant header */
  left: 1rem;
  /* Afstand vanaf LINKERkant header */
  /* transform: translateY(-50%);  */
  z-index: 4;
  /* Zorg dat hij boven de tekst overlay komt */
  color: var(--color-white);
  /* Witte tekst (of andere contrasterende kleur) */
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  /* Subtiele achtergrond voor klikbaarheid */
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
}

.chat-back-link:hover {
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

/* Zorg dat header tekst niet te dichtbij komt (padding op #chat-header-text helpt al) */
/* #chat-header-text { */
  /* padding: 0 3rem; /* Eventueel meer padding links/rechts */
/* } */

/* In src/assets/css/style.css */

/* Header Styling met Flexbox */
header {
  display: flex;             /* Maak header een flex container */
  align-items: center;       /* Centreer items verticaal */
  justify-content: center;   /* Centreer items horizontaal */
  padding: 0.5rem 1rem;      /* Behoud padding */
  border-bottom: 1px solid var(--color-border-subtle); /* Behoud lijn */
  height: 55px;              /* Geef vaste hoogte (iets meer dan logo) */

  /* --- Sticky Header Eigenschappen --- */
  position: sticky; /* Maak het sticky */
  top: 0;           /* Plak vast aan de bovenkant */
  z-index: 1000;    /* Zorg dat het boven andere content blijft */
  background-color: var(--color-background); /* ESSENTIEEL: Geef achtergrondkleur! */
  /* --- Einde Sticky --- */
}
/* Houdt de groep gecentreerd in de header */
.header-content {
  display: flex;
  justify-content: center;
}

/* De link zelf wordt een inline flex container */
a.header-logo-link {
  display: inline-flex; /* Belangrijk: inline-flex */
  align-items: center;   /* Verticaal centreren van img en span */
  gap: 0.3em;            /* Jouw gekozen ruimte tussen img en span */
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease; /* Voor hover effect */
}

a.header-logo-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* Het logo (img) binnen de link */
a.header-logo-link img.header-logo {
  height: 30px;
  width: auto;
  display: block; /* Nodig? Test zonder eventueel */
}

/* De tekst (span) binnen de link */
a.header-logo-link span.header-logo-text {
  font-weight: bold;
  font-size: 1.2em;
  /* Lijnhoogte kan helpen bij finetunen verticale uitlijning indien nodig */
  /* line-height: 1; */
}
.alert {
  position: relative; /* Zekerheidshalve *
  padding: 0.8rem 1rem; /* Ruimte binnen de box */
  margin-top: 1em;     /* Ruimte boven de box (was al vaak via div) */
  margin-bottom: 1rem; /* Ruimte onder de box */
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-size: 0.95em;
  display: flex;
    align-items: center;
  /* display: none; /* Optioneel: standaard verbergen, tonen via JS? */
  /* Voor nu laten we ze standaard de hoogte innemen */
}
.alert::before { /* Stijl voor het icoontje VOOR de foutmelding */
  content: "";                     /* Leeg content, we gebruiken background */
  display: inline-block;           /* Gedraagt zich als tekst-element */
  width: 1.2em;                    /* Grootte relatief aan tekst */
  height: 1.2em;                   /* Vierkant maken */
  margin-right: 0.6em;             /* Ruimte tussen icoon en tekst */
  vertical-align: -0.2em;          /* Iets lager zetten voor mooie uitlijning */
  background-image: url('/assets/images/ama-logo.svg'); /* Pad naar je logo! */
  background-size: contain;        /* Zorg dat hele logo past */
  background-repeat: no-repeat;
  background-position: center;
}

.alert-success {
  color: #0f5132; /* Donkergroen tekst */
  background-color: #d1e7dd; /* Lichtgroen achtergrond */
  border-color: #badbcc; /* Iets donkerder groene rand */
}

.alert-error {
  color: #842029; /* Donkerrood tekst */
  background-color: #f8d7da; /* Lichtrood achtergrond */
  border-color: #f5c2c7; /* Iets donkerder rode rand */
}

.alert-info {
  color: #055160; /* Donker cyaan/blauw tekst */
  background-color: #cff4fc; /* Licht cyaan/blauw achtergrond */
  border-color: #b6effb; /* Iets donkerder cyaan/blauwe rand */
}

.alert-warning { /* Voor de zekerheid, als we die ooit nodig hebben */
  color: #664d03; /* Donker geel/bruin tekst */
  background-color: #fff3cd; /* Lichtgeel achtergrond */
  border-color: #ffecb5; /* Iets donkerder gele rand */
}

/* Optioneel: Stijl voor een sluitknopje (als we dat willen toevoegen) */
.alert .close-alert {
    float: right;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    color: inherit; /* Gebruik kleur van alert type */
    opacity: 0.5;
    background: none;
    border: none;
    cursor: pointer;
}
.alert .close-alert:hover {
    opacity: 0.8;
}

/* In src/assets/css/style.css */
.footer-contact-link {
  color: var(--color-text-muted); /* Subtiele kleur */
  text-decoration: none;
  display: inline-flex; /* Om icon en tekst goed te alignen */
  align-items: center;
}
.footer-contact-link:hover {
  color: var(--color-primary); /* Kleur op hover */
  text-decoration: underline;
}
.footer-contact-link svg {
  /* Grootte wordt nu inline bepaald (width/height=20), */
  /* maar je kunt hier de kleur of marge verder aanpassen indien nodig */
}

/* #search-establishment { */
  /* Basis stijlen worden geërfd */

  /* Voeg ruimte toe voor het icoon */
  /* padding-left: 2.5rem; Ruimte links voor icoon (pas aan indien nodig) */

  /* Achtergrond icoon (inline SVG van een simpel vergrootglas) */
  /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e"); */
  /* background-repeat: no-repeat; */
  /* background-position: left 0.75rem center; Positie icoon (links) */
  /* background-size: 1rem 1rem; Grootte icoon */
/* } */

/* In style.css */
img.lazy-load-image {
  opacity: 0; /* Begin onzichtbaar */
  transition: opacity 0.5s ease-in-out; /* Fade transitie */
}
img.lazy-load-image.loaded {
  opacity: 1; /* Maak zichtbaar als geladen */
}


/* --- Loading Spinner --- */
.spinner {
  border: 4px solid var(--color-background-alt); /* Lichte cirkel */
  border-top-color: var(--color-primary); /* Blauwe 'slice' */
  border-radius: 50%;
  width: 30px;  /* Grootte van de spinner */
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 2rem auto; /* Centreer de spinner */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}