/* --- RESET E GERAIS --- */
:root {
    --bg-body: #0b0e14;
    --bg-card: #151a23;
    --bg-header: #1b212d;
    --bg-header2:rgb(10, 11, 22);
    --cart-header: #1b212d;
    --primary: #007bff;
    --primary-hover: #0063cc;
    --text-main: #ffffff;
    --text-secondary: #8b9bb4;
    --border-radius: 8px;
    --ep-color-a2: #0b0e14; /* Adicionado para o preview */
    --ep-color-d: #fff;
    --ep-color-d1: #fff;
    --ep-color-d2: #fff;
    --ep-color-n: #24303F;
    --ep-color-n1: #24303F;
    --ep-color-zb: linear-gradient(0deg, #03070E, #0B264B);
    --desconto-green: #059669;
    --botoes-green: #10b981;
    --desconto-red: #dc2626;
    --accent-price: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Poppins, sans-serif, arial, Verdana;
    font-weight: 500;
}
/*body { background-color: var(--bg-body); color: var(--text-main); padding: 20px; }*/

body {
    color: var(--ep-color-d);
    font-size: 14px;
    font-family: Poppins, sans-serif, arial, Verdana;
    background: var(--ep-color-a2);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* --- HEADER E GRID --- */
.header,
.warning-box,
.filters {
    margin-bottom: 20px;
}

.header {
    background: var(--bg-header2);
    padding: 15px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-summary {
    background: var(--cart-header);
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid #374151;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-summary:hover {
/*    background: var(--primary);
    color: white;
    border-color: var(--primary); */
    border-color: #007bff; /* Azul vibrante */
    color: #007bff;
    
    /* Fundo azul com 10% de opacidade */
    background-color: rgba(0, 123, 255, 0.1); 
    
    /* Brilho neon com 20% de opacidade */
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.2); 
    
    transform: translateY(-1px);
}

.warning-box {
    background: rgba(255, 255, 0, 0.05);
    border-left: 4px solid #ffd700;
    padding: 25px;
    color: #ffd700;
    list-style: none;
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--bg-card);
    border: 1px solid #2a3240;
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

#filters {
    display: flex;
    justify-content: space-between; /* Separa os grupos */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    position: relative;
}

.filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* O Container do botão da direita */
.sort-dropdown {
    position: relative;
    display: inline-block;
    margin-left: auto; /* Isso empurra para a direita se não usar space-between */
    z-index: 100;
}

/* O Botão "Filtro" */
.sort-trigger {
    background-color: #1f2937; /* Cor escura do tema */
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #374151;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-trigger:hover {
    background-color: #374151;
    border-color: var(--primary-hover); /* Verde do tema */
}

/* A Lista que aparece (escondida por padrão) */
.sort-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 10px; /* Espaço visual entre botão e menu */
    
    background-color: #1f2937;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    border: 1px solid #374151;
    border-radius: 8px;
    
    /* IMPORTANTE: Removemos o overflow:hidden para a ponte funcionar */
    overflow: visible; 
    z-index: 200;
}
/* Cria uma área invisível acima do menu para o mouse não "cair" no buraco */
.sort-content::before {
    content: "";
    position: absolute;
    top: -12px; /* Sobe para cobrir o buraco de 10px */
    left: 0;
    width: 100%;
    height: 12px; /* Altura da ponte */
    background: transparent; /* Invisível */
    display: block;
}
/* Os Links dentro da lista */
.sort-content a {
    color: #d1d5db;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    border-bottom: 1px solid #374151;
    transition: 0.2s;
}

.sort-content a.active {
    background-color: var(--primary);
    color: #fff;
}

.sort-content a:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.sort-content a:last-child {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.sort-content a:hover {
    background-color: var(--primary-hover);
    color: #fff;
}

/* MOSTRAR AO PASSAR O MOUSE (HOVER) */
.sort-dropdown:hover .sort-content {
    display: block;
}

/* --- GRID DE PRODUTOS --- */
/*.list {
    display: flex;
    flex-direction: row;

    flex-wrap: wrap; 
    gap: 15px;
    list-style: none;
    padding: 0;
}*/
.list {
    display: grid;
    /* Força 6 colunas de tamanho igual */
    flex-wrap: wrap; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* RESPONSIVIDADE (Importante: em celular 6 itens fica ilegível) */
@media (max-width: 1400px) { .list { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .list { grid-template-columns: repeat(2, 1fr); } }

/* --- CARD --- */

.list .box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    
    width: 220px;
    height: 100%;

    padding: 0;

    overflow: hidden; 
    
    background-color: var(--bg-card);
    border-radius: var(--border-radius);

    text-align: center;

    /* --- 5. Animações --- */
    transition: transform 0.2s, border-color 0.2s;
}

.box:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.list-up {
    padding: 35px 15px 15px 15px; 
    
    flex-grow: 1;
    position: relative;
}

/* NOVO: Adicione padding interno na parte de baixo */
.list-unde {
    padding: 15px; /* O espaçamento que antes estava no .box vem pra cá */
    background-color: rgba(0, 0, 0, 0.2); /* Opcional: destaca o fundo da área de compra */
}

.offtext {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    
    /* Visual */
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    font-weight: 500;
    
    /* Bordas */
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: 8px;
}

/*.offtext {
    position: relative; 
    bottom: 5.5%;
    right: 30.5%;
    
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    font-weight: 700;
    z-index: 10;
    
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: 8px;
}*/

/*.offtext {

    position: relative;

    top: 0; right: 0;

    background: var(--desconto-red);

    color: white;

    font-size: 0.75rem;

    padding: 4px 8px;

    border-bottom-left-radius: 8px;

    font-weight: bold;

    z-index: 10;

}*/

.offtext-green {
    background-color: var(--desconto-green);
}

.offtext-red {
    background-color: var(--desconto-red); /* ou var(--desconto-red) se preferir manter o nome antigo */
}

.list-item .box .list-up {
    height: 100%;
    border-radius: 10px 10px 0 0;
    background: var(--ep-color-zb);
}

.goods-icon { margin-bottom: 10px; }

/* Wrapper da imagem do card */
.image-wrapper {
    width: 100%; 
    height: 160px; 
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #0f1219;*/
    border-radius: 4px;
    cursor: pointer; /* Indica que é interativo */
}

.show-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- NOVO CSS DO PREVIEW (O SEU CSS) --- */
.img-preview {
    position: fixed; /* Isso faz ele soltar do card e seguir a tela */
    display: none;
    max-width: 200px;
    width: 200px; /* Tamanho base */
    padding: 10px;
    transition: all 0s ease-in-out 0s;
    border-radius: 4px;
    line-height: 1.45;
    background: var(--ep-color-a2);
    box-shadow: 0 0 15px 0 #000;
    border: 1px solid #2c2c2c; /* Borda verde */
    z-index: 10000001;
    pointer-events: none; /* ESSENCIAL: O mouse ignora o popup e não pisca */
}

.img-preview img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* --- RESTANTE DO CSS (Títulos, botões) --- */
.goods-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e1e6ed;
    text-align: center;
    margin-bottom: 10px;
    min-height: 40px;
}

.goods-content { text-align: center; margin-bottom: 10px; }
/*.price-num { color: var(--accent-red); font-size: 1.1rem; }*/

/* Container que segura os preços */
.price {
    display: flex;
    align-items: center;    /* Centraliza verticalmente */
    justify-content: center;/* Centraliza horizontalmente */
    gap: 10px;              /* Espaço entre o preço velho e o novo */
    min-height: 24px;       /* Garante altura mínima para não pular layout */
    padding-bottom: 4%;
}

/* O PREÇO ANTIGO */
.price-old {
    padding-top: 2px;
    color: #8b9bb4;         /* Cor cinza/azulado (apagado) */
    font-size: 0.90rem;     /* Fonte menor */
    text-decoration: line-through; /* O risco no meio */
    
    /* TRUQUE: Risco de outra cor (Vermelho escuro) */
    text-decoration-color: #bd2130; 
    text-decoration-thickness: 1px; /* Espessura do risco */
    
    font-weight: 400;
}

/* O PREÇO ATUAL (Destaque) */
.price-num {
    color: #fff;            /* Branco */
    font-size: 1.1rem;      /* Maior */
    font-weight: 600;
}

.buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    
    /* O SEGREDO: Altura fixa para a linha de ação */
    height: 36px; 
}

.encomenda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
   /* margin-top: 38px; */
    /*margin-bottom: -3px;*/
    margin: 40.5px 0px -3px 0px;
    /* O SEGREDO: Altura fixa para a linha de ação */
    height: 42px; 
}

.encomenda .goods-num {
    flex: 1;
    width: 0%;
    display: flex;
    align-items: center;
    height: 42px;
    margin-bottom: 0;
    border-radius: 6px;
    background: var(--ep-color-n1);
    border: 2px solid var(--ep-color-n);
}

.encomenda .goods-num .btn-sm {
    height: 42px;
    width: 32px;
    background: 00;
    line-height: 42px;
    color: var(--ep-color-d);
}

.encomenda .goods-num .item-num {
    flex: 1;
    height: 42px;
    line-height: 42px;
    background: 00;
    width: 100%;
    font-size: 16px;
    color: var(--ep-color-d);

}

/* 3. Os botões + e - ocupam 100% da altura */
.num-reduce, .num-add {
    width: 30px;
    height: 100%; /* Força 36px */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
    color: #fff;
    transition: background 0.2s;
}

.num-reduce:hover, .num-add:hover { background-color: #2a3240; }

.goods-num input {
    width: 100%; background: transparent; border: none; color: white;
    text-align: center; font-weight: bold; -moz-appearance: textfield;
}

.buy .goods-num {
    flex: 1;
    width: 0%;
    display: flex;
    align-items: center;
    height: 42px;
    margin-bottom: 0;
    border-radius: 6px;
    background: var(--ep-color-n1);
    border: 2px solid var(--ep-color-n);
}

.buy .goods-num .btn-sm {
    height: 42px;
    width: 32px;
    background: 00;
    line-height: 42px;
    color: var(--ep-color-d);
}

.goods-num .btn-sm {
    float: left;
    width: 36px;
    height: 38px;
    line-height: 38px;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    text-align: center;
    color: var(--ep-color-d);
    background: var(--ep-color-b);
}

.buy .goods-num .item-num {
    flex: 1;
    height: 42px;
    line-height: 42px;
    background: 00;
    width: 100%;
    font-size: 16px;
    color: var(--ep-color-d);

}

.goods-num .item-num {
    float: left;
    width: 56px;
    height: 38px;
    line-height: 38px;
    padding: 0;
    text-align: center;
    color: var(--ep-color-d);
    margin: 0 1px;
    border: none;
    border-radius: 0;
    background: var(--ep-color-b);
    font-family: Poppins;
    font-weight: 600;
}

.jq-add-cart {
    background: var(--primary);
    width: 40px;
    height: 100%; /* Força 36px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

/* 5. O botão de PEDIR ITEM ocupa 100% da altura */
.request-btn {
    width: 100%;
    height: 100%; /* Força 36px - IGUAL AO CARRINHO */
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    
    /* Tratamento de texto longo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    
    background: var(--ep-color-n1);
    color: #ccc;
    border: 1px dashed var(--desconto-green);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

/* Hover effects (pode manter como estava ou garantir estes) */
.num-reduce:hover, .num-add:hover { background-color: #2a3240; }
.jq-add-cart:hover { background: var(--primary-hover); }
.request-btn:hover { background: #5a5a5a; color: white; border-color: white; }

/* --- REMOVE AS SETAS PADRÃO DO INPUT NUMBER --- */

/* Para Chrome, Safari, Edge e Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Remove o contorno padrão ao clicar */
.jq-item-num:focus {
    outline: none;       /* Remove a linha grossa */
}

/*Inicio Carrinho*/
/* --- OVERLAY (Fundo escuro atrás do carrinho) --- */
#cart-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998; /* Fica atrás do carrinho */
    display: none; /* Escondido por padrão */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#cart-overlay.active {
    display: block;
    opacity: 1;
}

/* --- DRAWER DO CARRINHO (A caixa lateral) --- */
.jq-cart-box {
    position: fixed;
    top: 0;
    right: -450px; /* Começa escondido na direita */
    width: 400px;
    height: 100vh; /* Altura total da tela */
    background-color: #0b0e14; /* Cor de fundo Dark */
    z-index: 999;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    border-left: 1px solid #1f2937;

    -webkit-user-select: none; /* Para Chrome/Safari */
    -moz-user-select: none;    /* Para Firefox */
    -ms-user-select: none;     /* Para Edge/IE */
    user-select: none;         /* Padrão moderno */
    
    cursor: default;           /* Garante que o mouse seja sempre a setinha, não o 'I' de texto */
}

.jq-cart-box input {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
    outline: none;
}

.jq-cart-box.show {
    right: 0; /* Aparece na tela */
}

/* Cabeçalho */
.cart-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1f2937;
}

.cart-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.jq-cols {
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Lista de Produtos (Scrollável) */
#cartListContainer {
    flex-grow: 1;
    overflow-y: auto; /* Permite rolar se tiver muitos itens */
    padding: 20px;
}

#cartList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#cartList li {
    background: #151a23; /* Fundo do card do item */
    border: 1px solid #1f2937;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.items-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: #000;
}

.title-game {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.title-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.game-name {
    color: #fff;
    font-weight: bold;
    display: block;
    font-size: 0.9rem;
}

.game-Server {
    color: #8b9bb4;
    font-size: 0.8rem;
    display: block;
    text-transform: capitalize;
}

/* Controle de Quantidade (Mini) */
.goods-num-min {
    display: flex;
    align-items: center;
    background: #0b0e14;
    border-radius: 4px;
    width: fit-content;
    margin-top: 5px;
}

.goods-num-min span {
    color: #fff;
    padding: 2px 8px;
    cursor: pointer;
    user-select: none;
}

.goods-num-min input {
    width: 30px;
    background: transparent;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
    padding: 2px;
}

/* Preço e Lixeira */
.title-rem {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.game-price {
    color: #ff5722; /* Laranja do preço */
    font-weight: 600;
    font-size: 0.95rem;
}

.remove {
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s;
}
.remove:hover { color: #ff3b30; opacity: 1; }

/* Rodapé (Total e Botões) */
.cbox {
    padding: 20px;
    border-top: 1px solid #1f2937;
    background: #0b0e14;
}

.sum {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.sum .total-price-val {
    color: #d74242;
}

.view-cart.button {
    width: 100%;
    background: #007bff; /* Azul vibrante */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.view-cart.button:hover {
    background: #0056b3;
}

.view-continue {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #d74242;
    font-size: 0.9rem;
    cursor: pointer;
}

.view-continue i {
    margin-left: 5px;
}

/* --- MODAL DE SOLICITAÇÃO (OVERLAY) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fundo escuro transparente */
    z-index: 2000; /* Acima de tudo, inclusive do carrinho */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo (moderno) */
}

/* --- CAIXA DO MODAL --- */
.modal-box {
    background: #151a23; /* Mesma cor dos cards de produto */
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    border: 1px solid #1f2937;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.modal-box-seller {
    background: #151a23; /* Mesma cor dos cards de produto */
    width: 90%;
    max-width: 550px;
    border-radius: 12px;
    border: 1px solid #1f2937;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- CABEÇALHO --- */
.modal-header {
    background: #0b0e14;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1f2937;
}

.modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    color: #8b9bb4;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;
}
.modal-close:hover { color: #ff3b30; }

/* --- CORPO E INPUTS --- */
.modal-body {
    padding: 20px;
}

.modal-body p {
    color: #ccc;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    color: #8b9bb4;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.modal-input {
    width: 100%;
    padding: 10px;
    background: #0b0e14;
    border: 1px solid #2d3748;
    border-radius: 6px;
    color: #fff;
    outline: none;
    transition: 0.2s;
}

.modal-input:focus {
    border-color: var(--desconto-green); /* Fica verde ao clicar */
}

/* --- BOTÕES --- */
.modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-confirm, .btn-cancel {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 550;
    transition: 0.2s;
}

.btn-confirm {
    background: var(--desconto-green); /* O seu verde esmeralda */
    color: #fff;
}
.btn-confirm:hover { filter: brightness(1.1); }

.btn-cancel {
    background: #2d3748;
    color: #ccc;
}
.btn-cancel:hover { background: #3e4c63; }

/* --- PAGINAÇÃO --- */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 40px 0; /* Espaço acima e abaixo */
}

.page-btn {
    background: #1f2937; /* Fundo escuro */
    color: #8b9bb4;
    padding: 8px 14px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: 0.2s;
}

.page-btn:hover {
    background: #374151;
    color: #fff;
}

/* Botão Ativo (Azul) */
.page-btn.active {
    background: #007bff; /* Azul brilhante */
    color: #fff;
    font-weight: bold;
}

.page-dots {
    color: #8b9bb4;
    padding: 8px;
}

/* --- SEÇÃO DE TEXTO INFORMATIVO --- */
.info-guide-section {
    background-color: #0f1218;
    padding: 40px 20px;
    border-radius: 20px;
    color: #a0aec0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    margin-top: 15px;
    margin-bottom: 20px;

    border: 1px solid rgba(16, 185, 129, 0.15); 
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
    padding-bottom: 10px;
}

.info-container {
    max-width: 1200px;
    margin: 0 auto;
}

.info-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;

    border-left: 5px solid; 
    border-image: linear-gradient(to bottom, #00ff95, #6f00ff) 1;
    padding-left: 15px;
    line-height: 1.2;
}

.orange-text {
    color: var(--desconto-green);
    font-weight: 500;
}

/* Parágrafos e Lista */
.info-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.info-steps {
    margin: 20px 0 30px 20px; /* Margem esquerda para os números */
    color: #a0aec0;
}

.info-steps li {
    margin-bottom: 8px;
    padding-left: 10px;
}

/* Nota final (Texto um pouco mais apagado ou separado) */
.info-note {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Lista de Passos */
.steps-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: grid;
    gap: 15px;
}

.steps-list li {
    background: #0b0e14; /* Fundo mais escuro para cada passo */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #1f2937;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Bolinha com número */
.step-num {
    background: var(--desconto-green);
    color: #fff;
    font-weight: bold;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Impede que a bolinha amasse */
}

/* Container da linha de baixo */
.sub-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px; /* Espaço antes da lista de produtos */
    flex-wrap: wrap;
    animation: fadeIn 0.3s ease;
}

/* Botões do Sub-filtro */
.sub-filter-btn {
    background: #151a23; /* Mais escuro que o principal */
    border: 1px solid #2d3748;
    color: #8b9bb4;
    padding: 6px 15px; /* Menor que o botão principal */
    border-radius: 20px; /* Mais arredondado */
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sub-filter-btn:hover {
    border-color: var(--desconto-green);
    color: #fff;
}

/* Sub-filtro Ativo */
.sub-filter-btn.active {
    background: var(--desconto-green);
    color: #fff;
    border-color: var(--desconto-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Container de Carregamento Centralizado */
.cart-loading-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;       /* Ocupa toda a altura disponível */
    min-height: 300px;  /* Altura mínima para ficar bonito */
    text-align: center;
    color: #fff;        /* Garante que o texto fique branco */
    /*margin-top: 50%;*/
}

/* O Spinner (Círculo Girando) */
.checkout-loader {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 4px solid var(--botoes-green); /* Verde do seu tema */
    width: 50px;       /* Um pouco maior agora que é o destaque */
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    margin-bottom: 20px; /* Espaço entre o circulo e o texto */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ícone de Erro (X) */
.error-icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #ef4444; /* Vermelho */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
    background: rgba(239, 68, 68, 0.1); /* Fundo vermelho bem clarinho */
    animation: shake 0.5s ease-in-out; /* Tremida para indicar erro */
}

/* Animação de erro (Tremida rápida) */
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Opcional: Se quiser ajustar o alinhamento do texto de erro */
.cart-loading-container h3 {
    margin-top: 10px;
    font-size: 1.2rem;
}

/* Container que agrupa o Switch e o Carrinho no topo */
.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* O Fundo do Switch */
.user-mode-switch {
    background: var(--cart-header);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    gap: 5px;
    border: 1px solid #374151;
    transition: all 0.3s ease;
}

/* Os Botões do Switch */
.mode-btn {
    background: transparent;
    border: none;
    color: var(--ep-color-d);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif; /* Mesma fonte do site */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-btn:hover {
    color: #fff;
}

/* Estado Ativo (Verde para Comprador, Roxo/Azul para Vendedor se quiser diferenciar) */
.mode-btn.active {
    background-color: var(--botoes-green); /* Verde TayHost */
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Ajuste Responsivo para Mobile */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
    }
    
    .header-controls {
        width: 100%;
        justify-content: space-between; /* Espalha na tela */
    }

    .user-mode-switch {
        flex: 1; /* Ocupa espaço disponível */
        justify-content: center;
    }
}

/* --- ÁREA DE AUTENTICAÇÃO (Login / Perfil) --- */

/* Ajuste fino para o container do usuário */
#auth-area {
    display: flex;
    align-items: center;
}

/* 1. Botão "Entrar" (Login) */
#auth-area .mode-btn {
    background: var(--cart-header);
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid #374151;
    cursor: pointer;
}

#btn-login-trigger {
    background-color: rgba(31, 41, 55, 0.5);
    border: 1px solid #374151;
    color: #e5e7eb;
    font-weight: 600;
    transition: all 0.3s ease;
}

#btn-login-trigger:hover {
    border-color: var(--botoes-green);
    color: var(--botoes-green);
    background-color: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

.mode-btn:hover {
    background-color: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.user-mode-switch:hover {
    border: 1px solid var(--botoes-green); /* Borda cinza sutil */
    border-color: var(--botoes-green);
    box-shadow: 0 0 0px rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

/* Botão "Sair" (Logout) - Base (Igual ao Login) */
#auth-area .btn-logout {
    background-color: rgba(31, 41, 55, 0.5);
    border: 1px solid #374151;
    color: #e5e7eb;
    font-weight: 600;
    transition: all 0.3s ease;
    
    /* Mantém o alinhamento do ícone */
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botão "Sair" (Logout) - Hover com #ff5722 */
#auth-area .btn-logout:hover {
    border-color: #ff5722; /* A cor escolhida */
    color: #ff5722;
    
    /* Fundo com 10% de opacidade (RGB: 255, 87, 34) */
    background-color: rgba(255, 87, 34, 0.1);
    
    /* Glow/Sombra com 20% de opacidade */
    box-shadow: 0 0 12px rgba(255, 87, 34, 0.2);
    
    transform: translateY(-1px);
}

/* Botão "Ofertar" (Destaque Dourado/Amarelo) */
.btn-offer {
    background-color: #f59e0b; /* Amarelo Ouro */
    color: white;
    border: none;
    transition: 0.2s;
}
.btn-offer:hover {
    background-color: #d97706; /* Ouro mais escuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Badge indicando item em falta */
.badge-scarcity {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444; /* Vermelho */
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    z-index: 2;
}

/* Ofertar item */
.modal-title {
    margin: 0;
    color: #f59e0b;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-modal {
    cursor: pointer;
    font-size: 2rem;
    color: #9ca3af;
    line-height: 1;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #ffffff;
}

.modal-text {
    color: #d1d5db;
    margin-bottom: 15px;
}

.offer-item-card {
    background: #111827;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #374151;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.offer-qty {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.offer-details {
    display: flex;
    flex-direction: column;
}

.offer-name {
    font-weight: 600;
    color: #fff;
}

.offer-price {
    font-size: 0.9rem;
    color: #f59e0b;
    font-weight: 400;
}

.offer-price strong {
    font-weight: 500; /* Bem grosso (ou use 'bolder') */
    font-size: 1rem;  /* Opcional: deixa o preço levemente maior que o texto */
    color: var(--botoes-green);
}

.offer-instructions {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
}

.offer-instructions h4 {
    margin: 0 0 5px 0;
    color: #f59e0b;
    font-size: 0.9rem;
}

.offer-instructions p {
    font-size: 0.85rem;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
}

.btn-modal-cancel {
    background: transparent;
    border: 1px solid #4b5563;
    color: #d1d5db;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover {
    background: #374151;
    color: #fff;
    border-color: #6b7280;
}

.btn-modal-confirm {
    background: #f59e0b;
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-confirm:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-modal-confirm:disabled {
    background: #78350f;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}