/* ===================================================================================
	FONTS
=================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');



/* ===================================================================================
	VARIABLES
=================================================================================== */

[v-cloak] { display:none !important; }

:root {
/*
	--text-color:#93A7B5;
	--bg-gradient-one: #2F404A;
	--bg-gradient-two: #010409;
*/

}

* { overscroll-behavior:none; -webkit-user-select:none; user-select:none; }


 body:has(.theme.ocean) {

	--accent-color: #FFE35E;
	--text-color: #AFD1FF;
	--bg-gradient-one: #2c63a0;
	--bg-gradient-two: #041528;
	--card-gradient-one: #092C5F;
	--card-gradient-two: #0c3E7B;
	--border-one: #2B5796;
	--border-two: #377CCD;

}

body:has(.theme.deep-ocean) {

	--accent-color:#FFE35E;
	--text-color: #93A7B5;
	--bg-gradient-one: #2F404A;
	--bg-gradient-two: #010409;
	--card-gradient-one: #10151A;
	--card-gradient-two: #253138;
	--border-one: #2F404A;
	--border-two: #314048;

}

body:has(.theme.desert) {

	--accent-color:#FFE35E;
	--text-color: #93B5AA;
	--bg-gradient-one: #B26F43;
	--bg-gradient-two: #090501;
	--card-gradient-one: #121E20;
	--card-gradient-two: #243C3C;
	--border-one: #305454;
	--border-two: #2A463C;

}

body:has(.theme.indigo) {

	--accent-color:#FFE35E;
	--text-color:#A493B5;
	--bg-gradient-one: #402F4A;
	--bg-gradient-two: #060109;
	--card-gradient-one: #1B1220;
	--card-gradient-two: #33243C;
	--border-one: #473054;
	--border-two: #3C2A46;

}

body:has(.theme.velvet) {

	--accent-color:#FFB2B2;
	--text-color: #FFF;
	--bg-gradient-one: #A42D2D;
	--bg-gradient-two: #040202;
	--card-gradient-one: #592121;
	--card-gradient-two: #7F3333;
	--border-one: #A04E4E;
	--border-two: #A74B4B;

}

body:has(.theme.silver) {

	--accent-color:#FFE35E;
	--text-color: #383838;
	--bg-gradient-one: #EDEDED;
	--bg-gradient-two: #7C7C7C;
	--card-gradient-one: #A7A7A7;
	--card-gradient-two: #DADADA;
	--border-one: #C1C1C1;
	--border-two: #FFFFFF;
	
	.wallet-label { text-shadow:0 2px 1px rgba(0, 0, 0, 0.25); color:#CCC; }

	.wallet-name,
	.meta-box .balance .value {
		background: linear-gradient(#FFF, #B1B1B1);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: none;
		filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.5));
	}

	.meta-box .balance .label { font-weight:400; }
	.meta-box .balance .value { filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.5)); }
	.meta-box .balance .price { font-weight:400; }
	.meta-box .exchange .currency .value { font-weight:400; }
	.meta-box { text-shadow:none; }
	.meta-box:after { background-color:#1A1A1A; }
	.meta-box .exchange .currency i { filter:none; color:inherit; }
	.last-update { color:#FFF; opacity:0.8; text-shadow:0 2px 2px rgba(0, 0, 0, 0.6); }

}

.touchevents {
	body:has(.theme.silver) {
		.wallet-label { font-weight:500; }
		.meta-box .balance .label { font-weight:500; }
		.meta-box .balance .price { font-weight:500; }
		.meta-box .exchange .currency .value { font-weight:500; }
	}
	
}

body:has(.theme.iron) {

	--accent-color:#FFE35E;
	--text-color: #CCC;
	--bg-gradient-one: #878787;
	--bg-gradient-two: #343434;
	--card-gradient-one: #535353;
	--card-gradient-two: #717171;
	--border-one: #727272;
	--border-two: #9E9E9E;

	.wallet-label { text-shadow:0 2px 1px rgba(0, 0, 0, 0.25); color:#CCC; }

	.wallet-name,
	.meta-box .balance .value {
		background: linear-gradient(#FFF, #B1B1B1);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: none;
		filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.5));
	}

	.meta-box .balance .label { font-weight:400; }
	.meta-box .balance .value { filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.5)); }
	.meta-box .balance .price { font-weight:400; }
	.meta-box .exchange .currency .value { font-weight:400; }
	.meta-box { text-shadow:0px 2px 1px rgba(0, 0, 0, 0.5); }
	.meta-box:after { background-color:#1A1A1A; }
	.meta-box .exchange .currency i { filter:drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.5)); color:inherit; }
	.last-update { color:#FFF; opacity:0.8; text-shadow:0 2px 2px rgba(0, 0, 0, 0.6); }

}



/* ===================================================================================
	GENERAL STYLES
=================================================================================== */

html { height:100svh; }
body { min-height:100svh; position:relative; cursor:default; }

@media all and (display-mode: standalone) {
	
	html { height:100vh; }
	body { min-height:100vh; }
	
}

body { font:16px Poppins; font-weight:300; color:var(--text-color); position:relative; }
body { background:radial-gradient(ellipse at top center, var(--bg-gradient-one),  var(--bg-gradient-two)); }
body:after {
	content:'';
	position: absolute;
	inset:0;
	background: url(/assets/images/background-001.png) 0 0 repeat;
	background-size:480px;
	opacity:0.1;
	z-index: -2;
	pointer-events:none;
}

h1, h2, h3, h4, h5, h6 { font-weight:300; }


/* ===================================================================================
	SETTINGS
=================================================================================== */

.settings .card { padding:30px; }

.settings h2 { padding:0 0 10px 0; margin:0 0 15px 0; border-bottom:1px solid rgba(255, 255, 255, 0.2); }
.settings h3 { margin:0 0 20px 0; }

.settings .theme-list { display:flex; align-items:center; justify-content:center; gap:10px; }
.settings .theme-list a { display:block; width:24px; aspect-ratio:1; border-radius:50%; border:2px solid transparent; box-shadow:0 2px 2px rgba(0,0,0,0.5); }
.settings .theme-list a.selected { border-color:#FFF; }


/* ===================================================================================
	APP STYLES
=================================================================================== */

#app-root { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

#app-root .menu-toolbar { position:absolute; top:40px; right:30px; }
#app-root .menu-toolbar a { color:inherit; }
#app-root .menu-toolbar i { display:block; width:32px; height:32px; }
#app-root .menu-toolbar i svg { display:block; width:32px; height:32px; filter:drop-shadow(0 4px 1px rgba(0,0,0,0.5)); }


.wallet-wrapper {
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	max-width:480px;
	width:100%;
	padding:0 20px 0 20px;
}
.wallet-wrapper .logo {
	position: relative;
	background:url('/assets/images/bitcoin-logo.png') center center no-repeat;
	background-size:contain;
	width:160px; aspect-ratio:1;
	margin-bottom:40px;
}

.wallet-wrapper .logo:after {
	content:'';
	position: absolute;
	inset:5px;
	border-radius:50%;
	box-shadow: 0px 90px 50px rgba(1, 4, 9, 0.4),
				0px 50px 20px rgba(1, 4, 9, 0.5),
				0px 20px 20px rgba(1, 4, 9, 0.5),
				2px -8px 20px rgb(255, 228, 94, 0.5);
				/* 0px 0px 40px rgba(255, 228, 94, 1); */
	z-index:-1;
}


.wallet-wrapper .logo img { width:160px; }




/* ===================================================================================
	WALLET META BOX
=================================================================================== */

.wallet-label { font-size:12px; line-height:1; margin:0 0 3px 0; text-shadow:0 6px 2px rgba(1, 4, 9, 0.6); }
.wallet-label ~ .wallet-label { margin-top:50px; }
.wallet-name { font-size:32px; line-height:1.2; color:var(--accent-color); text-shadow:0 6px 2px rgba(1, 4, 9, 0.6); }


.meta-box { position:relative; margin-top:20px; padding:30px 20px 30px 24px; display:flex; align-items:center; justify-content:space-between; text-shadow:0 3px 2px rgba(1, 4, 9, 0.6); }
.meta-box .balance p { margin:0; padding:0; line-height:1; }
.meta-box .balance .label { margin:0 0 5px 0; }
.meta-box .balance .value { font-size:1.6rem; color:#FFF; margin-bottom:5px; }
.meta-box .balance .price { font-size:11px; }

.meta-box:after { content:''; position:absolute; top:50%; left:0; width:4px; height:36px; transform: translateY(-50%); background-color:var(--accent-color); }

.meta-box .exchange { display:flex; flex-direction:column; gap:0px; }
.meta-box .exchange .currency { display:flex; align-items:center; justify-content:flex-end; gap:0px; }
.meta-box .exchange .currency i { display:block; width:24px; height:24px; filter:drop-shadow(0 4px 1px rgba(0,0,0,0.5)); color:var(--accent-color); }
.meta-box .exchange .currency .value { font-size:16px; font-weight:300; letter-spacing:-1px; font-family:'Roboto Mono'; }


/* ===================================================================================
	LAST UPDATE
=================================================================================== */

.last-update { font-size:11px; opacity:0.5; margin-top:40px; z-index:30; text-shadow:0 2px 2px rgba(1, 4, 9, 0.6); }



/* ===================================================================================
	CARD STYLE
=================================================================================== */

.card {

	--border-width: 1.6px;

	width:100%;
	border-radius: 10px;
	position: relative;
	background: linear-gradient(to bottom, var(--card-gradient-one) 30%, var(--card-gradient-two) 100%) border-box;
/*
	background: hsl(from var(--surface) h s l / 0.01);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
*/
	box-shadow: 0px 50px 30px rgba(1, 4, 9, 0.4),
				0px 30px 20px rgba(1, 4, 9, 0.5),
				0px 10px 10px rgba(1, 4, 9, 0.5);
}

.card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;

	border: var(--border-width) solid transparent;
	background: linear-gradient(to bottom, var(--border-one) 0%, var(--border-two) 100%) border-box;
	mask:	linear-gradient(black, black) border-box,
			linear-gradient(black, black) padding-box;
	mask-composite: subtract;
	pointer-events:none;


/*
 	--border-top: hsla(200.77deg, 15.34%, 32.42%, 1);
	--border-bottom: hsla(203.48deg, 17.48%, 22.71%, 1);
	background: linear-gradient(to bottom, var(--border-top) 30%, var(--border-bottom) 100%) border-box;
*/

}