* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #f5f5f5;
    overflow-x: auto;
    min-width: 800px;
}

.container {
    width: 800px;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 15px;
    text-align: center;
}

header h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-weight: 300;
}

header p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 15px;
}

/* Estilos do Campo de Busca */
.search-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

#search-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 0.9rem;
    background: transparent;
    color: #2c3e50;
}

#search-input::placeholder {
    color: #7f8c8d;
}

#search-btn, #clear-search {
    background: none;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #7f8c8d;
    transition: all 0.3s ease;
}

#search-btn:hover, #clear-search:hover {
    color: #2c3e50;
    background: rgba(0, 0, 0, 0.05);
}

#clear-search {
    color: #e74c3c;
    font-weight: bold;
}

#clear-search:hover {
    background: rgba(231, 76, 60, 0.1);
}

/* Estilos dos Resultados da Busca */
.search-results {
    position: absolute;
    top: 25%;
    left: 20%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 8px;
    width: 600px;
    max-height: 300px;
    overflow-y: auto;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-header {
    padding: 12px 15px;
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.results-header p {
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
}

.no-results {
    padding: 15px;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.result-item {
    padding: 12px 15px;
    border-bottom: 1px solid #ecf0f1;
    transition: background-color 0.3s ease;
}

.result-item:hover {
    background: #f8f9fa;
}

.result-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.result-mesa {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mesa-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
}

.mesa-status {
    font-size: 0.75rem;
    color: #7f8c8d;
    font-weight: 500;
}

.result-pessoas {
    margin-bottom: 8px;
    color: #2c3e50;
    font-size: 0.8rem;
}

.result-pessoas strong {
    color: #34495e;
}

.highlight-btn {
    background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.highlight-btn:hover {
    background: linear-gradient(135deg, #00a085 0%, #008f7a 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 184, 148, 0.3);
}

.venue-layout {
    position: relative;
    width: 800px;
    height: 795px;
    background: url('imagemfundp.png?1') top center no-repeat #e8e8e8;
    background-size: contain;
    border: 2px solid #333;
}

/* Áreas do evento - posicio  background: #c8c8c8;
}

/* Mesas - tamanho maior e mais compacto */
.mesa {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #4a90e2;
    border: 2px solid #357abd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 5px; /* espaço entre mesas */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mesa:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Estados das mesas */
.mesa[data-ocupada="false"] {
    background: #4a90e2;
    border-color: #357abd;
}

.mesa[data-ocupada="false"]:hover {
    background: #5ba0f2;
}

.mesa.parcialmente-ocupada {
    background: #f39c12;
    border-color: #e67e22;
}

.mesa.parcialmente-ocupada:hover {
    background: #f4a62a;
}

.mesa[data-ocupada="true"] {
    background: #e74c3c;
    border-color: #c0392b;
    cursor: not-allowed;
}

.mesa[data-ocupada="true"]:hover {
    transform: none;
    background: #e74c3c;
}

.mesa-destacada {
    animation: pulseHighlight 2s infinite;
    z-index: 100;
    box-shadow: 0 0 15px #ff6b6b, 0 0 30px #ff6b6b, 0 0 45px #ff6b6b !important;
    border: 3px solid #ff6b6b !important;
}

@keyframes pulseHighlight {
    0% {
        transform: scale(1.2);
        box-shadow: 0 0 15px #ff6b6b, 0 0 30px #ff6b6b, 0 0 45px #ff6b6b;
    }
    50% {
        transform: scale(1.4);
        box-shadow: 0 0 20px #ff6b6b, 0 0 40px #ff6b6b, 0 0 60px #ff6b6b;
    }
    100% {
        transform: scale(1.2);
        box-shadow: 0 0 15px #ff6b6b, 0 0 30px #ff6b6b, 0 0 45px #ff6b6b;
    }
}

.mesa-numero {
    color: white;
    font-weight: bold;
    font-size: 10px;
}

/* Cadeiras ao redor das mesas */
.cadeira {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.cadeira.minha {
    background: #7361d8; /* verde */
}
.cadeira.ocupada {
    background: #e74c3c; /* vermelho */
}

.cadeira.disponivel {
    background: #27ae60;
}

/* POSICIONAMENTO DOS TRÊS BLOCOS DE MESAS - APROXIMADOS E AJUSTADOS */

/* POSICIONAMENTO DOS TRÊS BLOCOS DE MESAS - APROXIMADOS E AJUSTADOS */

/* POSICIONAMENTO DOS TRÊS BLOCOS DE MESAS - APROXIMADOS E AJUSTADOS */

/* BLOCO 1: 34 mesas (mesas 1-34) - 6 linhas com 5 mesas + 1 linha com 4 mesas */
/* Posicionado no lado esquerdo, baixado para evitar sobreposição com cabeçalho */

/* Linha 1 */
.mesa[data-mesa="1"] { top: 250px; left: 35px; }
.mesa[data-mesa="2"] { top: 250px; left: 75px; }
.mesa[data-mesa="3"] { top: 250px; left: 115px; }
.mesa[data-mesa="4"] { top: 250px; left: 155px; }
.mesa[data-mesa="5"] { top: 250px; left: 195px; }

/* Linha 2 */
.mesa[data-mesa="6"] { top: 295px; left: 35px; }
.mesa[data-mesa="7"] { top: 295px; left: 75px; }
.mesa[data-mesa="8"] { top: 295px; left: 115px; }
.mesa[data-mesa="9"] { top: 295px; left: 155px; }
.mesa[data-mesa="10"] { top: 295px; left: 195px; }

/* Linha 3 */
.mesa[data-mesa="11"] { top: 340px; left: 35px; }
.mesa[data-mesa="12"] { top: 340px; left: 75px; }
.mesa[data-mesa="13"] { top: 340px; left: 115px; }
.mesa[data-mesa="14"] { top: 340px; left: 155px; }
.mesa[data-mesa="15"] { top: 340px; left: 195px; }

/* Linha 4 */
.mesa[data-mesa="16"] { top: 385px; left: 35px; }
.mesa[data-mesa="17"] { top: 385px; left: 75px; }
.mesa[data-mesa="18"] { top: 385px; left: 115px; }
.mesa[data-mesa="19"] { top: 385px; left: 155px; }
.mesa[data-mesa="20"] { top: 385px; left: 195px; }

/* Linha 5 */
.mesa[data-mesa="21"] { top: 430px; left: 35px; }
.mesa[data-mesa="22"] { top: 430px; left: 75px; }
.mesa[data-mesa="23"] { top: 430px; left: 115px; }
.mesa[data-mesa="24"] { top: 430px; left: 155px; }
.mesa[data-mesa="25"] { top: 430px; left: 195px; }

/* Linha 6 */
.mesa[data-mesa="26"] { top: 475px; left: 35px; }
.mesa[data-mesa="27"] { top: 475px; left: 75px; }
.mesa[data-mesa="28"] { top: 475px; left: 115px; }
.mesa[data-mesa="29"] { top: 475px; left: 155px; }
.mesa[data-mesa="30"] { top: 475px; left: 195px; }

/* Linha 7 */
.mesa[data-mesa="31"] { top: 520px; left: 35px; }
.mesa[data-mesa="32"] { top: 520px; left: 75px; }
.mesa[data-mesa="33"] { top: 520px; left: 115px; }
.mesa[data-mesa="34"] { top: 520px; left: 155px; }

/* BLOCO 2: 30 mesas (35–64) */

/* Linha 1 */
.mesa[data-mesa="35"] { top: 70px; left: 325px; }
.mesa[data-mesa="36"] { top: 70px; left: 365px; }
.mesa[data-mesa="37"] { top: 70px; left: 405px; }
.mesa[data-mesa="38"] { top: 70px; left: 445px; }
.mesa[data-mesa="39"] { top: 70px; left: 485px; }
.mesa[data-mesa="40"] { top: 70px; left: 525px; }

/* Linha 2 */
.mesa[data-mesa="41"] { top: 115px; left: 325px; }
.mesa[data-mesa="42"] { top: 115px; left: 365px; }
.mesa[data-mesa="43"] { top: 115px; left: 405px; }
.mesa[data-mesa="44"] { top: 115px; left: 445px; }
.mesa[data-mesa="45"] { top: 115px; left: 485px; }
.mesa[data-mesa="46"] { top: 115px; left: 525px; }

/* Linha 3 */
.mesa[data-mesa="47"] { top: 160px; left: 325px; }
.mesa[data-mesa="48"] { top: 160px; left: 365px; }
.mesa[data-mesa="49"] { top: 160px; left: 405px; }
.mesa[data-mesa="50"] { top: 160px; left: 445px; }
.mesa[data-mesa="51"] { top: 160px; left: 485px; }
.mesa[data-mesa="52"] { top: 160px; left: 525px; }

/* Linha 4 */
.mesa[data-mesa="53"] { top: 205px; left: 325px; }
.mesa[data-mesa="54"] { top: 205px; left: 365px; }
.mesa[data-mesa="55"] { top: 205px; left: 405px; }
.mesa[data-mesa="56"] { top: 205px; left: 445px; }
.mesa[data-mesa="57"] { top: 205px; left: 485px; }
.mesa[data-mesa="58"] { top: 205px; left: 525px; }

/* Linha 5 */
.mesa[data-mesa="59"] { top: 250px; left: 325px; }
.mesa[data-mesa="60"] { top: 250px; left: 365px; }
.mesa[data-mesa="61"] { top: 250px; left: 405px; }
.mesa[data-mesa="62"] { top: 250px; left: 445px; }
.mesa[data-mesa="63"] { top: 250px; left: 485px; }
.mesa[data-mesa="64"] { top: 250px; left: 525px; }

/* BLOCO 3: 26 mesas (65–90) */

/* Linha 1 */
.mesa[data-mesa="65"] { top: 295px; left: 285px; }
.mesa[data-mesa="66"] { top: 295px; left: 325px; }
.mesa[data-mesa="67"] { top: 295px; left: 365px;  }

/* Linha 2 */
.mesa[data-mesa="68"] { top: 340px; left: 285px; }
.mesa[data-mesa="69"] { top: 340px; left: 325px; }
.mesa[data-mesa="70"] { top: 340px; left: 365px;  }
.mesa[data-mesa="71"] { top: 340px; left: 405px;  }

/* Linha 3 */
.mesa[data-mesa="72"] { top: 385px; left: 285px; }
.mesa[data-mesa="73"] { top: 385px; left: 325px; }
.mesa[data-mesa="74"] { top: 385px; left: 365px;  }
.mesa[data-mesa="75"] { top: 385px; left: 405px;  }

/* Linha 4 */
.mesa[data-mesa="76"] { top: 430px; left: 285px; }
.mesa[data-mesa="77"] { top: 430px; left: 325px; }
.mesa[data-mesa="78"] { top: 430px; left: 365px;  }
.mesa[data-mesa="79"] { top: 430px; left: 405px;  }

/* Linha 5 */
.mesa[data-mesa="80"] { top: 475px; left: 285px; }
.mesa[data-mesa="81"] { top: 475px; left: 325px; }
.mesa[data-mesa="82"] { top: 475px; left: 365px;  }
.mesa[data-mesa="83"] { top: 475px; left: 405px;  }

/* Linha 6 */
.mesa[data-mesa="84"] { top: 520px; left: 285px; }
.mesa[data-mesa="85"] { top: 520px; left: 325px; }
.mesa[data-mesa="86"] { top: 520px; left: 365px;  }
.mesa[data-mesa="87"] { top: 520px; left: 405px;  }
.mesa[data-mesa="88"] { top: 520px; left: 445px;  }
.mesa[data-mesa="89"] { top: 520px; left: 485px;  }
.mesa[data-mesa="90"] { top: 520px; left: 525px;  }

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fefefe;
    margin: 3% auto;
    padding: 25px;
    border: none;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #e74c3c;
}

.modal-content h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.5rem;
    font-weight: 300;
}

.modal-content p {
    color: #7f8c8d;
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #34495e;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #ecf0f1;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #fff;
}

.form-group input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-group input.error {
    border-color: #e74c3c;
    background: #fdf2f2;
}

.form-group input.success {
    border-color: #27ae60;
    background: #f2fdf2;
}

.form-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 25px;
}

.form-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-buttons button[type="submit"] {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
}

.form-buttons button[type="submit"]:hover {
    background: linear-gradient(135deg, #357abd 0%, #2968a3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.form-buttons button[type="button"] {
    background: #95a5a6;
    color: white;
}

.form-buttons button[type="button"]:hover {
    background: #7f8c8d;
    transform: translateY(-1px);
}

/* Responsividade básica */
@media (max-width: 800px) {
    .container {
        width: 100%;
        margin: 0;
    }
    
    .venue-layout {
        width: 100%;
        overflow-x: auto;
    }
}