html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    background: linear-gradient(135deg, #eef8ff 0%, #ffffff 55%, #eaf6ff 100%) !important;
}

#app-retirada,
#app-retirada * {
    box-sizing: border-box !important;
}

#app-retirada {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 34px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 28px !important;
    font-family: "Poppins", Arial, sans-serif !important;
    color: #07172f !important;
}

#app-retirada .oculto,
.retirada-oculto {
    display: none !important;
}

.retirada-header {
    width: 100vw !important;
    height: 82px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: linear-gradient(90deg, #0b4f73, #2f7fa6) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .12) !important;
}

.retirada-header-content {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.retirada-header-content h1 {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

#coluna-principal {
    width: 100% !important;
    min-width: 0 !important;
    background: #fff !important;
    border: 1px solid #d8e2ea !important;
    border-radius: 18px !important;
    padding: 38px !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12) !important;
    min-height: 430px !important;
}

#app-retirada h3 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #07172f !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}

#app-retirada .descricao-etapa {
    color: #334155 !important;
    font-size: 15px !important;
    margin: 0 0 22px !important;
    line-height: 1.5 !important;
}

#app-retirada .descricao-etapa strong {
    color: #07172f !important;
    font-weight: 800 !important;
}

#app-retirada .btn-voltar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #0b4f73 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    cursor: pointer !important;
}

#app-retirada .btn-voltar:hover {
    background: #f1f8fc !important;
    border-color: #0b789f !important;
}

#app-retirada .campo {
    margin-bottom: 20px !important;
}

#app-retirada label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

#app-retirada input,
#app-retirada select {
    width: 100% !important;
    height: 52px !important;
    border: 2px solid #d3dde7 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
}

#app-retirada input:focus,
#app-retirada select:focus {
    border-color: #14566f !important;
    box-shadow: 0 0 0 4px rgba(20, 86, 111, .12) !important;
    outline: none !important;
}

#app-retirada .input-grupo {
    display: flex !important;
    gap: 10px !important;
    max-width: 520px !important;
}

#app-retirada .input-grupo input {
    flex: 1 !important;
}

#app-retirada .btn-proximo,
#app-retirada .btn-confirmar,
#app-retirada #btn-adicionar-lote {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff6500 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 14px 26px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(255, 101, 0, .22) !important;
    margin-top: 18px !important;
}

#app-retirada .btn-proximo:hover,
#app-retirada .btn-confirmar:hover,
#app-retirada #btn-adicionar-lote:hover {
    background: #e95b00 !important;
    transform: translateY(-1px) !important;
}

#app-retirada #btn-adicionar-lote {
    margin-top: 0 !important;
}

#app-retirada .btn-termo-retirada {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff7ed !important;
    color: #ff6500 !important;
    border: 1px solid #ff6500 !important;
    border-radius: 11px !important;
    padding: 14px 26px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}

#app-retirada .btn-termo-retirada:hover {
    background: #e95b00 !important;
    color: #fff !important;
}

#app-retirada .opcoes-tipo {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 26px !important;
}

#app-retirada .btn-patio,
#app-retirada .btn-tipo {
    width: 100% !important;
    min-height: 50px !important;
    border: 2px solid #d3dde7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #07172f !important;
    cursor: pointer !important;
    padding: 18px 22px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .05) !important;
}

#app-retirada .btn-patio strong,
#app-retirada .btn-tipo strong {
    font-size: 16px !important;
    font-weight: 800 !important;
}

#app-retirada .btn-patio:hover,
#app-retirada .btn-tipo:hover,
#app-retirada .btn-tipo.ativo {
    border-color: #ff6500 !important;
    background: #fff7ed !important;
}

#app-retirada #grid-lotes {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
    gap: 12px !important;
    max-height: 430px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    margin: 24px 0 !important;
}

#app-retirada .lote-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 76px !important;
    border: 2px solid #d3dde7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #07172f !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

#app-retirada .lote-card:hover,
#app-retirada .lote-card.destacado {
    border-color: #ff6500 !important;
    background: #fff7ed !important;
}

#app-retirada .lote-card.selecionado {
    background: #ff6500 !important;
    border-color: #ff6500 !important;
    color: #fff !important;
}

#app-retirada .legenda-lotes {
    display: flex !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
    margin: 18px 0 22px !important;
}

#app-retirada .legenda {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

#app-retirada .legenda.disponivel {
    border: 2px solid #d3dde7 !important;
    background: #fff !important;
}

#app-retirada .legenda.selecionado {
    background: #ff6500 !important;
    border: 2px solid #ff6500 !important;
}

#app-retirada .legenda.ocupado {
    background: #cfd6df !important;
    border: 2px solid #9ca3af !important;
}

#app-retirada #lista-horarios {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

#app-retirada #lista-horarios button {
    height: 46px !important;
    border: 2px solid #d3dde7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #07172f !important;
    cursor: pointer !important;
}

#app-retirada #lista-horarios button:hover,
#app-retirada #lista-horarios button.ativo {
    background: #0b789f !important;
    color: #fff !important;
    border-color: #0b789f !important;
}

.info-funcionamento {
    background: #edf3f7 !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    margin: 16px 0 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

#app-retirada .opcoes-retirada {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 8px 0 28px !important;
}

#app-retirada .opcao-retirada {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 2px solid #d3dde7 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
    background: #fff !important;
    font-weight: 800 !important;
}

#app-retirada .opcao-retirada input {
    width: auto !important;
    height: auto !important;
}

#app-retirada .opcao-retirada:has(input:checked) {
    border-color: #ff6500 !important;
    background: #fff7ed !important;
}

#app-retirada #sidebar-resumo {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #d8e2ea !important;
    border-top: 5px solid #ff6500 !important;
    padding: 24px !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .12) !important;
    align-self: start !important;
    position: sticky !important;
    top: 24px !important;
}

#app-retirada #sidebar-resumo h4 {
    display: block !important;
    width: 100% !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #07172f !important;
    padding-bottom: 12px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid #d8e2ea !important;
}

#app-retirada #sidebar-resumo p {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
}

#app-retirada #sidebar-resumo strong,
#app-retirada #sidebar-resumo span {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
}

#app-retirada #sidebar-resumo strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #07172f !important;
    margin-bottom: 4px !important;
}

#app-retirada #sidebar-resumo span {
    line-height: 1.5 !important;
    word-break: break-word !important;
}

#app-retirada .box-revisao {
    background: #f8fafc !important;
    border: 1px solid #d8e2ea !important;
    border-radius: 14px !important;
    padding: 26px 30px !important;
    margin: 24px 0 !important;
}

#app-retirada .linha-revisao {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 18px !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#app-retirada .linha-revisao strong {
    color: #07172f !important;
    font-weight: 800 !important;
}

#app-retirada .linha-revisao span {
    color: #334155 !important;
    word-break: break-word !important;
}

#app-retirada .box-revisao hr {
    border: none !important;
    border-top: 1px solid #cbd5e1 !important;
    margin: 16px 0 !important;
}

#app-retirada .campo-invalido {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .08) !important;
}

#app-retirada .erro-campo {
    margin-top: 6px !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#app-retirada #mensagem-erro {
    margin-top: 16px !important;
    padding: 13px 16px !important;
    background: #fff3f3 !important;
    border: 1px solid #f5c6c6 !important;
    border-radius: 10px !important;
    color: #c00 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.comprovante-agendamento {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    padding: 42px 56px !important;
    max-width: 820px !important;
    margin: 0 auto 24px !important;
    color: #1f2937 !important;
    font-family: "Poppins", Arial, sans-serif !important;
}

.comprovante-topo {
    text-align: center !important;
}

.comprovante-logo {
    max-width: 130px !important;
    height: auto !important;
    margin-bottom: 18px !important;
}

.comprovante-topo h2 {
    font-size: 30px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    margin: 0 0 18px !important;
}

.comprovante-linha {
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 0 0 24px !important;
}

.comprovante-dados p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 8px 0 !important;
}

.comprovante-observacoes {
    margin-top: 28px !important;
}

.comprovante-observacoes p {
    font-size: 11px !important;
    line-height: 1.65 !important;
    margin: 8px 0 !important;
}

.comprovante-dados strong,
.comprovante-observacoes strong {
    font-weight: 800 !important;
    color: #111827 !important;
}

.comprovante-acoes {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Tablet */
@media (max-width: 920px) {
    #app-retirada {
        max-width: 100% !important;
        padding: 28px 18px !important;
        display: block !important;
    }

    #coluna-principal {
        width: 100% !important;
        max-width: 100% !important;
    }

    #app-retirada #sidebar-resumo {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .retirada-header {
        width: 100% !important;
        height: auto !important;
        min-height: 72px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 16px !important;
    }

    .retirada-header-content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .retirada-header-content h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    #app-retirada {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px 12px !important;
        display: block !important;
    }

    #coluna-principal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 22px 16px !important;
        border-radius: 18px !important;
        min-height: auto !important;
        overflow-x: hidden !important;
    }

    #app-retirada .etapa {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    #app-retirada h3 {
        font-size: 30px !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }

    #app-retirada .descricao-etapa {
        font-size: 18px !important;
        line-height: 1.45 !important;
        margin-bottom: 24px !important;
    }

    #app-retirada .btn-voltar {
        font-size: 16px !important;
        padding: 10px 16px !important;
        margin-bottom: 22px !important;
    }

    #app-retirada .campo {
        width: 100% !important;
        max-width: 100% !important;
    }

    #app-retirada label {
        font-size: 17px !important;
    }

    #app-retirada input,
    #app-retirada select {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        font-size: 16px !important;
    }

    #app-retirada .input-grupo {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #app-retirada #btn-adicionar-lote,
    #app-retirada .btn-proximo,
    #app-retirada .btn-confirmar {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 17px !important;
        padding: 16px 18px !important;
    }

    #app-retirada .opcoes-tipo {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #app-retirada .btn-patio,
    #app-retirada .btn-tipo {
        width: 100% !important;
        min-height: 58px !important;
        padding: 16px !important;
    }

    #app-retirada #grid-lotes {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        max-height: 360px !important;
    }

    #app-retirada .lote-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 62px !important;
        font-size: 18px !important;
    }

    #app-retirada #lista-horarios {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #app-retirada .legenda-lotes {
        gap: 12px !important;
        font-size: 14px !important;
    }

    #app-retirada .box-revisao {
        padding: 18px 14px !important;
    }

    #app-retirada .linha-revisao {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .comprovante-agendamento {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
    }

    .comprovante-topo h2 {
        font-size: 24px !important;
    }

    .comprovante-dados p {
        font-size: 15px !important;
    }
}

/* Mobile pequeno */
@media (max-width: 390px) {
    .retirada-header-content h1 {
        font-size: 24px !important;
    }

    #app-retirada h3 {
        font-size: 26px !important;
    }

    #app-retirada .descricao-etapa {
        font-size: 16px !important;
    }

    #app-retirada #grid-lotes {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Impressão */
@media print {
    body * {
        visibility: hidden !important;
    }

    #comprovante-retirada,
    #comprovante-retirada * {
        visibility: visible !important;
    }

    #comprovante-retirada {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 40px !important;
        border: none !important;
        box-shadow: none !important;
    }

    .comprovante-acoes,
    .retirada-header,
    #sidebar-resumo,
    #mensagem-erro,
    #loading {
        display: none !important;
    }
}

/* Corre�«®�«ªo definitiva do sidebar resumo */
#app-retirada #sidebar-resumo {
    display: block !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

#app-retirada #sidebar-resumo h4,
#app-retirada #sidebar-resumo p,
#app-retirada #sidebar-resumo strong,
#app-retirada #sidebar-resumo span {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
}

#app-retirada #sidebar-resumo h4 {
    margin: 0 0 18px !important;
}

#app-retirada #sidebar-resumo p {
    margin: 0 0 20px !important;
}

#app-retirada #sidebar-resumo strong {
    margin-bottom: 4px !important;
}

#app-retirada #sidebar-resumo span {
    word-break: break-word !important;
}

/* No mobile, esconder sidebar */
@media (max-width: 920px) {
    #app-retirada #sidebar-resumo {
        display: none !important;
    }
}