/* ============================================================
   CityNav — общие стили для навигатора по городу/району
   Wifi-точки + Заведения. Светлая тема, мобильный паттерн.
   ============================================================ */

:root{
  --ink:        #1B2430;
  --ink-soft:   rgba(27,36,48,.62);
  --ink-faint:  rgba(27,36,48,.42);

  --bg:         #F4F7F6;
  --surface:    #FFFFFF;
  --line:       rgba(27,36,48,.09);
  --line-soft:  rgba(27,36,48,.06);

  --primary:      #0F4C5C;
  --primary-dark: #0A3744;
  --primary-soft: rgba(15,76,92,.08);

  --coral:      #FF6B4A;
  --coral-dark: #E5532F;
  --coral-soft: rgba(255,107,74,.12);

  --good:       #1FA670;
  --good-soft:  rgba(31,166,112,.12);
  --warn:       #D98E0E;
  --warn-soft:  rgba(217,142,14,.13);

  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --radius-lg: 1.1rem;
  --radius-md: .8rem;
  --radius-sm: .55rem;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
::selection{ background: var(--coral); color: #fff; }

h1, h2, h3, h4, .display{
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ============ APP SHELL ============ */
.app-shell{
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
}

/* ============ TOP BAR ============ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: 1.1rem 1.1rem .4rem;
}
.topbar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.topbar-eyebrow{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-dark);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .2rem;
}
.topbar-title{
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.topbar-avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}

/* ============ SEARCH ============ */
.search-box{
  position: relative;
  margin-bottom: .9rem;
}
.search-box input{
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: .75rem 1rem .75rem 2.7rem;
  font-family: var(--font);
  font-size: .92rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box input::placeholder{ color: var(--ink-faint); }
.search-box input:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.search-box .bi-search{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: .95rem;
}
.search-box .clear-btn{
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: var(--line-soft);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: .75rem;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ============ ФИЛЬТР-ЧИПСЫ ============ */
.chip-scroll{
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  margin: 0 -1.1rem;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.chip-scroll::-webkit-scrollbar{ display: none; }

.filter-chip{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 2rem;
  padding: .5rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all .15s ease;
  cursor: pointer;
}
.filter-chip i{ font-size: .85rem; }
.filter-chip.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter-chip:not(.is-active):hover{
  border-color: var(--primary);
  color: var(--primary);
}

/* ============ КОНТЕНТ / СЕКЦИИ ============ */
.content-wrap{
  padding: 0 1.1rem calc(112px + env(safe-area-inset-bottom));
}
.section-label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .8rem;
}
.section-label h2{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.section-label .count{
  font-size: .8rem;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ============ КАРТОЧКИ — ОБЩИЙ КАРКАС ============ */
.poi-card{
  display: flex;
  gap: .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .9rem;
  margin-bottom: .7rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.poi-card:active{ transform: scale(.99); }
.poi-card:hover{
  box-shadow: 0 10px 24px -14px rgba(27,36,48,.18);
  border-color: rgba(27,36,48,.16);
}

.poi-icon{
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: #fff;
}

.poi-body{
  flex-grow: 1;
  min-width: 0;
}
.poi-top-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.poi-name{
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.poi-desc{
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poi-meta{
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  font-size: .76rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.poi-meta .meta-item{
  display: flex;
  align-items: center;
  gap: .3rem;
}
.poi-meta i{ font-size: .8rem; }

.status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.on{ background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.status-dot.off{ background: var(--ink-faint); }

.status-pill{
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill.open{ background: var(--good-soft); color: var(--good); }
.status-pill.closed{ background: var(--line-soft); color: var(--ink-faint); }
.status-pill.busy{ background: var(--warn-soft); color: var(--warn); }
.status-pill.free{ background: var(--coral-soft); color: var(--coral-dark); }

.fav-btn{
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.05rem;
  flex-shrink: 0;
  padding: .2rem;
  transition: color .15s ease, transform .15s ease;
}
.fav-btn.is-fav{ color: var(--coral); }
.fav-btn:active{ transform: scale(1.2); }

.poi-footer{
  margin-top: .65rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
}
.details-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap .15s ease, color .15s ease;
}
.details-link i{ font-size: .78rem; transition: transform .15s ease; }
.details-link:hover{ color: var(--primary-dark); gap: .55rem; }
.details-link:hover i{ transform: translateX(2px); }

/* цветовые варианты иконок по категориям */
.icon-wifi-free{ background: var(--good); }
.icon-wifi-paid{ background: var(--warn); }
.icon-wifi-public{ background: var(--primary); }

.icon-cafe{ background: #C97A3D; }
.icon-restaurant{ background: var(--coral); }
.icon-shop{ background: var(--primary); }
.icon-pharmacy{ background: #2E9E6F; }
.icon-grocery{ background: #4C7CE0; }

/* ============ ПУСТОЕ СОСТОЯНИЕ ============ */
.empty-state{
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink-faint);
}
.empty-state i{
  font-size: 2.2rem;
  margin-bottom: .8rem;
  display: block;
  color: var(--line);
}
.empty-state p{ font-size: .9rem; margin: 0; }

/* ============================================================
   СТРАНИЦА ДЕТАЛЕЙ МЕСТА (place-detail.html)
   ============================================================ */

/* кнопка "назад" в топбаре детальной страницы */
.back-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}
.back-btn{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.back-btn:hover{ border-color: var(--primary); color: var(--primary); }

.detail-actions{
  display: flex;
  gap: .5rem;
}
.icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 1rem;
  flex-shrink: 0;
  transition: all .15s ease;
}
.icon-btn:hover{ border-color: var(--primary); color: var(--primary); }
.icon-btn.is-fav{ color: var(--coral); border-color: var(--coral-soft); }

/* ============ ГАЛЕРЕЯ ФОТО ============ */
.detail-gallery{
  margin: 0 -1.1rem 1.1rem;
  padding: 0 1.1rem;
}
.gallery-main{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: .5rem;
  position: relative;
  background: linear-gradient(135deg, #E8C39E, #C97A3D);
}
.gallery-main .gallery-badge{
  position: absolute;
  top: .8rem;
  left: .8rem;
  background: rgba(27,36,48,.55);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 1rem;
  backdrop-filter: blur(2px);
}
.gallery-thumbs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.gallery-thumb{
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.gallery-thumb:nth-child(1){ background: linear-gradient(135deg, #D9A86C, #B97A3D); }
.gallery-thumb:nth-child(2){ background: linear-gradient(135deg, #C9B79C, #8C7355); }
.gallery-thumb:nth-child(3){ background: linear-gradient(135deg, #E8C39E, #C97A3D); }
.gallery-thumb:nth-child(4){ background: linear-gradient(135deg, #B7C4A0, #6E8C54); }
.gallery-thumb.more-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,36,48,.65) !important;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

/* ============ ЗАГОЛОВОК МЕСТА ============ */
.detail-head{
  margin-bottom: 1.2rem;
}
.detail-head .d-category{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.detail-head h1{
  font-size: 1.4rem;
  margin-bottom: .5rem;
  line-height: 1.2;
}
.detail-head .d-meta-row{
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.detail-head .d-meta-row .rating-num{
  color: var(--ink);
  font-weight: 800;
}

/* ============ ИНФО-СЕТКА (адрес, часы, телефон) ============ */
.info-grid{
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.3rem;
}
.info-row{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .75rem .9rem;
}
.info-row .info-icon{
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.info-row .info-text{ flex-grow: 1; min-width: 0; }
.info-row .info-label{
  font-size: .68rem;
  color: var(--ink-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .15rem;
}
.info-row .info-value{
  font-size: .9rem;
  color: var(--ink);
  font-weight: 600;
}
.info-row .info-value.is-link{ color: var(--primary); }

/* ============ ЧАСЫ РАБОТЫ ============ */
.hours-list{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .3rem .9rem;
  margin-bottom: 1.3rem;
}
.hours-row{
  display: flex;
  justify-content: space-between;
  padding: .55rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .87rem;
}
.hours-row:first-child{ border-top: none; }
.hours-row .h-day{ color: var(--ink-soft); font-weight: 600; }
.hours-row .h-time{ color: var(--ink); font-weight: 700; }
.hours-row.is-today .h-day{ color: var(--primary); }
.hours-row.is-today .h-time{ color: var(--primary); }

/* ============ ОПИСАНИЕ ============ */
.detail-description{
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 1.3rem;
}

/* ============ ТЕГИ УДОБСТВ ============ */
.amenity-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.3rem;
}
.amenity-tag{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .75rem;
  border-radius: 1rem;
}
.amenity-tag i{ font-size: .85rem; }

/* ============ ОТЗЫВЫ ============ */
.review-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
}
.review-top{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.review-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.review-name{ font-size: .87rem; font-weight: 700; color: var(--ink); }
.review-date{ font-size: .74rem; color: var(--ink-faint); }
.review-stars{ margin-left: auto; color: #D98E0E; font-size: .78rem; white-space: nowrap; }
.review-text{ font-size: .87rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ============ КНОПКИ ДЕЙСТВИЙ (внизу страницы деталей) ============ */
.detail-cta-row{
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.btn-detail-primary{
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}
.btn-detail-secondary{
  flex: 1;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}
.btn-detail-secondary:hover{ border-color: var(--primary); color: var(--primary); }

/* ============ ПАГИНАЦИЯ ============ */
.pagination-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.3rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.page-btn{
  min-width: 38px;
  height: 38px;
  padding: 0 .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.page-btn:hover{
  border-color: var(--primary);
  color: var(--primary);
}
.page-btn.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.page-btn.is-disabled{
  opacity: .4;
  pointer-events: none;
}
.page-btn i{ font-size: .85rem; }
.page-ellipsis{
  color: var(--ink-faint);
  font-size: .85rem;
  padding: 0 .3rem;
  font-weight: 700;
}

/* ============ BOTTOM NAVIGATION ============ */
.bottom-nav{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: .55rem .5rem calc(.55rem + env(safe-area-inset-bottom));
  z-index: 30;
  box-shadow: 0 -8px 24px -16px rgba(27,36,48,.15);
}
.nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  color: var(--ink-faint);
  font-size: .68rem;
  font-weight: 700;
  padding: .35rem .9rem;
  border-radius: var(--radius-md);
  transition: color .15s ease, background .15s ease;
  flex: 1;
  max-width: 110px;
}
.nav-item i{ font-size: 1.25rem; }
.nav-item.is-active{ color: var(--primary); }
.nav-item:not(.is-active):hover{ color: var(--ink-soft); }

.nav-fab{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-top: -26px;
  box-shadow: 0 10px 22px -8px rgba(255,107,74,.55);
  border: 4px solid var(--bg);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.nav-fab:active{ transform: scale(.92); }

/* ============ STAT STRIP (верх страницы, краткая сводка) ============ */
.stat-strip{
  display: flex;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.stat-pill{
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .65rem .8rem;
  text-align: center;
}
.stat-pill .s-num{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}
.stat-pill .s-lbl{
  font-size: .68rem;
  color: var(--ink-faint);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

/* ============ ШИРОКИЕ ЭКРАНЫ (планшет/десктоп) ============
   На узком мобильном — полноширинный единый столбец (мобильный паттерн).
   На широких экранах превращаем список в сетку карточек,
   но топбар/чипсы/боттомнав остаются в том же макс-контейнере. */
@media (min-width: 576px){
  .poi-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
  }
  .poi-grid .poi-card{ margin-bottom: 0; }
}

@media (min-width: 992px){
  .app-shell{
    max-width: 900px;
    box-shadow: 0 0 60px -20px rgba(27,36,48,.12);
  }
  .poi-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .bottom-nav{ max-width: 900px; }
  .gallery-main{ aspect-ratio: 16/7; }
}

@media (max-width: 360px){
  .topbar-title{ font-size: 1.3rem; }
  .poi-icon{ width: 44px; height: 44px; font-size: 1.05rem; }
}