:root {
	--highlight-color: hsl(227deg 90% 76%);
	--select-border: #777;
	--select-focus: var(--highlight-color);
	--select-arrow: var(--select-border);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

/* inter-regular - latin */
@font-face {
	font-weight: 400;
	font-family: Inter;
	font-style: normal;
	src: url('/test-page/assets/fonts/inter-v12-latin-regular.woff2') format('woff2');
	font-display: swap;
}

/* inter-600 - latin */
@font-face {
	font-weight: 600;
	font-family: Inter;
	font-style: normal;
	src: url('/test-page/assets/fonts/inter-v18-latin-600.woff2') format('woff2');
	font-display: swap;
}

/* inter-700 - latin */
@font-face {
	font-weight: 700;
	font-family: Inter;
	font-style: normal;
	src: url('/test-page/assets/fonts/inter-v12-latin-700.woff2') format('woff2');
	font-display: swap;
}

html,
body {
	min-block-size: 100dvh;

	font-family: Inter, sans-serif;
}

body {
	padding: 1rem;

	color: #262729;
	font-weight: 700;
	font-size: 2rem;

	background-image: linear-gradient(114.02deg, #a74fec 4.94%, #5f6cfa 53.23%, #8ca4f9 93.25%);
	background-image: linear-gradient(
		114.02deg in oklch,
		oklch(61.1% 0.229 306.48deg) 4.94%,
		oklch(60.01% 0.209 274.26deg) 53.23%,
		oklch(73.51% 0.126 271.04deg) 93.25%
	);
	background-attachment: fixed;
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

button {
	font-weight: 400;
	font-size: 12px;
	font-family: inherit;

	border: none;

	background-color: transparent;

	cursor: pointer;

	transition: color 0.25ms ease;
}

.open-button {
	padding: 0.5rem 1rem;

	color: #fff;

	border: 1px solid hsl(0deg 0% 100%);
	border-radius: 4px;

	transition: border 0.25s ease;
}

.open-button:disabled {
	cursor: not-allowed;

	opacity: 0.5;
}

.open-button:hover {
	border: 1px solid hsl(0deg 0% 100% / 80%);
}

.open-button--inverted {
	margin-block-start: 1rem;

	color: #5f6cfa;

	border: 1px solid #5f6cfa;
}

.open-button--inverted:hover {
	color: #8ca4f9;

	border: 1px solid #8ca4f9;
}

.trigger-close-settings {
	align-self: end;

	color: hsl(0deg 0% 0% / 100%);
	font-size: 26px;
	line-height: 1;
}

.trigger-close-settings:hover {
	color: hsl(0deg 0% 0% / 50%);
}

.trigger-close-bonus-setting {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 1;

	color: hsl(0deg 0% 0% / 100%);
	font-size: 26px;
	line-height: 1;
}

.trigger-settings {
	position: absolute;
	inset: 16px 16px auto auto;
}

.settings {
	--shadow-color: 227deg 90% 76%;
	position: absolute;
	inset: 0 0 0 auto;
	inset-block-start: 0;
	z-index: 1;

	display: flex;
	flex-direction: column;

	inline-size: 100%;
	max-inline-size: 420px;
	padding: 1rem;

	border-radius: 0 0 4px 4px;

	background-color: #fff;

	box-shadow:
		0.3px 0.5px 0.7px hsl(var(--shadow-color) / 36%),
		0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 36%),
		2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 36%),
		5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 36%);

	transform: translate3d(0, -110%, 0);

	overflow-y: scroll;

	transition: transform 0.3s linear;
	scrollbar-width: thin;
}

.settings.is-active {
	z-index: 10;

	transform: translate3d(0, 0, 0);
}

.settings-backdrop {
	display: none;
}

.settings-backdrop.is-active {
	position: fixed;
	inset: 0;
	z-index: 0;

	display: block;

	inline-size: 100%;
	block-size: 100%;
}

.settings label.bonus-checkbox {
	display: flex;

	max-inline-size: 384px;

	font-weight: normal;
	font-size: 0.75rem;
}

.settings label input[type='checkbox'] {
	align-self: center;

	margin-inline-end: 0.5rem;
}

.widget-config-area {
	position: relative;

	display: grid;

	margin-block-start: 15px;
	padding: 30px 10px 10px;

	border: 1px solid #b1b0b0;
	border-radius: 5px;

	background-color: #f9f9f9;
}

.widget-config-area-title {
	position: absolute;
	inset-block-start: 15px;

	inline-size: 100%;

	font-weight: bold;
	font-size: 0.75rem;
	text-align: center;
}

.setting-bonus {
	display: none;
}

.setting-bonus.is-active {
	display: unset;
}

.hint {
	margin-block-end: 0.75rem;

	font-size: 0.75rem;
}

.hint a {
	color: inherit;
}

label {
	display: flex;

	margin-block: 0.75rem 0.25rem;

	font-size: 0.75rem;
	text-transform: capitalize;
}

input:not([type='checkbox']) {
	inline-size: 100%;
	block-size: 32px;
	padding-inline: 0.5em;

	border: 1px solid var(--select-border);
	border-radius: 6px;
}

select {
	z-index: 1;

	inline-size: 100%;
	block-size: 32px;
	margin: 0;
	padding: 0 1em 0 0;

	color: #262729;
	font-size: 0.75rem;
	font-family: inherit;
	line-height: inherit;

	border: none;

	background-color: transparent;

	outline: none;

	cursor: inherit;

	appearance: none;
}

.select {
	position: relative;

	display: grid;
	grid-template-areas: 'select';
	align-content: center;
	align-items: center;

	inline-size: 100%;
	block-size: 32px;
	padding-inline: 0.5em;

	font-size: 1.25rem;
	line-height: 1.1;

	border: 1px solid var(--select-border);
	border-radius: 6px;

	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

	cursor: pointer;
}

.select:not(.select--multiple)::after {
	content: '';

	justify-self: end;

	inline-size: 10px;
	block-size: 8px;

	background-color: var(--select-arrow);

	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select,
.select::after {
	grid-area: select;
}

select:focus + .focus {
	position: absolute;
	inset-block: -1px;
	inset-inline: -1px;

	border: 2px solid var(--select-focus);
	border-radius: inherit;
}

.qr-space {
	position: fixed;
	inset: 0;
	z-index: -1;

	display: flex;
	justify-content: center;
	align-items: center;

	inline-size: 100%;
	block-size: 100vh;
	margin-block-start: 1rem;
}

.qr {
	inline-size: 20%;
}

@media only screen and (width <= 480px) {
	.qr {
		inline-size: 80%;
	}
}

#qd-wrapper {
	position: absolute;
	inset: auto 0 0 auto;

	inline-size: 100%;
	block-size: 50px;
}

@media only screen and (width >= 480px) {
	#qd-wrapper {
		inset: auto 1rem 1rem auto;

		display: block;

		block-size: 64px;
		max-inline-size: 532px;
	}
}

.dialog {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	margin: auto;

	border: none;
	border-radius: 12px;
}

@media only screen and (width >= 480px) {
	.dialog {
		inline-size: 439px;
		max-block-size: 550px;
	}
}

.dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 0.75rem 1rem;

	border-block-end: 1px solid #ccc;
}

.dialog-header h2 {
	font-size: 0.9rem;
}

.dialog-header button {
	font-size: 1.25rem;
	line-height: 1;
}

.dialog-footer {
	padding: 0.75rem 1rem;

	font-size: 1rem;
}

.dialog-content {
	block-size: calc(100% - 45px); /* minus header and footer height */

	/* margin-inline: 24px; */
}

@media only screen and (width >= 480px) {
	.dialog-content {
		block-size: 505px;
	}
}