/*
 * Estilos específicos para as páginas de guia (Viagem, Hospedagem, etc.).
 * Eles complementam os estilos gerais do main.css.
 */

/* Estilo para o link de 'Voltar' */
.back-link {
    display: inline-block;
    margin-bottom: 2rem;
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.back-link:hover {
    color: var(--primary-color);
}

/* Centraliza o conteúdo dentro dos cards e adiciona espaçamento extra */
.main-content-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    text-align: center;
}

.main-content-card h2,
.main-content-card h3 {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Contêineres de informação para espaçamento uniforme e alinhamento */
.info-list,
.travel-info,
.activity-list,
.hotel-info,
.salon-section,
.barbershop-section {
    width: 100%;
    max-width: 800px;
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.6);
}

/* Ajustes de tipografia e espaçamento para listas de informação */
.info-list p,
.travel-info p,
.activity-list p,
.hotel-info p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* Estilo para as imagens dos hotéis, atividades e salão/barbearia */
.hotel-image,
.activity-image,
.salon-image,
.barbershop-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 25px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--primary-color);
}

/* Estilo da tabela de roteiro */
.itinerary-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.itinerary-table th,
.itinerary-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.itinerary-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

.itinerary-table tr:nth-child(even) {
    background-color: #f8f8f8;
}

/* Estilos do painel de clima */
.weather-panel {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.weather-info {
    text-align: center;
    margin: 0;
}

.weather-info p {
    margin: 0;
    font-size: 1.1em;
}

.weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}

#temperature {
    font-family: var(--font-heading);
    font-size: 3.5em;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1;
}

#weather-icon {
    width: 80px;
    height: 80px;
    margin-right: 15px;
}

#description {
    font-family: var(--font-body);
    font-size: 1.2em;
    text-transform: capitalize;
    color: var(--text-color);
    margin-top: -10px;
}

/* Novo estilo para forçar o alinhamento do rodapé */
.main-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

/* Estilos para centralizar e alinhar itens de atividade */
.activity-item {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.activity-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 15px;
}

/* Adiciona espaçamento superior para os botões nas seções de guia (geral) */
.hotel-info .btn-primary,
.salon-section .btn-primary,
.barbershop-section .btn-primary,
.activity-item .btn-primary {
    margin-top: 25px;
    color: white !important;
    text-decoration: none !important;
}
.hotel-info .btn-primary:hover,
.salon-section .btn-primary:hover,
.barbershop-section .btn-primary:hover,
.activity-item .btn-primary:hover {
    text-decoration: none !important;
}

/*
 * NOVOS ESTILOS
 */

/* Alinha o texto das seções do salão e barbearia */
.salon-section, .barbershop-section {
    text-align: center;
    /* Adiciona uma largura máxima e centraliza os blocos */
    max-width: 400px;
    margin: 0 auto 30px auto;
}

/* Centraliza os botões em telas pequenas e maiores */
.salon-section a, .barbershop-section a {
    /* Define o botão como um bloco para permitir o alinhamento central */
    display: block;
    /* Define uma largura máxima e centraliza o botão */
    max-width: 250px;
    margin: 10px auto;
}

/* O media query original para desktop não é mais necessário, mas não causa problemas */
/*
@media (min-width: 769px) {
    .salon-section a, .barbershop-section a {
        width: auto;
        margin: 10px;
    }
}
*/

@media (max-width: 768px) {
    .main-content-card {
        padding: 30px 15px;
    }

    .hotel-image,
    .activity-image,
    .salon-image,
    .barbershop-image {
        width: 150px;
        height: 150px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .info-list,
    .travel-info,
    .activity-list,
    .hotel-info,
    .salon-section,
    .barbershop-section {
        padding: 1rem;
    }

    .section-title {
        font-size: 2em;
    }

    .itinerary-table {
        font-size: 0.8em;
    }
}