/* =========================================================
   CONFIGURADOR DE LENTES
   ACABAMENTO VISUAL + RESPONSIVIDADE
   ========================================================= */


/* =========================================================
   OVERLAY
   ========================================================= */

#ocl-overlay{
    display:none;

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;
    height:100dvh;

    background:rgba(0,0,0,.48);

    z-index:9998;

    opacity:0;

    transition:opacity .25s ease;
}


#ocl-overlay.ativo{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}


/* =========================================================
   PAINEL LATERAL
   ========================================================= */

#ocl-sidebar{

    position:fixed;

    top:0;
    right:-520px;

    width:440px;
    max-width:100%;

    height:100%;
    height:100dvh;

    background:#fff;

    z-index:9999;

    transition:right .30s ease;

    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    box-shadow:
        -6px 0 25px rgba(0,0,0,.18);

    box-sizing:border-box;

}


/*
|--------------------------------------------------------------------------
| ABERTURA
|--------------------------------------------------------------------------
|
| Regra original preservada.
|
*/

#ocl-sidebar.ativo{

    right:0 !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* =========================================================
   TOPO
   ========================================================= */

.ocl-topo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:20px 22px;

    border-bottom:1px solid #e5e5e5;

    background:#fff;

    position:sticky;

    top:0;

    z-index:5;

}


.ocl-topo h2{

    margin:0;

    padding:0;

    font-size:22px;

    line-height:1.25;

    font-weight:600;

}


/* =========================================================
   BOTÃO FECHAR
   ========================================================= */

#ocl-fechar{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 42px;

    width:42px;

    height:42px;

    padding:0;

    margin:0;

    border:1px solid #e2e2e2;

    border-radius:50%;

    background:#fff;

    font-size:27px;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


#ocl-fechar:hover{

    background:#f5f5f5;

    border-color:#ccc;

}


#ocl-fechar:active{

    transform:scale(.96);

}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.ocl-conteudo{

    padding:22px;

    box-sizing:border-box;

}


/* =========================================================
   ETAPAS
   ========================================================= */

.ocl-etapa{

    margin-bottom:24px;

    padding-bottom:22px;

    border-bottom:1px solid #ededed;

}


.ocl-etapa:last-child{

    border-bottom:none;

}


.ocl-etapa h3,
#ocl-grau h3,
#ocl-faixa h3,
#ocl-material h3,
#ocl-tratamento h3,
#ocl-resumo h3{

    margin:0 0 14px;

    padding:0;

    font-size:17px;

    line-height:1.35;

    font-weight:600;

}


/* =========================================================
   OPÇÕES RADIO
   ========================================================= */

.ocl-etapa label,
#ocl-grau label{

    display:flex;

    align-items:center;

    gap:9px;

    margin:9px 0;

    padding:11px 12px;

    border:1px solid #e3e3e3;

    border-radius:7px;

    cursor:pointer;

    line-height:1.35;

    transition:
        border-color .2s ease,
        background .2s ease;

}


.ocl-etapa label:hover,
#ocl-grau label:hover{

    background:#fafafa;

    border-color:#ccc;

}


#ocl-sidebar input[type="radio"]{

    width:18px;

    height:18px;

    margin:0;

    flex:0 0 18px;

    cursor:pointer;

}


/* =========================================================
   SELECTS
   ========================================================= */

#ocl-sidebar select{

    display:block;

    width:100%;

    min-height:46px;

    padding:10px 38px 10px 12px;

    margin-top:10px;

    border:1px solid #d6d6d6;

    border-radius:6px;

    background-color:#fff;

    font-size:16px;

    line-height:1.3;

    box-sizing:border-box;

    cursor:pointer;

}


#ocl-sidebar select:focus{

    outline:none;

    border-color:#888;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.07);

}


/* =========================================================
   RESUMO
   ========================================================= */

#ocl-resumo{

    margin-top:5px;

}


#ocl-resumo-html{

    padding:15px;

    border:1px solid #e5e5e5;

    border-radius:7px;

    background:#fafafa;

}


#ocl-resumo-html p{

    margin:6px 0;

    line-height:1.45;

}


#ocl-total{

    margin-top:15px;

}


#ocl-total p{

    margin:6px 0;

}


#ocl-total h3{

    margin-top:14px;

    padding:13px 0 0;

    border-top:1px solid #ddd;

    font-size:20px;

}


/* =========================================================
   BOTÃO CONFIGURAÇÃO CONCLUÍDA
   ========================================================= */

#ocl-confirmar{

    width:100%;

    min-height:48px;

    margin-top:18px;

    padding:12px 18px;

    border-radius:6px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}


/* =========================================================
   BOTÃO ABRIR CONFIGURADOR
   ========================================================= */

#ocl-abrir{

    min-height:46px;

    padding:11px 20px;

    cursor:pointer;

}


/* =========================================================
   ELEMENTOS ESCONDIDOS
   ========================================================= */

.ocl-escondido{

    display:none !important;

}


/* =========================================================
   GARANTIA DE ABERTURA
   REGRA ORIGINAL PRESERVADA
   ========================================================= */

body.ocl-configurador-aberto #ocl-overlay{

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

}


body.ocl-configurador-aberto #ocl-sidebar{

    right:0 !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* =========================================================
   ABERTURA REFORÇADA
   COMPATIBILIDADE COM TEMAS WOOCOMMERCE
   ========================================================= */

#ocl-sidebar.ativo{

    right:0 !important;

    visibility:visible !important;

    opacity:1 !important;

}


#ocl-overlay.ativo{

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width:768px){

    #ocl-sidebar{

        width:400px;

        max-width:92vw;

        right:-100%;

    }


    .ocl-topo{

        padding:17px 18px;

    }


    .ocl-topo h2{

        font-size:20px;

    }


    .ocl-conteudo{

        padding:18px;

    }


    .ocl-etapa{

        margin-bottom:21px;

        padding-bottom:19px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:480px){

    #ocl-sidebar{

        width:100%;

        max-width:100%;

        right:-100%;

        box-shadow:none;

    }


    .ocl-topo{

        padding:14px 16px;

    }


    .ocl-topo h2{

        font-size:19px;

    }


    #ocl-fechar{

        width:40px;

        height:40px;

        flex-basis:40px;

        font-size:25px;

    }


    .ocl-conteudo{

        padding:16px;

    }


    .ocl-etapa{

        margin-bottom:20px;

        padding-bottom:18px;

    }


    .ocl-etapa h3,
    #ocl-grau h3,
    #ocl-faixa h3,
    #ocl-material h3,
    #ocl-tratamento h3,
    #ocl-resumo h3{

        font-size:16px;

    }


    .ocl-etapa label,
    #ocl-grau label{

        min-height:44px;

        padding:11px;

        box-sizing:border-box;

    }


    #ocl-sidebar select{

        min-height:48px;

        font-size:16px;

    }


    #ocl-confirmar{

        min-height:50px;

    }


    #ocl-abrir{

        width:100%;

        min-height:48px;

    }

}


/* =========================================================
   TELAS MUITO PEQUENAS
   ========================================================= */

@media screen and (max-width:360px){

    .ocl-topo{

        padding:12px 14px;

    }


    .ocl-conteudo{

        padding:14px;

    }


    .ocl-topo h2{

        font-size:18px;

    }

}

/* =========================================================
   RECEITA - VERSÃO 2.0.2
   ========================================================= */

#ocl-receita-upload{
    margin:18px 0;
    padding:14px;
    border:1px solid #e2e2e2;
    border-radius:6px;
    background:#fafafa;
}

#ocl-receita-upload h3{
    margin-top:0;
}

#ocl-receita-upload h3 small{
    font-size:12px;
    font-weight:400;
}

#ocl_receita_arquivo{
    display:block;
    width:100%;
    margin-top:10px;
}

.ocl-receita-ajuda{
    margin:8px 0 0;
    font-size:12px;
    opacity:.75;
}