.wrap {
    width:100%;
    max-width: var(--plan-max-width);
}

/* floorplan kontejner - pozadí plán (uprav cestu k obrázku) */
.floorplan {
    position: relative;
    width:100%;
    aspect-ratio: 1294 / 742; /* udržuje proporce původního obrázku */
    background-image: url("img/stoly.png");
    background-size: cover; /* nebo contain dle potřeby */
    background-position: center;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
}

/* kontejner jednoho stolu */
.table-group {
    position: absolute;
    /* velikost každého skupinového boxu je relativní k ploše (v procentech) */
    width: 16%;       /* uprav pokud chceš větší/mensi stoly */
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%); /* centrální umístění podle left/top */
    pointer-events: auto; /* umožní klikání */
}

/* vlastní stůl (kruh) */
.table {
    position: absolute;
    left:50%;
    top:50%;
    width:50%;
    height:50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(200,200,200,0.95);
    border: 3px solid rgba(120,120,120,0.8);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12) inset;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size: clamp(14px, 1.4vw, 22px);
    color:#333;
}

/* židle - obdélníky (vizuálně natočené ven) */
.chair {
    position: absolute;
    width: 16%;
    height: 16%;
    left:50%;
    top:50%;
    transform-origin: 50% 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background: #fff;
    border: 1px solid rgba(90,90,90,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    font-size: clamp(4px, 0.6vw, 6px);
    padding:1px;
    text-align:center;
    overflow:visible;
}

/* vnitřní span, který udrží text nezrotovaný */
.chair .label {
    transform-origin: center center;
    display:block;
    white-space:nowrap;
    /*text-overflow:ellipsis;*/
    overflow:hidden;
    max-width:100%;
    padding:0;
}

.chair.seated{
    background: #B2AC88;
    opacity: 0.9;
    color:#555;
}

/* hover efekt */
.table-group:hover .chair {
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.table-group:hover .table {
    filter:brightness(0.98);
}

/* malá responsivní úprava - na mobil zmenšíme velikosti stolů */
@media (max-width:600px){
    .table-group{ width: 24%; }
    .chair{ width:32%; height:16%; font-size:11px; }
    .table{ font-size: 14px; }
}

/* pomocné: seznam (fallback) pro mobil - ukáže jména v seznamu */
.list-toggle {
    display:flex;
    gap:8px;
    margin:10px 0;
    align-items:center;
}
.tables-list{
    display:none;
    /*margin-top:10px;*/
    /*background:#fff;
    border-radius:8px;*/
    /*padding:10px;*/
    /*box-shadow: 0 6px 18px rgba(0,0,0,0.06);*/
}


.floorplan-wrapper {
    width: 100%;
    max-width: var(--plan-max-width);
    height: 600px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: auto;
    background: #fff;
    touch-action: none; /* pro pinchzoom na mobilech */
}

@media (max-width: 600px) {

    .table {
        width:20%;
        height:20%;
        font-size: clamp(12px, 1.0vw, 16px);
    }

    .chair {
        width: 8%;
        height: 8%;
        font-size: clamp(4px, 0.5vw, 6px);
    }
}