.screen-reader-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tgl-opener {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 10px 0 0 10px;
    background-image: url('../images/icon.svg');
    background-size: 27px;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0px 3px 10px 0px #00000026;
    background-color: #fff;
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 1000;
    cursor: pointer;
    transition: left 0.9s ease;
    z-index:999 !important;
}

.tgl-opener.open {
    right: -122px;
}

.tgl-wrapper {
    position: fixed;
    z-index:99999999999 !important;
    top: 200px;
    right: -422px; /* buiten beeld */
    width: 392px;
    transition: right 0.4s ease;
    background-color: #fff;
    border-radius: 10px 0 0 10px;
    z-index: 999;
    box-shadow: 0px 3px 10px 0px #00000026;
}

.tgl-wrapper.open {
    right: 0px; /* zichtbaar naast de opener */
}

.tgl-wrapper h3 {
    position: relative;
    font-size: 19px;
    font-weight: 700;
    display: inline-block;
}

.tgl-wrapper h3:before {
    content: '';
    background-image: url('../images/icon.svg');
    width: 30px;
    height: 30px;
    background-size: cover;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 7px;
}

.tgl-wrapper .top-b {
    background-color: #FBFBFB;
    padding: 15px 50px;
    text-align: center;
    border-radius: 10px 0 0 0;
    position: relative;
}

.tgl-wrapper .inner-content {
    min-height: 200px;
    padding: 20px 40px;
}

.tgl-wrapper .close-b {
    background-color:#DCDCDC;
    background-image: url('../images/arrow_left.svg');
    background-repeat: no-repeat;
    border-radius:0 5px 5px 0;
    background-size:5px;
    background-position: center center;
    width:25px;
    height:34px;
    display:block;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
}

.tgl-wrapper .close-b:after {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -10px;
    right: -20px;

}

.tgl-wrapper .inner-content ul {
    margin:0;
    padding:0;
    list-style-type: none;
}

.tgl-wrapper .inner-content ul li a {
    position: relative;
    display:flex;
    font-size:16px;
    font-weight: 500;
    color:#000;
    padding-left:0px;
    align-items:center;
}

.tgl-wrapper .inner-content ul li {
    display:flex;
    align-items:center;
    padding-bottom:15px;
    
}

.tgl-wrapper .inner-content ul li a:before {
    width:50px;
    height:50px;
    background-image: url('../images/zoomin.svg');
    background-size:20.5px;
    background-repeat: no-repeat;
    border-radius:50%;
    background-color:#F2F3F4;
    background-position: center center;
    position: relative;
    content: '';
    display: flex;   
    margin-right:15px;
    
}

.tgl-wrapper .inner-content ul li a.zoomout:before {
   background-image: url('../images/zoomout.svg'); 
   background-size:16px;
}

.tgl-wrapper .inner-content ul li a.contrast:before {
   background-image: url('../images/contrast.svg'); 
   background-size:16px;
}

.tgl-wrapper .inner-content ul li a.darkmode:before {
   background-image: url('../images/dark_mode.svg'); 
   background-size:16px;
}

.tgl-wrapper .inner-content ul li a.dys:before {
   background-image: url('../images/account.svg'); 
   background-size:16px;
}

.tgl-wrapper .inner-content ul li a.restore:before {
   background-image: url('../images/settings_backup_restore.svg'); 
   background-size:16px;
}

.tgl-wrapper .inner-content ul li a.close:before {
   background-image: url('../images/visibility_off.svg'); 
   background-size:18px;
}


body.dark-mode .tgl-wrapper {
    background-color:#000;
}

body.dark-mode .tgl-wrapper .top-b {
    background-color:#1c1c1c;
}

body.dark-mode .tgl-wrapper .inner-content ul li a {
    color:#fff !important;
}

body.dark-mode .tgl-wrapper h3:before {
    filter:invert(1);
}

.tgl-wrapper .inner-content ul li a:before, .tgl-opener {
 
    transition: background-color 0.18s ease; /* smooth hover effect */
}


.tgl-wrapper .inner-content ul li a:hover:before, .tgl-opener:hover {
    background-color:#DCDCDC;
}

@media (max-width: 576px) {
    
    .tgl-wrapper h3 {
       
        font-size: 14px;
       
    }
    
    .tgl-wrapper h3 {
       
        font-size: 14px;
       
    }
    
    .tgl-wrapper .inner-content ul li a {
        font-size:14px;
    }   
    
    .tgl-wrapper .inner-content {
        min-height: 200px;
        padding: 20px 20px;
    }
    
    .tgl-wrapper .inner-content {
        max-height: calc(100vh - 100px); /* afhankelijk van top + padding */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
    }    
    
    .tgl-wrapper {
        width: 315px;
        top: 105px;
 
    }
    
    .tgl-opener {
        width: 50px;
        height: 50px;
    }
    
    .tgl-wrapper .top-b {
        
        padding: 15px 0px;
    }
     .tgl-wrapper {
     
        bottom: 0; /* essentieel voor iOS */
        
        display: flex;
        flex-direction: column;
    }

    .tgl-wrapper .inner-content {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* voor iOS momentum scroll */
    }

    .tgl-wrapper .top-b {
        flex-shrink: 0;
    }   
}