/* ============================================================
   MB PRODUCT ADVISOR — SIGNATURE V1
   ============================================================ */

:root{
    --mbpa-bg:#0b0d0b;
    --mbpa-panel:#11130f;
    --mbpa-panel2:#171914;
    --mbpa-line:rgba(255,255,255,.085);
    --mbpa-text:#f4eee6;
    --mbpa-muted:#918980;
    --mbpa-dim:#615b55;
    --mbpa-orange:#f79333;
}

body.mbpa-open{
    overflow:hidden;
}

.mbpa-root *{
    box-sizing:border-box;
}

.mbpa-launcher{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:999880;

    min-height:54px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:7px 13px 7px 9px;

    color:#17110c;
    background:linear-gradient(180deg,#ff9d3c,#dd701d);

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

    box-shadow:0 15px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.25);

    cursor:pointer;
}

.mbpa-launcher__icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    background:rgba(17,12,8,.11);
    border-radius:50%;
}

.mbpa-launcher .mbpa-icon svg{
    width:20px;
    height:20px;
}

.mbpa-launcher strong,
.mbpa-launcher small{
    display:block;
    text-align:left;
}

.mbpa-launcher strong{
    font-size:11px;
    line-height:1.2;
    font-weight:950;
}

.mbpa-launcher small{
    margin-top:2px;
    font-size:8px;
    font-weight:750;
    opacity:.72;
}

.mbpa-icon{
    display:inline-grid;
    place-items:center;
}

.mbpa-icon svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mbpa-backdrop{
    position:fixed;
    inset:0;
    z-index:999890;

    background:rgba(3,4,3,.65);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.mbpa-panel{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:999900;

    width:min(440px,calc(100vw - 28px));
    height:min(720px,calc(100dvh - 44px));

    display:flex;
    flex-direction:column;

    color:var(--mbpa-text);

    background:
        radial-gradient(circle at 100% 0%,rgba(247,147,51,.09),transparent 34%),
        linear-gradient(145deg,#11130f,#090b09);

    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;

    box-shadow:0 30px 95px rgba(0,0,0,.58);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(14px) scale(.985);

    transition:opacity .18s ease,visibility .18s ease,transform .2s ease;
}

.mbpa-panel[aria-hidden="false"]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.mbpa-head{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:17px 17px 15px;

    border-bottom:1px solid var(--mbpa-line);
}

.mbpa-head__brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.mbpa-head__mark{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    color:var(--mbpa-orange);
    background:rgba(247,147,51,.07);

    border:1px solid rgba(247,147,51,.17);
    border-radius:50%;
}

.mbpa-head__brand small,
.mbpa-head__brand strong{
    display:block;
}

.mbpa-head__brand small{
    color:var(--mbpa-orange);
    font-size:7px;
    font-weight:950;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.mbpa-head__brand strong{
    margin-top:2px;
    color:#fff;
    font-size:16px;
    line-height:1.1;
    font-weight:950;
}

.mbpa-close{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    padding:0;

    color:#898178;
    background:#0c0e0b;

    border:1px solid var(--mbpa-line);
    border-radius:50%;

    cursor:pointer;
}

.mbpa-close:hover{
    color:#fff;
    border-color:rgba(247,147,51,.30);
}

.mbpa-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;

    padding:15px 15px 18px;

    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#35342e transparent;
}

.mbpa-conversation{
    display:grid;
    gap:11px;
    margin-top:12px;
}

.mbpa-message{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.mbpa-message--user{
    justify-content:flex-end;
}

.mbpa-message__avatar{
    width:27px;
    height:27px;
    flex:0 0 auto;

    display:grid;
    place-items:center;

    color:var(--mbpa-orange);
    background:rgba(247,147,51,.06);

    border:1px solid rgba(247,147,51,.13);
    border-radius:50%;

    font-size:10px;
}

.mbpa-message__bubble{
    max-width:calc(100% - 35px);

    padding:11px 12px;

    background:#151713;

    border:1px solid var(--mbpa-line);
    border-radius:4px 10px 10px 10px;
}

.mbpa-message--user .mbpa-message__bubble{
    background:rgba(247,147,51,.11);
    border-color:rgba(247,147,51,.22);
    border-radius:10px 4px 10px 10px;
}

.mbpa-message__bubble strong{
    display:block;
    color:#f2ece3;
    font-size:12px;
    line-height:1.35;
}

.mbpa-message__bubble p{
    margin:4px 0 0;
    color:#aaa198;
    font-size:10px;
    line-height:1.6;
}

.mbpa-message--user .mbpa-message__bubble p{
    margin:0;
    color:#e7ded4;
}

.mbpa-message__bubble--typing{
    display:flex;
    gap:4px;
    padding:13px 14px;
}

.mbpa-message__bubble--typing i{
    width:5px;
    height:5px;
    background:#777067;
    border-radius:50%;
    animation:mbpa-typing .9s infinite ease-in-out;
}

.mbpa-message__bubble--typing i:nth-child(2){animation-delay:.12s}
.mbpa-message__bubble--typing i:nth-child(3){animation-delay:.24s}

@keyframes mbpa-typing{
    0%,100%{opacity:.35;transform:translateY(0)}
    50%{opacity:1;transform:translateY(-2px)}
}

.mbpa-quick{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin:11px 0 0 35px;
}

.mbpa-quick button{
    min-height:29px;

    padding:0 10px;

    color:#9d958b;
    background:#0e100d;

    border:1px solid var(--mbpa-line);
    border-radius:999px;

    font-size:8px;
    font-weight:800;

    cursor:pointer;
}

.mbpa-quick button:hover{
    color:#fff;
    border-color:rgba(247,147,51,.30);
    background:rgba(247,147,51,.05);
}

.mbpa-products{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.mbpa-product{
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    gap:10px;

    padding:8px;

    background:#0d0f0c;

    border:1px solid rgba(255,255,255,.07);
    border-radius:6px;
}

.mbpa-product__image{
    aspect-ratio:1;
    overflow:hidden;

    background:#080a08;
    border-radius:4px;
}

.mbpa-product__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mbpa-product__body{
    min-width:0;
}

.mbpa-product__name{
    display:block;

    color:#f1ebe2!important;

    font-size:10px;
    line-height:1.35;
    font-weight:900;

    text-decoration:none!important;
}

.mbpa-product__name:hover{
    color:var(--mbpa-orange)!important;
}

.mbpa-product__meta{
    display:flex;
    flex-wrap:wrap;
    gap:3px 7px;

    margin-top:5px;
}

.mbpa-product__meta span{
    color:#837c73;
    font-size:7.5px;
    line-height:1.4;
}

.mbpa-product__meta b{
    color:#aaa198;
}

.mbpa-product__price{
    margin-top:5px;

    color:var(--mbpa-orange);

    font-size:11px;
    line-height:1.2;
    font-weight:950;
}

.mbpa-product__buttons{
    display:flex;
    gap:5px;
    margin-top:7px;
}

.mbpa-product__buttons>a,
.mbpa-product__add{
    min-height:31px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 9px;

    border-radius:3px;

    font-size:7.5px;
    line-height:1;
    font-weight:900;

    text-decoration:none!important;
    cursor:pointer;
}

.mbpa-product__buttons>a{
    color:#9c948a!important;
    background:#121410;
    border:1px solid var(--mbpa-line);
}

.mbpa-product__add{
    color:#17110c!important;
    background:linear-gradient(180deg,#f99a38,#db701d);
    border:1px solid rgba(255,255,255,.12);
}

.mbpa-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:10px;
}

.mbpa-action{
    min-height:34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 11px;

    color:#9a9288!important;
    background:#0e100d;

    border:1px solid var(--mbpa-line);
    border-radius:4px;

    font-size:8px;
    font-weight:900;

    text-decoration:none!important;
}

.mbpa-action.is-primary{
    color:#17110c!important;
    background:linear-gradient(180deg,#f99a38,#db701d);
    border-color:rgba(255,255,255,.12);
}

.mbpa-form{
    flex:0 0 auto;

    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    gap:7px;

    padding:11px 12px;

    background:#0d0f0c;
    border-top:1px solid var(--mbpa-line);
}

.mbpa-form textarea{
    width:100%;
    min-height:42px;
    max-height:92px;

    resize:none;

    padding:11px 12px;

    color:#f0eae2;
    background:#151713;

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    font-family:inherit;
    font-size:10px;
    line-height:1.45;

    outline:none;
}

.mbpa-form textarea:focus{
    border-color:rgba(247,147,51,.45);
    box-shadow:0 0 0 3px rgba(247,147,51,.06);
}

.mbpa-form textarea::placeholder{
    color:#67615a;
}

.mbpa-send{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    padding:0;

    color:#17110c;
    background:var(--mbpa-orange);

    border:0;
    border-radius:6px;

    cursor:pointer;
}

.mbpa-foot{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 13px 9px;

    color:#5f5952;
    background:#0d0f0c;
}

.mbpa-foot .mbpa-icon svg{
    width:12px;
    height:12px;
}

.mbpa-foot p{
    margin:0;
    font-size:6.5px;
    line-height:1.4;
}

@media(max-width:620px){

    .mbpa-launcher{
        right:14px;
        bottom:14px;
    }

    .mbpa-launcher>span:last-child{
        display:none;
    }

    .mbpa-launcher{
        width:52px;
        min-height:52px;
        padding:6px;
        justify-content:center;
    }

    .mbpa-panel{
        right:0;
        bottom:0;

        width:100%;
        height:min(88dvh,760px);

        border-left:0;
        border-right:0;
        border-bottom:0;

        border-radius:14px 14px 0 0;
    }

    .mbpa-head{
        padding:15px 14px 13px;
    }

    .mbpa-scroll{
        padding:13px 12px 16px;
    }

    .mbpa-product{
        grid-template-columns:68px minmax(0,1fr);
    }
}

@media(prefers-reduced-motion:reduce){
    .mbpa-panel,
    .mbpa-message__bubble--typing i{
        transition:none!important;
        animation:none!important;
    }
}


/* ============================================================
   v1.0.2 — LEESBAARHEID / TYPOGRAFIE BOOST
   ============================================================ */

.mbpa-head__brand small{
    font-size:9px !important;
}

.mbpa-head__brand strong{
    font-size:19px !important;
}

.mbpa-message__bubble strong{
    font-size:15px !important;
    line-height:1.4 !important;
}

.mbpa-message__bubble p{
    font-size:12.5px !important;
    line-height:1.65 !important;
}

.mbpa-quick button{
    min-height:34px !important;
    padding:0 13px !important;
    font-size:10.5px !important;
}

.mbpa-product__name{
    font-size:13px !important;
    line-height:1.4 !important;
}

.mbpa-product__meta span{
    font-size:10px !important;
    line-height:1.5 !important;
}

.mbpa-product__price{
    font-size:14px !important;
}

.mbpa-product__buttons > a,
.mbpa-product__add{
    min-height:36px !important;
    padding:0 12px !important;
    font-size:10px !important;
}

.mbpa-action{
    min-height:39px !important;
    font-size:10.5px !important;
}

.mbpa-form textarea{
    min-height:48px !important;
    padding:13px 14px !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

.mbpa-send{
    width:48px !important;
    height:48px !important;
}

.mbpa-foot p{
    font-size:9px !important;
    line-height:1.45 !important;
}

.mbpa-launcher strong{
    font-size:13px !important;
}

.mbpa-launcher small{
    font-size:10px !important;
}

/* Mobiel: groot genoeg blijven lezen */
@media(max-width:620px){
    .mbpa-message__bubble strong{
        font-size:14px !important;
    }

    .mbpa-message__bubble p{
        font-size:12px !important;
    }

    .mbpa-form textarea{
        font-size:16px !important; /* voorkomt iOS zoom */
    }

    .mbpa-product__name{
        font-size:12px !important;
    }
}


/* ============================================================
   v1.0.3 — CONTACT REMY QUICK PILL
   ============================================================ */

.mbpa-quick .mbpa-quick__contact{
    color:#f79333 !important;
    background:rgba(247,147,51,.07) !important;
    border-color:rgba(247,147,51,.28) !important;
}

.mbpa-quick .mbpa-quick__contact:hover{
    color:#17110c !important;
    background:#f79333 !important;
    border-color:#f79333 !important;
}