/* =============================================
   RESET GLOBAL
   Remove estilos padrão do browser (margins, paddings)
   para termos controle total sobre o layout.
   O "*" seleciona TODOS os elementos da página.
   ============================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Faz com que padding e border sejam incluídos no tamanho total do elemento */
}

/* =============================================
   VARIÁVEIS CSS (Custom Properties)
   Definimos todas as cores, fontes e medidas num só lugar.
   Assim, para mudar a cor do restaurante inteiro,
   basta alterar UMA variável aqui.
   Usa-se com: var(--nome-da-variavel)
   ============================================= */
:root {
    /* --- Cores principais --- */
    --color-bg: #FAF8F5;              /* Fundo geral da página (bege claro) */
    --color-header: #1B1B2F;          /* Fundo do cabeçalho (azul escuro) */
    --color-accent: #C4873B;          /* Cor de destaque/preço (dourado) */
    --color-accent-light: #F5E6D3;    /* Versão clara do destaque */
    --color-text: #2D2D2D;            /* Cor principal do texto (quase preto) */
    --color-text-light: #7A7A7A;      /* Cor de texto secundário (cinza) */
    --color-card: #FFFFFF;            /* Fundo dos cards (branco) */
    --color-border: #EDEBE8;          /* Cor das bordas (cinza claro) */
    --color-unavailable: #E8E8E8;     /* Cor para itens indisponíveis */

    /* --- Fontes --- */
    --font-display: 'Playfair Display', Georgia, serif;  /* Fonte elegante para títulos */
    --font-body: 'DM Sans', system-ui, sans-serif;       /* Fonte limpa para textos */

    /* --- Medidas de arredondamento --- */
    --radius: 16px;     /* Arredondamento grande (cards) */
    --radius-sm: 10px;  /* Arredondamento pequeno (botões, tags) */
}

/* =============================================
   BODY — CONFIGURAÇÃO BASE DA PÁGINA
   Define a fonte padrão, cor de fundo e largura máxima.
   O max-width: 480px garante que no desktop a página
   não fica esticada — simula um ecrã de telemóvel.
   ============================================= */
body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;      /* Ocupa pelo menos 100% da altura do ecrã */
    max-width: 480px;        /* Largura máxima (simula mobile no desktop) */
    margin: 0 auto;          /* Centra a página horizontalmente */
    -webkit-font-smoothing: antialiased; /* Suaviza as fontes no Safari/Chrome */
}


/* =============================================
   SELETOR DE IDIOMA — BARRA DE BANDEIRAS
   Barra discreta no topo da página com as bandeiras
   dos idiomas disponíveis. O idioma ativo fica
   destacado com um fundo mais visível.
   ============================================= */
.lang-bar {
    display: flex;
    justify-content: flex-end;
    padding: 6px 16px;
    background: var(--color-header);
    position: relative;
}

/* Botão de idioma — mostra a bandeira do idioma ativo (em vez de 3 linhas) */
/* Assim o utilizador vê claramente que o idioma mudou ao clicar */
.lang-hamburger {
    display: flex;
    flex-direction: row;    /* Horizontal para mostrar a bandeira */
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 10px;
    transition: background 0.2s;
}

.lang-hamburger:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Bandeira emoji do idioma ativo — mostra dentro do botão de idioma */
.lang-flag-active {
    font-size: 15px;
    line-height: 1;
    display: block;
}



/* Dropdown — fechado por padrão */
.lang-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--color-header);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    overflow: hidden;
    z-index: 100;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lang-dropdown.open {
    display: flex;
}

/* Cada opção de idioma no dropdown */
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.lang-option.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 600;
}


/* =============================================
   HEADER — CABEÇALHO DO RESTAURANTE
   Fundo escuro com o logo, nome e tagline.
   O ::before cria um efeito de luz sutil
   no canto inferior esquerdo (decorativo).
   ============================================= */
.header {
    background: var(--color-header);
    padding: 40px 24px 32px;  /* Espaçamento interno: cima, lados, baixo */
    text-align: center;
    position: relative;       /* Necessário para o ::before funcionar */
    overflow: hidden;         /* Esconde o efeito de luz que sai da área */
}

/* Efeito de luz decorativo (gradiente radial sutil) */
.header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 30% 70%,
        rgba(196, 135, 59, 0.08) 0%,  /* Cor dourada muito transparente */
        transparent 50%
    );
    pointer-events: none; /* Permite clicar "através" deste elemento */
}

/* --- Logo circular --- */
.header-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;                        /* Torna o div circular */
    background: rgba(255, 255, 255, 0.08);     /* Fundo branco quase transparente */
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    margin: 0 auto 16px;                       /* Centra e dá espaço abaixo */
    display: flex;
    align-items: center;                       /* Centra o conteúdo verticalmente */
    justify-content: center;                   /* Centra o conteúdo horizontalmente */
    font-size: 32px;                           /* Tamanho do emoji/logo */
    overflow: hidden;                          /* Garante que a imagem não sai do círculo */
}

/* Quando o logo é uma imagem carregada pelo admin (base64 ou URL) */
.header-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Preenche o círculo sem distorcer a imagem */
    border-radius: 50%;   /* Recorte circular — necessário no Safari */
}

/* --- Nome do restaurante --- */
.header h1 {
    font-family: var(--font-display);  /* Usa a fonte elegante */
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 600;                  /* Semi-bold */
    letter-spacing: -0.5px;            /* Aproxima ligeiramente as letras */
    margin-bottom: 6px;
}

/* --- Tagline/descrição --- */
.header p {
    color: rgba(255, 255, 255, 0.5);  /* Branco com 50% de transparência */
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;             /* Espaça as letras (efeito elegante) */
    text-transform: uppercase;         /* Transforma em MAIÚSCULAS */
}


/* =============================================
   CATEGORIAS — TABS DE NAVEGAÇÃO
   Barra horizontal fixa no topo (sticky).
   Permite scroll horizontal no mobile
   quando há muitas categorias.
   ============================================= */
.categories {
    position: sticky;         /* Fica "colada" no topo ao fazer scroll */
    top: 0;
    z-index: 100;             /* Fica acima de outros elementos */
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;             /* Alinha os botões lado a lado */
    overflow-x: auto;          /* Permite scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    scrollbar-width: none;     /* Esconde a barra de scroll no Firefox */
    scroll-behavior: auto;     /* Necessário: garante que o scroll automático por JS seja imediato, sem animação CSS a interferir */
}

/* Esconde a barra de scroll no Chrome/Safari */
.categories::-webkit-scrollbar {
    display: none;
}

/* --- Cada botão de categoria --- */
.cat-tab {
    flex: 0 0 auto;           /* Não encolhe nem cresce */
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    background: none;           /* Remove fundo padrão do botão */
    border: none;               /* Remove borda padrão do botão */
    border-bottom: 2.5px solid transparent; /* Borda inferior invisível (reserva espaço) */
    cursor: pointer;            /* Muda o cursor para "mãozinha" */
    white-space: nowrap;        /* Impede que o texto quebre em duas linhas */
    transition: all 0.25s ease; /* Animação suave ao mudar de estado */
    font-family: var(--font-body);
}

/* --- Categoria ativa (selecionada) --- */
.cat-tab.active {
    color: var(--color-accent);                /* Texto dourado */
    border-bottom-color: var(--color-accent);  /* Linha dourada embaixo */
}


/* =============================================
   SECÇÃO DO MENU — CONTAINER DOS PRATOS
   Envolve o título da categoria e todos os cards.
   ============================================= */
.menu-section {
    padding: 20px 16px;
}

/* --- Título da categoria (ex: "Entradas") --- */
.section-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    padding: 0 4px 14px;
    color: var(--color-text);
}


/* =============================================
   CARD DO PRATO — CADA ITEM DO MENU
   Card branco com borda, contém:
   - Área do vídeo 360°
   - Nome, descrição e preço
   - Tags de alergénios
   ============================================= */
.menu-card {
    background: var(--color-card);
    border-radius: var(--radius);
    overflow: hidden;          /* Garante que o vídeo não sai do card */
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animação ao tocar */
}

/* Efeito ao tocar no card (mobile) — encolhe ligeiramente */
.menu-card:active {
    transform: scale(0.985);
}

/* --- Card de prato indisponível --- */
.menu-card.unavailable {
    opacity: 0.55;              /* Fica semi-transparente */
    pointer-events: none;       /* Desabilita cliques */
}

/* Etiqueta "Indisponível" que aparece sobre o vídeo */
.menu-card.unavailable .video-area::after {
    content: 'Indisponível';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfeitamente */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    z-index: 5;
}


/* =============================================
   ÁREA DO VÍDEO 360°
   Ocupa a parte superior do card.
   Pode conter um <video> real ou um placeholder.
   ============================================= */
.video-area {
    position: relative;   /* Necessário para posicionar o badge "360°" */
    width: 100%;
    height: 220px;
    background: var(--color-header);
    overflow: hidden;
    cursor: pointer;      /* Indica que é clicável */
}

/* O vídeo em si (quando existir) */
.video-area video {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* O vídeo preenche toda a área sem distorcer */
}

/* Thumbnail do YouTube — comporta-se como o <video> */
.video-area .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* A imagem preenche toda a área sem distorcer */
    display: block;
}

/* --- Placeholder (quando ainda não há vídeo) --- */
.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;     /* Empilha ícone + texto verticalmente */
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #252540, #1B1B2F); /* Gradiente escuro */
}

.video-placeholder svg {
    width: 44px;
    height: 44px;
    opacity: 0.25;
    margin-bottom: 8px;
}

.video-placeholder span {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
}

/* --- Badge "360°" no canto inferior direito do vídeo --- */
.badge-360 {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);         /* Desfoca o fundo (efeito vidro) */
    -webkit-backdrop-filter: blur(8px); /* Compatibilidade Safari */
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;                /* Formato de pílula */
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;                            /* Espaço entre ícone e texto */
}

.badge-360 svg {
    width: 14px;
    height: 14px;
}


/* =============================================
   CONTEÚDO DO CARD — NOME, PREÇO, DESCRIÇÃO
   Parte inferior do card, abaixo do vídeo.
   ============================================= */
.card-content {
    padding: 14px 16px 16px;
}

/* Linha com nome do prato (esquerda) e preço (direita) */
.card-top {
    display: flex;
    justify-content: space-between;  /* Empurra nome e preço para os extremos */
    align-items: flex-start;
    gap: 12px;                        /* Espaço mínimo entre nome e preço */
}

/* --- Nome do prato --- */
.dish-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

/* --- Preço --- */
.dish-price {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-accent);   /* Cor dourada para destacar */
    white-space: nowrap;          /* Impede que "€12,00" quebre em duas linhas */
    flex-shrink: 0;               /* Garante que o preço nunca encolhe */
}

/* --- Descrição do prato --- */
.dish-desc {
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 5px;
    line-height: 1.5;
}


/* =============================================
   TAGS DE ALERGÉNIOS
   Pequenas etiquetas coloridas que indicam
   os alergénios de cada prato.
   Cada alergénio tem a sua cor específica
   para fácil identificação visual.
   ============================================= */
.allergens {
    display: flex;
    flex-wrap: wrap;    /* Permite que as tags quebrem linha se necessário */
    gap: 5px;           /* Espaço entre tags */
    margin-top: 10px;
}

.allergen-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- Cores específicas por alergénio --- */
.allergen-tag.gluten   { background: #FEF3E2; color: #A16207; } /* Amarelo */
.allergen-tag.leite    { background: #E8F5E9; color: #2E7D32; } /* Verde */
.allergen-tag.ovo      { background: #FFF3E0; color: #E65100; } /* Laranja */
.allergen-tag.peixe    { background: #E3F2FD; color: #1565C0; } /* Azul */
.allergen-tag.marisco  { background: #FCE4EC; color: #AD1457; } /* Rosa */
.allergen-tag.soja     { background: #F3E5F5; color: #7B1FA2; } /* Roxo */
.allergen-tag.frutos   { background: #EFEBE9; color: #5D4037; } /* Castanho */
.allergen-tag.aipo     { background: #E0F2F1; color: #00695C; } /* Verde-azulado */
.allergen-tag.mostarda { background: #FFFDE7; color: #9E9D24; } /* Amarelo-esverdeado */
.allergen-tag.sesamo   { background: #FBE9E7; color: #BF360C; } /* Vermelho-alaranjado */


/* =============================================
   FOOTER — RODAPÉ
   Branding "Powered by Menu Meisy".
   ============================================= */
.footer {
    text-align: center;
    padding: 24px 16px 32px;
}

.footer p {
    font-size: 11px;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
}

.footer a {
    color: var(--color-accent);
    text-decoration: none;   /* Remove o sublinhado do link */
}


/* =============================================
   MODAL — VÍDEO EM ECRÃ CHEIO
   Overlay escuro que cobre toda a página.
   Mostra o vídeo 360° em tamanho grande
   quando o cliente toca num prato.
   ============================================= */
.modal-overlay {
    display: none;        /* Escondido por padrão */
    position: fixed;      /* Fica fixo na tela toda */
    inset: 0;             /* Cobre de canto a canto */
    background: #000;     /* Fundo preto sólido para vídeo sem margens */
    z-index: 1000;        /* Fica acima de tudo */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;           /* Sem margens — o vídeo usa todo o espaço */
}

/* Quando o modal está ativo (visível) */
.modal-overlay.active {
    display: flex;
}

/* Compatibilidade com a Fullscreen API (esconde barra do browser no telemóvel) */
.modal-overlay:fullscreen,
.modal-overlay:-webkit-full-screen {
    background: #000;
    padding: 0;
}

/* --- Botão de fechar (X) --- */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Container do vídeo dentro do modal ---
   Ocupa todo o espaço disponível do overlay.
   Em portrait: largura total. Em landscape: altura total.
   O vídeo usa object-fit:contain para nunca distorcer. */
.modal-video {
    width: 100%;
    flex: 1;            /* Toma toda a altura disponível */
    min-height: 0;      /* Necessário para o flex respeitar o limite */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.modal-video video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mostra o vídeo inteiro sem cortar nem distorcer */
    display: block;
}

/* Em landscape: o vídeo é mais largo, aproveitar melhor a tela horizontal */
@media (orientation: landscape) {
    .modal-video {
        width: auto;
        height: 100%;
        aspect-ratio: auto;
    }
    .modal-video video {
        max-height: 100vh;
        width: auto;
    }
}

/* --- Informações do prato sobrepostas no fundo do modal ---
   Ficam por cima do vídeo para não ocupar espaço extra */
.modal-dish-name {
    font-family: var(--font-display);
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 10px 16px 2px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    width: 100%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* --- Preço do prato no modal --- */
.modal-dish-price {
    color: var(--color-accent);
    font-size: 16px;
    text-align: center;
    padding: 0 16px 12px;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


/* =============================================
   ANIMAÇÕES
   Efeito "fade in + slide up" — os cards
   aparecem suavemente de baixo para cima
   quando a página carrega.
   ============================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;                    /* Começa invisível */
        transform: translateY(16px);   /* Começa 16px abaixo */
    }
    to {
        opacity: 1;                    /* Termina visível */
        transform: translateY(0);      /* Termina na posição normal */
    }
}

/* Aplica a animação a cada card */
.menu-card {
    animation: fadeInUp 0.4s ease both;
}

/* Cada card seguinte tem um pequeno atraso (efeito cascata) */
.menu-card:nth-child(2) { animation-delay: 0.08s; }
.menu-card:nth-child(3) { animation-delay: 0.16s; }
.menu-card:nth-child(4) { animation-delay: 0.24s; }
.menu-card:nth-child(5) { animation-delay: 0.32s; }