:root{
    --bg:#0f0f0f;
    --soft:#1a1a1a;
    --cream:#f5f1e6;
    --green:#3ccf91;
    --red:#ff5c5c;
    --muted:#c9c0b2;
    --accent:#d8a84f;
    --line:rgba(255,255,255,.12);
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --radius:18px;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top, #242424 0%, var(--bg) 48%);
    color:var(--cream);
    display:flex;
    justify-content:center;
    line-height:1.45;
}

.container{
    width:100%;
    max-width:720px;
    padding:22px;
    text-align:center;
}

/* LANGUAGE SWITCH */
.lang-row{
    display:flex;
    justify-content:flex-end;
}

.lang-switch{
    display:inline-flex;
    background:#272727;
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    flex:0 0 auto;
}

.lang-switch button{
    border:0;
    color:var(--muted);
    background:transparent;
    padding:8px 11px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
}

.lang-switch button.active{
    color:#151515;
    background:var(--accent);
}

.logo img{
    max-width:210px;
    margin:18px auto 10px;
    display:block;
}

h1{
    margin:6px 0;
    font-size:1.6rem;
}

.tagline{
    opacity:.85;
    margin-bottom:14px;
}

.status{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    font-size:.85rem;
    margin-bottom:18px;
}

.status.is-open{
    background:rgba(60,207,145,.15);
    color:var(--green);
}

.status.is-closed{
    background:rgba(255,92,92,.15);
    color:var(--red);
}

/* PLATFORM ICONS */
.platforms{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:14px;
    max-width:720px;
}

.platforms a{
    display:block;
    background:var(--soft);
    border-radius:16px;
    padding:10px;
}

.platforms img{
    width:100%;
    height:auto;
    border-radius:12px;
    display:block;
    max-width:140px;
}

.btn-secondary{
    width:100%;
    margin-top:10px;
    padding:14px;
    border-radius:14px;
    background:var(--soft);
    color:var(--cream);
    border:none;
    font-size:.95rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
}

.hours{
    font-size:.9rem;
    margin-bottom:16px;
}

.hours-line{
    margin:4px 0;
}

.hours-line.closed{
    opacity:.45;
}

.map-btn{
    display:block;
    margin-bottom:18px;
    padding:14px;
    border-radius:14px;
    background:var(--soft);
    color:var(--cream);
    text-decoration:none;
    font-weight:500;
}

.info{
    background:var(--soft);
    border-radius:16px;
    padding:18px;
    text-align:left;
    font-size:.95rem;
    margin-bottom:16px;
    text-align:center;
}

.info span{
    display:block;
    opacity:.65;
    font-size:.8rem;
}

.info div{
    margin-bottom:10px;
}

.info div:last-child{
    margin-bottom:0;
}

.info a,
.info a:visited,
.info a:hover,
.info a:active{
    color:var(--cream);
    text-decoration:none;
}


/* COFFEE / FOOD / SOFT DRINKS MENU */
.menu-section{
    margin-top:26px;
    text-align:left;
}

.menu-section-title{
    margin:0 0 4px;
    font-size:clamp(1.65rem,7vw,2.2rem);
    letter-spacing:-.04em;
}

.menu-section-subtitle{
    margin:0 0 14px;
    color:var(--muted);
    font-size:.95rem;
}

.menu-groups{
    display:grid;
    gap:14px;
}

.menu-group{
    padding:16px;
    background:rgba(27,27,27,.94);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.menu-group h3{
    margin:0 0 10px;
    font-size:1.2rem;
}

.menu-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
}

.menu-row:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.menu-item{
    min-width:0;
}

.menu-price{
    color:var(--accent);
    font-weight:800;
    white-space:nowrap;
}

/* BEER MENU */
.beer-section{
    margin-top:26px;
    text-align:left;
}

.beer-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.beer-section-title{
    margin:0;
    font-size:clamp(1.65rem,7vw,2.2rem);
    letter-spacing:-.04em;
}

.beer-section-subtitle{
    margin:4px 0 0;
    color:var(--muted);
    font-size:.95rem;
}

.beer-list{
    display:grid;
    gap:14px;
}

.beer-card{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:14px;
    padding:12px;
    background:rgba(27,27,27,.94);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.beer-photo{
    width:100px;
    height:150px;
    border-radius:14px;
    object-fit:cover;
    background:#2b2b2b;
    border:1px solid var(--line);
}

.beer-info{
    min-width:0;
}

.beer-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:7px;
}

.beer-name{
    margin:0;
    font-size:1.18rem;
    line-height:1.1;
    letter-spacing:-.02em;
}

.price{
    color:var(--accent);
    font-size:1.08rem;
    font-weight:800;
    white-space:nowrap;
}

.meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 9px;
}

.pill{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 8px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:650;
}

.description{
    margin:0;
    color:var(--muted);
    font-size:.94rem;
}

.beer-card.is-unavailable{
    opacity:.72;
}

.beer-card.is-unavailable .beer-photo{
    filter:grayscale(.75);
}

.availability-badge{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:6px 10px;
    border-radius:999px;
    background:#8f2525;
    color:#fff;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.02em;
}

.empty{
    padding:18px;
    color:var(--muted);
    text-align:center;
    border:1px dashed var(--line);
    border-radius:var(--radius);
}

.beer-footer{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.86rem;
    text-align:center;
}

.socials{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:24px;
}

.socials a{
    color:var(--cream);
    text-decoration:none;
    opacity:.9;
}

#iosHint{
    display:none;
    background:var(--soft);
    padding:14px;
    border-radius:14px;
    font-size:.85rem;
    margin-top:12px;
}



.hours-current-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.hours-current-row .hours-line{
    margin:0;
}

.hours-current-row .hours-toggle{
    margin:0;
}

.hours-today{
    font-weight:700;
    font-size:1rem;
}

.hours-toggle{
    margin:8px auto 10px;
    padding:7px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:transparent;
    color:var(--muted);
    font-family:inherit;
    font-size:.85rem;
    cursor:pointer;
}

.hours-toggle:hover{
    color:var(--cream);
    border-color:rgba(255,255,255,.24);
}

.weekly-hours{
    margin:8px 0 12px;
    padding:12px 14px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:14px;
    text-align:left;
}

.weekly-hours-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:6px 0;
    border-bottom:1px solid var(--line);
}

.weekly-hours-row:last-child{
    border-bottom:0;
}

.weekly-hours-row.is-today{
    color:var(--accent);
    font-weight:800;
}

.weekly-hours-day{
    min-width:0;
}

.weekly-hours-time{
    white-space:nowrap;
}

.delivery-hours{
    margin-top:8px;
}

footer{
    margin-top:26px;
    font-size:.75rem;
    opacity:.5;
}

@media (max-width:420px){
    .container{
        padding:18px 14px 28px;
    }

    .beer-card{
        grid-template-columns:92px 1fr;
        gap:11px;
        padding:10px;
    }

    .beer-photo{
        width:92px;
        height:132px;
    }

    .beer-name{
        font-size:1.06rem;
    }

    .price{
        font-size:1rem;
    }
}

/* GOOGLE REVIEW */
.review-btn{
    display:block;
    width:100%;
    margin-top:-8px;
    margin-bottom:18px;
    padding:14px;
    border-radius:14px;
    background:var(--accent);
    color:#151515;
    text-decoration:none;
    font-weight:800;
    border:1px solid rgba(255,255,255,.10);
    transition:filter .2s ease, transform .2s ease;
}

.review-btn:hover,
.review-btn:focus-visible{
    filter:brightness(1.08);
}

.review-btn:active{
    transform:translateY(1px);
}

/* TAXI */
.taxi-box{
    margin-bottom:20px;
    padding:16px 18px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:16px;
    text-align:center;
}

.taxi-text{
    margin-bottom:11px;
    color:var(--cream);
    font-size:.95rem;
    font-weight:600;
}

.taxi-btn{
    display:inline-block;
    padding:9px 18px;
    border-radius:999px;
    background:transparent;
    color:var(--accent);
    border:1px solid rgba(216,168,79,.55);
    text-decoration:none;
    font-weight:800;
    font-size:.9rem;
    transition:background-color .2s ease, color .2s ease;
}

.taxi-btn:hover,
.taxi-btn:focus-visible{
    background:var(--accent);
    color:#151515;
}