/*--------------------------------------------------------------
  Logische groepering
  - Layout & Positionering → display, position, flex, grid
  - Box Model → margin, padding, width, height, gap, border
  - Visueel → background, color, box-shadow, opacity
  - Tekst → font, text-align, line-height
  - Overig → animation, transition, cursor, enz.
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/*--------------------------------------------------------------
  1. Root Variables
--------------------------------------------------------------*/
:root {
  --primary: #3C5AA6;
  --primary-dark: #0A1E40;
  --text-color: #0A1E40;
  --background: #0e2a5a;
  --white: #ffffff;
  --gray-light: #1C2A4D;
  --gray-dark: #101828;
  --accent-green: #00C853;
  --accent-red: #D50000;
  --accent-orange: #FF7F50;
  --font-body: 'Montserrat', sans-serif;
  --shadow: 0 0 2px rgba(0, 0, 0, 0.3);

  /* Info boxes */
  --info-box-gray: #cccccc39;
  --info-box-green: #DFF0D8;
  --info-box-red: #F2DEDE;
  --info-box-border: 4px solid #777;
  --info-box-border-green: 4px solid green;
  --info-box-border-red: 4px solid red;
}

/*--------------------------------------------------------------
  2. Global Styles & Resets
--------------------------------------------------------------*/
html, body {
  margin: 0;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--text-color);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  max-height: 100rem; /* maximale hoogte van de body */
}

h1 { font-size: 2.8rem; font-weight: bold; margin-bottom: 1rem; }
h2 { font-size: 1.4rem; font-variant: small-caps; text-transform: uppercase; margin-bottom: 0.625rem; color: var(--primary); }
h3 { color: var( --primary); margin-bottom: 0rem;}
h4 { font-size: 0.9rem; }
p { margin-top: 0; }

header {
  display: flex; /* Maakt de header een flexibele container */
  align-items: center; /* Centreert de items (logo en h2) verticaal */
  justify-content: flex-start; /* Lijn de items links uit */
  gap: 0.5rem; /* Voegt ruimte toe tussen de items */
}


.hidden { display: none !important; }

.text-align_l { text-align: left; }
.text-align_r { text-align: right; }
.text-align_c { text-align: center; }

/*--------------------------------------------------------------
  3. Layout
--------------------------------------------------------------*/
.wrapper {
  flex: 1;
  width: 100%;
  padding: 0 0.625rem;
  box-sizing: border-box;
  background: var(--background);
  max-width: 100rem;
  margin: 1rem auto 0;
}

.columns { display: flex; gap: 1rem; align-items: stretch; }
.column { flex: 1; display: flex; flex-direction: column; gap: 1rem; }


.column_picks > .box_color { flex: 1; display: flex; flex-direction: column; }
.wrapper-login .columns { justify-content: center; flex-wrap: wrap; gap: 1rem; }
.wrapper-login .column { flex: 0 0 30rem; max-width: 100%; }
.wrapper-login .column > .box,
.wrapper-login .column > .box_color { flex: 1; display: flex; flex-direction: column; }
.login-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }

.enroll-column {
  width: 50%;
}


.lees-meer-btn {
  display: none;
}
/*--------------------------------------------------------------
  4. Boxes & Panels
--------------------------------------------------------------*/
.box,
.box_color {
  padding: 1rem;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--white);
}

.box_color {
  background: var(--primary);
  color: var(--white);
}
.box_color h2 { color: var(--white); }

.box_profile {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
}

.info-box,
.info-box_main,
.info-box_green,
.info-box_red {
  padding: 1rem;
  margin-bottom: 1rem;
}

.info-box { 
  background: var(--white); 
  border-left: var(--info-box-border); 
  margin-top: 1rem;
  
}
.info-box_main { background: var(--info-box-gray); border-left: var(--info-box-border); }
.info-box_green { background: var(--info-box-green); border-left: var(--info-box-border-green); }
.info-box_red { background: var(--info-box-red); border-left: var(--info-box-border-red); }

.container-rules {

  padding-left: 2rem;
}
.rules-list {
  list-style-type: disc;
  padding-left: 1.5rem; /* Ruimte tussen de bullet en de tekst */
  margin-top: 0; /* Verwijder de standaard marge boven de lijst */
}
/*--------------------------------------------------------------
  5. Logos & Icons
--------------------------------------------------------------*/
.logo,
.grey-logo {
  height: 1.2rem;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.grey-logo { filter: grayscale(100%); opacity: 0.6; }

.logo_large { width: 180px; height: auto; margin-top: 5px; }
img.crestio { width: 100px; height: auto; margin-top: 5px; }

/*--------------------------------------------------------------
  6. Tables
--------------------------------------------------------------*/
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: var(--font-body);
  margin: 1.25rem 0;
  font-size: 1rem;
}

th, td { padding: 0.25rem; border: 1px solid var(--gray-dark); }

.table-divider { height: 1rem; background-color: var(--white); border: none; }

table th {
  background-color: var(--primary);
  color: var(--white);
  padding: 6px 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

table td { padding: 3px; border: 1px solid rgba(176, 170, 170, 0.692); }
table tr:nth-child(even) { background-color: rgba(151, 151, 151, 0.14); }


/*
.standings-table th:nth-child(2),
.standings-table td:nth-child(2),


*/.rules_example th:nth-child(2),
.rules_example td:nth-child(2),
.club-table th:first-child,
.club-table td:first-child {
  text-align: left;
  padding-left: 0.5rem;
}

.rules_example th:nth-child(1),
.rules_example td:nth-child(1) {
  text-align: left;
  padding-left: 0.5rem;
}


/*--------------------------------------------------------------
  7. Match Cards & Club Info
--------------------------------------------------------------*/
fieldset {
  background: var(--white);
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin-bottom: 32px;
}

.match-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 24px;
  padding: 6px;
  background: var(--white);
  box-shadow: var(--shadow);
}

legend { font-size: 1.1em; font-weight: bold; }

.matchday {
  background: var(--primary);
  padding: 5px;
  border-radius: 3px;
  color: #F9F9F9;
  font-size: 1.6rem;
}
.matchday_large { font-size: 3rem; }

.match-choices { display: flex; align-items: center; }
.match-option { display: flex; align-items: center; cursor: pointer; padding-bottom: 10px; }

.match-option input[type="radio"] { margin: 0; vertical-align: middle; }

.vs-text { font-weight: normal; font-size: 0.8rem; margin: 0 6px 10px; }

.joker-block {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font: 500 0.9rem/1.2 var(--font-body);
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--primary);
  margin-top: 1.875rem;
  cursor: pointer;
}

.team-name { margin: 0; padding: 0; vertical-align: middle; }
.highlight-red { color: var(--accent-red); font-weight: bold; }

label img,
.result img { height: 24px; vertical-align: middle; margin: 0 6px; }

.match small { display: block; font-size: 0.8em; color: #555; margin-bottom: 4px; }
.match-past { color: #999; }
.match-future { color: #000; }

label:has(input[type="radio"]:checked) .team-name,
.chosen-team-highlight,
.highlighted-choice {
  border-bottom: 2px solid var(--accent-red);
  font-weight: bold;
}

/*--------------------------------------------------------------
  8. Forms & Inputs
--------------------------------------------------------------*/
.selected_round {
  min-width: 160px;
  margin: 0 40px 15px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-body);
  padding: 10px 32px 10px 12px;
  appearance: none;
  background: var(--white) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'><path fill='%23333' d='M0 0l5 5 5-5z'/></svg>") no-repeat right 10px center/10px 5px;
  outline: none;
}

.contact-box input:not([type="checkbox"]),
.register-box input:not([type="checkbox"]),
.login-box input:not([type="checkbox"]),
.reset-box input:not([type="checkbox"]) {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--gray-dark);
  border-radius: 4px;
  font-size: 1em;
  font-family: var(--font-body);
}

.form-message {
  margin-top: 1rem;
  display: block;
}

.privacy_ok {
  margin-top: 1rem;
  font-size: 0.8rem;

}
.privacy_ok a { color: var(--primary); }
.privacy_ok a:visited { color: var(--primary-dark); }
.privacy_ok a:hover { color: var(--primary);  }


/*--------------------------------------------------------------
  9. Buttons & Links
--------------------------------------------------------------*/
.btn-submit,
.btn-submit_alt,
.btn-submit_sec {
  padding: 10px 20px;
  color: var(--white);
  border-radius: 24px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-body);

}

.btn-submit { background: var(--primary); border: none; }
.btn-submit_alt { background: var(--primary); border: 2px solid var(--white); }
.btn-submit_sec { background: var(--accent-orange); border: 2px solid var(--white); }

.table-tabs { margin-bottom: 20px; }
.table-tabs button {
  padding: 10px 20px;
  margin-right: 5px;
  border: none;
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  border-radius: 24px;
  font-size: 0.85rem;
  font-variant: small-caps;
  text-transform: uppercase;
}
.table-tabs button.active { background: var(--accent-orange); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.extra-links { text-align: right; }
.extra-links a { color: var(--primary); text-decoration: none; }
.extra-links a:hover { text-decoration: underline; }

.change_club a {
  font-size: 0.7em;
  text-decoration: none;
  font-variant: small-caps;
  text-transform: uppercase;
  color: var(--primary);
}
.change_club a:visited { color: var(--primary); }
.change_club a:hover { text-decoration: underline; }

.login-actions .forgot-link { text-decoration: none; margin-left: 1rem; color: var(--primary); }
.login-actions .forgot-link:hover { text-decoration: underline; }

.deadline-wrapper {
    display: flex;
    justify-content: space-between; /* Drukt de deadline naar links en de button naar rechts */
    align-items: center;           /* Zet ze verticaal netjes op één lijn */
    width: 100%;                   /* Zorg dat de wrapper de volle breedte pakt */
}

/* Styling voor de kleine picks button */
.btn-picks-small {
    padding: 4px 8px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: bold;
    transition: background 0.2s;
    margin-right: 15px;
}



/* Zorg dat game-meta zelf ook een flex-column is als dat nog niet zo was */
.game-meta {
    display: flex;
    flex-direction: column;
}

/*--------------------------------------------------------------
  10. Profile Page
--------------------------------------------------------------*/
.profile_header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.right-side { display: flex; flex-direction: column; align-items: center; }
.club-display { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#club-form { display: none; }

/*--------------------------------------------------------------
  11. Spinner & Modal
--------------------------------------------------------------*/
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  padding: 2rem;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.spinner-container.fade-out { opacity: 0; pointer-events: none; }

.spinner {
  width: 40px;
  height: 40px;
  border: 8px solid #ccc;
  border-top: 8px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 1rem auto 20px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

/* Reset conflicterende regels */
.game-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;             /* ruimte tussen boxen */
  justify-content: center; /* centreren van de hele grid */
  margin: 1rem auto;
  max-width: 1200px;      /* optioneel, voor desktop */
}

.game-box {
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
  flex: 1 1 250px;       /* minimaal 250px breed, groeit als er ruimte is */
  max-width: 100%;        /* nooit groter dan container */
}

/* Responsive breekpunten */
@media (max-width: 1024px) {
  .game-box {
    flex: 1 1 45%;       /* twee items per rij als mogelijk */
  }
}

@media (max-width: 768px) {
  .game-box {
    flex: 1 1 100%;      /* één item per rij */
  }
}





/* Optioneel: afbeeldingen centreren */
.game-logo {
  display: block;
  margin: 1rem auto;
  max-width: 7rem;
  height: auto;
}

.game-title {
  background-color: var(--primary);
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  text-align: center;
}


/*--------------------------------------------------------------
  12. Responsive
--------------------------------------------------------------*/
.mobile { display: none; flex-direction: column; align-items: flex-start; gap: 2px; }
.desktop { display: flex; }
.show-mobile { display: none; }
.rotate-icon { display: none; }

.mobile-only {display: none;}
.desktop-only {display: inline;}


@media (max-width: 499px) {

  h2 { font-size: 1.3rem; font-variant: small-caps; text-transform: uppercase; margin-bottom: 0.625rem; color: var(--primary); }

    .wrapper-login .column,
    .wrapper-reset .column { flex: 1 1 100%; }

.enroll-column {
  width: 100%;
}

.enrollment-container {
  width: 100%;
  margin: 0 auto;
}
  .btn-picks {
    padding: 0.6rem 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
  }

  .standings-table th,
  .standings-table td {
    padding: 0.25rem 0.1rem
  }

  .pick-table th,
  .pick-table td {
    padding: 0.25rem 0.15rem;
    font-size: 1rem;

  }

    .hide-mobile { display: none; }
    .show-mobile { display: block; }
    .columns { flex-direction: column; }
    .table-tabs-desktop { display: none; }
    .table-tabs button {font-size: 0.8rem; margin-right: 0px; margin-bottom: 10px; padding: 10px 16px;}
    .rotate-icon { display: inline-block; }

    .mobile { display: flex; }
    .desktop { display: none; }
    .vs-text { display: none; }
    .match-option { justify-content: flex-start; }

    .mobile-only { display: inline; }        
    .desktop-only { display: none; }

}

/*--------------------------------------------------------------
  13. Stand (ranking.php)
--------------------------------------------------------------*/
.rotate-icon {
  max-height: 1.2rem;
  height: 1em;
  vertical-align: middle;
  margin-left: 8px;
}

.update-info { font-style: italic; }

/* 
  .wrapper-login .columns,
  .wrapper-reset .columns { justify-content: stretch; gap: 0.5rem; }
  .wrapper-login .column,
  .wrapper-reset .column { flex: 1 1 100%; }
  .wrapper-login .column > .box,
  .wrapper-login .column > .box_color,
  .wrapper-reset .column > .box,
  .wrapper-reset .column > .box_color { flex-grow: 0; }
  .wrapper-login .box,
  .wrapper-login .box_color { height: auto; } */


/*--------------------------------------------------------------
  14. Tijdelijke test ruimte
--------------------------------------------------------------*/



.game-box-text {
  font-size: 1.2rem;
  color: #333;
  text-align: left;
}
.game-title {
  /* No top or side margins */
  background-color: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  /* Resetting margins to ensure no space above or on sides */
  margin: 0;
  width: 100%;
}

.game-title-alert {
  /* No top or side margins */
  background-color: var(--accent-red);
  color: #fff;
  font-size: 1.4rem;
  padding: 1rem 0 1rem 0;
  font-weight: bold;
  text-align: center;
  /* Resetting margins to ensure no space above or on sides */
  margin: 0;
  width: 100%;
}

.game-logo {
  /* Center the logo below the title */
  display: block;
  margin: 1rem auto;
  max-width: 7rem; /* Example size */
  height: auto;
}

.game-logo_rules {
  /* Center the logo below the title */
  display: block;
  max-width: 1.5rem; /* Example size */
  height: auto;
  margin-top: 0.5rem;
}

.game-meta {
  display: flex;
  flex-direction: column; /* Stacks the items vertically */
  font-size: 0.8rem;
  color: #666;
  gap: 0.5rem; /* Add a small gap between the two lines */
  text-align: left;
  margin-left: 1rem;
}

.game-status {
  font-weight: bold;
  font-size: 1rem;
}
.game-deadline{
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.deadline-time{
  font-weight: normal;
  font-size: 0.8rem;
}


.status-label {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
font-size: 0.8rem;}

.status-label.open {
  background-color: #28a745; /* Green */
}

.status-label.started {
  background-color: #dc3545; /* Red */
}

.status-label.coming {
  background-color: var(--primary); /* Red */
}

.status-label.finished {
  background-color: black; /* Red */
}


.enrollment-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.enrollment-container p {
  font-size: 1.2rem;
}
.enrollment-container form {
  display: flex;
  justify-content: center;
  gap: 1rem; /* ruimte tussen knoppen */
  flex-wrap: wrap; /* zorgt dat ze netjes blijven op kleine schermen */
}

.logo-enroll {
  width: 15rem;
  height: auto;
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* Verbergt de content die niet actief is */
.hidden {
  display: none;
}

/* Geeft aan dat je op een header kunt klikken */
.game-rules-tab {
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

/* Stijl voor de actieve header */
.game-rules-tab.active-tab {
  border-bottom-color: var(--primary); /* of een andere kleur */
}


/*--------------------------------------------------------------
  15. Tijdelijke test ruimte (2)
--------------------------------------------------------------*/

.achievement-item {
  margin-left: 0;
}

/*--------------------------------------------------------------
  13. Profielpage
--------------------------------------------------------------*/
/* Game list */
/* Zorg dat dit *later* geladen wordt dan bestaande .game-list / .game-link regels */

/* Reset en container */
.game-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Elke rij */
.game-list li {
  margin: 0.5rem 0;
}

/* Belangrijk: specifieke selector zodat eerdere regels worden overschreven */
.game-list .game-link {
  display: flex !important;           /* forceer flex (kan verwijderd worden als order goed is) */
  align-items: center;                /* verticaal centreren */
  justify-content: flex-start;        /* houd alles links uitgelijnd */
  gap: 0.2rem;                         /* ruimte tussen logo en tekst */
  text-decoration: none;
  color: inherit;                      /* gebruik de tekstkleur van parent */
  padding: 0.25rem 0.5rem;             /* optioneel: klikgebied */
  width: 100%;                         /* optioneel: hele rij klikbaar */
  box-sizing: border-box;
}

/* Logo */

.game-list .game-logo {
  width: 1.3rem;            /* maat naar wens */
  object-fit: contain;
  margin: 0;              
  display: inline-block;
  padding: 0.3rem 0.3rem 0.3rem 0.8rem;  /* ruimte rondom logo */
}



/* Tekst direct naast logo, links uitgelijnd */
.game-list .game-link > span,
.game-list .game-link > .game-text {
  display: inline-block;
  text-align: left;
  white-space: nowrap;          /* voorkomt onnodig broke */
  overflow: hidden;
  text-overflow: ellipsis;     /* optioneel: afkappen als te lang */
  color: var(--primary);

}

/* Hover stijl */
.game-list .game-link:hover {
  color: var(--primary);
  font-size: bold;
  background: rgba(0,0,0,0.12); /* subtiele hover achtergrond */
}

ul.game-list li {
  margin-bottom: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
    color: var(--primary);

}

ul.game-list a {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  font-weight: 500;
  color: var(--primary); /* 1x hier is genoeg */
  transition: background-color 0.3s ease;
}

ul.game-list a:hover {
  background-color: rgba(0, 0, 0, 0.12);
  font-weight: bold;
}


ul.action-list,ul.profile-list {
  list-style: none;
  padding: 0;
  color: var(--text-color);
}

ul.action-list li{
  margin-bottom: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

ul.profile-list li {

    display: block;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  font-weight: 500;
  color: var(--text-color);
}

/* Link vult het hele blok en krijgt padding + achtergrond */
ul.action-list li a {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  font-weight: 500;
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

/* Hover over hele blok */
ul.action-list li a:hover {
  background-color: rgba(0, 0, 0, 0.12);
  font-weight: bold;
}

/* Bezochte links */
ul.action-list {
  color: var(--primary);
}



#toggle-password-link.active {
  font-weight: bold;
  color: var(--white);
  background-color: var(--primary);
}

.readmore-link {
  display: none;
}

.readmore-content {
  display: block;
}


@media (max-width: 768px) {
  .readmore-link {
    display: inline-block;
    cursor: pointer;
    color: #0077cc;
    text-decoration: underline;
  }

  .readmore-content {
    display: none;
  }

  .readmore-content.visible {
    display: block;
  }
}

/*-------------------------------------------------------------
  14. Chat
--------------------------------------------------------------*/

/* Floating Button */
#chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

#chat-button:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Chat Window */
#chat-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 90%;
  max-width: 380px;
  height: 85%;
  background: #121212;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: none;
  overflow: hidden;
  z-index: 10000;
  transition: all 0.2s ease-in-out;
}

#chat-window iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.0); /* volledig transparant */
  display: none;
  z-index: 9998;
}

/* Desktop layout */
@media (min-width: 769px) {
  #chat-window {
    bottom: 80px;
    right: 20px;
    width: 380px;
    height: 85vh;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  }
}

/* Mobiel layout (De Fake Fullscreen) */
@media (max-width: 768px) {

/* Als de chat open is, verbergen we de losse knop op de achtergrond */
  body.chat-open #chat-button {
    display: none !important;
  }
      
  #chat-window {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* vw zorgt voor de volledige breedte van het scherm, ongeacht parent containers */
    width: 100vw !important; 
    height: 100% !important; 
    max-width: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Verberg de overlay op mobiel aangezien de chat 100% vult */
  #chat-overlay {
    display: none !important;
  }
}