/*
 * styles.css
 * Folha de estilos principal para o site Souto Barbearia.
*/

/* === Variáveis de Cor e Fontes === */
/* As cores e fontes principais estão definidas como variáveis CSS. 
   Para mudar a paleta do site, basta alterar estes valores num só lugar. */
:root {
    --cor-primaria: #0a0a0a;
    /* Um preto/cinza muito escuro para fundos */
    --cor-secundaria: #f4f4f4;
    /* Um branco suave para o texto */
    --cor-destaque: #c5a47e;
    /* Um tom de bronze/dourado para detalhes e links */
    --cor-destaque-clara: #d8b995;
    /* Tom mais claro do destaque, para hovers e detalhes */
    --cor-fundo-seccao: #1a1a1a;
    /* Um cinza um pouco mais claro para as secções */
    --cor-borda-escura: #2a2a2a;
    /* Tom para bordas subtis em fundos escuros */
    --cor-texto-suave: #aaa;
    /* Cinza claro para textos menos importantes */
    --fonte-principal: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
    /* Fonte para textos normais e botões */
    --fonte-titulos: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
    /* Fonte para títulos */
    --sombra-texto: 3px 1px 3px #000000;
}

/* === Estilos Gerais (Reset e Base) === */
/* Um "reset" simples para garantir que o site tem uma aparência consistente em todos os browsers,
   removendo margens e paddings padrão. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Isto faz com que o padding não afete a largura final dos elementos. É uma boa prática. */
}

body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    line-height: 1.5;
    /* Melhora a legibilidade do texto. */
    overflow-x: hidden;
    /* Previne scroll horizontal indesejado na página inteira */
}

h1,
h2,
h3 {
    font-family: var(--fonte-titulos);
    color: var(--cor-destaque);
    margin-bottom: 1rem;
    text-shadow: var(--sombra-texto);
}

p {
    margin-bottom: 1rem;
    font-size: 16px;
}

a {
    color: var(--cor-destaque);
    text-decoration: none;
}

img {
    max-width: 100%;
    /* Garante que as imagens nunca ultrapassam o contentor. Essencial para responsividade. */
    height: auto;
    display: block;
}


/* Estilo base para os botões (Call to Action, Voltar, etc.) */
.cta-button,
.back-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.8rem;
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    font-size: 0.95rem;
    font-weight: 600;
}

.cta-button:hover,
.back-button:hover {
    background-color: var(--cor-destaque-clara);
    /* Tom ligeiramente mais claro no hover. */
    transform: scale(1.05);
    /* Efeito de zoom subtil. */
}

/* === Cabeçalho e Navegação === */
header {
    /* Por defeito, o fundo é transparente para se sobrepor à secção #hero. */
    background-color: transparent;
    backdrop-filter: blur(0px);
    /* Sem desfoque no topo. */
    -webkit-backdrop-filter: blur(0px);
    /* Para compatibilidade com mais browsers. */
    padding: 2rem 0;
    /* Aumentado para descer o menu visualmente. */
    position: fixed;
    /* Fica fixo no topo e fora do fluxo normal do documento. */
    width: 100%;
    /* Garante que o cabeçalho ocupa a largura total. */
    top: 0;
    z-index: 1000;
    /* Garante que o cabeçalho fica por cima de outros elementos. */
    /* Adiciona uma transição suave para o movimento de aparecer/desaparecer. */
    /* Transição para o fundo, desfoque e a transformação ao rolar. */
    transition: background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out, -webkit-backdrop-filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Esta classe é adicionada via JavaScript (em scripts.js) quando o utilizador faz scroll,
   mudando o seu estilo e/ou fazendo-o deslizar para fora do ecrã. */
header.header-scrolled {
    /* Adiciona um fundo escuro semi-transparente. A transparência (0.5) é crucial para o blur funcionar. */
    background-color: rgba(10, 10, 10, 0.5);
    /* Aplica o efeito de desfoque ao conteúdo que está por trás do cabeçalho. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Para compatibilidade com mais browsers. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Sombra subtil para destacar o cabeçalho do conteúdo. */
    padding: 1rem 0;
    /* Reduz o tamanho ao fazer scroll para não ocupar muito espaço */
}

header.header-hidden {
    transform: translateY(-100%);
}

header h1 {
    margin: 0;
    font-size: 27px;
    text-shadow: var(--sombra-texto);
}

header li {
    font-size: 18px;
    font-family: var(--fonte-titulos);
    /* Garante que o menu usa a mesma fonte dos títulos. */
    text-shadow: var(--sombra-texto);
}

/* Contentor interno que centra o logo e o menu e define a largura máxima. */
.header-content {
    display: flex;
    justify-content: space-between;
    /* Coloca o logo à esquerda e o menu à direita. */
    align-items: center;
    width: 100%;
    /* Garante largura total */
    max-width: 1200px;
    /* Largura padrão para o conteúdo. */
    margin: 0 auto;
    /* Centra o contentor na horizontal. */
    padding: 0 2rem;
    /* Adiciona um espaçamento nas laterais para não colar nas bordas em ecrãs mais pequenos. */
}

header nav ul {
    list-style: none;
    /* Remove as bolinhas da lista. */
    display: flex;
    flex-direction: row;
    /* Garante que os itens do menu estão sempre na horizontal. */
    gap: 1.5rem;
    /* Espaçamento entre os itens do menu. */
    gap: 2rem;
    /* Espaçamento entre os itens do menu. */
}

header nav a {
    font-weight: bold;
    transition: color 0.3s ease;
    /* Efeito suave na mudança de cor. */
}

header nav a:hover {
    color: #d1cdcd;
    /* Muda a cor ao passar o rato por cima. */
}

/* Estilo para o item de Login/Logout no menu, para o destacar com um contorno. */
header .login-item a {
    background-color: transparent;
    color: var(--cor-destaque);
    padding: 0.1rem 1rem;
    /* Padding ajustado para o botão ser mais baixo e mais largo. */
    border: 2px solid var(--cor-destaque);
    border-radius: 5px;
    text-shadow: none;
    /* Remove a sombra do texto para melhor legibilidade no botão. */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
    /* Adiciona transição para o hover. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    /* Adiciona uma sombra para dar profundidade. */
}

header .login-item a:hover {
    background-color: var(--cor-destaque);
    /* Preenche o fundo no hover. */
    color: var(--cor-primaria);
    /* O texto fica escuro para contraste. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    /* A sombra fica mais forte no hover. */
    transform: translateY(-2px);
    /* Efeito de "levantar" o botão. */
}

/* === Botão Menu Mobile (Hambúrguer) === */
.mobile-menu-btn {
    display: none;
    /* Escondido por defeito em PC */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1003;
    /* Fica acima de tudo, inclusive do menu e do overlay */
}

.mobile-menu-btn span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--cor-destaque);
    margin: 6px 0;
    transition: 0.4s;
    border-radius: 2px;
}

/* Animação do ícone quando o menu está aberto (vira um X) */
.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 7px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(45deg) translate(-6px, -7px);
}

/* === Overlay do Menu Mobile (Fundo Escuro) === */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Escurece o fundo */
    z-index: 1001;
    /* Fica acima do site, mas abaixo do menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    /* Desfoca ligeiramente o fundo */
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* === Rodapé === */
footer {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    text-align: center;
    padding: 2rem 1rem;
    border-top: 1px solid var(--cor-destaque);
}

.copyright {
    margin-top: 0;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}


/* === Conteúdo Principal e Secções === */
main {
    /* O padding vertical é 0 para que as secções controlem o seu próprio espaçamento. */
    padding: 0 2rem;
    margin-bottom: 2rem;
    /* Adiciona um espaço entre o fim do conteúdo principal e o rodapé. */
}

/* Estilo base para as secções dentro do <main> (Galeria, Contactos) */
main section {
    padding: 4rem 2rem;
    margin: 0 auto;
    max-width: 1000px;
    /* Limita a largura do conteúdo para melhor leitura em ecrãs grandes. */
    margin-top: 2rem;
    /* Margem no topo para separar as secções. */
    background-color: var(--cor-fundo-seccao);
    text-align: center;
    border-radius: 8px;
}

/* O texto dos parágrafos dentro das secções é justificado para um look mais limpo e alinhado. */
main section p {
    text-align: justify;
    hyphens: auto;
    /* Isto ajuda a evitar espaços muito grandes entre palavras em texto justificado. */
}


/* === SECÇÕES DA PÁGINA PRINCIPAL (index.html) === */

/* --- Secção Hero (a primeira secção visível) --- */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.664), rgba(0, 0, 0, 0.644)), url('imagens/barbearia.webp') no-repeat center center/cover;
    color: var(--cor-secundaria);
    /* A altura mínima é 100% da altura do ecrã (vh = viewport height) para um efeito mais imersivo. */
    min-height: 100vh;
    /* Agora a secção ocupa a altura total do ecrã ao carregar. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#hero h2 {
    font-size: 70px;
    padding-top: 0.1rem;
    text-shadow: var(--sombra-texto);
}

#hero p {
    font-size: 1.3rem;
    /* Tamanho do subtítulo reduzido */
    font-weight: bold;
}

/* --- Secção Sobre Nós --- */
#sobre {
    /* Anula os estilos gerais de 'main section' para que ocupe a largura toda. */
    max-width: none;
    border-radius: 0;

    /* Adiciona uma imagem de fundo com um gradiente escuro para legibilidade. */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('imagens/foto1.webp') no-repeat center center/cover;
    background-attachment: fixed;
    /* Efeito parallax: a imagem fica fixa durante o scroll. */
    color: var(--cor-secundaria);
    /* Texto branco para contraste. */

    /* Adiciona estilos para ocupar o ecrã inteiro e centrar o conteúdo. */
    min-height: 100vh;
    /* Garante que a secção ocupa a altura total do ecrã. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    /* Remove a margem superior para que cole na secção anterior. */
}

#sobre h2 {
    font-size: 3.5rem;
}

#sobre p {
    max-width: 600px;
    /* Limita a largura do parágrafo para melhor leitura. */
    margin-left: auto;
    margin-right: auto;
    /* Centra o parágrafo. */
    text-align: center;
    /* Garante que o texto do parágrafo fica centrado. */
    font-size: 1.1rem;
}

/* --- Pré-visualização da Galeria (na página inicial) --- */
.galeria-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Cria 3 colunas de tamanho igual. */
    gap: 1rem;
    /* Espaçamento entre as imagens. */
    margin-top: 2rem;
}

.preview-item {
    overflow: hidden;
    /* Esconde partes da imagem que saem do contentor durante o zoom. */
    border-radius: 8px;
    /* Cantos arredondados. */
    display: block;
    /* Garante que o link se comporta como um bloco. */
    aspect-ratio: 1 / 1;
    /* Força uma proporção quadrada para as imagens. */
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem preenche o espaço sem distorcer. */
    transition: transform 0.4s ease, filter 0.4s ease;
    /* Transição suave para o hover. */
    filter: brightness(0.9);
    /* Escurece ligeiramente a imagem. */
}

.preview-item:hover img {
    transform: scale(1.05);
    filter: brightness(1);
    /* Restaura o brilho original. */
}

/* --- Secção Contactos (na página inicial) --- */
.contact-layout {
    display: flex;
    align-items: center;
    /* Alinha os itens verticalmente ao centro. */
    gap: 2rem;
    /* Espaço entre os detalhes e o mapa. */
    margin-top: 2rem;
    flex-wrap: wrap;
    /* Permite que os itens quebrem para a linha de baixo em ecrãs pequenos. */
}

.contact-details {
    flex: 1;
    /* Permite que os detalhes de contacto cresçam para ocupar o espaço. */
    min-width: 280px;
    /* Reduzido para caber em ecrãs de 320px */
    text-align: left;
    /* O texto é alinhado à esquerda para melhor legibilidade dos detalhes. */
}

.contact-details p strong {
    color: var(--cor-destaque-clara);
    /* Destaca os títulos dos detalhes de contacto. */
}


/* === ESTILOS DE PÁGINAS ESPECÍFICAS === */

/* --- Página da Galeria (galeria.php) --- */

/* Estilos gerais para a página da galeria, usando a classe no <body>. */
.galeria-page {
    /* Garante que o fundo e a cor do texto são os mesmos do site principal. */
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
    /* O texto passa a ser escuro para contraste. */
}

/* Cabeçalho específico da página da galeria. */
.galeria-header,
.servicos-header {
    /* Adiciona a imagem de fundo e um gradiente escuro por cima para legibilidade. */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('imagens/barbearia.webp') no-repeat center center/cover;
    color: var(--cor-secundaria);
    /* O texto volta a ser branco para se destacar no fundo escuro. */
    padding: 6rem 2rem;
    /* Aumenta o padding para dar mais impacto. */
    text-align: center;
}

/* Garante que o título e o link dentro do cabeçalho da galeria usam as cores corretas. */
.galeria-header h1 {
    color: var(--cor-destaque-clara);
    font-size: 60px;
    /* Tamanho grande para destaque. */
    font-family: var(--fonte-titulos);
    text-shadow: 1px 1px 3px #000000;
}

.galeria-header .back-button {
    background-color: var(--cor-destaque-clara);
}

/* Na página da galeria, o <main> não tem padding para a grelha ocupar a largura toda. */
.galeria-page main {
    padding: 0;
    margin-bottom: 0;
    /* Remove a margem para que a grelha cole na secção do Instagram. */
}

/* A grelha que vai conter todas as imagens da galeria. */
.galeria-grid {
    display: grid;
    /* Ativa o layout de grelha (Grid). */
    /* Define uma grelha com exatamente 4 colunas de tamanho igual. */
    grid-template-columns: repeat(4, 1fr);
    /* Remove completamente o espaçamento entre as imagens, tanto na horizontal como na vertical. */
    gap: 0;
    /* Remove a largura máxima para que a grelha ocupe todo o espaço disponível. */
    max-width: 100%;
}

/* Estilo para cada item (imagem) dentro da grelha. */
.galeria-item {
    overflow: hidden;
    /* Esconde qualquer parte da imagem que saia do contentor (útil para o zoom). */
    position: relative;
    /* Necessário para efeitos de hover. */
    /* Define uma proporção de 4:3 (largura:altura), mais comum para fotografias.
       Isto evita que a imagem seja esticada e cortada de forma estranha. */
    aspect-ratio: 4 / 3;
}

.galeria-item img {
    width: 100%;
    /* A imagem deve ocupar 100% da altura do seu contentor (.gallery-item). */
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem preenche o espaço sem distorcer. */
    /* Por defeito, a imagem fica um pouco mais escura. 75% é um bom valor. */
    filter: brightness(75%);
    /* Adiciona uma transição suave para o efeito de zoom e para a mudança de brilho. */
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Efeito de zoom e restauro do brilho ao passar o rato por cima da imagem. */
.galeria-item:hover img {
    transform: scale(1.05);
    /* Aumenta ligeiramente o tamanho da imagem. */
    filter: brightness(100%);
    /* Restaura o brilho original. */
}

/* Secção Instagram (usada em galeria.php) */
.instagram-section {
    background-color: var(--cor-secundaria);
    /* Fundo branco suave, para criar contraste. */
    color: var(--cor-primaria);
    /* Texto escuro para ser legível no fundo claro. */
    text-align: center;
    padding: 4rem 1rem;
    /* Reduz o padding lateral para dar mais espaço ao widget */
    margin-top: 0;
    /* Remove a margem superior para colar na grelha de imagens. */
}

/* Título da secção */
.instagram-section h2 {
    color: var(--cor-primaria);
    /* Cor preta. */
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

/* Estilo para o parágrafo com o nome de utilizador. */
.instagram-section p {
    color: #555;
    /* TODO: Considerar criar variável --cor-texto-escuro-suave */
    margin-bottom: 2.5rem;
    /* Aumenta o espaço entre o texto e o feed */
    text-align: center;
}

/* Estilo para o contentor do cabeçalho da página (agenda_barbeiro.php) */
.page-header-container {
    text-align: center;
    margin-top: rem;
    /* Adiciona uma margem superior para espaçamento */
}

/* Mapa na secção de contactos (na página inicial) */
.mapa {
    flex: 1;
    /* Permite que o mapa cresça para ocupar o espaço. */
    min-width: 280px;
    /* Reduzido para caber em ecrãs pequenos */
    aspect-ratio: 16 / 9;
    /* Proporção para o mapa, para que não fique muito alto. */
}

.mapa iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* Adiciona cantos arredondados ao mapa. */
}

/* --- Páginas de Formulário (login.php, registo.php, marcacao.php) --- */
.form-page {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('imagens/barbearia.webp') no-repeat center center/cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
}

/* O contentor branco/cinza que envolve o formulário. */
.form-container {
    background-color: var(--cor-fundo-seccao);
    padding: 2.5rem;
    border-radius: 8px;
    width: 90%;
    /* Mudado de 35% para 90% para funcionar bem em tablets e telemóveis */
    max-width: 450px;
    /* Limite máximo ligeiramente maior para conforto */
    text-align: center;
    border: 1px solid var(--cor-destaque);
}

.form-container h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

/* O logo "Souto Barbearia" no topo dos formulários. */
.form-logo h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--cor-secundaria);
}

.form-logo {
    display: inline-block;
    /* Garante que a transformação funciona corretamente. */
    transition: transform 0.3s ease-in-out;
}

.form-logo:hover {
    transform: scale(1.05);
    /* Efeito de zoom subtil ao passar o rato. */
}

.form-group {
    margin-bottom: 2rem;
    /* Aumenta o espaçamento entre os campos do formulário. */
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cor-secundaria);
    font-weight: 600;
}

.form-group .center-label {
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--cor-secundaria);
    font-weight: 600;
}

/* Estilo unificado para todos os campos de formulário (input e select). */
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--cor-primaria);
    border: 1px solid var(--cor-borda-escura);
    border-radius: 5px;
    color: var(--cor-secundaria);
    font-size: 1rem;
    font-family: var(--fonte-principal);
    /* Garante a consistência da fonte. */
    -webkit-appearance: none;
    /* Remove o estilo padrão do navegador (Chrome, Safari). */
    -moz-appearance: none;
    /* Remove o estilo padrão do navegador (Firefox). */
    appearance: none;
    /* Remove o estilo padrão do navegador. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--cor-destaque);
    box-shadow: 0 0 8px rgba(197, 164, 126, 0.3);
    outline: none;
}

/* Seta personalizada dourada para o select (Horário) */
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c5a47e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* === Grelha de Horários (Substitui o Select antigo) === */
.horarios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 horários por linha */
    gap: 10px;
    margin-top: 0.5rem;
}

.horario-btn {
    background-color: var(--cor-primaria);
    border: 1px solid var(--cor-borda-escura);
    color: var(--cor-secundaria);
    padding: 0.8rem 0;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--fonte-principal);
    font-size: 0.9rem;
    text-align: center;
}

.horario-btn:hover {
    border-color: var(--cor-destaque);
    background-color: rgba(197, 164, 126, 0.1);
    transform: translateY(-2px);
}

.horario-btn.selected {
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
    border-color: var(--cor-destaque);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(197, 164, 126, 0.3);
}

.msg-horarios {
    color: var(--cor-texto-suave);
    font-size: 0.9rem;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    grid-column: 1 / -1;
    /* Ocupa a largura toda */
}

@media (max-width: 360px) {
    .horarios-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 por linha em ecrãs muito pequenos (ex: iPhone SE) */
    }
}

@media (max-width: 480px) {
    .horarios-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 por linha em telemóveis */
    }
}

/* Garante que o botão ocupa a largura total do formulário. */
.form-container .cta-button {
    width: 100%;
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* Estilo para o texto de troca (ex: "Não tem conta? Registe-se aqui"). */
.form-switch {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* --- Página de Serviços (servicos.php) --- */

/* Estilos para o corpo da página de serviços */
.servicos-page {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.servicos-header h1 {
    color: var(--cor-destaque);
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: var(--sombra-texto);
}

/* Conteúdo principal da página de serviços */
.servicos-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Categoria de serviço (ex: "Cortes de Cabelo") */
.servico-categoria {
    margin-bottom: 4rem;
}

.servico-categoria h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--cor-destaque);
    padding-bottom: 0.5rem;
    display: inline-block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Adiciona uma sombra para dar profundidade ao título. */
}

/* Grelha para os itens de serviço */
.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Ajustado para 280px para evitar quebra em ecrãs pequenos */
    gap: 2rem;
}

/* Cartão individual de cada serviço */
.servico-item {
    background-color: var(--cor-fundo-seccao);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda-escura);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.servico-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.servico-item h3 {
    font-size: 1.5rem;
}

.servico-item p {
    flex-grow: 1;
    color: #ccc;
}

/* TODO: Considerar criar variável --cor-texto-cinza */
.servico-item .preco {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--cor-destaque);
    text-align: right;
    margin-top: 1rem;
    flex-grow: 0;
}

/* === Media Queries para Responsividade === */
/* Media queries ajustam o layout para diferentes tamanhos de ecrã. */
/* Para tablets em modo paisagem e alguns portáteis (até 1024px) */

/* Correção específica para iOS (iPhone/iPad) onde 'fixed' causa problemas de zoom/jitter */
@media (hover: none) and (pointer: coarse) {

    .form-page,
    #sobre,
    .agenda-body-background,
    .galeria-header,
    .servicos-header {
        background-attachment: scroll !important;
        background-size: cover;
    }
}

@media (max-width: 1024px) {
    header nav ul {
        gap: 1.2rem;
    }

    header li {
        font-size: 17px;
        /* Tamanho do menu reduzido para esta resolução */
    }

    main section {
        padding: 3rem 1.5rem;
    }

    #hero h2 {
        font-size: 4.5rem;
        /* Reduz o tamanho do título principal */
    }
}

/* Para tablets (iPad) e telemóveis (até 1024px) - Menu Hambúrguer e Layout Fluido */
@media (max-width: 1024px) {

    /* Mostra o botão hambúrguer */
    .mobile-menu-btn {
        display: block;
    }

    /* Transforma a lista de links num menu lateral */
    header nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        /* Começa escondido fora do ecrã à direita */
        width: 75%;
        /* Ocupa 75% da largura */
        height: 100vh;
        /* Altura total */
        background-color: rgba(10, 10, 10, 0.98);
        /* Fundo escuro quase opaco */
        backdrop-filter: blur(10px);
        flex-direction: column;
        /* Links um debaixo do outro */
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
        /* Animação suave de deslize */
        z-index: 1002;
        /* Fica acima do overlay */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        gap: 2rem;
        /* Mais espaço entre os links */
        gap: 3rem;
        /* Mais espaço entre os links */
    }

    /* Classe adicionada via JS para abrir o menu */
    header nav ul.active {
        right: 0;
    }

    #hero p {
        font-size: 1.2rem;
    }

    main {
        padding: 0 1rem;
        /* Reduz o espaçamento lateral do conteúdo principal */
    }

    header li {
        font-size: 1.3rem;
        /* Aumenta o texto dos links no telemóvel */
    }

    #hero h2,
    #sobre h2,
    .servicos-header h1 {
        font-size: 3rem;
        /* Reduz ainda mais o título */
    }


    /* Ajustes para o layout de contactos e pré-visualização da galeria */
    .contact-layout {
        flex-direction: column;
        /* Coloca o mapa debaixo dos detalhes em tablets e telemóveis. */
    }

    /* Em ecrãs mais pequenos, as imagens da pré-visualização ficam numa única coluna. */
    .galeria-preview {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .servico-categoria h2 {
        font-size: 2rem;
    }

    /* Ajusta a grelha principal da galeria para 2 colunas */
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Para a maioria dos telemóveis (até 480px) */
@media (max-width: 480px) {
    body {
        line-height: 1.4;
        /* Altura de linha ligeiramente menor para ecrãs pequenos */
    }

    /* === Ajustes do Menu (Cabeçalho) === */
    header {
        padding: 1rem 0;
        /* Ajustado para não ficar tão colado ao topo */
    }

    /* Garante que o logo e o botão ficam na mesma linha */
    .header-content {
        padding: 0 1rem;
        flex-direction: row;
        justify-content: space-between;
    }

    header h1 {
        font-size: 1.4rem;
        /* Logo mais pequeno */
    }

    .cta-button {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }

    /* Ajustes para a página de serviços em telemóveis */
    .servicos-main {
        padding: 2rem 1rem;
    }

    .servicos-grid {
        grid-template-columns: 1fr;
        /* Uma coluna em telemóveis */
    }

    /* Ajusta a grelha principal da galeria para 1 coluna */
    .galeria-grid {
        grid-template-columns: 1fr;
    }

    /* === Ajustes de Texto e Títulos === */
    #hero h2 {
        font-size: 2rem;
        /* Reduz o título principal gigante */
        line-height: 1.2;
    }

    #hero p {
        font-size: 1rem;
        /* Reduz o subtítulo */
        padding: 0 1rem;
    }

    /* Ajustes para reduzir a secção Sobre Nós em telemóveis */
    #sobre {
        min-height: auto;
        /* Deixa de ocupar o ecrã inteiro */
        padding: 4rem 1rem;
    }

    #sobre h2 {
        font-size: 2rem;
    }

    /* Remove o texto justificado em telemóveis para ficar tudo centrado e legível */
    main section p {
        text-align: center;
        font-size: 0.95rem;
    }

    /* === Melhorias na Página de Marcação (Mobile) === */
    .form-page {
        padding: 5rem 0.5rem 2rem 0.5rem;
        /* Mais espaço no topo, maximiza largura lateral */
        align-items: flex-start;
        /* Alinha ao topo para evitar cortes em ecrãs pequenos */
        height: auto;
        /* Permite crescer além da altura do ecrã */
    }

    .form-container {
        padding: 1rem 0.5rem;
        /* Reduz padding interno para ganhar espaço */
        width: 100%;
        border: none;
        /* Remove borda para aspeto mais limpo */
        background-color: transparent;
        /* Remove o fundo da caixa para integrar na página */
    }

    .form-logo h1 {
        font-size: 2.2rem;
        /* Logo maior na página de marcação */
    }

    /* Aumenta o tamanho dos inputs e labels para toque fácil */
    .form-group label,
    .form-group .center-label {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .form-group input {
        padding: 15px;
        /* Input mais alto */
        font-size: 1.1rem;
        height: 55px;
    }

    /* Botões de categoria maiores e centrados em telemóveis */
    .categoria-tabs {
        gap: 15px;
        /* Aumenta o espaço entre os botões */
        margin-bottom: 1.5rem;
    }

    .categoria-btn {
        /* A propriedade 'flex: 1' foi removida para que os botões não estiquem. */
        padding: 12px 25px;
        /* Aumenta a área de toque sem esticar. */
        font-size: 1rem;
    }

    /* Lista de serviços em coluna única para melhor leitura */
    .servicos-lista {
        grid-template-columns: 1fr;
        /* Uma coluna apenas */
        gap: 15px;
    }

    /* Cartão de serviço otimizado para mobile, com texto que quebra a linha */
    .servico-card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 12px 15px;
        /* Padding vertical reduzido para mais espaço */
        background-color: var(--cor-fundo-seccao);
        border: 1px solid var(--cor-borda-escura);
    }

    /* Container para nome e duração */
    .servico-info {
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        /* Espaço reduzido entre info e preço */
        /* A combinação de flex:1 e min-width:0 é crucial para permitir
           que o texto quebre a linha em vez de empurrar o preço para fora. */
        flex: 1;
        /* Ocupa o espaço disponível */
        min-width: 0;
        /* Permite que o container encolha abaixo do seu conteúdo */
    }

    .servico-card h4 {
        font-size: 0.95rem !important;
        /* Tamanho do texto ligeiramente reduzido */
        margin-bottom: 2px !important;
        line-height: 1.3;
        /* Melhora o aspeto se o nome do serviço tiver 2 linhas */
    }

    .servico-card .servico-duracao {
        font-size: 0.8rem !important;
        /* Tamanho do texto reduzido */
        color: var(--cor-texto-suave) !important;
    }

    .servico-card .servico-preco {
        /* Preço */
        font-size: 1.0rem !important;
        /* Tamanho do preço reduzido */
        font-weight: bold;
        white-space: nowrap;
    }

    /* Grelha de horários com botões maiores */
    .horarios-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colunas para botões maiores */
        gap: 12px;
    }

    /* Botões de horário mais altos e legíveis */
    .horario-btn {
        padding: 15px 0;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    /* Botão de Agendar Gigante */
    .form-container .cta-button {
        padding: 1.2rem;
        font-size: 1.3rem;
        margin-top: 2rem;
        border-radius: 50px;
        /* Estilo mais moderno/app */
        box-shadow: 0 4px 15px rgba(197, 164, 126, 0.4);
    }
}

/* Media Query específica para os formulários em ecrãs pequenos (até 600px) */
@media (max-width: 600px) {
    .form-container {
        /* width: 90% já está definido na regra principal agora */
        padding: 20px;
        /* Reduz o espaçamento interno */
    }

    .form-page h2 {
        font-size: 1.8rem;
        /* Reduz o tamanho do título principal */
    }
}

/* Estilo para o contentor do cabeçalho da página (agenda_barbeiro.php) */
.page-header-container {
    text-align: center;
    margin-top: 2rem;
    /* Adiciona uma margem superior para espaçamento */
}

/* Estilo para o background da página da agenda do barbeiro */
.agenda-body-background {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('imagens/barbearia.webp') no-repeat center center/cover;
    min-height: 100vh;
    background-attachment: fixed;
    /* Adiciona efeito parallax */
}

/* Contentor que envolve o calendário, dando-lhe um fundo escuro e centrando-o. */
.agenda-calendario {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: var(--cor-fundo-seccao);
    /* Fundo escuro */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--cor-secundaria);
    /* Garante que o texto do calendário é visível sobre o fundo escuro */
}

/* Estilo para os botões do FullCalendar (ex: "mês", "semana", "hoje"). */
.fc .fc-button-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.fc .fc-button-primary:hover {
    background-color: #222;
    border-color: #222;
}

/* Estilo para os eventos (as marcações) dentro do calendário. */
.fc-event {
    background-color: var(--cor-destaque) !important;
    border-color: var(--cor-destaque) !important;
    color: var(--cor-primaria) !important;
    font-weight: 600;
}

/* === Estilos para o botão de ver palavra-passe === */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    padding-right: 2.5rem;
    /* Adiciona espaço para o ícone */
}

.toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Impede que o texto seja selecionado */
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* === Estilos para o ícone de calendário no campo de data === */
.date-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.calendar-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    stroke: var(--cor-destaque);
    /* Ícone dourado */
    transition: transform 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
}

/* Esconde o ícone de calendário padrão do navegador */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.date-wrapper:hover .calendar-icon {
    transform: translateY(-50%) scale(1.1);
}

input[type="date"] {
    color-scheme: dark;
    /* Garante que o calendário nativo seja escuro */
}

/* Estilos para o container do calendário */
.agenda-calendario {
    max-width: 900px;
    margin: 2rem auto;
    background-color: var(--cor-fundo-seccao);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 600px;
}

/* Estilos para os botões e eventos do FullCalendar */
.fc .fc-button-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.fc .fc-button-primary:hover {
    background-color: #222;
    border-color: #222;
}

.fc-event {
    background-color: var(--cor-destaque) !important;
    border-color: var(--cor-destaque) !important;
    color: var(--cor-primaria) !important;
    font-weight: 600;
}

/* === Estilos Específicos para o FullCalendar === */

/* Cor do fundo e texto principal da caixa do calendário */
.agenda-calendario {
    max-width: 1200px;
    /* Aumentar largura para melhor visualização */
    margin: 2rem auto;
    background-color: var(--cor-fundo-seccao);
    /* #1a1a1a */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* Sombra mais forte */
    min-height: 700px;
    /* Garantir que ocupe espaço */
    color: var(--cor-secundaria);
    /* Texto Geral Branco */
}

/* Título e botões da barra de ferramentas (Mês, Semana, Hoje) */
.fc .fc-toolbar-title,
.fc .fc-button {
    color: var(--cor-secundaria) !important;
    /* Branco */
}

/* Fundo dos botões da barra de ferramentas */
.fc .fc-button-primary {
    background-color: var(--cor-destaque-clara);
    /* Bronze */
    border-color: var(--cor-destaque-clara);
}

/* Cor do texto nos cabeçalhos (dias da semana) e números dos dias */
.fc-col-header-cell,
.fc-daygrid-day-number,
.fc-timegrid-slot-label,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--cor-texto-suave);
    /* Cinza claro */
}

/* Cor da linha do tempo se estiver em timeGrid */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--cor-borda-escura);
}

/* Cor do evento (para estados não confirmados/pendentes) */
.fc-event {
    color: #fff !important;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Força o rodapé a ficar no fundo da página */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

/* Estilo do Painel da Tabela (Vidro Escuro) */
.marcacoes-panel {
    background-color: rgba(18, 18, 18, 0.98);
    /* Fundo quase opaco */
    border: 1px solid #c5a47e;
    /* Borda Dourada */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    padding: 20px;
    margin-bottom: 40px;
}

/* Estilo da Tabela */
.custom-table {
    width: 100%;
    color: #e0e0e0;
    border-collapse: separate;
    border-spacing: 0 10px;
    /* Espaço entre linhas */
}

.custom-table thead th {
    color: #c5a47e;
    /* Texto Dourado */
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    border-bottom: 2px solid #c5a47e;
    padding: 15px 20px;
    text-align: left;
}

.custom-table tbody tr {
    background-color: rgba(255, 255, 255, 0.05);
    transition: transform 0.2s, background-color 0.2s;
}

.custom-table tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.1);
    /* Brilho dourado ao passar o rato */
    transform: scale(1.01);
}

.custom-table td {
    padding: 25px;
    border-top: 1px solid #333;
    vertical-align: middle;
}

/* Estilo dos Estados */
.status-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-confirmada {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.status-pendente {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid #ffc107;
}

.status-cancelada {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.status-concluida { 
	background-color: rgba(108, 117, 125, 0.2); 
	color: #aaaaaa; 
	border: 1px solid #aaaaaa; }

/* Botão Cancelar */
.btn-cancelar {
    background-color: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.btn-cancelar:hover {
    background-color: #dc3545;
    color: white;
}

/* NOVO: Container para a página de marcações */
.marcacoes-container {
    margin-top: 70px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px;
}

/* NOVO: Responsividade para a Tabela de Marcações (Modo Card Mobile) */
@media (max-width: 768px) {
    .marcacoes-container {
        margin-top: 110px;
        /* Mais espaço para o cabeçalho fixo */
        padding: 0 15px;
    }

    .marcacoes-panel {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .custom-table thead {
        display: none;
        /* Esconde o cabeçalho da tabela */
    }

    .custom-table,
    .custom-table tbody,
    .custom-table tr,
    .custom-table td {
        display: block;
        width: 100%;
    }

    .custom-table tr {
        margin-bottom: 20px;
        background-color: rgba(30, 30, 30, 0.98);
        border: 1px solid var(--cor-borda-escura);
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .custom-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 12px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .custom-table td:last-child {
        border-bottom: none;
        justify-content: center;
        padding-top: 15px;
    }

    .custom-table td::before {
        content: attr(data-label);
        /* Usa o atributo data-label como título */
        font-weight: bold;
        color: var(--cor-destaque);
        text-transform: uppercase;
        font-size: 0.8rem;
        margin-right: 10px;
    }
}

/* === Seletor de Serviços por Categoria (Menu de Abas) === */
.categoria-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.categoria-btn {
    background-color: transparent;
    border: 1px solid var(--cor-destaque);
    color: var(--cor-secundaria);
    padding: 8px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--fonte-principal);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.categoria-btn.active,
.categoria-btn:hover {
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
    box-shadow: 0 4px 12px rgba(197, 164, 126, 0.3);
}

.servicos-lista {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    animation: fadeIn 0.4s ease;
}

.servicos-lista.active {
    display: grid;
}

.servico-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cor-borda-escura);
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
}

.servico-card:hover,
.servico-card.selected {
    border-color: var(--cor-destaque);
    background-color: rgba(197, 164, 126, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.servico-card h4 {
    font-size: 0.95rem;
    color: var(--cor-secundaria);
    margin-bottom: 5px;
    font-weight: 600;
}

.servico-card .servico-preco {
    color: var(--cor-destaque);
    font-weight: bold;
    font-size: 1.1rem;
}

.servico-card .servico-duracao {
    color: #888;
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Classe utilitária para tabelas responsivas (caso sejam usadas) */
.table-responsive {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Garante que em mobile/tablet não aparece scroll na tabela (que vira cards) */
@media (max-width: 1024px) {
    .table-responsive {
        overflow-x: visible;
    }
}

/* === Custom Modal / Notificações === */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.custom-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.custom-modal {
    background-color: var(--cor-fundo-seccao);
    border: 1px solid var(--cor-destaque);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.custom-modal-overlay.active .custom-modal {
    transform: scale(1);
}

.custom-modal h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--cor-destaque);
}

.custom-modal p {
    color: var(--cor-secundaria);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* === Mensagens de Alerta (Feedback) === */
.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid transparent;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    /* Verde transparente */
    color: #5cd675;
    /* Verde claro legível */
    border-color: #28a745;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    /* Vermelho transparente */
    color: #ff8585;
    /* Vermelho claro legível */
    border-color: #dc3545;
}

.alert-warning {
    background-color: rgba(197, 164, 126, 0.1);
    color: rgb(255, 255, 255);
    border-color: rgba(197, 164, 126, 0.1);
}

/* === Media Queries para Responsividade === */

/* Para ecrãs pequenos (telemóveis, até 600px) */
@media (max-width: 600px) {

    /* Ajustes gerais de espaçamento e fontes */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 2.5rem;
        /* Ajusta o tamanho do título principal */
    }

    h2 {
        font-size: 2rem;
    }

    .header-content {
        padding: 0 1rem;
        /* Reduz o padding do cabeçalho */
    }

    header h1 {
        font-size: 22px;
    }

    header nav ul {
        gap: 1rem;
        /* Reduz o espaçamento entre itens do menu */
    }

    /* Secção Hero */
    #hero h2 {
        font-size: 3rem;
        /* Reduz o tamanho do título na secção hero */
    }

    #hero p {
        font-size: 1rem;
        /* Reduz o tamanho do subtítulo na secção hero */
    }

    /* Botões de Categoria */
    .categoria-tabs {
        flex-direction: column;
        /* Empilha os botões verticalmente */
        align-items: center;
        gap: 0.5rem;
    }

    .categoria-btn {
        width: 90%;
        /* Ocupa quase toda a largura */
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    /* Lista de Serviços (Cards) */
    .servicos-lista {
        grid-template-columns: 1fr;
        /* Um cartão por linha em ecrãs muito pequenos */
        gap: 10px;
        padding: 0 1rem;
    }

    .servico-card {
        padding: 12px;
    }

    .servico-card h4 {
        font-size: 0.9rem;
    }

    .servico-card .servico-preco {
        font-size: 1rem;
    }

    .servico-card .servico-duracao {
        font-size: 0.75rem;
    }

    /* Formulário de Marcação */
    .form-group input,
    .form-group select {
        padding: 10px;
        font-size: 1rem;
    }

    .date-wrapper,
    .password-wrapper {
        width: 100%;
    }

    .calendar-icon {
        right: 5px;
    }

    /* Rodapé */
    footer {
        padding: 1.5rem 1rem;
    }
}

/* Para ecrãs médios (tablets, entre 601px e 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }

    .header-content {
        padding: 0 1.5rem;
    }

    header h1 {
        font-size: 24px;
    }

    header nav ul {
        gap: 1.5rem;
    }

    #hero h2 {
        font-size: 4.5rem;
    }

    #hero p {
        font-size: 1.2rem;
    }

    .categoria-tabs {
        gap: 15px;
    }

    .categoria-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .servicos-lista {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        /* 2 ou 3 cartões por linha */
        gap: 15px;
        padding: 0 1.5rem;
    }

    .servico-card {
        padding: 15px;
    }

    .servico-card h4 {
        font-size: 1rem;
    }

    .servico-card .servico-preco {
        font-size: 1.1rem;
    }

    .servico-card .servico-duracao {
        font-size: 0.8rem;
    }

    /* Formulário de Marcação */
    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 1.05rem;
    }

    .date-wrapper,
    .password-wrapper {
        width: 100%;
    }
}

/* Para ecrãs grandes (desktops, acima de 1024px) */
@media (min-width: 1025px) {
    .header-content {
        max-width: 1200px;
        padding: 0 2rem;
    }

    #hero h2 {
        font-size: 70px;
    }

    #hero p {
        font-size: 1.3rem;
    }

    .servicos-lista {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        /* Mais cartões por linha */
        gap: 20px;
        max-width: 900px;
        /* Limita a largura para melhor visualização */
        margin: 0 auto;
    }

    .categoria-tabs {
        max-width: 800px;
        margin: 0 auto 20px auto;
    }
}

/* Ajustes para o menu mobile, garantindo que o botão hambúrguer aparece apenas em ecrãs pequenos */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
        /* Mostra o botão hambúrguer */
    }

    header nav ul {
        display: none;
        /* Esconde o menu de navegação padrão */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -300px;
        /* Esconde o menu fora da tela */
        width: 250px;
        height: 100vh;
        background-color: var(--cor-fundo-seccao);
        padding-top: 5rem;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease-in-out;
        z-index: 1002;
    }

    header nav ul.active {
        right: 0;
        /* Mostra o menu */
        display: flex;
        /* Garante que o menu é visível quando ativo */
    }

    header nav li {
        margin-bottom: 1rem;
        text-align: center;
    }

    header nav a {
        font-size: 1.2rem;
    }

    header .login-item a {
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
    }
}

/* Ajustes para o layout da página de marcação */
.booking-section {
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 70px auto 2rem auto;
    /* Ajusta a margem superior para o cabeçalho fixo */
    background-color: var(--cor-fundo-seccao);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    color: var(--cor-secundaria);
    text-align: center;
}

.booking-section h2 {
    color: var(--cor-destaque);
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
}

.booking-section p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--cor-texto-suave);
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cor-destaque-clara);
    font-weight: 600;
    font-size: 1rem;
}

.form-group input[type="date"],
.form-group input[type="time"],
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--cor-borda-escura);
    border-radius: 5px;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    font-size: 1.05rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="date"]:focus,
.form-group input[type="time"]:focus,
.form-group select:focus {
    border-color: var(--cor-destaque);
    box-shadow: 0 0 0 3px rgba(197, 164, 126, 0.3);
}

.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c5a47e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.6c0%204.8%201.8%209.3%205.4%2013.2l128%20127.9c3.9%203.9%208.4%205.4%2013.2%205.4s9.3-1.8%2013.2-5.4l128-127.9c3.6-3.9%205.4-8.4%205.4-13.2%200-4.8-1.8-9.3-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    /* Espaço para a seta */
}

.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    margin-top: 2rem;
}

.submit-btn:hover {
    background-color: var(--cor-destaque-clara);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Ajustes para a imagem de fundo da secção de marcação */
.agenda-body-background {
    background-attachment: scroll;
    /* Desativa o parallax em mobile para melhor performance */
}

/* Ajustes para o modal em ecrãs pequenos */
@media (max-width: 600px) {
    .custom-modal {
        padding: 1.5rem;
        max-width: 95%;
    }

    .custom-modal h3 {
        font-size: 1.5rem;
    }

    .custom-modal p {
        font-size: 1rem;
    }

    .modal-buttons {
        flex-direction: column;
        gap: 0.8rem;
    }

    .modal-buttons .cta-button {
        width: 100%;
    }
}

/* === Ajustes Específicos para o FullCalendar em Mobile === */
@media (max-width: 768px) {
    .agenda-calendario {
        padding: 0.5rem;
        /* Reduz o padding do container do calendário */
        margin: 1rem auto;
        /* Ajusta a margem */
        min-height: auto;
        /* Remove altura mínima fixa */
    }

    /* Ajusta o cabeçalho do calendário (título e botões de navegação) */
    .fc .fc-toolbar-title {
        font-size: 1.2rem;
        /* Reduz o tamanho do título do mês/ano */
        white-space: normal;
        /* Permite que o título quebre linha */
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        /* Permite que os botões quebrem linha */
        justify-content: center;
        /* Centra os botões */
        margin-bottom: 0.5rem;
    }

    .fc .fc-button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        /* Garante que o grupo de botões ocupa a largura total */
        margin-bottom: 0.5rem;
    }

    .fc .fc-button {
        padding: 0.5rem 0.8rem;
        /* Ajusta o padding dos botões */
        font-size: 0.8rem;
        /* Reduz o tamanho da fonte dos botões */
        margin: 0.2rem;
        /* Adiciona margem entre os botões */
        flex-grow: 1;
        /* Permite que os botões cresçam para preencher o espaço */
        min-width: 60px;
        /* Largura mínima para botões */
    }

    /* Esconde os nomes completos dos dias da semana em ecrãs pequenos */
    .fc-col-header-cell-cushion {
        font-size: 0.75rem;
    }

    .fc-daygrid-day-number {
        font-size: 0.8rem;
        /* Reduz o tamanho dos números dos dias */
    }

    /* Ajusta o tamanho das células do calendário */
    .fc-daygrid-day {
        padding: 2px;
    }

    /* Ajusta o tamanho dos eventos no calendário */
    .fc-event {
        font-size: 0.7rem;
        padding: 1px 2px;
    }

    /* Ajustes para a visualização de lista (se usada) */
    .fc-list-day-text,
    .fc-list-day-side-text {
        font-size: 0.9rem;
    }

    /* Ajustes para o timegrid (visualização de semana/dia com horas) */
    .fc-timegrid-slot-label {
        font-size: 0.7rem;
    }

    /* Garante que o calendário não transborda */
    .fc-view-harness {
        overflow-x: auto;
        /* Permite scroll horizontal se necessário */
        -webkit-overflow-scrolling: touch;
    }

    .fc-scrollgrid-sync-table {
        width: 100% !important;
        /* Garante que a tabela do calendário ocupa a largura total */
        min-width: 300px;
        /* Garante uma largura mínima para evitar colapso */
    }

    /* Ajustes para o cabeçalho da tabela de dias da semana */
    .fc-col-header-cell {
        padding: 0.3rem 0;
    }

    /* Esconde os nomes completos dos dias da semana, mostra apenas as iniciais */
    .fc-col-header-cell .fc-widget-header span {
        display: none;
    }

    .fc-col-header-cell .fc-widget-header span:first-letter {
        display: inline;
    }

    /* Ajusta o espaçamento dos botões de navegação */
    .fc-button-group .fc-button {
        margin: 0 2px;
    }

    /* Ajusta o espaçamento dos botões de visualização (Mês, Semana, Dia) */
    .fc-button-group:last-child .fc-button {
        margin: 0 2px;
    }
}

/* Ajustes para ecrãs um pouco maiores que mobile, mas ainda pequenos (ex: tablets em modo retrato) */
@media (min-width: 601px) and (max-width: 1024px) {
    .fc .fc-toolbar-title {
        font-size: 1.5rem;
    }

    .fc .fc-button {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .agenda-calendario {
        max-width: 700px;
        /* Limita a largura em tablets */
    }
}