@charset "utf-8";
/* --------- importing google-fonts -----------  */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Sample -
.inter-<uniquifier> {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: <nummer>;
    font-style: normal;
}
 */
/* -----------------------------------------
   GLOBAL
----------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: rgba(5, 10, 20, 0.75);
}

.wrapper {
    display: flex;
}
/* -----------------------------------------
    Buttons
----------------------------------------- */
.btn {
    border: #CC0000  2px solid;
    padding: 10;
    border-radius: 5px;
}
.btnk {
    border: #00CC00  2px solid;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
}
.btm {
    width: 98%;
    border: #0099FF 2px solid;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 8px;
    border-radius: 5px;
}
.btmo {
     width: 98%;
    border: #FFFF00 2px solid;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 8px;
    color: #00FF99;
    border-radius: 5px;

}
.btmB {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 300px;
    border: #00CC00 2px solid;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 8px;
    border-radius: 5px;
   }
.btmgold {
    border: double #FFFF00 4px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 8px;
    border-radius: 5px;
}

/* -----------------------------------------
   SIDEBAR
----------------------------------------- */
.sidebar {
/*   position: absolute;
   top: 0px;*/
    width: 320px;
    background: #11131a;
    padding: 20px;
    border-right: 2px solid #FF9900;
    height: 1000px auto;
}

.sidebar a {
    display: block;
    margin: 6px 0;
}
/* -----------------------------------------
    Plaats images naast elkaar
----------------------------------------- */
.login-register {
    text-align: center;
    white-space: nowrap;
    padding: 20px;
    background: rgba(0, 5, 20, 0.7);
    border: 1px solid #00eaff;
    border-radius: 10px;
    box-shadow:
        0 0 15px #00eaff,
        inset 0 0 10px rgba(0, 200, 255, 0.3);
}

.login-register a,
.login-register span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: #7dd3fc;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    text-shadow: 0 0 8px #00eaff;
}

.login-register img {
    display: inline-block;
    vertical-align: middle;
    transition: 0.25s ease;
    border-radius: 6px;
    box-shadow: 0 0 10px #00eaff;
}

/* Hover glow pulse */
.login-register img:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 15px #00eaff,
        0 0 25px #00aaff,
        0 0 35px #0088ff;
}

.visitor {
   position: relative;
   left: 0px;
   top: 60px;
   border: #009900 solid 2px;
   width: 400px !important;
   padding: 10px;
}
.wikireader {
    position: absolute;
    left: 0px;
    top: 60px; 
}

/* -----------------------------------------
   CONTENT (INCL. FIX)
----------------------------------------- */
.content {
    position: relative;        /* terug in normale flow */
    margin-left: 340px;        /* breedte sidebar */
    padding: 20px;
    max-width: 900px;
    top: 0;                    /* welkom.php begint bovenaan */
}
.welcome {
    position: absolute;
    top: 80px;
    left: 500px;
}

/* FIX: Content moet onder header + logo + disclaimer vallen */
@media (max-width: 900px) {
    .content {
        margin-top: 220px !important;
        padding-top: 10px;
    }
}
/* Donation button */
/* FIXED TOP POSITION */
.donate-top {
    position: fixed;
    top: 10px;
    right: 10px;       /* of left:10px als je links wilt */
    z-index: 9999;
    text-decoration: none;
}

/* BUTTON STYLE */
.donate {
    display: inline-flex;      /* icon + tekst op één lijn */
    align-items: center;       /* verticaal centreren */
    gap: 8px;                  /* ruimte tussen icon en tekst */
    padding: 12px 20px;
    background: #0ff;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 12px #0ff;
}

/* ICON FIX */
.donate img {
    display: block;
}



/* -----------------------------------------
   ACCORDION BUTTON
----------------------------------------- */
.dropdown-btn {
    width: 100%;
    background: #222;
    color: #fff;
    padding: 10px;
    border: none;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.dropdown-btn .arrow {
    transition: transform .25s ease;
}

.dropdown-btn.active .arrow {
    transform: rotate(180deg);
}

/* -----------------------------------------
   SOFT-OPEN ANIMATIE
----------------------------------------- */
.dropdown-content {
    display: none;
    padding-left: 10px;
    background: #1a1a1a;
}

.dropdown-content.show {
    display: block;
}


/* -----------------------------------------
   MOBILE SIDEBAR
----------------------------------------- */
.mobile-sidebar-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2000;
    background: #FF9900;
    border: none;
    padding: 10px 14px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.55);
    z-index: 1500;
}

/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */
@media (max-width: 900px) {

    .wrapper {
        flex-direction: column;
    }

    .mobile-sidebar-toggle {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100%;
        overflow-y: auto;
        transition: left .3s ease;
        z-index: 1600;
    }

    .sidebar.open {
        left: 0;
    }

    .mobile-overlay.show {
        display: block;
    }
}
.lh {
    line-height: 2;
}

.searchbox input[type="text"] {
    width: 320px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #151515;
    color: #eee;
}
/* deel 2 */
.searchbox button {
    padding: 10px 16px;
    background: #4cc2ff;
    border: none;
    border-radius: 6px;
    color: #000;
    cursor: pointer;
}
.searchbox button:hover {
    background: #35a0d8;
}
.border {
    border: #009900 solid 2px;
 width: 420px;
 padding: 10px;
}

u.nations {
    color: yellow;
    text-decoration-line: underline;
    text-decoration-color: red;
}

.search-input {
    width: 300px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #4cc2ff;
    background: #181818;
    color: #eee;
}

.search-button {
    padding: 8px 14px;
    background: #4cc2ff;
    border: none;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
}