/* Estilos gerais para o corpo da página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Remove a barra de rolagem horizontal do corpo */
}

/* Contêiner principal que envolve toda a área de poltronas */
.poltronas-responsive {
    width: 100%;
    overflow-x: auto; /* Alterado para auto para permitir scroll apenas se necessário */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
}

/* Área da tela do cinema/palco */
#tela {
    font-weight: bold;
    background-color: #ccc;
    padding: 10px;
    margin: 20px auto; /* Centraliza a tela e adiciona margem */
    border-radius: 5px;
    text-align: center;
    font-size: 1.8em; /* Tamanho maior para "TELA" */
    max-width: 800px; /* Limita a largura máxima da tela */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra para destaque */
}

/* Contêiner do conteúdo das poltronas */
.poltronas-content {
    display: flex;
    flex-direction: column; /* Organiza as filas verticalmente */
    align-items: center; /* Centraliza as filas no contêiner */
    width: 100%;
}

/* Contêiner para cada fila de poltronas */
.fila-poltronas {
    display: flex;
    justify-content: center; /* Centraliza as poltronas dentro da fila */
    align-items: flex-start; /* Alinha os itens ao topo para o caso de flex-wrap */
    flex-wrap: wrap; /* Permite que as poltronas quebrem para a próxima linha em telas menores */
    margin-bottom: 10px; /* Espaçamento entre as filas */
}

/* Contêiner individual de cada poltrona (botão + nome) */
.poltrona-container {
    display: flex;
    flex-direction: column; /* Empilha o botão e o nome verticalmente */
    align-items: center; /* Centraliza o botão e o nome horizontalmente */
    margin: 5px; /* Espaçamento entre as poltronas */
    /* Definir uma largura fixa para o container da poltrona */
    width: 70px; /* Ajuste este valor conforme necessário para o seu layout */
    box-sizing: border-box;
}

/* Estilo do botão da cadeira */
button.cadeira {
    width: 60px; /* Largura do botão, ajuste se necessário */
    height: 60px; /* Altura do botão, ajuste se necessário */
    border-radius: 15%; /* Formato da poltrona */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

button.cadeira:hover:not(.btn-ocupada):not(.btn-seguranca) {
    background-color: #28a745; /* Verde mais escuro ao passar o mouse */
}

/* Cores das poltronas */
button.cadeira.btn-success {
    background-color: #28a745; /* Verde para disponível/selecionada */
}

button.cadeira.btn-ocupada {
    background-color: #dc3545; /* Vermelho para ocupada */
    cursor: not-allowed;
}

button.cadeira.btn-seguranca {
    background-color: #6c757d; /* Cinza para segurança */
    cursor: not-allowed;
}

/* Estilo para o nome exibido abaixo da poltrona */
.nome-poltrona {
    font-size: 0.75em; /* Tamanho da fonte do nome */
    text-align: center;
    margin-top: 2px; /* Espaçamento entre o botão e o nome */
    /* *** CRUCIAL PARA O ALINHAMENTO *** */
    min-height: 1.5em; /* Garante uma altura mínima para o nome, mesmo que vazio */
    line-height: 1.5em; /* Alinha o texto verticalmente dentro do espaço */
    overflow: hidden; /* Oculta o texto que ultrapassar o limite */
    white-space: nowrap; /* Impede a quebra de linha */
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
    width: 100%; /* Ocupa a largura total do .poltrona-container */
    box-sizing: border-box;
    color: #333; /* Cor do texto do nome */
}

/* Espaço do corredor */
.corredor-espaco {
    width: 30px; /* Largura do corredor */
    height: 1px; /* Apenas para ocupar espaço horizontalmente */
    margin: 0 5px; /* Margem para separar as poltronas do corredor */
}

/* Media Queries para responsividade */
/* Para telas menores que 768px (celulares) */
@media (max-width: 767.98px) {
    .poltrona-container {
        width: 60px; /* Diminui a largura do container da poltrona */
        margin: 3px;
    }
    button.cadeira {
        width: 50px;
        height: 50px;
        font-size: 1.0em;
    }
    .nome-poltrona {
        font-size: 0.65em;
        min-height: 1.4em; /* Ajuste a altura mínima */
        line-height: 1.4em;
    }
    .corredor-espaco {
        width: 20px;
    }
}

/* Para telas entre 768px e 991.98px (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .poltrona-container {
        width: 65px;
        margin: 4px;
    }
    button.cadeira {
        width: 55px;
        height: 55px;
        font-size: 1.1em;
    }
    .nome-poltrona {
        font-size: 0.7em;
        min-height: 1.4em; /* Ajuste a altura mínima */
        line-height: 1.4em;
    }
    .corredor-espaco {
        width: 25px;
    }
}

/* Para telas maiores que 992px (desktops) */
@media (min-width: 992px) {
    .poltrona-container {
        width: 70px; /* Mantém a largura base */
        margin: 5px;
    }
    button.cadeira {
        width: 60px;
        height: 60px;
        font-size: 1.2em;
    }
    .nome-poltrona {
        font-size: 0.75em;
        min-height: 1.5em; /* Mantém a altura mínima base */
        line-height: 1.5em;
    }
    .corredor-espaco {
        width: 30px;
    }
}

/* Adicionais - Estilos para os componentes do Bootstrap e elementos específicos */
.card-header {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.list-group-item a {
    text-decoration: none;
    color: #007bff;
}

.list-group-item a:hover {
    text-decoration: underline;
}

.btn-primary, .btn-success {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-primary:hover, .btn-success:hover {
    opacity: 0.9;
}

/* Estilos para o cartaz (se você tiver um) */
.cartaz-container {
    text-align: center;
    margin-bottom: 30px;
}

.cartaz-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Estilos para o container de vídeo (se você tiver um trailer) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajustes para o layout principal com Bootstrap */
.container-fluid.mt-3 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Ajustes para o card de informações da sessão */
.card-body .btn {
    margin-top: 10px;
    margin-right: 5px;
}

/* Estilo para a modal de compra */
#modalCompra .modal-body {
    padding: 20px;
}

#modalCompra .modal-header {
    border-bottom: 1px solid #dee2e6;
}

#modalCompra .modal-footer {
    border-top: 1px solid #dee2e6;
}

 body {
            background: #f1f1f1;
            font-family: Arial, sans-serif;
            padding: 10px;
        }

        .container-custom {
            max-width: 1200px;
            margin: 0 auto;
        }

        .titulo-app {
            font-size: 24px;
            text-align: center;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

        .form-cadastro {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 8px rgba(0,0,0,0.08);
            height: 100%;
        }

        .form-label {
            font-weight: bold;
            margin-bottom: 2px;
        }

        .poltronas-wrapper {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 8px rgba(0,0,0,0.08);
            height: 100%;
        }

        #tela {
            font-weight: bold;
            background-color: #ccc;
            padding: 5px;
            margin-bottom: 15px;
            border-radius: 5px;
            text-align: center;
            font-size: 14px;
        }

        button.cadeira {
            width: 35px;
            height: 20px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 11px;
            padding: 0;
            margin: 2px;
            line-height: 1;
        }

        button.cadeira.btn-success {
            background-color: green;
            color: white;
        }

        button.cadeira.btn-ocupada {
            background-color: #cccccc;
            color: white;
            cursor: pointer;
            opacity: 0.8;
        }
        
        button.cadeira.btn-selecionada {
            background-color: #8B0000;
            color: white;
        }
        
        button.cadeira.btn-seguranca {
            background-color: #FFD700;
            color: black;
        }

        button.cadeira:disabled {
            opacity: 0.4;
            pointer-events: none;
        }

        .msg-feedback {
            text-align: center;
            font-weight: bold;
            margin: 10px 0;
            font-size: 14px;
        }
        
        .legenda-status {
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 5px;
            border: 1px solid #eee;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .legenda-header {
            font-weight: bold;
            margin-right: 15px;
            font-size: 14px;
        }
        
        .legenda-item {
            display: inline-flex;
            align-items: center;
            margin-right: 15px;
            margin-bottom: 5px;
            font-size: 13px;
        }
        
        .legenda-cor {
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            vertical-align: middle;
            border-radius: 3px;
        }
        
        .legenda-cor.disponivel {
            background-color: green;
        }
        
        .legenda-cor.selecionado {
            background-color: #8B0000;
        }
        
        .legenda-cor.reservado {
            background-color: #cccccc;
        }
        
        .legenda-cor.seguranca {
            background-color: #FFD700;
            text-align: center;
            font-size: 11px;
            font-weight: bold;
            line-height: 18px;
        }
        
        .lugares-disponiveis {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        

        
        .form-control, .form-select {
            padding: 0.375rem 0.5rem;
            font-size: 0.9rem;
        }
        
        .row > * {
            padding-left: 5px;
            padding-right: 5px;
        }
        
        .row {
            margin-left: -5px;
            margin-right: -5px;
        }
        
        .compact-row {
            margin-bottom: 8px;
        }
        
        .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
        
        .btn-full-width {
            width: 100%;
            display: block;
        }
        
        .poltrona-container {
            display: inline-block;
            text-align: center;
            margin: 1px;
        }
        
        .section-row {
            margin-bottom: 15px;
        }
        
        .poltronas-container {
            width: 100%;
            padding: 0 5px;
            overflow-x: auto;
        }
        
        .video-container {
            margin-top: 15px;
            display: none;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        
        .video-container iframe {
            width: 100%;
            height: 200px;
            border: none;
            border-radius: 5px;
        }
        
        .video-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }
        
        #filme-em-cartaz {
            font-size: 13px;
            font-style: italic;
            display: inline-block;
            margin-left: 5px;
        }
        
        .poltronas-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .poltronas-content {
            display: inline-block;
            text-align: center;
            min-width: 100%;
        }
        
        .fila-poltronas {
            display: flex;
            justify-content: center;
            margin-bottom: 2px;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        
        .corredor-espaco {
            display: inline-block;
            width: 15px;
        }
        
        .contador-tipo {
            font-weight: bold;
            margin-left: 3px;
        }
        
        .modal-title {
            font-weight: bold;
            color: #333;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 10px 20px;
        }
        
        .ingresso-info {
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #eee;
        }
        
        .ingresso-info-item {
            margin-bottom: 5px;
            font-size: 14px;
        }
        
        .ingresso-info-label {
            font-weight: bold;
            color: #555;
        }
        
        /* Estilos específicos para dispositivos móveis */
        @media (max-width: 575.98px) {
            button.cadeira {
                width: 26px;
                height: 18px;
                font-size: 9px;
                margin: 1px;
            }
            
            .nome-poltrona {
                max-width: 26px;
                font-size: 7px;
            }
            
            .corredor-espaco {
                width: 10px;
            }
            
            .poltronas-wrapper {
                padding: 10px 5px;
            }
            
            .legenda-status {
                padding: 5px;
            }
            
            .legenda-item {
                margin-right: 8px;
                font-size: 11px;
            }
            
            .legenda-cor {
                width: 14px;
                height: 14px;
            }
        }
        
        @media (min-width: 576px) and (max-width: 767.98px) {
            button.cadeira {
                width: 30px;
                height: 18px;
                font-size: 10px;
            }
            
            .nome-poltrona {
                max-width: 30px;
                font-size: 8px;
            }
            
            .corredor-espaco {
                width: 12px;
            }
        }
        
        @media (min-width: 768px) and (max-width: 991.98px) {
            button.cadeira {
                width: 32px;
                height: 19px;
                font-size: 11px;
            }
            
            .nome-poltrona {
                max-width: 32px;
                font-size: 8px;
            }
            
            .corredor-espaco {
                width: 15px;
            }
        }
        
        @media (min-width: 992px) {
            button.cadeira {
                width: 38px;
                height: 22px;
                font-size: 12px;
            }
            
            .nome-poltrona {
                max-width: 38px;
                font-size: 9px;
            }
            
            .video-container iframe {
                height: 220px;
            }
            
            .corredor-espaco {
                width: 20px;
            }
        }
        
        @media (min-width: 1200px) {
            button.cadeira {
                width: 42px;
                height: 24px;
                font-size: 13px;
            }
            
            .nome-poltrona {
                max-width: 42px;
                font-size: 10px;
            }
            
            .video-container iframe {
                height: 240px;
            }
            
            .corredor-espaco {
                width: 25px;
            }
        }
        /* Estilos para o cartaz */
        .cartaz-container {
            text-align: center;
            margin-bottom: 30px; /* Espaço abaixo do cartaz */
        }
        .cartaz-container img {
            max-width: 100%; /* Garante que a imagem seja responsiva */
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
        }