/* ==========================================
   BLOCO 1: DEFINIÇÕES CSS CUSTOM PROPERTIES
   Responsabilidade: Variáveis CSS para consistência de design
   ========================================== */

/* Raíz com variáveis CSS personalizadas */
:root {
    /* Cores principais do sistema */
    --primary-color: #0B3D91;
    --primary-dark: #072a66;
    --secondary-color: #00B4D8;
    --secondary-dark: #0096c7;
    --text-color: #333;
    --text-light: #666;
    --white: #ffffff;
    --light-bg: #f5f5f5;
    --border-color: #ddd;
    
    /* Sombras para efeitos visuais */
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
    
    /* Transições e animações */
    --transition: all 0.3s ease;
    
    /* Dimensões e formas */
    --border-radius: 8px;
    --header-height: 70px;
}

/* ==========================================
   BLOCO 2: RESET CSS UNIVERSAL
   Responsabilidade: Normalizar comportamento cross-browser
   ========================================== */

/* Reset universal para elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   BLOCO 3: ESTILOS DO CORPO DA PÁGINA
   Responsabilidade: Configuração base da página
   ========================================== */

/* Configurações globais do body */
body {
    font-family: 'Arial', sans-serif; /* Fonte principal */
    line-height: 1.6; /* Altura de linha */
    color: var(--text-color); /* Cor do texto */
    background-color: var(--light-bg); /* Cor de fundo */
}

/* ==========================================
   BLOCO 4: CONTAINER PRINCIPAL
   Responsabilidade: Layout centralizado responsivo
   ========================================== */

/* Container com largura máxima */
.container {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
    padding: 0 20px; /* Espaçamento lateral */
}

/* ==========================================
   BLOCO 5: HEADER DO PACOTE
   Responsabilidade: Seção hero com imagem de fundo
   ========================================== */

/* Header principal da página de detalhes */
.package-header {
    position: relative; /* Para posicionamento absoluto dos elementos filhos */
    height: 60vh; /* 60% da altura da viewport */
    min-height: 400px; /* Altura mínima */
    overflow: hidden; /* Ocultar conteúdo que extrapola */
    display: flex; /* Layout flexbox para centralização */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    color: white; /* Texto branco */

}

/* ==========================================
   BLOCO 6: IMAGEM DE FUNDO DO HEADER
   Responsabilidade: Imagem de fundo do header
   ========================================== */

/* Imagem de fundo do header */
.header-bg-image {
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Manter proporções da imagem */
}

/* ==========================================
   BLOCO 8: CONTEÚDO DO HEADER
   Responsabilidade: Texto sobreposto no header
   ========================================== */

/* Container do conteúdo textual do header */
.package-header-content {
    position: relative; /* Para estar acima do overlay */
    z-index: 3; /* Camada superior */
    text-align: center; /* Centralização do texto */
    max-width: 800px; /* Largura máxima para legibilidade */
    padding: calc(var(--header-height) / 2) 20px 0 20px; /* Espaçamento responsivo */
}

/* ==========================================
   BLOCO 9: TÍTULO DO PACOTE
   Responsabilidade: Título principal com destaque
   ========================================== */

/* Título principal do pacote */
.package-header-content h1 {
    font-size: 48px; /* Tamanho grande para impacto */
    margin-bottom: 15px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

/* ==========================================
   BLOCO 10: LOCALIZAÇÃO DO PACOTE
   Responsabilidade: Indicação geográfica do destino
   ========================================== */

/* Localização geográfica do pacote */
.package-location {
    font-size: 20px; /* Tamanho intermediate */
    opacity: 0.9; /* Transparência */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    gap: 10px; /* Espaçamento entre elementos */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 11: SEÇÃO DE DETALHES DO PACOTE
   Responsabilidade: Container principal do conteúdo
   ========================================== */

/* Seção principal com detalhes do pacote */
.package-details-section {
    padding: 60px 0; /* Espaçamento vertical */
}

/* ==========================================
   BLOCO 12: CONTAINER DE DETALHES EM GRID
   Responsabilidade: Layout em grid para descrição e reserva
   ========================================== */

/* Container principal em grid */
.package-details-container {
    display: grid; /* Layout em grid */
    grid-template-columns: 1fr 400px; /* Coluna principal + sidebar */
    gap: 40px; /* Espaçamento entre colunas */
    align-items: start; /* Alinhamento superior */
}

/* ==========================================
   BLOCO 13: DESCRIÇÃO DO PACOTE
   Responsabilidade: Área de texto com informações detalhadas
   ========================================== */

/* Container da descrição do pacote */
.package-description {
    background-color: white; /* Fundo branco */
    border-radius: var(--border-radius); /* Cantos arredondados */
    padding: 30px; /* Espaçamento interno */
    color: black; /* Cor do texto */
    box-shadow: var(--shadow); /* Sombra sutil */
}

/* ==========================================
   BLOCO 14: TÍTULOS DA DESCRIÇÃO
   Responsabilidade: Hierarquia visual na descrição
   ========================================== */

/* Títulos da seção de descrição */
.package-description h2 {
    color: var(--primary-color); /* Cor da marca */
    margin-bottom: 20px; /* Espaçamento abaixo */
    font-size: 24px; /* Tamanho intermediate */
}

/* Parágrafos da descrição */
.package-description p {
    margin-bottom: 25px; /* Espaçamento entre parágrafos */
    line-height: 1.7; /* Altura de linha para legibilidade */
    color: black; /* Cor do texto */
}

/* ==========================================
   BLOCO 15: INCLUSÕES DO PACOTE
   Responsabilidade: Lista do que está incluído
   ========================================== */

/* Seção de inclusões */
.package-includes {
    margin-bottom: 30px; /* Espaçamento abaixo */
}

/* Títulos de inclusões e destaques */
.package-includes h3,
.package-highlights h3 {
    color: var(--primary-color); /* Cor da marca */
    margin-bottom: 15px; /* Espaçamento abaixo */
    font-size: 20px; /* Tamanho intermediate */
}

/* ==========================================
   BLOCO 16: LISTAS DE INCLUSÕES E DESTAQUES
   Responsabilidade: Formatação de listas estruturadas
   ========================================== */

/* Listas de inclusões e destaques */
.includes-list,
.highlights-list {
    margin-bottom: 30px; /* Espaçamento abaixo */
    padding-left: 20px; /* Indentação */
}

/* Itens das listas */
.includes-list li,
.highlights-list li {
    margin-bottom: 10px; /* Espaçamento entre itens */
    color: var(--text-color); /* Cor do texto */
    list-style-type: disc; /* Marcadores circulares */
}

/* ==========================================
   BLOCO 17: PREÇO DO PACOTE
   Responsabilidade: Destaque visual do preço
   ========================================== */

/* Container do preço */
.package-price {
    text-align: center; /* Centralização */
    margin-bottom: 25px; /* Espaçamento abaixo */
}

/* Valor do preço */
.price-value {
    font-size: 36px; /* Tamanho grande para destaque */
    font-weight: 700; /* Peso bold */
    color: var(--primary-color); /* Cor da marca */
}

/* Preço por pessoa */
.price-per-person {
    font-size: 16px; /* Tamanho intermediate */
    color: var(--text-light); /* Cor do texto secundário */
}

/* ==========================================
   BLOCO 18: INFORMAÇÕES DO PACOTE
   Responsabilidade: Dados estruturados sobre o pacote
   ========================================== */

/* Container de informações */
.package-info {
    margin-bottom: 25px; /* Espaçamento abaixo */
}

/* Itens individuais de informação */
.info-item {
    display: flex; /* Layout flexbox */
    justify-content: space-between; /* Distribuição space-between */
    padding: 10px 0; /* Espaçamento vertical */
    border-bottom: 1px solid #eee; /* Borda inferior sutil */
}

/* ==========================================
   BLOCO 19: RÓTULOS E VALORES DE INFORMAÇÃO
   Responsabilidade: Estilização de dados estruturados
   ========================================== */

/* Rótulos das informações */
.info-label {
    color: black; /* Cor do texto */
}

/* Valores das informações */
.info-value {
    font-weight: 500; /* Peso semi-negrito */
    color: var(--text-color); /* Cor do texto principal */
}

/* ==========================================
   BLOCO 20: FORMULÁRIO DE RESERVA
   Responsabilidade: Interface para fazer reserva
   ========================================== */

/* Rótulos do formulário */
.booking-form label {
    display: block; /* Comportamento de bloco */
    margin-bottom: 8px; /* Espaçamento abaixo */
    font-weight: 500; /* Peso semi-negrito */
    color: var(--text-light); /* Cor do texto secundário */
}

/* Campos do formulário */
.booking-form select,
.booking-form input {
    width: 100%; /* Largura total */
    padding: 12px 15px; /* Espaçamento interno */
    border: 1px solid #ddd; /* Borda sutil */
    border-radius: 4px; /* Cantos arredondados */
    margin-bottom: 15px; /* Espaçamento abaixo */
    font-size: 16px; /* Tamanho da fonte */
}

/* Foco nos campos do formulário */
.booking-form select:focus,
.booking-form input:focus {
    outline: none; /* Remover outline */
    border-color: var(--secondary-color); /* Cor da borda no foco */
}

/* ==========================================
   BLOCO 21: BOTÃO DE RESERVA
   Responsabilidade: Ação principal do formulário
   ========================================== */

/* Botão principal de reserva */
.book-now-btn {
    width: 100%; /* Largura total */
    background-color: var(--secondary-color); /* Cor secundária */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 15px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 18px; /* Tamanho intermediate */
    font-weight: 500; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transição personalizada */
}

/* Efeito hover no botão de reserva */
.book-now-btn:hover {
    background-color: var(--secondary-dark); /* Cor mais escura */
}

/* ==========================================
   BLOCO 22: GRUPOS DE FORMULÁRIO
   Responsabilidade: Containers para campos relacionados
   ========================================== */

/* Grupos de campos do formulário */
.form-group {
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 23: NOTA DO FORMULÁRIO
   Responsabilidade: Informações complementares
   ========================================== */

/* Nota explicativa do formulário */
.booking-note {
    text-align: center; /* Centralização */
    font-size: 14px; /* Tamanho pequeno */
    color: var(--text-light); /* Cor do texto secundário */
    margin-top: 15px; /* Espaçamento acima */
}

/* ==========================================
   BLOCO 24: BOTÃO DE LOGIN NECESSÁRIO
   Responsabilidade: Ação quando login é obrigatório
   ========================================== */

/* Botão para quando login é necessário */
.login-required-btn {
    width: 100%; /* Largura total */
    background-color: #ffc107; /* Amarelo para aviso */
    color: #333; /* Texto escuro */
    border: none; /* Sem borda */
    padding: 15px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 18px; /* Tamanho intermediate */
    font-weight: 500; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transição personalizada */
    text-decoration: none; /* Remover sublinhado */
    display: inline-block; /* Comportamento de bloco em linha */
    text-align: center; /* Centralização do texto */
}

/* Efeito hover no botão de login */
.login-required-btn:hover {
    background-color: #e0a800; /* Amarelo mais escuro */
    color: #333; /* Manter cor do texto */
}

/* ==========================================
   BLOCO 25: MENSAGEM DE LOGIN
   Responsabilidade: Notificação sobre necessidade de login
   ========================================== */

/* Mensagem sobre necessidade de login */
.login-message {
    text-align: center; /* Centralização */
    margin-bottom: 15px; /* Espaçamento abaixo */
    padding: 10px; /* Espaçamento interno */
    background-color: #fff3cd; /* Fundo amarelo claro */
    border: 1px solid #ffeaa7; /* Borda amarela */
    border-radius: 4px; /* Cantos arredondados */
    color: #856404; /* Cor do texto */
    font-size: 14px; /* Tamanho pequeno */
}

/* ==========================================
   BLOCO 36: RESPONSIVIDADE TABLET
   Responsabilidade: Adaptação para telas médias
   ========================================== */

/* Media query para tablets */
@media (max-width: 992px) {
    /* Grid de detalhes em coluna única */
    .package-details-container {
        grid-template-columns: 1fr; /* Uma coluna */
    }

    /* Sidebar de reserva estática */
    .package-booking {
        position: static; /* Posição estática */
        margin-bottom: 30px; /* Espaçamento abaixo */
        order: -1; /* Mover para primeiro lugar */
    }
}

/* ==========================================
   BLOCO 37: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 576px) {
    /* Header com altura menor */
    .package-header {
        height: 40vh; /* 40% da viewport */
    }

    /* Sidebar de reserva com padding reduzido */
    .package-booking {
        padding: 20px; /* Padding reduzido */
    }
}