/* Nearby destinations and nearby-hotel detail pages. */
#nearby-app {
  --nearby-bg: #f8fafc;
  --nearby-card: #fff;
  --nearby-ink: #0f172a;
  --nearby-muted: #64748b;
  --nearby-brand: #218838;
  --nearby-ring: rgba(40, 167, 69, .28);
  --nearby-radius: 18px;
  --nearby-line: #e5e7eb;
  --nearby-soft: #f1f5f9;
}
#nearby-app .nearby-page { min-height: 100dvh; background: radial-gradient(700px 420px at 20% -10%, #eaf7ef 0%, transparent 60%), var(--nearby-bg); color: var(--nearby-ink); }
#nearby-app .nearby-wrap { max-width: 1100px; margin-inline: auto; padding: 28px 16px 56px; }
#nearby-app .nearby-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin-bottom: 18px; }
#nearby-app .nearby-title { font-size: clamp(22px, 2.2vw, 32px); }
#nearby-app .nearby-actions { display: flex; align-items: center; gap: 10px; }
#nearby-app .btn { display: inline-flex; gap: 8px; border: 1px solid var(--nearby-line); border-radius: 12px; background: #fff; color: var(--nearby-brand) !important; padding: 10px 14px; text-decoration: none; }
#nearby-app .btn:hover { border-color: var(--nearby-brand); }
#nearby-app .btn-green { border-color: #1f6f2f; background: linear-gradient(180deg, #28a745, var(--nearby-brand)); color: #fff !important; }
#nearby-app .toolbar { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: 1fr 170px 170px; gap: 10px; border: 1px solid var(--nearby-line); border-radius: 14px; background: rgba(255, 255, 255, .85); padding: 10px; backdrop-filter: blur(6px); }
#nearby-app .search { position: relative; }
#nearby-app .search input, #nearby-app .select { width: 100%; border: 1px solid var(--nearby-line); border-radius: 12px; background: #fff; color: var(--nearby-ink); padding: 12px 14px 12px 42px; }
#nearby-app .search input:focus, #nearby-app .select:focus { outline: 2px solid var(--nearby-ring); }
#nearby-app .search svg { position: absolute; top: 50%; left: 12px; border: 0; margin: 0; opacity: .6; transform: translateY(-50%); }
#nearby-app .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
#nearby-app .card { position: relative; overflow: hidden; border: 1px solid var(--nearby-line); border-radius: var(--nearby-radius); background: var(--nearby-card); }
#nearby-app .card-link { display: block; color: inherit; text-decoration: none; }
#nearby-app .thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #eef8f1, #e9f4ee); }
#nearby-app .thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#nearby-app .pin { position: absolute; z-index: 2; top: 10px; right: 10px; border: 1px solid var(--nearby-line); border-radius: 12px; background: #fff; padding: 8px; }
#nearby-app .pin svg { width: 18px; height: 18px; border: 0; margin: 0; color: var(--nearby-brand); }
#nearby-app .card-body { padding: 14px; }
#nearby-app .card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.25; }
#nearby-app .meta { display: flex; align-items: center; gap: 8px; color: var(--nearby-muted); font-size: 13px; }
#nearby-app .tag { display: inline-flex; gap: 6px; border: 1px solid var(--nearby-line); border-radius: 999px; background: var(--nearby-soft); padding: 6px 10px; } #nearby-app .dot { opacity: .45; }
#nearby-app .empty { display: none; margin: 32px 6px; color: var(--nearby-muted); }
#nearby-app .pager { display: flex; justify-content: center; margin-top: 18px; }
#nearby-app .pager a, #nearby-app .pager strong { margin: 0 6px; border: 1px solid var(--nearby-line); border-radius: 10px; background: #fff; color: var(--nearby-ink); padding: 8px 12px; }
#nearby-app .pager strong { border-color: #cfe9d7; background: linear-gradient(180deg, #eaf7ef, #e1f2e7); }

.nearby-detail .hotel-display { width: 100%; background: #f9fafb; padding: 1rem; }
.nearby-detail .nearby-detail-copy { margin: 16px 0; text-align: justify; }
.nearby-detail .room-options { margin-top: 24px; }.nearby-detail .room-options > h3 { margin: 0 0 12px; color: #176f70; }
.nearby-detail .hotel-display .hotel-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.nearby-detail .hotel-list__card { display: flex; align-items: center; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .05); padding: 1rem; transition: transform .2s, box-shadow .2s; }
.nearby-detail .hotel-list__card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .1); transform: translateY(-4px); }
.nearby-detail .hotel-list__image { flex-shrink: 0; width: 120px; height: 80px; border-radius: 6px; object-fit: cover; }
.nearby-detail .hotel-list__info { flex: 1; min-width: 0; margin-left: 1rem; }.nearby-detail .hotel-list__name { margin: 0; font-size: 1.25rem; }
.nearby-detail .hotel-list__rating, .nearby-detail .hotel-list__amenities { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }.nearby-detail .hotel-list__stars { color: #ffd700; }.nearby-detail .hotel-list__reviews, .nearby-detail .hotel-list__location { color: #718096; }.nearby-detail .hotel-list__location { margin-top: .25rem; }
.nearby-detail .hotel-list__score { border-radius: 4px; background: #e6f4ff; color: #3182ce; padding: .15rem .4rem; font-size: .9rem; font-weight: 700; }.nearby-detail .hotel-list__amenities { gap: .75rem; }.nearby-detail .amenity { display: flex; align-items: center; gap: .25rem; font-size: .85rem; }
.nearby-detail .hotel-list__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }.nearby-detail .hotel-list__price { font-size: 1.1rem; font-weight: 700; }.nearby-detail .hotel-list__btn { border: 0; border-radius: 4px; background: #3182ce; color: #fff; cursor: pointer; padding: .5rem 1rem; transition: background .2s; }.nearby-detail .hotel-list__btn:hover { background: #2b6cb0; color: #fff; }

@media (max-width: 720px) { #nearby-app .toolbar, #nearby-app .nearby-header { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .nearby-detail .hotel-list__image { width: 100px; height: 66px; } }
@media (max-width: 480px) { .nearby-detail .hotel-list__card { flex-direction: column; align-items: flex-start; }.nearby-detail .hotel-list__image { width: 100%; height: 140px; margin-bottom: 1rem; }.nearby-detail .hotel-list__meta { flex-direction: row; justify-content: space-between; width: 100%; margin-top: 1rem; }.nearby-detail .hotel-list__rating { flex-wrap: wrap; gap: .25rem; } }