*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans Armenian',sans-serif;background:#f7f3ee;color:#444}
.container{max-width:1200px;margin:auto;padding:30px 16px}
h1{text-align:center;color:#c1975d}
.subtitle{text-align:center;color:#777;margin:10px 0 35px}
#search{
width:100%;
max-width:420px;
display:block;
margin:0 auto 30px;
padding:14px 18px;
border-radius:40px;
border:2px solid #ddd;
font-size:16px;
outline:none;
}

#search:focus{
border-color:#c1975d;
}


.floor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    justify-items:center;
}
.table-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}
.round{
    position:relative;
    width:min(260px,90vw);
    aspect-ratio:1;
}
.table{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:#c1975d;color:#fff;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.seat{position:absolute;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #c1975d;font-size:11px;display:flex;align-items:center;justify-content:center}
.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:10}
.popup.show{display:flex}
.popup-card{background:#fff;border-radius:22px;padding:18px;position:relative;width:min(96vw,620px)}
.close{position:absolute;right:16px;top:10px;font-size:34px;color:#c1975d;cursor:pointer}
.popup-table{position:relative;margin:auto}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#c1975d;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700}
.pseat{position:absolute;background:#fff;border:2px solid #c1975d;border-radius:20px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;padding:2px}
@media(max-width:768px){.table{width:100px;height:100px;font-size:18px}}
/* Tablet */
@media (max-width:900px){

.floor{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

}

/* Mobile */
@media (max-width:600px){

.floor{
    grid-template-columns:1fr;
    gap:35px;
}

}

.seating-back{display:inline-block;color:#8c6839;font-size:14px;margin-bottom:24px;text-decoration:none}.seating-note{text-align:center;font-size:12px;line-height:1.8;color:#777;max-width:620px;margin:0 auto 20px}.search-label{display:block;text-align:center;font-size:13px;margin:0 0 10px}.search-status{text-align:center;min-height:24px;font-size:13px;color:#6e573d;margin:-16px auto 25px}
button.table{border:0;font-family:inherit}.table:focus-visible,.seating-back:focus-visible,.close:focus-visible{outline:3px solid #6c4620;outline-offset:5px}.table.is-match{background:#287741;box-shadow:0 0 0 4px #28774133,0 8px 20px #0003}.pseat.is-match{background:#e5f1e8;border-color:#287741;font-weight:700}.pseat{overflow-wrap:anywhere}
.popup{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:12px;border:0}.popup[open]{display:flex}.popup::backdrop{background:transparent}.popup-card{width:min(96vw,620px);padding:48px 16px 20px;max-height:96dvh;overflow:auto}.close{border:0;background:none;line-height:1;padding:3px 8px;font-family:inherit}.round{width:260px;max-width:100%}.modal-open{overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:340px){h1{font-size:26px}.container{padding-inline:10px}}