.theater-layout {
    display: grid;
    grid-template-columns: repeat(34, 50px); 
    gap: 5px;
    max-width: none; 
    margin-top: 10px; 
}

.theater-container-wrapper {
    max-width: none; 
    margin: 0 auto;
}

@media (max-width: 640px) {
    .theater-container-wrapper {
        overflow-x: auto; 
        padding-left: 1rem; 
        padding-right: 1rem; 
        box-sizing: border-box;
        max-width: 100%;
        margin: 0;
    }
}

.seat[data-row="A"] { grid-row: 1; }
.seat[data-row="B"] { grid-row: 2; }
.seat[data-row="C"] { grid-row: 3; }
.seat[data-row="D"] { grid-row: 4; }
.seat[data-row="E"] { grid-row: 5; }
.seat[data-row="F"] { grid-row: 6; }
.seat[data-row="G"] { grid-row: 7; }
.seat[data-row="H"] { grid-row: 8; }
.seat[data-row="I"] { grid-row: 9; }
.seat[data-row="J"] { grid-row: 10; }

.seat {
    background-color: theme('colors.seat-default');
    border: 1px solid theme('colors.gray.600');
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    width: 50px; 
    height: 50px; 
    font-size: 14px;
    transition: all 0.1s ease-in-out;
    color: white;
    text-align: center;
    line-height: 1; 
    padding: 0; 
}

.seat:hover {
    border-color: white;
}

.seat.occupied {
    background-color: theme('colors.seat-obtained'); 
    color: #111 !important; 
    font-weight: bold;
}

.seat-count {
    font-size: 10px;
    font-weight: bold;
    color: white;
    margin-top: 1px; 
}

.seat.occupied .seat-count {
    color: #111; 
}

.row-label {
    height: 50px; 
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    font-weight: bold;
    font-size: 14px;
    /*padding-right: 8px;*/
}

.row-labels-container {
    display: flex;
    flex-direction: column;
    gap: 5px; 
    margin-top: 10px; 
    margin-left: 35px; 
}

.theater-flex-layout {
    display: flex;
}

.footer {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    width: 100%;
    margin-top: 3rem; 
}

.modak-regular {
  font-family: "Modak", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comfortaa-regular {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}