:root {
	--ro-button-primary-bg: #8a3d22;
	--ro-button-primary-bg-hover: #6d2f18;
	--ro-button-primary-text: #fff;
	--ro-button-secondary-bg: rgba(255, 255, 255, 0.94);
	--ro-button-secondary-bg-hover: #fff;
	--ro-button-secondary-text: #18212b;
	--ro-button-border: #d4dde2;
	--ro-button-border-hover: #b8c5cc;
	--ro-button-shadow: 0 10px 24px rgba(24, 33, 43, 0.1);
	--ro-button-shadow-hover: 0 16px 34px rgba(24, 33, 43, 0.16);
	--ro-button-focus: 0 0 0 4px rgba(138, 61, 34, 0.2);
}

:is(
	.ro-home-button,
	.ro-home-cta-button,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-donations-secondary,
	.ro-join-button,
	.ro-join-text-link,
	.ro-join-card-link,
	.ro-app-button,
	.ro-druzhina-button,
	.ro-kubok-button,
	.ro-repatriation-button,
	.ro-volunteers-button,
	.ro-appeal-button,
	.ro-appeal-form-card input[type="submit"]
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid var(--ro-button-border);
	border-radius: 999px;
	background: var(--ro-button-secondary-bg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
	color: var(--ro-button-secondary-text);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease,
		background-color 0.18s ease,
		color 0.18s ease;
}

:is(
	.ro-home-button,
	.ro-home-cta-button,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-donations-secondary,
	.ro-join-button,
	.ro-join-text-link,
	.ro-join-card-link,
	.ro-app-button,
	.ro-druzhina-button,
	.ro-kubok-button,
	.ro-repatriation-button,
	.ro-volunteers-button,
	.ro-appeal-button,
	.ro-appeal-form-card input[type="submit"]
):hover {
	border-color: var(--ro-button-border-hover);
	background: var(--ro-button-secondary-bg-hover);
	box-shadow: var(--ro-button-shadow-hover);
	color: var(--ro-button-secondary-text);
	transform: translateY(-2px);
}

:is(
	.ro-home-button,
	.ro-home-cta-button,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-donations-secondary,
	.ro-join-button,
	.ro-join-text-link,
	.ro-join-card-link,
	.ro-app-button,
	.ro-druzhina-button,
	.ro-kubok-button,
	.ro-repatriation-button,
	.ro-volunteers-button,
	.ro-appeal-button,
	.ro-appeal-form-card input[type="submit"]
):active {
	box-shadow: var(--ro-button-shadow);
	transform: translateY(0);
}

:is(
	.ro-home-button,
	.ro-home-cta-button,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-donations-secondary,
	.ro-join-button,
	.ro-join-text-link,
	.ro-join-card-link,
	.ro-app-button,
	.ro-druzhina-button,
	.ro-kubok-button,
	.ro-repatriation-button,
	.ro-volunteers-button,
	.ro-appeal-button,
	.ro-appeal-form-card input[type="submit"]
):focus {
	outline: none;
}

:is(
	.ro-home-button,
	.ro-home-cta-button,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-donations-secondary,
	.ro-join-button,
	.ro-join-text-link,
	.ro-join-card-link,
	.ro-app-button,
	.ro-druzhina-button,
	.ro-kubok-button,
	.ro-repatriation-button,
	.ro-volunteers-button,
	.ro-appeal-button,
	.ro-appeal-form-card input[type="submit"]
):focus-visible {
	box-shadow: var(--ro-button-focus), var(--ro-button-shadow-hover);
	outline: none;
}

:is(
	.ro-home-button-primary,
	.ro-home-cta-button-primary,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-join-button-primary,
	.ro-app-button-primary,
	.ro-druzhina-button-primary,
	.ro-kubok-button-primary,
	.ro-repatriation-button-primary,
	.ro-volunteers-button-primary,
	.ro-appeal-button-primary,
	.ro-appeal-form-card input[type="submit"]
) {
	border-color: var(--ro-button-primary-bg);
	background: var(--ro-button-primary-bg);
	box-shadow: var(--ro-button-shadow);
	color: var(--ro-button-primary-text);
}

:is(
	.ro-home-button-primary,
	.ro-home-cta-button-primary,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-join-button-primary,
	.ro-app-button-primary,
	.ro-druzhina-button-primary,
	.ro-kubok-button-primary,
	.ro-repatriation-button-primary,
	.ro-volunteers-button-primary,
	.ro-appeal-button-primary,
	.ro-appeal-form-card input[type="submit"]
):hover,
:is(
	.ro-home-button-primary,
	.ro-home-cta-button-primary,
	.ro-fund-button,
	.ro-donations-primary,
	.ro-join-button-primary,
	.ro-app-button-primary,
	.ro-druzhina-button-primary,
	.ro-kubok-button-primary,
	.ro-repatriation-button-primary,
	.ro-volunteers-button-primary,
	.ro-appeal-button-primary,
	.ro-appeal-form-card input[type="submit"]
):focus-visible {
	border-color: var(--ro-button-primary-bg-hover);
	background: var(--ro-button-primary-bg-hover);
	color: var(--ro-button-primary-text);
}

:is(
	.ro-home-actions,
	.ro-home-cta-actions,
	.ro-donations-actions,
	.ro-join-actions,
	.ro-join-final-actions,
	.ro-app-actions,
	.ro-druzhina-actions,
	.ro-kubok-actions,
	.ro-repatriation-actions,
	.ro-volunteers-actions,
	.ro-volunteers-final-actions,
	.ro-appeal-actions
) {
	gap: 12px;
}

@media (max-width: 640px) {
	:is(
		.ro-home-button,
		.ro-home-cta-button,
		.ro-fund-button,
		.ro-donations-primary,
		.ro-donations-secondary,
		.ro-join-button,
		.ro-app-button,
		.ro-druzhina-button,
		.ro-kubok-button,
		.ro-repatriation-button,
		.ro-volunteers-button,
		.ro-appeal-button,
		.ro-appeal-form-card input[type="submit"]
	) {
		width: 100%;
		min-height: 44px;
		padding-right: 16px;
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(
		.ro-home-button,
		.ro-home-cta-button,
		.ro-fund-button,
		.ro-donations-primary,
		.ro-donations-secondary,
		.ro-join-button,
		.ro-join-text-link,
		.ro-join-card-link,
		.ro-app-button,
		.ro-druzhina-button,
		.ro-kubok-button,
		.ro-repatriation-button,
		.ro-volunteers-button,
		.ro-appeal-button,
		.ro-appeal-form-card input[type="submit"]
	) {
		transition: none;
	}

	:is(
		.ro-home-button,
		.ro-home-cta-button,
		.ro-fund-button,
		.ro-donations-primary,
		.ro-donations-secondary,
		.ro-join-button,
		.ro-join-text-link,
		.ro-join-card-link,
		.ro-app-button,
		.ro-druzhina-button,
		.ro-kubok-button,
		.ro-repatriation-button,
		.ro-volunteers-button,
		.ro-appeal-button,
		.ro-appeal-form-card input[type="submit"]
	):hover {
		transform: none;
	}
}