:root{

    --primary:#1b4c9a;
    --primary-soft:#fff1e8;
    --secondary:#1A374D;
    --secondary-soft:#eaf0f4;
    --bg:#f5f6f8;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --border:#e8ebef;
    --shadow:0 8px 28px rgba(17,24,39,0.07);
    --radius:22px;
    
    }
    
    *{
    box-sizing:border-box;
    }
    
    html{
    scroll-behavior:smooth;
    }
    
    body{
    margin:0;
    background:var(--bg);
    font-family:'Inter',sans-serif;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-bottom:112px;
    }
    
    body:before{
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:220px;
    background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 100%);
    pointer-events:none;
    z-index:-1;
    }
    
    a{
    text-decoration:none;
    color:inherit;
    }
    
    img{
    display:block;
    max-width:100%;
    }
    
    /*
    ==========================================
    APP HEADER
    ==========================================
    */
    
    .app-header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px 12px;
    background:rgba(245,246,248,0.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    }
    
    .app-kicker{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:2px;
    }
    
    .app-header h1{
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
    margin:0;
    }
    
    .header-actions{
    display:flex;
    gap:10px;
    }
    
    .icon-button{
    width:46px;
    height:46px;
    border-radius:16px;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px rgba(17,24,39,0.08);
    color:var(--secondary);
    font-size:17px;
    }
    
    a{
        color:inherit;
        text-decoration:none;
        }
        
        a:hover{
        color:inherit;
        text-decoration:none;
        }

        .card-link,
.card-link:visited{
color:#111827;
text-decoration:none;
}

a,
a:visited,
a:hover,
a:active,
a:focus{
color:inherit;
text-decoration:none;
cursor:pointer;
outline:none;
}

    /*
    ==========================================
    LAYOUT
    ==========================================
    */
    
    .app-shell{
    padding:0 18px 20px;
    max-width:760px;
    margin:0 auto;
    }
    
    .section-block{
    margin-bottom:30px;
    }
    
    .section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    }
    
    .section-heading h2{
    font-size:22px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.03em;
    margin:0;
    }
    
    /*
    ==========================================
    HERO
    ==========================================
    */
    
    .hero-panel{
    position:relative;
    height:245px;
    border-radius:28px;
    overflow:hidden;
    margin:6px 0 18px;
    box-shadow:var(--shadow);
    background:var(--secondary);
    }
    
    .hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.82;
    }
    
    .hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(26,55,77,.12) 0%,rgba(26,55,77,.88) 100%);
    }
    
    .hero-content{
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    color:#fff;
    }
    
    .hero-label{
    display:inline-flex;
    align-items:center;
    height:32px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;
    }
    
    .hero-content h2{
    font-size:30px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.04em;
    margin:0 0 8px;
    }
    
    .hero-content p{
    font-size:14px;
    line-height:1.45;
    opacity:.9;
    margin:0;
    max-width:340px;
    }
    
    /*
    ==========================================
    QUICK ACTIONS
    ==========================================
    */
    
    .quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:30px;
    }
    
    .quick-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    min-height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:0 6px 18px rgba(17,24,39,0.04);
    }
    
    .quick-card i{
    font-size:19px;
    color:var(--primary);
    }
    
    .quick-card span{
    font-size:12px;
    font-weight:800;
    color:var(--secondary);
    }
    
    /*
    ==========================================
    CATEGORIES
    ==========================================
    */
    
    .categories-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    }
    
    .category-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:13px;
    box-shadow:0 6px 18px rgba(17,24,39,0.04);
    min-height:72px;
    }
    
    .category-card i{
    width:40px;
    height:40px;
    border-radius:14px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    flex:0 0 40px;
    }
    
    .category-card span{
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    }
    
    /*
    ==========================================
    INFORMATION CARDS
    ==========================================
    */
    
    .info-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
    display:flex;
    gap:16px;
    margin-bottom:14px;
    color:var(--text);
    }
    
    .card-icon{
    width:50px;
    height:50px;
    border-radius:16px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex:0 0 50px;
    }
    
    .news-icon{
    background:#eef5f8;
    color:var(--secondary);
    }
    
    .event-icon{
    background:#fff1e8;
    color:var(--primary);
    }
    
    .route-icon{
    background:#edf7f2;
    color:#1b8f5a;
    }
    
    .action-icon{
    background:#fff1e8;
    color:var(--primary);
    }
    
    .card-body{
    min-width:0;
    flex:1;
    padding-right:2px;
    }
    
    .card-label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
    }
    
    .card-title{
    font-size:20px;
    line-height:1.22;
    font-weight:800;
    letter-spacing:-.03em;
    margin-bottom:6px;
    }
    
    .card-meta{
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    margin-bottom:8px;
    }
    
    .card-text{
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
    margin-bottom:14px;
    display:-webkit-box;
    line-clamp:3;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    }
    
    .card-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:800;
    color:var(--primary);
    }
    
    .card-link i{
    font-size:12px;
    }
    
    /*
    ==========================================
    MINI FOOD CARDS
    ==========================================
    */
    
    .food-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    }
    
    .mini-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    box-shadow:0 6px 18px rgba(17,24,39,0.04);
    min-height:138px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    }
    
    .mini-label{
    font-size:12px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:10px;
    }
    
    .mini-title{
    font-size:17px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:8px;
    }
    
    .mini-meta{
    font-size:13px;
    color:var(--muted);
    line-height:1.35;
    }
    
    /*
    ==========================================
    ACTIES LOGOS
    ==========================================
    */
    
    .logo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:14px 0;
    }
    
    .logo-card{
    height:76px;
    border-radius:18px;
    background:var(--card);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    box-shadow:0 6px 18px rgba(17,24,39,0.04);
    }
    
    .logo-card img{
    max-width:100%;
    max-height:44px;
    object-fit:contain;
    }
    
    .secondary-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:800;
    color:var(--secondary);
    margin-top:4px;
    }
    
    /*
    ==========================================
    BOTTOM NAV
    ==========================================
    */
    
    .bottom-nav{

        position:fixed;
        
        left:0;
        
        right:0;
        
        bottom:0;
        
        width:100%;
        
        z-index:100;
        
        height:78px;
        
        background:rgba(255,255,255,.96);
        
        backdrop-filter:blur(20px);
        
        -webkit-backdrop-filter:blur(20px);
        
        box-shadow:0 -2px 18px rgba(17,24,39,.08);
        
        display:flex;
        
        align-items:center;
        
        justify-content:space-around;
        
        padding:0 8px env(safe-area-inset-bottom);
        
        }
    
    .bottom-nav-item{
    height:58px;
    min-width:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#9ca3af;
    font-size:11px;
    font-weight:800;
    }
    
    .bottom-nav-item i{
    font-size:19px;
    }
    
    .bottom-nav-item.active{
    color:var(--primary);
    }
    
    /*
    ==========================================
    INTERACTIONS
    ==========================================
    */
    
    .info-card:active,
    .quick-card:active,
    .category-card:active,
    .mini-card:active,
    .icon-button:active,
    .logo-card:active{
    transform:scale(.985);
    }
    
    .info-card,
    .quick-card,
    .category-card,
    .mini-card,
    .icon-button,
    .logo-card{
    transition:transform .16s ease, box-shadow .16s ease;
    }
    
    /*
    ==========================================
    RESPONSIVE
    ==========================================
    */
    
    @media(min-width:768px){
    
    .app-shell{
    padding-left:24px;
    padding-right:24px;
    }
    
    .hero-panel{
    height:300px;
    }
    
    }
    
    @media(max-width:380px){
    
    .app-header h1{
    font-size:26px;
    }
    
    .hero-content h2{
    font-size:27px;
    }
    
    .quick-grid{
    gap:8px;
    }
    
    .quick-card span{
    font-size:11px;
    }
    
    .info-card{
    padding:17px;
    gap:13px;
    }
    
    .card-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    }
    
    }
    
    /*
==========================================
IMAGE CARD LAYOUT
==========================================
*/

.image-card{

    display:flex !important;
    
    flex-direction:column !important;
    
    align-items:stretch !important;
    
    padding:0 !important;
    
    overflow:hidden;
    
    gap:0 !important;
    
    }
    
    .image-card .card-image-wrap{
    
    width:100%;
    
    height:220px;
    
    overflow:hidden;
    
    flex:none;
    
    }
    
    .image-card .card-image{
    
    width:100%;
    
    height:100%;
    
    object-fit:cover;
    
    display:block;
    
    }
    
    .image-card .card-body{
    
    width:100%;
    
    padding:22px;
    
    }
    
    .image-card .card-icon{
    
    display:none;
    
    }

    /*
==========================================
BUSINESS CATEGORIE FOTO'S
==========================================
*/

.business-image{

    width:100%;
    
    aspect-ratio:4/5;
    
    object-fit:cover;
    
    display:block;
    
    }
    
    

        .discover-grid{

            display:flex;
            
            flex-direction:column;
            
            gap:22px;
            
            }
            
            .discover-card{
            
            background:#fff;
            
            border-radius:28px;
            
            overflow:hidden;
            
            box-shadow:0 10px 30px rgba(0,0,0,0.08);
            
            text-decoration:none;
            
            color:#111;
            
            display:block;
            
            }
            
            .discover-image-wrap{
            
            width:100%;
            
            height:220px;
            
            overflow:hidden;
            
            }
            
            .discover-image{
            
            width:100%;
            
            height:100%;
            
            object-fit:cover;
            
            display:block;
            
            }
            
            .discover-content{
            
            padding:24px;
            
            }
            
            .discover-title{
            
            font-size:24px;
            
            font-weight:800;
            
            margin-bottom:10px;
            
            }
            
            .discover-text{
            
            color:#6b7280;
            
            line-height:1.7;
            
            font-size:15px;
            
            }

          /*
==========================================
GOOGLE TRANSLATE FIX
==========================================
*/

.goog-te-banner-frame.skiptranslate{
    display:none !important;
    }
    
    iframe.goog-te-banner-frame{
    display:none !important;
    }
    
    body{
    top:0 !important;
    position:static !important;
    min-height:0 !important;
    }
    
    .goog-logo-link{
    display:none !important;
    }
    
    .goog-te-gadget{
    display:none !important;
    font-size:0 !important;
    color:transparent !important;
    }
    
    .goog-te-combo{
    display:none !important;
    }
    
    .skiptranslate{
    display:none !important;
    }

    /*
==========================================
HARD LINK COLOR LOCK
==========================================
*/

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
a:focus-visible{
color:inherit !important;
text-decoration:none !important;
outline:none !important;
}

.card-link,
.card-link:link,
.card-link:visited,
.card-link:hover,
.card-link:active,
.card-link:focus,
.card-link:focus-visible{
color:var(--primary) !important;
text-decoration:none !important;
}

.bottom-nav-item,
.bottom-nav-item:link,
.bottom-nav-item:visited,
.bottom-nav-item:hover,
.bottom-nav-item:active,
.bottom-nav-item:focus{
color:#9ca3af !important;
text-decoration:none !important;
}

.bottom-nav-item.active,
.bottom-nav-item.active:link,
.bottom-nav-item.active:visited,
.bottom-nav-item.active:hover,
.bottom-nav-item.active:active,
.bottom-nav-item.active:focus{
color:var(--primary) !important;
}

/* ======================================
   DESKTOP WEBVERSIE
====================================== */

:root{
    --desktop-app-width:890px;
}

.desktop-wrapper{
    width:100%;
    min-height:100vh;
}

/* ======================================
   Desktopvenster te klein
====================================== */

@media (hover:hover) and (pointer:fine) and (max-width:1024px){

    body > *{
        display:none !important;
    }

    body::after{
        content:"Deze webversie is alleen beschikbaar in een breder browservenster. Wil je de app op een kleiner scherm bekijken? Gebruik dan een tablet of smartphone. Je kunt de app ook downloaden via de App Store, Google Play of via www.downloaddeapp.nl.";
        position:fixed;
        inset:0;
        background:#f5f7fb;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:40px;
        font-family:'Inter',sans-serif;
        font-size:22px;
        font-weight:700;
        color:#111827;
        z-index:999999;
    }

}

/* ======================================
   Normale desktopweergave
====================================== */

@media (hover:hover) and (pointer:fine) and (min-width:1024px) {
    
    .desktop-wrapper{
        width:100%;
        min-height:100vh;
        display:flex;
        justify-content:flex-start;
        align-items:center;
        flex-direction:column;
    }

    .app-container{
        width:var(--desktop-app-width);
        min-width:var(--desktop-app-width);
        max-width:var(--desktop-app-width);
        background:#fff;
        border-radius:32px;
        overflow:hidden;
        position:relative;
        box-shadow:
            0 15px 40px rgba(15,23,42,.08),
            0 35px 80px rgba(15,23,42,.12);
    }

    .app-shell,
    .page-container{
        width:100%;
        max-width:100%;
        margin:0;
    }

    .back-button{
        position:absolute;
        top:22px;
        left:18px;
        width:52px;
        height:52px;
        border-radius:18px;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 10px 25px rgba(0,0,0,.12);
        z-index:1000;
    }

    /* ===============================
       FOOTER
    =============================== */

    .bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:78px;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        box-shadow:0 -2px 18px rgba(17,24,39,.08);
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:1000;
        gap:0;
    }

    .bottom-nav-item{
        flex:0 0 calc(var(--desktop-app-width) / 5);
        max-width:calc(var(--desktop-app-width) / 5);
        height:78px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }

}