@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

body {
    font-family: 'Tilt Neon', sans-serif;
    line-height: 1.6;
    background-color: #141414;
    margin: 0;
}

::-webkit-scrollbar { width: 8px; height: 3px }
::-webkit-scrollbar-track { background-color: #646464 }
::-webkit-scrollbar-track-piece { background-color: #333333 }
::-webkit-scrollbar-thumb { height: 50px; background-color: #4c4c4c }
::-webkit-scrollbar-corner { background-color: #646464 }
::-webkit-resizer { background-color: #666 }

input:-webkit-autofill, input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s;
}

#background {
    background-image: url(https://cdn.discordapp.com/attachments/1130562048686837931/1380390853960401006/LOGO_Downtown_RP_2000x2000_Extra_-_Apenas_Fundo_-_by_Design_Ideal.png?ex=6843b4aa&is=6842632a&hm=606ee2eb1427b99f353c323fd5a3c5af574a1b80f8713e122050a85da3ca00b1&) !important;
    background-size: cover;
    opacity: 0.3;
    height: 100%;
}

/* //////////////////////////////////   MENU   /////////////////////////////////////*/

.checkout-wrapper {
    background-image: url(https://images4.alphacoders.com/109/1097661.png) !important;
    background-size: cover;
    height: 100%;
}

.p-8 {
    background-color: #00000047 !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
    min-height: 74px;
}

.bm-menu {
    background-color: #000000b3 !important;
    transition: all 0.2s !important;
}

.ml-auto {
    margin-top: 5px;
}

.category-link {
    transition: 0.2s ease-in-out;
    font-family: 'Tilt Neon', sans-serif !important;
}

.category-menu {
    display: none;
    transition: 0.2s ease-in-out;
    font-family: 'Tilt Neon', sans-serif !important;
}

.category-menu:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}
/* //////////////////////////////////   OUTROS   /////////////////////////////////////*/

.block {
    visibility: hidden;
}

.block:after {
    text-align: start;
    visibility: visible;
    float: left;
    content: "Quero enviar um presente";
}

.resposta {
    font-size: 16px;
    color: #96999d;
    font-weight: 500;
    text-shadow: 1px 1px 2px black;
    padding-left: 15px;
}


/* //////////////////////////////////   PRODUTOS   /////////////////////////////////////*/

.text-xl {
    text-align: center !important;
    color: #629262 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 29px !important;
}

.ml-4.flex-1.font-poppins {
    padding-top: 20px;
    max-height: 100px;
}

.text-gray-400:after {
    visibility: visible;
}

button.text-white.font-normal {
    visibility: hidden;
}

.text-gray-400.text-base {
    visibility: hidden;
}

button.text-white.font-normal::before {
    content: "?";
    width: 50px;
    height: 42px;
    position: absolute;
    font-size: 21px;
    bottom: 0.2rem;
    left: 0.5em;
    visibility: visible;
    padding: 8px 11px 3px 14px;
    background-color: #C3C3C330 !important;
    font-weight: 500 !important;
    color: #d3b407 !important;
    transition: all 0.2s;
    margin-bottom: 5px;
}

.package {
    position: relative;
    padding-bottom: 48px;
}

button.w-full.btn.btn-primary {
    position: absolute;
    left: 64px;
    bottom: 0.2rem;
    width: calc(100% - 73px);
    color: transparent;
    border-radius: 0px;
    border: none;
    background-color: #C3C3C330 !important;
    padding: 8px 0px 8px 0px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 576 576"><path fill="%23C3C3C3" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 -1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>');
    background-repeat: no-repeat;
    background-position: center 0.9em;
    transition: all 0.2s;
    margin-bottom: 5px;
}

button.w-full.btn.btn-primary:hover {
    color: #c3c3c3;
    background-image: none;
}

div.package:has(button.out-of-stock) .text-gray-400.text-base {
    display: none !important;
}

.package {
    --tw-scale-x: .95 !important;
    --tw-scale-y: .95 !important;
    background-color: #121212a3 !important;
    border: 6px solid #2222227d;
}

h1.text-2xl.my-2.text-white {
    align-content: center !important;
    text-align: center;
    font-size: 18px;
    color: #c7c7c7;
    text-shadow: 1px 1px 2px black;
    font-family: 'Tilt Neon', sans-serif;
}

.modal {
    background-color: #232323 !important;
    overflow-y: auto; /* Sempre mostra a barra de rolagem vertical */
    overflow-x: hidden; /* Remove rolagem horizontal */
    width: 80%; /* Define a largura do modal */
    max-width: 600px; /* Limita a largura máxima */
    height: auto; /* Altura automática */
    max-height: 90vh; /* Altura máxima baseada na viewport */
    padding: 20px; /* Espaçamento interno */
    position: fixed; /* Mantém o modal fixo na tela */
    top: 10%; /* Define um espaço fixo no topo */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta horizontalmente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
    border-radius: 10px; /* Bordas arredondadas */
    box-sizing: border-box; /* Garante cálculos precisos */
    display: flex; /* Configura o conteúdo como flexível */
    flex-direction: column; /* Alinha elementos verticalmente */
    justify-content: flex-start; /* Garante que o topo do modal seja visível */
}




.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity));
    border: hidden;
    visibility: hidden;
}

button.flex-1.out-of-stock.cursor-not-allowed.p-2.text-red-600.text-sm.w-full.border-2.border-red-600\/75.uppercase.font-bold.grid.place-items-center::before {
    content: "Sem Estoque";
    font-size: 15px;
    color: #740303;
    text-transform: math-auto;
    visibility: visible;
}

/* //////////////////////////////////   ACCORDION   /////////////////////////////////////*/

.block {
    visibility: hidden;
}

.block:after {
    text-align: start;
    visibility: visible;
    float: left;
    content: "Quero enviar um presente";
}

.flex {
    display: flex;
    justify-content: center;
}

.aumentar {
    padding-bottom: 50px
}

.esquerda {
    height: 665px;
    width: 877px;
    background-color: transparent;
}

.iconecard {
    position: absolute;
    transform: translateX(-100%) translateY(80%);
    fill: #999999;
}

.iconecardesp {
    position: absolute;
    transform: translateX(-110%) translateY(80%);
    fill: #999999;
}

.titulo {
    font-size: 18px;
    color: #c7c7c7;
    text-shadow: 1px 1px 2px black;
    font-family: 'Tilt Neon', sans-serif;
    padding-left: 15px;
}

.resposta {
    font-size: 16px;
    color: #96999d;
    font-weight: 500;
    text-shadow: 1px 1px 2px black;
    padding-left: 15px;
}

.redemption {
    height: 673px;
    width: 25%;
    border-radius: 0px 15px 15px 0px;
    background-image: url(https://images.alphacoders.com/561/561749.jpg);
    background-position: center;
    background-size: cover;
}

.bm-menu {
    background-color: #000000b3 !important;
    transition: all 0.2s !important;
}

.ml-auto {
    margin-top: 5px;
}

.category-link {
    transition: 0.2s ease-in-out;
    font-family: 'Tilt Neon', sans-serif !important;
}

.category-menu {
    display: none;
    transition: 0.2s ease-in-out;
    font-family: 'Tilt Neon', sans-serif !important;
}

.category-menu:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

.cartao {
    width: 100%;
    padding: 28px 39px 28px 45px;
    background-color: #232323e1;
    position: relative;
    font-size: 22px;
    border: 1px solid rgba(0,0,0,.1);
    box-sizing: border-box;
    box-shadow: 2px 2px 20px rgba(0,0,0,.2);
    text-align: start;
}

.cartaoup {
    border-radius: 15px 0px 0px 0px;
}

.cartaodown {
    border-radius: 0px 0px 0px 15px;
    overflow: visible; /* Permite que o conteúdo ultrapasse o limite do pai */
}

.input-theme {
    background-color: #232323 !important;
    color: #c3c3c3 !important;
    padding: 14px 0px 14px 16px;
    font-size: 17px;
}

.input-theme::placeholder {
    color: #c3c3c3 !important;
}

.input-theme:focus {
    outline: none;
}

.input-theme:active {
    background-color: #232323 !important;
}

.justify-between {
    gap: 10px;
}

.bg-blue-600 {
    position: relative;
    content: "";
    visibility: hidden;
    padding-top: 5px;
}

.bg-blue-600:after {
    visibility: visible;
    border-radius: 5px;
    transition: all 0.2s !important;
    font-size: 18px !important;
    padding-bottom: 3px;
    content: "Pronto";
    background-color: #d7d7d71c !important;
    color: #c3c3c3;
}

.bg-blue-600:hover {
    color: #fff;
}

.\!border-green-500 {
    border-color: #8e8e8e !important;
    border-width: 2px;
}

.lg\:max-w-lg {
    background-color: rgb(0,0,0,0.8);
    padding: 20px;
    border-radius: 10px;
}

@media only screen and (max-width: 1024px) {
    #background {
        background-image: url(https://images.alphacoders.com/561/561749.jpg) !important;
    }
    .aumentar {
        padding-bottom: 0px;
    }
    .redemption {
        display: none;
    }
    .esquerda {
        height: auto;
        margin-top: -50px;
    }
    .cartaoup {
        border-radius: 0px;
    }
    .cartaodown {
        border-radius: 0px;
    }
    .titulo {
        font-size: 16px;
        padding-left: 20px;
    }
    .resposta {
        font-size: 14px;
        padding-left: 20px;
    }
    .p-8 {
        margin-bottom: 0px !important;
        padding-bottom: 15px !important;
    }
    .category-link {
        display: none;
    }
    .category-menu {
        display: flex;
        position: absolute;
        left: 0;
        margin-bottom: 57px;
    }
    .text-4xl {
        margin-top: 7px;
        align-self: center !important;
    }
}

@media only screen and (max-width: 768px) {
    .lg:flex-row {
        align-items: center !important;
    }
    .packages-list {
        padding: 2.5rem 0.25rem !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        grid-column-gap: 0px !important;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}