/* === buttons.css ===
   ALL button styles: global button, Interactive List Items (nav-btn, news-card,
   news-all-btn, radio-row), horizontal nav, footer buttons, pager, icon buttons.
   This is THE source of truth for all clickable element borders. */

/* --- Base Button (Flat / List-style by default) ---
   THE SINGLE SOURCE OF TRUTH for all clickable elements.
   Default: Background from sidebar, full width, flex, border-top only. */
button,
.radio-row,
.news-card {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--button-padding-y) var(--button-padding-x);
	background: transparent;
	color: var(--text-normal);
	border: none;
	border-top: var(--divider-width) solid var(--divider-color);
	border-bottom: none;
	border-radius: var(--button-radius);
	cursor: pointer;
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-normal);
	text-align: left;
	margin: 0;
	/* Все кнопки-полоски бесшовные по умолчанию. Это УБИРАЕТ ЗАЗОРЫ в новостях. */
	transition: var(--transition-base);
	box-shadow: none;
}

/* === Base Icon Style === */
.btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
	flex-shrink: 0;
	pointer-events: none;
}


.button-grid button,
.button-grid .radio-row,
.button-grid .news-card {
	margin-top: 0;
}

/* === Grid Layouts for Interactive Elements === */
.button-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.button-grid.horizontal {
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* Центрируем группу кнопок */
	gap: 0;
	/* Убираем гэп, чтобы полоски были бесшовными */
	flex-wrap: nowrap;
	margin-top: var(--size-4-4);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
	overflow: hidden;
}


.button-grid.horizontal>button {
	margin: 0;
	flex: 1;
	/* Растягиваем поровну */
	justify-content: center;
	border-top: none;
	border-right: var(--divider-width) solid var(--divider-color);
	border-radius: 0;
	font-size: var(--font-ui-medium);
	white-space: nowrap;
}

/* --- Modal Specific Buttons (Isolated Geometry) --- */
.btn-modal {
	font-size: var(--font-size-button);
	font-weight: 600;
	height: var(--rail-item-size);
	padding: 0;
	justify-content: center;
}


.button-grid.horizontal>button:last-child {
	border-right: none;
}

/* Убираем двойную линию: если элемент первый в любом контейнере с рамкой или в сетке */
.radio-group>*:first-child,
.button-grid>*:first-child {
	border-top: none;
}

/* Закрываем список: если у контейнера нет своей рамки (как в button-grid) */
.button-grid>*:last-child {
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.radio-row.active,
.radio-row:has(input:checked) {
	background-color: var(--interactive-accent-soft);
	color: var(--text-normal);
}

button:not(.btn-subtle):not(.btn-flat):hover,
button.active,
.news-card:hover,
.news-card.active,
.radio-row:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

/* === Subtle & Flat Buttons === */
.btn-subtle,
.btn-flat {
	background: transparent;
	border: none;
	color: var(--text-muted);
	padding: var(--size-4-1);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-s);
	transition: var(--transition-base);
	cursor: pointer;
}

.btn-subtle:hover,
.btn-flat:hover {
	background-color: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.btn-subtle.active,
.btn-flat.active {
	background-color: var(--interactive-accent-soft);
	color: var(--interactive-accent);
}

button:active,
.radio-row:active,
.news-card:active {
	transform: scale(0.98);
}

/* --- Loading State --- */
button.btn-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
	color: transparent;
}

button.btn-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--icon-m);
	height: var(--icon-m);
	margin-left: calc(-1 * var(--size-4-2));
	margin-top: calc(-1 * var(--size-4-2));
	border: var(--size-2-1) solid var(--background-modifier-back-30);
	border-radius: 50%;
	border-top-color: var(--text-normal);
	animation: btn-spinner 0.6s linear infinite;
}

button.btn-primary.btn-loading::after {
	border: var(--size-2-1) solid var(--always-white-soft);
	border-top-color: var(--always-white);
}

@keyframes btn-spinner {
	to {
		transform: rotate(360deg);
	}
}

/* --- Primary Button (Green CTA) --- */
.btn-primary {
	justify-content: center;
	padding: var(--size-4-4);
	margin-top: var(--size-4-3);
	/* Акцентные кнопки действий сохраняют отступ */
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border: none;
	border-radius: var(--radius-m);
	font-weight: var(--font-weight-semibold);
	box-shadow: var(--shadow-s);
}

.btn-primary:hover {
	box-shadow: var(--shadow-m);
}

/* --- Danger Button (Red / Destructive CTA) --- */
.btn-danger {
	background-color: var(--text-error);
	color: var(--always-white);
}

.btn-danger:hover {
	filter: brightness(1.1);
}


/* --- Action Circle Button (Primary Circle CTA) --- */
.btn-action-circle {
	width: 2.571rem;
	height: 2.571rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border: none;
	cursor: pointer;
	transition: background var(--anim-fast), transform var(--anim-fast);
	box-shadow: var(--shadow-s);
}

.btn-action-circle:hover {
	background-color: var(--interactive-accent-hover, var(--interactive-accent));
	filter: brightness(1.05);
	box-shadow: var(--shadow-m);
}

.btn-action-circle:active {
	transform: scale(0.96);
}

.btn-action-circle .btn-icon {
	width: var(--icon-m);
	height: var(--icon-m);
}

/* === Interactive List Items (Delta styling) === */
.nav-btn,
.news-card,
.news-all-btn,
.radio-row {
	/* Properties inherited from base 'button' */
	gap: var(--size-4-3);
}

/* --- Delta: .nav-btn --- */
.nav-btn {
	min-height: var(--nav-item-height);
}

.nav-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
}

.nav-btn .btn-label {
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-normal);
}

/* --- Delta: .news-all-btn --- */
.news-all-btn {
	justify-content: center;
	min-height: var(--nav-item-height);
}

.news-all-btn .btn-label {
	font-size: var(--font-size-button);
}

.news-all-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
	flex-shrink: 0;
}

/* --- Delta: .radio-row --- */
.radio-row {
	padding: var(--size-4-3) var(--size-4-4);
}

/* === Horizontal Nav Stacks === */
.button-grid.horizontal-nav {
	display: flex;
	flex-direction: row;
	gap: 0;
	border-top: var(--divider-width) solid var(--divider-color);
	border-bottom: var(--divider-width) solid var(--divider-color);
}

.button-grid.horizontal-nav .nav-btn {
	flex: 1;
	width: auto;
	justify-content: center;
	border-top: none;
	border-left: var(--divider-width) solid var(--divider-color);
}

.button-grid.horizontal-nav .nav-btn:first-child {
	border-left: none;
}

.button-grid.horizontal-nav .nav-btn:hover {
	border-left-color: var(--interactive-accent);
	border-top: none;
}

.button-grid.horizontal-nav .nav-btn:hover+.nav-btn {
	border-left-color: var(--interactive-accent);
}

#mobile-nav-content .button-grid.horizontal-nav .nav-btn {
	padding-left: var(--size-4-3);
	padding-right: var(--size-4-3);
}

/* === Footer Buttons === */
.footer-btn {
	flex: 1;
	min-width: 7.143rem;
	padding: var(--size-4-3) var(--size-4-2);
	font-size: var(--font-ui-small);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--size-4-1);
	background: var(--background-secondary);
	color: var(--text-normal);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
}

.footer-btn:hover {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.footer-btn .btn-icon {
	width: var(--icon-l);
	height: var(--icon-l);
}

/* === Pager Buttons === */
.pager-wrapper {
	margin: var(--size-4-4) 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.pager-nav-grid {
	margin-top: var(--size-4-4);
	display: flex;
	gap: var(--size-4-2);
	width: 100%;
}

.pager-btn {
	flex: 1;
	justify-content: center;
	padding: var(--size-4-3) 0;
	background-color: var(--background-primary);
	border: var(--divider-width) solid var(--divider-color);
	border-radius: var(--radius-m);
	font-size: var(--font-ui-small);
	font-weight: 600;
}

.pager-btn:hover {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.pager-btn.active {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
	box-shadow: 0 0 var(--size-4-3) var(--interactive-accent-soft);
}

.pager-nav {
	margin-top: var(--size-4-3);
	text-align: center;
	font-size: var(--font-ui-medium);
	color: var(--tg-theme-hint-color, var(--text-muted));
	font-weight: 600;
}

/* === Formatting Toolbar (Global Component) === */
.formatting-toolbar {
	display: flex;
	align-items: center;
	gap: var(--size-4-1);
	padding: 0;
	width: 100%;
}

.toolbar-btn {
	flex: 1;
	min-width: 0;
	height: var(--toolbar-item-height);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	transition: background var(--anim-fast), color var(--anim-fast);
	cursor: pointer;
}

.toolbar-btn:hover {
	background: var(--background-modifier-hover);
	color: var(--interactive-accent);
}

.toolbar-btn.active {
	background: var(--interactive-accent-soft);
	color: var(--interactive-accent);
}

.toolbar-btn .btn-icon {
	width: var(--toolbar-icon-size);
	height: var(--toolbar-icon-size);
}

.toolbar-divider {
	width: var(--divider-width);
	height: var(--size-4-4);
	background-color: var(--divider-color);
	margin: 0 var(--size-4-1);
	opacity: 0.5;
}

/* === Icon Button === */
.icon-btn {
	background: transparent;
	border: none;
	color: var(--text-normal);
	cursor: pointer;
	padding: var(--size-4-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s;
}

.icon-btn:hover {
	background: var(--background-modifier-border);
}

/* === Close Drawer Button === */
.close-drawer {
	border-top: none;
	padding: 0;
	width: auto;
	height: auto;
	justify-content: center;
}

.close-drawer .btn-icon {
	width: var(--icon-s);
	height: var(--icon-s);
}

.close-drawer:hover {
	color: var(--interactive-accent);
}