/* Algemene stijlen */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
	  background-color: #f0f4f8;
}



a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #007bff;
}

/* Header stijlen */
/* ========== HEADER LAGEN ========== */

/* 1) Achtergrondlaag vult de header */
.header-background {
    position: relative;                     /* anker voor ::before */
    overflow: hidden;
}

/* pseudo-element = eigenlijke foto */
.header-background::before {
    content: "";
    position: absolute;
    inset: 0;                               /* vult container volledig */
    background: url("../images/header_background.jpeg") center/cover
               no-repeat;
    opacity: 0.7;                           /* transparantie */
    z-index: 0;                             /* achter alles */
}

/* 2) Inhoudlaag (banner + kop) */
.header-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; /* vervang 5vh door vaste padding */
    z-index: 1;
}

/* Zorg dat de afbeelding de volledige breedte gebruikt met padding */
.header-content img {
    width: 100%; /* volledig breed */
    max-width: none; /* geen beperking */
    height: auto;
    display: block;
    padding: 5px; /* padding rondom de afbeelding */
    box-sizing: border-box;
	opacity:0.6
}


/* 4) Koptekst erbóven op de banner/backgroud */
.header-content h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);       /* perfect midden */
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.6);
    font-size: clamp(1.8rem, 4vw, 2.8rem);  /* schaalt mee */
    pointer-events: none;                   /* kliks gaan door naar linkjes */
    z-index: 2;                             /* hoogste laag */
}

/*  end header */
/* ========== NAVIGATIE MENU ========== */
/* Algemene navigatiestijlen */

nav.topnav {
    position: relative;
    background-color: #333;
    text-align: center;
    z-index: 10;
    width: 100%;           /* belangrijk: volledige breedte */
    box-sizing: border-box; /* padding en border meetellen */
}

nav.topnav {
    position: relative;
    background-color: #333;
    text-align: center;
    z-index: 10;
}

nav.topnav a {
    display: inline-block;
    margin: 0 10px;
    color: white;
    text-decoration: none;
    padding: 14px 16px;
}

nav.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hamburger-icoon standaard verbergen op desktop */
nav.topnav a.icon {
    display: none;
}

nav.topnav {
    position: relative;
    background-color: #333;
    text-align: center;
    z-index: 10;
    width: 100vw;              /* FORCÉÉR volledige breedte */
    box-sizing: border-box;    /* voorkom overflow door padding */
}

/* Mobiele weergave */
/* ========== MOBIELE NAVIGATIE ========== */
/* ========== NAVIGATIE ========== */
nav.topnav {
    background-color: #333;
    text-align: center;
    position: relative;
    padding: 0 16px; /* Voeg padding toe aan zijkanten */
}

nav.topnav a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 14px 16px;
}

/* Hamburger-icoon specifieke stijlen */
nav.topnav a.icon {
    display: none; /* Standaard verborgen */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px !important; /* Kleinere padding voor icoon */
    font-size: 24px;
}

nav.topnav a.icon i {
    vertical-align: middle;
}

/* Mobiele weergave */
@media screen and (max-width: 600px) {
    nav.topnav {
        padding: 0 16px; /* Behoud padding aan zijkanten */
        height: 50px; /* Vaste hoogte voor navigatiebalk */
    }

    nav.topnav a:not(.icon) {
        display: none !important;
    }

    nav.topnav a.icon {
        display: block; /* Toon hamburger-icoon */
    }

    /* Uitgeklapt menu */
    nav.topnav.responsive {
        height: auto; /* Auto hoogte voor uitgeklapte menu */
        padding: 0; /* Geen padding bij uitgeklapt menu */
    }

    nav.topnav.responsive a {
        display: block !important;
        text-align: left;
        background-color: #444; /* Donkerder grijs voor menu-items */
        border-top: 1px solid #555;
        padding: 12px 16px !important;
    }

    nav.topnav.responsive a.icon {
        background-color: transparent; /* Geen achtergrond voor icoon */
        position: absolute;
        right: 0;
        top: 0;
        transform: none;
    }
}
/* Footer stijlen */
footer {
    display: flex;
    justify-content: space-around;
    background-color: #1e1e1e; /* Donkere achtergrond */
    color: #f1f1f1;             /* Lichte tekstkleur */
    padding: 20px;
    flex-wrap: wrap;            /* Responsieve ondersteuning */
}

.footer-block {
    width: 25%;
    text-align: left;
    color: #f1f1f1;
}

.footer-block:nth-child(2) {
    text-align: center;
}

.footer-block h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-block p,
.footer-block ul li {
    font-size: 0.9em;
    color: #dddddd;
}

.footer-block ul li a {
    color: #aad8ff; /* Zacht blauw */
    text-decoration: none;
}

.footer-block ul li a:hover {
    text-decoration: underline;
}

/* Optioneel: responsieve weergave verbeteren op kleine schermen */
@media (max-width: 768px) {
    footer {
        flex-direction: column;
        align-items: center;
    }

    .footer-block {
        width: 90%;
        margin-bottom: 20px;
        text-align: center;
    }
}




/* Klachtenformulier stijlen */
.errors {
    color: red;
}

.disclaimer {
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 20px;
}

/* Top 100 bedrijven stijlen */
.top-companies {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Main stijlen */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    text-align: center;
    min-height: calc(80vh - 200px); /* hoogte scherm minus header+footer */
}

.company-list .list-container {
    display: inline-block;
    text-align: left;
    max-width: 300px;
}

.company-list ul {
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
}

/* Specifieke stijlen voor de Klacht indienen pagina */

/* begin bedrijven overzicht */
.main-bedrijfsoverzicht {
    display: flex;
    justify-content: center;
}

.top-bedrijven {
    width: 70%;
    padding: 20px;
}

.logo-grid .bedrijf-box img {
    height: 80px;               /* vaste hoogte */
    width: auto;                /* behoud aspect ratio */
    object-fit: contain;        /* schaal het binnen de hoogte zonder te knippen */
    display: block;
    margin: 0 auto;
}

.bedrijf-box {
    width: 120px;
    text-align: center;
    text-decoration: none;
    color: #333;
}

.bedrijf-box img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.bedrijf-naam {
    margin-top: 8px;
    font-size: 0.95em;
    font-weight: 600;
}


/* end bedrijven overzicht */

/* beging showBedrijf */
.bedrijf-detail {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}

.bedrijf-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.bedrijf-logo img {
    max-height: 120px;
    width: auto;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 4px;
}

.bedrijf-info {
    margin-left: 30px;
}

.bedrijf-info h1 {
    font-size: 2em;
    margin: 0;
}

.bedrijf-email {
    font-size: 0.95em;
    color: #555;
    margin-top: 8px;
}


/* end showbedrijf */

.main-addcomplain {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
    padding-top: 0px;
    box-sizing: border-box;
}

.complaint-form {
    max-width: 600px;
    width: 100%;    margin: 20px auto; /* Centreert de sectie horizontaal */
    padding: 5px;
}



.complaint-form h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

/* De container rondom het formulier */
.form-container {
    max-width: 600px; /* Breedte van het formulier zelf */
    margin: 0 auto; /* Centreert het formulier horizontaal */
    text-align: left; /* Lijn de *inhoud* van het formulier links uit */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Stijlen voor foutmeldingen */
.form-container .errors {
    color: red;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #f44336;
    background-color: #ffebee;
    border-radius: 4px;
}

/* Stijlen voor succesmeldingen */
.form-container .melding {
    color: green;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #4caf50;
    background-color: #e8f5e9;
    border-radius: 4px;
}

/* Stijlen voor de formulier-elementen */
.form-container form div {
    margin-bottom: 15px; /* Ruimte tussen formuliergroepen */
}

.form-container form label {
    display: block; /* Zorgt dat labels boven de velden staan */
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-container form input[type="text"],
.form-container form input[type="email"],
.form-container form input[type="password"],
.form-container form select,
.form-container form textarea {
    width: calc(100% - 12px); /* 100% min de border en padding */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Belangrijk voor correcte breedteberekening */
    font-size: 1em;
    font-family: inherit; /* Gebruik hetzelfde lettertype als de body */
}

.form-container form textarea {
    min-height: 120px;
}

.form-container form select {
    appearance: none; /* Verwijdert standaard browserstyling */
    background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 16px;
    padding-right: 30px;
}

.form-container form input[type="checkbox"] {
    margin-right: 5px;
}

.form-container form .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

.form-container form button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.form-container form button[type="submit"]:hover {
    background-color: #0056b3;
}

.form-container form a {
    color: #007bff;
    text-decoration: underline;
}

.form-container form a:hover {
    color: #0056b3;
}

/* begin  button */
.form-footer {
    display: flex;
    justify-content: flex-end;  /* zorgt dat de knop naar rechts schuift */
    margin-top: 20px;
    width: 100%;
}

.form-footer button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-footer button:hover {
    background-color: #0056b3;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* end button */

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.checkbox-row input[type="checkbox"] {
    margin: 0;
}


/* Responsive aanpassingen */
@media (max-width: 768px) {
    .form-container {
        padding: 15px;
    }
}
/* end styling addComplain */

/* Stijlen voor login_register.php */

#registration-form,
#login-form {
    max-width: 400px; /* Beperk de breedte van de formulieren */
    margin: 20px auto; /* Centreer de formulieren horizontaal */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#registration-form h3,
#login-form h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}
/* Stijlen voor login_register.php */

.form-wrapper {
    max-width: 800px; /* Verhoog de breedte om beide formulieren naast elkaar te laten passen */
    margin: 20px auto;
    display: flex; /* Gebruik flexbox om de containers naast elkaar te plaatsen */
    justify-content: space-between; /* Verdeel de ruimte gelijkmatig */
    flex-wrap: wrap; /* Zorg ervoor dat ze onder elkaar komen op kleinere schermen */
}
/* begin styling login_register */
#registration-container,
#login-container {
    width: 48%; /* Ongeveer de helft van de beschikbare breedte (min wat marge) */
}

#registration-form,
#login-form {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

#registration-form h3,
#login-form h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

#registration-form button,
#login-form button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

#registration-form button:hover,
#login-form button:hover {
    background-color: #0056b3;
}

#social-login {
    max-width: 800px; /* Dezelfde breedte als de form-wrapper */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
}

#social-login h3 {
    margin-bottom: 20px;
    color: #333;
}

#social-login button {
    background-color: #eee;
    color: #333;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

#social-login button:hover {
    background-color: #ddd;
}

.message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.message.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    .form-wrapper {
        display: block; /* Terug naar verticale stapel op kleinere schermen */
        max-width: 400px; /* Beperk de breedte weer */
    }

    #registration-container,
    #login-container {
        width: 100%; /* Neem de volledige breedte in */
    }

    #social-login {
        max-width: 400px;
    }
}

/* Stijlen voor login.php en register.php */

#login-form,
#registration-form {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#login-form h3,
#registration-form h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group .error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

#login-form button,
#registration-form button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

#login-form button:hover,
#registration-form button:hover {
    background-color: #0056b3;
}

#register-link,
#login-link {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
}

#social-login {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
}

#social-login h3 {
    margin-bottom: 20px;
    color: #333;
}

#social-login button {
    background-color: #eee;
    color: #333;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

#social-login button:hover {
    background-color: #ddd;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input[type="password"] {
    width: 100%;
    padding-right: 30px; /* Ruimte maken voor het icoon */
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none; /* Voorkomt selecteren van het icoon */
    color: #777;
}

.message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.message.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.message.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
/* end styling login_register */

/* begin styling logout message */
.alert.success {
    background-color: #dff0d8;
    color: #3c763d;
    padding: 10px;
    margin: 15px auto;
    width: 90%;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    text-align: center;
}
/* end styling logout message */

/* Begin styling upload bedrjiflogo preview */
#logo-preview img {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    padding: 4px;
}
/* End styling upload bedrijfslogo preview */

/* Begin styling bedankt */
.button-terug {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 15px;
}

.button-terug:hover {
    background-color: #0056b3;
}
/* End styling bedankt */

/* =============== BEDRIJFSOVERZICHT (float-aanpassing) =============== */
.logo-container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.bedrijf-box {
    float: left;
    width: 120px;
    margin: 10px;
    text-align: center;
}

.bedrijf-box img {
    height: 80px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.bedrijf-naam {
    margin-top: 6px;
    font-size: 0.9em;
    font-weight: 600;
}

@media screen and (max-width: 600px) {
    .bedrijf-box {
        width: 100%;
        float: none;
    }
}
/* end bedrijven overzicht */

/* Algemene linkstijl: zelfde kleur als gewone tekst */
a,
a:visited {
    color: inherit;
    text-decoration: none;
}

/* Onderstreping bij hover/focus */
a:hover,
a:focus {
    text-decoration: underline;
}

nav.topnav {
    position: relative;
    background-color: #333;
    text-align: center;
    z-index: 10;
    width: 100vw;              /* FORCÉÉR volledige breedte */
    box-sizing: border-box;    /* voorkom overflow door padding */
}