/* =========================================================
   CELULAR HORIZONTAL
   CANVAS ORIGINAL: 1304 x 720
   ========================================================= */

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;
}


/* =========================================================
   PALCO
   ========================================================= */

#palco {

    position: fixed;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}


/* =========================================================
   WRAP
   ========================================================= */

#wrap {

    position: relative;

    width: 1304px;
    height: 720px;

    margin: 0;
    padding: 0;

    flex: 0 0 auto;

}


/* =========================================================
   BOX PRINCIPAL
   ========================================================= */

.box {

    position: absolute;

    left: 0;
    top: 0;

    width: 1304px;
    height: 720px;

    margin: 0;
    padding: 0;

    transform-origin: 0 0;

    background-image:
        url("https://qualeamusica.net/fondue/fundo-horizontal.png");

    background-repeat: no-repeat;

    background-position: 0 0;

    background-size: 1304px 720px;

}


/* =========================================================
   FUNDOS EXTERNOS
   ========================================================= */

.fundo-celular-h {

    display: none;

}

.fundo-celular-v {

    display: none;

}


/* =========================================================
   BANDEJAS
   ========================================================= */

.slot-bandeja {

    position: absolute;

    width: 140px;
    height: 120px;

    z-index: 10;

}


/* =========================================================
   BANDEJA 1
   ========================================================= */

#bandeja1 {

    left: 658px;
    top: 111px;

}


/* =========================================================
   BANDEJA 2
   ========================================================= */

#bandeja2 {

    left: 539px;
    top: 170px;

}


/* =========================================================
   BANDEJA 3
   ========================================================= */

#bandeja3 {

    left: 559px;
    top: 363px;

}


/* =========================================================
   BANDEJA 4
   ========================================================= */

#bandeja4 {

    left: 860px;
    top: 347px;

}


/* =========================================================
   BANDEJA 5
   ========================================================= */

#bandeja5 {

    left: 898px;
    top: 140px;

}


/* =========================================================
   BANDEJA 6
   ========================================================= */

#bandeja6 {

    left: 750px;
    top: 269px;

}


/* =========================================================
   DIVS DA BANDEJA
   ========================================================= */

.slot-bandeja {

    position: absolute;

    width: 140px;
    height: 120px;

    z-index: 10;

}


/* =========================================================
   SEGUNDO .slot-bandeja ORIGINAL
   ========================================================= */

#bandeja6 {

    left: 750px;
    top: 269px;

}


/* =========================================================
   BOTÃO SELEÇÃO UVA
   ========================================================= */

.botao-selecao-uva {

    position: absolute;

    width: 90px;
    height: 69px;

    left: 40px;
    top: 160px;

    z-index: 50;

    cursor: pointer;

    transition: transform 0.15s ease;

}


.botao-selecao-uva img {

    width: 125px;
    height: 95px;

    display: block;

}


/* =========================================================
   BOTÃO COMBINAÇÃO UVA
   ========================================================= */

.botao-combinacao-uva {

    position: absolute;

    width: 76px;
    height: 69px;

    left: 45px;
    top: 450px;

    z-index: 50;

    cursor: pointer;

    transition: transform 0.15s ease;

}


.botao-combinacao-uva img {

    width: 70px;
    height: 63px;

    display: block;

}


/* =========================================================
   EFEITOS
   ========================================================= */

.botao-selecao-uva:hover,
.botao-combinacao-uva:hover {

    transform: scale(1.05);

}


.botao-selecao-uva:active,
.botao-combinacao-uva:active {

    transform: scale(0.95);

}


/* =========================================================
   BOTÃO CONFIRMAR PEDIDO
   ========================================================= */

.botao-confirmar {

    position: absolute;

    left: 40px;
    top: 523px;

    width: 419px;
    height: 84px;

    z-index: 100;

    cursor: pointer;

    transition: transform 0.15s ease;

}


.botao-confirmar img {

    width: 417px;
    height: 54px;

    display: block;

}


.botao-confirmar:hover {

    transform: scale(1.03);

}


.botao-confirmar:active {

    transform: scale(0.97);

}


/* =========================================================
   SUA COMBINAÇÃO
   ========================================================= */

#suaCombinacao {

    position: absolute;

    left: 40px;
    top: 447px;

    width: 419px;
    height: 64px;

    z-index: 40;

    display: flex;

    align-items: center;

    gap: 6px;

    pointer-events: none;

}


.item-selecao {

    position: relative;

    width: 78px;
    height: 64px;

    display: flex;

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

    pointer-events: none;

}


.icone-combinacao {

    width: 70px;
    height: 63px;

    object-fit: contain;

    display: block;

}


/* =========================================================
   BOTÃO X PARA RETIRAR
   ========================================================= */

.botao-retirar {

    position: absolute;

    right: 0;
    top: 0;

    width: 18px;
    height: 18px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: #c62828;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 15px;
    font-weight: bold;

    line-height: 18px;

    text-align: center;

    cursor: pointer;

    z-index: 90;

    pointer-events: auto;

}


.botao-retirar:hover {

    transform: scale(1.10);

}


/* =========================================================
   CONTADOR
   ========================================================= */

#contadorCombinacao {

    position: absolute;

    left: 277px;
    top: 414px;

    width: 70px;
    height: 30px;

    z-index: 85;

    font-family: Arial, sans-serif;

    font-size: 21px;
    font-weight: bold;

    line-height: 30px;

    color: white;

    text-align: left;

    pointer-events: none;

}


/* =========================================================
   TOTAL
   ========================================================= */

#totalPedido {

    position: absolute;

    left: 740px;
    top: 650px;

    width: 419px;
    height: 55px;

    z-index: 100;

    font-family: Arial, sans-serif;

    font-size: 32px;
    font-weight: bold;

    color: white;

    text-align: center;

    line-height: 55px;

}


/* =========================================================
   BOTÕES NOVOS
   ========================================================= */

.botao-fruta {

    position: absolute;

    z-index: 50;

    cursor: pointer;

    transition: transform 0.15s ease;

}


.botao-fruta:hover {

    transform: scale(1.05);

}


.botao-fruta:active {

    transform: scale(0.95);

}


.botao-fruta img {

    display: block;

}


/* =========================================================
   POSIÇÕES DOS NOVOS BOTÕES
   ========================================================= */

#botaoMorango {

    left: 170px;
    top: 160px;

}


#botaoMorango img {

    width: 125px !important;
    height: 95px !important;

    object-fit: contain;

}


#botaoBanana {

    left: 300px;
    top: 160px;

}


#botaoBanana img {

    width: 125px !important;
    height: 95px !important;

    object-fit: contain;

}


#botaoMamao {

    left: 40px;
    top: 300px;

}


#botaoMamao img {

    width: 125px !important;
    height: 95px !important;

    object-fit: contain;

}


#botaoChocolate {

    left: 170px;
    top: 300px;

}


#botaoChocolate img {

    width: 125px !important;
    height: 95px !important;

    object-fit: contain;

}


#botaoLeitePo {

    left: 300px;
    top: 300px;

}


#botaoLeitePo img {

    width: 125px !important;
    height: 95px !important;

    object-fit: contain;

}


/* =====================================================
   BOTÃO MEU ÚLTIMO PEDIDO
   ===================================================== */

.btn-ultimo-pedido {

    display: block;

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

    margin: 12px auto;

    padding: 14px 20px;

    position: absolute;

    left: 30px;
    top: 632px;

    z-index: 100;

    border: 2px solid #d6a84f;

    border-radius: 12px;

    background: linear-gradient(
        145deg,
        #5a321c,
        #32180d
    );

    color: #ffe8a8;

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

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition: .2s ease;

}


.btn-ultimo-pedido:hover {

    background: linear-gradient(
        145deg,
        #704322,
        #43210f
    );

    transform: translateY(-2px);

}


.btn-ultimo-pedido:active {

    transform: translateY(1px);

}


/* =====================================================
   BOTÃO LOGIN
   ===================================================== */

.btn-login {

    display: block;

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

    margin: 12px auto;

    padding: 14px 20px;

    position: absolute;

    left: 490px;
    top: 632px;

    z-index: 100;

    border: 2px solid #d6a84f;

    border-radius: 12px;

    background: linear-gradient(
        145deg,
        #5a321c,
        #32180d
    );

    color: #ffe8a8;

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

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition: .2s ease;

}


.btn-login:hover {

    background: linear-gradient(
        145deg,
        #704322,
        #43210f
    );

    transform: translateY(-2px);

}


.btn-login:active {

    transform: translateY(1px);

}


/* =====================================================
   BOTÃO SAIR
   ===================================================== */

.btn-sair {

    display: block;

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

    margin: 12px auto;

    padding: 14px 20px;

    position: absolute;

    left: 660px;
    top: 632px;

    z-index: 100;

    border: 2px solid #d6a84f;

    border-radius: 12px;

    background: linear-gradient(
        145deg,
        #5a321c,
        #32180d
    );

    color: #ffe8a8;

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

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition: .2s ease;

}


.btn-sair:hover {

    background: linear-gradient(
        145deg,
        #704322,
        #43210f
    );

    transform: translateY(-2px);

}


.btn-sair:active {

    transform: translateY(1px);

}


/* =========================================================
   MODAL — ÚLTIMO PEDIDO
   CORRIGIDO PARA O HTML ATUAL
   ========================================================= */

#modalUltimoPedido {

    position: fixed;

    left: 0;
    top: 0;

    width: 100vw;
    height: 100vh;

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

    display: none;

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

    z-index: 999999;

    box-sizing: border-box;

    padding: 20px;

}


/* =========================================================
   CAIXA DO MODAL
   IMPORTANTE:
   O INDEX USA .modal-conteudo
   ========================================================= */

#modalUltimoPedido .modal-conteudo {

    position: relative;

    width: 760px;

    max-width: 92vw;

    max-height: 88vh;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 28px 30px;

    box-sizing: border-box;

    border: 3px solid #d6a84f;

    border-radius: 18px;

    background: linear-gradient(
        145deg,
        #5a321c,
        #2b1309
    );

    color: #ffe8a8;

    box-shadow:
        0 10px 35px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.08);

}


/* =========================================================
   BOTÃO FECHAR
   O INDEX USA .fechar-modal
   ========================================================= */

#modalUltimoPedido .fechar-modal {

    position: absolute;

    right: 12px;
    top: 10px;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 2px solid #d6a84f;

    border-radius: 50%;

    background: #32180d;

    color: #ffe8a8;

    font-size: 28px;
    font-weight: bold;

    line-height: 32px;

    text-align: center;

    cursor: pointer;

    z-index: 10;

}


#modalUltimoPedido .fechar-modal:hover {

    background: #704322;

}


/* =========================================================
   TÍTULO
   ========================================================= */

#modalUltimoPedido h2 {

    margin: 0 45px 22px 0;

    padding: 0;

    color: #ffd66b;

    font-family: Arial, sans-serif;

    font-size: 27px;
    font-weight: bold;

    text-align: center;

}


/* =========================================================
   DADOS DO PEDIDO
   ========================================================= */

#modalUltimoPedido .pedido-dados {

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   CADA LINHA
   ========================================================= */

#modalUltimoPedido .pedido-dados p {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin: 0;

    padding: 11px 5px;

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

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.4;

}


#modalUltimoPedido .pedido-dados p:last-child {

    border-bottom: 0;

}


/* =========================================================
   NOME DO CAMPO
   ========================================================= */

#modalUltimoPedido .pedido-dados strong {

    flex-shrink: 0;

    color: #ffd66b;

    font-weight: bold;

}


/* =========================================================
   VALOR DOS DADOS
   ========================================================= */

#modalUltimoPedido .pedido-dados span {

    color: #fff;

    text-align: right;

    word-break: break-word;

}


/* =========================================================
   ITENS
   ========================================================= */

#modalUltimoPedido #pedidoItens {

    flex: 1;

    line-height: 1.5;

    text-align: right;

    word-break: break-word;

}


/* =========================================================
   VALOR
   ========================================================= */

#modalUltimoPedido #pedidoValor {

    color: #7CFC8A;

    font-size: 21px;

    font-weight: bold;

}


/* =========================================================
   STATUS
   ========================================================= */

#modalUltimoPedido #pedidoStatus {

    color: #ffd66b;

    font-weight: bold;

}


/* =========================================================
   COMPATIBILIDADE COM NOMES ANTIGOS
   ========================================================= */

#modalUltimoPedido .modal-caixa {

    position: relative;

    width: 760px;

    max-width: 92vw;

    max-height: 88vh;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 28px 30px;

    box-sizing: border-box;

    border: 3px solid #d6a84f;

    border-radius: 18px;

    background: linear-gradient(
        145deg,
        #5a321c,
        #2b1309
    );

    color: #ffe8a8;

    box-shadow:
        0 10px 35px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.08);

}


#modalUltimoPedido .modal-fechar {

    position: absolute;

    right: 12px;
    top: 10px;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 2px solid #d6a84f;

    border-radius: 50%;

    background: #32180d;

    color: #ffe8a8;

    font-size: 28px;
    font-weight: bold;

    line-height: 32px;

    text-align: center;

    cursor: pointer;

}


/* =========================================================
   AJUSTE PARA TELAS HORIZONTAIS PEQUENAS
   ========================================================= */

@media screen and (max-height: 600px) {

    #modalUltimoPedido {

        padding: 10px;

    }


    #modalUltimoPedido .modal-conteudo {

        width: 88vw;

        max-width: 88vw;

        max-height: 92vh;

        padding: 20px 24px;

        border-width: 2px;

        border-radius: 16px;

    }


    #modalUltimoPedido h2 {

        margin-bottom: 15px;

        font-size: 23px;

    }


    #modalUltimoPedido .pedido-dados p {

        padding: 7px 4px;

        font-size: 15px;

    }


    #modalUltimoPedido .fechar-modal {

        width: 34px;
        height: 34px;

        font-size: 25px;

        line-height: 28px;

    }

}


/* =========================================================
   TELAS HORIZONTAIS COM POUCA ALTURA
   DEIXA O MODAL MAIS LARGO
   ========================================================= */

@media screen and (max-height: 500px) {

    #modalUltimoPedido .modal-conteudo {

        width: 94vw;

        max-width: 94vw;

        max-height: 94vh;

        padding: 16px 22px;

    }


    #modalUltimoPedido h2 {

        font-size: 21px;

        margin-bottom: 10px;

    }


    #modalUltimoPedido .pedido-dados p {

        padding: 5px 3px;

        font-size: 14px;

    }

}