@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
@import './business.css';

:root {
    --bg-body: #FFFFFF; 
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F3F4F6;
    --bg-feed: #F5F5F5;
    --text-primary: #111111;
    --text-secondary: #5F6368;
    --border-color: #E5E7EB;
    --brand-color: #D63A24;
    --brand-light: #FDECE8;
    --accent: #F5A300;
    --accent-text: #B45309;
    --promo: #D63A24;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

[data-theme="dark"] {
    --bg-body: #0A0A0A;
    --bg-surface: #171717;
    --bg-surface-hover: #262626;
    --bg-feed: #0A0A0A;
    --text-primary: #EDEDED;
    --text-secondary: #A3A3A3;
    --border-color: #333333;
    --brand-color: #FF6B55;
    --brand-light: #3A1610;
    --shadow-card: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background-color: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); }

/* ==========================================
   BUTTONS
   ========================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; text-decoration: none; }
.btn-primary { background-color: var(--brand-color); color: #FFFFFF; }
.btn-secondary { background-color: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn.square { width: 44px; min-width: 44px; height: 44px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================
   APP LAYOUT
   ========================================== */
.app-header { position: sticky; top: 0; z-index: 50; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); gap: 8px; }
.app-header > * { flex-shrink: 0; }
.icon-btn { background: none; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; min-width: 44px; min-height: 44px; }
.logo { text-decoration: none; font-size: 22px; font-weight: 800; font-family: var(--font-heading); letter-spacing: -0.5px; color: var(--text-primary); }
.logo span { color: var(--promo); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-header .btn.btn-secondary { min-height: 36px; height: 36px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.app-header .btn.btn-secondary.square { width: 36px; min-width: 36px; padding: 0; }

/* ==========================================
   HAMBURGER MENU (Drawer)
   ========================================== */
.drawer { position: fixed; inset: 0; z-index: 100; display: flex; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.drawer__panel { position: relative; width: 80%; max-width: 320px; height: 100%; background: var(--bg-surface); display: flex; flex-direction: column; padding: 24px 20px; box-shadow: 4px 0 24px rgba(0,0,0,0.1); animation: slideIn 0.25s ease; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer__panel a, .drawer__panel button { text-decoration: none; color: var(--text-primary); font-size: 16px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--border-color); display: block; background: none; border-top: none; border-left: none; border-right: none; text-align: left; cursor: pointer; }
.drawer__panel a:hover, .drawer__panel button:hover { color: var(--brand-color); }
.drawer__panel .btn-secondary { margin-top: 20px; text-align: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; border-bottom: 1px solid var(--border-color); }

/* ==========================================
   BOTTOM NAV (PREMIUM DESIGN)
   ========================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 68px; display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); padding-bottom: env(safe-area-inset-bottom); }
[data-theme="dark"] .bottom-nav { background: rgba(23, 23, 23, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); }
.nav-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-secondary); transition: all 0.2s ease; }
.nav-item svg { width: 24px; height: 24px; transition: all 0.2s ease; }
.nav-item span { font-size: 11px; font-weight: 600; transition: all 0.2s ease; }
.nav-item.active { color: var(--brand-color); }
.nav-item.active svg { transform: translateY(-2px); stroke: var(--brand-color); }
.nav-item.active span { font-weight: 800; }

/* ==========================================
   DISCOVER PAGE TOP (Search & Categories)
   ========================================== */
.dtop { position: sticky; top: 60px; z-index: 30; background: var(--bg-surface); padding: 10px 12px; }
.dsearch { display: flex; align-items: center; gap: 8px; }
.loc-chip { flex: none; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-primary); background: none; border: none; }
.dsearch__field { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); }
.dsearch__field input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
.gps-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-color); }

.top-cats { display: flex; justify-content: center; gap: 20px; padding: 16px; background: var(--bg-surface); margin-bottom: 0; }
.top-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px 10px; background: none; border: 2px solid transparent; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s, transform 0.12s; }
.top-cat:active { transform: scale(0.94); }
.top-cat.active { background: var(--brand-light); border-color: transparent !important; box-shadow: 0 4px 12px rgba(214, 58, 36, 0.15); }
.top-cat__img { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; opacity: 0.75; transform: scale(0.92); transition: opacity 0.2s, transform 0.2s; position: relative; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.10)); animation: floatIcon 3s ease-in-out infinite; }
.top-cat.active .top-cat__img { opacity: 1; transform: scale(1); }
.top-cat__img svg, .top-cat__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(214, 58, 36, 0.15)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10)); }
.top-cat__label { font-size: 14px; font-weight: 700; color: var(--text-secondary); transition: color 0.2s; }
.top-cat.active .top-cat__label { color: var(--brand-color); }

/* ==========================================
   DISCOVER SECTIONS (PICHA NDEFU & GRID YA DIANPING)
   ========================================== */
.section-feed { background: var(--bg-body); padding: 12px 12px 88px; min-height: 60vh; }

.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }

.section-card-link { display: block; height: 100%; margin: 0; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }

.section-card { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; border-radius: 12px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: none; transition: transform 0.15s; }
.section-card-link:active .section-card { transform: scale(0.97); }

.section-card__img { position: relative; aspect-ratio: 4 / 5 !important; background: var(--bg-surface-hover); overflow: hidden; border-radius: 12px 12px 0 0; }
.section-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: 44px; font-weight: 800; background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)); }
.section-card__badge { position: absolute; top: 8px; left: 8px; background: var(--promo); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 999px; }

.section-card__body { display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 10px 12px !important; flex: 1; gap: 3px; }
.section-card__title { font-size: 14px !important; font-weight: 700 !important; color: var(--text-primary); margin-bottom: 0 !important; line-height: 1.3 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important; }
.section-card__meta { display: flex; align-items: center; font-size: 12px !important; color: var(--text-secondary); margin-top: 0 !important; }
.section-card__count { display: inline-flex; align-items: center; gap: 4px; }
.section-card__count::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-color); }

@media (min-width: 768px) { .section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

@media (min-width: 1024px) { .section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .section-card__img { aspect-ratio: 4 / 5 !important; } }

/* ==========================================
   BUSINESSES PAGE
   ========================================== */
.bpage-top { position: sticky; top: 60px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.bpage-back { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--text-primary); cursor: pointer; }
.bpage-back:active { background: var(--bg-surface-hover); }
.bpage-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface-hover); color: var(--text-secondary); }
.bpage-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text-primary); }
.bpage-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 8px; background: var(--bg-feed); }
.bpage-title { font-size: 20px; }
.bpage-count { font-size: 12px; color: var(--text-secondary); }
.bpage-list { padding: 4px 10px 88px; background: var(--bg-feed); min-height: 60vh; }
.bpage-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; color: var(--text-secondary); }
.bpage-empty p { font-size: 14px; }
.bpage-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0 10px 96px; background: var(--bg-feed); }
.bpage-page { min-width: 36px; height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.bpage-page.active { background: var(--brand-color); color: #fff; }
.bpage-page.disabled { opacity: 0.4; pointer-events: none; }

.biz-card-link { display: block; margin-bottom: 10px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.biz-card { display: flex; gap: 12px; padding: 10px; background: var(--bg-surface); border-radius: 14px; transition: transform 0.15s; }
.biz-card-link:active .biz-card { transform: scale(0.98); }
.biz-card__logo { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--brand-color); }
.biz-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.biz-card__badge { position: absolute; top: 6px; left: 6px; background: var(--promo); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.biz-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.biz-card__name { font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__area { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.biz-card__area span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__footer { display: flex; justify-content: flex-end; margin-top: auto; }
.biz-card__call { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; background: var(--brand-color); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.biz-card__call:active { opacity: 0.85; }

@media (min-width: 768px) { .main-container { max-width: 720px !important; } }
@media (min-width: 1024px) { .main-container { max-width: 1100px !important; } }

/* ==========================================
   ANIMATIONS & MISC
   ========================================== */
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes splashBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes splashSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes floatIcon { 0%, 100% { transform: scale(0.92) translateY(0); } 50% { transform: scale(0.92) translateY(-6px); } }
.top-cat.active .top-cat__img { animation: floatIconActive 3s ease-in-out infinite; }
@keyframes floatIconActive { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1) translateY(-6px); } }
.top-cat:nth-child(1) .top-cat__img { animation-delay: 0s; }
.top-cat:nth-child(2) .top-cat__img { animation-delay: 0.4s; }
.top-cat:nth-child(3) .top-cat__img { animation-delay: 0.8s; }

/* ==========================================
   TOP CATS - Picha Badala Ya SVG
   ========================================== */
.top-cat__img svg { display: none !important; }
.top-cat:nth-child(1) .top-cat__img { background-image: url('/assets/icons/food.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(2) .top-cat__img { background-image: url('/assets/icons/juice.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(3) .top-cat__img { background-image: url('/assets/icons/cocktail.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ==========================================
   GPS PROMPT MODAL (PREMIUM DESIGN)
   ========================================== */
.gps-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(17, 17, 17, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; animation: gpsFadeIn 0.3s ease-out; }
@media (min-width: 640px) { .gps-modal-overlay { align-items: center; } }
@keyframes gpsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.gps-modal-content { background: var(--bg-surface); width: 100%; max-width: 420px; border-radius: 24px 24px 0 0; padding: 32px 24px 24px; text-align: center; box-shadow: 0 -10px 40px rgba(0,0,0,0.15); animation: gpsSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
@media (min-width: 640px) { .gps-modal-content { border-radius: 24px; animation: gpsZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 20px 60px rgba(0,0,0,0.2); } }
@keyframes gpsSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes gpsZoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gps-modal-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: 999px; margin: 0 auto 20px auto; }
@media (min-width: 640px) { .gps-modal-handle { display: none; } }
.gps-modal-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), #FFE4DF); color: var(--brand-color); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; box-shadow: 0 8px 20px rgba(214, 58, 36, 0.15); position: relative; }
.gps-modal-icon::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--brand-color); opacity: 0; animation: gpsPulse 2s infinite; }
@keyframes gpsPulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
.gps-modal-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.5px; }
.gps-modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; padding: 0 8px; }
.gps-modal-btn { width: 100%; height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.15s, opacity 0.15s; }
.gps-modal-btn:active { transform: scale(0.96); }
.gps-modal-btn.primary { background: var(--brand-color); color: #fff; box-shadow: 0 8px 20px rgba(214, 58, 36, 0.25); margin-bottom: 12px; }
.gps-modal-btn.primary:disabled { opacity: 0.7; cursor: not-allowed; }
.gps-modal-btn.secondary { background: transparent; color: var(--text-secondary); font-weight: 600; height: 44px; }
.gps-modal-btn.secondary:hover { color: var(--text-primary); }
.gps-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: gpsSpin 0.8s linear infinite; }
@keyframes gpsSpin { to { transform: rotate(360deg); } }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
@import './business.css';

:root {
    --bg-body: #FFFFFF; 
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F3F4F6;
    --bg-feed: #F5F5F5;
    --text-primary: #111111;
    --text-secondary: #5F6368;
    --border-color: #E5E7EB;
    --brand-color: #D63A24;
    --brand-light: #FDECE8;
    --accent: #F5A300;
    --accent-text: #B45309;
    --promo: #D63A24;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

[data-theme="dark"] {
    --bg-body: #0A0A0A;
    --bg-surface: #171717;
    --bg-surface-hover: #262626;
    --bg-feed: #0A0A0A;
    --text-primary: #EDEDED;
    --text-secondary: #A3A3A3;
    --border-color: #333333;
    --brand-color: #FF6B55;
    --brand-light: #3A1610;
    --shadow-card: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background-color: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); }

/* ==========================================
   BUTTONS
   ========================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; text-decoration: none; }
.btn-primary { background-color: var(--brand-color); color: #FFFFFF; }
.btn-secondary { background-color: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn.square { width: 44px; min-width: 44px; height: 44px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================
   APP LAYOUT
   ========================================== */
.app-header { position: sticky; top: 0; z-index: 50; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); gap: 8px; }
.app-header > * { flex-shrink: 0; }
.icon-btn { background: none; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; min-width: 44px; min-height: 44px; }
.logo { text-decoration: none; font-size: 22px; font-weight: 800; font-family: var(--font-heading); letter-spacing: -0.5px; color: var(--text-primary); }
.logo span { color: var(--promo); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-header .btn.btn-secondary { min-height: 36px; height: 36px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.app-header .btn.btn-secondary.square { width: 36px; min-width: 36px; padding: 0; }

/* ==========================================
   HAMBURGER MENU (Drawer)
   ========================================== */
.drawer { position: fixed; inset: 0; z-index: 100; display: flex; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.drawer__panel { position: relative; width: 80%; max-width: 320px; height: 100%; background: var(--bg-surface); display: flex; flex-direction: column; padding: 24px 20px; box-shadow: 4px 0 24px rgba(0,0,0,0.1); animation: slideIn 0.25s ease; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer__panel a, .drawer__panel button { text-decoration: none; color: var(--text-primary); font-size: 16px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--border-color); display: block; background: none; border-top: none; border-left: none; border-right: none; text-align: left; cursor: pointer; }
.drawer__panel a:hover, .drawer__panel button:hover { color: var(--brand-color); }
.drawer__panel .btn-secondary { margin-top: 20px; text-align: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; border-bottom: 1px solid var(--border-color); }

/* ==========================================
   BOTTOM NAV (PREMIUM DESIGN)
   ========================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 68px; display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); padding-bottom: env(safe-area-inset-bottom); }
[data-theme="dark"] .bottom-nav { background: rgba(23, 23, 23, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); }
.nav-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-secondary); transition: all 0.2s ease; }
.nav-item svg { width: 24px; height: 24px; transition: all 0.2s ease; }
.nav-item span { font-size: 11px; font-weight: 600; transition: all 0.2s ease; }
.nav-item.active { color: var(--brand-color); }
.nav-item.active svg { transform: translateY(-2px); stroke: var(--brand-color); }
.nav-item.active span { font-weight: 800; }

/* ==========================================
   DISCOVER PAGE TOP (Search & Categories)
   ========================================== */
.dtop { position: sticky; top: 60px; z-index: 30; background: var(--bg-surface); padding: 10px 12px; }
.dsearch { display: flex; align-items: center; gap: 8px; }
.loc-chip { flex: none; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-primary); background: none; border: none; }
.dsearch__field { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); }
.dsearch__field input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
.gps-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-color); }

.top-cats { display: flex; justify-content: center; gap: 20px; padding: 16px; background: var(--bg-surface); margin-bottom: 0; }
.top-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px 10px; background: none; border: 2px solid transparent; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s, transform 0.12s; }
.top-cat:active { transform: scale(0.94); }
.top-cat.active { background: var(--brand-light); border-color: transparent !important; box-shadow: 0 4px 12px rgba(214, 58, 36, 0.15); }
.top-cat__img { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; opacity: 0.75; transform: scale(0.92); transition: opacity 0.2s, transform 0.2s; position: relative; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.10)); animation: floatIcon 3s ease-in-out infinite; }
.top-cat.active .top-cat__img { opacity: 1; transform: scale(1); }
.top-cat__img svg, .top-cat__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(214, 58, 36, 0.15)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10)); }
.top-cat__label { font-size: 14px; font-weight: 700; color: var(--text-secondary); transition: color 0.2s; }
.top-cat.active .top-cat__label { color: var(--brand-color); }

/* ==========================================
   DISCOVER SECTIONS (PICHA NDEFU & GRID YA DIANPING)
   ========================================== */
.section-feed { 
    background: var(--bg-body); 
    padding: 12px 12px 88px; 
    min-height: 60vh; 
}

/* Grid ya safu 2 kama Dianping */
.section-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Safu 2 kwenye simu */
    gap: 12px; /* Nafasi kati ya kadi */
    align-items: stretch; 
}

.section-card-link { 
    display: block; 
    height: 100%; 
    margin: 0; 
    text-decoration: none; 
    color: inherit; 
    -webkit-tap-highlight-color: transparent; 
}

.section-card { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    height: 100%; 
    border-radius: 12px; 
    overflow: hidden; 
    background: var(--bg-surface); 
    border: 1px solid var(--border-color); 
    box-shadow: none; 
    transition: transform 0.15s; 
}
.section-card-link:active .section-card { transform: scale(0.97); }

/* Picha ndefu kama Dianping (Ratio 4:5) */
.section-card__img { 
    position: relative; 
    aspect-ratio: 4 / 5 !important; 
    background: var(--bg-surface-hover); 
    overflow: hidden; 
    border-radius: 12px 12px 0 0; 
}
.section-card__img img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.section-card__ph { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    font-family: var(--font-heading); 
    font-size: 44px; 
    font-weight: 800; 
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)); 
}
.section-card__badge { 
    position: absolute; 
    top: 8px; 
    left: 8px; 
    background: var(--promo); 
    color: #fff; 
    font-size: 10px; 
    font-weight: 700; 
    letter-spacing: 0.3px; 
    padding: 2px 8px; 
    border-radius: 999px; 
}

/* Maneno yabanane sana kama Dianping */
.section-card__body { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    padding: 10px 10px 12px !important; 
    flex: 1; 
    gap: 3px; 
}
.section-card__title { 
    font-size: 14px !important; 
    font-weight: 700 !important; 
    color: var(--text-primary); 
    margin-bottom: 0 !important; 
    line-height: 1.3 !important; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    min-height: 0 !important; 
}
.section-card__meta { 
    display: flex; 
    align-items: center; 
    font-size: 12px !important; 
    color: var(--text-secondary); 
    margin-top: 0 !important; 
}
.section-card__count { 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
}
.section-card__count::before { 
    content: ''; 
    width: 5px; 
    height: 5px; 
    border-radius: 50%; 
    background: var(--brand-color); 
}

/* Tablet: Safu 3 */
@media (min-width: 768px) { 
    .section-grid { 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
        gap: 16px; 
    } 
}

/* Desktop: Safu 4 */
@media (min-width: 1024px) { 
    .section-grid { 
        grid-template-columns: repeat(4, minmax(0, 1fr)); 
        gap: 20px;
    } 
    .section-card__img { 
        aspect-ratio: 4 / 5 !important; 
    } 
}

/* ==========================================
   BUSINESSES PAGE
   ========================================== */
.bpage-top { position: sticky; top: 60px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.bpage-back { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--text-primary); cursor: pointer; }
.bpage-back:active { background: var(--bg-surface-hover); }
.bpage-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface-hover); color: var(--text-secondary); }
.bpage-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text-primary); }
.bpage-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 8px; background: var(--bg-feed); }
.bpage-title { font-size: 20px; }
.bpage-count { font-size: 12px; color: var(--text-secondary); }
.bpage-list { padding: 4px 10px 88px; background: var(--bg-feed); min-height: 60vh; }
.bpage-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; color: var(--text-secondary); }
.bpage-empty p { font-size: 14px; }
.bpage-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0 10px 96px; background: var(--bg-feed); }
.bpage-page { min-width: 36px; height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.bpage-page.active { background: var(--brand-color); color: #fff; }
.bpage-page.disabled { opacity: 0.4; pointer-events: none; }

.biz-card-link { display: block; margin-bottom: 10px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.biz-card { display: flex; gap: 12px; padding: 10px; background: var(--bg-surface); border-radius: 14px; transition: transform 0.15s; }
.biz-card-link:active .biz-card { transform: scale(0.98); }
.biz-card__logo { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--brand-color); }
.biz-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.biz-card__badge { position: absolute; top: 6px; left: 6px; background: var(--promo); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.biz-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.biz-card__name { font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__area { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.biz-card__area span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__footer { display: flex; justify-content: flex-end; margin-top: auto; }
.biz-card__call { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; background: var(--brand-color); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.biz-card__call:active { opacity: 0.85; }

@media (min-width: 768px) { .main-container { max-width: 720px !important; } }
@media (min-width: 1024px) { .main-container { max-width: 1100px !important; } }

/* ==========================================
   ANIMATIONS & MISC
   ========================================== */
@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes splashBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes splashSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes floatIcon {
    0%, 100% { transform: scale(0.92) translateY(0); }
    50% { transform: scale(0.92) translateY(-6px); }
}

.top-cat.active .top-cat__img {
    animation: floatIconActive 3s ease-in-out infinite;
}

@keyframes floatIconActive {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1) translateY(-6px); }
}

.top-cat:nth-child(1) .top-cat__img { animation-delay: 0s; }
.top-cat:nth-child(2) .top-cat__img { animation-delay: 0.4s; }
.top-cat:nth-child(3) .top-cat__img { animation-delay: 0.8s; }

/* ==========================================
   TOP CATS - Picha Badala Ya SVG
   ========================================== */
.top-cat__img svg { display: none !important; }
.top-cat:nth-child(1) .top-cat__img { background-image: url('/assets/icons/food.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(2) .top-cat__img { background-image: url('/assets/icons/juice.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(3) .top-cat__img { background-image: url('/assets/icons/cocktail.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
@import './business.css';

:root {
    --bg-body: #FFFFFF; 
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F3F4F6;
    --bg-feed: #F5F5F5;
    --text-primary: #111111;
    --text-secondary: #5F6368;
    --border-color: #E5E7EB;
    --brand-color: #D63A24;
    --brand-light: #FDECE8;
    --accent: #F5A300;
    --accent-text: #B45309;
    --promo: #D63A24;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

[data-theme="dark"] {
    --bg-body: #0A0A0A;
    --bg-surface: #171717;
    --bg-surface-hover: #262626;
    --bg-feed: #0A0A0A;
    --text-primary: #EDEDED;
    --text-secondary: #A3A3A3;
    --border-color: #333333;
    --brand-color: #FF6B55;
    --brand-light: #3A1610;
    --shadow-card: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background-color: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); }

/* ==========================================
   BUTTONS
   ========================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; text-decoration: none; }
.btn-primary { background-color: var(--brand-color); color: #FFFFFF; }
.btn-secondary { background-color: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn.square { width: 44px; min-width: 44px; height: 44px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================
   APP LAYOUT
   ========================================== */
.app-header { position: sticky; top: 0; z-index: 50; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); gap: 8px; }
.app-header > * { flex-shrink: 0; }
.icon-btn { background: none; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; min-width: 44px; min-height: 44px; }
.logo { text-decoration: none; font-size: 22px; font-weight: 800; font-family: var(--font-heading); letter-spacing: -0.5px; color: var(--text-primary); }
.logo span { color: var(--promo); }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-header .btn.btn-secondary { min-height: 36px; height: 36px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.app-header .btn.btn-secondary.square { width: 36px; min-width: 36px; padding: 0; }

/* ==========================================
   HAMBURGER MENU (Drawer)
   ========================================== */
.drawer { position: fixed; inset: 0; z-index: 100; display: flex; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.drawer__panel { position: relative; width: 80%; max-width: 320px; height: 100%; background: var(--bg-surface); display: flex; flex-direction: column; padding: 24px 20px; box-shadow: 4px 0 24px rgba(0,0,0,0.1); animation: slideIn 0.25s ease; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer__panel a, .drawer__panel button { text-decoration: none; color: var(--text-primary); font-size: 16px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--border-color); display: block; background: none; border-top: none; border-left: none; border-right: none; text-align: left; cursor: pointer; }
.drawer__panel a:hover, .drawer__panel button:hover { color: var(--brand-color); }
.drawer__panel .btn-secondary { margin-top: 20px; text-align: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; border-bottom: 1px solid var(--border-color); }

/* ==========================================
   BOTTOM NAV (PREMIUM DESIGN)
   ========================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 68px; display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); padding-bottom: env(safe-area-inset-bottom); }
[data-theme="dark"] .bottom-nav { background: rgba(23, 23, 23, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); }
.nav-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-secondary); transition: all 0.2s ease; }
.nav-item svg { width: 24px; height: 24px; transition: all 0.2s ease; }
.nav-item span { font-size: 11px; font-weight: 600; transition: all 0.2s ease; }
.nav-item.active { color: var(--brand-color); }
.nav-item.active svg { transform: translateY(-2px); stroke: var(--brand-color); }
.nav-item.active span { font-weight: 800; }

/* ==========================================
   DISCOVER PAGE TOP (Search & Categories)
   ========================================== */
.dtop { position: sticky; top: 60px; z-index: 30; background: var(--bg-surface); padding: 10px 12px; }
.dsearch { display: flex; align-items: center; gap: 8px; }
.loc-chip { flex: none; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-primary); background: none; border: none; }
.dsearch__field { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); }
.dsearch__field input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
.gps-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-color); }

.top-cats { display: flex; justify-content: center; gap: 20px; padding: 16px; background: var(--bg-surface); margin-bottom: 0; }
.top-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px 10px; background: none; border: 2px solid transparent; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s, transform 0.12s; }
.top-cat:active { transform: scale(0.94); }
.top-cat.active { background: var(--brand-light); border-color: transparent !important; box-shadow: 0 4px 12px rgba(214, 58, 36, 0.15); }
.top-cat__img { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; opacity: 0.75; transform: scale(0.92); transition: opacity 0.2s, transform 0.2s; position: relative; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.10)); animation: floatIcon 3s ease-in-out infinite; }
.top-cat.active .top-cat__img { opacity: 1; transform: scale(1); }
.top-cat__img svg, .top-cat__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(214, 58, 36, 0.15)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10)); }
.top-cat__label { font-size: 14px; font-weight: 700; color: var(--text-secondary); transition: color 0.2s; }
.top-cat.active .top-cat__label { color: var(--brand-color); }

/* ==========================================
   DISCOVER SECTIONS (PICHA NDEFU & MANENO YABANANE)
   ========================================== */
.section-feed { background: var(--bg-body); padding: 12px 12px 88px; min-height: 60vh; }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.section-card-link { display: block; height: 100%; margin: 0; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.section-card { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: none; transition: transform 0.15s; }
.section-card-link:active .section-card { transform: scale(0.97); }

/* Picha iwe ndefu (Portrait) */
.section-card__img { position: relative; aspect-ratio: 3 / 4 !important; background: var(--bg-surface-hover); overflow: hidden; border-radius: 14px 14px 0 0; }
.section-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: 44px; font-weight: 800; background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)); }
.section-card__badge { position: absolute; top: 8px; left: 8px; background: var(--promo); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 999px; }

/* Maneno yabanane */
.section-card__body { display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 12px !important; flex: 1; gap: 4px; }
.section-card__title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 0 !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important; }
.section-card__meta { display: flex; align-items: center; font-size: 12px; color: var(--text-secondary); margin-top: 0 !important; }
.section-card__count { display: inline-flex; align-items: center; gap: 6px; }
.section-card__count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-color); }

/* Responsive Grid */
@media (min-width: 640px) { 
    .section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } 
}
@media (min-width: 1024px) { 
    .section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
    .section-card__img { aspect-ratio: 4 / 5 !important; } 
}

/* ==========================================
   BUSINESSES PAGE
   ========================================== */
.bpage-top { position: sticky; top: 60px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
.bpage-back { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--text-primary); cursor: pointer; }
.bpage-back:active { background: var(--bg-surface-hover); }
.bpage-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--bg-surface-hover); color: var(--text-secondary); }
.bpage-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text-primary); }
.bpage-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 8px; background: var(--bg-feed); }
.bpage-title { font-size: 20px; }
.bpage-count { font-size: 12px; color: var(--text-secondary); }
.bpage-list { padding: 4px 10px 88px; background: var(--bg-feed); min-height: 60vh; }
.bpage-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; color: var(--text-secondary); }
.bpage-empty p { font-size: 14px; }
.bpage-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0 10px 96px; background: var(--bg-feed); }
.bpage-page { min-width: 36px; height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.bpage-page.active { background: var(--brand-color); color: #fff; }
.bpage-page.disabled { opacity: 0.4; pointer-events: none; }

.biz-card-link { display: block; margin-bottom: 10px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.biz-card { display: flex; gap: 12px; padding: 10px; background: var(--bg-surface); border-radius: 14px; transition: transform 0.15s; }
.biz-card-link:active .biz-card { transform: scale(0.98); }
.biz-card__logo { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: var(--brand-color); }
.biz-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.biz-card__badge { position: absolute; top: 6px; left: 6px; background: var(--promo); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.biz-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.biz-card__name { font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__area { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.biz-card__area span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-card__footer { display: flex; justify-content: flex-end; margin-top: auto; }
.biz-card__call { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; background: var(--brand-color); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.biz-card__call:active { opacity: 0.85; }

@media (min-width: 768px) { .main-container { max-width: 720px !important; } }
@media (min-width: 1024px) { .main-container { max-width: 1100px !important; } }

/* ==========================================
   ANIMATIONS & MISC
   ========================================== */
@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes splashBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes splashSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes floatIcon {
    0%, 100% { transform: scale(0.92) translateY(0); }
    50% { transform: scale(0.92) translateY(-6px); }
}

.top-cat.active .top-cat__img {
    animation: floatIconActive 3s ease-in-out infinite;
}

@keyframes floatIconActive {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1) translateY(-6px); }
}

.top-cat:nth-child(1) .top-cat__img { animation-delay: 0s; }
.top-cat:nth-child(2) .top-cat__img { animation-delay: 0.4s; }
.top-cat:nth-child(3) .top-cat__img { animation-delay: 0.8s; }

/* ==========================================
   TOP CATS - Picha Badala Ya SVG
   ========================================== */
.top-cat__img svg { display: none !important; }
.top-cat:nth-child(1) .top-cat__img { background-image: url('/assets/icons/food.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(2) .top-cat__img { background-image: url('/assets/icons/juice.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.top-cat:nth-child(3) .top-cat__img { background-image: url('/assets/icons/cocktail.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap";.bd{background:var(--bg-feed);min-height:100vh;padding-bottom:150px}.bd-hero{position:relative;height:172px;overflow:hidden;background:linear-gradient(135deg,#FF8A3D,var(--brand-color))}.bd-hero__bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(22px) saturate(1.2);transform:scale(1.1)}.bd-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,#00000059,#0000000d 55%,#00000040)}.bd-hero__bar{position:relative;z-index:1;display:flex;justify-content:space-between;padding:12px 14px}.bd-circle{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#00000061;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.bd-circle:active{transform:scale(.92)}.bd-info{position:relative;z-index:2;margin:-52px 12px 0;padding:16px;background:var(--bg-surface);border-radius:18px;box-shadow:0 6px 20px #00000014}[data-theme=dark] .bd-info{box-shadow:none}.bd-info__top{display:flex;gap:14px}.bd-logo{width:76px;height:76px;flex:none;margin-top:-40px;border-radius:18px;border:3px solid var(--bg-surface);overflow:hidden;background:var(--brand-light);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001f}.bd-logo img{width:100%;height:100%;object-fit:cover}.bd-logo span{font-family:var(--font-heading);font-size:30px;font-weight:800;color:var(--brand-color)}.bd-info__main{flex:1;min-width:0}.bd-name{display:flex;align-items:center;gap:6px;font-size:19px;line-height:1.3;color:var(--text-primary);margin:0}.bd-name span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bd-name svg{flex:none}.bd-rating{display:flex;align-items:center;gap:6px;margin-top:6px}.bd-rating__score{font-family:var(--font-heading);font-size:20px;font-weight:800;color:#ff7a00;line-height:1}.bd-rating__count{font-size:12px;color:var(--text-secondary)}.bd-rating__new{font-size:12px;font-weight:700;color:var(--brand-color);background:var(--brand-light);padding:2px 10px;border-radius:999px}.bd-stars{display:inline-flex;gap:1px}.bd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.bd-status{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px}.bd-status.is-open{background:#22c55e1f;color:#16a34a}.bd-status.is-closed{background:#ef44441f;color:#dc2626}.bd-tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--brand-light);color:var(--brand-color)}.bd-address{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--bg-surface-hover);color:var(--text-primary);text-decoration:none;font-size:13px}.bd-address.is-static{pointer-events:none}.bd-address__icon{display:flex;color:var(--brand-color)}.bd-address__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bd-address svg:last-child{color:var(--text-secondary)}.bd-tabs{position:sticky;top:60px;z-index:20;display:flex;margin-top:12px;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}.bd-tab{position:relative;flex:1;padding:14px 0;border:none;background:none;font-size:15px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:color .2s}.bd-tab.active{color:var(--text-primary);font-weight:800}.bd-tab.active:after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:3px;transform:translate(-50%);border-radius:3px;background:linear-gradient(90deg,#FF8A3D,var(--brand-color))}.bd-tab__count{margin-left:2px;font-size:12px;font-weight:600;color:var(--text-secondary)}.bd-section{padding:12px 12px 0}.bd-segment{display:flex;padding:4px;margin-bottom:12px;border-radius:14px;background:var(--bg-surface-hover)}.bd-segment button{flex:1;padding:9px;border:none;border-radius:11px;background:transparent;font-size:14px;font-weight:700;color:var(--text-secondary);cursor:pointer}.bd-segment button.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:0 1px 4px #00000014}.bd-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;margin-bottom:12px;border-radius:21px;background:var(--bg-surface);color:var(--text-secondary)}.bd-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary)}.bd-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}.bd-chips::-webkit-scrollbar{display:none}.bd-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid transparent;border-radius:999px;background:var(--bg-surface);font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .2s}.bd-chip__label{text-transform:capitalize}.bd-chip.active{background:var(--brand-light);border-color:var(--brand-color);color:var(--brand-color);font-weight:800}.bd-chip__now{font-size:9px;font-weight:800;padding:2px 6px;border-radius:999px;background:var(--brand-color);color:#fff}.bd-menu{border-radius:14px;background:var(--bg-surface);overflow:hidden}.bd-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px}.bd-item+.bd-item{border-top:1px solid var(--border-color)}.bd-item__info{display:flex;align-items:center;gap:8px;min-width:0}.bd-item__name{font-size:15px;font-weight:600;color:var(--text-primary)}.bd-item__tag{flex:none;font-size:10px;font-weight:800;padding:2px 7px;border-radius:4px;background:#2fa84f1a;color:#2fa84f}.bd-item__price{flex:none;font-family:var(--font-heading);font-size:17px;font-weight:800;color:var(--brand-color)}.bd-item__price small{margin-right:2px;font-size:11px;font-weight:700}.bd-summary{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:12px;border-radius:14px;background:var(--bg-surface)}.bd-summary__score{font-family:var(--font-heading);font-size:44px;font-weight:800;line-height:1;color:#ff7a00}.bd-summary__side{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-secondary)}.bd-card{padding:16px;margin-bottom:12px;border-radius:14px;background:var(--bg-surface)}.bd-card__title{margin-bottom:14px;font-size:16px;color:var(--text-primary)}.bd-rate{display:flex;gap:6px;margin-bottom:14px}.bd-rate button{padding:0;border:none;background:none;cursor:pointer}.bd-rate button:active{transform:scale(.9)}.bd-input{display:block;width:100%;padding:13px 14px;margin-bottom:12px;border:1px solid transparent;border-radius:12px;background:var(--bg-surface-hover);outline:none;font-family:inherit;font-size:14px;color:var(--text-primary);resize:vertical}.bd-input:focus{border-color:var(--brand-color)}.bd-submit{width:100%;padding:14px;border:none;border-radius:999px;background:linear-gradient(90deg,#FF8A3D,var(--brand-color));color:#fff;font-size:15px;font-weight:700;cursor:pointer}.bd-submit:disabled{opacity:.45;cursor:not-allowed}.bd-alert{padding:10px 14px;margin-bottom:14px;border-radius:10px;font-size:13px;font-weight:600}.bd-alert.is-success{background:#22c55e1a;color:#16a34a}.bd-alert.is-error{background:#ef44441a;color:#dc2626}.bd-reviews{display:flex;flex-direction:column;gap:10px}.bd-review{padding:14px;border-radius:14px;background:var(--bg-surface)}.bd-review__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.bd-avatar{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand-light);font-weight:800;color:var(--brand-color)}.bd-review__who{display:flex;flex-direction:column;gap:3px}.bd-review__name{font-size:14px;font-weight:700;color:var(--text-primary)}.bd-review__text{font-size:14px;line-height:1.55;color:var(--text-primary)}.bd-empty{padding:48px 0;text-align:center;font-size:14px;color:var(--text-secondary)}.bd-actions{position:fixed;left:0;right:0;bottom:64px;z-index:40;display:flex;gap:10px;padding:10px 12px;background:var(--bg-surface);border-top:1px solid var(--border-color)}.bd-actions a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}.bd-actions a:active{transform:scale(.97)}.bd-actions__call{border:1.5px solid var(--brand-color);color:var(--brand-color);background:var(--bg-surface)}.bd-actions__go{background:linear-gradient(90deg,#FF8A3D,var(--brand-color));color:#fff}.bd-actions__go.is-disabled{opacity:.45;pointer-events:none}.bd-toast{position:fixed;left:50%;bottom:140px;z-index:60;transform:translate(-50%);padding:10px 18px;border-radius:999px;background:#000c;color:#fff;font-size:13px;font-weight:600}.bd-status.is-open{background:#f0fdf4;color:#16a34a}.bd-status.is-open-24h{background:#f5f3ff;color:#8b5cf6}.bd-status.is-closed{background:#fef2f2;color:#f87171}.bd-logo{background:#fff!important}:root{--bg-body: #FFFFFF;--bg-surface: #FFFFFF;--bg-surface-hover: #F3F4F6;--bg-feed: #F5F5F5;--text-primary: #111111;--text-secondary: #5F6368;--border-color: #E5E7EB;--brand-color: #D63A24;--brand-light: #FDECE8;--accent: #F5A300;--accent-text: #B45309;--promo: #D63A24;--shadow-card: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);--font-heading: "Manrope", sans-serif;--font-body: "Inter", sans-serif}[data-theme=dark]{--bg-body: #0A0A0A;--bg-surface: #171717;--bg-surface-hover: #262626;--bg-feed: #0A0A0A;--text-primary: #EDEDED;--text-secondary: #A3A3A3;--border-color: #333333;--brand-color: #FF6B55;--brand-light: #3A1610;--shadow-card: none}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-body);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;letter-spacing:-.5px;color:var(--text-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;font-family:var(--font-body);font-size:15px;font-weight:600;border-radius:12px;border:none;cursor:pointer;text-decoration:none}.btn-primary{background-color:var(--brand-color);color:#fff}.btn-secondary{background-color:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color)}.btn.square{width:44px;min-width:44px;height:44px;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.app-header{position:sticky;top:0;z-index:50;height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface);border-bottom:1px solid var(--border-color);gap:8px}.app-header>*{flex-shrink:0}.icon-btn{background:none;border:none;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;min-width:44px;min-height:44px}.logo{text-decoration:none;font-size:22px;font-weight:800;font-family:var(--font-heading);letter-spacing:-.5px;color:var(--text-primary)}.logo span{color:var(--promo)}.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.app-header .btn.btn-secondary{min-height:36px;height:36px;font-size:13px;padding:0 12px;border-radius:10px}.app-header .btn.btn-secondary.square{width:36px;min-width:36px;padding:0}.drawer{position:fixed;inset:0;z-index:100;display:flex}.drawer__scrim{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drawer__panel{position:relative;width:80%;max-width:320px;height:100%;background:var(--bg-surface);display:flex;flex-direction:column;padding:24px 20px;box-shadow:4px 0 24px #0000001a;animation:slideIn .25s ease}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.drawer__panel a,.drawer__panel button{text-decoration:none;color:var(--text-primary);font-size:16px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--border-color);display:block;background:none;border-top:none;border-left:none;border-right:none;text-align:left;cursor:pointer}.drawer__panel a:hover,.drawer__panel button:hover{color:var(--brand-color)}.drawer__panel .btn-secondary{margin-top:20px;text-align:center;border:1px solid var(--border-color);border-radius:12px;padding:12px;border-bottom:1px solid var(--border-color)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;height:68px;display:flex;justify-content:space-around;align-items:center;background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(0,0,0,.05);box-shadow:0 -4px 20px #0000000d;padding-bottom:env(safe-area-inset-bottom)}[data-theme=dark] .bottom-nav{background:#171717d9;border-top:1px solid rgba(255,255,255,.05);box-shadow:0 -4px 20px #0000004d}.nav-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--text-secondary);transition:all .2s ease}.nav-item svg{width:24px;height:24px;transition:all .2s ease}.nav-item span{font-size:11px;font-weight:600;transition:all .2s ease}.nav-item.active{color:var(--brand-color)}.nav-item.active svg{transform:translateY(-2px);stroke:var(--brand-color)}.nav-item.active span{font-weight:800}.dtop{position:sticky;top:60px;z-index:30;background:var(--bg-surface);padding:10px 12px}.dsearch{display:flex;align-items:center;gap:8px}.loc-chip{flex:none;display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--text-primary);background:none;border:none}.dsearch__field{flex:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-secondary)}.dsearch__field input{flex:1;border:none;outline:none;background:transparent;font-size:14px}.gps-btn{flex:none;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand-color)}.top-cats{display:flex;justify-content:center;gap:20px;padding:16px;background:var(--bg-surface);margin-bottom:0}.top-cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 14px 10px;background:none;border:2px solid transparent;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,transform .12s}.top-cat:active{transform:scale(.94)}.top-cat.active{background:var(--brand-light);border-color:transparent!important;box-shadow:0 4px 12px #d63a2426}.top-cat__img{width:84px;height:84px;display:flex;align-items:center;justify-content:center;opacity:.75;transform:scale(.92);transition:opacity .2s,transform .2s;position:relative;filter:drop-shadow(0 12px 16px rgba(0,0,0,.1));animation:floatIcon 3s ease-in-out infinite}.top-cat__img svg,.top-cat__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(214,58,36,.15)) drop-shadow(0 4px 6px rgba(0,0,0,.1))}.top-cat__label{font-size:14px;font-weight:700;color:var(--text-secondary);transition:color .2s}.top-cat.active .top-cat__label{color:var(--brand-color)}.section-grid{column-count:2;column-gap:10px}.section-card-link{display:block;break-inside:avoid;margin-bottom:10px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}[data-theme=dark] .section-card{box-shadow:none}.section-card-link:nth-child(4n+2) .section-card__img{aspect-ratio:1 / 1}.section-card-link:nth-child(4n+3) .section-card__img{aspect-ratio:4 / 5}.section-card-link:nth-child(4n+4) .section-card__img{aspect-ratio:5 / 6}.section-card__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-heading);font-size:44px;font-weight:800;background-image:linear-gradient(135deg,#ffffff2e,#0000001f)}.section-card__count{display:inline-flex;align-items:center;gap:6px}.section-card__count:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-color)}.bpage-top{position:sticky;top:60px;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}.bpage-back{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;color:var(--text-primary);cursor:pointer}.bpage-back:active{background:var(--bg-surface-hover)}.bpage-search{flex:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:var(--bg-surface-hover);color:var(--text-secondary)}.bpage-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary)}.bpage-head{display:flex;align-items:baseline;justify-content:space-between;padding:16px 16px 8px;background:var(--bg-feed)}.bpage-title{font-size:20px}.bpage-count{font-size:12px;color:var(--text-secondary)}.bpage-list{padding:4px 10px 88px;background:var(--bg-feed);min-height:60vh}.bpage-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px 16px;color:var(--text-secondary)}.bpage-empty p{font-size:14px}.bpage-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:0 10px 96px;background:var(--bg-feed)}.bpage-page{min-width:36px;height:36px;padding:0 10px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;font-weight:600;text-decoration:none}.bpage-page.active{background:var(--brand-color);color:#fff}.bpage-page.disabled{opacity:.4;pointer-events:none}.biz-card-link{display:block;margin-bottom:10px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}.biz-card{display:flex;gap:12px;padding:10px;background:var(--bg-surface);border-radius:14px;transition:transform .15s}.biz-card-link:active .biz-card{transform:scale(.98)}.biz-card__logo{position:relative;width:104px;height:104px;flex-shrink:0;border-radius:10px;overflow:hidden;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:32px;font-weight:800;color:var(--brand-color)}.biz-card__logo img{width:100%;height:100%;object-fit:cover}.biz-card__badge{position:absolute;top:6px;left:6px;background:var(--promo);color:#fff;font-family:var(--font-body);font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}.biz-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.biz-card__name{font-size:15px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.biz-card__area{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary)}.biz-card__area span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.biz-card__desc{font-size:12px;color:var(--text-secondary);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.biz-card__footer{display:flex;justify-content:flex-end;margin-top:auto}.biz-card__call{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;background:var(--brand-color);color:#fff;font-size:13px;font-weight:600;text-decoration:none}.biz-card__call:active{opacity:.85}@media(min-width:768px){.main-container{max-width:720px!important}}@media(min-width:1024px){.main-container{max-width:1100px!important}}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes splashBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes splashSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes floatIcon{0%,to{transform:scale(.92) translateY(0)}50%{transform:scale(.92) translateY(-6px)}}.top-cat.active .top-cat__img{animation:floatIconActive 3s ease-in-out infinite}@keyframes floatIconActive{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1) translateY(-6px)}}.top-cat:nth-child(1) .top-cat__img{animation-delay:0s}.top-cat:nth-child(2) .top-cat__img{animation-delay:.4s}.top-cat:nth-child(3) .top-cat__img{animation-delay:.8s}.section-feed{padding:10px 10px 88px;background:var(--bg-feed);min-height:60vh}.section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.section-card-link{display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}.section-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--bg-surface);box-shadow:0 1px 3px #0000000a;transition:transform .15s}.section-card-link:active .section-card{transform:scale(.97)}.section-card__img{position:relative;aspect-ratio:3 / 4;background:var(--bg-surface-hover);overflow:hidden;border-radius:14px 14px 0 0}.section-card__img img{display:block;width:100%;height:100%;object-fit:cover}.section-card__body{padding:10px 12px 12px}.section-card__title{font-size:16px;font-weight:800;color:var(--text-primary);margin-bottom:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.section-card__meta{display:flex;align-items:center;font-size:12px;color:var(--text-secondary)}.section-card__badge{position:absolute;top:8px;left:8px;background:var(--promo);color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:999px}@media(min-width:768px){.section-feed{max-width:900px;margin:0 auto}.section-grid{grid-template-columns:repeat(3,1fr);gap:14px}.section-card__img{aspect-ratio:1 / 1}.section-card__title{font-size:15px}}@media(min-width:1024px){.section-feed{max-width:1100px;padding:20px 20px 88px}.section-grid{grid-template-columns:repeat(4,1fr);gap:16px}.section-card__img{aspect-ratio:1 / 1}.section-card__title{font-size:15px}.section-card__body{padding:12px 14px 14px}}.top-cat__img{width:84px;height:84px;display:flex;align-items:center;justify-content:center;opacity:.85;transform:scale(.92);transition:opacity .2s,transform .2s;position:relative}.top-cat.active .top-cat__img{opacity:1;transform:scale(1)}.top-cat__img img{width:100%;height:100%;object-fit:contain;display:block}.top-cat__img svg{display:none!important}.top-cat:nth-child(1) .top-cat__img{background-image:url(/assets/icons/food.png);background-size:contain;background-repeat:no-repeat;background-position:center}.top-cat:nth-child(2) .top-cat__img{background-image:url(/assets/icons/juice.png);background-size:contain;background-repeat:no-repeat;background-position:center}.top-cat:nth-child(3) .top-cat__img{background-image:url(/assets/icons/cocktail.png);background-size:contain;background-repeat:no-repeat;background-position:center}.section-feed{background:var(--bg-body);padding:12px 12px 88px}.section-grid{column-count:auto;column-gap:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}.section-grid .section-card-link{display:block;height:100%;margin:0;break-inside:auto}.section-grid .section-card{height:100%;background:var(--bg-body);border:1px solid var(--border-color);box-shadow:none}.section-grid .section-card-link .section-card__img{aspect-ratio:1 / 1}.section-grid .section-card__body{flex:1}.section-grid .section-card__title{min-height:2.6em;margin-bottom:6px}@media(min-width:640px){.section-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}@media(min-width:1024px){.section-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}