/* ==========================================================================
   1. VARIÁVEIS E CONFIGURAÇÕES GERAIS
   ========================================================================== */
:root {
    --bg-dark: #0a0a0a;
    --bg-card: #141414;
    /* Cores Pastelaria Top 10 */
    --top10-red: #E60000;      /* Vermelho vibrante da logo */
    --top10-yellow: #FFD200;   /* Amarelo vibrante da logo */
    --top10-yellow-light: #FFF176;   /* Amarelo claro da logo */
    --top10-gradient: linear-gradient(135deg, #FFD200 0%, #ffeb3b 100%);
    
    --text-white: #ffffff;
    --text-muted: #a0a0a0;
    --border-color: #2a2a2a;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Segoe UI', Roboto, sans-serif;
    margin: 0;
}

/* ==========================================================================
   2. HEADER E CARRINHO (FIXO NO TOPO)
   ========================================================================== */
header {
    background-color: #000;
    border-bottom: 2px solid var(--top10-red); /* Linha vermelha no topo */
    position: sticky;
    top: 0;
    z-index: 1100;
    padding: 10px 0;
}

.brand-text h1 {
    color: var(--top10-yellow);
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.cart-icon {
    color: var(--top10-yellow);
    font-size: 1.4rem;
    position: relative;
    padding: 8px;
    transition: transform 0.2s;
}

.cart-icon:hover {
    transform: scale(1.1);
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--top10-red); /* Badge vermelho */
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
    border: 2px solid #000;
}

/* ==========================================================================
   3. MENU DE CATEGORIAS (STICKY E RESPONSIVO)
   ========================================================================== */
.nav-scroller {
    position: relative; /* Mudamos de sticky para relative */
    background-color: transparent; /* O fundo vem do wrapper */
    padding: 5px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Estilo Base dos Links */
.nav-pills .nav-link {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 0;
    margin: 0 5px;
    transition: 0.3s;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.nav-pills .nav-link.active {
    background: none !important;
    color: var(--top10-yellow) !important;
    border-bottom: 2px solid var(--top10-red); /* Ativo em amarelo com borda vermelha */
}

.menu-arrow {
    color: var(--top10-yellow);
    text-shadow: 0 0 10px #000;
}

/* --- COMPORTAMENTO MOBILE (Desliza) --- */
@media (max-width: 991px) {
    .nav-scroller {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nav-scroller::-webkit-scrollbar {
        display: none;
    }
    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap; /* Força linha única */
        padding: 10px;
    }
    .nav-scroller .nav-item {
        flex: 0 0 auto;
    }
}

/* --- COMPORTAMENTO PC (Quebra Linha) --- */
@media (min-width: 992px) {
    .nav-scroller {
        overflow: visible;
    }
    .nav-scroller .nav {
        display: flex;
        flex-wrap: wrap; /* Permite quebra de linha */
        justify-content: center;
        padding: 15px;
    }
}

/* Container pai */
.menu-wrapper {
    position: sticky; /* O pai agora fica fixo */
    top: 68px;        /* Mesma altura que usamos antes para o header */
    z-index: 1020;
    background-color: var(--bg-dark);
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

/* --- DEGRADÊ NAS EXTREMIDADES --- */
.menu-wrapper::before,
.menu-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px; /* Aumentei um pouco para cobrir bem o texto atrás da seta */
    z-index: 1024;
    pointer-events: none;
    transition: opacity 0.3s;
}

.menu-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-dark) 30%, rgba(10, 10, 10, 0));
}

.menu-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-dark) 30%, rgba(10, 10, 10, 0));
}

/* --- SETAS COM ANIMAÇÃO --- */
.menu-arrow {
    position: absolute;
    top: 50%;
    z-index: 1026; /* Acima de tudo */
    color: var(--gold);
    font-size: 0.9rem;
    padding: 5px;
    opacity: 0.9;
    text-shadow: 0 0 10px #000;
    cursor: pointer; /* Indica que é clicável */
    pointer-events: auto; /* Garante que a seta receba o clique */
}

.arrow-left { 
    left: 5px; 
    animation: bounceLeft 2s infinite; 
}

.arrow-right { 
    right: 5px; 
    animation: bounceRight 2s infinite; 
}

/* Animações de pulso lateral */
@keyframes bounceLeft {
    0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) translateX(0); }
    40% { transform: translateY(-50%) translateX(4px); }
    60% { transform: translateY(-50%) translateX(2px); }
}

@keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) translateX(0); }
    40% { transform: translateY(-50%) translateX(-4px); }
    60% { transform: translateY(-50%) translateX(-2px); }
}

/* Esconder no PC */
@media (min-width: 992px) {
    .menu-wrapper::before, .menu-wrapper::after, .menu-arrow { display: none; }
}

/* ==========================================================================
   4. VITRINE E CARDS DE PRODUTOS
   ========================================================================== */
.category-title {
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 30px 0 20px 0;
    padding-left: 10px;
    border-left: 4px solid var(--top10-red); /* Destaque lateral em vermelho */
}

.card-produto {
    display: flex;
    justify-content: space-between;
    background: #111; /* Estilo App Dark */
    border: 1px solid #222;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.card-produto:hover {
    border-color: var(--top10-yellow); /* Hover em amarelo */
    box-shadow: 0 0 15px rgba(255, 210, 0, 0.1);
    transform: translateY(-2px);
}

.info-area {
    flex: 1;
    padding-right: 15px;
}

.prod-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--top10-yellow); /* Nome do pastel em amarelo */
    margin-bottom: 5px;
}

.prod-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.prod-price {
    display: block;
    font-weight: 700;
    color: var(--text-white); /* Preço branco para contraste */
    font-size: 1.2rem;
}

.img-area img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* --- MODAL PREMIUM --- */
.border-gold-modal {
    border: 1px solid var(--top10-red) !important;
}

.modal-image-container {
    height: 250px;
    overflow: hidden;
    border-bottom: 2px solid var(--top10-red);
}

.modal-image-container img {
    height: 100%;
    object-fit: cover;
}

.prod-title-modal {
    color: var(--top10-yellow);
    font-weight: 800;
}

.prod-price-modal {
    color: var(--top10-yellow);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Seletor de Quantidade */
.input-qty {
    width: 130px;
}

.btn-outline-gold {
    color: var(--top10-yellow);
    border-color: var(--top10-yellow);
}

.btn-outline-gold:hover {
    background-color: var(--top10-red);
    color: #fff;
    border-color: var(--top10-red);
}

.border-gold {
    border-color: var(--top10-yellow) !important;
}

.btn-gold{
    background-color: var(--top10-yellow);
    color: #000 !important;
    border: none;
    border-radius: 4px;
    transition: transform 0.2s;
}
.btn-gold:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    background-color: var(--top10-yellow-light);
}

/* Botão de Ação Principal */
.btn-gold-action {
    background: var(--top10-gradient);
    color: #000;
    font-weight: 900;
    border: none;
    border-radius: 4px;
    transition: transform 0.2s;
}

.btn-gold-action:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}
/* ==========================================================================
   5. SIDEBAR DO CARRINHO (FIXO NA LATERAL)
   ========================================================================== */
aside {
    background-color: #111;
    border-left: 1px solid var(--top10-red);
    overflow-x:hidden;
    width:auto;
    position:fixed;
    left:100vw;
    right:0;
    top:0;
    bottom:0;
    padding: 20px;
    transition: all ease .2s;
    z-index: 4000; /* ACIMA DE TUDO: Acima do menu e dos modais */
}
aside.show {
    width:30vw;
}

/* --- ESTILO DO BOTÃO FECHAR CARRINHO --- */
.menu-closer {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--top10-yellow); 
    cursor: pointer;
    transition: all ease 0.3s;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid transparent;
    margin-bottom: 15px;
}

.menu-closer:hover {
    color: #fff;
    background-color: rgba(212, 175, 55, 0.1); /* Fundo dourado bem clarinho no hover */
    border-color: var(--top10-red);
    transform: rotate(90deg); /* Efeito de rotação ao passar o mouse */
}

/* --- ESTILIZAÇÃO DO CONTEÚDO DO CARRINHO (detailsCart.php) --- */

/* Estilo geral dos textos de rótulo (Labels) */
.cart--area b, .cart--area span {
    color: #e0e0e0;
}

/* Inputs, Selects e Textareas do Carrinho */
.cart--area .input-cart {
    background-color: #262626 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.cart--area .input-cart:focus {
    border-color: var(--gold) !important;
    outline: none;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* Botões de atalho (Nomes na mesa / Retirar no local) */
.cart--area .btn-dark, .cart--area .btn-primary {
    background-color: #333 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    font-size: 0.75rem;
    margin-top: 5px;
    transition: 0.3s;
}

.cart--area .btn-primary:hover, .cart--area .btn-dark:hover {
    border-color: var(--top10-yellow) !important;
    color: var(--top10-yellow) !important;
}

/* Forçar o fundo da tabela e remover estilos brancos do Bootstrap */
.cart--area table.table {
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
}

/* Remover fundos brancos de todas as células e linhas */
.cart--area .table td, 
.cart--area .table th, 
.cart--area .table tr {
    background-color: transparent !important;
    border-color: #333; /* Linha divisória discreta */
    color: #fff;
}

/* Estilizar o cabeçalho (Descrição, Preço, etc) */
.cart--area thead th {
    color: var(--top10-yellow) !important;
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--top10-red) !important;
}

/* Nome do produto (Coluna Descrição) */
.cart--item-nome {
    color: #fff !important;
    font-weight: bold;
    font-size: 13px;
    display: block;
}

/* Adicionais (Texto logo abaixo do nome) */
.cart--adicionais-item {
    color: #aaa !important; /* Cinza claro para os adicionais */
    font-size: 11px !important;
    font-style: italic;
}

/* Botão de excluir (Lixeira) */
.cart--area .btn-cart-trash {
    background: transparent !important; /* Remove qualquer fundo cinza ou branco */
    border: none !important;
    color: #ff4444 !important; /* Vermelho vivo para o ícone */
    font-size: 1.1rem;
    padding: 5px;
    transition: transform 0.2s;
}

.cart--area .btn-cart-trash:hover {
    transform: scale(1.2);
    color: #ff0000 !important;
}

/* Garante que a célula da lixeira não tenha fundo */
.cart--area table td:last-child {
    background: transparent !important;
}


/* Nome do Produto */
.cart--item-nome {
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
}

/* Adicionais e Sabores (Texto menor e discreto) */
.cart--adicionais-item {
    font-size: 0.75rem;
    color: #888; /* Cinza para não competir com o nome do produto */
    font-style: italic;
    line-height: 1.2;
}


/* Ajuste de alinhamento de preços */
.text-right {
    text-align: right;
}

/* --- SELETOR DE PAGAMENTO (RADIO TILES) --- */
.opc-pagamento {
  display: flex;
  padding:5px 0;
}

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.radio-tile-group .input-container {
  position: relative;
  height: 50px;
  width: 63px;
  margin: 3px;
}

.radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--top10-yellow);
  border-radius: 5px;
  padding: 1rem;
  transition: transform 300ms ease;
 
}

.radio-tile-group .input-container .icon svg {
  fill: #007bff;
  width: 2rem;
  height: 2rem;
}

.radio-tile-group .input-container .radio-tile-label {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gold);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile {
    background-color: var(--top10-red);
    border: 2px solid var(--top10-red);
    color: white;
    transform: scale(1.1, 1.1);
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
  fill: white;
  background-color: #007bff;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
  color: white;
  background-color: #007bff;
}
label{
  margin-bottom: 0 !important;
}

/* Resumo de valores (Subtotal, Taxa, Total) */
.cart--totalitem {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #333;
}

.cart--totalitem.big {
    border-top: 2px solid var(--top10-red);
    padding-top: 15px;
    margin-bottom: 20px;
}

.cart--totalitem.big span {
    font-size: 1.5rem;
    color: var(--top10-yellow) !important;
    font-weight: 800;
}



/* Botão Finalizar Pedido */
.cart--finalizar {
    background-color: var(--top10-yellow) !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px !important;
    border-radius: 12px !important;
    margin-top: 20px;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.cart--finalizar:hover {
    background-color: #ffeb3b !important;
    transform: translateY(-2px);
}

/* Pequenos ajustes de espaçamento */
.cart--area b {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
}

/* --- MODAL  --- */

.produtoWindowArea {
    position: fixed;
    left: 0; top: 0; bottom: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.85); /* Overlay mais escuro */
    backdrop-filter: blur(5px); /* Efeito de desfoque luxuoso */
    display: none;
    transition: all ease .5s;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    z-index: 2000;
}

.produtoWindowBody {
    width: 900px;
    background-color: #161616; /* Fundo escuro */
    border-radius: 15px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    margin: 20px 0px;
    z-index: 1100;
    color: #fff;
}

.produtoBig {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.produtoBig img {
    height: auto;
    max-width: 380px;
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.5));
}

.produtoInfo {
    flex: 1;
    
}

.produtoInfo h1 {
    margin-top: 10px;
    font-size: 32px !important;
    font-weight: bold;
    color: var(--gold); /* Nome do produto em dourado */
}

.produtoInfo .produtoInfo--desc {
    font-size: 15px;
    color: #bbb; /* Descrição em cinza claro para leitura */
    margin-top: 10px;
    line-height: 1.4;
}

.produtoInfo--sector {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 20px;
    font-weight: bold;
}

.produtoInfo--price {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.produtoInfo--actualPrice {
    font-size: 32px;
    font-weight: bold;
    margin-right: 30px;
    color: #fff;
}

/* --- CONTROLES DE QUANTIDADE --- */
.produtoInfo--qtarea, .cart--item--qtarea, .adicionais-item-qtarea {
    display: inline-flex;
    background-color: #262626; /* Fundo input dark */
    border: 1px solid #444;
    border-radius: 8px;
    height: 35px;
    align-items: center;
}

.produtoInfo--qtarea button, .cart--item--qtarea button, .adicionais-item-qtarea button {
    border: 0;
    background-color: transparent;
    font-size: 20px;
    outline: 0;
    cursor: pointer;
    padding: 0px 12px;
    color: var(--gold); /* Símbolos + e - em dourado */
}

.produtoInfo--qt, .cart--item--qt, .adicionais-item-qt {
    font-size: 15px;
    font-weight: bold;
    padding: 0px 5px;
    color: #fff;
}

/* --- BOTÕES --- */
.produtoInfo--addButton {
    margin: 15px 0;
    padding: 15px 30px;
    border-radius: 10px;
    background: var(--top10-yellow);
    color: #000;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}

.produtoInfo--addButton:hover {
    transform: scale(1.03);
    background-color: var(--top10-yellow-light);
    color: #000;
}

.produtoInfo--cancelButton {
    display: inline-block;
    cursor: pointer;
    color: #888; /* Cinza médio para não brilhar mais que o botão principal */
    font-weight: 500;
    font-size: 16px;
    margin-left: 20px; /* Espaço entre o botão de adicionar e o cancelar */
    text-decoration: none;
    transition: all ease .3s;
    height: 50px;
    margin-top: 30px;
    line-height: 50px;
}

.produtoInfo--cancelButton:hover {
    color: #fff; /* Fica branco ao passar o mouse */
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 840px) {
    .produtoWindowBody {
        width: 100vw;
        height: 100vh;
        display: block;
        padding: 20px;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
    }

    .produtoBig img {
        max-width: 250px;
    }

    .produtoInfo h1 {
        font-size: 24px !important;
    }

    .produtoInfo--cancelMobileButton {
        display: block;
        text-align: left;
        margin-top: 20px;
        
    }

    .produtoInfo--cancelButton {
        display: none;
    }
}

/* Força o Modal de Sabores a ficar acima da Window Area */
#modalSelectSabor {
    z-index: 3000 !important; /* Maior que os 2000 da Window Area */
}

/* Ajusta o backdrop (fundo escuro) do segundo modal */
.modal-backdrop.show {
    z-index: 2900 !important;
}

/* Tema Dark & Gold para o Modal de Sabores */
#modalSelectSabor .modal-content {
    background-color: #161616;
    border: 1px solid var(--gold);
    color: #fff;
    border-radius: 15px;
}

#modalSelectSabor .modal-header {
    border-bottom: 1px solid #333;
}

#modalSelectSabor .modal-title {
    color: var(--gold);
    font-weight: bold;
}

#modalSelectSabor .close {
    color: var(--gold);
    text-shadow: none;
    opacity: 0.8;
}

#modalSelectSabor .modal-footer {
    border-top: 1px solid #333;
}

/* Estilo para os Checkboxes de Sabores */
#modalSelectSabor .form-check-label {
    color: #eee;
    cursor: pointer;
    padding: 5px 0;
}

#modalSelectSabor .form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

/* Botões do Modal */
#modalSelectSabor .btn-primary {
    background: var(--gold-gradient);
    border: none;
    color: #000;
    font-weight: bold;
}

#modalSelectSabor .btn-secondary {
    background: #333;
    border: none;
    color: #fff;
}

/* Estilizando o botão X de fechar para o tema Dark & Gold */
#modalSelectSabor .close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--gold); /* Garante que o X seja dourado */
    opacity: 1;
    outline: none;
}

#modalSelectSabor .close:hover {
    color: #fff;
    transform: scale(1.1);
}

/* ==========================================================================
   6. ANIMAÇÕES E OUTROS ESTILOS GERAIS
   ========================================================================== */

.border-red{
    border: 1px solid rgb(255, 162, 0) !important;
}
.text-red{
    color: rgb(212, 163, 0) !important;
}

.hide{
    display: none !important;
}

.required{
    animation: treme 0.1s;
    animation-iteration-count: 3;
  }
  
  @keyframes treme {
    0% {margin-left: 0;}
    25% {margin-left: 5px;}
    50% {margin-left: 0;}
    75% {margin-left: -5px;}
    100% {margin-left: 0;}
  }

  /* Efeito de hover nos nomes já sugeridos */
    .btn-sm:hover {
        background: var(--gold) !important;
        color: black !important;
        border-color: var(--gold) !important;
    }
    
    /* Foco no input */
    #nome_mesa:focus {
        background-color: #000 !important;
        border-color: var(--top10-red) !important;
        box-shadow: 0 0 8px rgba(230, 0, 0, 0.2) !important;
        border-style: solid;
    }

    /* Estilo para o foco no Textarea */
    #obs_pedido:focus {
        background-color: #0b0b0b !important;
        border-color: var(--top10-red) !important;
        box-shadow: 0 0 8px rgba(230, 0, 0, 0.2) !important;
        color: #fff;
    }

    /* Estilização da cor do Placeholder para o tema Dark */
    #obs_pedido::placeholder {
        color: rgba(255, 255, 255, 0.3);
        font-style: italic;
        font-size: 0.85rem;
    }
    
    .text-gold {
        color: var(--gold);
    }

    /* Estilo do Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    flex-direction: column;
}

#lightbox-img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox:target #lightbox-img, 
.lightbox[style*="display: flex"] #lightbox-img {
    transform: scale(1);
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

#lightbox-caption {
    margin-top: 15px;
    color: #ccc;
    font-weight: bold;
    text-align: center;
}

/* Cursor de zoom na imagem do modal original */
.img-area-modal img {
    cursor: zoom-in;
    transition: opacity 0.3s;
}
.img-area-modal img:hover {
    opacity: 0.9;
}