* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:#f5f5f5; color:#333; line-height:1.6; }
.container { max-width:960px; margin:0 auto; padding:16px; }

/* Header */
.header { background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; padding:40px 16px; text-align:center; position:relative; z-index:1; }
.header h1 { font-size:2em; margin-bottom:8px; line-height:1.2; }
.header p { opacity:0.9; font-size:1.1em; line-height:1.4; }

/* Sidebar Nav - Hover to expand */
.sidebar { position:fixed; left:0; top:122px; height:calc(100vh - 122px); width:36px; z-index:100; }
.sidebar:hover { width:160px; }
.sidebar:hover .sidebar-inner { width:160px; height:100%; background:#fff; box-shadow:2px 0 12px rgba(0,0,0,0.15); padding:8px; ; overflow-y:auto; }
.sidebar:hover .sidebar:hover { z-index:101; }
.sidebar-list { display:flex; flex-direction:column; gap:4px; }
.sidebar-item { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:#f8f9fa; border-radius:4px; text-decoration:none; color:#333; font-size:0.9em; transition:all .2s; white-space:nowrap; }
.sidebar-item:hover { background:#e74c3c; color:#fff; }
.sidebar-item .count { font-size:0.7em; color:#888; background:#e0e0e0; padding:2px 6px; border-radius:10px; }
.sidebar-item:hover .count { color:#e74c3c; background:#fff; }
@media (max-width:600px) { .sidebar { display:none; } }

/* Mobile drawer */
.mobile-menu-btn { display:none; }
.mobile-drawer { display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index:200; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; pointer-events:none; }
.mobile-drawer-backdrop { display:none; }
@media (max-width:600px) {
    .mobile-menu-btn { display:flex; align-items:center; justify-content:center; position:fixed; right:12px; bottom:24px; width:48px; height:48px; border-radius:50%; background:#e74c3c; color:#fff; border:none; font-size:1.3em; box-shadow:0 4px 12px rgba(231,76,60,0.4); z-index:99; cursor:pointer; }
    .mobile-drawer { display:block; position:fixed; top:0; left:-160px; width:140px; height:100vh; background:#fff; box-shadow:2px 0 16px rgba(0,0,0,0.2); z-index:200; transition:left .3s ease; overflow-y:auto; padding:8px; pointer-events:none; }
    .mobile-drawer.open { left:0; pointer-events:auto; }
    .mobile-drawer-backdrop { display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity .3s; }
    .mobile-drawer-backdrop.open { opacity:1; pointer-events:auto; }
    .drawer-title { display:flex; justify-content:space-between; align-items:center; font-size:1em; font-weight:bold; color:#c0392b; padding-bottom:12px; border-bottom:2px solid #e74c3c; margin-bottom:16px; }
    .drawer-list { display:flex; flex-direction:column; gap:4px; }
    .drawer-item { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:#f8f8f8; border-radius:8px; text-decoration:none; color:#333; font-size:0.85em; }
    .drawer-item:active { background:#e74c3c; color:#fff; }
    .drawer-item .count { font-size:0.7em; color:#888; background:#e0e0e0; padding:2px 6px; border-radius:10px; }
}

/* Stats */
.stats { display:flex; justify-content:center; gap:32px; padding:20px 0; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num { font-size:2em; font-weight:bold; color:#e74c3c; }
.stat-label { font-size:0.9em; color:#666; margin-top:4px; }

/* Search */
.search-box { margin:20px 0; }
.search-box input { width:100%; padding:12px 16px; border:2px solid #ddd; border-radius:8px; font-size:0.9em; outline:none; }
.search-box input:focus { border-color:#e74c3c; }

/* Tabs */
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tab-btn { padding:8px 16px; border:2px solid #ddd; background:#fff; border-radius:20px; cursor:pointer; font-size:0.9em; transition:all .2s; }
.tab-btn.active { border-color:#e74c3c; background:#e74c3c; color:#fff; }
.tab-btn:hover { border-color:#e74c3c; }

/* Area filter */
.area-filter { margin-bottom:20px; }
.area-filter-title { font-size:0.9em; color:#666; margin-bottom:8px; }
.area-btns { display:flex; flex-wrap:wrap; gap:6px; }
.area-btn { padding:6px 12px; border:1px solid #ddd; background:#fff; border-radius:16px; cursor:pointer; font-size:0.7em; transition:all .2s; }
.area-btn.active { border-color:#3498db; background:#3498db; color:#fff; }
.area-btn:hover { border-color:#3498db; }

/* Cards */
.cards { display:grid; gap:16px; }
.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.card-body { padding:16px; }
.card-body h3 { font-size:1.2em; margin-bottom:8px; color:#333; }
.card-body h3 .alias { font-size:0.85em; color:#888; font-weight:normal; }
.card-meta { font-size:0.85em; color:#666; margin-bottom:8px; }
.card-intro { color:#555; margin-bottom:8px; line-height:1.5; }
.card-tags { margin-bottom:8px; }
.tag { display:inline-block; padding:2px 8px; background:#f0f0f0; border-radius:4px; font-size:0.75em; color:#666; margin-right:6px; margin-bottom:4px; }
.card-dishes { font-size:0.9em; color:#444; }
.card-dishes strong { color:#e74c3c; }
.tip { font-size:0.85em; color:#27ae60; margin-top:8px; padding:8px; background:#e8f8f5; border-radius:6px; }
.card.hidden { display:none; }
.no-results { text-align:center; padding:40px; color:#888; font-size:1.1em; }

/* Address link */
.address-link { color:#3498db; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.address-link:hover { color:#e74c3c; text-decoration:underline; }
.address-link:hover .addr-text { color:#e74c3c; }
.map-badge { background:#3498db; color:#fff; padding:1px 6px; border-radius:4px; font-size:0.75em; }
.address-link:hover .map-badge { background:#e74c3c; }

/* Section title */
.section-title { font-size:1.3em; margin:32px 0 16px; padding-bottom:8px; border-bottom:2px solid #e74c3c; color:#333; }

/* Dish cards */
.dish-card { background:#fff; padding:16px; border-radius:8px; margin-bottom:12px; }
.dish-card h3 { color:#e74c3c; margin-bottom:8px; }
.dish-card p { color:#555; margin-bottom:8px; }
.dish-place { color:#3498db; font-size:0.9em; }

/* Town section */
.town-section { background:#fff; padding:20px; border-radius:12px; margin-bottom:16px; }
.town-section h2 { color:#e74c3c; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #f0f0f0; }
.town-section h3 { color:#333; margin:16px 0 8px; font-size:1.1em; }
.town-section p { color:#555; margin-bottom:12px; }
.town-section ul { margin-left:20px; margin-bottom:12px; }
.town-section li { margin-bottom:4px; color:#555; }

/* Town list on homepage */
.town-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin:20px 0; }
.town-item { background:#fff; padding:16px; border-radius:8px; text-align:center; cursor:pointer; transition:all .2s; border:2px solid transparent; }
.town-item:hover { border-color:#e74c3c; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.town-item a { text-decoration:none; color:#333; display:block; }
.town-item .town-name { font-weight:bold; font-size:1.1em; margin-bottom:4px; }
.town-item .town-count { font-size:0.85em; color:#888; }

/* Footer */
.footer { text-align:center; padding:40px 16px; color:#888; font-size:0.9em; }
.footer p { margin-bottom:8px; }

/* Responsive */
@media (max-width: 600px) {
    .header h1 { font-size:1.5em; }
    .stats { gap:16px; }
    .stats { font-size:0.9em; }
    .area-btns { gap:4px; }
    .area-btn { font-size:0.75em; padding:3px 10px; }
    .town-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
}

.breadcrumb { font-size:0.9em; color:#666; margin-bottom:16px; }
.breadcrumb a { color:#3498db; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin:16px 0; }
.info-item { background:#f8f9fa; padding:8px; border-radius:8px; }
.info-item .label { font-size:0.85em; color:#888; margin-bottom:4px; }
.info-item .value { font-weight:bold; color:#333; }

/* Customer Service Button */
.cs-btn { position:fixed; right:12px; bottom:84px; width:48px; height:48px; border-radius:50%; background:#27ae60; color:#fff; border:none; font-size:1.5em; box-shadow:0 4px 12px rgba(39,174,96,0.4); z-index:98; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.cs-btn:hover { transform:scale(1.1); }

/* Customer Service Modal */
.cs-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:300; align-items:center; justify-content:center; }
.cs-modal.open { display:flex; }
.cs-modal-content { background:#fff; border-radius:12px; width:90%; max-width:400px; max-height:80vh; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.cs-modal-header { background:linear-gradient(135deg,#27ae60,#229954); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; }
.cs-modal-header h3 { margin:0; font-size:1.1em; }
.cs-modal-close { background:none; border:none; color:#fff; font-size:1.5em; cursor:pointer; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.cs-modal-body { padding:20px; max-height:60vh; overflow-y:auto; }
.cs-form-group { margin-bottom:16px; }
.cs-form-group label { display:block; margin-bottom:6px; font-size:0.9em; color:#555; font-weight:500; }
.cs-form-group input, .cs-form-group textarea { width:100%; padding:10px 12px; border:2px solid #ddd; border-radius:8px; font-size:0.85em; font-family:inherit; }
.cs-form-group input:focus, .cs-form-group textarea:focus { outline:none; border-color:#27ae60; }
.cs-form-group textarea { resize:vertical; min-height:100px; }
.cs-submit-btn { width:100%; padding:8px; background:linear-gradient(135deg,#27ae60,#229954); color:#fff; border:none; border-radius:8px; font-size:0.9em; cursor:pointer; transition:opacity .2s; }
.cs-submit-btn:hover { opacity:0.9; }
.cs-submit-btn:disabled { background:#95a5a6; cursor:not-allowed; }
.cs-success { text-align:center; padding:20px; }
.cs-success-icon { font-size:3em; color:#27ae60; margin-bottom:12px; }
.cs-success p { color:#555; margin:8px 0; }
@media (max-width:600px) { .cs-btn { bottom:140px; } }


.cs-hint { position:fixed; right:12px; bottom:140px; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.15); font-size:0.85em; color:#555; z-index:97; text-align:center; line-height:1.4; width:max-content; }
.cs-hint::after { content:''; position:absolute; right:20px; bottom:-8px; transform:none; border:8px solid transparent; border-top-color:#fff; }
@media (max-width:600px) { .cs-hint { right:12px; bottom:196px; font-size:0.7em; } }