/* Fonts */
:root {
    --nav-font: Trebuchet MS, "Nunito", sans-serif;
    --nav-color: #2C374F; /* The default color of the main navmenu links */
    --nav-hover-color: #607296; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #2c374f; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #2C374F; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #FFF; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #DDF; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.page-title {background-color:#2C374F;}
.page-title {padding: 10px;}
.breadcrumbs, .breadcrumbs a, h1 {color: #DDF;font-family: var(--nav-font);} /* D8B26E F6D1C1 E8D5E5 FDF3B5 F9E79F */

#preloader:before {
  border: unset;
  border-color: unset;
  border-radius: unset; 
  width: 80px;
  height: 60px;
  background: url(/img/PreLoader-VrijVerbinden.png);
  background-repeat: no-repeat;
}

.header .container {
    background-image: url(/img/BG-Rainbowcolors.png);    
    background-position-x: left;     
    background-position-y: top;    
    background-repeat: round;
    height:120px;
    background-blend-mode: overlay;
    background-color: rgba(253, 251, 253, .75);
    margin-bottom:5px;
    }
.header .container .logo img {max-height:unset;}
.header .header-social-links a:hover {color: var(--nav-hover-color) }

/* buttons FAD6BF */
.footer-top {color: #FFF;}
.footer-top a {color:#FFF;}
.footer-top a:hover {color:#DDF;}
.footer {color: #FFF;background-color: #2C374F;} /* 3F4C6B 394867 5E2B5D 2C374F */
.footer .credits {font-size: 9px; color:#CCC;}
.footer .credits a {color:#DDD; text-decoration:unset;}
.footer .credits a:hover {text-decoration:underline;}
.footer .copyright { font-size: 12px; }
.footer .footer-about .logo span, .footer h4 {color: #DDF;font-family: var(--nav-font);}
.footer .social-links a:hover {color: #DDF;}
.footer .footer-newsletter .newsletter-form {background-color: #DDF;border:1px solid #DDF;}
.footer .footer-newsletter .newsletter-form input[type=submit] {background-color: #DDF;color:#000;border-left:1px solid #2C374F;}
.footer .footer-newsletter .newsletter-form input[type=submit]:hover {background-color: #2C374F;color:#DDF;border:1px solid #DDF;}

.footer .footer-newsletter .newsletter-form input[type=email] {
    background-color:#FFF;
    padding:4px;
    border:1px solid #DDF;
    color: #000;
}

.scroll-top {
    border-radius: 25px;
}
h1, h2, h3, h4, h5, h6 {font-family: var(--nav-font);}
.page-title h1 {font-weight: unset ;} 

* {
    box-sizing: border-box;
}

.item {
    /* width: 100%; */
    /* height: 200px; */
    margin: 50px auto; 
    padding-top: 90px; /* 75 px smartphone*/
    text-align: left;
    color: var( --default-color);
    font-size: 1em;
    /* border: 1px solid #000;*/
}

.CoachWorkflowDetail {
    background-image: url(/img/BG-RainbowcolorsTopDown.png);
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    background-size: 10%; /* unset */
    background-blend-mode: overlay;
    background-color: rgba(253, 251, 253, 0);
    margin-bottom: 5px;
    min-height: 1600px; /* 2280 */
}

.CoachWorkflow .Quote {
    font-style: italic;
    color: #4E4EAB
}

.CoachWorkflow .content-div {
    display: none;
    overflow: hidden;
    margin: 0 0 10px 10px;
    background-color: rgba(253, 251, 253, .85);
}

.CoachWorkflow .Title {
    font-weight: 600;
    margin-bottom: 0;
}

.CoachWorkflow a {
    font-weight: 100;
}
.CoachWorkflow .Part {
    width: 55%;
    padding: 20px;
    border: 0px solid #999;
    background-color: rgba(253, 251, 253, .65);
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
}

.RainbowRed {margin-left: 20%;}
.RainbowRed .Title, .RainbowRed a {color: #f8312f;font-weight:600;}

.RainbowOrange {margin-left: 40%;}
    .RainbowOrange .Title, .RainbowOrange a {
        color: #ff6723;
        font-weight: 600;
    }

.RainbowYellow {margin-left: 20%;}
    .RainbowYellow .Title, .RainbowYellow a {
        color: #FBC700;
        font-weight: 600;
    }

.RainbowGreen {margin-left: 40%;}
    .RainbowGreen .Title, .RainbowGreen a {
        color: #00d26a;
        font-weight: 600;
    }

.RainbowBlue {margin-left: 20%;}
    .RainbowBlue .Title, .RainbowBlue a {
        color: #0074ba;
        font-weight: 600;
    }

.RainbowIndigo {margin-left: 40%;}
    .RainbowIndigo .Title, .RainbowIndigo a {
        color: #8d65c5;
        font-weight: 600;
    }

.RainbowViolet {margin-left: 20%;}
    .RainbowViolet .Title, .RainbowViolet a {
        color: #d60a8b;
        font-weight: 600;
    }


.blog-details .content {    margin-top: 0px;        }
.article .img-max-height {
    max-width: 270px;
    max-height: 400px;
    margin: 30px 60px 0 30px;
}

/* === andere schermen === */

@media only screen and (max-width: 1200px) {
    .about .about-img img {
        height: 89%;
    }

    /* Aantal boven shopping bag */
    .start-100 {left: 0 !important}
    .position-absolute {position: relative !important;}
    .navmenu .translate-middle {transform: translate(75%, -260%) !important;}
    /* einde */
}

@media only screen and (max-width: 991px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        padding-left: 10px;
    }

    .about .about-img img {
        height: 100%;
        width: unset;
    }
}
@media only screen and (max-width: 991px) {
    .about .inner-title {
        max-width: none;
    }
}

@media only screen and (max-width: 430px) {

    .container {
        margin: 5px;
    }

    .article .img-max-height {
        max-width: 100%;
        max-height: 100%;
        margin: 0px;
    }

    .item {
        padding-top: 75px;
    }

    .CoachWorkflowDetail {
        background-size: unset;
        min-height: 2280px;
    }

    .footer {
        padding: 5px;
    }

    .main {
        margin: 5px;
    }

    .about .about-img img {
        height: 88%;
        width: 100%;
    }

    .about .our-story h3 {
        font-size: 1.5rem;
    }

    .blog-details .post-img {
        margin: -30px 30px 20px -30px;
        overflow: hidden;
    }

    .mijnProducten h3 {
        margin-top: -20px;
    }

    .table {
        font-size: 12px;
    }
        .table > :not(caption) > * > * {
            padding: .3rem .3rem;
        }

}

    /*
320px — 480px: Mobile devices. 
481px — 768px: iPads, Tablets. 
769px — 1024px: Small screens, laptops. 
1025px — 1200px: Desktops, large screens.
*/


    .testimonials .content-div {
        display: none;
        float: initial;
    }

    .testimonials .link-leesmeer {
        font-weight: 600;
    }

    .testimonials .testimonial-item .stars i {
        color: var(--accent-color);
    }
    /* Blog*/
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        padding-left: unset;
    }

    .VVIcon {
        width: 14px;
        padding-bottom: 3px;
    }

    .FBiframe {
        height: 100%;
        width: 100%;
    }

    .FBarticle {
        height: 671px !important;
    }

    .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
        font-size: 19px;
    }

    #CookiePrivacy {
        display: none;
        width: 100%;
        max-width: 600px;
        padding: 0 0 40px 0;
        text-align: justify;
        border-radius: 5px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
    #CookiePrivacy .fancybox-close-small {
        top: 15px;
    }

    #CookiePrivacy .content-header {
        border-bottom: 1px solid #eee;
        padding: 20px;
    }

    #CookiePrivacy .content-footer {
        margin: 20px 20px 0 0;
        float: right;
    }

    #CookiePrivacy .content-scroll {
        max-height: calc(100vh - 200px);
        overflow: auto;
        padding: 0px 20px 0 20px;
    }


    /* Animatie therapeuten*/
    .widget-item .therapeuten {
        margin-top: -20px;
    }

        .widget-item .therapeuten h4 {
            font-weight: 600;
            font-size: 20px;
            margin: 15px 0 10px 0;
            padding: 0;
            color: color-mix(in srgb, var(--default-color), transparent 20%);
        }

        .widget-item .therapeuten .item {
            padding: 1rem 1rem 1rem;
            box-shadow: 0 2px 6px rgba(65, 11, 16, 0.15);
            border-radius: 1rem;
        }

        .widget-item .therapeuten .rounded-circle {
            width: 124px;
        }

        .widget-item .therapeuten .social-links a {
            color: color-mix(in srgb, var(--default-color), transparent 60%);
        }

            .widget-item .therapeuten .social-links a:hover {
                color: var(--accent-color);
            }

        .widget-item .therapeuten .title {
            font-style: italic;
            color: color-mix(in srgb, var(--default-color), transparent 30%);
            margin: 10px 0 0 0;
            text-align: center;
        }

        .widget-item .therapeuten .review {
            margin-top: 10px;
        }


    .owl-carousel {
        position: relative;
    }

    .owl-dots {
        position: absolute;
        top: 10px;
        left: 25%;
        right: 25%;
    }
    /* Dots bovenaan */
    .owl-carousel .animated {
        animation-duration: 1000ms;
        animation-fill-mode: both;
    }


    /* Simpele styling voor het privacy floating scherm */
    #privacyModal {
        display: none;
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        background: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        z-index: 1000;
        width: 80%;
        max-width: 500px;
    }

    #privacyModalClose {
        cursor: pointer;
        float: right;
    }

    #privacyModalOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 900;
    }

    /* Homepage about */
    .about .our-story .rounded-circle {
        height: 100px;
        margin: 0 10px 10px 0;
        float: left;
    }

    .hero .container {
        padding-left: 10px;
    }


    @media (min-width: 991px) {
        .about .inner-title {
            margin: 0 0 20px 0;
        }

        .about .our-story {
            padding-right: 5%;
        }
    }


.footer-newsletter .btn-primary {
    background-color: #DDF;
    color: #000;
    border-left: 1px solid #2C374F;
}

.container form .btn-primary {
    background-color: #DDF;
    color: #2C374F;
    border: 1px solid #DDF;
}
.container .btn-primary:hover {
    background-color: #2C374F;
    color: #DDF;
    margin: -2px;
    border: 3px solid #DDF;
    border-radius: 7px;
}



/* Register - Login */
.border-bottom-indicator {
    border-width: 1px;
    border-style: solid;
    border-color: #ced4da; /* standaard grijs */
    border-bottom-width: 1px; /* extra dikke onderrand */
    transition: border-color 0.3s ease;
    margin-bottom: 10px;
}

.strength-weak {
    border-bottom-color: red !important;
    border-bottom-width: 2px; /* extra dikke onderrand */
}

.strength-medium {
    border-bottom-color: orange !important;
    border-bottom-width: 2px; /* extra dikke onderrand */
}

.strength-strong {
    border-bottom-color: green !important;
    border-bottom-width: 2px; /* extra dikke onderrand */
}

.match-ok {
    border-bottom-color: green !important;
    border-bottom-width: 2px; /* extra dikke onderrand */
}

.match-fail {
    border-bottom-color: red !important;
    border-bottom-width: 2px; /* extra dikke onderrand */
}


/* Shopping button */

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

    .btn-danger:hover {
        color: var(--accent-color);
        background-color: #DDF;
        border-color: var(--accent-color);
    }


.vv-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1050;
    /* midden uitlijnen, maar standaard onzichtbaar en onklikbaar */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .vv-modal-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* pas als hij open is, vangt hij clicks */
    }

.vv-modal {
    background: #fff;
    max-width: 520px;
    width: 92%;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.vv-modal-backdrop.show .vv-modal {
    transform: translateY(0);
    opacity: 1;
}

.vv-modal h5 {
    margin: 0 0 8px;
}

.vv-modal .actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
}


/* Shopping bag aantal laten zien */
.translate-middle {
    transform: translate(-80%, 0%) !important;
}


.Prijs {
    color: #D60A8B;
    font-weight: 400;
}

ul.custom-bullets {
    list-style: none; /* verwijdert standaard bullets */
    padding-left: 0; /* optioneel, voor nette uitlijning */
}

ul.custom-bullets li {
    position: relative;
    padding-left: 30px; /* ruimte voor het icoon */
    margin-bottom: 8px; /* optioneel, voor wat lucht ertussen */
}

ul.custom-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* pas aan aan jouw afbeelding */
    height: 20px;
    background-image: url("/img/PreLoader-VrijVerbinden.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.fs-3 {
    font-size: 1rem !important;
}

.MijnVrijVerbinden H2, .MijnCoachAdmin H2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    color: #B7B7FD;
    margin-top: 60px;
}
.MijnVrijVerbinden .widgets-container, .MijnCoachAdmin .widgets-container {
    margin: 30px 0 30px 0;
}

    .Productbeheer .TopButtons {
    text-align: right;
    margin: 10px 0 10px 0;
}

.Productbeheer .textarea-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .Productbeheer .textarea-wrap > textarea {
        width: 100%;
        height: 140px;
        padding: 12px;
        padding-bottom: 28px; /* ruimte voor de teller rechtsonder */
        box-sizing: border-box;
        resize: vertical;
    }

.Productbeheer .textarea-counter {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 12px;
    color: #aaa; /* lichtgrijs */
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

    /* optioneel: waarschuwingskleur als je bijna aan het limiet zit */
    .Productbeheer .textarea-counter.is-near-limit {
        color: #888;
    }


.preserve-lines {
    white-space: pre-line; /* toont enters als line breaks */
}


.img-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2c374f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
    line-height: 18px;
}

.img-preview-pop {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 99999;
    max-width: 360px;
}

    .img-preview-pop img {
        display: block;
        max-width: 340px;
        max-height: 260px;
    }

    .img-preview-pop .err {
        color: #b00020;
        font-size: 12px;
        max-width: 340px;
    }

.img-url.is-invalid {
    border-color: #dc3545;
}

.img-url.is-valid {
    border-color: #198754;
}



/* Accentborder (regenboogrand) – optioneel: voeg .vv-accent--rainbow op de modal-content */
.vv-accent--rainbow {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg,#ff8a80,#ffd180,#ffff8d,#a7ffeb,#80d8ff,#b388ff,#ff8a80) border-box;
}

/* Close-knop (rond ×), herbruikbaar */
.vv-close-round {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(240,240,240,.95);
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: #444;
    transition: background .2s, transform .15s, box-shadow .2s;
}

    .vv-close-round:hover {
        background: #e8e8e8;
        transform: scale(1.05);
    }

    .vv-close-round:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,123,255,.25);
    }

/* Kleine animaties */
@keyframes vvFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes vvSlideUp {
    from {
        transform: translateY(18px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

/* =====================  Gedeelde modal-stijl  ===================== */
/* Backdrop */
.vv-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1050;
}

    .vv-modal-backdrop.show {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: vvFadeIn .18s ease-out;
    }

/* Doos */
.vv-modal {
    position: relative;
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
    max-width: 520px;
    width: calc(100% - 2rem);
    text-align: left;
    border: 1px solid rgba(0,0,0,.08);
    animation: vvSlideUp .22s ease-out;
}

    .vv-modal h5 {
        margin: .25rem 0 .5rem;
        font-weight: 600;
    }

    .vv-modal p {
        margin: 0 0 1rem;
    }

    .vv-modal .actions {
        display: flex;
        gap: .5rem;
        justify-content: flex-end;
    }

    /* Regenboogrand (duidelijk zichtbaar) */
    .vv-modal.vv-accent--rainbow {
        border: 1px solid transparent; /* zichtbaar maken */
        background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#ff8a80,#ffd180,#ffff8d,#a7ffeb,#80d8ff,#b388ff,#ff8a80) border-box;
    }

    /* Close-knop (rond ×) rechtsboven */
    .vv-modal .vv-modal-close {
        position: absolute;
        top: 8px;
        right: 8px; /* exacte hoek */
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        background: rgba(240,240,240,.96);
        color: #333;
        font-size: 20px;
        line-height: 1;
        font-weight: 600;
        box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
        transition: background .2s, transform .15s, box-shadow .2s;
    }

        .vv-modal .vv-modal-close:hover {
            background: #ececec;
            transform: scale(1.04);
        }

        .vv-modal .vv-modal-close:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,123,255,.25);
        }

    /* Kleine offset als er een 2px accentborder is */
    .vv-modal.vv-accent--rainbow .vv-modal-close {
        top: -10px;
        right: -10px;
    }

/* Animaties */
@keyframes vvFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes vvSlideUp {
    from {
        transform: translateY(18px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.mijnProducten .article {min-height:290px;}
.mijnProducten .post-img {
    float: left;
}
.mijnProducten .post-img img {
    max-width: 150px;
}

/* ---- VrijVerbinden Categorie Pills (pink ? white) ---- */

#categorieFilters .nav-link {
    border-radius: 0.375rem; /* minder afgerond */
    padding: 0.45rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    background: #ffffff; /* standaard wit */
    color: #E6007E; /* fuchsia tekstkleur */
    border: 1px solid rgba(230, 0, 126, 0.25);
    transition: all 0.25s ease;
}

    /* Hover op niet-actieve knoppen */
    #categorieFilters .nav-link:hover {
        background: linear-gradient(90deg, #ff99cc 0%, #ffffff 100%);
        color: #E6007E;
        border-color: rgba(230, 0, 126, 0.4);
    }

    /* ACTIEVE knop: pink ? white gradient */
    #categorieFilters .nav-link.active {
        background: linear-gradient(90deg, #E6007E 0%, #ffffff 100%);
        color: #ffffff !important;
        border-color: #E6007E;
        box-shadow: 0 6px 16px rgba(230, 0, 126, 0.25);
    }

        /* Hover op actieve knop */
        #categorieFilters .nav-link.active:hover {
            box-shadow: 0 8px 20px rgba(230, 0, 126, 0.35);
        }



.vv-product-card {
    opacity: 0;
    transition: opacity 2.4s ease;
}

    .vv-product-card.loaded {
        opacity: 1;
    }

#fb5 #fb5-about{margin-left:20px;}


#fb5 .fb5-nav-arrow.next {
    right: -35px;
}
#fb5 .fb5-nav-arrow.prev {
    left: -35px;
}
#fb5 .fb5-meta .fb5-description {
    color: #999;
}

#fb5 .fb5-meta .fb5-num {
    color: #999;
}

/* --- alles uitschakelen zodat framework uit staat */
/*.header, .page-title, .footer, #fb5-footer {
    display: none !important;
}
section, .section, .main {
    background-color:#000;
}
*/

#fb5 .fb5-nav-arrow {
    background: url(/assets/PageTurn.js/img/arrow-navpage-bordeaux.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#header .CssTop {
    height: 60px;
}
#header .CssTop .logo img {
    max-height: 50px;
}



/* Standaard: desktop-tekst tonen, mobile-tekst verbergen */
.vv-fs-mobile {
    display: none;
}

.vv-fs-desktop {
    display: block;
}


/* standaard: verbergen */
#vv-mobile-fullscreen-btn {
    display: none;
}

/* op small screens: tonen, boven alles binnen #fb5 */
@media screen and (min-width: 767px) {
    /* #fb5 .fb5-fullscreen {display: block;} */
}

/* Op smartphone: mobiele tekst tonen, desktop-tekst verbergen */
@media screen and (max-width: 767px) {
    .vv-fs-mobile {
        display: block;
    }

    .vv-fs-desktop {
        display: none;
    }
}

/* Basis fade/animatie op het boek zelf */
#fb5 {
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}



    /* Fullscreen mode: header/footer weg, zwarte achtergrond */
    .vv-fullscreen .header,
    .vv-fullscreen .page-title,
    .vv-fullscreen .footer,
    .vv-fullscreen #fb5-footer {
        display: none !important;
    }

/* ---------- FULLSCREEN BASIS ---------- */

/* Volledige pagina donker in vv-fullscreen */
body.vv-fullscreen {
    background-color: #000 !important;
}

    /* Ook de hoofdcontainers krijgen een donkere achtergrond,
   zodat alles buiten het boek "wegvalt" */
    body.vv-fullscreen section,
    body.vv-fullscreen .main {
        background-color: #000 !important;
    }

    /* Het flipbook-container zelf: donker zodat randen rond pagina's verdwijnen */
    body.vv-fullscreen #fb5 {
        background-color: #000 !important;
    }

    /* Intro/about-pagina blijft licht en leesbaar */
    body.vv-fullscreen #fb5-about {
        background-color: #F9F6EC !important;
        color: #000 !important;
    }

    /* ---------- TRANSITIONS & FOCUS ---------- */

    /* Zachte overgang bij het in/uit fullscreen gaan */
    body.vv-fullscreen,
    body.vv-fullscreen section,
    body.vv-fullscreen .main,
    body.vv-fullscreen #fb5,
    body.vv-fullscreen #fb5-about,
    body.vv-fullscreen #fb5-book {
        transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    }

        /* Het boek krijgt in vv-fullscreen een lichte focus/zoom + shadow */
        body.vv-fullscreen #fb5-book {
            box-shadow: 0 0 25px rgba(0,0,0,0.7);
        }

/* standaard: geen extra scale */
body:not(.vv-fullscreen) #fb5-book {
    transform: scale(1);
    transform-origin: center top;
}
/* Standaard: niet tonen */
#vv-mobile-fs-toggle {
    display: none;
}

/* Alleen op small screens én in vv-fullscreen */
@media screen and (max-width: 845px), screen and (max-height: 500px) {

    body.vv-fullscreen #vv-mobile-fs-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        /* Positie: net onder het boek, gecentreerd */
        /*bottom: 20px;*/
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.90);
        color: #000;
        font-size: 40px;
        font-weight: 200;
        line-height: 0;
        padding: 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.35);
        z-index: 9999;
        cursor: pointer;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

        /* Klein hover-effect voor premium gevoel */
        body.vv-fullscreen #vv-mobile-fs-toggle:active {
            transform: translateX(-50%) scale(0.92);
        }
}



.vv-hide-next {
    display: none !important;
}

#fb5.vv-at-last-page .fb5-nav-arrow.next {
    display: none !important;
}



/* Specifiek voor AJ */
.AJ .fb5-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.AJ .fb5-meta, .AJ .fb5-meta span {
    font-family: 'Spectral', serif !important;
}

.AJ .fb5-meta.odd {flex-direction: row;text-align: left;}
.AJ .fb5-meta.even {flex-direction: row-reverse;text-align: right;}
.AJ .fb5-num, .AJ .fb5-description {padding: 0 5px;color:#ccc !important;}
.AJ .fb5-productnaam {margin-right: 40px !important;}
.AJ .fb5-auteurnaam {margin-left: 40px !important;}
.AJ .fb5-auteurnaam a {color: #CCC;}
.AJ #fb5 .fb5-meta.fb5-left {left: unset;padding-bottom:10px;}
.AJ #fb5 .fb5-meta.fb5-right {right: unset;padding-bottom: 10px;}
.AJ #fb5 .fb5-meta.fb5-left .fb5-num {padding-right: 20px;}
.AJ #fb5 .fb5-meta.fb5-right .fb5-num {padding-left: 20px;}


.AJ #fb5 #fb5-about h3, #fb5 .fb5-page-book, #fb5 #fb5-about a, #fb5 #fb5-about p {
    color: #960047;
    font-size: 16px;
    font-family: 'Spectral', serif !important;
}

.AJ #fb5 .fb5-page-book p, .AJ #fb5 .fb5-page-book a {
    color: #77797F;
    font-family: 'Spectral', serif !important;
}
.AJ #fb5 .fb5-page-book p {
    font-size: 16px;
}
.AJ #fb5 .fb5-page-book h3 {
    margin-top: 30px;
    color: #77797F;
}

.AJ .fb5-page-book a {
    text-decoration: none;
}
.AJ #fb5 #fb5-about h3 {
    background: url(/assets/PageTurn.js/img/AJ-Icon.png) no-repeat 0 50%;
    padding: 0 0 0 25px;
    font-size: 22px;
    font-weight: 600;
}
.AJ .inhoud img {width:100%;}


/* Overlay voor flipbook-fouten */
#vv-flipbook-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

#vv-flipbook-overlay-inner {
    max-width: 480px;
    width: 100%;
    background: #F9F6EC;
    color: #222;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#vv-flipbook-overlay-inner h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
}

#vv-flipbook-overlay-inner p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

#vv-flipbook-overlay-inner button {
    display: inline-block;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    font-size: 0.9rem;
    cursor: pointer;
    background: #333;
    color: #fff;
}



/* Cookie sliders */
.vv-cookie-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 5px 0;
    gap: 10px;
}

.vv-cookie-text {
    flex: 1 1 auto;
}

    .vv-cookie-text small {
        color: #666;
    }

.vv-cookie-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Switch-stijl */

.vv-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .vv-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.vv-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 16px;
    background-color: #ccc;
    transition: .2s;
}

    .vv-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background-color: #fff;
        transition: .2s;
    }

/* Aan = roze/pink tint, past bij jouw stijl */

.vv-switch input:checked + .vv-slider {
    background-color: #0d6efd;
}

    .vv-switch input:checked + .vv-slider:before {
        transform: translateX(24px);
    }

/* Disabled state voor functionele cookies */

.vv-switch input:disabled + .vv-slider {
    opacity: 0.6;
    cursor: default;
}



.MijnCoachAdmin .table-responsive-hor {
    overflow-x: auto; /* horizontaal scrollen */
    overflow-y: hidden; /* geen verticale scroll nodig */
    white-space: nowrap; /* kolommen blijven op één lijn */
}

    .MijnCoachAdmin .table-responsive-hor table {
        width: auto; /* geen geforceerde minimumbreedte */
        min-width: 100%; /* wel minstens breed genoeg voor container */
    }

    .MijnCoachAdmin .table-responsive-hor th,
    .MijnCoachAdmin .table-responsive-hor td {
        white-space: nowrap; /* geen tekst wrap in cellen */
    }


    .MijnCoachAdmin .table-responsive-hor thead th {
        position: sticky;
        top: 0;
        background: #fff; /* of jouw thema */
        z-index: 2;
    }

/* Bedragen rechts uitlijnen */
.MijnCoachAdmin td.amount,
.MijnCoachAdmin th.amount {
    text-align: right;
}

/* Sticky kolom "Netto coach" */
.MijnCoachAdmin .sticky-netto {
    position: sticky;
    right: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.85);
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 4px rgba(0,0,0,0.08);
}

/* optioneel: randje links voor extra visuele scheiding */
.MijnCoachAdmin .sticky-netto {
    border-left: 1px solid #ddd;
}