/* KidGuide - Каталог организаций */

.kgc {
	--kgc-pink: #FF4D7D;
	--kgc-pink-dark: #F03469;
	--kgc-bg: #F5F6F8;
	--kgc-card: #FFFFFF;
	--kgc-text: #1F2430;
	--kgc-muted: #8A93A5;
	--kgc-line: #ECEEF2;
	--kgc-radius: 16px;
	--kgc-shadow: 0 2px 10px rgba(24, 32, 51, .06);
	background: var(--kgc-bg);
	color: var(--kgc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	min-height: 100vh;
	box-sizing: border-box;
}

.kgc *, .kgc *::before, .kgc *::after { box-sizing: border-box; }
.kgc img { max-width: 100%; display: block; }
.kgc button { font: inherit; cursor: pointer; }
.kgc a { color: inherit; text-decoration: none; }
.kgc ul { list-style: none; margin: 0; padding: 0; }
.kgc [hidden] { display: none !important; }

/* ---------- Верхняя панель ---------- */
.kgc-topbar {
	background: #fff;
	border-bottom: 1px solid var(--kgc-line);
	position: sticky;
	top: 0;
	z-index: 40;
}

.kgc-topbar__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 12px 28px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.kgc-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.kgc-brand__mark {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--kgc-pink);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 19px;
}

.kgc-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.kgc-brand__text strong { font-size: 16px; font-weight: 700; }
.kgc-brand__text small { font-size: 11px; color: var(--kgc-muted); }

.kgc-region {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--kgc-line);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	flex: 0 0 auto;
}

.kgc-region select {
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	outline: none;
	cursor: pointer;
	max-width: 190px;
}

.kgc-searchbar { position: relative; flex: 1 1 auto; min-width: 0; }

.kgc-searchbar__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--kgc-muted);
	pointer-events: none;
}

.kgc-searchbar input {
	width: 100%;
	height: 42px;
	padding: 0 16px 0 40px;
	border: 1px solid var(--kgc-line);
	border-radius: 21px;
	background: var(--kgc-bg);
	font: inherit;
	color: inherit;
	outline: none;
	transition: border-color .15s, background .15s;
}

.kgc-searchbar input:focus { border-color: var(--kgc-pink); background: #fff; }
.kgc-searchbar input::-webkit-search-cancel-button { cursor: pointer; }

.kgc-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--kgc-line);
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(24, 32, 51, .12);
	padding: 6px;
	z-index: 60;
	max-height: 380px;
	overflow-y: auto;
}

.kgc-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	background: none;
	border-radius: 10px;
	text-align: left;
}

.kgc-suggest__item:hover, .kgc-suggest__item:focus-visible { background: var(--kgc-bg); }
.kgc-suggest__icon { font-size: 17px; }
.kgc-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.kgc-suggest__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgc-suggest__sub { font-size: 12px; color: var(--kgc-muted); }
.kgc-suggest__empty { padding: 14px; text-align: center; color: var(--kgc-muted); font-size: 13px; }

.kgc-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.kgc-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #4C5567;
	white-space: nowrap;
}

.kgc-action:hover { color: var(--kgc-pink); }

.kgc-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--kgc-pink);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	display: inline-grid;
	place-items: center;
}

.kgc-user { display: flex; align-items: center; gap: 9px; }
.kgc-user__avatar { width: 36px; height: 36px; border-radius: 50%; }
.kgc-user__text { display: flex; flex-direction: column; line-height: 1.2; }
.kgc-user__text strong { font-size: 13px; }
.kgc-user__text small { font-size: 11px; color: var(--kgc-muted); }

/* ---------- Компоновка ---------- */
.kgc-layout {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 28px 60px;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.kgc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }

.kgc-panel {
	background: var(--kgc-card);
	border: 1px solid var(--kgc-line);
	border-radius: var(--kgc-radius);
	box-shadow: var(--kgc-shadow);
	padding: 16px;
}

.kgc-panel__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.kgc-catlist { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }

.kgc-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 9px;
	border: 0;
	background: none;
	border-radius: 10px;
	text-align: left;
	color: #3C4455;
	transition: background .15s, color .15s;
}

.kgc-cat:hover { background: var(--kgc-bg); }
.kgc-cat.is-active { background: rgba(255, 77, 125, .09); color: var(--kgc-pink); font-weight: 600; }

.kgc-cat__icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-size: 15px;
	flex: 0 0 auto;
}

.kgc-cat__name { flex: 1 1 auto; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgc-cat__count { font-size: 12px; color: var(--kgc-muted); flex: 0 0 auto; }
.kgc-cat.is-active .kgc-cat__count { color: var(--kgc-pink); }

.kgc-field__label { margin: 14px 0 8px; font-size: 12.5px; font-weight: 600; color: #5A6376; }
.kgc-panel--pick .kgc-field__label:first-of-type { margin-top: 0; }

.kgc-ages { display: flex; flex-wrap: wrap; gap: 6px; }

.kgc-age {
	padding: 6px 12px;
	border: 1px solid var(--kgc-line);
	border-radius: 16px;
	background: #fff;
	font-size: 12.5px;
	color: #4C5567;
	transition: all .15s;
}

.kgc-age:hover { border-color: var(--kgc-pink); color: var(--kgc-pink); }
.kgc-age.is-active { background: var(--kgc-pink); border-color: var(--kgc-pink); color: #fff; font-weight: 600; }

.kgc-select {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--kgc-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	color: inherit;
	outline: none;
	cursor: pointer;
}

.kgc-select:focus { border-color: var(--kgc-pink); }

/* ---------- Кнопки ---------- */
.kgc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
}

.kgc-btn--primary { background: var(--kgc-pink); color: #fff; }
.kgc-btn--primary:hover { background: var(--kgc-pink-dark); color: #fff; }
.kgc-btn--ghost { background: #fff; border-color: var(--kgc-line); color: #3C4455; }
.kgc-btn--ghost:hover { border-color: var(--kgc-pink); color: var(--kgc-pink); }
.kgc-btn--block { width: 100%; margin-top: 14px; height: 42px; }

/* ---------- Шапка списка ---------- */
.kgc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.kgc-title { margin: 0 0 4px; font-size: 27px; font-weight: 800; letter-spacing: -.3px; }
.kgc-subtitle { margin: 0; font-size: 14px; color: var(--kgc-muted); }
.kgc-tools { display: flex; align-items: center; gap: 10px; }

.kgc-viewtoggle {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--kgc-line);
	border-radius: 10px;
	padding: 3px;
	gap: 3px;
}

.kgc-view {
	width: 32px;
	height: 30px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--kgc-muted);
	font-size: 14px;
}

.kgc-view.is-active { background: var(--kgc-pink); color: #fff; }
.kgc-tools .kgc-select { width: auto; min-width: 165px; }

/* ---------- Плитки категорий ---------- */
.kgc-chipsrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.kgc-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1 1 auto;
	padding-bottom: 2px;
}

.kgc-chips::-webkit-scrollbar { display: none; }

.kgc-chip {
	padding: 8px 16px;
	border: 1px solid var(--kgc-line);
	border-radius: 20px;
	background: #fff;
	font-size: 13px;
	color: #4C5567;
	white-space: nowrap;
	transition: all .15s;
}

.kgc-chip:hover { border-color: var(--kgc-pink); color: var(--kgc-pink); }
.kgc-chip.is-active { background: var(--kgc-pink); border-color: var(--kgc-pink); color: #fff; font-weight: 600; }

.kgc-chips__next {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--kgc-line);
	background: #fff;
	color: #4C5567;
	flex: 0 0 auto;
}

.kgc-chips__next:hover { border-color: var(--kgc-pink); color: var(--kgc-pink); }

.kgc-found { margin: 0 0 14px; font-size: 14px; color: var(--kgc-muted); }
.kgc-found strong { color: var(--kgc-text); }

/* ---------- Сетка карточек ---------- */
.kgc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kgc-grid.is-loading { opacity: .5; pointer-events: none; }
.kgc-grid--list { grid-template-columns: minmax(0, 1fr); }

.kgc-card {
	background: var(--kgc-card);
	border: 1px solid var(--kgc-line);
	border-radius: var(--kgc-radius);
	box-shadow: var(--kgc-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s, box-shadow .15s;
}

.kgc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 32, 51, .12); }

.kgc-card__media { position: relative; aspect-ratio: 16 / 10; background: #E9ECF2; overflow: hidden; }
.kgc-card__link { display: block; height: 100%; }
.kgc-card__img { width: 100%; height: 100%; object-fit: cover; }
.kgc-card__ph { display: grid; place-items: center; height: 100%; font-size: 34px; opacity: .35; }

.kgc-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 12px;
	background: #22C55E;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.kgc-fav {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #6B7385;
	font-size: 16px;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: color .15s, transform .15s;
}

.kgc-fav:hover { transform: scale(1.08); color: var(--kgc-pink); }
.kgc-fav.is-active { color: var(--kgc-pink); }
.kgc-fav.is-active::after { content: "♥"; }
.kgc-fav.is-active { font-size: 0; }
.kgc-fav.is-active::after { font-size: 16px; }

.kgc-card__body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.kgc-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.kgc-card__title a:hover { color: var(--kgc-pink); }
.kgc-card__cat { margin: 0; font-size: 12.5px; color: var(--kgc-muted); }

.kgc-card__rating { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 13px; }
.kgc-star { color: #FBBF24; }
.kgc-card__reviews { color: var(--kgc-muted); font-size: 12.5px; }
.kgc-card__place { margin: 0; font-size: 12.5px; color: #5A6376; }

.kgc-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--kgc-muted); }
.kgc-card__meta li { position: relative; }
.kgc-card__meta li + li::before { content: "·"; position: absolute; left: -6px; }

.kgc-card__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.kgc-card__thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; }

.kgc-card__foot {
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--kgc-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.kgc-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }

.kgc-tag {
	padding: 3px 9px;
	border-radius: 11px;
	background: var(--kgc-bg);
	color: #5A6376;
	font-size: 11px;
}

.kgc-card__foot .kgc-btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* Списочный вид */
.kgc-card--list { flex-direction: row; }
.kgc-card--list .kgc-card__media { width: 280px; flex: 0 0 280px; aspect-ratio: auto; }
.kgc-card--list .kgc-card__body { padding: 16px 18px; }

/* ---------- Пусто ---------- */
.kgc-empty {
	grid-column: 1 / -1;
	background: #fff;
	border: 1px solid var(--kgc-line);
	border-radius: var(--kgc-radius);
	padding: 48px 20px;
	text-align: center;
}

.kgc-empty span { font-size: 34px; display: block; margin-bottom: 10px; }
.kgc-empty h3 { margin: 0 0 6px; font-size: 17px; }
.kgc-empty p { margin: 0; color: var(--kgc-muted); font-size: 14px; }

.kgc-morewrap { display: flex; justify-content: center; margin-top: 26px; }
.kgc-morewrap .kgc-btn { height: 42px; padding: 0 28px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1240px) {
	.kgc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
	.kgc-layout { grid-template-columns: 220px minmax(0, 1fr); padding: 20px 18px 48px; }
	.kgc-topbar__inner { padding: 12px 18px; flex-wrap: wrap; }
	.kgc-searchbar { order: 3; flex-basis: 100%; }
	.kgc-actions { margin-left: auto; }
}

@media (max-width: 860px) {
	.kgc-layout { grid-template-columns: minmax(0, 1fr); }
	.kgc-side { position: static; }
	.kgc-catlist { max-height: 300px; }
	.kgc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kgc-card--list { flex-direction: column; }
	.kgc-card--list .kgc-card__media { width: 100%; flex: none; aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
	.kgc-grid { grid-template-columns: minmax(0, 1fr); }
	.kgc-title { font-size: 22px; }
	.kgc-head { align-items: flex-start; }
	.kgc-tools { width: 100%; flex-wrap: wrap; }
	.kgc-user__text { display: none; }
	.kgc-action span + * { display: none; }
}

/* ---------- Страница каталога на всю ширину ---------- */
.kgc-page .kg-header,
.kgc-page .kg-ad--header { display: none; }

.kgc-page .kg-page,
.kgc-page .kg-page__card {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}