*{box-sizing:border-box}

:root{
    --bg:#f5f3ef;
    --white:#fff;
    --text:#1d1c1a;
    --muted:#77736d;
    --red:#a33b2f;
    --border:#ded9d1;
    --gap:12px
}

html,body{
    height:100%
}

/*
 * Layout "app": la pagina non scorre, occupa esattamente lo schermo.
 * Scorrono solo la lista pietanze e la mappa al loro interno.
 * dvh tiene conto delle barre del browser su iOS/Android.
 */
body{
    margin:0;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%
}

button,input{
    font:inherit
}

button{
    cursor:pointer;
    touch-action:manipulation
}

header{
    flex:none;
    background:#151515;
    color:#fff;
    padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}

header div{
    min-width:0
}

header small,
section small{
    letter-spacing:.12em;
    font-size:.68rem;
    font-weight:800;
    color:#d8b1aa
}

h1{
    font:700 1.35rem Georgia,serif;
    margin:1px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

header p{
    margin:0;
    color:#c7c3bd;
    font-size:.82rem
}

main{
    flex:1;
    min-height:0;
    width:100%;
    display:grid;
    gap:var(--gap);
    padding:var(--gap) max(var(--gap),env(safe-area-inset-right)) max(var(--gap),env(safe-area-inset-bottom)) max(var(--gap),env(safe-area-inset-left))
}

main>section{
    min-height:0;
    min-width:0
}

/* Ricerca */

.search label{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:0 6px 0 12px;
    box-shadow:0 5px 20px #00000012
}

.search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    padding:12px 0;
    font-size:16px /* sotto i 16px iOS zooma la pagina al focus */
}

.search input::-webkit-search-cancel-button{
    display:none
}

.search label>button{
    flex:none;
    width:40px;
    height:40px;
    border:0;
    background:none;
    font-size:1.3rem;
    color:var(--muted)
}

#filters{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:9px 0 2px;
    scrollbar-width:none
}

#filters::-webkit-scrollbar{
    display:none
}

.filter{
    flex:none;
    white-space:nowrap;
    border:1px solid var(--border);
    background:#fff;
    color:var(--muted);
    border-radius:999px;
    padding:8px 13px
}

.filter.active{
    background:var(--red);
    color:#fff;
    border-color:var(--red)
}

/* Navigazione Mappa / Pietanze (solo smartphone) */

.view-tabs{
    display:none
}

.view-tab{
    border:0;
    background:transparent;
    color:var(--muted);
    font-weight:800;
    padding:10px 8px;
    border-radius:10px
}

.view-tab.active{
    background:var(--red);
    color:#fff
}

/* Titoli */

.sect{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:10px;
    margin:14px 0 8px
}

.sect h2{
    font:700 1.25rem Georgia,serif;
    margin:2px 0
}

#count{
    color:var(--muted);
    font-size:.85rem
}

/* Mappa */

.mapbox{
    position:relative;
    overflow:hidden;
    background:#090909;
    border-radius:16px;
    border:1px solid #171717;
    box-shadow:0 8px 24px #00000017
}

/*
 * Il viewport è un flex container: con margin:auto lo stage
 * resta centrato quando è più piccolo, e scorre quando è più grande.
 */
.mapbox #viewport{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:auto;
    overscroll-behavior:contain;
    touch-action:pan-x pan-y; /* il pinch lo gestisce app.js */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin
}

.mapbox #stage{
    position:relative;
    flex:none;
    margin:0 auto
}

.mapbox #viewport::after{
    content:"";
    display:block;
    flex:none;
    width:1px;
    height:var(--scroll-extra, 0px)
}

.mapbox img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none
}

#markers{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none
}

.marker{
    position:absolute;
    transform:translate(-50%,-50%);
    width:28px;
    height:28px;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    font-size:.8rem;
    font-weight:900;
    box-shadow:0 2px 8px #0008;
    pointer-events:auto;
    z-index:6
}

/* Area di tocco più ampia del pallino */
.marker::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%
}

.marker.active{
    background:#e0a31a;
    color:#111;
    transform:translate(-50%,-50%) scale(1.3);
    z-index:10;
    animation:pulse 1.6s ease-out infinite
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 #e0a31acc,0 2px 8px #0008}
    100%{box-shadow:0 0 0 18px #e0a31a00,0 2px 8px #0008}
}

.marker span{
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background:#111e;
    color:#fff;
    border-radius:8px;
    padding:4px 7px;
    font-size:.68rem;
    white-space:nowrap;
    opacity:0;
    pointer-events:none
}

.marker.active span,
.marker.peek span,
.marker.peek{
    z-index:11
}

/* Mappa in caricamento (rete lenta) */

.maploading{
    position:absolute;
    inset:0;
    z-index:12;
    display:grid;
    place-items:center;
    padding:20px;
    text-align:center;
    color:#c7c3bd;
    font-size:.9rem
}

/* Postazioni selezionate, sovrapposte al fondo della mappa */

.current{
    position:absolute;
    z-index:15;
    left:10px;
    right:10px;
    bottom:10px;
    max-height:38%;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#151515eb;
    color:#fff;
    border-radius:14px;
    padding:4px;
    font-size:.85rem;
    line-height:1.3;
    box-shadow:0 4px 14px #0006
}

.legend{
    padding:8px 10px;
    color:#d6d2cc;
    font-size:.8rem
}

.stop{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    border:0;
    background:none;
    color:inherit;
    text-align:left;
    padding:7px 8px;
    border-radius:10px
}

.stop+.stop{
    border-top:1px solid #ffffff1a
}

.stop i{
    flex:none;
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#e0a31a;
    color:#111;
    font:normal 900 .85rem system-ui,sans-serif
}

.stop b{
    display:block;
    color:#f0c25a
}

.stop small{
    color:#d6d2cc
}

/* Zoom, sovrapposto alla mappa */

.zoombar{
    position:absolute;
    z-index:15;
    top:10px;
    right:10px;
    display:flex;
    flex-direction:column;
    gap:6px
}

.zoom{
    width:44px;
    height:44px;
    border:1px solid var(--border);
    background:#fffffff0;
    color:var(--text);
    border-radius:12px;
    font-size:1.25rem;
    font-weight:700;
    box-shadow:0 2px 8px #0005
}

.zoom:disabled{
    opacity:.45;
    cursor:default
}

/* Pietanze */

#dishes-section{
    display:flex;
    flex-direction:column
}

#dishes,
#empty{
    flex:1;
    min-height:0
}

#dishes{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px
}

.dish{
    display:flex;
    gap:12px;
    align-items:flex-start;
    width:100%;
    text-align:left;
    color:inherit;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    margin:0 0 9px;
    cursor:pointer
}

.dish.active{
    border-color:var(--red);
    box-shadow:0 0 0 1px var(--red);
    background:#fdf6f4
}

.dish .body{
    flex:1;
    min-width:0
}

/* Spunta: il cliente seleziona tutte le pietanze che ha comprato */
.check{
    flex:none;
    width:26px;
    height:26px;
    margin-top:1px;
    border:2px solid var(--border);
    border-radius:8px;
    background:#fff;
    display:grid;
    place-items:center
}

.dish.active .check{
    background:var(--red);
    border-color:var(--red)
}

.dish.active .check::after{
    content:"";
    width:6px;
    height:12px;
    margin-top:-3px;
    border:solid #fff;
    border-width:0 3px 3px 0;
    transform:rotate(45deg)
}

/* Numero identificativo della cantina */
.where i{
    display:inline-grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 4px;
    margin-right:3px;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font:normal 900 .72rem system-ui,sans-serif
}

/* Barra "Vedi sulla mappa" */

.selbar{
    flex:none;
    display:flex;
    gap:8px;
    padding-top:8px
}

.selbar button{
    border-radius:13px;
    padding:13px 14px;
    font-weight:800
}

.selbar .primary{
    flex:1;
    border:0;
    background:var(--red);
    color:#fff;
    box-shadow:0 6px 18px #a33b2f55
}

.selbar .ghost{
    border:1px solid var(--border);
    background:#fff;
    color:var(--muted)
}

.badge{
    display:inline-grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 5px;
    margin-left:4px;
    border-radius:999px;
    background:#e0a31a;
    color:#111;
    font-size:.72rem
}

.top{
    display:flex;
    justify-content:space-between;
    gap:10px
}

.dishname{
    font-weight:800
}

.cat{
    color:var(--red);
    font-size:.72rem;
    font-weight:800
}

.where,
.desc{
    color:var(--muted);
    font-size:.8rem;
    margin-top:5px
}

.go{
    display:inline-block;
    color:var(--red);
    font-size:.8rem;
    font-weight:800;
    text-decoration:none;
    margin-top:8px;
    padding:4px 0
}

.empty{
    text-align:center;
    color:var(--muted);
    padding:30px
}

.hidden{
    display:none!important
}

/* Toast */

#toast{
    position:fixed;
    z-index:100;
    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom));
    transform:translate(-50%,20px);
    opacity:0;
    max-width:calc(100% - 32px);
    background:#181818;
    color:#fff;
    border-radius:999px;
    padding:10px 14px;
    font-size:.8rem;
    transition:.2s;
    pointer-events:none
}

#toast.show{
    opacity:1;
    transform:translate(-50%,0)
}

/* Smartphone: due schede a tutta altezza */

@media(max-width:699px){

    :root{
        --gap:8px
    }

    header p{
        display:none
    }

    .view-tabs{
        flex:none;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:4px;
        margin:8px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
        padding:4px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:13px
    }

    body.show-dishes #map-section,
    body:not(.show-dishes) #dishes-section{
        display:none
    }

    .sect{
        margin-top:12px
    }

    .dishname{
        font-size:.95rem
    }
}

@media(min-width:700px){

    .selbar .primary{
        display:none
    }

    .selbar{
        justify-content:flex-end
    }
}

/* Schermi grandi verticali (totem, tablet): mappa sopra, pietanze sotto */

@media(min-width:700px) and (orientation:portrait){

    main{
        grid-template-rows:minmax(0,1fr) minmax(0,auto);
        max-width:1100px;
        margin:0 auto
    }

    #dishes-section{
        max-height:36vh;
        max-height:36dvh
    }

    #dishes{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
        align-content:start;
        gap:9px
    }

    .dish{
        margin:0
    }
}

/* Schermi orizzontali (desktop, tablet e telefoni ruotati): pietanze a sinistra, mappa a destra */

@media(min-width:700px) and (orientation:landscape){

    main{
        grid-template-columns:minmax(280px,380px) minmax(0,1fr)
    }

    #dishes-section{
        order:-1
    }

    .sect{
        margin-top:12px
    }
}

/* Totem: testi e tocchi più grandi */

@media(min-width:1000px) and (min-height:1600px){

    html{
        font-size:22px
    }

    .search input{
        font-size:1rem
    }

    .zoom{
        width:64px;
        height:64px;
        font-size:1.6rem
    }

    .marker{
        width:38px;
        height:38px
    }

    .check{
        width:34px;
        height:34px
    }
}

/* Schermi bassi (telefono ruotato): header compatto */

@media(max-height:500px){

    header{
        padding-top:max(6px,env(safe-area-inset-top));
        padding-bottom:6px
    }

    header small,
    header p{
        display:none
    }

    h1{
        font-size:1.1rem
    }

    .sect{
        display:none
    }
}

/* Totem: niente selezione del testo né menu con la pressione prolungata */

body.totem{
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none
}

body.totem input{
    user-select:text;
    -webkit-user-select:text
}