/* Kleuren:
#333333 zwart
#666a86 donkerder blauw
#95b8d1 lichter blauw
#e8ddb5 geel
#edafb8 rood
#d76a77 donkerder rood (voor de delete knoppen)
#2f4f3a donker groen
*/

/* Algemeen */
body[data-theme="light"] {
    background-size: cover;
    margin: 0;
    background-color: #EFEFEF;
    color: black;
    --bg-color: #FFFFFF;
    --text-color: black;
    --search-button-bg-color: #333333;
    --review-bg-color: #ffffff;
    --review-text-color: #000000;
    --hero-bg-color: #333333;
    --link-color: #1a0dab;

    --home-wim-bg-color: white;

    --sect-divider-lign-color: #333333;
}

body[data-theme="dark"] {
    background-size: cover;
    margin: 0;
    background-color: #333333;
    color: white;
    --bg-color: #222222;
    --text-color: white;
    --search-button-bg-color: #95b8d1;
    --review-bg-color: #444444;
    --review-text-color: #ffffff;
    --hero-bg-color: rgba(149, 184, 209);
    --link-color: #8ab4f8;

    --home-wim-bg-color: white;

    --sect-divider-lign-color: #e5e5e5;

}

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

button {
    background-color: #95b8d1;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 8px;
}

button:hover {
    background-color: #edafb8;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #95b8d1;
    color: white;
    text-transform: uppercase;
}

tr:hover {
    background-color: #6f7497;
}


input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #edafb8;
}

img {
    border-radius: 8px;
}









#flash-container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.flash-message {
    background-color: #e8ddb5;
    border-left: 5px solid #428c55;
    padding: 8px;
    margin: 10px 0;
    border-radius: 4px;
    color: #2f3e2f;
}

.flash-success { background: #e6ffed; color: #067d3f; }
.flash-error { background: #ffe6e6; color: #a30000; }
.flash-warning { background: #fff4e5; color: #b36b00; }
.flash-info { background: #e6f2ff; color: #004085; }















.delete-button {
    background-color: #d76a77;
}


.tag {
    padding: 4px 10px;
    margin: 5px;
    border-radius: 5px;
    font-size: 0.9em;
}

.category-tag { background-color: #ccc; color: black;}
.vegan-tag { background-color: #4caf50; color: white; }
.lactose-tag { background-color: #ff9800; color: white; }
.gluten-tag { background-color: #f44336; color: white; }










.section-divider{
    width:80%;
    height:1px;
    margin:80px auto;
    background:linear-gradient(
        to right,
        transparent,
        var(--sect-divider-lign-color),
        transparent
    );
}


























/* Navigatie balk */

nav {
    background-color: var(--bg-color);
    height: 80px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
}

nav img {
    height: 50px;
    display: block;
}
nav button {
    height: 80px;
    border-radius: 0;
    border: none;
    background-color: var(--bg-color);
    font-size: 16px;
    color: var(--text-color);
}
nav button:hover {
    cursor: pointer;
}

nav a.push_right {
    margin-left: auto;
}

nav a.language button {
    padding: 4px 8px;
    font-size: 0.9rem;
}




/* Spinner */
.quick-box {
    position: relative; /* so the spinner can be positioned inside */
}

.geo-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #666a86; /* your accent color */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    position: absolute;
    right: 10px;   /* adjust position inside the button */
    top: 50%;
    transform: translateY(-50%);
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}




















/* Map */
#map {
    height: calc(100vh - 80px); /* Full screen height */
    width: 100%;
}