/**
 * Afisha plugin — front-end styles.
 *
 * Relies on theme CSS variables defined in irkutsk / bratsk:
 *   --color-primary, --color-dark, --color-background, --color-light,
 *   --color-muted, --color-dim, --color-promo,
 *   --width-site, --width-content, --space-outer, --radius-frame,
 *   --font-regular, --font-content.
 *
 * Local tokens (--afisha-*) layer the accent / secondary pieces on top and
 * can be overridden per-theme.
 */

:root {
	/* Accent color = theme primary (blue #4173ff). Fallback in case the theme
	   is inactive or doesn't define --color-primary. */
	--afisha-accent:        var(--color-primary, #4173ff);
	--afisha-accent-hover:  var(--color-primary, #345ecc);
	--afisha-pushkin:       #ff8800;
	--afisha-chip-bg:       var(--color-muted, #e0e0e0);
	--afisha-chip-active:   var(--afisha-accent);
	--afisha-card-bg:       var(--bg-card, #fff);
	--afisha-card-radius:   var(--radius-frame, 0.75rem);
	--afisha-card-border:   1px solid var(--border, rgba(10, 17, 40, 0.08));
	/* Theme-aligned: flat cards without shadows. Set to a value if a parent
	   theme wants to re-introduce elevation. */
	--afisha-card-shadow:   none;
}

/* ============================================================
 * Layout
 * ============================================================ */

.afisha-page {
	display: block;
	padding: 1.5rem 0 3rem;
	color: var(--color-dark, #212529);
	font-family: var(--font-regular, "Raleway", sans-serif);
}

.afisha-container {
	width: calc(100% - var(--space-outer, 1.25rem) * 2);
	max-width: var(--width-site, 80rem);
	margin: 0 auto;
}

/* Only the "Афиша" heading aligns with the theme logo — the button beside
   it and the catbar / grid below stay at the full container width. */
.afisha-archive__title {
	padding-left: var(--space-outer, 1.25rem);
}

@media screen and (max-width: 1023px) {
	.afisha-container { max-width: var(--width-content, 46rem); }
}

@media screen and (max-width: 479px) {
	.afisha-container { max-width: 100%; }
}

/* Narrow container used for the article body on single event/venue/selection
   pages — constrains to the theme's post-content width (736px) so the hero
   banner and text match the rest of the site's posts. The catbar sits
   *outside* this container so it spans the full site width like the main nav. */
.afisha-container--narrow {
	max-width: var(--width-content, 46rem);
}

/* ============================================================
 * Archive header, buttons, catbar
 * ============================================================ */

.afisha-archive__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.afisha-archive__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.875rem;
	line-height: 1.125;
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	letter-spacing: -0.01em;
}

a.afisha-archive__title:hover {
	color: var(--accent, var(--color-primary));
}

/* Single-event variant — drop the "create" button slot so the title
   stretches alone above the catbar. */
.afisha-archive__header--single {
	margin-bottom: 0.5rem;
}

.afisha-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 0.375rem;
	text-decoration: none;
	background: var(--color-primary, #4173ff);
	color: #fff;
	transition: filter 0.2s, background 0.2s;
}

.afisha-button:hover { filter: brightness(1.1); color: #fff; }

.afisha-button--accent { background: var(--afisha-accent); }
.afisha-button--accent:hover { background: var(--afisha-accent-hover); }

@media (max-width: 767px) {
	.afisha-archive__header .afisha-button--accent {
		padding: 0.4rem 0.75rem;
		font-size: 0.8125rem;
	}
}

.afisha-catbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}

/* Matches theme .menu__item-link — same pill, same hover + active treatment. */
.afisha-catbar__chip {
	padding: 0.5rem 0.875rem;
	font-size: 0.84375rem;   /* 13.5px */
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text);
	background: transparent;
	border: none;
	border-radius: 0.625rem;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.afisha-catbar__chip:hover {
	background: var(--bg-card-2);
	color: var(--text);
}

.afisha-catbar__chip.is-active {
	background: var(--tag-bg);
	color: var(--tag-text);
}

/* ============================================================
 * Date strip — horizontal day picker, irk.today reference style.
 *
 * Structure:
 *   [‹ prev]  <track>[day-item, day-item, ...]</track>  [next ›]
 *
 *   Each day item is a 3-row grid:
 *     month label (only first day of each month)
 *     day number (the clickable link, big bold)
 *     weekday short name
 *
 *   Weekends use the theme's warning red. Active day uses accent.
 * ============================================================ */

.afisha-datestrip {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 2rem 0 2.5rem;
}

.afisha-datestrip__nav {
	/* flex-shrink: 0 pins the buttons at the sides — track can scroll between
	   them, nav is always visible regardless of how many days render. */
	flex: 0 0 auto;
	align-self: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--color-muted, #e0e0e0);
	background: var(--color-light, #fff);
	color: var(--color-dim, #6c757d);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.afisha-datestrip__nav:hover {
	background: var(--color-background, #fafafa);
	color: var(--color-dark);
	border-color: var(--color-dim, #6c757d);
}

.afisha-datestrip__track {
	display: flex;
	flex: 1 1 auto;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 0.25rem 0.25rem 0.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.afisha-datestrip__track::-webkit-scrollbar { display: none; }

.afisha-datestrip__item {
	display: grid;
	grid-template-rows: 1rem auto;
	justify-items: center;
	row-gap: 0.15rem;
	min-width: 2.25rem;
	flex-shrink: 0;
	text-align: center;
	line-height: 1;
}

.afisha-datestrip__month {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--color-dim, #6c757d);
}

/* Day + DOW share a single clickable pill. Hover tints it with a colour
   matching the day's mood (blue for weekdays, red for weekends); active
   paints it solid accent. */
.afisha-datestrip__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0.2rem;
	padding: 0.35rem 0.65rem;
	border-radius: 0.5rem;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s, color 0.15s;
}

.afisha-datestrip__day {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1;
}

.afisha-datestrip__dow {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--color-dim, #6c757d);
	text-transform: lowercase;
	line-height: 1;
}

/* Weekend days — red number + red DOW. */
.afisha-datestrip__item.is-weekend .afisha-datestrip__day,
.afisha-datestrip__item.is-weekend .afisha-datestrip__dow {
	color: var(--color-warning, #d32f2f);
}

/* Hover — soft tint box around day+dow. Colour follows the day's mood. */
.afisha-datestrip__link:hover {
	background-color: rgba(65, 115, 255, 0.10);
}

.afisha-datestrip__item.is-weekend .afisha-datestrip__link:hover {
	background-color: rgba(211, 47, 47, 0.10);
}

/* Active (clicked) day — solid accent fill with white text. Overrides weekend
   red so the selection is unambiguous. */
.afisha-datestrip__item.is-active .afisha-datestrip__link {
	background-color: var(--afisha-accent);
}

.afisha-datestrip__item.is-active .afisha-datestrip__day,
.afisha-datestrip__item.is-active .afisha-datestrip__dow {
	color: #fff;
}

/* ============================================================
 * Chip filter row (archive & taxonomy)
 * ============================================================ */

.afisha-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 1.25rem;
}

/* Matches the site's .menu__item-link style — rounded-rect pill with
   tag-bg / tag-text active state, --text-dim/--text/-bg-card-2 on hover. */
.afisha-filters__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.875rem;
	font-size: 0.84375rem;   /* 13.5px — matches .menu__item-link */
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text);
	background: transparent;
	border: none;
	border-radius: 0.625rem;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.afisha-filters__chip:hover {
	background: var(--bg-card-2);
	color: var(--text);
}

.afisha-filters__chip.is-active {
	background: var(--tag-bg);
	color: var(--tag-text);
}

/* ============================================================
 * Footer CTA plaque
 * ============================================================ */

.afisha-footer-cta {
	margin: 2rem 0;
	padding: 2rem 1.5rem;
	background: var(--afisha-accent);
	border-radius: var(--afisha-card-radius);
	color: #fff;
	text-align: center;
}

.afisha-footer-cta h2 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	color: #fff;
}

.afisha-footer-cta p {
	margin: 0 auto 1rem;
	max-width: 30rem;
	color: rgba(255, 255, 255, 0.88);
}

.afisha-button--light {
	background: #ffffff;
	color: var(--afisha-accent);
}

.afisha-button--light:hover {
	background: #fff;
	color: var(--afisha-accent-hover);
	filter: brightness(0.95);
}

/* ============================================================
 * Selection hero (single-selection)
 * ============================================================ */

.afisha-selection__hero {
	display: flex;
	align-items: flex-end;
	min-height: 280px;
	padding: 2rem 1.5rem;
	margin-bottom: 1.5rem;
	border-radius: var(--afisha-card-radius);
	background-color: var(--color-muted);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.afisha-selection__hero-body h1 {
	margin: 0 0 0.5rem;
	font-size: 2rem;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.afisha-selection__hero-body .afisha-selection__excerpt {
	color: rgba(255, 255, 255, 0.92);
	max-width: 40rem;
}

.afisha-selection__hero-body .afisha-selection__excerpt p { margin: 0; }

/* ============================================================
 * Event extras and actions
 * ============================================================ */

.afisha-event__specs {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: var(--color-background, #fafafa);
	border-radius: var(--afisha-card-radius);
	font-size: 0.9375rem;
}

.afisha-event__specs dt {
	color: var(--color-dim);
	font-weight: 600;
}

.afisha-event__specs dd {
	margin: 0;
}

.afisha-event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
}

.afisha-remind__status {
	font-size: 0.875rem;
	color: var(--color-dim);
}

/* "Показать ещё" uses the theme's native `.navigate + .navigate__button + .button`
   markup for pixel-perfect parity with news archives. Only extra rule we need
   is centring — the theme's `.navigate` sits inside its own flex layout. */
.afisha-page .navigate--more {
	justify-content: center;
	margin: 2rem auto 0;
	max-width: var(--width-content, 46rem);
}

.afisha-page .navigate--more .navigate__button {
	max-width: 20rem;
	margin: 0 auto;
}

/* ============================================================
 * Hero slider (promoted events) — scroll-snap carousel. 3 card/view
 * на десктопе, 2 на планшете, 1 на мобиле. afisha.js (data-hero-slider)
 * навешивает prev/next, точки-пагинатор и автопрокрутку раз в 6 сек.
 * ============================================================ */

.afisha-hero {
	position: relative;
	margin-bottom: 1.5rem;
}

.afisha-hero__viewport {
	overflow: hidden;
	border-radius: var(--afisha-card-radius);
}

.afisha-hero__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0.25rem;
	cursor: grab;
	touch-action: pan-y;
}

.afisha-hero__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.afisha-hero__track.is-dragging .afisha-hero__card {
	pointer-events: none;
}

.afisha-hero__track::-webkit-scrollbar {
	display: none;
}

.afisha-hero__card {
	flex: 0 0 calc((100% - 2rem) / 3);
	scroll-snap-align: start;
	display: flex;
	align-items: stretch;
	aspect-ratio: 16 / 9;
	padding: 1.25rem;
	border-radius: var(--afisha-card-radius);
	overflow: hidden;
	background-color: var(--color-muted);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none;
	transition: filter 0.25s, transform 0.25s;
}

@media (max-width: 1023px) {
	.afisha-hero__card {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 639px) {
	.afisha-hero__card {
		flex-basis: 100%;
	}
}

.afisha-hero__card:hover {
	filter: brightness(120%);
	color: #fff;
}

/* ---- Prev/next arrows ---- */

.afisha-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-dark, #111);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s, opacity 0.15s, transform 0.15s;
	z-index: 2;
}

.afisha-hero__nav:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.05);
}

.afisha-hero__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.afisha-hero__nav--prev {
	left: 0.5rem;
}

.afisha-hero__nav--next {
	right: 0.5rem;
}

/* ---- Dots ---- */

.afisha-hero__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.afisha-hero__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 17, 40, 0.2);
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}

.afisha-hero__dot:hover {
	background: rgba(10, 17, 40, 0.4);
}

.afisha-hero__dot.is-active {
	background: var(--color-primary, var(--afisha-accent, #4173ff));
	transform: scale(1.3);
}

.afisha-hero__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.25rem;
	width: 100%;
	max-width: 100%;
}


.afisha-hero__date {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.85;
}

.afisha-hero__title {
	/* `margin-top: auto` pushes the title to the bottom of the flex body
	   while the date chip stays pinned to the top. Darkening at both ends
	   of the gradient (see render_hero_card) keeps both readable. */
	margin: auto 0 0;
	font-size: 1.375rem;
	line-height: 1.15;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
	.afisha-hero__title {
		font-size: 1.125rem;
	}
}

/* Home-page "Афиша" frame — mirrors the theme's `.frame-news` grid so the
   block fits between frame-news / frame-double / frame-triple without
   looking foreign. Container width matches theme's @include container. */
.frame-afisha {
	width: calc(100% - var(--space-outer, 1.25rem) * 2);
	max-width: var(--width-site, 80rem);
	margin: var(--space-outer, 1.25rem) auto 0;
	padding: var(--space-outer, 1.25rem) 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: calc(var(--space-outer, 1.25rem) / 1.5);
	border-top: solid 1px var(--color-primary);
	border-bottom: solid 1px var(--color-primary);
}

@media (max-width: 1023px) {
	.frame-afisha {
		grid-template-columns: repeat(2, 1fr);
		max-width: var(--width-content, 46rem);
	}
}

@media (max-width: 479px) {
	.frame-afisha {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
}

/* Heading row spans the whole grid width */
.frame-afisha__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.25rem;
}

.frame-afisha__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: var(--font-regular);
	color: var(--color-dark);
}

.frame-afisha__more {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--afisha-accent);
	text-decoration: none;
}

.frame-afisha__more:hover {
	color: var(--afisha-accent-hover);
}

/* Cards inside the frame-afisha grid — use the theme's flat card treatment
   instead of the plugin's default .afisha-grid styles (which would try to
   own the grid layout too). */
.frame-afisha > .afisha-card {
	background: var(--afisha-card-bg);
	border: var(--afisha-card-border);
	border-radius: var(--afisha-card-radius);
	overflow: hidden;
}

/* ============================================================
 * Row section (category rows on the home archive)
 * ============================================================ */

.afisha-section {
	margin-bottom: 2rem;
}

.afisha-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.afisha-section__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.afisha-section__more {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--afisha-accent);
	text-decoration: none;
}

.afisha-section__more:hover {
	color: var(--afisha-accent-hover);
}

.afisha-section__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1199px) { .afisha-section__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .afisha-section__row { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }
@media (max-width: 479px)  { .afisha-section__row { grid-template-columns: 1fr; } }

/* ============================================================
 * Selections grid (2x2 large covers)
 * ============================================================ */

.afisha-selections__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (max-width: 767px) {
	.afisha-selections__grid { grid-template-columns: 1fr; }
}

.afisha-selection-card {
	display: flex;
	align-items: flex-end;
	min-height: 200px;
	padding: 1.5rem;
	background-color: var(--color-muted);
	background-size: cover;
	background-position: center;
	border-radius: var(--afisha-card-radius);
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	transition: filter 0.25s;
}

.afisha-selection-card:hover {
	filter: brightness(120%);
	color: #fff;
}

.afisha-selection-card__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ============================================================
 * Grid of event cards
 * ============================================================ */

.afisha-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin-bottom: 2rem;
}

@media (max-width: 1199px) { .afisha-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .afisha-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }
@media (max-width: 479px)  { .afisha-grid { grid-template-columns: 1fr; } }

.afisha-card {
	display: flex;
	flex-direction: column;
	background: var(--afisha-card-bg);
	border: var(--afisha-card-border);
	border-radius: var(--afisha-card-radius);
	overflow: hidden;
	box-shadow: var(--afisha-card-shadow);
	color: var(--text);
}

/* Match the theme's news-card behaviour: card body stays still, only the
   thumbnail brightens on hover. See themes/irkutsk _news.scss / _double.scss. */
.afisha-card__media {
	transition: filter 0.25s;
}

.afisha-card:hover .afisha-card__media {
	filter: brightness(120%);
}

.afisha-card__title a:hover {
	color: var(--afisha-accent);
}

.afisha-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--color-muted);
	overflow: hidden;
}

.afisha-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.afisha-card__body {
	padding: 0.75rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1;
}

.afisha-card__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--afisha-accent);
	text-decoration: none;
}

.afisha-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 700;
}

.afisha-card__title a {
	color: inherit;
	text-decoration: none;
}

.afisha-card__title a:hover { color: var(--afisha-accent); }

.afisha-card__short {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-dim, #555);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.afisha-card__meta {
	margin: auto 0 0;
	font-size: 0.8125rem;
	color: var(--color-dim, #666);
}

/* ============================================================
 * Badges
 * ============================================================ */

.afisha-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	font-family: var(--font-regular, "Raleway", sans-serif);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--color-muted);
	color: var(--color-dark);
	border-radius: 0.2rem;
}

.afisha-badge--pushkin {
	background: var(--afisha-pushkin);
	color: #fff;
}

.afisha-badge--pushkin[title]::before { content: ""; }

.afisha-badge--free { background: #d4edda; color: #0f5132; }

/* Stack of status badges overlaid on the card poster — shown at the
   top-left so the title still reads cleanly on the right. */
.afisha-card__badges {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	max-width: calc(100% - 1rem);
	z-index: 1;
}

.afisha-card__badges .afisha-badge {
	font-size: 0.6875rem;
	padding: 0.2rem 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.afisha-badge--kids {
	background: #d4edda;
	color: #0f5132;
}

.afisha-badge--pushkin {
	background: var(--afisha-pushkin);
	color: #fff;
}

.afisha-badge--free {
	background: #cfe2ff;
	color: #084298;
}

/* ============================================================
 * Single event
 * ============================================================ */

/* Outer article card — mirrors `.post` in the theme: white background across
   the full container width, small corner radius, comfortable padding so the
   contents (hero, text, schedule) can be centred inside at --width-content. */
.afisha-event,
.afisha-venue,
.afisha-selection {
	background-color: var(--color-light, #fff);
	border-radius: var(--afisha-card-radius);
	margin: var(--space-outer, 1.25rem) 0;
	padding: var(--space-outer, 1.25rem);
}

/* Everything inside the event card is constrained to the theme's post-body
   width (46rem) and centred — same pattern as `.entry-content > *` in
   `themes/irkutsk/src/styles/entry/_content.scss`. */
.afisha-event > * {
	width: 100%;
	max-width: var(--width-content, 46rem);
	margin: 0 auto;
}

.afisha-event__content,
.afisha-event__specs,
.afisha-event__schedule,
.afisha-event__actions,
.afisha-event__comments {
	margin-top: var(--space-content, 1.5rem);
}

/* Soft divider above the comments so the section break is visible inside
   the single white card. */
.afisha-event__comments {
	padding-top: var(--space-content, 1.5rem);
	border-top: 1px solid var(--color-muted, #e0e0e0);
}

/* ============================================================
 * Event hero banner — image as background, text overlaid on a
 * dark gradient. Matches the single-event reference layout.
 * ============================================================ */

.afisha-event__hero {
	position: relative;
	/* flex column so overlay can `flex: 1` and genuinely fill the hero's
	   min-height — `height: 100%` against a min-height parent is unreliable
	   and was leaving the chips glued to the top on mobile. */
	display: flex;
	flex-direction: column;
	aspect-ratio: 16 / 9;
	padding: 1.5rem;
	overflow: hidden;
	border-radius: var(--afisha-card-radius);
	background-color: var(--color-dark, #212529);
	background-size: cover;
	background-position: center 25%;
	color: #fff;
	isolation: isolate;
}

@media (max-width: 767px) {
	.afisha-event__hero {
		/* 16:9 at 360px wide is only ~200px tall — too short for the title +
		   subtitle + chips. On mobile let the hero grow with content, keeping
		   a comfortable minimum so the background image is still visible. */
		aspect-ratio: auto;
		min-height: 26rem;
		padding: 1.25rem;
	}

	.afisha-event__hero-title { font-size: 1.5rem; }

	.afisha-event__hero-body {
		gap: 0.5rem;
	}
}

/* Gradient overlay for text legibility — darker at the left/bottom where
   the title lives, lighter towards the top-right. */
.afisha-event__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, 0.70) 0%,
		rgba(0, 0, 0, 0.45) 55%,
		rgba(0, 0, 0, 0.20) 100%
	);
	z-index: 1;
}

.afisha-event__hero-overlay {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	/* flex:1 inside the hero flex column — reliably fills hero's min-height
	   regardless of whether the height resolved to aspect-ratio or to the
	   mobile min-height. space-between splits children across top + bottom. */
	flex: 1 1 auto;
	justify-content: space-between;
	gap: 1rem;
}

/* Transparent absolutely-positioned <a> covering the whole hero so a click
   opens the poster in GLightbox. Lets us keep the other links inside
   clickable by layering. */
.afisha-event__hero-zoom {
	position: absolute;
	inset: 0;
	z-index: 1; /* below overlay content, above the gradient */
	text-indent: -9999px;
}

.afisha-event__hero-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	position: relative;
	z-index: 3;
	flex: 0 0 auto;   /* stays at natural height; overlay's space-between sticks it to top */
}

.afisha-event__hero-cat {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}

.afisha-event__hero-cat:hover { opacity: 1; color: #fff; }

.afisha-event__hero-age {
	padding: 0.25rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: transparent;
}

.afisha-event__hero-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 42rem;
	position: relative;
	z-index: 3;
	flex: 0 0 auto;   /* natural height, pinned to bottom by overlay's space-between */
}

.afisha-event__hero-title {
	margin: 0;
	font-size: 2.5rem;
	line-height: 1.05;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
	.afisha-event__hero-title { font-size: 1.75rem; }
}

.afisha-event__hero-venue {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.88);
}

.afisha-event__hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.afisha-chip-inline {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	background: #fff;
	color: var(--color-dark, #212529);
	border-radius: 0.375rem;
	/* Match the hero title's sans-serif so the chips don't break the font
	   rhythm with the surrounding headings. */
	font-family: var(--font-regular, "Raleway", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.afisha-event__hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

/* Inside the hero the badges should match the chip-inline style (same font
   size, same weight, same letter-spacing) so the trio reads as one row of
   pills instead of chip/chip/smaller-SHOUTY-badge. */
.afisha-event__hero-badges .afisha-badge {
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	border-radius: 0.375rem;
}

.afisha-event__content {
	font-family: var(--font-content, "Lora", serif);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.afisha-event__schedule {
	margin-top: 1.5rem;
}

.afisha-event__schedule h2 {
	margin: 0 0 1rem;
	font-size: 1.5rem;
}

.afisha-venue-block {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-muted);
}

.afisha-venue-block:last-child {
	border-bottom: none;
}

.afisha-venue-block__head h3 {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
}

.afisha-venue-block__head h3 a {
	color: inherit;
	text-decoration: none;
}

.afisha-venue-block__addr {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--color-dim, #666);
}

/* ----------------------------------------------------------------
 * Session boxes — one soft-blue pill per showtime, date on the left
 * and price on the right. Clickable when the session has a ticket URL.
 * ---------------------------------------------------------------- */

.afisha-sessions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.afisha-session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.25rem;
	background: rgba(65, 115, 255, 0.08);   /* soft tint of --afisha-accent */
	border-radius: 0.5rem;
	color: var(--color-dark);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: background-color 0.15s;
}

.afisha-session.is-clickable {
	cursor: pointer;
}

.afisha-session.is-clickable:hover {
	background: rgba(65, 115, 255, 0.15);
}

.afisha-session__when {
	font-weight: 700;
}

.afisha-session__price {
	flex: 0 0 auto;
	padding: 0.3rem 0.75rem;
	background: #fff;
	border-radius: 0.375rem;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Cinema session synced from Afisha.ru: tracked «Купить» call-to-action. */
.afisha-session.is-afisha-cinema {
	background: var(--color-primary, #4173ff);
	color: #fff;
	border-color: var(--color-primary, #4173ff);
}
.afisha-session.is-afisha-cinema:hover {
	filter: brightness(1.08);
	color: #fff;
}
.afisha-session.is-afisha-cinema .afisha-session__price {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}
.afisha-session__cta {
	flex: 0 0 auto;
	padding: 0.3rem 0.65rem;
	background: #fff;
	color: var(--color-primary, #4173ff);
	border-radius: 0.375rem;
	font-weight: 700;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.afisha-empty {
	/* Empty-state paragraph sits inside the 4-col `.afisha-grid` — without
	   `grid-column: 1 / -1` it's squeezed into the first column and reads
	   as a narrow left-of-page text. Span the full grid so it truly centres
	   on the page. `display: flex` + center alignment also gives it
	   vertical height, so the layout doesn't collapse when there are no
	   cards to push it down. */
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
	padding: 2rem;
	background: var(--color-background, #fafafa);
	border-radius: var(--afisha-card-radius);
	text-align: center;
	color: var(--color-dim);
}

.afisha-event__official {
	margin: 2rem 0 0;
}

.afisha-event__official a {
	color: var(--afisha-accent);
	font-weight: 600;
}

/* ============================================================
 * Create-event form
 * ============================================================ */

/* Outer white card — mirrors `.afisha-event` on single-event pages so both
   screens share the same "full-bleed card + narrow content" rhythm. */
.afisha-create__wrap {
	background-color: var(--color-light, #fff);
	border-radius: var(--afisha-card-radius);
	margin: var(--space-outer, 1.25rem) 0;
	padding: var(--space-outer, 1.25rem);
}

/* Content inside the card is constrained to a form-friendly width. Wider
   than `--width-content` (46rem, which is for reading text) because the
   form has a 20rem pricing/channels sidebar that must fit alongside the
   main fields. 64rem leaves ~42rem for the main column on desktop. */
.afisha-create__wrap > * {
	width: 100%;
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
}

.afisha-create__header {
	margin-bottom: 1.5rem;
}

.afisha-create__header h1 {
	margin: 0 0 0.5rem;
	font-size: 1.875rem;
	font-weight: 700;
}

.afisha-create__lead {
	margin: 0;
	color: var(--color-dim, #555);
	font-size: 0.9375rem;
}

/* The create page now wraps the form in `.afisha-create__wrap` which
   provides the white card. Keep the bare form transparent — adding
   another bg/padding would double the inset. */
.afisha-form {
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.afisha-form__trap {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Tabs — стилизованы под pill-табы поиска (.finder-tabs): полностью
   скруглённые пилюли внутри тонального контейнера. */
.afisha-form__tabs {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 0.45rem;
	margin-bottom: 1rem;
	background: var(--bg-card-2, var(--color-background, #f3f5f8));
	border-radius: 999px;
	gap: 0.5rem;
}

.afisha-form__tab {
	padding: 0.55rem 1.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-dim, var(--color-dim, #6b7280));
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: background-color 0.15s, color 0.15s;
}

.afisha-form__tab:hover {
	color: var(--text, var(--color-dark));
	background: rgba(10, 17, 40, 0.04);
}

.afisha-form__tab.is-active,
.afisha-form__tab.is-active:hover {
	background: var(--color-primary, var(--afisha-accent));
	color: #fff;
}

.afisha-form__tab-price {
	font-weight: 700;
	font-size: 0.8125rem;
	opacity: 0.9;
}

.afisha-form__tab-note {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	color: var(--color-dim);
}

/* Grid — main fields take the remaining space, pricing sidebar pinned to
   20rem on the right. Stacks to single column below 1024px. */
.afisha-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: 1.5rem;
}

@media (max-width: 1023px) {
	.afisha-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Rows */
.afisha-form__row {
	margin-bottom: 1rem;
}

.afisha-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.afisha-form__row--3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

@media (max-width: 479px) {
	.afisha-form__row--2col,
	.afisha-form__row--3col { grid-template-columns: 1fr; }
}

.afisha-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-dim);
}

.afisha-form input[type="text"],
.afisha-form input[type="url"],
.afisha-form input[type="email"],
.afisha-form input[type="number"],
.afisha-form input[type="datetime-local"],
.afisha-form select,
.afisha-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-dark);
	background: #fff;
	border: 1px solid var(--color-muted, #e0e0e0);
	border-radius: 0.3125rem;
	transition: border-color 0.15s;
}

.afisha-form textarea {
	resize: vertical;
	min-height: 7rem;
}

.afisha-form input:focus,
.afisha-form select:focus,
.afisha-form textarea:focus {
	outline: none;
	border-color: var(--afisha-accent);
	box-shadow: 0 0 0 3px rgba(65, 115, 255, 0.15);
}

/* File upload dropzone — dashed border, accent-coloured picker button. */
.afisha-form input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1.5rem 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-dim, #555);
	background: rgba(65, 115, 255, 0.03);
	border: 2px dashed rgba(65, 115, 255, 0.35);
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.afisha-form input[type="file"]:hover {
	background: rgba(65, 115, 255, 0.07);
	border-color: var(--afisha-accent);
}

.afisha-form input[type="file"]:focus-visible {
	outline: none;
	border-color: var(--afisha-accent);
	box-shadow: 0 0 0 3px rgba(65, 115, 255, 0.15);
}

.afisha-form input[type="file"]::file-selector-button {
	margin-right: 0.875rem;
	padding: 0.5rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: var(--afisha-accent);
	border: 0;
	border-radius: 0.3125rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.afisha-form input[type="file"]::file-selector-button:hover {
	background: var(--afisha-accent-hover, var(--afisha-accent));
}

.afisha-form input[type="file"]::file-selector-button:active {
	transform: scale(0.98);
}

.afisha-form__check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-dark);
	cursor: pointer;
}

.afisha-form__check input {
	width: auto;
	margin: 0;
}

.afisha-form__section {
	margin: 2rem 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	border-top: 1px solid var(--color-muted);
	padding-top: 1.25rem;
}

.afisha-form__hint {
	font-size: 0.8125rem;
	color: var(--color-dim);
	margin: 0.5rem 0 0;
}

.afisha-req {
	color: var(--afisha-accent);
}

.afisha-form__error {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-warning, #d32f2f);
}

/* Schedule rows */
.afisha-form__schedule {
	border: 1px solid var(--color-muted);
	border-radius: var(--afisha-card-radius);
	padding: 1rem;
	margin: 1.5rem 0;
}

.afisha-form__schedule legend {
	padding: 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-dark);
}

.afisha-schedule-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 0.75rem 0.75rem;
	align-items: end;
	margin-bottom: 0.75rem;
}

.afisha-schedule-row__hall,
.afisha-schedule-row__ticket {
	grid-column: 1 / -1;
}

.afisha-schedule-row label {
	margin-bottom: 0.2rem;
}

.afisha-schedule-row__remove {
	background: none;
	border: 0;
	color: var(--color-dim);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0 0.5rem;
	line-height: 1;
	align-self: center;
}

.afisha-schedule-row__remove:hover {
	color: var(--color-warning, #d32f2f);
}

.afisha-button--outline {
	background: transparent;
	color: var(--afisha-accent);
	border: 1px solid var(--afisha-accent);
}

.afisha-button--outline:hover {
	background: var(--afisha-accent);
	color: #fff;
}

/* Sidebar */
.afisha-form__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.afisha-form__box {
	background: var(--color-background, #fafafa);
	border-radius: var(--afisha-card-radius);
	padding: 1rem;
}

.afisha-form__box h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
}

.afisha-form__box.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.afisha-form__check--channel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	margin: 0.4rem 0 0;
	background: #fff;
	border-radius: 0.3rem;
}

.afisha-form__check--channel.is-locked {
	color: var(--color-dim);
}

/* Channels that aren't wired up yet — shown greyed out with a "скоро"
   badge so organizers see the full roadmap of cross-post targets. */
.afisha-form__check--channel.is-disabled {
	opacity: 0.55;
	background: var(--color-background, #fafafa);
}

.afisha-form__check--channel.is-disabled input {
	cursor: not-allowed;
}

/* Паблики Афиши: Telegram-строка залочена до выбора «ВК без ссылок». */
.afisha-form__check--channel.is-bundle-locked {
	opacity: 0.55;
}

.afisha-form__check--channel.is-bundle-locked,
.afisha-form__check--channel.is-bundle-locked input {
	cursor: not-allowed;
}

.afisha-form__check-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.afisha-form__check-label {
	font-weight: 600;
}

/* Preserve the legacy single-line row ("Сайт IRK.Today включено") — when
   the label is a direct child of `.afisha-form__check--channel` it needs
   `flex: 1` to push the price to the right. Not needed when nested in
   `__check-body` (the body already flexes for us). */
.afisha-form__check--channel > .afisha-form__check-label {
	flex: 1;
}

.afisha-form__check-handle {
	display: inline-block;
	max-width: 100%;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-dim);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s ease;
}

a.afisha-form__check-handle:hover {
	color: var(--afisha-accent);
	text-decoration: underline;
}

.afisha-form__check-subs {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--color-dim);
	opacity: 0.85;
}

.afisha-form__check-price {
	font-size: 0.8125rem;
	color: var(--color-dim);
	font-weight: 600;
}

/* Группы ВК/TG/OK под каждым чекбоксом — сюда прилетит конкретный
   охват + стоимость пост из Irk_Ads_Pricelist. Клик на чекбоксе
   выбирает сразу всю платформу (серверный контракт работает со
   slug-ами 'vk' | 'telegram' | 'max'). Карточка целиком подсвечивается
   при выборе: `:has(input:checked)` даёт обводку accent-цветом. */
.afisha-form__channel {
	margin: 0.5rem 0 0;
	background: #fff;
	border: 1px solid var(--color-background, #eee);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.afisha-form__channel:has(input:checked) {
	border-color: var(--afisha-accent, #4173ff);
	box-shadow: 0 0 0 2px rgba(65, 115, 255, 0.15);
}

.afisha-form__channel .afisha-form__check--channel {
	margin: 0;
	padding: 0.75rem 0.85rem;
	background: transparent;
	border-radius: 0;
	align-items: flex-start;
	gap: 0.65rem;
}

.afisha-form__channel .afisha-form__check--channel input[type="checkbox"] {
	margin-top: 0.2rem;
}

.afisha-form__channel .afisha-form__check-body {
	gap: 0.1rem;
}

.afisha-form__channel .afisha-form__check-label {
	font-size: 0.9375rem;
}

.afisha-form__channel .afisha-form__check-price {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-dark);
	align-self: flex-start;
	padding-top: 0.05rem;
}

.afisha-form__channel-groups {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	background: var(--color-inputs, #fafafa);
	border-radius: 12px;
	display: grid;
	gap: 0.4rem;
}

.afisha-form__channel-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 0.75rem;
	row-gap: 0.1rem;
	padding: 0.65rem 0.9rem;
	align-items: baseline;
	background: var(--bg-card, #fff);
	border-radius: 10px;
	border: 1px solid var(--border, rgba(10, 17, 40, 0.06));
	font-size: 0.8125rem;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.afisha-form__channel-group:hover {
	border-color: rgba(65, 115, 255, 0.3);
	box-shadow: 0 2px 6px rgba(10, 17, 40, 0.06);
}

.afisha-form__channel-group-name {
	grid-column: 1;
	grid-row: 1;
	font-weight: 500;
	color: var(--color-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.afisha-form__channel-group-handle {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--color-dim);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.afisha-form__channel-group-handle:hover {
	color: var(--afisha-accent);
	text-decoration: underline;
}

.afisha-form__channel-group-subs {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.6875rem;
	color: var(--color-dim);
	text-align: right;
	white-space: nowrap;
}

.afisha-form__channel-group-price {
	grid-column: 2;
	grid-row: 1;
	font-weight: 600;
	color: var(--color-dark);
	text-align: right;
	white-space: nowrap;
}

.afisha-form__channel-group.is-free .afisha-form__channel-group-price {
	color: var(--afisha-accent, #4173ff);
}

/* Заметка («Бесплатно при размещении в ВК») идёт отдельной строкой
   в полную ширину — так она не укорачивает имя сообщества. */
.afisha-form__channel-group-note {
	grid-column: 1 / -1;
	grid-row: 3;
	font-size: 0.6875rem;
	font-style: italic;
	color: var(--color-dim);
	margin-top: 0.1rem;
}

/* Summary */
.afisha-form__summary {
	background: var(--color-promo, #f0f4ff);
	border-radius: var(--afisha-card-radius);
	padding: 1rem;
}

.afisha-form__summary h3 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
}

.afisha-form__breakdown {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.875rem;
	color: var(--color-dark);
}

.afisha-form__breakdown li {
	display: flex;
	justify-content: space-between;
	padding: 0.25rem 0;
	gap: 0.5rem;
}

.afisha-form__breakdown li.is-muted {
	color: var(--color-dim);
	font-style: italic;
	justify-content: center;
}

.afisha-form__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-muted);
	font-size: 0.9375rem;
}

.afisha-form__total strong {
	font-size: 1.25rem;
	color: var(--afisha-accent);
	font-weight: 700;
}

.afisha-form__terms {
	font-size: 0.8125rem;
	color: var(--color-dim);
	line-height: 1.4;
}

.afisha-form__submit {
	width: 100%;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	justify-content: center;
}

.afisha-form__status {
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
	margin-top: 0.25rem;
}

.afisha-form__status:empty { display: none; }

.afisha-card--preview {
	max-width: 18rem;
	margin: 0.75rem 0;
	box-shadow: none;
	border: 1px dashed var(--color-muted);
}

.afisha-card--preview .afisha-card__media {
	background: var(--color-promo, #f0f4ff);
}

.afisha-card--preview .afisha-card__media img[hidden] { display: none; }

.afisha-form__status.is-pending { background: #fff3cd; color: #8a6d00; }
.afisha-form__status.is-success { background: #d4edda; color: #0f5132; }
.afisha-form__status.is-error   { background: #f8d7da; color: #842029; }

/* ============================================================
 * Payment return page
 * ============================================================ */

.afisha-payment-return {
	padding: 3rem 0;
}

.afisha-payment-card {
	max-width: 30rem;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
	background: var(--afisha-card-bg);
	border-radius: var(--afisha-card-radius);
	box-shadow: var(--afisha-card-shadow);
	border-top: 4px solid var(--color-muted);
}

.afisha-payment-card--success  { border-top-color: #2d8a4a; }
.afisha-payment-card--pending  { border-top-color: #d4a40a; }
.afisha-payment-card--canceled { border-top-color: #8a3535; }
.afisha-payment-card--error    { border-top-color: var(--color-warning, #d32f2f); }

.afisha-payment-card h1 {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	font-weight: 700;
}

.afisha-payment-card__amount {
	margin: 0 0 1rem;
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-dark);
}

.afisha-payment-card__lead {
	margin: 0 0 1.5rem;
	color: var(--color-dim);
}

.afisha-payment-card__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
 * Dark theme.
 *
 * The plugin historically uses the theme's legacy tokens (--color-dark,
 * --color-light, --color-background, --color-dim, --color-muted) which by
 * design do NOT flip in dark mode — the theme keeps them stable for
 * backwards-compat. Instead of rewriting every rule, we redefine those
 * tokens with dark-aware values scoped to afisha surfaces only. Custom
 * properties inherit through the DOM, so every descendant resolves to the
 * dark palette automatically.
 * ========================================================================== */

html.dark .afisha-page,
html.dark [class^="afisha-"],
html.dark .frame-afisha,
html.dark .frame-afisha [class^="afisha-"] {
	--color-light:      var(--bg-card);
	--color-dark:       var(--text);
	--color-background: var(--bg-card-2);
	--color-summary:    var(--bg-card-2);
	--color-muted:      var(--border-2);
	--color-promo:      var(--bg-card-2);
	--color-reference:  var(--bg-card-2);
	--color-dim:        var(--text-dim);

	--afisha-card-bg:   var(--bg-card);
	--afisha-chip-bg:   var(--bg-card-2);
}

/* Hardcoded #fff surfaces → bg-card in dark. */
html.dark .afisha-form-input,
html.dark .afisha-form-textarea,
html.dark .afisha-form-select,
html.dark .afisha-session-price,
html.dark .afisha-channel-row {
	background: var(--bg-card);
	color: var(--text);
	border-color: var(--border-2);
}

/* Status badges — soft-tinted palette on dark surface. */
html.dark .is-pending  { background: rgba(255, 194, 71, 0.15); color: #FFC857; }
html.dark .is-success  { background: rgba(39, 208, 133, 0.15); color: #27D085; }
html.dark .is-error    { background: rgba(255, 90, 110, 0.15); color: #FF5A6E; }
html.dark .is-canceled { background: rgba(158, 158, 171, 0.15); color: var(--text-dim); }

/* Payment card status borders — brighter on dark. */
html.dark .afisha-payment-card.is-success  { border-color: rgba(39, 208, 133, 0.4); }
html.dark .afisha-payment-card.is-pending  { border-color: rgba(255, 194, 71, 0.4); }
html.dark .afisha-payment-card.is-error    { border-color: rgba(255, 90, 110, 0.4); }
html.dark .afisha-payment-card.is-canceled { border-color: var(--border-2); }

/* Event hero fallback — avoid pitch-black tile without a cover image. */
html.dark .afisha-event__hero:not([style*="background-image"]) {
	background-color: var(--bg-card-3);
}

/* Ensure card borders use the dark-aware token. */
html.dark .afisha-card,
html.dark .frame-afisha > .afisha-card {
	border-color: var(--border);
	background: var(--bg-card);
}

/* Hero chips (date / time) sit on a dark image overlay — keep the pill
   white with dark ink regardless of theme for maximum legibility. The
   scoped --color-dark redefine above would have flipped the ink to light. */
html.dark .afisha-chip-inline {
	background: rgba(255, 255, 255, 0.95);
	color: #212529;
}

/* "Бесплатно" / "Детям" / similar status badges — pastel light-mode tints
   become illegible on dark surfaces. Re-tone to soft semi-transparent fills
   that work on both dark posters and dark card surfaces. */
html.dark .afisha-badge--free,
html.dark .afisha-badge--kids {
	background: rgba(39, 208, 133, 0.20);
	color: #4ADFA4;
}

html.dark .afisha-card__badges .afisha-badge--free,
html.dark .afisha-event__hero-badges .afisha-badge--free {
	background: rgba(39, 208, 133, 0.85);
	color: #07281A;
}

html.dark .afisha-card__badges .afisha-badge--kids,
html.dark .afisha-event__hero-badges .afisha-badge--kids {
	background: rgba(77, 153, 255, 0.85);
	color: #0B1F38;
}

/* Session rows — softly tinted inside dark theme. */
html.dark .afisha-session {
	background: rgba(77, 123, 255, 0.12);
	color: var(--text);
}

html.dark .afisha-session.is-clickable:hover {
	background: rgba(77, 123, 255, 0.22);
}

html.dark .afisha-session__price {
	background: var(--bg-card);
	color: var(--text);
}

/* Hero-slider — стрелки на тёмной теме тонут в белом фоне с белой же
   иконкой; dots в полупрозрачном чёрном почти не видны. Инвертируем. */
html.dark .afisha-hero__nav {
	background: rgba(20, 24, 34, 0.75);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html.dark .afisha-hero__nav:hover {
	background: rgba(30, 36, 48, 0.95);
}

html.dark .afisha-hero__dot {
	background: rgba(255, 255, 255, 0.25);
}

html.dark .afisha-hero__dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

html.dark .afisha-hero__dot.is-active,
html.dark .afisha-hero__dot.is-active:hover {
	background: var(--color-primary, #4173ff);
}

/* ============================================================
 * Добавить событие / форма — остаточные hardcoded #fff.
 * На светлой теме они работают; на тёмной — сливаются или бьют в глаза.
 * Переводим их на токены темы (--bg-card / --bg-card-2 / --border).
 * ============================================================ */
html.dark .afisha-form input[type="text"],
html.dark .afisha-form input[type="email"],
html.dark .afisha-form input[type="tel"],
html.dark .afisha-form input[type="url"],
html.dark .afisha-form input[type="number"],
html.dark .afisha-form input[type="date"],
html.dark .afisha-form input[type="time"],
html.dark .afisha-form input[type="datetime-local"],
html.dark .afisha-form select,
html.dark .afisha-form textarea {
	background: var(--bg-card);
	color: var(--text);
	border-color: var(--border-2);
	/* color-scheme перекрашивает нативные контролы (иконку календаря,
	   стрелку селекта, dropdown-пикер) под тёмную палитру браузера. */
	color-scheme: dark;
}

/* Явный инверс для Chromium-иконки календаря — на некоторых темах
   браузер игнорирует color-scheme на input, если на html он не задан. */
html.dark .afisha-form input[type="date"]::-webkit-calendar-picker-indicator,
html.dark .afisha-form input[type="time"]::-webkit-calendar-picker-indicator,
html.dark .afisha-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6);
	cursor: pointer;
}

html.dark .afisha-form__channel {
	background: var(--bg-card);
	border-color: var(--border);
}

html.dark .afisha-form__check--channel {
	background: var(--bg-card-2);
	color: var(--text);
}

html.dark .afisha-form__check--channel.is-locked {
	color: var(--text-dim);
}

/* Контейнер групп (внутренняя tonal-плашка) + сами карточки-группы.
   Светлая тема — белые на серо-голубой; тёмная — тёмные на черно-серый. */
html.dark .afisha-form__channel-groups {
	background: var(--bg-card-2);
}

html.dark .afisha-form__channel-group {
	background: var(--bg-card);
	border-color: var(--border);
}

html.dark .afisha-form__channel-group:hover {
	border-color: rgba(100, 140, 255, 0.35);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Preview-карточка «Так выглядит карточка». */
html.dark .afisha-card--preview {
	background: var(--bg-card);
	border-color: var(--border);
}

html.dark .afisha-card--preview .afisha-card__media:not([style*="background-image"]) {
	background: var(--bg-card-3);
}

/* Summary-плашка справа («К оплате», «Где опубликовать») уже тонированная,
   но для dark она берёт --color-promo → наш override в главном dark-блоке
   уже корректно подменяет на --bg-card-2. Подстраховываемся явно. */
html.dark .afisha-form__summary {
	background: var(--bg-card-2);
}

/* Status-plate под формой (success / error) — на dark нечитабельно. */
html.dark .afisha-form__status.is-pending {
	background: rgba(255, 194, 71, 0.15);
	color: #FFC857;
}

html.dark .afisha-form__status.is-success {
	background: rgba(39, 208, 133, 0.15);
	color: #27D085;
}

html.dark .afisha-form__status.is-error {
	background: rgba(255, 90, 110, 0.15);
	color: #FF5A6E;
}

/* ============================================================
 * Single venue page (afisha-venue-page) — расширенная шапка с
 * location-pin иконкой, контактной мета-строкой, грид ближайших событий.
 * ============================================================ */

.afisha-venue-page .afisha-venue__head {
	margin-bottom: 1.5rem;
}

.afisha-venue__title {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--text, #0a1128);
}

.afisha-venue__icon {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.15em;
	color: var(--color-primary, #4173ff);
}

.afisha-venue__addr {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--text-dim, #5a6480);
	padding-left: calc(1.6rem + 0.75rem);
}

.afisha-venue__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding-left: calc(1.6rem + 0.75rem);
	font-size: 0.875rem;
}

.afisha-venue__meta a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--text-dim, #5a6480);
	text-decoration: none;
	transition: color 0.15s;
}

.afisha-venue__meta a:hover {
	color: var(--color-primary, #4173ff);
}

.afisha-venue__content {
	margin: 1.5rem 0 2rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
}

.afisha-venue__events {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border, rgba(10, 17, 40, 0.08));
}

.afisha-venue__events-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.afisha-venue__events-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.45rem;
	background: var(--color-primary, #4173ff);
	color: #fff;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
}

.afisha-venue__events--empty {
	color: var(--text-dim, #5a6480);
	text-align: center;
	padding: 2rem 1rem;
}

@media (max-width: 767px) {
	.afisha-venue__addr,
	.afisha-venue__meta {
		padding-left: 0;
	}
	.afisha-venue__title { font-size: 1.5rem; }
}

/* ============================================================
 * Юридическая маркировка (рекомендации юриста, AFISHA.md):
 * возраст / реклама / источник / атрибуция фото / дисклеймер.
 * Рендер — class-templates.php + single-event.php.
 * ============================================================ */

/* Возрастной бейдж на карточке (16+/18+/…) — обязателен (Роскомнадзор). */
.afisha-badge--age {
	background: rgba(10, 17, 40, 0.72);
	color: #fff;
}

/* «Реклама» — бейдж на карточке. */
.afisha-badge--ad {
	background: #8a6d1a;
	color: #fff;
}

/* Полное раскрытие рекламы над контентом события (ФАС). */
.afisha-event__admark {
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--border, rgba(10, 17, 40, 0.08));
	border-left: 3px solid #8a6d1a;
	border-radius: var(--radius-frame, 0.75rem);
	background: var(--bg-card-2, rgba(10, 17, 40, 0.03));
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--text-dim, #5a6480);
}

/* «Не является рекламой» / источник / подпись фото — мелкий приглушённый текст. */
.afisha-event__not-ad,
.afisha-event__source,
.afisha-event__photo-credit {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--text-dim, #5a6480);
}

.afisha-event__photo-credit {
	margin-top: -0.25rem;
	margin-bottom: 1rem;
}

.afisha-event__source a {
	color: var(--color-primary, #4173ff);
	text-decoration: underline;
}

/* Подвальный юр-дисклеймер (не оферта / не для коммерческого распространения). */
.afisha-disclaimer {
	margin-top: 2rem;
	padding: 1.25rem 0 2rem;
	border-top: 1px solid var(--border, rgba(10, 17, 40, 0.08));
}

.afisha-disclaimer p {
	margin: 0.25rem 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--text-dim, #5a6480);
}