/****************** GENERAL.CSS - PROJECT BASE *******************/
/****************** VAR *******************/
:root {
	--body_bg                    :   #ffffff;
	--body_bg_2                  :   #f2f7fc;
	--body_bg_3                  :   #f5f6f8;
	--header_bg                  :   #ffffff;
	--footer_bg                  :   #0f2b45;
	--copyright_bg               :   #0a1f33;
	--dark                       :   #16202a;
	--text                       :   #16202a;
	--text_2                     :   #46525f;
	--text_3                     :   #66707c;
	--text_light                 :   #ffffff;
	--text_light_2               :   #e6edf4;
	--text_light_3               :   #b9c7d6;
	--text_link                  :   #186fb5;
	--text_link_hover            :   #145c95;
	--text_link_active           :   #104b7a;
	--main                       :   #186fb5;
	--main_num                   :   24, 111, 181;
	--main_2                     :   #145c95;
	--main_2_num                 :   20, 92, 149;
	--main_3                     :   #edf6fd;
	--main_4                     :   #dbecfa;
	--main_5                     :   #bbdcf6;
	--btn_primary                :   #186fb5;
	--btn_primary_hover          :   #145c95;
	--btn_primary_active         :   #104b7a;
	--btn_primary_text           :   #ffffff;
	--btn_primary_text_hover     :   #ffffff;
	--btn_primary_text_active    :   #ffffff;
	--btn_primary_disabled       :   #b8cfe4;
	--btn_secondary              :   #dbecfa;
	--btn_secondary_hover        :   #bbdcf6;
	--btn_secondary_active       :   #a3cef2;
	--btn_secondary_text         :   #104b7a;
	--btn_secondary_text_hover   :   #0d3d63;
	--btn_secondary_text_active  :   #0d3d63;
	--btn_secondary_disabled     :   #eef0f3;
	--btn_ghost                  :   #186fb5;
	--btn_ghost_hover            :   #145c95;
	--btn_ghost_active           :   #104b7a;
	--btn_ghost_text             :   #186fb5;
	--btn_ghost_text_hover       :   #ffffff;
	--btn_ghost_text_active      :   #ffffff;
	--btn_outlined               :   transparent;
	--btn_outlined_hover         :   #edf6fd;
	--btn_outlined_active        :   #dbecfa;
	--btn_outlined_text          :   #186fb5;
	--btn_outlined_text_hover    :   #145c95;
	--btn_outlined_text_active   :   #104b7a;
	--btn_danger                 :   #c62828;
	--btn_danger_hover           :   #a32020;
	--btn_danger_active          :   #8a1b1b;
	--btn_danger_text            :   #ffffff;
	--color_error                :   #c62828;
	--color_error_bg             :   #fdecec;
	--color_success              :   #067a4b;
	--color_success_bg           :   #e6f5ee;
	--color_attention            :   #edc534;
	--color_attention_bg         :   #fdf4d8;
	--color_attention_text       :   #7a6100;
	--color_black                :   #000000;
	--color_white                :   #ffffff;
	--grey_1                     :   #f5f6f8;
	--grey_3                     :   #e4e7ec;
	--grey_5                     :   #c3c8d0;
	--grey_6                     :   #8b939e;
	--grey_7                     :   #66707c;
	--shadow_1                   :   0 4px 16px 0 rgba(22, 32, 42, 0.06);
	--shadow_2                   :   0 3px 5px 0 rgba(22, 32, 42, 0.10);
	--shadow_3                   :   0 8px 24px 0 rgba(22, 32, 42, 0.16);
	--radius_sm                  :   8px;
	--radius                     :   14px;
	--radius_lg                  :   24px;
	--transition                 :   0.25s ease;
	--overlay                    :   rgba(15, 43, 69, 0.6);
	--font_main                  :   'e-Ukraine', 'e-Ukraine Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--accent_youth               :   #f74469;
	--accent_youth_text          :   #ea0a38;
	--accent_youth_bg            :   #feebef;
	--accent_sport               :   #1cbaad;
	--accent_sport_num           :   28, 186, 173;
	--accent_sport_text          :   #138077;
	--accent_sport_bg            :   #edfcfb;
	--accent_event               :   #edc534;
	--accent_event_text          :   #90730d;
	--accent_event_bg            :   #fdfaec;
	--font_display               :   'e-UkraineHead', 'e-UkraineHead Fallback', var(--font_main);
	--radius_pill                :   999px;
	--measure                    :   68ch;
	--container_pad              :   15px;
	--header_h                   :   80px;
	--focus_ring                 :   0 0 0 3px rgba(24, 111, 181, 0.45);
	--surface_glass              :   rgba(255, 255, 255, 0.72);
	--surface_glass_solid        :   #ffffff;
	--transition_slow            :   0.4s cubic-bezier(0.22, 1, 0.36, 1);
	--block_step                 :   clamp(40px, 4vw, 56px);
	--veil_text                  :   var(--text);
	--veil_text_2                :   var(--text_2);
	--veil_text_3                :   var(--text_3);
	--veil_link                  :   var(--text_link);
	--veil_link_hover            :   var(--text_link_hover);
	--veil_link_active           :   var(--text_link_active);
}
/****************** VAR - END *******************/

/****************** FONTS *******************/

@font-face {
	font-family: 'e-Ukraine';
	src: url('/assets/site/fonts/e-Ukraine-Light.woff2') format('woff2');
	font-weight: 300 400; font-style: normal; font-display: optional;
}
@font-face {
	font-family: 'e-Ukraine';
	src: url('/assets/site/fonts/e-Ukraine-Medium.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
	font-family: 'e-Ukraine';
	src: url('/assets/site/fonts/e-Ukraine-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: optional;
}
@font-face {
	font-family: 'e-UkraineHead';
	src: url('/assets/site/fonts/e-UkraineHead-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: optional;
}
/****************** FONTS - END *******************/

/****************** METRIC-MATCHED FALLBACKS *******************/

@font-face {
	font-family: 'e-Ukraine Fallback';
	src: local('Arial'), local('Helvetica'), local('Roboto');
	font-weight: 300 400; font-style: normal;
	size-adjust: 121.39%; ascent-override: 82.38%; descent-override: 16.48%; line-gap-override: 0%;
}
@font-face {
	font-family: 'e-Ukraine Fallback';
	src: local('Arial'), local('Helvetica'), local('Roboto');
	font-weight: 500; font-style: normal;
	size-adjust: 123.39%; ascent-override: 81.04%; descent-override: 16.21%; line-gap-override: 0%;
}
@font-face {
	font-family: 'e-Ukraine Fallback';
	src: local('Arial Bold'), local('Helvetica Bold'), local('Roboto Bold'), local('Arial');
	font-weight: 700; font-style: normal;
	size-adjust: 115.55%; ascent-override: 86.55%; descent-override: 17.31%; line-gap-override: 0%;
}
@font-face {
	font-family: 'e-UkraineHead Fallback';
	src: local('Arial Bold'), local('Helvetica Bold'), local('Roboto Bold'), local('Arial');
	font-weight: 700; font-style: normal;
	size-adjust: 115.37%; ascent-override: 86.68%; descent-override: 17.34%; line-gap-override: 0%;
}
/****************** METRIC-MATCHED FALLBACKS - END *******************/

/****************** RESET *******************/
* {margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}
input, select, textarea, button {font-family: inherit; font-weight: inherit; box-sizing: border-box;}
textarea {max-width: 100%; min-width: 100%;}
ul, ol {list-style: none;}
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), button:focus:not(:focus-visible) {outline: none;}
:focus-visible {outline: 2px solid var(--main); outline-offset: 2px;}
button, label, summary, [role="button"], .btn {-webkit-user-select: none; user-select: none;}
a {text-decoration: none; color: inherit;}
img {max-width: 100%;}
::-webkit-scrollbar {width: 6px; height: 6px;}
::-webkit-scrollbar-thumb {background: var(--grey_5); border-radius: 6px;}
::-webkit-scrollbar-thumb:hover {cursor: pointer; background: var(--main);}
/****************** RESET - END *******************/

/****************** BASE *******************/
html {font-size: 16px;}
body {
	color: var(--text);
	font-family: var(--font_main);
	font-weight: 300;
	background-color: var(--body_bg);
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
/****************** BASE - END *******************/

/****************** LAYOUT *******************/
.container,
.container__wide,
.container__narrow {
	margin: 0 auto;
	padding-left: var(--container_pad);
	padding-right: var(--container_pad);
	width: auto;
}
.container {max-width: 1280px;}
.container__wide {max-width: 1920px;}
.container__narrow {max-width: 830px;}
.container__fullscreen {width: auto; max-width: none; padding-left: 0; padding-right: 0;}
[class^="container"] .container,
[class*=" container"] .container {
	padding-left: 0;
	padding-right: 0;
	width: auto;
	max-width: none;
}
/****************** LAYOUT - END *******************/

/****************** UTILITIES *******************/
.flex__block {display: flex; justify-content: space-between; align-items: center;}
.inputs__items {justify-content: flex-start; flex-wrap: wrap; margin: 0 -8px -16px;}
.inputs__items .inputs__item {flex-grow: 1; box-sizing: border-box;}
.inputs__items-2 .inputs__item {width: 50%;}
.inputs__items-3 .inputs__item {width: 33.3333%;}
.inputs__items-4 .inputs__item {width: 25%;}
.inputs__item-inner {margin: 0 8px 16px;}
.easy__hover {transition: all 0.2s ease-in-out;}
.overflow__hidden {overflow: hidden; padding-right: var(--scrollbar-width, 0px);}
.display__none {display: none;}
.required {color: var(--color_error);}
.clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lines, 2);
	overflow: hidden;
}
.img__cover {width: 100%; height: 100%; object-fit: cover;}
.img__contain {width: 100%; height: 100%; object-fit: contain;}
/****************** UTILITIES - END *******************/

/****************** TITLES *******************/
.title {font-weight: 700; line-height: 120%; font-size: inherit;}
.title__regular {font-weight: normal;}
.h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 20px;}
.title__page {margin-top: 32px; margin-bottom: 32px;}
/****************** TITLES - END *******************/

/****************** BUTTONS *******************/
.btn__clear,
.btn__clear_2 {
	cursor: pointer;
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	vertical-align: baseline;
	line-height: inherit;
}
.btn__clear {display: inline-block;}
.btn__clear > svg:only-child {display: block;}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	text-align: center;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1.5rem;
	box-sizing: border-box;
	transition: all 0.15s ease-in-out;
}
.btn__block {display: flex; width: 100%;}
.btn:disabled,
a.btn.disabled {cursor: default; opacity: 0.5;}
.btn__clear:disabled,
.btn__clear_2:disabled {cursor: default; opacity: 0.5;}
.btn__primary {color: var(--btn_primary_text); background-color: var(--btn_primary); border-color: var(--btn_primary);}
@media (hover: hover) and (pointer: fine) {
	.btn__primary:hover {color: var(--btn_primary_text_hover); background-color: var(--btn_primary_hover); border-color: var(--btn_primary_hover);}
}
.btn__primary:active {color: var(--btn_primary_text_active); background-color: var(--btn_primary_active); border-color: var(--btn_primary_active);}
.btn__primary:disabled {background-color: var(--btn_primary_disabled) !important; border-color: var(--btn_primary_disabled) !important;}
.btn__outlined {color: var(--btn_outlined_text); background-color: var(--btn_outlined); border-color: currentColor;}
@media (hover: hover) and (pointer: fine) {
	.btn__outlined:hover {color: var(--btn_outlined_text_hover); background-color: var(--btn_outlined_hover);}
}
.btn__outlined:active {color: var(--btn_outlined_text_active); background-color: var(--btn_outlined_active);}
/****************** BUTTONS - END *******************/

/****************** FORM *******************/
.input__wrapper {margin-bottom: 16px;}
.input__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	color: var(--text_3);
}
.input__text {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--grey_5);
	border-radius: 8px;
	font-size: 1rem;
	box-sizing: border-box;
}
.input__text:focus {border-color: var(--main);}
input[type="search"]::-webkit-search-cancel-button {cursor: pointer;}
.input__error {border-color: var(--color_error);}
/****************** FORM - END *******************/

/****************** PRIMITIVES *******************/
.alert,
.toast,
.dropdown__menu,
.dropdown__item,
.quantity,
.quantity__input,
.progress,
.chip,
.badge,
.tabs__button,
.accordion__button {box-sizing: border-box;}
/****************** PRIMITIVES - END *******************/

/****************** BUTTONS - VARIANTS *******************/
.btn__secondary {color: var(--btn_secondary_text); background-color: var(--btn_secondary); border-color: var(--btn_secondary);}
@media (hover: hover) and (pointer: fine) {
	.btn__secondary:hover {color: var(--btn_secondary_text_hover); background-color: var(--btn_secondary_hover); border-color: var(--btn_secondary_hover);}
}
.btn__secondary:active {color: var(--btn_secondary_text_active); background-color: var(--btn_secondary_active); border-color: var(--btn_secondary_active);}
.btn__secondary:disabled {background-color: var(--btn_secondary_disabled) !important; border-color: var(--btn_secondary_disabled) !important;}
.btn__ghost {color: var(--btn_ghost_text); background-color: transparent; border-color: transparent;}
@media (hover: hover) and (pointer: fine) {
	.btn__ghost:hover {color: var(--btn_ghost_text_hover); background-color: var(--btn_ghost_hover);}
}
.btn__ghost:active {color: var(--btn_ghost_text_active); background-color: var(--btn_ghost_active);}
.btn__danger {color: var(--btn_danger_text); background-color: var(--btn_danger); border-color: var(--btn_danger);}
@media (hover: hover) and (pointer: fine) {
	.btn__danger:hover {background-color: var(--btn_danger_hover); border-color: var(--btn_danger_hover);}
}
.btn__danger:active {background-color: var(--btn_danger_active); border-color: var(--btn_danger_active);}
.btn__sm {
	padding: 5px 12px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	border-radius: var(--radius_sm);
}
.btn__lg {padding: 14px 28px; font-size: 1.125rem; line-height: 1.625rem;}
.btn__icon {
	padding: 0;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}
.btn__icon.btn__sm {width: 32px; height: 32px;}
.btn.loading {position: relative; color: transparent; pointer-events: none;}
.btn.loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--btn_primary_text);
	animation: spin .7s linear infinite;
}
.btn__outlined.loading::after,
.btn__ghost.loading::after {color: var(--main);}
@keyframes spin {
	to {transform: rotate(360deg);}
}
/****************** BUTTONS - VARIANTS - END *******************/

/****************** FORM - CONTROLS *******************/
.input__text:disabled,
.input__text[readonly] {background-color: var(--grey_1); color: var(--text_3); cursor: not-allowed;}
textarea.input__text {min-height: 120px; resize: vertical; line-height: 1.5;}
.input__hint {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--text_3);
}
.input__error-text {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--color_error);
}
/****************** FORM - CONTROLS - END *******************/

/****************** PHONE FIELD *******************/
.input__wrapper .iti {display: block;}
.input__wrapper .iti__selected-flag:focus-visible {outline: 2px solid var(--main); outline-offset: -2px; border-radius: var(--radius_sm) 0 0 var(--radius_sm);}
.iti--container .iti__country-list {box-sizing: border-box; max-height: 240px; background: var(--body_bg); border: 1px solid var(--grey_5); border-radius: var(--radius_sm); box-shadow: var(--shadow_3); color: var(--text); font-size: 0.875rem;}
.iti--container .iti__dial-code {color: var(--text_3);}
.iti--container .iti__country.iti__highlight {background: var(--main); color: var(--text_light);}
.iti--container .iti__country.iti__highlight .iti__dial-code {color: inherit;}
.iti--container .iti__divider {border-bottom-color: var(--grey_5);}
.input__group {position: relative; display: flex; align-items: center;}
.input__group .input__text {padding-right: 44px;}
.input__group-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text_3);
	display: flex;
	pointer-events: none;
}
.input__group-btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text_3);
	padding: 8px;
	display: flex;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.input__group-btn:hover {color: var(--main);}
}
.input__group-btn:active {color: var(--main_2);}
.input__group_left .input__text {padding-right: 14px; padding-left: 44px;}
.input__group_left .input__group-icon {right: auto; left: 12px;}
.input__checkbox,
.input__radio {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--main);
	cursor: pointer;
	margin: 0;
}
.input__checkbox:disabled,
.input__radio:disabled {cursor: not-allowed; opacity: .5;}
.checkbox,
.radio {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	padding: 4px 0;
}
.checkbox__text,
.radio__text {line-height: 1.125rem;}
.switch {
	position: relative;
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	cursor: pointer;
}
.switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.switch__track {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: var(--grey_5);
	transition: background var(--transition);
	flex-shrink: 0;
}
.switch__track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color_white);
	transition: transform var(--transition);
}
.switch__input:checked + .switch__track {background: var(--main);}
.switch__input:checked + .switch__track::after {transform: translateX(20px);}
.switch__input:focus-visible + .switch__track {outline: 2px solid var(--main); outline-offset: 2px;}
.switch__input:disabled + .switch__track {opacity: .5;}
.input__select {
	width: 100%;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--grey_5);
	border-radius: var(--radius);
	font-size: 1rem;
	background-color: var(--color_white);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text_3) 50%),
		linear-gradient(135deg, var(--text_3) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	appearance: none;
	cursor: pointer;
	box-sizing: border-box;
}
.input__select:focus {border-color: var(--main);}
.input__select:disabled {background-color: var(--grey_1); color: var(--text_3); cursor: not-allowed;}
/****************** PHONE FIELD - END *******************/

/****************** FORM - NATIVE SELECT LIST *******************/
@supports (appearance: base-select) and selector(::picker(select)) {
	.input__select,
	.input__select::picker(select) {appearance: base-select;}
	.input__select::picker-icon {display: none;}
	.input__select::picker(select) {
		box-sizing: border-box;
		margin-top: 6px;
		padding: 6px;
		background-color: var(--color_white);
		border: 1px solid var(--grey_3);
		border-radius: var(--radius_sm);
		box-shadow: var(--shadow_3);
	}
	.input__select option {
		padding: 10px 14px;
		border-radius: var(--radius_sm);
		font-size: 0.9375rem;
		color: var(--text);
	}
	.input__select option::checkmark {display: none;}
	.input__select option:checked {background-color: var(--main_3);}
	.input__select option:hover,
	.input__select option:focus {background-color: var(--main); color: var(--text_light);}
}
/****************** FORM - NATIVE SELECT LIST - END *******************/

/****************** FORM - SELECT2 *******************/
body .select2-container--default .select2-selection--single {
	height: auto;
	padding: 10px 40px 10px 14px;
	background-color: var(--color_white);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text_3) 50%),
		linear-gradient(135deg, var(--text_3) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	border: 1px solid var(--grey_5);
	border-radius: var(--radius);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5rem;
}
body .select2-container--default .select2-selection--single .select2-selection__placeholder {color: var(--text_3);}
body .select2-container--default .select2-selection--single .select2-selection__arrow b {display: none;}
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--single {border-color: var(--main);}
body .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
body .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {border-radius: var(--radius);}
body .select2-container--default.select2-container--disabled .select2-selection--single {background-color: var(--grey_1); cursor: not-allowed;}
body .select2-dropdown {
	background-color: var(--color_white);
	border: 1px solid var(--grey_3);
	border-radius: var(--radius_sm);
	box-shadow: var(--shadow_3);
	overflow: hidden;
}
body .select2-container--open .select2-dropdown--below {margin-top: 6px; border-top: 1px solid var(--grey_3); border-top-left-radius: var(--radius_sm); border-top-right-radius: var(--radius_sm);}
body .select2-container--open .select2-dropdown--above {margin-top: -6px; border-bottom: 1px solid var(--grey_3); border-bottom-left-radius: var(--radius_sm); border-bottom-right-radius: var(--radius_sm);}
body .select2-container--default .select2-results > .select2-results__options {max-height: 260px;}
body .select2-container--default .select2-results__option {padding: 10px 14px; font-size: 0.9375rem;}
body .select2-container--default .select2-results__option--selected {background-color: var(--main_3); color: var(--text);}
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: var(--main); color: var(--text_light);}
body .select2-container--default .select2-results__option--disabled {color: var(--text_3);}
body .select2-search--dropdown {padding: 8px;}
body .select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 8px 12px;
	border: 1px solid var(--grey_5);
	border-radius: var(--radius_sm);
	font-size: 0.9375rem;
}
body .select2-container--default .select2-search--dropdown .select2-search__field:focus {border-color: var(--main);}
.input__file {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.input__file-control {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.input__file-name {font-size: 0.875rem; color: var(--text_3);}
.input__file-control:focus-visible + .input__file-button {outline: 2px solid var(--main); outline-offset: 2px;}
.form__cols {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;}
/****************** FORM - SELECT2 - END *******************/

/****************** BADGES / CHIPS *******************/
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--radius_sm);
	font-size: 0.75rem;
	line-height: 1.125rem;
	font-weight: 500;
	white-space: nowrap;
}
.badge__main {background: var(--main); color: var(--text_light);}
.badge__red {background: var(--color_error); color: var(--text_light);}
.badge__green {background: var(--color_success); color: var(--text_light);}
.badge__yellow {background: var(--color_attention); color: var(--color_black);}
.badge__grey {background: var(--grey_3); color: var(--text);}
.badge__outlined {background: transparent; border: 1px solid var(--grey_5); color: var(--text_3);}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--radius_sm);
	background: var(--grey_1);
	font-size: 0.875rem;
}
.chip__remove {display: flex; color: var(--text_3);}
@media (hover: hover) and (pointer: fine) {
	.chip__remove:hover {color: var(--color_error);}
}
.chip__remove:active {color: var(--color_error); transform: scale(0.88);}
/****************** BADGES / CHIPS - END *******************/

/****************** ALERTS *******************/
.alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius);
	border-left: 3px solid transparent;
	background: var(--grey_1);
}
.alert__icon {flex-shrink: 0; display: flex; margin-top: 2px;}
.alert__body {flex: 1; min-width: 0;}
.alert__title {font-weight: 500; margin-bottom: 2px;}
.alert__text {font-size: 0.875rem; color: var(--text_2);}
.alert__close {flex-shrink: 0; color: var(--text_2); display: flex;}
@media (hover: hover) and (pointer: fine) {
	.alert__close:hover {color: var(--text);}
}
.alert__close:active {color: var(--text); transform: scale(0.88);}
.alert__info {background: var(--main_3); border-left-color: var(--main);}
.alert__info .alert__icon {color: var(--main);}
.alert__success {background: var(--color_success_bg); border-left-color: var(--color_success);}
.alert__success .alert__icon {color: var(--color_success);}
.alert__warning {background: var(--color_attention_bg); border-left-color: var(--color_attention);}
.alert__warning .alert__icon {color: var(--color_attention_text);}
.alert__error {background: var(--color_error_bg); border-left-color: var(--color_error);}
.alert__error .alert__icon {color: var(--color_error);}
/****************** ALERTS - END *******************/

/****************** TOAST *******************/
.toast__wrapper {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
}
.toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius);
	background: var(--color_white);
	box-shadow: var(--shadow_2);
	font-size: 0.875rem;
	animation: toast__in .25s ease-out;
}
.toast__icon {flex-shrink: 0; display: flex;}
.toast__body {flex: 1; min-width: 0;}
.toast__close {
	flex-shrink: 0;
	color: var(--text_3);
	display: flex;
	margin-top: 1px;
}
@media (hover: hover) and (pointer: fine) {
	.toast__close:hover {color: var(--text);}
}
.toast__close:active {color: var(--text); transform: scale(0.88);}
.toast__success .toast__icon {color: var(--color_success);}
.toast__error .toast__icon {color: var(--color_error);}
.toast__info .toast__icon {color: var(--main);}
.toast.hiding {opacity: 0; transform: translateX(20px); transition: all .25s ease-in;}
@keyframes toast__in {
	from {opacity: 0; transform: translateX(20px);}
	to {opacity: 1; transform: none;}
}
/****************** TOAST - END *******************/

/****************** TOOLTIP *******************/
.tooltip {position: relative; display: inline-flex;}
.tooltip__text {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(calc(-50% + var(--tooltip_shift, 0px)));
	z-index: 30;
	box-sizing: border-box;
	width: max-content;
	max-width: min(220px, calc(100vw - 24px));
	padding: 6px 10px;
	border-radius: var(--radius_sm);
	background: var(--text);
	color: var(--text_light);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition);
}
.tooltip__text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: calc(50% - var(--tooltip_shift, 0px));
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--text);
}
.tooltip:focus-within .tooltip__text {opacity: 1; visibility: visible;}
@media (hover: hover) and (pointer: fine) {
	.tooltip:hover .tooltip__text {opacity: 1; visibility: visible;}
}
/****************** TOOLTIP - END *******************/

/****************** LOADER / SKELETON / PROGRESS *******************/
.loader {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid var(--grey_5);
	border-top-color: var(--main);
	border-radius: 50%;
	animation: spin .7s linear infinite;
}
.loader__lg {width: 40px; height: 40px; border-width: 3px;}
.loader__block {display: flex; justify-content: center; padding: 32px 0;}
.skeleton {
	background: linear-gradient(90deg, var(--grey_3) 25%, var(--grey_1) 37%, var(--grey_3) 63%);
	background-size: 400% 100%;
	border-radius: var(--radius_sm);
	animation: skeleton 1.4s ease infinite;
}
.skeleton__text {height: 14px; margin-bottom: 8px;}
.skeleton__title {height: 22px; width: 60%; margin-bottom: 12px;}
.skeleton__image {aspect-ratio: 1 / 1; border-radius: var(--radius);}
@keyframes skeleton {
	0% {background-position: 100% 50%;}
	100% {background-position: 0 50%;}
}
.progress {
	height: 8px;
	border-radius: 4px;
	background: var(--grey_1);
	overflow: hidden;
}
.progress__bar {
	height: 100%;
	background: var(--main);
	border-radius: 4px;
	transition: width .3s ease;
}
/****************** LOADER / SKELETON / PROGRESS - END *******************/

/****************** TABS *******************/
.tabs__nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--grey_1);
	overflow-x: auto;
	margin-bottom: 20px;
}
.tabs__button {
	padding: 10px 16px;
	border-bottom: 2px solid transparent;
	color: var(--text_3);
	white-space: nowrap;
	cursor: pointer;
	transition: all var(--transition);
}
@media (hover: hover) and (pointer: fine) {
	.tabs__button:hover {color: var(--text);}
}
.tabs__button:active {color: var(--main_2);}
.tabs__button.active {color: var(--main); border-bottom-color: var(--main); font-weight: 500;}
.tabs__item {display: none;}
.tabs__item.active {display: block;}
/****************** TABS - END *******************/

/****************** ACCORDION *******************/
.accordion__row {border-bottom: 1px solid var(--grey_1);}
.accordion__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 0;
	text-align: left;
	font-weight: 500;
	cursor: pointer;
}
.accordion__button svg {flex-shrink: 0; color: var(--text_3);}
.accordion__button > svg:last-child {transform: rotate(90deg); transition: transform var(--transition);}
.accordion__row.active .accordion__button > svg:last-child {transform: rotate(-90deg);}
.accordion__content {display: none; padding-bottom: 16px; color: var(--text_3);}
.item__link-trigger {cursor: pointer;}
/****************** ACCORDION - END *******************/

/****************** DROPDOWN *******************/
.dropdown {position: relative; display: inline-block;}
.dropdown__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.dropdown__button svg {flex-shrink: 0;}
.dropdown__button > svg:last-child {transform: rotate(90deg); transition: transform var(--transition);}
.dropdown.active .dropdown__button > svg:last-child {transform: rotate(-90deg);}
.dropdown__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	display: none;
	min-width: 180px;
	padding: 6px;
	border-radius: var(--radius);
	background: var(--color_white);
	box-shadow: var(--shadow_2);
}
.dropdown.active .dropdown__menu {display: block;}
.dropdown__menu-right {left: auto; right: 0;}
.dropdown__item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--radius_sm);
	text-align: left;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.dropdown__item:hover {background: var(--grey_1);}
}
.dropdown__item:active {background: var(--grey_3);}
/****************** DROPDOWN - END *******************/

/****************** TABLE *******************/
.table__wrapper {overflow-x: auto;}
.table {width: 100%; border-collapse: collapse; text-align: left;}
.table th,
.table td {padding: 12px 14px; border-bottom: 1px solid var(--grey_1); vertical-align: middle;}
.table th {
	font-weight: 500;
	color: var(--text_3);
	font-size: 0.875rem;
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
	.table tbody tr:hover {background: var(--grey_1);}
}
.table__striped tbody tr:nth-child(even) {background: var(--grey_1);}
/****************** TABLE - END *******************/

/****************** RATING *******************/
.rating {display: inline-flex; align-items: center; gap: 6px;}
.rating__stars {position: relative; display: inline-flex; color: var(--grey_5);}
.rating__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	overflow: hidden;
	color: var(--color_attention);
	white-space: nowrap;
}
.rating__stars-fill svg {flex-shrink: 0;}
.rating__value {font-size: 0.875rem; color: var(--text_3);}
/****************** RATING - END *******************/

/****************** QUANTITY *******************/
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--grey_5);
	border-radius: var(--radius);
	overflow: hidden;
}
.quantity__btn {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text_3);
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.quantity__btn:not(:disabled):hover {color: var(--main); background: var(--grey_1);}
}
.quantity__input {
	width: 44px;
	height: 38px;
	border: none;
	border-left: 1px solid var(--grey_5);
	border-right: 1px solid var(--grey_5);
	text-align: center;
	font-size: 1rem;
	appearance: textfield;
}
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {appearance: none; margin: 0;}
/****************** QUANTITY - END *******************/

/****************** UTILITIES - EXTRA *******************/
.sr__only,
.wcag__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.text__left {text-align: left;}
.text__center {text-align: center;}
.text__right {text-align: right;}
.text__muted {color: var(--text_3);}
.divider {height: 1px; background: var(--grey_1); border: 0;}
.no__wrap {white-space: nowrap;}
@media (prefers-reduced-motion: reduce) {
	.skeleton,
	.loader,
	.btn.loading::after,
	.toast {animation: none;}
	.easy__hover,
	.switch__track,
	.switch__track::after,
	.progress__bar {transition: none;}
}
/****************** UTILITIES - EXTRA - END *******************/

/****************** POPUP *******************/
.popup__window-wrapper {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	justify-content: center;
	align-items: center;
}
.popup__window-wrapper.active {display: flex;}
.popup__window-shadow {
	position: absolute;
	inset: 0;
	background: var(--overlay);
	z-index: -1;
}
.popup__window {
	position: relative;
	width: 420px;
	max-width: calc(100% - 32px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--color_white);
	border-radius: var(--radius);
	box-shadow: var(--shadow_3);
	padding: 24px;
}
.popup__window-head {display: flex; justify-content: flex-end; margin: -12px -12px 0 0;}
.popup__window-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius_sm);
	color: var(--text_3);
	transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
	.popup__window-close:hover {background: var(--grey_1); color: var(--text);}
}
.popup__window-close:active {background: var(--grey_3); color: var(--text);}
.popup__window-title {
	margin-bottom: 20px;
	font-family: var(--font_display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}
/****************** POPUP - END *******************/