/* MaeAlexis Smart Product Finder */

.mafspf-widget,
.mafspf-widget *{
    box-sizing:border-box;
}

.mafspf-widget [hidden]{
    display:none !important;
}

.mafspf-widget{
    --mafspf-primary:#000000;
    --mafspf-soft:#f7f7f7;
    --mafspf-white:#ffffff;
    --mafspf-text:#111111;
    --mafspf-muted:#555555;
    --mafspf-border:#dddddd;
    font-family:Inter, Arial, Helvetica, sans-serif;
    color:var(--mafspf-text);
    line-height:1.4;
}

.mafspf-floating{
    position:fixed;
    bottom:18px;
    z-index:99998;
}

.mafspf-pos-left{
    left:18px;
}

.mafspf-pos-right{
    right:18px;
}

.mafspf-launcher{
    width:58px;
    height:58px;
    min-height:58px;
    max-width:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
    border-radius:50%;
    border:2px solid var(--mafspf-primary);
    background:var(--mafspf-primary);
    color:#ffffff;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:all .16s ease;
}

.mafspf-launcher:hover{
    background:#ffffff;
    color:var(--mafspf-primary);
}

.mafspf-launcher-icon{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.mafspf-launcher-label,
.mafspf-launcher-mobile-label{
    display:none !important;
}

.mafspf-launcher-icon svg{
    width:22px;
    height:22px;
    fill:currentColor;
    display:block;
}


.mafspf-teaser{
    position:absolute;
    bottom:72px;
    left:0;
    width:300px;
    max-width:calc(100vw - 36px);
    background:#ffffff;
    border:2px solid #000000;
    border-radius:16px;
    padding:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.16);
}

.mafspf-pos-right .mafspf-teaser{
    left:auto;
    right:0;
}

.mafspf-teaser strong{
    display:block;
    margin:0 26px 6px 0;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:22px;
    line-height:1.05;
    color:#000000;
    font-weight:600;
}

.mafspf-teaser p{
    margin:0 0 11px;
    color:#444444;
    font-size:13px;
    line-height:1.45;
}

.mafspf-teaser-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #000000;
    border-radius:999px;
    background:#000000;
    color:#ffffff;
    padding:9px 13px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.mafspf-teaser-btn:hover{
    background:#ffffff;
    color:#000000;
}

.mafspf-teaser-close{
    position:absolute;
    top:8px;
    right:8px;
    width:26px;
    height:26px;
    border:1px solid #dddddd;
    border-radius:50%;
    background:#ffffff;
    color:#000000;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}

.mafspf-panel{
    width:min(430px, calc(100vw - 28px));
    max-height:min(720px, calc(100vh - 34px));
    background:#ffffff;
    border:2px solid var(--mafspf-primary);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.mafspf-floating .mafspf-panel{
    position:absolute;
    bottom:64px;
}

.mafspf-pos-left .mafspf-panel{
    left:0;
}

.mafspf-pos-right .mafspf-panel{
    right:0;
}

.mafspf-embedded{
    width:100%;
}

.mafspf-embedded .mafspf-panel{
    width:100%;
    max-height:none;
    box-shadow:none;
}

.mafspf-panel-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:15px;
    background:#000000;
    color:#ffffff;
}

.mafspf-panel-head strong{
    display:block;
    margin:0 0 4px;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:24px;
    line-height:1.05;
    font-weight:600;
}

.mafspf-panel-head span{
    display:block;
    font-size:12.5px;
    line-height:1.45;
    opacity:.88;
    font-weight:400;
}

.mafspf-close{
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:transparent;
    color:#ffffff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
}

.mafspf-progress{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:12px 14px 0;
    background:#ffffff;
}

.mafspf-progress span{
    height:4px;
    border-radius:999px;
    background:#e5e5e5;
}

.mafspf-progress span.is-active{
    background:#000000;
}

.mafspf-form{
    padding:14px;
    background:#ffffff;
}

.mafspf-step{
    display:none;
}

.mafspf-step.is-active{
    display:block;
}

.mafspf-step h3{
    margin:0 0 12px;
    color:#000000;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:25px;
    line-height:1.1;
    font-weight:600;
}

.mafspf-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.mafspf-option{
    min-height:42px;
    padding:10px;
    border:1px solid #dcdcdc;
    border-radius:13px;
    background:#f8f8f8;
    color:#111111;
    text-align:center;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
}

.mafspf-option:hover,
.mafspf-option.is-selected{
    background:#000000;
    border-color:#000000;
    color:#ffffff;
}

.mafspf-step textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    border:1px solid #dcdcdc;
    border-radius:14px;
    padding:12px;
    font-size:14px;
    line-height:1.5;
    color:#111111;
    outline:none;
}

.mafspf-step textarea:focus{
    border-color:#000000;
}

.mafspf-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
}

.mafspf-actions button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    padding:10px 15px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.mafspf-back{
    border:1px solid #dcdcdc;
    background:#ffffff;
    color:#111111;
}

.mafspf-back:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.mafspf-next,
.mafspf-submit{
    border:1px solid #000000;
    background:#000000;
    color:#ffffff;
    margin-left:auto;
}

.mafspf-next:hover,
.mafspf-submit:hover{
    background:#ffffff;
    color:#000000;
}

.mafspf-results{
    padding:0 14px 14px;
    background:#ffffff;
    max-height:420px;
    overflow:auto;
}

.mafspf-results-head{
    padding:13px;
    border:1px solid #e0e0e0;
    background:#f8f8f8;
    border-radius:14px;
    margin:0 0 11px;
}

.mafspf-results-head h3{
    margin:0 0 5px;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:25px;
    line-height:1.1;
    color:#000000;
    font-weight:600;
}

.mafspf-results-head p{
    margin:0;
    color:#444444;
    font-size:13.5px;
    line-height:1.45;
}

.mafspf-product-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
}

.mafspf-product-card{
    display:grid;
    grid-template-columns:78px 1fr;
    gap:10px;
    align-items:center;
    padding:9px;
    border:1px solid #dedede;
    border-radius:14px;
    background:#ffffff;
}

.mafspf-product-img{
    width:78px;
    height:78px;
    border:1px solid #eeeeee;
    border-radius:12px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.mafspf-product-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.mafspf-product-info h4{
    margin:0 0 5px;
    color:#111111;
    font-size:13.5px;
    line-height:1.25;
    font-weight:600;
}

.mafspf-product-price{
    display:block;
    margin:0 0 5px;
    color:#000000;
    font-size:13px;
    font-weight:600;
}

.mafspf-product-reason{
    margin:0 0 8px;
    color:#555555;
    font-size:12.5px;
    line-height:1.35;
}

.mafspf-product-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.mafspf-product-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    text-decoration:none !important;
}

.mafspf-view{
    background:#ffffff;
    border:1px solid #dcdcdc;
    color:#111111 !important;
}

.mafspf-buy{
    background:#000000;
    border:1px solid #000000;
    color:#ffffff !important;
}

.mafspf-restart-wrap{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}

.mafspf-restart,
.mafspf-shop{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 13px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;
    cursor:pointer;
}

.mafspf-restart{
    border:1px solid #dcdcdc;
    background:#ffffff;
    color:#111111;
}

.mafspf-shop{
    border:1px solid #000000;
    background:#000000;
    color:#ffffff !important;
}

.mafspf-form.is-loading{
    opacity:.65;
    pointer-events:none;
}

@media(max-width:767px){
    .mafspf-floating{
        bottom:14px;
    }

    .mafspf-pos-left{
        left:12px;
    }

    .mafspf-pos-right{
        right:12px;
    }

    .mafspf-launcher{
        width:54px;
        height:54px;
        min-height:54px;
        padding:0;
        border-radius:50%;
        box-shadow:0 8px 22px rgba(0,0,0,.18);
    }

    .mafspf-launcher-label,
    .mafspf-launcher-mobile-label{
        display:none !important;
    }

    .mafspf-floating .mafspf-panel{
        left:0;
        bottom:66px;
        width:calc(100vw - 24px);
        max-height:calc(100vh - 86px);
    }

    .mafspf-teaser{
        bottom:66px;
        width:calc(100vw - 24px);
        max-width:calc(100vw - 24px);
    }

    .mafspf-panel-head{
        padding:14px;
    }

    .mafspf-panel-head strong{
        font-size:22px;
    }

    .mafspf-options{
        grid-template-columns:1fr;
        gap:8px;
    }

    .mafspf-option{
        min-height:40px;
        font-size:13px;
    }

    .mafspf-step h3,
    .mafspf-results-head h3{
        font-size:23px;
    }

    .mafspf-results{
        max-height:350px;
    }

    .mafspf-product-card{
        grid-template-columns:66px 1fr;
    }

    .mafspf-product-img{
        width:66px;
        height:66px;
    }

    .mafspf-restart-wrap{
        flex-direction:column;
    }

    .mafspf-restart,
    .mafspf-shop{
        width:100%;
    }
}