/* =========================================
       BASIS
    ========================================= */
    html { scroll-behavior: smooth; }
    body { background: #f5f8fb; }

    .partner-shell {
        min-height: 100vh;
        background: #f5f8fb;
    }

    /* =========================================
       HEADER / MENU
       - niet sticky
       - oude 2-rijen opzet terug
    ========================================= */
    .partner-header {
        position: static;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid rgba(17,28,45,.06);
    }

    .partner-header .navbar {
        min-height: 88px;
        align-items: flex-start;
    }

    .brand-lockup {
        display: flex;
        align-items: center;
        gap: .8rem;
        min-width: 0;
    }

    .brand-logo-main,
    .brand-logo-partner {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(17,28,45,.08);
        box-shadow: 0 4px 16px rgba(17,28,45,.05);
        padding: .5rem .75rem;
        height: 58px;
        min-height: 58px;
    }

    .brand-logo-main { min-width: 180px; }
    .brand-logo-partner { min-width: 150px; }

    .brand-logo-main img {
        max-height: 30px;
        width: auto;
    }

    .brand-logo-partner img {
        max-height: 34px;
        width: auto;
        max-width: 132px;
    }

    .brand-amp {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.1rem;
        color: #fff;
        background: #0d6efd;
        flex: 0 0 auto;
    }

    .partner-nav-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .65rem;
        margin-top: .4rem;
    }

    .partner-nav {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .25rem;
    }

    .partner-nav .nav-link {
        font-weight: 700;
        color: #111c2d;
        padding: .45rem .8rem !important;
    }

    .partner-nav .nav-link:hover,
    .partner-nav .nav-link.active {
        color: var(--bs-primary);
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap;
    }

    .header-chip-btn {
        border-radius: 999px;
        padding: .6rem .95rem;
        font-weight: 700;
        white-space: nowrap;
    }

   

    /* Tablet / kleiner */
    @media (max-width: 1199.98px) {
        .partner-nav-wrap {
            margin-top: .75rem;
        }
    }

    /* Mobiel */
    @media (max-width: 767.98px) {
        .partner-header .navbar {
            min-height: auto;
            padding-top: .8rem;
            padding-bottom: .8rem;
        }

        .brand-lockup {
            width: 100%;
            justify-content: center;
            gap: .5rem;
            padding-right: 44px;
        }

        .brand-logo-main,
        .brand-logo-partner {
            height: 48px;
            min-height: 48px;
            padding: .4rem .55rem;
            border-radius: 14px;
        }

        .brand-logo-main { min-width: 136px; }
        .brand-logo-partner { min-width: 116px; }

        .brand-logo-main img { max-height: 22px; }
        .brand-logo-partner img { max-height: 26px; max-width: 96px; }

        .brand-amp {
            width: 30px;
            height: 30px;
            font-size: .95rem;
        }

        .navbar-toggler {
            position: absolute;
            right: 0;
            top: 10px;
        }

        .header-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .55rem;
        }

        .header-chip-btn {
            width: 100%;
            min-width: 0;
            padding-left: .75rem;
            padding-right: .75rem;
            font-size: .86rem;
        }
    }

    /* =========================================
       TOOLCARDS / ALGEMEEN
    ========================================= */
    .tool-card-rel { position: relative; }
    .tool-title-one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .focus-tool-card .tool-title-one-line {
        gap: .5rem !important;
        font-size: clamp(.94rem, .82rem + .42vw, 1.08rem);
        line-height: 1.2;
        overflow: visible;
        padding-bottom: .15em;
    }
    .focus-tool-card .tool-title-brandmark img {
        width: 18px;
        height: auto;
    }
    .focus-tool-card .tool-title-text {
        min-width: 0;
        display: inline-block;
    }
    .focus-tool-card .tool-price-badge {
        font-size: clamp(.78rem, .72rem + .24vw, .92rem) !important;
        padding: .5rem .8rem !important;
        line-height: 1.1;
    }

    @media (max-width: 991.98px) {
        .focus-tool-card .tool-title-one-line {
            gap: .4rem !important;
            font-size: .96rem;
        }
        .focus-tool-card .tool-title-brandmark img {
            width: 16px;
        }
        .focus-tool-card .tool-price-badge {
            padding: .45rem .72rem !important;
        }
    }

    .multi-acc-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .multi-acc-btn .bi { font-size: 1.1rem; }

    .multi-slot-box {
        border: 1px solid rgba(0,0,0,.10);
        border-radius: .75rem;
        padding: .75rem;
        background: #fff;
    }

    .video-card,
    .feature-card,
    .news-strip-card,
    .next-step-card {
        border: 1px solid rgba(17,28,45,.08);
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(17,28,45,.05);
        background: #fff;
        overflow: hidden;
    }

    /* =========================================
       VIDEO CARD
    ========================================= */
    .video-cover-link {
        display: block;
        position: relative;
        border-radius: .75rem;
        overflow: hidden;
        min-height: 100%;
    }

    .video-cover-link img {
        width: 100%;
        height: 217px;
        min-height: 217px;
        object-fit: cover;
        display: block;
    }

    .video-cover-link::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(17, 28, 45, .18);
    }

    .video-play-center {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .video-play-btn {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: rgba(8, 62, 178, .95);
        box-shadow: 0 18px 36px rgba(8, 62, 178, .26);
    }

    .video-play-btn i {
        position: relative;
        z-index: 1;
        font-size: 2rem;
        color: #fff;
        margin-left: 4px;
    }

    /* =========================================
       TITELS / LABELS
    ========================================= */
    .card-kicker {
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 800;
        color: #6b7480;
        margin-bottom: .45rem;
        display: inline-block;
    }

    .card-title-lg {
        font-size: 1.4rem;
        line-height: 1.2;
        font-weight: 800;
        color: #111c2d;
        margin-bottom: .65rem;
    }

    .section-title {
        font-size: 1.6rem;
        font-weight: 800;
        color: #111c2d;
        margin-bottom: .35rem;
    }

    /* =========================================
       SAMENWERKEN BLOK
    ========================================= */
    .feature-media {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        height: 100%;
        min-height: 320px;
    }

    .feature-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .partner-highlight-box {
        background: #f8fafc;
        border: 1px solid rgba(17,28,45,.08);
        border-radius: 1rem;
        padding: 1rem;
        height: 100%;
    }

.eerlijk-logo {
    display: block;
    max-height: 40px;
    width: auto !important;
    max-width: 100%;
    align-self: flex-start;
}

    .partner-logo-inline {
        max-height: 42px;
        max-width: 150px;
        width: auto;
    }

    /* =========================================
       ACCOUNT BANNER
    ========================================= */
    .banner-card {
        position: relative;
        color: #fff;
        min-height: 100%;
    }

    .banner-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('https://offertemaster.ai/images/inkoper-werk-met-offertemaster-ai-kantoor-panorama.jpg') center center / cover no-repeat;
    }

    .banner-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(17,28,45,.62);
    }

    .banner-card-body {
        position: relative;
        z-index: 2;
        padding: 1.8rem;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .banner-card .card-title-lg,
    .banner-card .card-kicker,
    .banner-card p {
        color: #fff;
    }

    .banner-credit-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .55rem .85rem;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.18);
        font-weight: 700;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .banner-title-main {
        font-size: clamp(1.65rem, 2.2vw, 2.2rem);
        line-height: 1.15;
        font-weight: 800;
        margin-bottom: .4rem;
    }

    .banner-subtitle-main {
        font-size: 1.08rem;
        line-height: 1.6;
        max-width: 420px;
        margin: 0 auto 1.35rem auto;
        color: rgba(255,255,255,.92);
    }

    /* =========================================
       NIEUWSBALK WRAPPER / PIJLEN / TITELS
       - buitenste balk en pijlen ongewijzigde functie
    ========================================= */
    .news-strip-card .card-body {
        padding: 1rem 1.15rem;
    }

    .news-strip-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .85rem;
    }

    .news-strip-track-wrap {
        overflow: hidden;
    }

    .news-strip-track {
        display: flex;
        gap: .85rem;
        transition: transform .35s ease;
        will-change: transform;
    }

    .news-nav {
        display: flex;
        gap: .45rem;
    }

    .news-nav-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(17,28,45,.10);
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #111c2d;
    }

    .news-nav-btn:hover {
        background: #f8fafc;
        color: #083eb2;
        border-color: rgba(8,62,178,.18);
    }

    /* =========================================
       NIEUWSKAARTEN
       - foto bovenaan
       - witruimte rond foto
       - label op foto linksboven
       - titel
       - introtekst
       - knop volle breedte onderaan
       - geen datum
    ========================================= */
    .news-mini-card {
        min-width: calc(33.333% - .57rem);
        max-width: calc(33.333% - .57rem);
        border: 1px solid rgba(17,28,45,.08);
        border-radius: .9rem;
        padding: .85rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: .8rem;
    }

    .news-mini-thumb-wrap {
        position: relative;
        padding: .2rem;
        border-radius: .85rem;
        background: #fff;
    }

    .news-mini-thumb {
        display: block;
        width: 100%;
        border-radius: .75rem;
        overflow: hidden;
        background: #eef2f6;
    }

    .news-mini-thumb img {
        width: 100%;
        height: 150px;
        min-height: 150px;
        object-fit: cover;
        display: block;
    }

    .news-mini-type {
        position: absolute;
        top: 15px;
        left: 15px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: rgba(8,62,178,.92);
        color: #fff;
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: .32rem .58rem;
        margin-bottom: 0;
        z-index: 2;
    }

    .news-mini-content {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: .6rem;
        flex-grow: 1;
    }

    .news-mini-title {
        font-size: .98rem;
        line-height: 1.35;
        font-weight: 700;
        color: #111c2d;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-mini-subtitle {
        font-size: .84rem;
        color: #6b7480;
        line-height: 1.5;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-mini-footer {
        margin-top: auto;
    }

    .news-mini-footer .btn {
        width: 100%;
    }

    /* =========================================
       FOOTER
    ========================================= */
    .footer-mini {
        color: #707a82;
        font-size: .95rem;
    }

    .footer-mini a {
        color: var(--bs-primary);
        text-decoration: none;
        font-weight: 700;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */
    @media (max-width: 991.98px) {
        .news-mini-card {
            min-width: calc(50% - .45rem);
            max-width: calc(50% - .45rem);
        }

        .news-mini-thumb img {
            height: 112px;
            min-height: 112px;
        }
    }

    @media (max-width: 767.98px) {
        .news-mini-card {
            min-width: 100%;
            max-width: 100%;
        }

        .news-mini-thumb img {
            height: 108px;
            min-height: 108px;
        }
    }


    /* =========================================
       Partner-logo header
    ========================================= */    

    .partner-brand-link {
    display: inline-block;
    max-width: 100%;
}

.partner-brand-box {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid rgba(17, 28, 45, .10);
    border-radius: 18px;
    padding: .55rem .9rem;
    box-shadow: 0 4px 16px rgba(17, 28, 45, .05);
    min-height: 66px;
}

.partner-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-brand-logo-main img {
    max-height: 30px;
    width: auto;
    display: block;
}

.partner-brand-logo-partner img {
    max-height: 34px;
    max-width: 132px;
    width: auto;
    display: block;
}

.partner-brand-amp {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f8fb;
    border: 1px solid rgba(17, 28, 45, .08);
    color: #083eb2;
    font-weight: 800;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .partner-brand-box {
        gap: .5rem;
        padding-left: 5rem;
        padding-right: 5rem;
        justify-content: center;
    }

    .partner-brand-logo-main img,
    .partner-brand-logo-partner img {
        max-height: 46px;
    }

    .partner-brand-amp {
        width: 28px;
        height: 28px;
        font-size: .9rem;
    }

    .partner-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
        width: 100%;
    }

    .partner-header-actions .header-chip-btn {
        width: 100%;
    }
}


/* Linkercard: foto als horizontale balk bovenaan */
.feature-media-top {
    height: 180px;
    min-height: 180px;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
}

/* Zorg dat beide cards in deze rij even hoog kunnen zijn */
.feature-card {
    display: flex;
    flex-direction: column;
}

.feature-card .card-body {
    flex-grow: 1;
}

/* Rechter banner: overlay iets lichter */
.banner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17,28,45,.48);
}

/* Mobiel iets compacter */
@media (max-width: 767.98px) {
    .feature-media-top {
        height: 170px;
        min-height: 170px;
    }
}


.partner-brand-box--plain {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}



.partner-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.partner-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.partner-brand-box--plain {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

@media (max-width: 991.98px) {
    .partner-header-row {
        flex-direction: column;
        align-items: center;
    }

    .partner-header-actions {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .partner-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
    }

    .partner-header-actions .header-chip-btn {
        width: 100%;
    }
}


/* =========================================
   HEADER LOGO'S
   - desktop: netjes begrensd
   - mobiel/tablet: schaalbaar met marges
========================================= */
.partner-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.partner-brand-link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.partner-brand-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(.6rem, 1.4vw, 1rem);
    width: 100%;
    max-width: 720px;
    
}

.partner-brand-box--plain {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.partner-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.partner-brand-logo-main,
.partner-brand-logo-partner {
    flex: 0 1 auto;
}

.partner-brand-logo-main img,
.partner-brand-logo-partner img {
    display: block;
    width: auto;
    height: auto;
    max-height: 47px;
    max-width: 100%;
    object-fit: contain;
}

/* ampersand in verhouding met de logohoogte */
.partner-brand-amp {
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    color: #083eb2;
    background: #fff;
    border: 1px #083eb2 solid;
}

/* Buttons rechts op desktop */
.partner-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Tablet */
@media (max-width: 991.98px) {
    .partner-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .partner-brand-link {
        width: 100%;
    }

    .partner-brand-box {
        justify-content: center;
        max-width: 100%;
    }

    .partner-brand-logo-main img,
    .partner-brand-logo-partner img {
        max-height: 58px;
    }

    .partner-brand-amp {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .partner-header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Mobiel */
@media (max-width: 767.98px) {
    .partner-brand-box {
        gap: .5rem;
        padding-inline: .4rem;
        justify-content: center;
    }

    .partner-brand-logo-main img,
    .partner-brand-logo-partner img {
        max-height: 46px;
    }

    .partner-brand-amp {
        width: 28px;
        height: 28px;
        font-size: .9rem;
    }

    .partner-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
        width: 100%;
    }

    .partner-header-actions .header-chip-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .banner-card {
        min-height: 375px;
    }

    .banner-card-body {
        min-height: 375px;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

/* =========================================
   DESKTOP/TABLET FOCUS MODE
   - overlay achter highlighted cards
   - alleen geselecteerde cards boven overlay
========================================= */

.page-focus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 28, 45, .38);
    backdrop-filter: blur(1px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

body.focus-mode .page-focus-overlay {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .focus-tool-card,
    .focus-free-card {
        transition:
            box-shadow .22s ease,
            transform .22s ease,
            border-color .22s ease;
    }

    .focus-highlight {
        position: relative;
        z-index: 1045;
        box-shadow:
            0 0 0 2px rgba(13, 110, 253, .22),
            0 18px 40px rgba(17, 28, 45, .18) !important;
        border-radius: 1rem;
        transform: translateY(-2px);
    }
}

.login-tab-btn {
        position: absolute;
        top: 0;
        right: 40px; /* Desktop afstand */
        z-index: 2000;

        /* Layout */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px; 

        /* Afmetingen (Extra Compact) */
        height: 30px;      
        padding: 0 18px;   

        /* Styling: Blauw Gradient (Standaard) */
        background: linear-gradient(180deg, #5b84e6 0%, #3263ce 100%);
        
        color: #fff !important;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.75rem; 
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-decoration: none;
        
        /* Vorm */
        border-radius: 0 0 8px 8px;
        
        /* Geen rand en geen schaduw */
        border: none;
        box-shadow: none;

        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .login-tab-btn:hover {
        /* Effect: Iets groter */
        height: 38px; 
        
        /* Styling: Groen Gradient (Hover) */
        background: linear-gradient(180deg, #4ce26f 0%, #23d749 100%);
        
        /* Geen rand en geen schaduw bij hover */
        border: none;
        box-shadow: none;
        
        color: #fff !important;
    }

    .login-tab-btn i {
        font-size: 0.9rem; 
        margin-top: -2px;
    }

    /* Mobiele aanpassing */
    @media (max-width: 991.98px) {
        .login-tab-btn {
            right: 20px;       
            height: 30px;      /* Ietsje hoger gezet (was 28px) zodat tekst past */
            padding: 0 14px;
            font-size: 0.8rem; /* Vergroot van 0.7rem naar 0.8rem */
        }
        .login-tab-btn:hover {
            height: 36px;
        }
    }