/*!
Theme Name: Tree
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tree
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Tree is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'Fixel Text';
	src: url('fonts/FixelText-Bold.woff2') format('woff2'),
		url('fonts/FixelText-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fixel Text';
	src: url('fonts/FixelText-Regular.woff2') format('woff2'),
		url('fonts/FixelText-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fixel Text';
	src: url('fonts/FixelText20240404-BlackItalic.woff2') format('woff2'),
		url('fonts/FixelText20240404-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Fixel Text - Regular';
	font-weight: 400;
}

.tree-start {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background: #E5E5E5;
}

.tree-start--inner {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	max-width: 1440px;
}

.tree-start--inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	max-width: 600px;
}

.vdiachni-start-logo {
	display: flex;
	justify-content: center;
	margin: 0 0 100px;
}

.tree-wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 55vw;
	/* margin-top: 20px; */
}

.tree-wrap svg {
	width: 100%;
	height: auto;
}

.donate-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 500px;
}

.donate-form input {
	width: 100%;
	margin: 0 0 30px;
	padding: 10px 12px;
	background: none;
	border: 0;
	border-bottom: 2px solid #222;
	border-radius: 0;
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	font-family: 'Fixel Text';
}

.donate-form button {
	width: 100%;
	max-width: 350px;
	height: 60px;
	margin: 40px auto 0;
	color: #fff;
	background: #222;
	border: 0;
	border-radius: 40px;
	font-size: 24px;
	font-weight: 700;
	cursor: pointer;
	transition: all 200ms ease-out;
}

.donate-form button:hover {
	background: #343434;
}

.tree-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tree-logo {
	position: absolute;
	top: 50px;
	left: 50px;
}

.tree-donated {
	position: absolute;
	top: 120px;
	left: 50px;
}

.tree-total-amount {
	position: absolute;
	left: 50px;
	bottom: 100px;
}

.tree-donated h3,
.tree-total-amount h3 {
	color: #222;
	font-size: 100px;
	font-weight: 900;
	font-style: italic;
	font-family: 'Fixel Text';
	line-height: 1;
}

.tree-donated .label-text,
.tree-total-amount .label-text {
	color: #222;
	font-size: 24px;
	font-weight: 400;
	font-family: 'Fixel Text';
}

.leaf {
	width: 20px;
	height: 20px;
	margin: 2px;
	text-align: center;
	font-weight: bold;
}

.toast-container {
	position: fixed;
	bottom: 50px;
	right: 50px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.toast {
	display: flex;
	flex-direction: column;
	max-width: 300px;
	gap: 4px;
	padding: 10px 16px;
	color: #222;
	pointer-events: none;
	background: #FFFFFF;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	transition: all 0.5s ease;
	z-index: 9999;
	opacity: 0;
}

.toast-title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Fixel Text';
}

.toast-msg {
	font-size: 16px;
	font-weight: 400;
	font-family: 'Fixel Text';
}

.toast.show {
	opacity: 1;
	pointer-events: auto;
}

.qr-wrap {
	width: 100%;
	max-width: 280px;
	margin-bottom: 36px;
	padding: 20px;
	background: #fff;
	border-radius: 30px;
}

.qr-wrap:last-child {
	margin-bottom: 0;
}

.qr-wrap img {
	width: 100%;
	aspect-ratio: 1/1;
}

.qr-wrap span {
	display: block;
	width: 100%;
	color: #222;
	font-size: 24px;
	font-weight: 400;
	font-family: 'Fixel Text';
	text-align: center;
}