/* =========================================================
   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;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: hidden;
}


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

#wrap {
    position: relative;

    flex: 0 0 auto;

    width: 1304px;
    height: 720px;

    margin: 0;
    padding: 0;
}


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

.box {
    width: 1304px;
    height: 720px;

    position: absolute;

    left: 0;
    top: 0;

    margin: 0;
    padding: 0;

    transform-origin: top left;

    background:
        url("https://qualeamusica.net/fondue/fundo-vertical2.jpg")
        no-repeat;

    background-position: left top;

    background-size: 1304px 720px;
}



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

.slot-bandeja {
    position:absolute;
    width:140px;
    height:120px;
    z-index:10;
}


/* 1 - espaço de cima */
#bandeja1 {
    left:658px;
    top:111px;
}


/* 2 - espaço superior direito */
#bandeja2 {
    left:539px;
    top:170px;
}


/* 3 - espaço inferior direito */
#bandeja3 {
    left:559px;
    top:363px;
}


/* 4 - espaço inferior esquerdo */
#bandeja4 {
    left:860px;
    top:347px;
}



/* 5 - espaço superior esquerdo */
#bandeja5 {
    left:898px;
    top:140px;
}



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

.slot-bandeja {
    position: absolute;
    left: 735px;
    top: 135px;
    width: 140px;
    height: 120px;
    z-index: 10;
}


#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;
}


/* Efeito ao passar o mouse */

.botao-selecao-uva:hover,
.botao-combinacao-uva:hover {
    transform: scale(1.05);
}


/* Efeito ao clicar */

.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:0px;
    top:0px;

    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
   ========================================================= */

/*
   Depois podemos ajustar cada posição.
   NÃO interfere nas bandejas.
*/

#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: 638px;

    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: 638px;

    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: 638px;

    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
   ADICIONADO
   ===================================================== */

#modalUltimoPedido {

    position: fixed;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

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

    display: none;

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

    z-index: 999999;
}


#modalUltimoPedido .modal-caixa {

    position: relative;

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

    max-height: 90vh;

    overflow-y: auto;

    padding: 25px;

    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);
}


.modal-fechar {

    position: absolute;

    right: 12px;
    top: 10px;

    width: 36px;
    height: 36px;

    border: 2px solid #d6a84f;
    border-radius: 50%;

    background: #32180d;

    color: #ffe8a8;

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

    line-height: 28px;

    cursor: pointer;

    z-index: 10;
}


.modal-fechar:hover {
    background: #704322;
}


.modal-titulo {

    margin-bottom: 20px;

    padding-right: 40px;

    color: #ffd66b;

    font-family: Arial, sans-serif;

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

    text-align: center;
}


.modal-carregando {

    padding: 30px 10px;

    color: #ffe8a8;

    font-size: 18px;

    text-align: center;
}


.bloco-info {

    margin-bottom: 15px;

    padding: 15px;

    border: 1px solid rgba(214,168,79,.55);

    border-radius: 12px;

    background: rgba(0,0,0,.20);
}


.bloco-info-titulo {

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(214,168,79,.45);

    color: #ffd66b;

    font-size: 17px;
    font-weight: bold;
}


.linha-info {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    padding: 7px 0;

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

    font-family: Arial, sans-serif;

    font-size: 15px;
}


.linha-info:last-child {
    border-bottom: 0;
}


.linha-info span {
    color: #d9c39a;

    flex-shrink: 0;
}


.linha-info strong {

    color: #fff;

    text-align: right;

    word-break: break-word;
}


.pedido-itens-linha {
    align-items: flex-start;
}


#pedidoItens {

    flex: 1;

    color: #fff;

    text-align: right;

    line-height: 1.5;

    word-break: break-word;
}


#pedidoValor {

    color: #7CFC8A;

    font-size: 20px;
}


#pedidoStatus {
    color: #ffd66b;
}


.sem-pedido {

    margin: 15px 0;

    padding: 20px;

    border: 1px solid rgba(214,168,79,.5);

    border-radius: 12px;

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

    color: #ffe8a8;

    font-size: 17px;

    text-align: center;
}


.btn-fechar-modal {

    width: 100%;

    margin-top: 5px;

    padding: 13px;

    border: 2px solid #d6a84f;
    border-radius: 10px;

    background: #32180d;

    color: #ffe8a8;

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

    cursor: pointer;
}


.btn-fechar-modal:hover {
    background: #704322;
}