body.map_page { background: #f3f7f5; }

/* Compact continuation of the home-page image header. */
.compact_header_page .topbar {
  position: relative;
  z-index: 1000;
  height: 116px;
  color: #fff;
  background: linear-gradient(90deg, rgba(2,37,24,.92), rgba(4,65,42,.68)), #043722 url('/assets/imgs/main_header_bckg_placeholder.webp') center 44% / cover no-repeat;
  box-shadow: 0 16px 38px rgba(9,43,30,.16);
}
.compact_header_page .topbar::before { content: ''; position: absolute; inset: 0; background: url('/assets/imgs/main_header_bckg.jpg') center 44% / cover no-repeat; opacity: .36; pointer-events: none; }
.compact_header_page .topbar-inner { position: relative; z-index: 1; max-width: 1400px; height: 116px; gap: 34px; }
.compact_header_page .city-selector { display: none; }
.compact_header_page .main-location { display: none; }
.compact_header_page .city-current { width: 100%; min-height: 50px; overflow: hidden; padding: 0 46px 0 20px; border: 1px solid rgba(75,255,172,.48); border-radius: 999px; color: #fff; background: rgba(0,0,0,.42); font: 15px 'ProximaNova-Semibold'; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.compact_header_page .city-current::after { content: ''; position: absolute; top: 19px; right: 22px; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.compact_header_page .cities_list { position: absolute; top: 59px; color: var(--ink); }
.compact_header_page .main-actions { align-items: center; gap: 14px; }
.compact_header_page a.profile-btn { position: relative; width: 34px; height: 34px; }

.map-wrapper { position: relative; display: flex; flex-direction: column; }
.map-wrapper--page { width: min(1400px, calc(100% - 20px)); margin: 12px auto 12px; }
.map-filter-panel { padding: 10px 12px; overflow: hidden; position: absolute; z-index: 9; background: #ffffffa3; border-radius: 25px;}
.map_page .category-grid { position: static; z-index: auto; display: flex; width: auto; gap: 8px; overflow-x: auto; margin: 0; padding: 2px; background: transparent; scrollbar-width: thin; scroll-snap-type: x proximity; }
.map_page .category-card { flex: 0 0 auto; min-height: 44px; box-sizing: border-box; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; box-shadow: none; font-size: 13px; scroll-snap-align: start; }
.map_page .category-card::before { width: 32px; height: 32px; }
.map_page .category-card:hover,
.map_page .category-card:focus-visible { border-color: rgba(23,106,75,.38); background: var(--surface-soft); box-shadow: 0 6px 18px rgba(23,106,75,.1); outline: none; transform: translateY(-1px); }
.map_page .category-card.active { background: #15784c; color: #FFF; }
.map-canvas { position: relative; height: clamp(560px, calc(100vh - 235px), 780px); min-height: 560px; overflow: hidden; border: 1px solid rgba(23,106,75,.12); border-radius: 24px; background: #dfe8e3; box-shadow: 0 22px 54px rgba(25,60,44,.15); }
#map { width: 100%; height: 100%; margin: 0; }

.map-cuisine-marker {
  --marker-scale: 1;
  --marker-hover-scale: 1.06;
  position: relative;
  width: 54px;
  height: 62px;
  cursor: pointer;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--marker-scale));
  transition: transform .18s ease;
}

.map-cuisine-marker:hover {
  transform: translate(-50%, calc(-100% - 2px)) scale(var(--marker-hover-scale));
}

#map.map-markers--medium .map-cuisine-marker {
  --marker-scale: .78;
  --marker-hover-scale: .85;
}

#map.map-markers--far .map-cuisine-marker {
  --marker-scale: .58;
  --marker-hover-scale: .66;
}

.map-cuisine-marker-pin {
  position: absolute;
  top: 0;
  left: 3px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: var(--brand);
  box-shadow: 0 8px 20px rgba(6, 73, 49, .28);
  transform: rotate(-45deg);
}

.map-cuisine-marker-pin img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(45deg);
}

.map-cuisine-marker.has-restaurant-logo .map-cuisine-marker-pin img {
  width: 35px;
  height: 35px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
}

.map-cuisine-marker.is-paused .map-cuisine-marker-pin {
  background: #7e8783;
  box-shadow: 0 8px 20px rgba(48, 57, 53, .24);
}

.map-cuisine-marker.is-paused .map-cuisine-marker-pin img {
  filter: grayscale(1);
  opacity: .82;
}

.map-cuisine-marker.is-paused.has-restaurant-logo .map-cuisine-marker-pin img {
  opacity: .88;
}

#restaurant-card { position: absolute; z-index: 20; left: 20px; bottom: 20px; width: min(380px, calc(100% - 40px)); overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: 0 18px 46px rgba(0,0,0,.2); animation: restaurant-card-in .22s ease-out; }
#restaurant-card.hidden { display: none; }
#restaurant-card img { display: block; width: 100%; height: 128px; object-fit: cover; }
.card-body { padding: 0 16px 16px; }
.restaurant-card-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 14px; }
#restaurant-card .btn,
#restaurant-card .card-btn { min-height: 38px; line-height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: 0 15px; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; }
#restaurant-card .btn { margin: 0; background: #f1f1f1; color: #333; }
.restaurant-card-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #222; cursor: pointer; font-size: 22px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.restaurant-card-heading { padding: 14px 16px 8px; }
.restaurant-card-heading h2 { margin: 0 0 5px; color: #222; font-size: 21px; line-height: 1.2; }
.restaurant-card-heading p { margin: 0; color: #777; font-size: 13px; }
#card-adr { position: relative; margin: 0; padding-left: 18px; color: #444; font-size: 14px; line-height: 1.4; }
#card-adr::before { content: ''; position: absolute; left: 2px; top: 4px; width: 7px; height: 7px; border: 2px solid var(--brand); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.restaurant-link-area { cursor: pointer; }
#restaurant-card .card-btn { color: #fff; background: var(--brand); box-shadow: 0 8px 18px rgba(23,106,75,.22); }
#restaurant-card .card-btn:hover { background: var(--brand-dark); }
@keyframes restaurant-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* The restaurant-address modal reuses this partial. */
.app-modal .map-wrapper { width: 100%; height: min(76vh, 680px); min-height: 430px; margin: 0; border-radius: 18px; }
.app-modal .map-canvas { height: 100%; min-height: inherit; border: 0; border-radius: inherit; box-shadow: none; }
.app-modal #map { height: 100% !important; margin: 0; }
.app-modal [class^='ymaps-'][class$='controls-pane'] { display: none !important; }
.app-modal-content #map > ymaps > ymaps > ymaps { position: unset !important; }

@media (max-width: 1100px) {
  .compact_header_page .topbar,
  .compact_header_page .topbar-inner { height: 88px; }
  .compact_header_page .topbar-inner { padding: 0 18px; gap: 10px; }
  .compact_header_page .main-brand { width: 112px; height: 56px; }
  .compact_header_page .main-menu-toggle { position: relative; display: block; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); cursor: pointer; }
  .compact_header_page .main-menu-toggle::before,
  .compact_header_page .main-menu-toggle::after,
  .compact_header_page .main-menu-toggle span { content: ''; position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
  .compact_header_page .main-menu-toggle::before { top: 14px; }
  .compact_header_page .main-menu-toggle span { top: 21px; }
  .compact_header_page .main-menu-toggle::after { top: 28px; }
  .compact_header_page .main-menu-toggle.is-open::before { top: 21px; transform: rotate(45deg); }
  .compact_header_page .main-menu-toggle.is-open span { opacity: 0; }
  .compact_header_page .main-menu-toggle.is-open::after { top: 21px; transform: rotate(-45deg); }
  .compact_header_page .main-navigation { position: absolute; z-index: 10; top: 78px; right: 18px; left: 18px; display: grid; gap: 2px; margin: 0; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(3,47,31,.98); box-shadow: 0 20px 42px rgba(1,22,15,.28); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .compact_header_page .main-navigation.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .compact_header_page .main-navigation a { display: flex; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 15px; }
  .compact_header_page .main-navigation a:hover,
  .compact_header_page .main-navigation a:focus-visible { background: rgba(255,255,255,.1); text-decoration: none; }
  .compact_header_page .topbar-search { max-width: 280px; }
  .compact_header_page .main-actions { margin-left: auto; }
}

@media (max-width: 768px) {
  .compact_header_page .topbar,
  .compact_header_page .topbar-inner { height: 78px; }
  .compact_header_page .topbar-inner { padding: 0 14px; gap: 8px; }
  .compact_header_page .main-brand { width: 92px; height: 50px; }
  .compact_header_page .main-menu-toggle { display: block; }
  .compact_header_page .main-actions { gap: 1px; }
  .compact_header_page a.profile-btn { width: 29px; height: 30px; transform: scale(.82); }
  .compact_header_page .main-cart-btn { width: 30px; height: 34px; transform: scale(.78); }
  .compact_header_page .main-navigation { top: 68px; right: 12px; left: 12px; }
  .compact_header_page .main-navigation.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .compact_header_page .main-navigation a { display: flex; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 15px; }
  .compact_header_page .main-navigation a:hover,
  .compact_header_page .main-navigation a:focus-visible { background: rgba(255,255,255,.1); text-decoration: none; }
  .map-wrapper--page { width: calc(100% - 10px); margin: 12px auto 32px; }
  .map-filter-panel { margin-bottom: 10px; padding: 0px; border-radius: 15px; }
  .map_page .category-card { min-height: 40px; padding: 4px 12px 4px 6px; font-size: 12px; }
  .map_page .category-card::before { width: 30px; height: 30px; }
  .map-canvas { height: clamp(500px, 68vh, 640px); min-height: 500px; border-radius: 18px; }
}

@media (max-width: 560px) {
  .compact_header_page .topbar-inner { padding: 0 9px; gap: 5px; }
  .compact_header_page .main-brand { width: 78px; }
  .compact_header_page .main-menu-toggle { flex-basis: 44px; width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  .app-modal .map-wrapper { height: calc(100vh - 80px); min-height: 0; border-radius: 0; }
  #restaurant-card { left: 10px; right: 10px; bottom: 10px; width: auto; border-radius: 16px; }
  #restaurant-card img { height: 104px; }
  .restaurant-card-actions { grid-template-columns: 1fr; }
  #restaurant-card .btn,
  #restaurant-card .card-btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .compact_header_page .main-navigation,
  #restaurant-card { animation: none; transition: none; }
}