/* Importa������o do custom_customer.css */
@import url('custom_customer.css?v1001');

:root {
    --bs-light-green: #21cb37;
    --bs-light-green-2: #3bb54a;
    --bs-light-gray: #ececec;
    --bs-light-danger: #f44336;
    --bs-light-red: #ff3741;
    --bs-full-dark: #000000;
    /* Vitrine (#divItems): faixa/borda/preços dos cartões; sobrescrita em index.blade (cor MENU da loja) */
    --store-vitrine-accent: #64748b;
}


@font-face {
     font-family: dejavusans;
     src: url('../fonts/DejaVuSans.ttf');
}

@font-face {
     font-family: dejavusans-bold;
     src: url('../fonts/DejaVuSans-Bold.ttf');
}



a {
    text-decoration: none;
}

/* --- Estilização Personalizada para Links de Banner --- */

/* Container que envolve o input e o botão */
.banner-link-wrapper {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 50px; /* Borda bem arredondada (Pill shape) */
    padding: 4px 4px 4px 15px; /* Espaçamento interno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra leve */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Efeito quando clica no input */
.banner-link-wrapper:focus-within {
    border-color: var(--bs-light-green);
    box-shadow: 0 4px 10px rgba(33, 203, 55, 0.15);
    transform: translateY(-1px);
}

/* O ícone de link */
.banner-link-icon {
    color: var(--bs-light-green);
    font-size: 1.1rem;
    margin-right: 8px;
}

/* O campo de texto (input) */
.banner-link-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    color: #555;
    font-size: 0.9rem;
    outline: none;
}

.banner-link-input::placeholder {
    color: #aaa;
    font-style: italic;
}

/* O botão de salvar */
.banner-btn-save {
    border-radius: 50px !important; /* Redondo combinando com o container */
    padding: 6px 20px !important;
    font-weight: bold;
    font-size: 0.8rem;
    background-color: var(--bs-light-green);
    border: none;
    color: white;
    transition: all 0.2s;
    white-space: nowrap;
}

.banner-btn-save:hover {
    background-color: var(--bs-light-green-2);
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.banner-btn-save:active {
    transform: scale(0.95);
}










.btn-outline-light-green {
    color: #21cb37;
    border-color: #21cb37;
}
.btn-outline-light-green:hover {
    color: #fff;
    border-color: #21cb37;
    background-color: #21cb37;
}
.btn-check:focus + .btn-outline-light-green, .btn-outline-light-green:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 203, 55, 0.5);
}
.btn-check:checked + .btn-outline-light-green, .btn-check:active + .btn-outline-light-green, .btn-outline-light-green:active, .btn-outline-light-green.active, .btn-outline-light-green.dropdown-toggle.show {
  color: #fff;
  background-color: #21cb37;
  border-color: #21cb37;
}
.btn-check:checked + .btn-outline-light-green:focus, .btn-check:active + .btn-outline-light-green:focus, .btn-outline-light-green:active:focus, .btn-outline-light-green.active:focus, .btn-outline-light-green.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 203, 55, 0.5);
}
.btn-outline-light-green:disabled, .btn-outline-light-green.disabled {
  color: #21cb37;
  background-color: transparent;
}

.btn-outline-light-red {
    color: #ff3741;
    border-color: #ff3741;
}
.btn-outline-light-red:hover {
    color: #fff;
    border-color: #ff3741;
    background-color: #ff3741;
}
.btn-check:focus + .btn-outline-light-red, .btn-outline-light-red:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 203, 55, 0.5);
}
.btn-check:checked + .btn-outline-light-red, .btn-check:active + .btn-outline-light-red, .btn-outline-light-red:active, .btn-outline-light-red.active, .btn-outline-light-red.dropdown-toggle.show {
  color: #fff;
  background-color: #ff3741;
  border-color: #ff3741;
}
.btn-check:checked + .btn-outline-light-red:focus, .btn-check:active + .btn-outline-light-red:focus, .btn-outline-light-red:active:focus, .btn-outline-light-red.active:focus, .btn-outline-light-red.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 203, 55, 0.5);
}
.btn-outline-light-red:disabled, .btn-outline-light-red.disabled {
  color: #ff3741;
  background-color: transparent;
}

.text-light-green {
    color: #21cb37;
}
.text-light-green-2 {
    color: #3bb54a;
}
.text-light-danger {
    color: #f44336;
}
.text-light-red {
    color: #ff3741;
}






/* New Colors */

.bg-light-gray {
    background-color: #ececec;
}
.bg-light-green {
    background-color: #21cb37;
}
.bg-light-green-2 {
    background-color: #3bb54a;
}
.bg-light-danger {
    background-color: #f44336;
}
.bg-light-red {
    background-color: #ff3741;
}

.btn-light-green {
    color: #fff;
    background-color: #21cb37;
}
.btn-light-green:hover {
    color: #fff;
    background-color: #1fbc34;
}

/* Barra fixa Finalizar / Concluir (carrinho e checkout) */
.store-checkout-footer {
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.store-checkout-footer .store-checkout-footer__bar {
    position: relative;
    min-height: 58px;
    padding: 0.65rem 1rem;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.14);
    border-radius: 18px 18px 0 0;
    align-items: center;
    transition: filter 0.2s ease, transform 0.12s ease;
}

/* Spinner de carregamento centralizado ao finalizar (substitui o conteúdo do botão) */
.store-checkout-footer .store-checkout-footer__bar > .spinner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: inherit;
    border-radius: inherit;
}

.store-checkout-footer .store-checkout-footer__bar > .spinner .spinner-border {
    width: 1.75rem;
    height: 1.75rem;
    border-width: 0.2em;
    vertical-align: middle;
}

.store-checkout-footer .store-checkout-footer__bar:hover {
    filter: brightness(1.02);
}

.store-checkout-footer .store-checkout-footer__bar:active {
    filter: brightness(0.97);
}

.store-checkout-footer .store-checkout-footer__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.store-checkout-footer .store-checkout-footer__icon .material-icons {
    font-size: 26px !important;
    color: #fff !important;
}

.store-checkout-footer .store-checkout-footer__title {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.store-checkout-footer .store-checkout-footer__sub {
    font-size: 0.78rem;
    opacity: 0.95;
    line-height: 1.25;
}

.store-checkout-footer .store-checkout-footer__total {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.btn-light-green-2 {
    color: #fff;
    background-color: #3bb54a;
}
.btn-light-green-2:hover {
    color: #fff;
    background-color: #34a142;
}

.btn-light-danger {
    color: #fff;
    background-color: #f44336;
}
.btn-light-danger:hover {
    color: #fff;
    background-color: #db3c30;
}

.btn-light-red {
    color: #fff;
    background-color: #ff3741;
}
.btn-light-red:hover {
    color: #fff;
    background-color: #DE3137;
}

.btn-full-dark {
    color: #fff;
    background-color: #000000;
}
.btn-full-dark:hover {
    color: #fff;
    background-color: #1a1a1a;
}

.btn-indigo {
    color: #fff;
    background-color: var(--bs-indigo);
}
.btn-indigo:hover {
    color: #fff;
    background-color: var(--bs-purple);
}
 

.btn-outline-full-dark {
    color: #000;
    border-color: #000000;
}
.btn-outline-full-dark:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-check:focus + .btn-outline-full-dark {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-full-dark {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}

.text-light-green {
    color: #21cb37;
}
.text-light-green-2 {
    color: #3bb54a;
}
.text-light-danger {
    color: #f44336;
}
.text-light-red {
    color: #ff3741;
}




/* Password Show (Eye) */
.password-eye {
    cursor: pointer;
}

.password-eye:hover {
    color: var(--bs-primary);
}






/* Addons */
.divCircle {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Input Search */
.divSearch input {
    border: none;
    border-radius: 12px 0px 0px 12px;
    padding-left: 20px;
    padding-right: 20px;
}

.divSearch span {
    border: none;
    border-radius: 0px 12px 12px 0px;
    background-color: var(--bs-gray);
    color: #fff;
    cursor: pointer;
    transition-duration: 0.3s;
}

.divSearch span:hover {
    background-color: var(--bs-dark);
}

/* Amount Input */
.divAmountInput input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.divAmountInput input:focus {
    border-color: #ced4da; 
}
.divAmountInput .spanAmountLess {
    background-color: #ee1c25;
    color: #fff;
    cursor: pointer;
}
.divAmountInput .spanAmountPlus {
    background-color: #21cb37;
    color: #fff;
    cursor: pointer;
}
.divAmountInput .spanAmountLess:hover {
    background-color: #D71B22;
}
.divAmountInput .spanAmountPlus:hover {
    background-color: #1CB530;
}

/* Infinite Line */
.infinite-line > .row {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

/* Vitrine: a regra genérica .infinite-line > .row (nowrap + scroll) não pode aplicar-se à lista de produtos.
   Modificadores --list vs --catalog: layout «Padrão» = lista em coluna; «Catálogo» = cartões estreitos em faixa horizontal. */
.infinite-line.store-catalog-product-list--list > .row.row-category-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    row-gap: 0 !important;
    column-gap: 0;
}
.infinite-line.store-catalog-product-list--list > .row.row-category-items > .layout-default:not(.list-more) {
    flex: 0 0 100%;
    max-width: 100%;
}
.infinite-line.store-catalog-product-list--list > .row.row-category-items > .layout-default.list-more,
.infinite-line.store-catalog-product-list--list > .row.row-category-items > .layout-line.list-more {
    flex: 0 0 100%;
    max-width: 100%;
    align-self: stretch;
}

/* Catálogo: mesma ideia do .infinite-line > .row > .layout-line (faixa com scroll horizontal). */
.infinite-line.store-catalog-product-list--catalog > .row.row-category-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
}
.infinite-line.store-catalog-product-list--catalog > .row.row-category-items > .layout-line:not(.list-more):not(.d-none) {
    flex: 0 0 auto !important;
    min-width: 10rem !important;
    max-width: 10rem !important;
    width: 10rem !important;
    display: inline-flex !important;
    flex-direction: column !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
    white-space: normal !important;
}
.infinite-line.store-catalog-product-list--catalog > .row.row-category-items > .layout-line.list-more {
    flex: 0 0 auto !important;
    min-width: 10rem !important;
    max-width: 10rem !important;
}
/* Preço sempre abaixo das estrelas (evita sobreposição em flex/altura variável) */
.infinite-line.store-catalog-product-list .store-catalog-price-block {
    position: relative;
    z-index: 1;
}
.infinite-line.store-catalog-product-list .store-catalog-stars {
    position: relative;
    z-index: 0;
}

/* —— Vitrine: cartões de produto (Catálogo + Padrão) —— */
#divItems .store-catalog-product-list--catalog > .row.row-category-items > .layout-line:not(.list-more):not(.d-none) {
    margin-right: 10px !important;
    padding: 0.65rem 0.55rem 0.75rem !important;
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 22px rgba(15, 23, 42, 0.07);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
#divItems .store-catalog-product-list--catalog > .row.row-category-items > .layout-line:not(.list-more):not(.d-none)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--store-vitrine-accent);
    opacity: 0.95;
    border-radius: 14px 14px 0 0;
}
#divItems .store-catalog-product-list--catalog .layout-line .row.m-0 > .col-12.p-0:has(img) {
    background: linear-gradient(180deg, rgba(243, 244, 246, 0.95) 0%, rgba(229, 231, 235, 0.5) 100%);
    border-radius: 11px;
    padding: 0.5rem 0.35rem 0.45rem !important;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(15, 23, 42, 0.05);
}
#divItems .store-catalog-product-list--catalog .layout-line .row.m-0 > .col-12.p-0:has(img) img {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
/* Só o nome do produto em cinza-escuro — não usar `strong` genérico (sobrescrevia .text-light-green dos preços). */
#divItems .store-catalog-product-list--catalog .layout-line .mt-1.text-center strong {
    letter-spacing: 0.03em;
    font-weight: 700 !important;
    color: #0f172a;
}
#divItems .store-catalog-product-list--catalog .layout-line .text-light-green,
#divItems .store-catalog-product-list--catalog .layout-line .text-light-green b,
#divItems .store-catalog-product-list--catalog .layout-line b.text-light-green,
#divItems .store-catalog-product-list--catalog .layout-line .pizza-matrix-card-price {
    color: var(--bs-light-green) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

#divItems .store-catalog-product-list--list > .row.row-category-items > .layout-default:not(.list-more) {
    padding: 0.65rem 0.75rem !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 14px !important;
    border-left: 3px solid var(--store-vitrine-accent) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    overflow: hidden;
}
#divItems .store-catalog-product-list--list > .row.row-category-items > .layout-default:not(.list-more) .col-auto .position-relative {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}
/* Nome do produto (bloco superior); preços ficam em .store-catalog-price-block com .text-light-green */
#divItems .store-catalog-product-list--list > .row.row-category-items > .layout-default:not(.list-more) > .col > .d-flex.flex-column > .px-3.w-100.flex-shrink-0:first-child strong {
    letter-spacing: 0.02em;
    color: #0f172a;
}
#divItems .store-catalog-product-list--list .layout-default .store-catalog-price-block .text-light-green,
#divItems .store-catalog-product-list--list .layout-default .store-catalog-price-block .text-light-green b,
#divItems .store-catalog-product-list--list .layout-default .store-catalog-price-block b.text-light-green,
#divItems .store-catalog-product-list--list .layout-default .store-catalog-price-block .pizza-matrix-card-price {
    color: var(--bs-light-green) !important;
}

@media (hover: hover) {
    #divItems .store-catalog-product-list--catalog > .row.row-category-items > .layout-line:not(.list-more):not(.d-none):hover,
    #divItems .store-catalog-product-list--list > .row.row-category-items > .layout-default:not(.list-more):hover {
        transform: translateY(-3px);
        box-shadow:
            0 4px 12px rgba(15, 23, 42, 0.08),
            0 14px 32px rgba(15, 23, 42, 0.1);
    }
}

/* Bloco de cada categoria na loja: espaço entre secções parecido com/sem «Ver mais» */
.store-category-section {
    margin-bottom: 1.75rem;
}
#divItems > .store-category-section:last-child {
    margin-bottom: 0.5rem;
}

/* Filtro por categoria: o inner .collapse fica sem .show, mas o wrapper ainda tinha margin/padding
   no fluxo (ver também .store-category-section--filtered-out em custom.js). */
#divItems .store-category-section:has(> .collapse.collapse-item:not(.show)) {
    display: none !important;
}
#divItems .store-category-section.store-category-section--filtered-out {
    display: none !important;
}

/* Espaço entre o último produto de uma categoria e o título da seguinte (mobile inclusive;
   margens adjacentes colapsam; padding-top não colapsa com a secção anterior). */
#divItems > .store-category-section:not(:first-child) {
    padding-top: 1.1rem;
}
@media (min-width: 768px) {
    #divItems > .store-category-section:not(:first-child) {
        padding-top: 1.25rem;
    }
}
.store-category-heading strong {
    display: inline-block;
}
/* Respiro entre o título da categoria (e abas de tamanho) e os cartões da lista */
#divItems .store-category-heading {
    margin-bottom: 0.65rem !important;
}
#divItems .store-category-products-shell {
    margin-top: 0.2rem;
}

/* Fallback de espaçamento para navegadores/clientes sem suporte confiável a flex-gap */
#divItems .layout-default > .col.d-flex.flex-column {
    gap: 0 !important;
}

#divItems .layout-default > .col.d-flex.flex-column > .store-catalog-price-block {
    margin-top: 0.65rem;
}

/* Abas de tamanho (pizza catálogo) — grupo tipo “segmented control”, alinhado à vitrine */
.pizza-category-size-tabs--vitrine {
    max-width: 100%;
}
.pizza-category-size-tabs--vitrine .pizza-category-size-tabs__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 5px;
    background: linear-gradient(180deg, #f8f9fa 0%, #eceff3 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill {
    position: relative;
    border-radius: 10px !important;
    margin: 0 3px;
    min-height: 2.35rem;
    padding: 0.4rem 1.05rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill.btn-outline-secondary {
    background: transparent !important;
    border-color: transparent !important;
    color: #495057 !important;
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: #212529 !important;
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
    outline: none;
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill.btn-primary {
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(13, 110, 253, 0.32);
    transform: none;
}
.pizza-category-size-tabs--vitrine .pizza-cat-size-pill.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(13, 110, 253, 0.45);
    outline: none;
}

.store-category-products-shell {
    margin-top: 0;
}

/* Bootstrap .collapse.show usa display:block; manter coluna + gap entre título/abas/lista */
#divItems .collapse.collapse-item.show.d-flex.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

/* .d-flex nos painéis da vitrine ganha de .collapse:not(.show) (display:none sem !important).
   Reforçar o estado fechado; :not(.collapsing) evita display:none no meio do frame da animação. */
#divItems .collapse.collapse-item:not(.show):not(.collapsing) {
    display: none !important;
}

/* Filtro por categoria: sem animação de altura do collapse (vários painéis a fechar = “tranco”/reflow). */
#divItems .collapse.collapse-item,
#divItems .collapse.collapse-item.collapsing {
    transition: none !important;
}

.infinite-line > .row > .il-square {
    display: inline-block;
    /*width: 115px;*/
    width: auto;
    height: 90px;
    border-radius: 10px;
    background-color: var(--bs-white);
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    background-color: #fff;
    cursor: pointer;
    margin-right: 5px;
}
.infinite-line > .row > .il-square > span > i {
    color: #000000;
}
.infinite-line > .row > .il-square.active > span > i {
    color: #fff;
}
.infinite-line > .row > .il-square > b {
    color: #000000;
}
.infinite-line > .row > .il-square.active > b {
    color: #fff;
}
.infinite-line > .row > .il-square.active {
    background-color: #000000;
    color: #fff;
    
}
.infinite-line > .row > .il-square span {
    /*font-size: 70px !important;*/
    font:0.8em sans-serif !important;
}

.infinite-line > .row > .il-circle {
    display: inline-block;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    background-color: var(--bs-white);
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    margin-right: 5px;
    box-shadow: 1px 1px 8px #00000050;
}
.infinite-line > .row > .il-circle.active {
    background-color: #000;
    color: #fff;
    
}
.infinite-line > .row > .il-circle span {
    /*font-size: 70px !important;*/
    font:0.8em sans-serif !important;
}


.infinite-line > .row > .il-line {
    width: auto;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    color: #000;
    /*background-color: #fff;*/
    cursor: pointer;
}
.infinite-line > .row > .il-line:hover {
    border-bottom: 2px solid #ff0000;
}
.infinite-line > .row > .il-line.active {
    border-bottom: 2px solid #ff0000;
}
.infinite-line > .row > .il-line span {
    /*font-size: 70px !important;*/
    font:0.8em sans-serif !important;
}



/* FONT AWESOME GENERIC BEAT */ 
.fa-beat {
    animation:fa-beat 10s ease infinite;
}
@keyframes fa-beat {
    0% {
        transform:scale(1);
    }
    5% {
        transform:scale(1.25);
    }
    20% {
        transform:scale(1);
    }
    30% {
        transform:scale(1);
    }
    35% {
        transform:scale(1.25);
    }
    50% {
        transform:scale(1);
    }
    55% {
        transform:scale(1.25);
    }
    70% {
        transform:scale(1);
    }
}



/* Square Person */
#divPersonHeader {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    /*margin-left: 25%;*/
    z-index: 998;
}

/* Btn Close Circle Modal */
.divBtnCloseModal {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    z-index: 998;
    top: 0px;
    text-align: end;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding: 10px;
}

.divBtnCloseModal div {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Barra de ações do modal de produto (fluxo normal: não sobrepõe título nem foto) */
.modal-item-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f4f5f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.modal-item-toolbar--rounded-top {
    border-radius: 20px 20px 0 0;
}
.modal-item-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #495057;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-item-btn-share:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #212529;
}
.modal-item-btn-share:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
}
.modal-item-toolbar__icon {
    font-size: 20px !important;
    color: #6c757d;
}
.modal-item-btn-share:hover .modal-item-toolbar__icon {
    color: #495057;
}
.modal-item-toolbar__share-label {
    display: none;
}
@media (min-width: 576px) {
    .modal-item-toolbar__share-label {
        display: inline;
    }
}
.modal-item-btn-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-item-btn-close:hover {
    background: #f8f9fa;
    color: #343a40;
    border-color: rgba(0, 0, 0, 0.12);
}
.modal-item-btn-close .material-icons {
    font-size: 20px !important;
}
.modal-item-btn-close:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.45);
    outline-offset: 2px;
}

/* Modal de produto: rolagem interna + texto que não “vaza” nas bordas */
.modal-dialog-scrollable.modal-md {
    max-height: calc(100vh - 1.5rem);
}
.modal-dialog-scrollable .modal-content {
    max-height: min(92vh, 920px);
    min-height: 0;
}
.modal-dialog-scrollable .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
#content .modal-dialog-scrollable .modal-body .container,
.modal.fade .modal-dialog-scrollable .modal-body .container {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* iOS + layout catálogo: impedir que o gesto pegue no cardápio por trás do modal */
body.aki-ios-modal-touch-guard #divItems,
body.aki-ios-modal-touch-guard .store-category-section,
body.aki-ios-modal-touch-guard .infinite-line.store-catalog-product-list--catalog > .row.row-category-items {
    pointer-events: none !important;
}
body.aki-ios-modal-touch-guard .modal.show,
body.aki-ios-modal-touch-guard .modal.show .modal-dialog,
body.aki-ios-modal-touch-guard .modal.show .modal-content,
body.aki-ios-modal-touch-guard .modal.show .modal-body {
    pointer-events: auto !important;
}

/* iOS hard lock helper: preservar rolagem apenas no conteúdo do modal */
body.aki-ios-modal-touch-guard {
    overflow: hidden !important;
}
body.aki-ios-modal-touch-guard .modal.show .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100dvh - 130px);
}

.divBtnClose div {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}




/* fadeOut effect */
.addElement {
    opacity: 1;
    transition: opacity 1.5s;
}

.removeElement {
    opacity: 0;
    transition: opacity 1.5s;
}

.removeElementPagination {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
}

.addElementPagination {
    opacity: 1;
    transition: opacity 0.5s;
    z-index: 2;
}


.accordion-button:not(.collapsed) {
    background-color: var(--bs-dark);
    color: #fff;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

/* Select Div Effect Hover and Active */
.divSelectOption {
    background-color: var(--bs-white);
    color: var(--bs-dark);
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s;
}

.divSelectOption.active {
    background-color: var(--bs-light-green);
    color: var(--bs-white);
}

.divSelectOption:hover:not(.active) {
    background-color: var(--bs-dark);
    color: var(--bs-white);
}



.expand-offcanvas {
    height: 75vh;
    transition: 0.5s;
}
.decrease-offcanvas {
    height: 30vh;
    transition: 0.5s;
}


/* Botão de Switch */
.form-switch .form-check-input-custom:checked {
    background-color: var(--bs-light-green);
    border-color: var(--bs-light-green);
}

.form-switch .form-check-input-custom:not(:checked):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    border-color: rgba(0, 0, 0, 0.25);
}



.divReportMenu {
    background-color: #000000;
    /*-moz-box-shadow:    4px 3px 10px rgba(0, 0, 0, 0.90);
    -webkit-box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.90);
    box-shadow:         4px 3px 10px rgba(0, 0, 0, 0.90);*/
    border-radius: 15px;
}



.line-fade { 
    border : 0;
    height: 1px; 
    background-color: inherit;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
}




.rating-star-active {
    color: #ff0707;
}

.rating-star-inactive {
    color: #d1d1d1;
}

.rating-star-active:hover, .rating-star-inactive:hover {
    color: #e10000;
}

.div-comment {
    cursor: pointer;
    background-color: #00000073;
    color: var(--bs-light);
}

.div-comment:hover {
    background-color: #000000;
    color: var(--bs-white);
}







.input-transparent, .input-transparent:focus {
    color: var(--bs-light);
    background: transparent;
    outline: 0;
    border-width: 0 0 1px;
    border-color: var(--bs-light);
}

.input-transparent::placeholder {
    color: var(--bs-light);;
}

.input-transparent-dark, .input-transparent-dark:focus {
    color: var(--bs-secondary);
    background: transparent;
    outline: 0;
    border-width: 0 0 1px;
    border-color: var(--bs-secondary);
}

.input-transparent-dark::placeholder {
    color: var(--bs-secondary);;
}

.password-eye-input-transparent {
    cursor: pointer;
}

.password-eye-input-transparent:hover {
    color: var(--bs-indigo);
}

.btn-white-to-indigo {
    color: var(--bs-orange);
    background-color: var(--bs-light);
}

.btn-white-to-indigo:hover {
    color: var(--bs-light);
    background-color: var(--bs-indigo);
}

.btn-orange-to-indigo {
    color: var(--bs-light);
    background-color: #fa8e39;
}

.btn-orange-to-indigo:hover {
    color: var(--bs-light);
    background-color: var(--bs-indigo);
}

.btn-white-to-indigo {
    color: var(--bs-dark);
    background-color: #ffffff;
}

.btn-white-to-indigo:hover {
    color: var(--bs-light);
    background-color: var(--bs-indigo);
}

#terms:checked {
    background-color: var(--bs-indigo);
}

.bg-orange-hover:hover {
    background-color: var(--bs-white);
}









.blob-light-green {
    background-color: var(--bs-light-green);
    box-shadow: 0 0 0 0 rgba(33, 203, 55, 1);
	transform: scale(1);
	animation: pulse-light-green 2s infinite;
}

@keyframes pulse-light-green {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(33, 203, 55, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(33, 203, 55, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(33, 203, 55, 0);
	}
}

.blob-light-red {
    background-color: var(--bs-light-red);
    box-shadow: 0 0 0 0 rgba(255, 55, 65, 1);
	transform: scale(1);
	animation: pulse-light-red 2s infinite;
}

@keyframes pulse-light-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 55, 65, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 55, 65, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 55, 65, 0);
	}
}

.blob-light-blue {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 1);
	transform: scale(1);
	animation: pulse-light-blue 2s infinite;
}

@keyframes pulse-light-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
	}
}








/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: yellow;
  /*width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  background-color: red;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}













.icon-facebook {
    color: var(--bs-primary);
    cursor: pointer;
}

.icon-facebook:hover {
    color: #0b5ed7;
}

.icon-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-linear-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    cursor: pointer;
}

.icon-instagram:hover {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #285AEB 5%, #d6249f 45%, #fd5949 60%, #fdf497 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #285AEB 5%, #d6249f 45%, #fd5949 60%, #fdf497 90%);
    background: -webkit-linear-gradient(circle at 30% 107%, #fdf497 0%, #285AEB 5%, #d6249f 45%, #fd5949 60%, #fdf497 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

.icon-youtube {
    color: var(--bs-danger);
    cursor: pointer;
}

.icon-youtube:hover {
    color: #ef2e40;
}

/* ✅ Fix para o spinner de loading nos modais */
.modal-footer {
    position: relative;
    overflow: visible !important;
}

.modal-footer .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Se o botão tem spinner inline */
.btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Garantir que o botão não quebre durante o loading */
.btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading .spinner-border {
    display: inline-block;
}











/* Não aplicar à vitrine .store-catalog-product-list: regras próprias --catalog / --list acima. */
.infinite-line:not(.store-catalog-product-list) > .row > .layout-line {
    display: inline-block;
    /*min-width: 16.5rem;
    max-width: 16.5rem;*/
    min-width: 10rem;
    max-width: 10rem;
    /*height: 17rem;*/
    border-radius: 15px;
    background-color: var(--bs-white);
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
    color: #000;
    cursor: pointer;
    margin-right: 5px;
}

















.icon-alert {
    color: var(--bs-body-color);
	transform: scale(1);
	animation: pulse-icon-alert 2s infinite;
}

@keyframes pulse-icon-alert {
	0% {
		transform: scale(0.95);
		color: var(--bs-danger);
	}

	70% {
		transform: scale(1);
		color: var(--bs-body-color);
	}

	100% {
		transform: scale(0.95);
		color: var(--bs-danger);
	}
}