/* Algemene stijl */

 .mega-nav { background:#001a0f; border-bottom:2px solid #00ff66; text-align:center; }
    .mega-nav ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; }
    .mega-nav li { position:relative; padding:15px 25px; color:#00ff66; font-size:18px; font-weight:bold; cursor:pointer; }
    .mega-nav li:hover { background:#00331f; }
    .mega-menu { display:none; position:absolute; top:100%; left:0; background:#000; border:2px solid #00ff66; padding:20px; min-width:260px; z-index:999; text-align:left; }
    .mega-nav li:hover .mega-menu { display:block; }
    .mega-menu a { display:block; color:#00ff66; padding:8px 0; text-decoration:none; }
    .mega-menu a:hover { color:#66ff99; }

    h2 { text-align:center; margin-top:40px; font-size:32px; }
    p.lead { text-align:center; font-size:20px; opacity:0.85; }
    .searchbox { text-align:center; margin-top:40px; }
    input[type="text"] {
        width:60%; padding:15px; font-size:20px;
        border:2px solid #00ff66; background:#000; color:#00ff66; border-radius:6px;
    }
    button {
        margin-top:20px; padding:12px 30px; font-size:20px;
        background:#00ff66; color:#000; border:none; border-radius:6px;
        cursor:pointer; font-weight:bold;
    }
    button:hover { background:#66ff99; }
    footer {
        margin-top:60px; padding:20px; text-align:center;
        font-size:14px; opacity:0.7; border-top:1px solid #00ff66;
    }



body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #0d0d0d;
    color: #e6e6e6;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #111;
    border-bottom: 1px solid #222;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00ff66;
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: #e6e6e6;
    font-weight: 500;
}

nav a:hover {
    color: #00ff66;
}

.donate-btn {
    padding: 8px 14px;
    background: #00ff66;
    color: #000 !important;
    border-radius: 4px;
    font-weight: bold;
}

/* Hero sectie */
.hero {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(180deg, #111, #0d0d0d);
}

.hero h1 {
    font-size: 3rem;
    color: #00ff66;
}

.hero p {
    font-size: 1.2rem;
    margin-top: 10px;
}

.cta {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 24px;
    background: #00ff66;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}

/* Content sectie */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 40px 20px;
}

.card {
    background: #111;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #222;
}

.card h2 {
    color: #00ff66;
}

.card-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 16px;
    background: #00ff66;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #111;
    border-top: 1px solid #222;
    margin-top: 40px;
}
#center-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#center-wrapper > * {
    margin: 10px 0;
}
.beeks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 20px;
    text-align: center;
}

.beeks-item h2 {
    color: #00ff66;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.beeks-item img {
    width: 100%;
    max-width: 260px;
    border-radius: 6px;
    border: 1px solid #222;
}

.beeks-item audio {
    width: 100%;
    max-width: 260px;
}
/* Meditatie sectie – rustiger en strakker */
.meditation-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Kaarten iets ruimer en rustiger */
.meditation-wrapper .card {
    padding: 25px;
    border-radius: 8px;
}

/* Titels iets groter voor hiërarchie */
.meditation-wrapper .card h2 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

/* Audio speler netjes uitlijnen */
.meditation-wrapper audio {
    width: 100%;
    margin-top: 10px;
}

/* Extra ruimte tussen meditatie en andere muziek */
.meditation-section {
    margin-top: 80px;
    margin-bottom: 40px;
}

/* Zoekbalk container */
.search-container {
    display: flex;
    align-items: center;
    margin-left: 20px;
    position: relative;
}

/* Input veld */
#site-search {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #222;
    background: #0d0d0d;
    color: #e6e6e6;
    width: 160px;
    transition: 0.25s ease;
}

#site-search:focus {
    border-color: #00ff66;
    width: 220px;
    outline: none;
}

/* Suggestie dropdown */
#search-suggestions {
    position: absolute;
    top: 40px;
    left: 0;
    width: 220px;
    background: #111;
    border: 1px solid #222;
    border-radius: 4px;
    display: none;
    z-index: 999;
}

#search-suggestions div {
    padding: 10px;
    cursor: pointer;
    color: #e6e6e6;
}

#search-suggestions div:hover {
    background: #00ff66;
    color: #000;
}
/* Zoekbalk animatie & glow */
#site-search {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #222;
    background: #0d0d0d;
    color: #e6e6e6;
    width: 160px;
    transition: 0.25s ease;
}

#site-search:focus {
    border-color: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    width: 220px;
    outline: none;
}

/* Suggestie dropdown + animatie */
#search-suggestions {
    position: absolute;
    top: 40px;
    left: 0;
    width: 220px;
    background: #111;
    border: 1px solid #222;
    border-radius: 4px;
    display: none;
    z-index: 999;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#search-suggestions.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#search-suggestions div {
    padding: 10px;
    cursor: pointer;
    color: #e6e6e6;
}
/* Postzegel actie */
#postzegel-actie {
    text-align: center;
}

.actie-postzegels {
    width: 100%;
    max-width: 420px;
    border-radius: 6px;
    border: 1px solid #222;
    margin: 20px 0;
    box-shadow: 0 0 12px #00ff66;
}
/* Postzegel actie */
#postzegel-actie {
    text-align: center;
}

.actie-postzegels {
    width: 100%;
    max-width: 420px;
    border-radius: 6px;
    border: 1px solid #222;
    margin: 20px 0;
    box-shadow: 0 0 12px #00ff66;
}

/* Formulier */
.actie-formulier {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.actie-formulier input {
    padding: 10px 14px;
    width: 100%;
    max-width: 300px;
    border-radius: 4px;
    border: 1px solid #222;
    background: #0d0d0d;
    color: #e6e6e6;
    margin-bottom: 15px;
    transition: 0.25s ease;
}

.actie-formulier input:focus {
    border-color: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    outline: none;
}
/* Kleinere postzegel-afbeelding */
.actie-postzegels {
    width: 100%;
    max-width: 260px; /* kleiner gemaakt */
    border-radius: 6px;
    border: 1px solid #222;
    margin: 20px auto;
    display: block;
    box-shadow: 0 0 8px #00ff66;
}
/* Extra kleine postzegel-afbeelding */
.actie-postzegels {
    width: 100%;
    max-width: 160px; /* nog kleiner gemaakt */
    border-radius: 6px;
    border: 1px solid #222;
    margin: 20px auto;
    display: block;
    box-shadow: 0 0 6px #00ff66;
}
/* ============================
   COINFORPOWER MEGA MENU
   ============================ */

.mega-nav {
    background:#001a0f;
    border-bottom:2px solid #00ff66;
    text-align:center;
    width:100%;
}

.mega-nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    gap:10px;
}

.mega-nav li {
    position:relative;
    padding:15px 25px;
    color:#00ff66;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.25s;
}

.mega-nav li:hover {
    background:#00331f;
}

.mega-menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#000;
    border:2px solid #00ff66;
    padding:20px;
    min-width:260px;
    z-index:9999;
    text-align:left;
    border-radius:6px;
    box-shadow:0 0 20px rgba(0,255,102,0.25);
}

.mega-nav li:hover .mega-menu {
    display:block;
}

.mega-menu a {
    display:block;
    color:#00ff66;
    padding:8px 0;
    text-decoration:none;
    font-weight:bold;
}

.mega-menu a:hover {
    color:#66ff99;
}
/* ============================
   COINFORPOWER MEGA MENU
   ============================ */

.mega-nav {
    background:#001a0f;
    border-bottom:2px solid #00ff66;
    text-align:center;
    width:100%;
}

.mega-nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    gap:10px;
}

.mega-nav li {
    position:relative;
    padding:15px 25px;
    color:#00ff66;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.25s;
}

.mega-nav li:hover {
    background:#00331f;
}

.mega-menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#000;
    border:2px solid #00ff66;
    padding:20px;
    min-width:260px;
    z-index:9999;
    text-align:left;
    border-radius:6px;
    box-shadow:0 0 20px rgba(0,255,102,0.25);
}

.mega-nav li:hover .mega-menu {
    display:block;
}

.mega-menu a {
    display:block;
    color:#00ff66;
    padding:8px 0;
    text-decoration:none;
    font-weight:bold;
}

.mega-menu a:hover {
    color:#66ff99;
}

/* Prevent right-side dropdown overflow */
.mega-nav li.dropdown:nth-last-child(-n+2) .mega-menu {
    left:auto;
    right:300px;
}
/* ============================
   COINFORPOWER NAV (ISOLATED)
   ============================ */

.c4p-nav {
    width: 100%;
    background: #001a0f;
    border-bottom: 2px solid #00ff66;
}

.c4p-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.c4p-nav li {
    position: relative;
    padding: 15px 25px;
    color: #00ff66;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.c4p-nav li:hover {
    background: #00331f;
}

/* DROPDOWN */
.c4p-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #000;
    border: 2px solid #00ff66;
    min-width: 260px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,255,102,0.25);
    z-index: 9999;
}

.c4p-dropdown:hover .c4p-menu {
    display: block;
}

.c4p-menu a {
    display: block;
    padding: 8px 0;
    color: #00ff66;
    text-decoration: none;
    font-weight: bold;
}

.c4p-menu a:hover {
    color: #66ff99;
}

/* FIX: Laat de rechter menu’s naar links openen */
.c4p-align-right .c4p-menu {
    right: 0;
    left: auto;
}
/* ============================
   COINFORPOWER NAV BLOK
   ============================ */

.c4p-nav {
    width: 100%;
    background: #001a0f;
    border-bottom: 2px solid #00ff66;
    margin-top: 10px;
}

.c4p-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.c4p-nav li {
    position: relative;
    padding: 15px 25px;
    color: #00ff66;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.c4p-nav li:hover {
    background: #00331f;
}

/* DROPDOWN */
.c4p-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #000;
    border: 2px solid #00ff66;
    min-width: 260px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,255,102,0.25);
    z-index: 9999;
}

.c4p-dropdown:hover .c4p-menu {
    display: block;
}

.c4p-menu a {
    display: block;
    padding: 8px 0;
    color: #00ff66;
    text-decoration: none;
    font-weight: bold;
}

.c4p-menu a:hover {
    color: #66ff99;
}

/* FIX: Laat de rechter menu’s naar links openen */
.c4p-right .c4p-menu {
    right: 0;
    left: auto;
}
/* ============================
   COINFORPOWER NAV BLOK
   ============================ */

.c4p-nav {
    width: 100%;
    background: #001a0f;
    border-bottom: 2px solid #00ff66;
    margin-top: 10px;
}

.c4p-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.c4p-nav li {
    position: relative;
    padding: 15px 25px;
    color: #00ff66;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.c4p-nav li:hover {
    background: #00331f;
}

/* DROPDOWN */
.c4p-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #000;
    border: 2px solid #00ff66;
    min-width: 260px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,255,102,0.25);
    z-index: 9999;
}

.c4p-dropdown:hover .c4p-menu {
    display: block;
}

.c4p-menu a {
    display: block;
    padding: 8px 0;
    color: #00ff66;
    text-decoration: none;
    font-weight: bold;
}

.c4p-menu a:hover {
    color: #66ff99;
}

/* FIX: Laat de rechter menu’s naar links openen */
.c4p-right .c4p-menu {
    right: 0;
    left: auto;
}

/* ============================
   COINFORPOWER NAV BLOK
   ============================ */

.c4p-nav {
    width: 100%;
    background: #001a0f;
    border-bottom: 2px solid #00ff66;
    margin-top: 10px;
}

.c4p-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.c4p-nav li {
    position: relative;
    padding: 15px 25px;
    color: #00ff66;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.c4p-nav li:hover {
    background: #00331f;
}

/* DROPDOWN */
.c4p-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #000;
    border: 2px solid #00ff66;
    min-width: 260px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,255,102,0.25);
    z-index: 9999;
}

.c4p-dropdown:hover .c4p-menu {
    display: block;
}

.c4p-menu a {
    display: block;
    padding: 8px 0;
    color: #00ff66;
    text-decoration: none;
    font-weight: bold;
}

.c4p-menu a:hover {
    color: #66ff99;
}

/* FIX: Laat de rechter menu’s naar links openen */
.c4p-right .c4p-menu {
    right: 0;
    left: auto;
}