@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

#alturaMaxima {
    max-height: 80vh;
}

a {
    text-decoration: none
}
html{
    height: 100%
}
#content {
    height: 93dvh;
}

#logo {
    width: 280px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(/img/logoCooki.png);
}

#descricao {
    text-align: center !important;
    color: grey;
    font-size: 21px;
}


@keyframes shakeVertical {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-8px);
    }

    30% {
        transform: translateY(8px);
    }

    50% {
        transform: translateY(-5px);
    }

    70% {
        transform: translateY(5px);
    }

    90% {
        transform: translateY(-3px);
    }
}

.shake-vertical {
    animation: shakeVertical 0.6s cubic-bezier(.36,.07,.19,.97) both;
    transform-origin: center;
    position: relative !important; /* Essencial para grids */
}

/*------- SKELETON PARA BLAZOR -------*/
@keyframes skeleton-blazor-shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.skeleton-blazor {
    background: linear-gradient( 90deg, #e2e5e7 0%, #f1f3f5 50%, #e2e5e7 100% );
    background-size: 200% 100%;
    animation: skeleton-blazor-shimmer 1.5s infinite;
    border-radius: 4px;
    min-height: 1rem;
}

.skeleton-blazor-line {
    height: 16px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-blazor-title {
    height: 24px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-blazor-block {
    height: 40px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-blazor-button {
    width: 120px;
    height: 40px;
    border-radius: 4px;
}
/*------------------------------------*/


.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNicgZmlsbD0nIzIxMjUyOSc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMS42NDYgNC42NDZhLjUuNSAwIDAgMSAuNzA4IDBMOCAxMC4yOTNsNS42NDYtNS42NDdhLjUuNSAwIDAgMSAuNzA4LjcwOGwtNiA2YS41LjUgMCAwIDEtLjcwOCAwbC02LTZhLjUuNSAwIDAgMSAwLS43MDh6Jy8+PC9zdmc+");
    transform: rotate(-180deg);
}

/* Remove a borda e a sombra padrão dos itens do acordeão */
.accordion-item {
    border: none !important;
    box-shadow: none !important;
}

/* Remove a borda e a sombra do botão de cabeçalho */
.accordion-button {
    border: none !important;
    box-shadow: none !important;
}

/* Garante que o item não tenha borda superior quando está "ativo" ou focado */
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*.tamanhoMax {
    max-width: 375px;
}*/
#titulo {
    font-size: 1.0em;
    font-weight: 600;
}

#subtitulo {
    font-size: 0.7em;
}

#valor {
    font-size: 0.8em;
}

.badge {
    font-size: 0.6em;
}

#ingrediente {
    font-size: 0.9em;
}

#ImagemProdutoIngrediente {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
}

#span-valor {
    font-size: 0.6em;
}

#iconIngrediente {
    color: white;
}

.page {
    height: 100dvh; /* Ocupa 100% da altura da janela de visualização */
    overflow-y: auto;
}

input {
    cursor: pointer
}

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

/*----------------  Fontes ------------------*/

.display-large-regular {
    font-size: 57px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.display-medium-regular {
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
}

.display-small-regular {
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
}

.headline-large-regular {
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
}

.headline-medium-regular {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.headline-small-regular {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.title-large-regular {
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.title-large2-regular {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.title-medium-medium {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.title-small-medium {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.label-large-medium {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.label-medium-medium {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.label-small-medium {
    font-size: 11px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 16px;
}

.body-title-regular {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.body-large-regular {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.body-medium-regular {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.body-small-regular {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.body-small-medium {
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.body-medium-strong {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.headline-large-bolder {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.body-large-bolder {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.label-small-strong {
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.body-small-strong {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.headline-large-strong {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.body-large-strong {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.title-large2-strong {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

/* End Fontes */

/* ---------- cor de texto -----------*/
.text-black-900 {
    color: #000;
}

.text-gray-900, .text-gray-900:hover {
    color: var(--Gray-900, #212529);
}

.text-gray-800, .text-gray-800:hover, .text-gray-800:focus {
    color: var(--Gray-800, #343A40) !important;
}

.text-gray-700, .text-gray-700:hover, text-gray-700:focus {
    color: var(--Gray-700, #495057);
}

.text-gray-600, .text-gray-600:hover {
    color: var(--Gray-600, #6C757D);
}

.text-gray-500, .text-gray-500:hover {
    color: var(--Gray-500, #ADB5BD);
}

.text-gray-400, .text-gray-400:hover {
    color: var(--Gray-400, #CED4DA) !important;
}

.text-gray {
    color: #717182;
}

.text-purple-600 {
    color: var(--main-600, #5E35B1);
}

.text-purple-500 {
    color: var(--Purple-500, #6F42C1);
}

.text-neutral-900 {
    color: var(--neutral-900, #1F2021);
}

.text-neutral-800 {
    color: var(--neutral-800, #3F4042);
}

.text-neutral-600 {
    color: var(--neutral-600, #6F7175);
}

.text-neutral-500 {
    color: var(--neutral-500, #96999E);
}

.text-green-500 {
    color: var(--green-500, #198754);
}

.text-yellow-700 {
    color: var(--Yellow-700, #997404);
}

.text-yellow-800 {
    color: var(--Yellow-800, #664D03);
}

/* End cor de texto */

/* background */

.background-gray-100 {
    background: var(--Gray-100, #F8F9FA);
}

.background-gray-white {
    background: var(--Gray-White, #FFF);
}

/* end background */
/* ---------------- botão ------------------- */
.btn-gray-white {
    border-radius: 100px;
    border: 1px solid var(--Gray-300, #DEE2E6);
    background: var(--Gray-White, #FFF);
    padding: 8px 12px;
}

.btn-padrao {
    border-radius: 40px;
    background: var(--main-600, #5E35B1);
    padding: 10px 6px 10px 8px;
    color: var(--Gray-White, #FFF);
    border: none;
}

.btn-padrao-border {
    border-radius: 40px;
    border: 1px solid var(--main-700, #512DA8);
    background: var(--Gray-White, #FFF);
    padding: 8px 6px 8px 8px;
    color: var(--main-600, #5E35B1);
}

.btn-gray-400 {
    border-radius: 40px;
    border: 1px solid var(--Gray-400, #CED4DA);
    background: var(--Gray-White, #FFF);
    padding: 8px 19px;
}
/* End botão */
/* ------------------- gap ----------------------- */
.gap-4px {
    gap: 4px !important;
}

.gap-6 {
    gap: 6px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

/* End gap */

.no-quebra {
    white-space: nowrap;
}

.h-100 {
    height: 100% !important;
}


.modal.fade {
    transition-duration: 0.1s !important; /* Mais rápido */
}
.modal.show {
    opacity: 1;
}
.modal.fade .modal-dialog {
    transform: translateX(100%);
}

.modal.fade.show .modal-dialog {
    transform: translateX(0);
}