/* ==========================================================
   Inox Biaso - Catálogo Widget
   ========================================================== */


/* ==========================================================
   1. RESET
   ========================================================== */

#ib-widget,
#ib-widget *{
    box-sizing:border-box;
}


/* ==========================================================
   2. CONTAINER
   ========================================================== */

#ib-widget{

    position:fixed;

    left:22px;

    bottom:22px;

    width:95px;

    height:165px;

    background:#FFFFFF;

    border:1px solid rgba(0,0,0,.06);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
0 10px 30px rgba(0,0,0,.12),
0 25px 60px rgba(0,0,0,.08);

    z-index:999999;

    transition:
    width .55s cubic-bezier(.19,1,.22,1),
    transform .30s ease,
    box-shadow .30s ease;

    font-family:Arial,Helvetica,sans-serif;

}

#ib-widget:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 40px rgba(0,0,0,.15),
    0 35px 80px rgba(0,0,0,.10);

}

#ib-widget.aberto{

    width:390px;

}


/* ==========================================================
   3. LINK
   ========================================================== */

#ib-link{

    display:flex;

    width:100%;

    height:100%;

    text-decoration:none;

    color:inherit;

}


/* ==========================================================
   4. CAPA
   ========================================================== */

.ib-cover{

    position:relative;

    width:120px;

    min-width:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF;

    overflow:hidden;

}

.ib-cover img{

    width:96px;

    border-radius:12px;

    transform:rotate(-7deg);

    transition:.45s;

    box-shadow:0 14px 34px rgba(0,0,0,.20);

}

.ib-cover::after{

    content:"";

    position:absolute;

    top:-40px;

    left:-90px;

    width:45px;

    height:220px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:rotate(28deg);

    opacity:0;

    pointer-events:none;

}

#ib-widget.aberto .ib-cover img{

    transform:rotate(-3deg);

}

.ib-badge{

    position:absolute;

    top:8px;

    left:8px;

    background:#E53935;

    color:#FFF;

    padding:5px 10px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    box-shadow:0 4px 12px rgba(229,57,53,.35);

}


/* ==========================================================
   5. CONTEÚDO
   ========================================================== */

.ib-content{

    opacity:0;

    width:0;

    overflow:hidden;

    padding:22px 24px 22px 14px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:
    opacity .30s ease .10s,
    width .30s ease;

}

#ib-widget.aberto .ib-content{

    opacity:1;

    width:250px;

}

.ib-title{

    margin:0;

    font-size:16px;

    line-height:1.25;

    color:#2F2F2F;

    font-weight:700;

}

.ib-description{

    margin:10px 0 14px;

    font-size:13px;

    line-height:1.55;

    color:#6E6E6E;

}


/* ==========================================================
   6. BOTÃO
   ========================================================== */

.ib-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    box-sizing:border-box;

    padding:13px;

    border-radius:10px;

    background:
    linear-gradient(
        180deg,
        #707070,
        #454545
    );

    color:#FFF;

    font-weight:700;

    font-size:14px;

    transition:.25s;

}

.ib-button:hover{

    background:
    linear-gradient(
        180deg,
        #7D7D7D,
        #505050
    );

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

/* ==========================================================
   7. BOTÃO FECHAR
   ========================================================== */

#ib-close{

    position:absolute;

    top:12px;

    right:12px;

    width:26px;

    height:26px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    color:#555;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 6px 16px rgba(0,0,0,.15);

    transition:.25s;

    z-index:100;

    border:1px solid rgba(0,0,0,.05);
    
    backdrop-filter:blur(10px);

}

#ib-close:hover{

    transform:rotate(90deg) scale(1.08);

    background:#f3f3f3;

}


/* ==========================================================
   8. ANIMAÇÕES
   ========================================================== */

@keyframes ibFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes ibShine{

    from{

        left:-90px;

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        left:150px;

        opacity:0;

    }

}

#ib-widget:not(.aberto){

    animation:ibFloat 4s ease-in-out infinite;

}


/* ==========================================================
   9. RESPONSIVO
   ========================================================== */

@media (max-width:768px){

    #ib-widget{

        width:75px;
        height:125px;

        left:12px;
        bottom:20px;

    }

    #ib-widget.aberto{

        width:calc(100vw - 24px);

        max-width:340px;

    }

    .ib-cover{

        width:86px;
        min-width:86px;

    }

    .ib-cover img{

        width:68px;

    }

    .ib-content{

        width:auto;
        padding:16px 16px 16px 6px;

    }

    #ib-widget.aberto .ib-content{

        width:calc(100% - 92px);

    }

    .ib-title{

        font-size:16px;

    }

    .ib-description{

        font-size:12px;
        line-height:1.55;
        margin:8px 0 12px;

    }

    .ib-button{

        padding:10px;
        font-size:13px;

    }

}


/* ==========================================================
   10. ESTADO RECOLHIDO
   ========================================================== */

#ib-widget:not(.aberto){

    cursor:pointer;

}

#ib-widget:not(.aberto) .ib-content{

    opacity:0;

    width:0;

    padding:0;

}

#ib-widget:not(.aberto) #ib-close{

    opacity:0;

    pointer-events:none;

}


/* ==========================================================
   11. ESTADO ABERTO
   ========================================================== */

#ib-widget.aberto{

    animation:none;

}

 #ib-widget.aberto{

        width:390px;

    }

.ib-cover.shine::after{

    animation:ibShine .9s ease forwards;

}

#ib-widget.aberto #ib-close{

    opacity:1;

}


/* ==========================================================
   12. MICRODETALHES
   ========================================================== */

.ib-title{

    letter-spacing:-.3px;

}

.ib-description{

    text-wrap:pretty;

}

.ib-button{

    user-select:none;

}

.ib-cover img{

    user-select:none;

}

#ib-widget img{

    display:block;

}

#ib-widget a{

    -webkit-tap-highlight-color:transparent;

}

/* ==========================================================
   13. RESPONSIVO MOBILE ULTRA AJUSTADO (CELULARES)
   ========================================================== */
@media (max-width: 480px) {
    
    /* 1. Estado do widget enquanto fechado (Capinha minimalista flutuando) */
    #ib-widget:not(.aberto) {
        left: 12px !important;
        bottom: 20px !important;
        width: 75px !important;
        height: 125px !important;
    }

    #ib-widget:not(.aberto) #ib-close {
        display: none !important; /* Esconde completamente o "X" quando fechado */
    }

    /* 2. Estado do widget quando aberto (Ajuste dinâmico de altura) */
    #ib-widget.aberto {
        left: 10px !important;
        right: 10px !important;
        bottom: 15px !important;
        width: calc(100vw - 20px) !important;
        max-width: 350px !important;
        height: auto !important; 
        min-height: unset !important;
        max-height: none !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
    }

    #ib-widget.aberto #ib-link {
        display: flex !important;
        align-items: center !important;
        padding: 12px 12px 18px 12px !important; /* Margem interna para o botão respirar */
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    /* Ajustes da capa do catálogo */
    #ib-widget.aberto .ib-cover {
        width: 70px !important;  
        min-width: 70px !important;
        height: 95px !important;
        margin-right: 10px !important;
    }

    #ib-widget.aberto .ib-cover img {
        width: 60px !important;
    }

    /* Ajustes da área de texto */
    #ib-widget.aberto .ib-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex-grow: 1 !important;
        min-width: 0 !important; 
        height: auto !important;
        padding: 10px 10px 10px 0 !important;
        width: calc(100% - 80px) !important;
        opacity: 1 !important;
    }

    #ib-widget.aberto .ib-title {
        font-size: 13px !important; 
        margin: 0 0 3px 0 !important;
        white-space: normal !important; 
        line-height: 1.2 !important;
        padding-right: 18px !important; /* Libera espaço para o X não encavalar no título */
    }

    .ib-description {
        font-size: 11px !important; 
        line-height: 1.3 !important;
        margin: 0 0 10px 0 !important;
        white-space: normal !important; 
        display: block !important; 
    }

    .ib-button {
        padding: 8px 10px !important; 
        font-size: 11px !important;
        width: 100% !important; 
        box-sizing: border-box !important;
        text-align: center !important;
        display: block !important; 
        height: auto !important;
    }
    
    /* Posição interna e perfeita do "X" apenas quando aberto */
    #ib-widget.aberto #ib-close {
        display: flex !important; 
        top: 8px !important;
        right: 8px !important;
        width: 24px !important;
        height: 24px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        font-size: 11px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
        opacity: 1 !important;
    }
}