﻿:root {
  --bg: #f6f7fb;
  --paper: rgba(255, 255, 255, 0.78);
  --paper2: rgba(255, 255, 255, 0.92);
  --ink: #0c1020;
  --muted: rgba(12, 16, 32, 0.62);
  --muted2: rgba(12, 16, 32, 0.44);
  --line: rgba(12, 16, 32, 0.10);
  --shadow: 0 18px 40px rgba(12, 16, 32, 0.10);
  --shadow2: 0 10px 26px rgba(12, 16, 32, 0.08);
  --r: 22px;
  --a1: #5b8cff;
  --a2: #ff4fd8;
  --a3: #20d7a2;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-stroke: rgba(94, 130, 255, 0.16);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --glow: 0 0 24px rgba(91, 140, 255, 0.18), 0 0 60px rgba(79, 227, 255, 0.10);
  --glow-strong: 0 0 30px rgba(91, 140, 255, 0.28), 0 0 80px rgba(255, 116, 225, 0.18);
  --focus: 0 0 0 4px rgba(91, 140, 255, 0.25);
  --control-height: 48px;
}

body {
  background: var(--bg) !important;
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 10% 10%, rgba(56,189,248,.07), transparent 70%),
    radial-gradient(900px 560px at 90% 20%, rgba(217,70,239,.06), transparent 72%),
    radial-gradient(900px 560px at 60% 90%, rgba(99,102,241,.06), transparent 72%),
    linear-gradient(135deg, #ffffff 0%, #f6f8ff 55%, #f7f8fc 100%);
}


body::after {
  content: none;
 
}

header {
  background: rgba(246, 247, 251, 0.7) !important;
  border-bottom: 1px solid rgba(12, 16, 32, 0.08) !important;
  backdrop-filter: blur(12px);
}

[data-header-row],
[data-search-form] {
  align-items: center;
}

[data-search-form] .ui-input,
[data-search-form] .ui-button {
  height: var(--control-height);
}

.header-row a,
.header-row button {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}

.header-row .ui-button {
  min-height: var(--control-height);
}

.ui-card,
.ui-panel,
.ui-modal {
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  color: var(--ink);
}

.ui-card::after,
.ui-panel::after,
.ui-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.08), rgba(79, 227, 255, 0.05), rgba(255, 116, 225, 0.06));
  mix-blend-mode: screen;
  opacity: 0.8;
}

.ui-card.is-hoverable:hover,
.ui-panel.is-hoverable:hover,
.ui-modal.is-hoverable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2), var(--glow);
}

.ui-input {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: var(--glass-inner), var(--shadow2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: var(--control-height);
}

.ui-input::placeholder {
  color: var(--muted2);
}

.ui-button {
  background: var(--glass-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-height: var(--control-height);
}

.ui-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2), var(--glow);
}

.ui-button.ui-button-primary {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow2), 0 6px 20px rgba(91, 140, 255, 0.25);
}

.ui-button.ui-button-primary:hover {
  box-shadow: var(--shadow), var(--glow-strong);
}

.ui-focus:focus,
.ui-input:focus,
.ui-button:focus {
  outline: none;
  box-shadow: var(--focus), var(--shadow2);
}

.ui-rounded-lg { border-radius: var(--r); }
.ui-rounded-md { border-radius: 16px; }

.rating-pill {
  border-radius: 9999px;
  padding: 4px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.bg-white\/80 { background: var(--paper) !important; }
.bg-white\/90 { background: var(--paper2) !important; }
.bg-white\/70 { background: var(--paper) !important; }
.bg-white { background: var(--paper2) !important; }

.border,
.border-amber-100,
.border-amber-200 {
  border-color: var(--line) !important;
}

.border-dashed {
  border-color: var(--line) !important;
}

.shadow-sm { box-shadow: var(--shadow2) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow) !important; }

.text-slate-900,
.text-slate-800,
.text-slate-700 {
  color: var(--ink) !important;
}

.text-slate-600 { color: var(--muted) !important; }
.text-slate-500,
.text-slate-400 { color: var(--muted2) !important; }

.text-amber-700 { color: var(--a1) !important; }
.text-amber-600 { color: var(--a2) !important; }
.text-amber-800 { color: var(--ink) !important; }

.bg-amber-500 {
  background-image: linear-gradient(135deg, var(--a1), var(--a2)) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.bg-amber-500:hover,
.hover\:bg-amber-600:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
  filter: saturate(1.05);
}

.bg-amber-100 { background: rgba(91, 140, 255, 0.14) !important; }
.bg-amber-50 { background: var(--paper) !important; }
.bg-amber-50\/60 { background: var(--paper) !important; }

.border-amber-200 {
  background: var(--paper2) !important;
  color: var(--a1) !important;
}

.hover\:bg-amber-50:hover {
  background: var(--paper) !important;
}

.bg-slate-100 {
  background: rgba(12, 16, 32, 0.06) !important;
  border: 1px solid rgba(12, 16, 32, 0.08);
}

input,
select,
textarea {
  background: var(--paper2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

select,
select.ui-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(12, 16, 32, 0.55) 50%),
    linear-gradient(135deg, rgba(12, 16, 32, 0.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.4em 2.4em;
  background-repeat: no-repeat;
  padding-right: 44px;
  cursor: pointer;
}

select.ui-input:hover {
  border-color: rgba(91, 140, 255, 0.45);
}

select.ui-input:focus {
  box-shadow: var(--focus), var(--shadow2);
}

.focus\:border-amber-300:focus {
  border-color: rgba(91, 140, 255, 0.55) !important;
}

.focus\:ring-amber-200:focus {
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.22) !important;
}

.stat-label { color: var(--muted2) !important; }
.stat-value { color: var(--ink) !important; }

.categories-label {
  color: rgba(91, 140, 255, 0.75);
}

[data-search-suggestions] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  z-index: 50;
  overflow: hidden;
}

.search-suggestion-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.search-suggestion-item:hover,
.search-suggestion-item.is-active {
  background: rgba(91, 140, 255, 0.12);
}

.search-suggestion-name { font-weight: 600; }

.search-suggestion-address {
  font-size: 12px;
  color: var(--muted2);
}

.search-suggestion-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(91, 140, 255, 0.7);
}

.search-suggestion-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted2);
}

.details-tags {
  background: rgba(91, 140, 255, 0.08);
  border: 1px solid rgba(91, 140, 255, 0.18);
}

.details-tags.is-selected {
  background: rgba(91, 140, 255, 0.18);
  border-color: rgba(91, 140, 255, 0.3);
}

.ui-pagination a {
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ui-pagination a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2), var(--glow);
}

.org-grid {
  grid-auto-rows: 1fr;
}

.org-card {
  height: 100%;
}

.org-card-title {
  text-align: center;
}

.rating-pill {
  border-radius: 999px;
  padding: 6px 12px;
  min-width: 64px;
  text-align: center;
}

.category-card {
  min-height: 56px;
}

.tag-chip {
  position: relative;
}

.tag-chip.is-selected {
  background: rgba(91, 140, 255, 0.18);
  border-color: rgba(91, 140, 255, 0.35);
  color: var(--ink);
}

.tag-chip.is-selected::after {
  content: "✓";
  margin-left: 6px;
  font-weight: 700;
}

section form label {
  line-height: 1;
}

.filter-field-label {
  display: block;
  margin-bottom: 6px;
  line-height: 1;
}

.ui-select {
  height: var(--control-height);
}

@media (max-width: 768px) {
  [data-search-form] {
    flex-direction: column;
    align-items: stretch;
  }

  [data-search-form] button {
    width: 100%;
  }

  [data-filter-actions] {
    flex-direction: column;
    align-items: stretch;
  }

  [data-filter-actions] a,
  [data-filter-actions] button {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  [data-header-row] {
    flex-wrap: nowrap;
    align-items: center;
  }
}


.catalog-layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 24px;
}

.catalog-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
}

.sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalog-content .org-grid {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    position: static;
  }
}


.catalog-container{
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}


.site-title {
  text-shadow: 0 6px 18px rgba(12,16,32,0.18);
}

.search-cta, .home-cta, .home-suggest {
  box-shadow: 0 10px 24px rgba(91,140,255,0.25), 0 4px 12px rgba(255,79,216,0.18);
}

.search-cta:hover, .home-cta:hover, .home-suggest:hover {
  box-shadow: 0 14px 30px rgba(91,140,255,0.35), 0 6px 14px rgba(255,79,216,0.25);
}

.catalog-sidebar-align {
  margin-top: 0;
}

.catalog-layout {
  align-items: start;
}



.catalog-header-panel {
  padding: 32px;
}


.catalog-content .org-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 0;
}
@media (max-width: 1400px){
  .catalog-content .org-grid{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}
@media (max-width: 768px){
  .catalog-content .org-grid{
    grid-template-columns: 1fr;
  }
}

.catalog-fullwidth{
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 100px;
}
.catalog-layout{
  padding-left: 0;
}
.catalog-sidebar{
  margin-left: -8px; /* подстройка */
}
.catalog-page main {
  max-width: 1920px;
  padding-left: 8px;
  padding-right: 8px;
}

.org-card-title {
  text-align: center;
}
.org-card h3 {
  text-align: center;
}
.org-card-head { padding-right: 72px; } /* чтобы заголовок не залезал под рейтинг */

.catalog-page main{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 768px){
  .catalog-fullwidth{ padding: 0 12px; }
}
@media (max-width: 768px){
  [data-header-row]{
    flex-wrap: wrap;
    gap: 8px;
  }
  [data-header-row] > *{
    flex: 1 1 auto;
  }
}
*{ box-sizing: border-box; }
html, body{ overflow-x: hidden; }
