/*======================================================
HELP MED CWB
Página Solicitar Medicamentos
======================================================*/

/*=========================
CONFIGURAÇÕES GERAIS
=========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;

    background:#f4f4f7;

    color:#170346;

}

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

section{

    padding:60px 0;

}

/*======================================================
    AJUSTE ESPECÍFICO DA SEÇÃO DE PESQUISA
======================================================*/

section.pesquisa{

    padding:22px 0 18px;

}

.ajuda-pesquisa{

    max-width:900px;
    margin:12px auto 0;

    color:#646478;

    font-size:14px;
    line-height:1.6;
    text-align:center;

}

/*======================================================
    APRESENTAÇÃO DA PÁGINA SOLICITAR
======================================================*/

.banner-solicitar{

    position:relative;

    display:block;

    padding:58px 0 46px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #ededf7 0%,
            #f8fbf9 55%,
            #fff9e8 100%
        );

    border-bottom:1px solid #dfdfe9;

}


/* Elemento decorativo */

.banner-solicitar::after{

    content:"";

    position:absolute;

    top:-130px;
    right:-100px;

    width:380px;
    height:380px;

    border-radius:50%;

    background:
        rgba(6,7,117,.06);

    pointer-events:none;

}


.banner-texto{

    position:relative;

    z-index:1;

    width:90%;
    max-width:1300px;

    margin:0 auto;

}


.banner-texto span{

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

    margin-bottom:13px;

    color:#8f6800;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

}


.banner-texto h1{

    max-width:780px;

    margin:0 0 18px;

    color:#170346;

    font-size:50px;
    line-height:1.14;

}


.banner-texto p{

    max-width:760px;

    margin:0;

    color:#4d4d64;

    font-size:17px;
    font-weight:400;

    line-height:1.75;

    opacity:1;
    visibility:visible;

}

/*======================================================
    TÍTULOS DAS SEÇÕES
======================================================*/

.titulo-secao{

    max-width:760px;

    margin:0 auto 14px;

    text-align:center;

}


.titulo-secao span{

    display:inline-block;

    margin-bottom:8px;

    color:#8f6800;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

}


.titulo-secao h2{

    margin:0;

    color:#170346;

    font-size:36px;
    line-height:1.25;

}


.linha{

    width:72px;
    height:4px;

    margin:14px auto 0;

    border:none;
    border-radius:20px;

    background:#d4a017;

}

/*======================================================
    PESQUISA DE MEDICAMENTOS
======================================================*/

.barra-pesquisa{

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

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:12px;

    margin:0 auto;

}


.barra-pesquisa input{

    width:100%;

    padding:16px 20px;

    border:1px solid #cdcddb;
    border-radius:11px;

    background:#ffffff;

    color:#343448;

    font-family:'Poppins',sans-serif;
    font-size:16px;

    outline:none;

    transition:
        border-color .25s,
        box-shadow .25s;

}


.barra-pesquisa input::placeholder{

    color:#646f68;

}


.barra-pesquisa input:focus{

    border-color:#060775;

    box-shadow:
        0 0 0 4px rgba(6,7,117,.11);

}


.barra-pesquisa button{

    min-width:145px;

    padding:16px 25px;

    border:none;
    border-radius:11px;

    background:#060775;
    color:#ffffff;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .25s,
        transform .25s,
        box-shadow .25s;

}


.barra-pesquisa button:hover{

    background:#170346;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(6,7,117,.18);

}

/*======================================================
ÁREA PRINCIPAL
======================================================*/

.conteudo{

    padding:34px 0 46px;

}

.painel{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,370px);

    align-items:start;

    gap:28px;

}

.lista-medicamentos{

    min-width:0;

}

/*======================================================
LISTA DE MEDICAMENTOS
======================================================*/

.lista-medicamentos h2{

    margin-bottom:22px;

    color:#170346;

    font-size:28px;
    line-height:1.3;

}

#medicamentos{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));

    gap:30px;

}

/*======================================================
CARD DO MEDICAMENTO
======================================================*/

.card-medicamento{

    background:white;

    border-radius:18px;

    padding:28px;

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

    transition:.35s;

    border-top:6px solid #060775;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.card-medicamento:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.card-medicamento h3{

    color:#170346;

    font-size:24px;

    margin-bottom:18px;

}

.card-medicamento p{

    color:#555;

    line-height:28px;

    margin-bottom:10px;

}

.card-medicamento strong{

    color:#170346;

}



/*======================================================
BOTÃO ADICIONAR
======================================================*/

.btn-adicionar{

    margin-top:20px;

    background:#060775;

    color:white;

    border:none;

    padding:14px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.30s;

}

.btn-adicionar:hover{

    background:#170346;

    transform:translateY(-3px);

}

/*======================================================
PAINEL CESTA
======================================================*/

.cesta{

    background:white;

    border-radius:18px;

    padding:30px;

    position:sticky;

    top:30px;

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

}

.cesta h2{

    color:#170346;

    margin-bottom:25px;

    font-size:30px;

}

#lista-cesta{

    min-height:220px;

    border:2px dashed #d7d7e1;

    border-radius:12px;

    padding:20px;

    color:#646f68;

    line-height:30px;

}

.total{

    margin-top:25px;

    padding-top:20px;

    border-top:2px solid #ececec;

    display:flex;

    justify-content:space-between;

    font-size:18px;

}

#btnFinalizar{

    width:100%;

    margin-top:30px;

    /* Branco sobre #D4A017 dava 2,38:1 — ilegivel na acao principal. */
    background:#8a6400;

    color:white;

    border:none;

    padding:16px;

    border-radius:10px;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

#btnFinalizar:hover{

    /* Escurece no hover, nao clareia: clarear devolvia o texto branco
       ao contraste ilegivel que o estado normal acabou de corrigir. */
    background:#755400;

    transform:translateY(-3px);

}

/*======================================================
INFORMAÇÕES IMPORTANTES
======================================================*/

.informacoes{

    background:#eeeef5;

    padding:42px 0;

}

.informacoes .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:start;

    gap:24px;

}

.aviso,
.fluxo{

    background:white;

    padding:28px;

    border-radius:18px;

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

}

.aviso h2,
.fluxo h2{

    color:#170346;

    margin-bottom:14px;

    font-size:28px;
    line-height:1.3;

}

.aviso p{

    color:#555;

    line-height:1.75;

}

/*======================================================
FLUXO
======================================================*/

.etapas{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.etapas div{

    background:#f8faf8;

    padding:13px 16px;

    border-left:6px solid #060775;

    border-radius:10px;

    font-size:16px;

    transition:.30s;

}

.etapas div:hover{

    background:#e7e7f4;

    transform:translateX(8px);

}

/*======================================================
CTA
======================================================*/

.cta{

    background:linear-gradient(135deg,#170346,#2f33a8);

    color:white;

    text-align:center;

}

.cta h2{

    font-size:44px;

    margin-bottom:25px;

}

.cta p{

    width:70%;

    margin:auto;

    line-height:34px;

    font-size:20px;

    margin-bottom:35px;

}

.cta .btn{

    display:inline-block;

    padding:18px 40px;

    background:white;

    color:#170346;

    border-radius:10px;

    font-weight:600;

    text-decoration:none;

    transition:.30s;

}

.cta .btn:hover{

    background:#FFD166;

    transform:translateY(-4px);

}

/*======================================================
RODAPÉ
======================================================*/

.footer{

    background:#170346;

    color:white;

    padding:0;

}

.footer-container{

    display:grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(150px,.65fr)
        minmax(280px,1fr);

    align-items:start;

    gap:36px;

    padding:36px 0 30px;

}

.footer-col{

    min-width:0;

}

.footer-identidade{

    display:grid;

    grid-template-columns:96px minmax(0,1fr);

    align-items:center;

    gap:18px;

}

.footer-logo{

    width:96px;
    height:96px;

    margin:0;

    object-fit:cover;
    object-position:center;

    border-radius:14px;

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

}

.footer-nome{

    display:block;

    margin-bottom:7px;

    color:#ffffff;

    font-size:20px;
    font-weight:700;
    line-height:1.3;

}

.footer-col h3{

    color:#FFD166;

    margin-bottom:12px;

    font-size:18px;
    line-height:1.4;

}

.footer-col p{

    color:#d7d7e1;

    margin:0;

    font-size:15px;
    line-height:1.65;

    overflow-wrap:anywhere;

}

.footer-col ul{

    list-style:none;

    display:grid;

    gap:8px;

}

.footer-col li{

    margin:0;

}

.footer-col a{

    color:#d7d7e1;

    text-decoration:none;

    transition:color .2s;

}

.footer-col a:hover{

    color:#FFD166;

}

.footer-contato address{

    display:grid;

    gap:8px;

    font-style:normal;

}

.footer-contato p{

    display:flex;

    align-items:flex-start;

    gap:8px;

}

.footer-icone{

    flex:0 0 auto;

}

.copyright{

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

    text-align:center;

    padding:14px 20px 16px;

    color:#d7d7e1;

    font-size:13px;
    line-height:1.5;

}

.copyright .creditos{

    margin:4px 0 0;

    font-size:12px;

}

/*======================================================
RESPONSIVIDADE - TABLETS
======================================================*/

@media(max-width:992px){

    .painel{

        grid-template-columns:1fr;

    }

    .cesta{

        position:relative;

        top:0;

    }

    .informacoes .container{

        grid-template-columns:1fr;

    }

    .footer-container{

        grid-template-columns:1fr 1fr;

        gap:26px;

    }

    .footer-identidade{

        grid-column:1 / -1;

        max-width:720px;

    }

}

@media(max-width:640px){

    .footer-container{

        grid-template-columns:1fr;

        gap:24px;

        padding:30px 0 24px;

        text-align:center;

    }

    .footer-identidade{

        grid-column:auto;

        grid-template-columns:78px minmax(0,1fr);

        gap:14px;

        text-align:left;

    }

    .footer-logo{

        width:78px;
        height:78px;

        border-radius:12px;

    }

    .footer-links ul{

        display:flex;

        flex-wrap:wrap;

        justify-content:center;

        gap:8px 18px;

    }

    .footer-contato address{

        justify-items:center;

    }

    .copyright{

        padding:12px 24px 16px;

    }

}

/*======================================================
RESPONSIVIDADE - SMARTPHONES
======================================================*/

@media(max-width:768px){

    @media(max-width:768px){

    .banner-solicitar{

        padding:42px 0 36px;

    }

    .banner-texto h1{

        font-size:37px;
        line-height:1.2;

    }

    .banner-texto p{

        font-size:16px;
        line-height:1.7;

    }

    .titulo-secao{

        margin-bottom:23px;

    }

    .titulo-secao h2{

        font-size:30px;

    }

    .barra-pesquisa{

        grid-template-columns:1fr;

    }

    .barra-pesquisa button{

        width:100%;

    }

}

    #medicamentos{

        grid-template-columns:1fr;

    }

    .cta h2{

        font-size:34px;

    }

    .cta p{

        width:100%;

        font-size:17px;

    }

}

@media(max-width:900px){

    .layout-solicitacao{

        grid-template-columns:1fr;

    }

}

/*======================================================
RESPONSIVIDADE - CELULARES PEQUENOS
======================================================*/

/*======================================================
    RESPONSIVIDADE - CELULARES PEQUENOS
======================================================*/

@media(max-width:480px){

    .banner-texto h1{

        font-size:31px;

        line-height:1.22;

    }

    .titulo-secao h2{

        font-size:28px;

    }

    .card-medicamento{

        padding:22px;

    }

    .btn-adicionar{

        width:100%;

    }

}

.acoes-card{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:20px;

}

.btn-adicionar:disabled{

    background:#a9b3ad;

    cursor:not-allowed;

    transform:none;

    opacity:.75;

}

.mensagem-vazia{

    grid-column:1 / -1;

    background:#ffffff;

    padding:35px;

    border-radius:15px;

    text-align:center;

    color:#666;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}

/*======================================================
MODAL DE FINALIZAÇÃO DA SOLICITAÇÃO
======================================================*/

.modal-finalizacao{

    position:fixed;
    inset:0;
    z-index:10000;

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

    padding:24px;

    background:rgba(0,0,0,.62);
    backdrop-filter:blur(5px);

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

    transition:
        opacity .3s ease,
        visibility .3s ease;

}

.modal-finalizacao.ativo{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

.finalizacao-conteudo{

    position:relative;

    width:100%;
    max-width:900px;
    max-height:92vh;

    overflow-y:auto;

    padding:42px;

    background:#ffffff;

    border-radius:22px;

    box-shadow:0 28px 70px rgba(0,0,0,.30);

    transform:translateY(-25px) scale(.98);

    transition:transform .3s ease;

}

.modal-finalizacao.ativo .finalizacao-conteudo{

    transform:translateY(0) scale(1);

}


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

.fechar-finalizacao{

    position:absolute;

    top:16px;
    right:20px;

    z-index:2;

    width:44px;
    height:44px;

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

    border:none;
    border-radius:50%;

    background:transparent;

    color:#666;

    font-size:36px;
    line-height:1;

    cursor:pointer;

    transition:.25s;

}

.fechar-finalizacao:hover,
.fechar-finalizacao:focus{

    background:#f5e8e6;
    color:#c0392b;

    outline:none;

}


/*======================================================
CABEÇALHO
======================================================*/

.finalizacao-cabecalho{

    padding-right:55px;
    margin-bottom:35px;

}

.finalizacao-cabecalho span{

    display:inline-block;

    margin-bottom:10px;

    color:#8f6800;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

}

.finalizacao-cabecalho h2{

    margin-bottom:12px;

    color:#170346;

    font-size:34px;
    line-height:1.25;

}

.finalizacao-cabecalho p{

    max-width:720px;

    color:#606b64;

    font-size:16px;
    line-height:28px;

}


/*======================================================
ETAPAS DA FINALIZAÇÃO
======================================================*/

.etapa-finalizacao{

    margin-bottom:26px;
    padding:26px;

    background:#f8faf8;

    border:1px solid #e1e1e9;
    border-radius:16px;

}

.etapa-finalizacao h3{

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

    margin-bottom:22px;

    color:#170346;

    font-size:21px;

}

.numero-finalizacao{

    width:36px;
    height:36px;

    flex-shrink:0;

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

    border-radius:50%;

    background:#060775;
    color:#ffffff;

    font-size:16px;
    font-weight:700;

}


/*======================================================
RESUMO DOS MEDICAMENTOS
======================================================*/

.resumo-finalizacao{

    display:flex;
    flex-direction:column;

    gap:12px;

}

.item-resumo-finalizacao{

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

    gap:20px;

    padding:16px 18px;

    background:#ffffff;

    border:1px solid #e3e3e9;
    border-radius:12px;

}

.item-resumo-finalizacao strong{

    display:block;

    margin-bottom:4px;

    color:#170346;

}

.item-resumo-finalizacao span{

    color:#667068;

    font-size:14px;

}

.quantidade-resumo{

    flex-shrink:0;

    padding:7px 12px;

    border-radius:20px;

    background:#e7e7f3;
    color:#060775;

    font-weight:700;

}

.total-finalizacao{

    display:flex;
    justify-content:space-between;

    gap:20px;

    margin-top:18px;
    padding-top:18px;

    border-top:2px solid #e1e1e8;

    color:#170346;

    font-size:18px;

}


/*======================================================
RECEITA MÉDICA
======================================================*/

.aviso-receita-finalizacao{

    margin-bottom:22px;
    padding:20px;

    background:#fff8df;

    border-left:5px solid #d4a017;
    border-radius:10px;

    color:#5f532a;

}

.aviso-receita-finalizacao strong{

    display:block;

    margin-bottom:8px;

    color:#7a6314;

}

.aviso-receita-finalizacao p{

    margin-top:7px;

    line-height:26px;

}

.campo-arquivo{

    display:flex;
    flex-direction:column;

    gap:10px;

}

.campo-arquivo label{

    color:#170346;

    font-weight:600;

}

.campo-arquivo input[type="file"]{

    padding:14px;

    background:#ffffff;

    border:2px dashed #b9b9c8;
    border-radius:12px;

    cursor:pointer;

}

.campo-arquivo small{

    color:#6a746d;

}

.nome-arquivo{

    color:#060775;

    font-size:14px;
    font-weight:600;

}


/*======================================================
FORMA DE RECEBIMENTO
======================================================*/

.opcoes-recebimento{

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.opcao-recebimento{

    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:20px;

    background:#ffffff;

    border:2px solid #dcdce5;
    border-radius:14px;

    cursor:pointer;

    transition:.25s;

}

.opcao-recebimento:hover{

    border-color:#060775;

    transform:translateY(-2px);

}

.opcao-recebimento input{

    margin-top:5px;

    accent-color:#060775;

}

.opcao-conteudo{

    display:flex;
    flex-direction:column;

    gap:6px;

}

.opcao-conteudo strong{

    color:#170346;

}

.opcao-conteudo small{

    color:#69736c;

    line-height:22px;

}


/*======================================================
ENDEREÇO
======================================================*/

.endereco-opcoes{

    display:flex;
    flex-wrap:wrap;

    gap:22px;

    margin-bottom:22px;

}

.endereco-opcoes label{

    display:flex;
    align-items:center;

    gap:8px;

    color:#424250;

    cursor:pointer;

}

.endereco-opcoes input{

    accent-color:#060775;

}

.formulario-endereco{

    display:grid;
    grid-template-columns:repeat(12,1fr);

    gap:18px;

}

.campo-formulario{

    display:flex;
    flex-direction:column;

    gap:8px;

}

.campo-formulario label{

    color:#170346;

    font-size:14px;
    font-weight:600;

}

.campo-formulario input,
.campo-formulario select{

    width:100%;

    padding:13px 14px;

    background:#ffffff;

    border:1px solid #cfcfd9;
    border-radius:9px;

    font-family:'Poppins',sans-serif;
    font-size:15px;

    outline:none;

    transition:.25s;

}

.campo-formulario input:focus,
.campo-formulario select:focus{

    border-color:#060775;

    box-shadow:0 0 0 3px rgba(6,7,117,.12);

}

.campo-cep{

    grid-column:span 3;

}

.campo-logradouro{

    grid-column:span 7;

}

.campo-numero{

    grid-column:span 2;

}

.campo-complemento{

    grid-column:span 5;

}

.campo-bairro{

    grid-column:span 4;

}

.campo-cidade{

    grid-column:span 5;

}

.campo-estado{

    grid-column:span 3;

}


/*======================================================
TERMO DE CONFIRMAÇÃO
======================================================*/

.termo-confirmacao{

    display:flex;
    align-items:flex-start;

    gap:12px;

    cursor:pointer;

}

.termo-confirmacao input{

    width:19px;
    height:19px;

    flex-shrink:0;

    margin-top:4px;

    accent-color:#060775;

}

.termo-confirmacao span{

    color:#4f5a53;

    line-height:26px;

}


/*======================================================
MENSAGENS DE VALIDAÇÃO
======================================================*/

.mensagem-finalizacao{

    display:none;

    margin-bottom:22px;
    padding:15px 18px;

    border-radius:10px;

    font-size:15px;
    line-height:24px;

}

.mensagem-finalizacao.erro{

    display:block;

    background:#fdecea;
    border:1px solid #f1b9b3;

    color:#a93226;

}

.mensagem-finalizacao.sucesso{

    display:block;

    background:#e7f6ec;
    border:1px solid #acd9ba;

    color:#060775;

}


/*======================================================
BOTÕES DA FINALIZAÇÃO
======================================================*/

.acoes-finalizacao{

    display:flex;
    justify-content:flex-end;

    gap:15px;

    padding-top:8px;

}

.btn-cancelar-finalizacao,
.btn-confirmar-finalizacao{

    padding:15px 25px;

    border-radius:10px;

    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-cancelar-finalizacao{

    background:#ffffff;
    color:#4f5b53;

    border:2px solid #cdcdd7;

}

.btn-cancelar-finalizacao:hover{

    border-color:#8d9991;

    background:#f3f3f5;

}

.btn-confirmar-finalizacao{

    border:2px solid #060775;

    background:#060775;
    color:#ffffff;

}

.btn-confirmar-finalizacao:hover{

    border-color:#170346;

    background:#170346;

    transform:translateY(-2px);

}


/*======================================================
ATRIBUTO HIDDEN
======================================================*/

.modal-finalizacao [hidden]{

    display:none !important;

}


/*======================================================
RESPONSIVIDADE
======================================================*/

@media(max-width:768px){

    .modal-finalizacao{

        padding:12px;

        align-items:flex-start;

        overflow-y:auto;

    }

    .finalizacao-conteudo{

        max-height:none;

        margin:12px 0;

        padding:34px 20px;

    }

    .finalizacao-cabecalho h2{

        font-size:28px;

    }

    .etapa-finalizacao{

        padding:20px;

    }

    .opcoes-recebimento{

        grid-template-columns:1fr;

    }

    .formulario-endereco{

        grid-template-columns:1fr;

    }

    .campo-cep,
    .campo-logradouro,
    .campo-numero,
    .campo-complemento,
    .campo-bairro,
    .campo-cidade,
    .campo-estado{

        grid-column:auto;

    }

    .item-resumo-finalizacao{

        align-items:flex-start;

        flex-direction:column;

    }

    .acoes-finalizacao{

        flex-direction:column-reverse;

    }

    .btn-cancelar-finalizacao,
    .btn-confirmar-finalizacao{

        width:100%;

    }

}

@media(max-width:480px){

    .finalizacao-cabecalho{

        padding-right:35px;

    }

    .finalizacao-cabecalho h2{

        font-size:25px;

    }

    .etapa-finalizacao h3{

        align-items:flex-start;

        font-size:18px;

    }

    .total-finalizacao{

        flex-direction:column;

        gap:6px;

    }

}

/*=========================================================
    CESTA LATERAL FIXA
=========================================================*/

.cesta-solicitacao{

    position:sticky;

    top:105px;

    align-self:start;

    display:flex;
    flex-direction:column;

    width:100%;
    max-height:calc(100vh - 125px);

    overflow:hidden;

}


/*=========================================================
    CABEÇALHO DA CESTA
=========================================================*/

.cabecalho-cesta{

    flex-shrink:0;

    padding-bottom:16px;
    margin-bottom:14px;

    border-bottom:1px solid #e1e1e8;

}

.cabecalho-cesta h2{

    margin-bottom:6px;

}

.cabecalho-cesta #totalItens{

    color:#657169;

    font-size:14px;
    font-weight:600;

}


/*=========================================================
    LISTA COM ROLAGEM INDEPENDENTE
=========================================================*/

.cesta-solicitacao .lista-cesta{

    flex:1;

    min-height:0;

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

    padding-right:7px;

    scrollbar-width:thin;

}


/* Barra de rolagem no Chrome e Edge */

.cesta-solicitacao .lista-cesta::-webkit-scrollbar{

    width:7px;

}

.cesta-solicitacao .lista-cesta::-webkit-scrollbar-track{

    background:#eeeef2;

    border-radius:10px;

}

.cesta-solicitacao .lista-cesta::-webkit-scrollbar-thumb{

    background:#a8a8bb;

    border-radius:10px;

}

.cesta-solicitacao .lista-cesta::-webkit-scrollbar-thumb:hover{

    background:#787893;

}


/*=========================================================
    RODAPÉ SEMPRE VISÍVEL
=========================================================*/

.rodape-cesta{

    flex-shrink:0;

    margin-top:15px;
    padding-top:17px;

    background:#ffffff;

    border-top:1px solid #dfdfe7;

}

.rodape-cesta .btn-finalizar,
.rodape-cesta #btnFinalizar{

    width:100%;

    margin:0;

}


/*=========================================================
    RESPONSIVIDADE
=========================================================*/

@media(max-width:900px){

    .cesta-solicitacao{

        position:static;

        max-height:none;

        overflow:visible;

    }

    .cesta-solicitacao .lista-cesta{

        max-height:none;

        overflow:visible;

        padding-right:0;

    }

}

/*======================================================
    ESPAÇO PARA O CABEÇALHO — não é mais preciso

    O cabeçalho era `position:fixed`, fora do fluxo, e o
    topo da página ficava embaixo dele. Daí este
    `padding-top:110px` no body, um número que alguém tinha
    de manter igual à altura real — e que já estava errado:
    no celular o menu quebrava em duas linhas e passava de
    200px, comendo o começo do conteúdo.

    Desde 2026-09-15 o cabeçalho é `sticky`: ele OCUPA o
    espaço dele no fluxo, e a compensação virou espaço
    morto. Sobra só a âncora, porque `sticky` cobre o alvo
    de um salto de link.
======================================================*/

.banner-solicitar{

    scroll-margin-top:70px;

}
/*=========================================================
    POSOLOGIA NA CESTA (item opcional, decidido 2026-08-31)
=========================================================*/

/*
    O ITEM DA CESTA (2026-09-30). Não havia regra nenhuma para ele: o "−",
    o "+" e o "Remover" saíam com o visual cru do navegador, pequenos demais
    para o dedo — o mesmo "texto sem CSS" que a ONG apontou no começo, e que
    só apareceu ao fotografar o carrinho com um item dentro.

    Os botões têm 44px de alvo (o mínimo confortável para toque).
*/
.item-cesta{

    padding:14px 0;

    border-bottom:1px solid #e3e3e9;
}

.item-cesta:last-child{
    border-bottom:none;
}

.item-cesta-informacoes > strong{

    display:block;

    margin-bottom:10px;

    color:#170346;

    font-size:16px;
    line-height:1.3;
}

.controles-quantidade{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    line-height:1;
}

.controles-quantidade button{

    min-width:44px;
    height:44px;

    border:1px solid #cfcfd9;
    border-radius:10px;

    background:#ffffff;

    color:#060775;

    font-family:inherit;
    font-size:20px;
    font-weight:600;

    cursor:pointer;
}

.controles-quantidade button:hover{
    background:#eeeef6;
}

.controles-quantidade span{

    min-width:32px;

    color:#170346;

    font-size:17px;
    font-weight:700;

    text-align:center;
}

/* Ação destrutiva: separada dos números e em vermelho discreto. */
.controles-quantidade .remover-item{

    margin-left:auto;
    padding:0 14px;

    border-color:#efbbb5;

    color:#8c2626;

    font-size:14px;
}

.controles-quantidade .remover-item:hover{
    background:#fdeceb;
}

.posologia-item{

    margin-top:8px;

    font-size:12px;

}

.posologia-item summary{

    cursor:pointer;

    color:#14538c;

    font-weight:600;

}

.posologia-item label{

    display:block;

    margin-top:8px;

    font-weight:600;

}

/* Mesma identidade dos campos do formulario (.campo-formulario),
   em escala reduzida para caber no cartao da cesta. */
.posologia-item select,
.posologia-item input{

    display:block;

    width:100%;

    margin-top:4px;
    padding:8px 10px;

    background:#ffffff;

    border:1px solid #cfcfd9;
    border-radius:7px;

    font-family:'Poppins',sans-serif;
    font-size:12px;

    outline:none;

    transition:.25s;

}

.posologia-item select:focus,
.posologia-item input:focus{

    border-color:#060775;

    box-shadow:0 0 0 3px rgba(6,7,117,.12);

}

.dica-terceiro{

    display:block;

    margin-top:6px;

    color:#6b7a8c;

    font-size:12px;
    line-height:18px;

}