.carrinhoDisplayToggle{
    display: none;
}

.efeito_h1{
    margin-bottom: 20px;
}

#areaMsgCarrinho{
    text-align: center;
    margin: 25px 0px;
}

#mostrarCarrinho {
    position: fixed;
    right: 50px;
    top: 80px;
    z-index: 9999;
    /* Fibra de carbono */
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -8px 0,
        linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -8px 0,
        linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%);
    background-size: 16px 16px;
    background-color: #141414;

    color: #ff9f1a;
    border: 1px solid rgba(255,159,26,0.45);

    margin: 10px 0px;
    padding: 12px 22px;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: 900;

    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;

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

    box-shadow:
        0 0 0 1px rgba(255,159,26,0.25),
        0 0 18px rgba(255,159,26,0.4),
        0 14px 35px rgba(0,0,0,0.85);

    transition: 
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}


#mostrarCarrinho:hover {
    filter: brightness(1.15);

    box-shadow:
        0 0 0 1px rgba(255,159,26,0.45),
        0 0 26px rgba(255,159,26,0.75),
        0 22px 55px rgba(0,0,0,0.95);

    transform: scale(1.06);
}

#mostrarCarrinho:active {
    transform: scale(0.98);

    box-shadow:
        inset 0 4px 10px rgba(0,0,0,0.6),
        0 6px 18px rgba(0,0,0,0.7),
        0 0 12px rgba(255,159,26,0.45);
}


/* Estado padrão (fechado) */
#mostrarCarrinho.fechado {
  right: 50px;
  top: 80px;
}

/* Estado aberto */
#mostrarCarrinho.aberto {
  right: 50px;
  top: 20px;
}

/* MOBILE */
@media (max-width: 768px) {
    .efeito_h1{
        margin-top: 50px;
    }

    #mostrarCarrinho {
    right: 15px;
    top: 50px;
  }


  #mostrarCarrinho.fechado {
    right: 15px;
    top: 50px;
  }

  #mostrarCarrinho.aberto {
    right: 15px;
    top: 45px;
  }
}



#carrinhoWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    /* 🔥 AGORA O CARRINHO PODE ROLAR */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Base grafite com efeito fibra de carbono */
    background:
        linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #141414;

    padding: 20px 0;

    /* Borda metálica */
    border: 1px solid #2b2b2b;
    box-shadow: 
        inset 0 0 25px rgba(0,0,0,0.8),
        0 10px 30px rgba(0,0,0,0.9);

    color: #ff9f1a; /* laranja metálico */
    font-family: Arial, sans-serif;
}


.box_facaseupedido{
    text-align: center;
    margin: 12px auto 20px auto;
}

#titulo_seucarrinho{
    font-size: 1.8rem;
    text-align: center;
    padding-bottom: 10px;
}

.tabela-produto {
    display: table;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    border-collapse: collapse;

    /* Papel do caderno */
    background-color: #fdfdf8;
    color: #0b3d91; /* Azul caneta */

    font-size: 0.95rem;
    font-family: "Segoe UI", Arial, sans-serif;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
}

/* Linhas do caderno */
.tabela-produto td,
.tabela-produto th {
    padding: 10px 14px;
    border-bottom: 1px solid #b7d2ff; /* Linha azul clarinha */
    border-right: 1px solid #e2e2e2;
    text-align: center;
}

/* Cabeçalho com caneta vermelha */
.tabela-produto th {
    background-color: #fff;
    color: #b30000; /* Vermelho caneta */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #b30000;
}

/* Alternância de linhas tipo folha usada */
.tabela-produto tbody tr:nth-child(even) {
    background-color: #f7f8f4;
}

/* Hover de leitura fácil */
.tabela-produto tbody tr:hover {
    background-color: #eaf2ff;
}

/* Coluna da foto */
.foto-produto {
    text-align: center;
    vertical-align: middle;
}


#totalContainer {
    margin-top: 30px;
    font-size: 1.5rem;

    /* <-- MANTÉM EXATAMENTE O BACKGROUND QUE VOCÊ JÁ ESTÁ USANDO --> */

    color: #ff9f1a;
    padding: 18px 32px;
    border-radius: 16px;

    /* ELEVAÇÃO EXTREMA + AURA DE BRILHO */
    box-shadow:
        0 0 0 1px rgba(255,159,26,0.25),      /* contorno luminoso */
        0 0 18px rgba(255,159,26,0.45),       /* aura externa */
        0 18px 45px rgba(0,0,0,0.85),         /* sombra de profundidade */
        0 35px 90px rgba(0,0,0,0.95);         /* percepção de “outro nível” */

    text-align: center;
    font-weight: 900;
    letter-spacing: 1.3px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    user-select: none;

    border: 1px solid rgba(255,159,26,0.4);
    text-shadow: 
        0 0 6px rgba(255,159,26,0.5),
        0 0 14px rgba(255,159,26,0.35);
}


#total-carrinho {
    color: #ffb347; /* laranja metal aquecido */
    font-size: 2.1rem;
    margin-left: 12px;
    font-family: 'Courier New', Courier, monospace;

    text-shadow:
        0 0 4px rgba(255,159,26,0.6),
        0 0 12px rgba(255,159,26,0.4),
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.box_btn_limpar_enviar {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

#limparCarrinho {
    background: linear-gradient(145deg, #ff8c00, #ffb347);
    color: #1a1a1a;
    border: 1px solid rgba(255,165,0,0.6);

    padding: 12px 26px;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 14px;
    cursor: pointer;

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

    box-shadow:
        inset 0 -4px 10px rgba(0,0,0,0.4),
        0 10px 28px rgba(0,0,0,0.85),
        0 0 20px rgba(255,159,26,0.5);

    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#limparCarrinho:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

#limparCarrinho:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 4px 12px rgba(0,0,0,0.6),
        0 4px 14px rgba(0,0,0,0.6),
        0 0 10px rgba(255,159,26,0.4);
}


#enviarPedido {
    background: linear-gradient(145deg, #1f7a4d, #2ecc71);
    color: #0b1a12;
    border: 1px solid rgba(46,204,113,0.6);

    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 14px;
    cursor: pointer;

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

    box-shadow:
        inset 0 -4px 10px rgba(0,0,0,0.4),
        0 10px 28px rgba(0,0,0,0.9),
        0 0 22px rgba(46,204,113,0.6);

    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#enviarPedido:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

#enviarPedido:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 4px 12px rgba(0,0,0,0.6),
        0 4px 14px rgba(0,0,0,0.6),
        0 0 12px rgba(46,204,113,0.5);
}

#info_adicionais{
    text-align: center;
}


@media (max-width: 768px) {

    /* BOTÃO FLUTUANTE */
    #mostrarCarrinho {
        padding: 10px 16px;
        font-size: 0.95rem;
        gap: 6px;
        border-radius: 30px;
    }

    /* WRAPPER DO CARRINHO */
    #carrinhoWrapper {
        height: auto; /* 🔥 ESSENCIAL */
        min-height: 100vh;
        padding: 15px 20px;
    }

    #carrinhoWrapper.tabela-produto {
    background-color: red;
    }

    #titulo_seucarrinho {
        font-size: 1.4rem;
    }

    /* TABELA */
    .tabela-produto {
        font-size: 0.85rem;
        margin: 15px auto;
    }

    .tabela-produto td,
    .tabela-produto th {
        padding: 8px 6px;
    }

    /* TOTAL */
    #totalContainer {
        font-size: 1.2rem;
        padding: 14px 20px;
    }

    #total-carrinho {
        font-size: 1.6rem;
    }

    /* BOTÕES */
    .box_btn_limpar_enviar {
        flex-direction: column;
        gap: 16px;
        margin-top: 35px;
    }

    #limparCarrinho,
    #enviarPedido {
        width: 90%;
        max-width: 320px;
        margin: 0 auto;
        font-size: 0.95rem;
        padding: 12px 0;
    }
}

#info_adicionais{
    margin: 20px 0px;
}

@media (max-width: 768px) {

    /* 🔒 ISOLAMENTO TOTAL: só afeta o carrinho */
    #carrinhoWrapper .tabela-produto,
    #carrinhoWrapper .tabela-produto thead,
    #carrinhoWrapper .tabela-produto tbody,
    #carrinhoWrapper .tabela-produto th,
    #carrinhoWrapper .tabela-produto td,
    #carrinhoWrapper .tabela-produto tr {
        display: block;
        width: 95%;
        margin: 0px auto;
    }

    #carrinhoWrapper {
    position: fixed;   /* 🔑 ESSENCIAL */
    inset: 0;          /* top/right/bottom/left */
    z-index: 999;    /* acima de tudo */
    }

    /* ESCONDE CABEÇALHO DA TABELA */
    #carrinhoWrapper .tabela-produto thead {
        display: none;
    }

    /* CADA PRODUTO VIRA UM CARD */
    #carrinhoWrapper .tabela-produto tbody tr {
        background: #fdfdf8;
        margin: 16px auto;
        padding: 14px 16px;
        border-radius: 14px;

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

        border: 1px solid #d6d6d6;
    }

    /* CADA CAMPO DO CARD */
    #carrinhoWrapper .tabela-produto td {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 8px 0;
        border: none;
        border-bottom: 1px dashed #cfd8e6;

        font-size: 0.9rem;
        text-align: right;
    }

    /* REMOVE LINHA DO ÚLTIMO ITEM */
    #carrinhoWrapper .tabela-produto td:last-child {
        border-bottom: none;
    }

    /* LABEL AUTOMÁTICO */
    #carrinhoWrapper .tabela-produto td::before {
        content: attr(data-label); /* 🔥 A ALMA DO NEGÓCIO */
        font-weight: 700;
        color: #0b3d91;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.6px;
        text-align: left;
    }

    /* BOTÃO REMOVER CENTRALIZADO */
    #carrinhoWrapper .tabela-produto td:last-child {
        justify-content: center;
        margin-top: 10px;
    }


   /* CARD BASE */
    #carrinhoWrapper .tabela-produto tbody tr {
        background-color: #fdfdf8;
        color: #ff9f1a;
        font-weight: 400;
    }

    /* 🔥 MATA QUALQUER ZEBRA RESIDUAL */
    #carrinhoWrapper .tabela-produto tbody tr:nth-child(even),
    #carrinhoWrapper .tabela-produto tbody tr:nth-child(odd) {
        background-color: #fdfdf8;
    }

    /* 🔥 ESSENCIAL: TD NUNCA PODE TER FUNDO */
    #carrinhoWrapper .tabela-produto td {
        background-color: transparent !important;
        color: inherit;
        font-weight: 400;
    }

    /* LABEL */
    #carrinhoWrapper .tabela-produto td::before {
        font-weight: 700;
        color: #0b3d91; /* só o label */
    }

        /* 🔥 O CARRINHO VIRA UMA VIEW COM SCROLL */
    #carrinhoWrapper {
        position: fixed;
        inset: 0; /* top:0 right:0 bottom:0 left:0 */
        height: 100dvh; /* viewport real do mobile */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        padding-bottom: 140px; /* espaço pros botões */
    }
}