@import 'inc/reset.css';

/* Variables
================================================================ */
:root {
	--geniBlue: #448AFF;
	--geniBlueLight: #90CAF9;
	--geniBlueDark: #070c28;
	--geniGray: #BBDEFB;

	--primaryColor: var(--geniBlue);
	--secondaryColor: var(--geniGray);

	--textColor: #EEE;
	--textColorAccent: var(--geniBlue);
	--textColorLinks: var(--geniGray);
	--textColorLinksHover: var(--geniBlueLight);

	--bgGray: #E2E2E2;

	--radius: 12px;
	--radius2: 24px;

	--padding: 40px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--geniBlue); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--geniBlueLight); }

body {
	background: var(--geniBlueDark);
	margin: 0;
	color: var(--textColor);
	background-image: url('/assets/img/hexagons-o4.jpg');
	background-size: cover;
	background-attachment: fixed;
}

a {
	color: var(--textColorLinks);
	text-decoration: none;
	display: inline-block;

	&:hover {
		color: var(--textColorLinksHover);
	}
}

ul { list-style: none; margin: 0; padding: 0 }
dl, dd, dt { margin: 0 }
summary { list-style: none }
b { font-weight: 600 }

.list { list-style: circle }
.list li + li { margin-top: 4px }

.currency { opacity: .75 }

input, button { border-radius: 12px; width: 100%; padding: 0 1em; border: 0; font-size: 100% }
.blue { color: #1565C0 }
h3, .row:before { color: #448aff }
.id { color: #448aff }

.hrImages { display: flex; justify-content: center; align-items: center; display: none }
hr, .hr { opacity: .08; margin: 8px 16px }

/* Font
================================================================ */
body, input, button, textarea { font-family: Poppins; font-size: 1rem; }
body {color: #CFD8DC;}
.p {font-size: 20px;}

h1, h2, h3, h4, h5, h6,
.hx, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-size: 1rem;
	font-weight: 600;
}

h1 > .text, .h1 > .text {font-size: 3em;}
h2 > .text, .h2 > .text {font-size: 3.5em;}
h3 > .text, .h3 > .text {font-size: 2em;}
h4 > .text, .h4 > .text {font-size: 1.5em;}
h5 > .text, .h5 > .text {font-size: 1.25em;}
h6 > .text, .h6 > .text {font-size: 1em;}

h2 {color: #90CAF9;}

h3 {
	margin-bottom: 0;
	font-weight: 400;
	height: 64px;
	display: flex;
	align-items: center;
}

h3 > .text { display: block }

h2 + .p, 
h3 + p {
	font-size: 20px;
	color: #90CAF9;
}

/* Figure, Image
================================================================ */
figure {position: relative}
figcaption {
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 16px;
	font-size: 12px
}
svg.icon {
	display: inline-block;
	width: 1.5em; height: 1.5em;
	fill: currentColor;
}
svg.icon + .text { /*vertical-align: middle; margin-left: 2px */}

/* Buttons
================================================================================================================================ */

.btn {
	cursor: pointer;
	height: 48px;
	padding: 0 40px;
	vertical-align: middle;
	border: 0;
	border-radius: 20px;
	background: transparent;
	text-align: center;
	min-height: 48px;
	width: auto;
	border: 0;
	box-shadow: inset 0 0 0 1px #90caf9;
	color: inherit;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	.icon { opacity: .5; }
}

.order .buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}


.btn, select, .getCoin input, .card, .results article, dl.select > div {
	transition: all ease-in-out .2s;
	&:hover, &:focus, &[open] { box-shadow: inset 0 0 0 2px #FFF; color: #FFF; background-color: rgb(144 202 249 / 20%); }
}

/* LOGIN ERROR MESSAGE
================================================================================================================================ */
.error-message {
	background: rgba(220, 53, 69, .1);
	border: 1px solid rgba(220, 53, 69, .3);
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #ff6b7a;
	font-size: 14px;
	line-height: 1.4;

	&.show {
		display: block !important;
		animation: fadeIn .3s ease;
	}
}

/* INPUT ERROR STATES */
input.error, .form-input.error {
	border-color: #ff9800 !important;
	box-shadow: inset 0 0 0 1px #ff9800 !important;
	background-color: rgba(255, 152, 0, .05) !important;
}

input.error:focus, .form-input.error:focus {
	border-color: #ff9800 !important;
	box-shadow: inset 0 0 0 2px #ff9800 !important;
}

.result { max-width: 420px; }

input, select {
	background: var(--bgGray);
	border-radius: var(--radius);
	border: 0;
	min-height: 3.5rem;
	width: 100%;
	padding: 0 1em;
	font-size: 1rem;
	font-family: inherit;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"%3E%3Cpath d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 1.5em;
	padding-right: 3em;
	color: #606770;

	option { background: var(--geniBlueDark); }
	&:valid { color: #070c28; }
}

/* Layout
================================================================================================================================ */

.page {
	min-height: 100%;
	width: 100%;
	padding: var(--padding);
}

.sidebar + .page {
	padding-left: 320px;
	padding-top: 0;
}

/* SECTION
================================================================ */
section { width: 100%; }


section + section, .hrImages { margin-top: 64px; }

.sT {
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}
.sT > .icon {
	color: #1565C0;
	font-size: 64px;
	left: -128px;
	position: absolute;
	width: 128px;
	display: none;
}

.sC .row {
	position: relative;
	padding-left: 84px
}

.sC .row:before {
	content: ''; display: block; position: absolute;
	width: 2px; height: 100%;
	left: 31px;
	text-align: center;
	background: currentColor
}

.sC .row article,
.sC .row .row-content {
	padding: var(--padding) 0 var(--padding) var(--padding);
	max-width: 1080px
}


/* SECTION : MEANING
================================================================ */
span.grade {
	display: inline-block;
	width: 80px; line-height: 36px;
	text-align: center;
	color: #90CAF9;
	font-family: oswald;
	background: #1565C0;
	color: black;
	margin-right: 10px;
}
.grades li {
	border-radius: 8px;
	border: 1px solid #1565C0;
	max-width: 512px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.grades li + li { margin-top: 4px }
span.meaning { font-size: 16px; }

/* COIN
================================================================ */
h1 .before { border: 0!important; }

article h1 span {
	display: block;
	line-height: 32px;
}

article h1 span:nth-of-type(2) {
	font-size: 32px;
}
.before .coin {
	width: 64px;
	height: 64px;
}

article.row:before {
	color: inherit;
}
.before .coin img {
	border-width: 2px;
	border-color: currentColor;
}
.coin {
	width: 128px; max-width: 100%;
	height: 128px;
	margin-left: auto;
	margin-right: auto;
}

.client .coin {
	width: 160px;
	height: 160px;
}
.client .coin {margin-bottom: 16px}
.client .coin img { max-width: 192px; aspect-ratio: 1 / 1; object-fit: contain; background-color: white; }

.coin {
	img {
		height: auto;
		width: 100%;
	}
	.cs, .cs2 {
		border-radius: 512px;
		border: 4px solid white;
		position: absolute;
		width: 100%;
		backface-visibility: hidden;
		border-radius: 50%;
		inset: 0;
		margin: auto
	}
	.cs1 {
		border-radius: 160px;
		width: 120px;
		border: 8px solid white
	}
	.cs2 {
		transform: rotateY(180deg);
	}
	.coin3d {
		perspective: 1000px;
		width: 100%;
		height: 100%;
		& > div {
			width: 100%;
			height: 100%;
			position: relative;
			transition: transform 1s ease-in-out;
			transform-style: preserve-3d
		}
		&:hover > div {
			transform: rotateY(180deg);
		}
	}
}

/* NAVIGATION
================================================================ */
.topbar { position: sticky; left: 0; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 99999; background: rgb(7 13 41 / 90%); }

.navigation {
	width: 100%;
	top: 0; left: 0;
	margin: 0 auto; padding: 24px var(--padding) 24px var(--padding);
	height: 80px;
}

.navigation { display: flex; justify-content: space-between; align-items: center }
.navigation .nav { display: flex; justify-content: center; margin: 0;}

.navigation .nav li { position: relative; }
.navigation li + li { margin-left: 0 }
.navigation .nav-item { padding: 4px 12px; font-weight: 600; background: none; cursor: pointer }
.navigation a {color: #78909C;}
.navigation .nav-item:hover { color: #90CAF9 }
.navigation .nav-item.is-active {color: #90CAF9; text-shadow: 0 0 16px rgba(68, 137, 255, .25);}

.navigation .icon { color: #AAA; }
.navigation .nav-item:hover > .icon { color: #EEE }

/* ================================================================ */
.icon-menu {
	position: relative; display: block;
	width: 24px; height: 16px;
	top: 0; left: 0;
	color: currentColor
}

.icon-menu:before,
.icon-menu:after {
	display: block;
	position: absolute;
	content: '';
	width: 24px; height: 4px;
	top: 50%; left: 50%;
	margin-top: -2px; margin-left: -12px;
	background: currentColor; border: 0
}

.icon-menu:before { transform: translateY(-4px) rotate(0deg)}
.icon-menu:after { transform: translateY(4px) rotate(0deg)}

.icon-menu:before, .icon-menu:after {
	transition-property: transform, opacity;
	transition-timing-function: ease;
	transition-duration: .5s
}

.menu {
	position: fixed; z-index: 19;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	margin: 0 auto; padding: 24px 32px;
	background: rgba(7, 12, 40, .95);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	display: none;
	align-items: center; justify-content: center;
	text-align: center;

	&.menu-ready {
		transition: transform .5s ease-in-out, opacity .5s ease-in-out, visibility .5s ease-in-out;
	}

	&.open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.toggleMenu {
	display: flex; align-items: center; justify-content: center;
	position: fixed; z-index: 99;
	width: 80px; height: 80px;
	top: 0; right: 0;
	cursor: pointer;
	display: none;
	background: transparent;
	border: 0;
	color: white;
}

.toggleMenu.open .icon-menu:before {
	transform: translateY(0) rotate(135deg);
}

.toggleMenu.open .icon-menu:after {
	transform: translateY(0) rotate(45deg);
}

.menu {
	.inner {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px
	}
	.nav {
		border-radius: 32px
	}
	.nav-item {
		border-radius: 16px;
		font-weight: 600;
		line-height: 1.2;
		color: inherit;
		background: transparent;
		border: none;
	}
	.nav-item .text {
		font-size: 32px
	}
	img {
		width: 100%;
		max-width: 320px;
		height: auto
	}
}

/* Splash
================================================================ */

.splash {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 80px);
	padding: 40px;

	.desc {
		font-size: 16px;
		margin-top: 20px;
		text-transform: uppercase;
		color: #90CAF9;
		letter-spacing: 1px;
		line-height: 1.8;
		text-align: center;
		max-width: 600px;
		font-weight: 400;

		strong {
			color: #448aff;
			font-weight: 700;
		}
	}
}

.discover {
	padding: 40px 0;
	color: #CFD8DC;
	text-align: center;
	position: absolute;
	bottom: 0;

	h1 {
		line-height: 32px;
		font-size: 32px;
		font-weight: 400;
		letter-spacing: -1px;
	}

	svg { transform: rotate(90deg); }
}

@media (max-width: 780px) {
	.splash {
		.desc {
			font-size: 14px;
			line-height: 2;
			letter-spacing: 0.8px;
			max-width: 500px;
		}
	}
}

@media (max-width: 480px) {
	.splash {
		padding: 20px;

		.desc {
			font-size: 12px;
			line-height: 2.2;
			letter-spacing: 0.6px;
			padding: 0 10px;
			max-width: 100%;
			margin-top: 30px;
		}
	}
}

/* Details
================================================================================================================================ */
::-webkit-details-marker { display:none }
details {
	overflow:hidden;

	summary .before:before, summary .before:after {
		display: block;
		position: absolute;
		content: '';
		width: 20px; height: 4px;
		top: 50%; left: 50%;
		margin: -2px 0 0 -10px; padding: 0;
		background: currentColor; border: 0;
		transition: transform .25s ease-in-out
	}

	summary .before:before { transform: rotate(-0)}
	summary .before:after { transform: rotate(-90deg)}
	summary .before { color: #448aff }
	.animation { overflow: hidden; height: 0 }
	
	&[open] {
		.animation { height: auto }
		summary .before:before { transform: rotate(180deg)}
		summary .before:after { transform: rotate(0deg); opacity: 0 }
	}
}

.before {
	position: absolute;
	width: 64px; height: 64px; line-height: 60px;
	left: 0;
	color: currentColor; background: #070c28; border: 2px solid; border-radius: 32px;
	font-size: 32px; font-weight: 800; text-align: center
}
.before > small {
	opacity: .5;
	margin-left: 2px
}

/* ---- */
label.row, a.row {
	cursor: pointer;
	position: relative;

	.btn {
		display: none;
		padding: 0;
		margin: 0;
		min-height: 0;
		height: auto;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
		border: 0;
		font-size: 2em;
		border-radius: 100%;
		width: 10px;
		aspect-ratio: 1 / 1;
		transform: scale(.6);
		transform-origin: 0 0;

		.text { display: none }
		&:hover {
			background-color: #41C4FF;
			&.danger { background-color: rgba(139, 0, 0, .5); color: rgba(255, 255, 255, .8) }
		}
		&.danger { color: rgba(139, 0, 0, .8) }
	}

	&:hover .btn {
		display: block
	}
}

.hx {font-size: 2em}
.username { white-space: nowrap }

dl.select > div {
	border-radius: 20px;
	padding: 20px 40px;
	min-height: auto;
	box-shadow: inset 0 0 0 1px rgb(144 202 249 / 25%);
	background: rgb(144 202 249 / 10%);
	cursor: pointer;
}
dl.select > div + div { margin-top: 10px; }
dl.select dt { font-size: 20px; }

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
	max-width: 900px;
	margin: 0 auto;
}

.form-group {
	display: flex;
	flex-direction: column;
	margin: 0;

	&[data-name="submit"] {
		grid-column: 1 / span 2;
	}
}

/* Form
================================================================ */
.form-group { position: relative; display: block }
.form-group + .form-group { margin-top: 5px; }
.form-label { margin-bottom: 5px }
.form-info { margin-top: 5px }

textarea {
	min-width: 100%; max-width: 100%;
	min-height: 160px; max-height: 20em;
	padding: 1em !important
}

select {
	padding: 0 16px;
	option {
		padding: .25rem 1rem;
		border-radius: 8px;
	}
}

/* Field Icon */
.form-input-before:before,
.form-input-after:before { font-family: fontawesome }

.form-input-after:before { content: '\f058' }

.form-input-before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	border-right: 0;
	text-align: center;
	height: 48px;
	display: block;
	color: #999;
	line-height: 48px
}

.form-input-after{
	color: #AAA;
	position: absolute;
	top: 50%;
	right: 16px;
	margin-top: -8px;
	width: 36px;
	text-align: right
}

.form-input-after > * { margin-left: 4px }
input[type="checkbox"] ~ .form-input-after:before { content: '\f14a' }

/* Form Check */
.form-check,
.form-check ul {
	padding: 0;
	margin: 0;
	list-style: none
}

.form-check {
	position: relative; overflow-y: auto;
	height: auto; min-height: auto
}

.form-check label {
	position: relative; display: block; cursor: pointer;
	padding: 16px 0 16px 16px
}

.form-check input { display: none }

/* Summary */
form details summary {
	width: 40px; height: 40px; line-height: 40px;
	text-align: center;
	position: absolute;
	margin: 0; padding: 0;
	top: 8px; right: 8px;
	opacity: .5;
	z-index: 9
}

form details summary:hover { opacity: .75 }
form details[open] summary { opacity: 1 }

form details > article {
	position: absolute;
	top: 0; left: 0;
	background: #333;
	width: 100%;
	color: #EEE;
	border-radius: 12px;
	padding: 1rem
}

form details > article * {
	color: #EEE
}

/* Switchbox */
.switchbox {
	z-index: 1;
	position: absolute;
	top: 18px; left: 16px;
	width: 32px; height: 20px;
	background-color: rgb(0 0 0 / 16%);
	border-radius: 32px
}
.switchbox:before {
	content: '';
	display: block;
	position: absolute;
	width: 16px; height: 16px;
	top: 2px; left: 2px;
	background-color: rgb(255 255 255 / 100%);
	border-radius: 32px
}
.switchbox + .text { padding-left: 48px }
/* -- Disabled -- */
:disabled ~ .switchbox { opacity: .75 }
input:disabled ~ .text { opacity: .5 }
/* -- State -- */
input:not(:checked) ~ .switchbox + .text { color: #888888 }
input:checked ~ .switchbox + .text { opacity: 1 }
/* -- Hover -- */
label:hover .switchbox:before, .switchbox:hover:before { opacity: .75 }
label:active .switchbox:before, .switchbox:active:before { opacity: .5 }
/* -- Checked -- */
input:checked ~ .switchbox { background: #0984e3; border-color: #0984e3 }
input:checked ~ .switchbox:before { left: 14px }
input:checked ~ .switchbox:before { background-color: #FFF }

/* Footer
================================================================================================================================ */
#app > footer {
	color: rgb(68 138 255 / 50%);
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -64px;
	display: none;
}

#app > footer a { color: inherit }
#app > footer a:hover { color: white }
#app > footer ul li { display: inline-block }
#app > footer .social { font-size: 24px; display: none;}
#app > footer .social li + li { margin-left: 4px }
#app > footer .links { margin-top: 4px; font-size: 12px; line-height: 16px; text-transform: uppercase }
#app > footer .links li + li { margin-left: 8px }

/* CLIENT
================================================================================================================================ */
.client {
	max-width: 1920px;

	.sT { padding: 0 }
	.sT > * { margin: 0 }
	.sT > p { font-size: 20px; color: #448aff; }
	article + article { margin: 0 }

	header {
		font-size: 16px;
		color: #FFF
	}

	.empty-coins-state {
		text-align: center;
		padding: 80px 20px;
		max-width: 700px;
		margin: auto;
		color: var(--textColor);

		p {
			margin: 0 0 40px 0;
			opacity: .8;
			font-size: 20px;
			line-height: 1.6;
			color: var(--textColor);
		}

		.btn-primary {
			/*background: var(--geniBlue);
			color: white;
			padding: 10px 48px;
			border-radius: 12px;
			text-decoration: none;
			font-weight: 600;
			font-size: 18px;
			box-shadow: 0 4px 12px rgba(68, 138, 255, .3);*/
		}
	}
}

.coin-badge {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 6px;
	display: inline-block;
}

.antique-badge {
	background: rgba(220, 53, 69, 0.1);
	color: #dc3545;
}

.btn-green {
	color: #00C853;
	box-shadow: inset 0 0 0 1px currentColor;
	background: color(srgb 0 0.78 0.33 / 0.10);
}

.btn-delete {
	color: #FF3D00;
	box-shadow: inset 0 0 0 1px currentColor;
	background: color(srgb 1 0.24 0 / 0.10);
}

/* Sidebar
================================================================================================================================ */
.sidebar {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	top: 80px; bottom: 40px; left: 40px;
	width: 240px;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #448aff;
	border-radius: 32px;
	background: color(srgb .27 .54 1 / .15);
	overflow: auto;

	li a {
		display: block;
		color: inherit;
	}

	li svg {
		opacity: .5;
	}

	.nav-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		margin: 4px 0;
		border-radius: 12px;
		color: var(--textColor);
		text-decoration: none;
		font-weight: 400;
		transition: all .2s ease;
		opacity: .8;
		line-height: 1;

		&:hover {
			background: rgba(68, 138, 255, .2);
			opacity: 1;
			transform: translateX(4px);
		}

		&.is-active {
			background: var(--geniBlue);
			color: var(--geniBlueDark);
			opacity: 1;
			font-weight: 600;
		}

		svg { margin-right: 12px; opacity: .7; }

		&.is-active svg {
			opacity: 1;
		}
	}

	.nav {
		
		li + li { margin-top: 0; }
		li a {
			padding: 20px;
			border-radius: 20px;
		}
		li svg {
			display: block;
			margin-bottom: 5px;
			font-size: 1.5rem;
		}
	}

	.toc {
		padding: 20px;
		color: #546E7A;

		small {
			width: 20px;
			float: right;
			line-height: 20px;
			border-radius: 100px;
			background: var(--geniBlueDark);
			margin-left: 10px;
			display: inline-block;
			text-align: center;
		}

		li svg {
			vertical-align: top;
			display: none;
		}

		li + li {
			margin-top: 4px;
		}
	}
}

.results {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;

	.empty-coins-state {
		width: 100%;
		flex: 1 1 100%;
	}
}

.results > article {
	flex: 1 1 calc(33.33% - 20px);
	min-width: 280px;
	min-height: 150px;
}

.results article, .card {
	border-radius: 24px;
	padding: var(--padding);
	min-height: auto;
	box-shadow: inset 0 0 0 1px rgb(144 202 249 / 25%);
	background: rgb(144 202 249 / 10%);
}

.results article.antique-coin,
.result.antique-coin {
	box-shadow: inset 0 0 0 1px rgb(220 53 69 / 35%);

	.id { color: #dc3545; }
	h1, h3, .row:before { color: #dc3545; }
	dt { color: #ff6b7a; }
	&:hover, &:focus { box-shadow: inset 0 0 0 2px rgb(220 53 69 / 60%); }

	.descriptions {
		margin-top: 16px;
		font-size: 14px;
		line-height: 1.4;

		div { margin-bottom: 4px; }
		strong { color: #dc3545; }
	}

	.rating-row {
		.stars {
			color: #ffc107;
			font-size: 14px;
			letter-spacing: 1px;
		}
	}

	.date {
		font-size: .8em;
		font-weight: normal;
		color: #ff6b7a;
		margin-top: 4px;
	}

	.grade dd {
		background: rgba(220, 53, 69, .15);
		border-color: rgba(220, 53, 69, .4);
	}

	.number dd {
		border-color: rgba(220, 53, 69, .4);
	}
}

details.card { padding: 20px 40px; }

article {
	header {
		text-align: center;
		h1 { font-weight: 600; margin: 0; }
		h2 { font-weight: 400; letter-spacing: 1px; }
	}
}

.coin-details {
	margin-top: 16px;
	font-size: 12px;

	dl > div {
		display: flex;
		justify-content: space-between;
	}
	dl > div + div{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid rgb(144 202 249 / 25%);
	}
	dl > div > div {
		/*flex: 1;*/
	}

	dl > div + div {
	}
	.b > div:nth-child(2) { text-align: center; }
	.b > div:nth-child(3) { text-align: right; }

	.c > div:nth-child(3),
	.c > div:nth-child(4) {
		text-align: right;
	}
	dt {
		font-size: 10px;
	}
	.b dd {
		display: block;
		line-height: 28px;
		letter-spacing: 1px;
		text-align: center;
		border-radius: 4px;
		padding: 0 10px;
	}
	.b .number dd {
		max-width: 128px;
		border: 1px solid #1565C0;
	}
	.b .grade dd {
		max-width: 80px;
		font-family: oswald;
		background: #1565C0;
	}

}

dt {color: var(--geniBlueLight);}

/* Aside
================================================================================================================================ */

.side {
	z-index: 8; position: fixed;
	width: 288px;
	height: 320px;
	padding: var(--padding);
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);

	&:after {
		position: absolute; z-index: -1;
		display: block; content: '';
		width: 100%; height: 100%;
		top: 0; left: 0;
		background: url('/assets/img/hexagon5.svg') 50% 50% no-repeat;
		background-size: cover;
	}

	li {
		.nav-item {
			letter-spacing: -1px;
			line-height: 32px;
			display: flex;
			align-items: center;
			gap: 8px;
			transition: all .3s ease;

			& > .text{ display: block; font-size: 24px }
			&:hover { color: #448aff; }

			.step-number {
				font-size: 18px;
				font-weight: 600;
				color: #78909C;
				min-width: 24px;
				transition: all .3s ease;
			}

			.icon { opacity: 0; color: #448aff; display: none; }
		}

		&.is-active {
			.nav-item .icon { opacity: 1; }
			&, .nav-item { color: #90CAF9 }

			.nav-item .step-number {
				color: #448aff;
				transform: scale(1.1);
			}
		}

		&.is-checked {
			&, .nav-item, .text { color: #00E676 }

			.nav-item .step-number {
				color: #00E676;
			}
		}

		&.is-clickable {
			cursor: pointer;

			.nav-item:hover {
				color: #00E676;
				transform: translateX(4px);

				.step-number {
					color: #00E676;
					transform: scale(1.05);
				}
			}
		}
	}

	.form-group {
		display: flex; flex-direction: row;
		.form-label { min-width: 100px; }
		select { width: 90px; background-color: transparent; color: white }
	}
}

/* Filter
================================================================================================================================ */

.filter {
	display: flex;
	flex: 1;
	gap: 10px;
	width: 100%;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #90CAF9;
	border-radius: 10px;

	label {
		flex: 1 1 0;
		width: 100%;
		position: relative;
		margin-top: -25px;

		& > span {
			font-size: 10px;
			padding: 0 10px;
			color: var(--geniBlueLight);
			background: #070d29;
			position: relative;
		}

		& > select {
			width: 100%;
			padding: 5px 9px;
			padding-right: 25px;
			background: var(--geniBlueDark);
			border: 0;
			box-shadow: inset 0 0 0 1px #90caf9;
			color: inherit;
			border-radius: 5px;
			height: auto; min-height: auto;
			font-size: 12px;
			appearance: none;
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%2390CAF9' stroke-linecap='round' stroke-linejoin='round' fill='none' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
			background-position: right 8px center;
			background-repeat: no-repeat;
			background-size: 16px;
		}
	}

	.filter-reset {
		align-self: flex-end;
		min-width: auto;
		width: auto;
		height: 26px;
		min-height: 26px;
		padding: 0 15px;
		margin-left: 10px;
		font-size: 12px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		gap: 6px;
		background: rgba(224, 224, 224, .1);
		transition: all .2s ease;

		&:hover {
			background: rgba(224, 224, 224, .2);
			box-shadow: inset 0 0 0 1px var(--geniBlueLight);
		}

		& .icon {
			opacity: .7;
			width: 14px;
			height: 14px;
		}
	}
}

@media (max-width: 1200px) {
	.sidebar {
		position: relative;
		width: 100%;
		top: 0; bottom: 0; left: 0;
		padding: 16px;
		overflow-x: auto;
		border-radius: 16px;
		margin-bottom: 20px;
		background: rgba(68, 138, 255, .08);
	}

	.side {
		display: none;
	}

	.sidebar + .page {
		padding-left: 20px;
	}

	.page.deposit {
		display: flex;
		flex-direction: column;

		h2 {
			order: 1;
		}

		.side {
			order: 2;
			position: relative;
			margin: 20px auto 30px auto;
			width: 100%;
			max-width: none;
			height: auto;
			background: rgba(68, 138, 255, .08);
			border-radius: 16px;
			padding: 16px;

			&:after {
				display: none;
			}

			.nav {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 8px;
				margin: 0;
				padding: 0;
				align-items: stretch;
			}

			.nav li {
				position: relative;

				&:not(:last-child):after {
					content: '➔';
					position: absolute;
					right: -12px;
					top: 50%;
					transform: translateY(-50%);
					color: rgba(255, 255, 255, .4);
					font-size: 14px;
					z-index: 1
				}
			}

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 12px 8px;
				border-radius: 12px;
				background: rgba(255, 255, 255, .1);
				color: rgba(255, 255, 255, .8);
				font-size: 13px;
				font-weight: 500;
				text-align: center;
				transition: all .2s ease;
				height: 100%;

				.step-number {
					margin-right: 0;
					margin-bottom: 4px;
					font-weight: 700;
					font-size: 15px;
				}

				.text {
					flex: 1;
					white-space: normal;
					overflow: visible;
					text-overflow: initial;
					line-height: 1.2;
					word-break: keep-all;
					hyphens: auto;
				}

				&.active {
					background: var(--geniBlue);
					color: white;
					font-weight: 600;
				}
			}
		}

		div[data-init-action="deposit"] {
			order: 3;
		}
	}

	.sidebar ul {
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 0;
	}

	.sidebar li {
		flex: 1;
		min-width: 0;
	}

	.sidebar .nav-item {
		padding: 12px 8px;
		margin: 0;
		flex-direction: column;
		text-align: center;
		font-size: 14px;
		border-radius: 12px;

		&:hover {
			transform: translateY(-2px);
		}

		svg {
			margin-right: 0;
			margin-bottom: 4px;
			width: 20px;
			height: 20px;
		}
	}
}

@media (max-width: 780px) {
	.sidebar {
		padding: 12px;
		border-radius: 12px;
	}

	.sidebar ul {
		flex-wrap: wrap;
		gap: 6px;
	}

	.sidebar li {
		width: calc(50% - 3px);
		flex: none;
	}

	.sidebar .nav-item {
		padding: 10px 6px;
		font-size: 13px;

		svg {
			width: 18px;
			height: 18px;
		}
	}
}

@media (max-width: 480px) {
	.sidebar {
		padding: 10px;
		margin-bottom: 16px;
	}

	.sidebar ul {
		gap: 4px;
	}

	.sidebar li {
		width: 100%;
	}

	.sidebar .nav-item {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		padding: 12px 16px;
		font-size: 14px;

		svg {
			margin-right: 12px;
			margin-bottom: 0;
			width: 20px;
			height: 20px;
		}

		&:hover {
			transform: translateX(4px);
		}
	}

	.page.deposit .side {
		padding: 12px;
		margin: 16px auto 20px auto;

		.nav {
			gap: 6px;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			align-items: stretch;
		}

	}
}

/* RESPONSIVE
================================================================================================================================ */

@media (max-width: 1080px) {
	#app {
		& > main { flex: 1; display: block; }
	}
}

@media (max-width: 960px) {
	.topbar .navigation .nav {display: none;}
	.topbar .toggleMenu {display: flex;}
	.menu {display: flex;}
}

@media (max-width: 767px) {
	:root {
		--padding: 20px;
	}
}

@media (max-width: 720px) {
	h2 > .text {font-size: 2.25em;}
	h3 > .text {font-size: 1.75em;}
}
@media (max-width: 568px) {
	h2 > .text {font-size: 2em;}
	h3 > .text {font-size: 1.5em;}
}
@media (max-width: 720px) {
	.p br { display: none; }
	.sC .row article, .sC .row .row-content {
		padding: 20px 0 20px 0;
	}
}

.control {
	position: absolute;
	width: 48px; line-height: 48px;
	left: 50%; margin-left: -24px;
	text-align: center;
	opacity: .5;
	display: none;
}
.control.up { top: -64px }
.control.down { bottom: -64px }

/* Responsive */
@media (max-width: 768px) {
	.coins-container {
		padding: 10px;
	}

	.empty-state {
		padding: 40px 20px;
		margin-bottom: 30px;

		h4 {
			font-size: 20px;
		}
	}

	.coins-list .coins-actions {
		justify-content: center;
	}

	.coins-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.coin-card {
		padding: 15px;
	}
}

@media (max-width: 480px) {
	.empty-coins-state {
		padding: 30px 12px;

		p {
			font-size: 15px;
			margin: 0 0 24px 0;
		}

		.btn-primary {
			padding: 14px 16px;
			font-size: 14px;
			height: auto;
			min-height: auto;

			.text {
				font-size: 14px;
				white-space: normal;
				line-height: 1.4;
				word-break: break-word;
				display: block;
			}
		}
	}

	.step-navigation {
		flex-direction: column;
		gap: 15px;

		.navigation-right {
			flex-direction: column;
			width: 100%;
			gap: 15px;

			.coins-summary {
				align-items: center;
			}
		}

		.btn {
			width: 100%;
		}
	}
}

.row.status-awaiting {
	opacity: .75
}

.dd {
		position: absolute;
		top: 100%;
		right: 0;
		background: var(--geniBlueDark);
		border: 1px solid var(--geniBlueLight);
		border-radius: 8px;
		min-width: 160px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
		z-index: 100;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all .2s ease;
		margin-top: 8px;
	
		.dd-item {
			display: flex;
			align-items: center;
			gap: 8px;
			width: 100%;
			padding: 12px 16px;
			color: var(--textColor);
			text-decoration: none;
			border: none;
			background: transparent;
			cursor: pointer;
			font-size: 14px;
			text-align: left;
			transition: background-color .2s ease;
			border-radius: 0;
		}
}
.language-selector {
	.language-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: none;
		color: var(--textColor);
		cursor: pointer;
		border-radius: var(--radius);
		transition: background-color 0.2s;

		.chevron-down {
			transition: transform 0.2s;
		}
	}

	&.open .language-toggle .chevron-down {
		transform: rotate(180deg);
	}
}

/* Mobile Language Selector */
.language-selector-mobile {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 16px;
	padding-top: 16px;

	.nav-separator {
		display: block;
		padding: 8px 16px;
		color: var(--textColorLinks);
		font-size: 14px;
		font-weight: 500;
		opacity: 0.8;
	}

	.language-menu-trigger {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		width: 100%;

		img {
			width: 16px;
			height: 16px;
			flex-shrink: 0;
		}

		.text {
			flex: 1;
		}

		.chevron-down {
			transition: transform 0.3s ease;
			margin-left: auto;
		}
	}

	.language-submenu-mobile {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 8px;
		margin-top: 8px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	&.open {
		.chevron-down {
			transform: rotate(180deg);
		}

		.language-submenu-mobile {
			max-height: 280px;
		}
	}

	.submenu-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		text-align: left;
		width: 100%;
		padding: 8px 12px;
		background: none;
		border: none;
		color: var(--textColor);
		cursor: pointer;
		transition: background-color 0.2s;
		font-size: 14px;

		img {
			width: 16px;
			height: 16px;
		}

		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}

		&.active {
			background: rgba(68, 138, 255, 0.2);
			color: var(--geniBlue);
		}

		.text {
			font-size: 14px;
		}
	}

	.language-option-mobile {
		justify-content: flex-start;
		gap: 12px;
		text-align: left;
		width: 100%;
		padding: 12px 16px;
		background: none;
		border: none;
		color: var(--textColor);
		cursor: pointer;
		transition: background-color 0.2s;

		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}

		&.active {
			background: rgba(68, 138, 255, 0.2);
			color: var(--geniBlue);
		}

		.text {
			font-size: 16px;
		}
	}
}

@media (max-width: 768px) {
	.language-selector {
		display: none;
	}
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}