* {
	box-sizing: border-box;
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
p,
h1,
h2,
h3 {
	margin: 0;
}
a {
	list-style-type: none;
	color: #fff;
	transition: transform 0.2 ease-in-out;
	text-decoration: none;
}
button {
	background-color: inherit;
	padding: 0;
	border-style: none;
	color: #fff;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

body {
	--button-box-height: 80px;
	--toast-start-position: 20px;
	--toast-end-position: 30px;

	--green: #72bf44;
	--dark-green: #1b5e20;
	--primary-green: #337b3a;
	--primary-green-soft: hsl(143, 85%, 96%);
	--black: #111111;
	--graphite: #292a2d;
	--graphite-soft: #292a2d66;
	--red: #d33838;
	--white: #fff;
	--white-soft: #ffffff66;
	--deep-black: #18191b;
	--gray: #7e7e7e;
	--yellow: #faf62d;
	--white-soft-hard: #ffffff1a;
	--white-soft-medium: #ffffff33;
	--header-bg: #111111;
	--footer-bg: inherit;
	--graphite-to-soft-ocean: #292a2d;
	--black-to-gray: #18191b;
	--main-bg: #18191b;
	--white-to-ocean: #fff;
	--green-to-orange: #337b3a;
	--deep-black-to-white: #18191b;
	&.light {
		--green: #03749c;
		--primary-green: #03749c;
		--dark-green: #1b5e20;
		--primary-green-soft: #03749c99;
		--black: #ffffff;
		--graphite-soft: #292a2d0d;
		--red: #d33838;
		--white: #292a2d;
		--white-soft: #292a2d0d;
		--gray: #7e7e7e;
		--white-soft-hard: #ffffff1a;
		--white-soft-medium: #ffffff33;
		--graphite: #292a2d0d;
		--deep-black: #03749c1a;
		--yellow: #f26901;
		--header-bg: #03749c;
		--footer-bg: #03749c;
		--main-bg: #f9faff;
		--black-to-gray: #7e7e7e0d;
		--white-to-ocean: #03749c;
		--graphite-to-soft-ocean: #03749c1a;
		--green-to-orange: #f26901;
		--deep-black-to-white: #fff;
	}
	margin: 0;
	background-color: var(--main-bg);
	position: relative;
	font-family: 'Ubuntu', sans-serif;
	transition: opacity 0.5s ease-in-out;
	color: var(--white);
}
main {
	display: grid;
	place-content: center;
	padding-block: 10px;
	&.fade-in {
		animation: fade-in 0.3s ease-in-out;
	}
	&.out {
		animation: fade-out 0.3s ease-in-out;
	}
}
#loader {
	top: 0;
	position: fixed;
	@supports (height: 100dvh) {
		height: 100dvh;
	}
	height: 100vh;
	width: 100vw;
	display: grid;
	place-content: center;
	&::after {
		content: '';
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border-right: 3px solid transparent;
		animation:
			rotation 1s linear infinite,
			fade-in 1s ease-in-out;
		border-top: 5px solid #72bf44;
	}
}
.subscribes-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 375px;
	border-radius: 8px;
	background-color: var(--black);
	padding-top: 10px;
	margin-top: -10px;
	padding-inline: 20px;
}
.trainings-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 375px;
	border-radius: 8px;
}
.header {
	font-size: 20px;
	text-align: center;
	&.subscribes {
		margin-bottom: 10px;
	}
}
.group {
	display: flex;
	flex-direction: column;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	transition: all 300ms ease-in-out;
	line-height: 1;
	white-space: nowrap;
	border-radius: 5px;
	font-weight: 500;
	font-size: 1.05em;
	position: relative;
	width: 100%;
	height: calc(var(--button-box-height) / 2);
	/* border: 1px solid var(--primary-green); */
	background-color: var(--yellow);
	color: var(--deep-black-to-white);

	&:hover {
		@media (hover: hover) {
			opacity: 0.8;
		}
	}
	&:disabled {
		pointer-events: none;
		opacity: 0.7;
	}
	&:hover {
		cursor: pointer;
	}
	&::after {
		width: 1em;
		height: 1em;
		border-radius: 50%;
		display: inline-block;
		border-right: 3px solid transparent;
		animation: rotation 1s linear infinite;
		border-top: 3px solid #fff;
	}
	&.loading {
		&::after {
			content: '';
		}
		> span {
			display: none;
		}
	}
}
.toast {
	animation: toast-in 250ms ease-in-out;
	display: grid;
	place-content: center;
	padding: 16px;
	border-radius: 8px;
	color: #000;
	background-color: #fff;
	font-size: 0.75rem;
	width: 300px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%) translateY(var(--toast-end-position));
	font-weight: 500;
	transition: opacity 250ms ease-in-out;
	z-index: 10;
	&.out {
		animation: toast-out 250ms ease-in-out;
		opacity: 0;
	}
	&.success {
		color: #fff;
		background-color: #43a047;
	}
	&.error {
		color: hsl(360, 100%, 45%);
		background-color: hsl(359, 100%, 94%);
	}
}
.sticky {
	position: sticky;
	bottom: 0;
	display: grid;
	padding-inline: 20px;
	align-items: center;
	width: calc(100% + 40px);
	margin-inline: -20px;
	height: var(--button-box-height);
	background-color: var(--black);
	margin-block: -10px;
	z-index: 10;
	&.back {
		background-color: var(--main-bg);
		width: 100%;
		margin-inline: 0;
	}
}
.toggle-accordion {
	display: flex;
	justify-content: space-between;
	position: relative;
	color: var(--white);
	&:hover {
		cursor: pointer;
	}
	&::after {
		display: block;
		position: relative;
		top: 5px;
		content: '';
		width: 8px;
		height: 8px;
		border: 2px solid var(--white);
		border-top: transparent;
		border-right: transparent;
		transform: rotate(45deg);
		transition: transform 300ms ease-in-out;
	}
	&.open::after {
		transform: rotate(-45deg);
	}
}
.accordion {
	display: grid;
	transition:
		grid-template-rows 300ms ease-in-out,
		margin 300ms ease-in-out,
		opacity 600ms ease-out;
	grid-template-rows: 0fr;
	opacity: 0.3;
	&.open {
		grid-template-rows: 1fr;
		margin-block: 16px;
		opacity: 1;
	}
}
.options {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	gap: 8px;
}
.weekdays-options {
	display: grid;
	grid-template-columns: repeat(7, auto);
	gap: 10px;
	text-align: center;
	text-transform: capitalize;
}
.checkbox {
	border-radius: 4px;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	background-color: var(--graphite);
	width: 100%;
	gap: 20px;
	min-width: 0;
	padding: 12px 16px;
	font-weight: 500;
	border: 1px solid var(--white-soft);
	transition: all 0.3s ease-in-out;
	color: var(--white-to-ocean);
	> .checkbox-icon {
		width: 1.25em;
		height: 1.25em;
		transition: opacity 0.3s ease-in-out;
		opacity: 0;
	}
	> span {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	&.weekday-short {
		background-color: var(--graphite);
	}
	&.checked {
		background-color: var(--primary-green);
		border-color: transparent;
		color: #fff;
		> .checkbox-icon {
			opacity: 1;
		}
	}

	&:hover {
		@media (hover: hover) {
			cursor: pointer;
			filter: opacity(0.9);
		}
	}
}

.workouts-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* padding-block: 24px; */
	padding-inline: 20px;
	background-color: var(--main-bg);
	color: var(--white);
}
.workout {
	background-color: var(--graphite-soft);
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--white-soft);
	border-radius: 4px;
	padding: 20px;
	width: 100%;
	gap: 14px;
	.description {
		display: flex;
		margin-bottom: 10px;
		gap: 8px;
		align-items: center;
		> img {
			width: 20px;
			height: 20px;
		}
	}
}

.team {
	position: absolute;
	background-color: var(--graphite-to-soft-ocean);
	color: var(--white-to-ocean);
	padding: 8px;
	border-radius: 4px;
	top: 16px;
	right: 16px;
}
.weekday-container {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 375px;
}
.weekdays {
	display: grid;
	grid-template-columns: repeat(7, auto);
	gap: 10px;
	text-align: center;
	text-transform: capitalize;
	padding-inline: 20px;
	padding-block: 10px;
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--main-bg);
}
.weekday-short {
	padding: 10px;
	background-color: var(--graphite-to-soft-ocean);
	color: var(--white-to-ocean);
	border-radius: 4px;
	transition:
		transform 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	text-transform: capitalize;
	&:hover {
		cursor: pointer;
		@media (hover: hover) {
			transform: scale(1.1);
		}
	}
}
.weekday {
	text-align: center;
	padding: 10px;
	background-color: var(--graphite);
	border-radius: 4px;
	margin-bottom: 10px;
	z-index: 1;
	position: relative;
	.weekday__anchor {
		position: absolute;
		top: -60px;
		left: 0;
		pointer-events: none;
		display: block;
		height: 60px;
		width: 100%;
	}
}
.day-workouts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes toast-in {
	0% {
		opacity: 0.3;
		transform: translate(-50%) translateY(var(--toast-start-position));
	}
	100% {
		opacity: 1;
		transform: translate(-50%) translateY(var(--toast-end-position));
	}
}
@keyframes toast-out {
	0% {
		opacity: 1;
		transform: translate(-50%) translateY(var(--toast-end-position));
	}
	100% {
		opacity: 0;
		transform: translate(-50%) translateY(var(--toast-start-position));
	}
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}