/* Natusport AI Assistent */
.naa-root,
.naa-root-inline{
    --naa-primary:#015244;
    --naa-accent:#009881;
    --naa-primary-soft:#e9f3f1;
    --naa-accent-soft:#e8f8f5;
    --naa-bg:#f7faf9;
    --naa-text:#18332e;
    --naa-muted:#70827e;
    --naa-border:rgba(1,82,68,.11);
    --naa-shadow:0 24px 70px rgba(1,45,38,.18);
    font-family:inherit;
    color:var(--naa-text);
}
.naa-root *,
.naa-root-inline *{box-sizing:border-box}
.naa-root button,.naa-root textarea,.naa-root input,.naa-root select,
.naa-root-inline button,.naa-root-inline textarea,.naa-root-inline input,.naa-root-inline select{font:inherit}

/* Floating assistant */
.naa-root-popup{position:fixed;right:24px;bottom:24px;z-index:999999}
.naa-launcher{
    width:58px;height:58px;border:0;border-radius:50%;background:var(--naa-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    box-shadow:0 14px 34px rgba(1,82,68,.28);transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}
.naa-launcher:hover{background:var(--naa-accent);transform:translateY(-2px);box-shadow:0 18px 38px rgba(1,82,68,.32)}
.naa-popup-shortcode-only .naa-launcher{display:none}
.naa-launcher:focus-visible,.naa-product-question-button:focus-visible{outline:3px solid rgba(0,152,129,.24);outline-offset:3px}
.naa-launcher-icon{width:27px;height:27px;display:flex;align-items:center;justify-content:center}
.naa-launcher-icon svg{width:27px;height:27px;fill:currentColor}

.naa-panel{
    position:absolute;right:0;bottom:72px;width:min(410px,calc(100vw - 28px));height:min(660px,calc(100vh - 112px));
    display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--naa-border);border-radius:22px;
    box-shadow:var(--naa-shadow);transform-origin:bottom right
}
.naa-panel[hidden]{display:none}
.naa-header{
    min-height:76px;padding:14px 14px 14px 16px;background:#fff;border-bottom:1px solid rgba(1,82,68,.08);
    display:flex;align-items:center;justify-content:space-between;gap:12px
}
.naa-header-brand{display:flex;align-items:center;gap:11px;min-width:0}
.naa-header-icon{
    width:40px;height:40px;border-radius:13px;background:var(--naa-primary-soft);color:var(--naa-primary);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto
}
.naa-header-icon svg{width:21px;height:21px;fill:currentColor}
.naa-header-copy{min-width:0}
.naa-title{font-size:16px;font-weight:760;line-height:1.2;color:var(--naa-primary);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.naa-status{margin-top:4px;font-size:11.5px;color:var(--naa-muted);display:flex;align-items:center;gap:6px}
.naa-status span{width:7px;height:7px;border-radius:50%;background:var(--naa-accent);box-shadow:0 0 0 3px rgba(0,152,129,.11)}
.naa-header-actions{display:flex;gap:5px;flex:0 0 auto}
.naa-reset,.naa-close{
    width:34px;height:34px;border:0;border-radius:10px;background:#f3f7f6;color:var(--naa-primary);
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s ease,color .15s ease
}
.naa-reset:hover,.naa-close:hover{background:var(--naa-primary-soft);color:var(--naa-accent)}
.naa-reset svg,.naa-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.naa-context-bar{
    min-height:36px;padding:7px 12px;background:#f2faf8;border-bottom:1px solid rgba(0,152,129,.10);
    display:flex;align-items:center;gap:8px;color:var(--naa-primary);font-size:11.5px
}
.naa-context-bar[hidden]{display:none}
.naa-context-question{width:20px;height:20px;border-radius:7px;background:var(--naa-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.naa-context-text{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.naa-context-clear{width:24px;height:24px;border:0;background:transparent;color:#6d827e;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.naa-context-clear svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.naa-messages{
    flex:1;min-height:0;overflow:auto;padding:16px;background:var(--naa-bg);scrollbar-width:thin;scrollbar-color:rgba(1,82,68,.22) transparent
}
.naa-messages::-webkit-scrollbar{width:6px}
.naa-messages::-webkit-scrollbar-thumb{background:rgba(1,82,68,.19);border-radius:99px}
.naa-message{display:flex;flex-direction:column;margin:0 0 12px}
.naa-message:last-child{margin-bottom:0}
.naa-message-user{align-items:flex-end}
.naa-message-assistant{align-items:flex-start}
.naa-bubble{
    max-width:86%;padding:11px 13px;border:1px solid var(--naa-border);border-radius:16px 16px 16px 5px;
    background:#fff;color:var(--naa-text);font-size:13.5px;line-height:1.48;box-shadow:0 3px 10px rgba(1,82,68,.035)
}
.naa-message-user .naa-bubble{
    background:var(--naa-primary);color:#fff;border-color:var(--naa-primary);border-radius:16px 16px 5px 16px;box-shadow:none
}

.naa-suggestions{display:flex;gap:6px;flex-wrap:wrap}
.naa-popup-suggestions{padding:9px 12px 2px;background:#fff;border-top:1px solid rgba(1,82,68,.06)}
.naa-suggestions button{
    border:1px solid rgba(0,152,129,.16);background:var(--naa-accent-soft);color:var(--naa-primary);border-radius:999px;
    padding:7px 10px;font-size:11px;font-weight:650;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease
}
.naa-suggestions button:hover{background:var(--naa-accent);color:#fff;border-color:var(--naa-accent)}

.naa-composer-wrap{background:#fff;border-top:1px solid rgba(1,82,68,.07)}
.naa-form{display:flex;gap:8px;align-items:flex-end}
.naa-popup-form{padding:11px 12px 7px}
.naa-form textarea{
    flex:1;min-width:0;min-height:44px;max-height:96px;resize:none;border:1px solid #d3dfdc;border-radius:14px;
    padding:11px 13px;background:#fff;color:var(--naa-text);line-height:1.4;outline:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
.naa-form textarea::placeholder{color:#93a19e}
.naa-form textarea:focus{border-color:var(--naa-accent);box-shadow:0 0 0 3px rgba(0,152,129,.09)}
.naa-form textarea:disabled{background:#f7f9f8}
.naa-send-button{
    flex:0 0 44px;width:44px;height:44px;border:0;border-radius:13px;background:var(--naa-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;
    transition:background .15s ease,transform .15s ease,opacity .15s ease
}
.naa-send-button:hover{background:var(--naa-accent);transform:translateY(-1px)}
.naa-send-button:disabled{opacity:.55;cursor:default;transform:none}
.naa-send-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.naa-send-button.is-busy svg{animation:naa-pulse 1s ease-in-out infinite}
.naa-disclaimer{font-size:9.5px;color:#84928f;text-align:center;padding:0 10px 9px;background:#fff}

/* Thinking state */
.naa-thinking{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--naa-border);border-radius:14px;padding:9px 11px}
.naa-thinking-dot{width:5px;height:5px;border-radius:50%;background:var(--naa-accent);animation:naa-bounce 1s infinite ease-in-out}
.naa-thinking-dot:nth-child(2){animation-delay:.12s}.naa-thinking-dot:nth-child(3){animation-delay:.24s}
.naa-thinking-text{font-size:11.5px;color:var(--naa-muted);margin-left:3px}
@keyframes naa-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes naa-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Product cards */
.naa-product-list{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:9px}
.naa-product-card{
    width:100%;display:grid;grid-template-columns:68px minmax(0,1fr);gap:11px;background:#fff;border:1px solid var(--naa-border);
    border-radius:15px;padding:10px;box-shadow:0 3px 12px rgba(1,82,68,.04)
}
.naa-product-image{width:68px;height:68px;border-radius:11px;background:#f1f6f5;overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none}
.naa-product-image img{width:100%;height:100%;object-fit:contain;padding:4px}
.naa-image-placeholder{width:25px;height:25px;color:var(--naa-accent)}
.naa-image-placeholder svg{width:100%;height:100%;fill:currentColor}
.naa-product-content{min-width:0}
.naa-product-name{display:block;color:var(--naa-primary);font-size:13px;line-height:1.3;font-weight:760;text-decoration:none}
.naa-product-name:hover{text-decoration:underline;text-underline-offset:2px}
.naa-product-reason{margin-top:4px;color:#647571;font-size:11.5px;line-height:1.4}
.naa-product-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:9px}
.naa-product-price{color:var(--naa-primary);font-size:14px;font-weight:760;white-space:nowrap}
.naa-product-price del{opacity:.55;font-weight:500}.naa-product-price ins{text-decoration:none}
.naa-product-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.naa-product-action{
    border:0;border-radius:999px;background:var(--naa-primary);color:#fff;padding:7px 10px;font-size:10.5px;font-weight:750;
    cursor:pointer;white-space:nowrap;transition:background .15s ease
}
.naa-product-action:hover{background:var(--naa-accent)}
.naa-product-action:disabled{opacity:.6;cursor:default}.naa-product-action.is-added{background:var(--naa-accent)}
.naa-product-link,.naa-view-cart{font-size:10.5px;color:var(--naa-primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.naa-variant-area{grid-column:1/-1;margin-top:1px}
.naa-variant-picker{display:flex;gap:7px;align-items:center;padding-top:7px;border-top:1px solid rgba(1,82,68,.08)}
.naa-variant-picker select{min-width:0;flex:1;border:1px solid #cfdad8;border-radius:9px;padding:7px 9px;background:#fff;font-size:10.5px;color:var(--naa-text)}
.naa-inline-error{font-size:10.5px;color:#a73535;margin-top:6px}

/* Compact product-page shortcode */
.naa-root-inline{display:inline-flex;width:auto;max-width:100%;margin:6px 0;vertical-align:middle}
.naa-product-question-button{
    min-height:36px;max-width:100%;border:1px solid rgba(0,152,129,.22);border-radius:999px;background:#fff;color:var(--naa-primary);
    display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;padding:4px 10px 4px 5px;margin:0;cursor:pointer;
    font-size:16px !important;font-weight:400 !important;line-height:1.35 !important;text-transform:none !important;letter-spacing:normal !important;
    box-shadow:0 3px 10px rgba(1,82,68,.045);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.naa-product-question-button:hover{background:var(--naa-primary);color:#fff;border-color:var(--naa-primary);transform:translateY(-1px);box-shadow:0 6px 16px rgba(1,82,68,.11)}
.naa-product-question-icon{width:26px;height:26px;border-radius:50%;background:var(--naa-accent-soft);color:var(--naa-primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s ease,color .15s ease}
.naa-product-question-button:hover .naa-product-question-icon{background:rgba(255,255,255,.14);color:#fff}
.naa-product-question-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.naa-product-question-label{font-size:16px !important;font-weight:400 !important;line-height:1.35 !important;letter-spacing:normal !important;text-transform:none !important;text-align:left;white-space:normal}
.naa-admin-inline-notice{padding:14px 16px;border:1px solid #dcdcde;background:#fff;border-left:4px solid #dba617}

@media (max-width:700px){
    .naa-root-popup{right:10px;bottom:10px}
    .naa-launcher{width:52px;height:52px}
    .naa-root-popup.naa-is-open .naa-launcher{opacity:0;pointer-events:none;transform:scale(.92)}
    .naa-panel{
        position:fixed;left:10px;right:10px;bottom:10px;width:auto;
        height:min(650px,82dvh);max-height:calc(100dvh - 20px);border-radius:22px;
        box-shadow:0 22px 60px rgba(1,45,38,.23)
    }
    .naa-header{min-height:64px;padding:10px 11px 10px 12px}
    .naa-header-brand{gap:9px}
    .naa-header-icon{width:36px;height:36px;border-radius:11px}
    .naa-title{font-size:14.5px}
    .naa-status{margin-top:3px;font-size:10.5px}
    .naa-reset,.naa-close{width:32px;height:32px;border-radius:9px}
    .naa-context-bar{min-height:34px;padding:6px 10px}
    .naa-messages{padding:12px}
    .naa-bubble{max-width:90%;font-size:13px;padding:10px 12px}
    .naa-popup-suggestions{padding:8px 10px 2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
    .naa-popup-suggestions::-webkit-scrollbar{display:none}
    .naa-popup-suggestions button{flex:0 0 auto}
    .naa-popup-form{padding:9px 10px 6px;gap:7px}
    .naa-form textarea{min-height:42px;border-radius:13px;padding:10px 11px;font-size:16px}
    .naa-send-button{width:42px;height:42px;flex-basis:42px;border-radius:12px}
    .naa-disclaimer{padding:0 8px calc(7px + env(safe-area-inset-bottom));font-size:9px}
    .naa-product-card{grid-template-columns:56px minmax(0,1fr);gap:9px;padding:9px}
    .naa-product-image{width:56px;height:56px}
    .naa-product-reason{font-size:11px}
    .naa-product-meta{align-items:flex-start;flex-direction:column;gap:7px}
    .naa-product-actions{width:100%}
    .naa-product-action{flex:1;text-align:center;min-height:34px}
    .naa-product-question-button{min-height:34px;padding:4px 9px 4px 5px;gap:6px;font-size:15px !important}
    .naa-product-question-icon{width:24px;height:24px}
    .naa-product-question-icon svg{width:14px;height:14px}
    .naa-product-question-label{font-size:15px !important}
}

@media (max-width:420px){
    .naa-panel{left:7px;right:7px;bottom:7px;height:min(620px,84dvh);max-height:calc(100dvh - 14px)}
    .naa-product-link{display:none}
    .naa-bubble{max-width:93%}
    .naa-message{margin-bottom:10px}
}


/* ===== 1.0.1: standalone knop desktop/tablet, in bestaande WoodMart navbar op mobiel ===== */
.naa-root.naa-root-popup {
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:2147483000!important;
    pointer-events:none;
}
.naa-root.naa-root-popup > .naa-launcher {
    display:flex!important;
    position:relative!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    border:0!important;
    border-radius:50%!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    background:#015244!important;
    color:#fff!important;
    box-shadow:0 14px 34px rgba(1,82,68,.28)!important;
    cursor:pointer!important;
    pointer-events:auto;
}
.naa-root.naa-root-popup > .naa-launcher:hover {background:#009881!important;}
.naa-root.naa-root-popup > .naa-launcher .naa-launcher-icon,
.naa-root.naa-root-popup > .naa-launcher .naa-launcher-icon svg {display:flex;align-items:center;justify-content:center;}
.naa-root.naa-root-popup > .naa-panel {pointer-events:auto;}
.naa-root.naa-popup-shortcode-only > .naa-launcher {display:none!important;}
.naa-root .naa-launcher-label {display:none!important;}

@media (min-width:768px) and (max-width:1024px) {
    .naa-root.naa-root-popup {right:20px!important;bottom:20px!important;}
    .naa-root.naa-root-popup > .naa-launcher {width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;}
}

@media (max-width:767px) {
    /* Without a theme bar: unobtrusive round fallback ABOVE the usual navbar area. */
    .naa-root.naa-root-popup {left:auto!important;right:12px!important;bottom:80px!important;width:auto!important;}
    .naa-root.naa-root-popup > .naa-launcher {
        width:52px!important;height:52px!important;
        min-width:52px!important;min-height:52px!important;
        border-radius:50%!important;padding:0!important;
    }
    /* When installed in the EXISTING bottom navbar, never show a second button. */
    body.naa-mobile-in-toolbar .naa-root.naa-root-popup > .naa-launcher {display:none!important;}
    .naa-root.naa-root-popup.naa-is-open > .naa-launcher {opacity:0!important;pointer-events:none!important;}
    .naa-root.naa-root-popup > .naa-panel {
        position:fixed!important;
        left:7px!important;right:7px!important;
        bottom:7px!important;width:auto!important;
        height:min(620px,84dvh)!important;
        max-height:calc(100dvh - 14px)!important;
    }
    body.naa-mobile-in-toolbar .naa-root.naa-root-popup > .naa-panel {
        bottom:calc(var(--naa-toolbar-height, 55px) + 7px)!important;
        height:min(620px, calc(100dvh - var(--naa-toolbar-height, 55px) - 18px))!important;
        max-height:calc(100dvh - var(--naa-toolbar-height, 55px) - 18px)!important;
    }
    .naa-root.naa-root-popup .naa-panel[hidden] {display:none!important;}

    /* Integrates as SIXTH item in WoodMart's existing 5-item bottom navigation. */
    .wd-toolbar.naa-toolbar-extended > .wd-toolbar-item,
    .woodmart-toolbar.naa-toolbar-extended > .wd-toolbar-item {
        flex:1 1 0!important;
        min-width:0!important;
        width:auto!important;
    }
    .wd-toolbar .naa-floris-toolbar-item,
    .woodmart-toolbar .naa-floris-toolbar-item {
        display:flex!important;
        flex:1 1 0!important;
        min-width:0!important;
        padding:0!important;
        margin:0!important;
        align-items:stretch!important;
        justify-content:center!important;
        background:transparent!important;
    }
    body .wd-toolbar .naa-floris-toolbar-button,
    body .woodmart-toolbar .naa-floris-toolbar-button {
        -webkit-appearance:none!important;
        appearance:none!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        align-items:center!important;
        gap:4px!important;
        height:100%!important;
        min-height:50px!important;
        width:100%!important;
        padding:2px!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:inherit!important;
        text-transform:none!important;
        font-weight:400!important;
        font-family:inherit!important;
        line-height:1.2!important;
        cursor:pointer!important;
    }
    .wd-toolbar .naa-floris-toolbar-icon,
    .woodmart-toolbar .naa-floris-toolbar-icon {
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:25px!important;
        height:25px!important;
        min-height:25px!important;
        margin:0!important;
        color:inherit!important;
    }
    .wd-toolbar .naa-floris-toolbar-icon::before,
    .wd-toolbar .naa-floris-toolbar-icon::after,
    .woodmart-toolbar .naa-floris-toolbar-icon::before,
    .woodmart-toolbar .naa-floris-toolbar-icon::after {content:none!important;display:none!important;}
    .wd-toolbar .naa-floris-toolbar-icon svg,
    .woodmart-toolbar .naa-floris-toolbar-icon svg {
        display:block!important;
        width:24px!important;height:24px!important;
        stroke:currentColor!important;
        fill:none!important;
    }
    .wd-toolbar.naa-toolbar-extended .wd-toolbar-label,
    .woodmart-toolbar.naa-toolbar-extended .wd-toolbar-label {
        font-size:clamp(9px,2.55vw,12px)!important;
        white-space:nowrap!important;
    }
    body .wd-toolbar .naa-floris-toolbar-item .wd-toolbar-label,
    body .woodmart-toolbar .naa-floris-toolbar-item .wd-toolbar-label {
        display:block!important;
        margin:0!important;
        padding:0!important;
        font-weight:400!important;
        line-height:1.25!important;
        color:inherit!important;
    }
    .naa-floris-toolbar-button:focus-visible {outline:2px solid #009881!important;outline-offset:-3px!important;}
    .wd-toolbar .naa-floris-is-open .naa-floris-toolbar-button,
    .woodmart-toolbar .naa-floris-is-open .naa-floris-toolbar-button {color:#009881!important;}
}


/* v1.0.3: mobiel gebruikt UITSLUITEND het extra item in de bestaande WoodMart-balk.
   Niet afhankelijk van body.naa-mobile-in-toolbar, om dubbele knoppen te voorkomen. */
@media screen and (max-width: 767px) {
    html body .naa-root.naa-root-popup > button.naa-launcher {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
