@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap');

:root {
    --bk-bg: #0b0b0b;
    --bk-panel: #161616;
    --bk-text: #f5f5f5;
    --bk-muted: #999999;
    --bk-border: #2a2a2a;
    --bk-accent: #dda83f;
    --bk-accent-glow: rgba(221, 168, 63, 0.3);
    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

#bk-tool-container {
    background-color: var(--bk-bg);
    max-width: 1100px; margin: 0 auto;
    border-radius: 16px; border: 1px solid var(--bk-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden; position: relative;
    font-family: var(--font-body); color: var(--bk-text);
}
#bk-tool-container * { box-sizing: border-box; }

#bk-tool-container h1, #bk-tool-container h2, #bk-tool-container h3 {
    font-family: var(--font-head); font-weight: 800; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: -0.5px;
}
#bk-tool-container p { line-height: 1.7; color: var(--bk-muted); margin-bottom: 1.5rem; }

/* Buttons */
.bk-btn {
    background: var(--bk-accent); color: #000; border: none; padding: 16px 32px;
    font-family: var(--font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; border-radius: 4px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.bk-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px var(--bk-accent-glow); background: #eec25e; }
.bk-btn-outline { background: transparent; border: 2px solid var(--bk-border); color: var(--bk-text); }
.bk-btn-outline:hover { border-color: var(--bk-text); background: #fff; color: #000; }

/* Views */
.bk-view { display: none; padding: 3rem; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bk-view.active { display: block; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* Layout Elements */
.bk-age-gate { text-align: center; padding: 6rem 2rem; }
.bk-hero { text-align: center; padding: 5rem 2rem; background: linear-gradient(to bottom, rgba(0,0,0,0.3), var(--bk-bg)), url('https://images.unsplash.com/photo-1571613316887-6f8d5cbf7ef7?auto=format&fit=crop&w=1200&q=80'); background-size: cover; border-bottom: 1px solid var(--bk-border); }
.bk-split { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media(min-width:900px) { .bk-split { grid-template-columns: 4fr 5fr; } }

/* Cards & Grids */
.bk-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.bk-card-option {
    background: var(--bk-panel); border: 1px solid var(--bk-border); padding: 2rem 1.5rem; text-align: center; cursor: pointer; border-radius: 8px; transition: all 0.2s; min-height: 120px; display: flex; flex-direction: column; justify-content: center;
}
.bk-card-option:hover { border-color: var(--bk-accent); transform: translateY(-3px); }
.bk-card-option.selected { background: var(--bk-accent); border-color: var(--bk-accent); color: #000; transform: scale(1.02); }
.bk-card-option.selected small { color: #333; }

/* Result Specifics */
.bk-chart-container { position: relative; width: 100%; padding-bottom: 100%; background: radial-gradient(circle, #222 0%, #0b0b0b 70%); border-radius: 50%; }
canvas { position: absolute; top:0; left:0; width:100%; height:100%; }
.bk-brewery-row { display: flex; align-items: center; gap: 1rem; background: var(--bk-panel); padding: 1rem; margin-bottom: 1rem; border-radius: 8px; border: 1px solid var(--bk-border); }
.bk-brewery-logo { width: 60px; height: 60px; background: #fff; border-radius: 8px; overflow: hidden; flex-shrink: 0; padding: 2px; }
.bk-brewery-logo img { width: 100%; height: 100%; object-fit: contain; }
.bk-meta-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; margin-right: 5px; }
.tag-score { background: #ffcc00; color: #000; }
.tag-price { background: #333; color: #ccc; border: 1px solid #555; }
.bk-food-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #222; color: #ccc; }
.bk-food-icon { color: var(--bk-accent); }

/* Lead Capture */
.bk-lead-capture { background: linear-gradient(145deg, #202020, #111); border: 1px solid var(--bk-accent); padding: 2rem; border-radius: 12px; margin-top: 3rem; }
.bk-input { width: 100%; padding: 14px; background: #000; border: 1px solid #333; color: #fff!important; border-radius: 4px; font-family: var(--font-body); margin-bottom: 10px; box-sizing: border-box; }