.portal-brand-logo{
    display:block;
    width:72px;
    height:40px;
    object-fit:contain;
    flex:0 0 auto;
}

.portal-menu-toggle,
.portal-menu-backdrop{
    display:none;
}

.portal-navigation{
    display:flex;
    align-items:center;
    gap:10px;
}

.pwa-install-banner{
    position:fixed;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    z-index:1200;
    width:min(620px,calc(100% - 28px));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px 18px;
    border:1px solid rgba(200,169,107,.45);
    border-radius:16px;
    background:#171717;
    color:#fff;
    box-shadow:0 16px 44px rgba(0,0,0,.28);
}
.pwa-install-banner[hidden]{display:none}
.pwa-install-banner strong,.pwa-install-banner span{display:block}
.pwa-install-banner span{margin-top:3px;color:#cfcfcf;font-size:.92rem}
.pwa-install-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pwa-install-banner .button{background:#c8a96b;color:#111;border:0}

@media (max-width:767px){
    body.portal-menu-open{overflow:hidden}

    .portal-header{
        position:relative;
        z-index:1102;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:68px;
        padding-left:max(14px,env(safe-area-inset-left));
        padding-right:max(14px,env(safe-area-inset-right));
    }

    .portal-brand{min-width:0}
    .portal-brand-logo{width:60px;height:34px}
    .portal-brand div{min-width:0}
    .portal-brand strong,.portal-brand small{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .portal-menu-toggle{
        display:inline-flex !important;
        width:46px;
        height:46px;
        flex:0 0 46px;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        padding:0;
        border:1px solid rgba(255,255,255,.28);
        border-radius:11px;
        background:#17231f;
        color:#fff;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
        -webkit-tap-highlight-color:transparent;
    }

    .portal-menu-toggle span{
        display:block;
        width:22px;
        height:2px;
        border-radius:3px;
        background:#fff;
        transition:transform .2s ease,opacity .2s ease;
    }

    .portal-menu-toggle[aria-expanded="true"] span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }
    .portal-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
    .portal-menu-toggle[aria-expanded="true"] span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .portal-navigation{
        position:fixed !important;
        top:74px;
        left:12px;
        right:12px;
        z-index:1103;
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        max-height:calc(100dvh - 92px - env(safe-area-inset-bottom));
        overflow-y:auto;
        padding:12px;
        border:1px solid rgba(255,255,255,.14);
        border-radius:16px;
        background:#17231f;
        box-shadow:0 20px 55px rgba(0,0,0,.38);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        pointer-events:none;
        transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
    }

    .portal-navigation.is-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .portal-navigation a,
    .portal-navigation form,
    .portal-navigation form button{width:100%}

    .portal-navigation a,
    .portal-navigation form button{
        display:flex;
        align-items:center;
        min-height:46px;
        padding:11px 13px;
        border-radius:10px;
        text-align:left;
    }

    .portal-menu-backdrop{
        position:fixed;
        inset:0;
        z-index:1101;
        display:block;
        background:rgba(0,0,0,.48);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .18s ease,visibility .18s ease;
    }

    .portal-menu-backdrop.is-open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .portal-container{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .pwa-install-banner{
        align-items:flex-start;
        flex-direction:column;
    }
    .pwa-install-actions{
        width:100%;
        justify-content:flex-end;
    }
}

/* v3.3.6 — definitieve iPhone menu- en safe-area-fix */
@media (max-width: 767px){
    .portal-header{
        box-sizing:border-box;
        padding-top:max(12px, env(safe-area-inset-top));
        padding-bottom:12px;
        min-height:calc(68px + env(safe-area-inset-top));
        height:auto;
    }

    .portal-header .portal-navigation{
        top:calc(68px + env(safe-area-inset-top));
    }

    /* Overschrijft de oude regel in app.css die alle links op iPhone verbergt. */
    .portal-header .portal-navigation > a{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        color:#fff !important;
    }

    .portal-header .portal-navigation > form{
        display:block !important;
    }

    .portal-menu-toggle{
        margin-top:0;
        align-self:center;
    }
}

/* v1.3.0 — vaste ademruimte langs beide schermranden */
@media (max-width: 767px){
  .portal-container{width:100%!important;max-width:none!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
  .portal-container>*{max-width:100%;box-sizing:border-box}
}

/* v3.3.7 — extra waarborg voor 16px mobiele portaalmarge */
@media screen and (max-width: 767px){
  body.portal-body > main.portal-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }
}

/* v356 mobile portal polish */
@media(max-width:767px){
  .portal-navigation a{gap:10px!important}
  .portal-navigation a:hover{background:rgba(246,200,79,.16)!important}
  .portal-navigation .cr-nav-ico{flex:0 0 28px}
}


/* v357 — lichte mobiele navigatie; moet na oudere PWA-regels komen */
@media(max-width:767px){
  .portal-header .portal-navigation > a{color:#173a31!important}
  .portal-navigation{background:#fffdf8!important;border-color:#eadfca!important}
  .portal-menu-toggle{background:#fff6da!important;border-color:#efd68d!important}
  .portal-menu-toggle span{background:#173a31!important}
}


/* v359 ensure warm mobile top bar wins over PWA defaults */
@media(max-width:767px){
  .portal-header{
    background:linear-gradient(90deg,#fff8e4 0%,#fffdf7 58%,#f3f8f3 100%)!important;
    color:#173a31!important;
    border-bottom:1px solid #ecdcae!important;
  }
  .portal-brand strong{color:#173a31!important}
  .portal-brand small{color:#78847f!important}
  .portal-menu-toggle{
    background:#fff4d2!important;
    color:#173a31!important;
    border-color:#ead48c!important;
  }
}


/* v364 — mobiele navigatie: geen horizontaal schuiven, uitloggen past volledig */
@media(max-width:767px){
  .portal-navigation{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    overflow-x:hidden!important;
  }
  .portal-navigation > a,
  .portal-navigation > form,
  .portal-navigation > form button{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .portal-navigation > form{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .portal-navigation > form button{
    display:flex!important;
    justify-content:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* v365 — klantmeldingen subtiel opvallender */
.portal-home-notifications-full .portal-notification-preview{
  background:#fff1ef!important;
  border-color:#efc8c2!important;
}
.portal-home-notifications-full .portal-notification-preview:hover{
  background:#ffe9e6!important;
  border-color:#e8b4ac!important;
}

/* v368: portal header blijft altijd bovenaan staan */
.portal-header{position:sticky!important;top:0!important;z-index:1200!important}

/* v369 — klantheader permanent vast */
@media(max-width:900px){
  .portal-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:9999!important;
  }
}


/* v371 — één uitlogknop: bestaande navigatieknop op pc én smartphone */
.portal-navigation > form{
    display:block;
    margin:0;
}
.portal-navigation > form .subtle-button{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 14px;
    border:1px solid #e1c980 !important;
    border-radius:10px;
    background:#fff4d2 !important;
    color:#173a31 !important;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
}
.portal-navigation > form .subtle-button:hover{
    background:#ffe9a8 !important;
    transform:none !important;
}
@media(max-width:767px){
    .portal-header .portal-navigation > form{
        display:block !important;
        width:100% !important;
        margin:4px 0 0 !important;
    }
    .portal-header .portal-navigation > form .subtle-button{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;
        justify-content:center !important;
    }
}


/* v372 — PWA installatiekaart: hidden-elementen moeten echt verborgen blijven */
.pwa-install-banner [hidden]{
    display:none !important;
}