/* app.css — สไตล์เสริมนอกเหนือจาก Tailwind */

/* แผนที่สูง ~60% ของจอ เหลือที่ให้ลิสต์ร้านด้านล่าง */
#map {
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ป้องกัน Leaflet ทับ header */
.leaflet-top,
.leaflet-bottom {
    z-index: 400;
}

/* ── การ์ดรายการร้านใกล้ (ใต้แผนที่) ── */
.fm-near {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: background .15s var(--ease);
}
.fm-near:hover { background: var(--surface-2); }

.fm-near__thumb {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;   /* fallback อิโมจิ กรณีไม่มีอวตาร */
}

.fm-near__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fm-near__title {
    font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-near__cat { font-size: var(--fs-xs); color: var(--ink-3); }

/* แถวเจ้าของ (อวตารอยู่ทางซ้ายแล้ว ตรงนี้เหลือชื่อ) */
.fm-near__owner { font-size: var(--fs-sm); color: var(--ink-2); font-weight: var(--fw-medium); margin-top: 4px; }

/* meta: ระยะทาง / เรตติ้ง / สถานะ */
.fm-near__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 6px; }
.fm-near__dist {
    display: inline-flex; align-items: center; gap: .2em;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-strong);
    background: var(--brand-soft); padding: .25em .65em; border-radius: var(--r-pill);
}
.fm-near__rating { font-size: var(--fs-sm); color: var(--ink-2); font-weight: var(--fw-semibold); }
.fm-near__badge {
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-3);
    background: var(--surface-2); padding: .25em .6em; border-radius: var(--r-pill);
}
.fm-near__badge--visited { color: var(--success); background: var(--success-bg, #d1fae5); }

/* ปุ่ม รายละเอียด / นำทาง */
.fm-near__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.fm-near__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35em;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    padding: .55em .75em; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    text-decoration: none; cursor: pointer; transition: all .15s var(--ease);
}
.fm-near__btn svg { width: 15px; height: 15px; flex: none; }
.fm-near__btn:hover { background: var(--surface-2); }
.fm-near__btn--nav svg { color: var(--success); }   /* ไอคอนนำทางเขียว ปุ่มยังขาว */