:root {
	--color-primary: #0a66ad;
	--color-primary-dark: #183153;
	--color-accent-light: #ffe680;
	--color-accent: #ffd43b;
	--color-accent-dark: #fab004;
	--color-dark: #001c40;
	--color-black: #000000;
	/* --color-gray: #a5abbc; */
	--color-gray: #d7d7e3;
	--color-gray-dark: #7f8493;
	--color-gray-light: #f0f1f3;
	--color-gray-lightest: #f6f7fb;
	--color-success: #10d981;
	--color-success-light: #a3f7d1;
	--color-success-dark: #0ca678;
	--color-danger: #ff8787;
	--color-danger-light: #facfcf;
	--color-danger-dark: #e03131;
	--color-warning-light: #ffe680;
	--color-warning: #ffd43b;
	--color-warning-dark: #f08c00;
	--color-info-light: #a5d8ff;
	--color-info: #74c0fc;
	--color-info-dark: #1c7ed6;
	--color-white: #ffffff;

	--p-sm: 4px;
	--p: 8px;
	--p-md: 12px;
	--p-lg: 16px;
	--p-xl: 24px;
	--p-xxl: 28px;
	--r-sm: 2px;
	--r: 4px;
	--r-md: 6px;
	--r-lg: 10px;
	--r-xl: 14px;
	--r-xxl: 18px;
	--shadow-none: 0 0 transparent;
	--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.0125), 0 1px 2px rgba(0, 0, 0, 0.025);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.025), 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.07);
	--shadow-md: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 15px 25px rgba(0, 0, 0, 0.12), 0 5px 10px rgba(0, 0, 0, 0.05);

	--font-family-sans-serif:
		'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		Segoe UI Symbol, 'Noto Color Emoji';
	--font-family-mono:
		'GeistMono', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		Segoe UI Symbol, 'Noto Color Emoji';
	--font-family-logo:
		'BraahOne', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		Segoe UI Symbol, 'Noto Color Emoji';
}
/* 
* GLOBALS
*/
@font-face {
	font-family: 'Geist';
	src: url('../font/Geist.ttf') format('truetype');
}

@font-face {
	font-family: 'GeistMono';
	src: url('../font/GeistMono.ttf') format('truetype');
}
@font-face {
	font-family: 'BraahOne';
	src: url('../font/BraahOne-Regular.ttf') format('truetype');
}
* {
	box-sizing: border-box;
}
.logo-font {
	font-family: var(--font-family-logo);
}
.borderless {
	border-width: 0 !important;
}
button {
	appearance: none;
	cursor: pointer;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: none;

	/* Appearance */
	background: none;
	background-color: transparent;
	color: inherit;

	/* Typography */
	font: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: inherit;
	text-decoration: none;

	/* Display */
	display: inline-block;
	cursor: pointer;
}
input {
	/* Remove default styling */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	/* Reset border */
	border: none;
	outline: none;

	/* Reset background */
	background: none;
	background-color: transparent;

	/* Reset padding and margin */
	padding: 0;
	margin: 0;

	/* Reset font */
	font: inherit;
	color: inherit;

	/* Reset other properties */
	box-shadow: none;
	border-radius: 0;
}

/* Also remove focus styles */
input:focus {
	outline: none;
	box-shadow: none;
}

body {
	background: var(--color-gray-light);
	border-width: 0;
	padding: 0;
	margin: 0;
	font-family: var(--font-family-sans-serif);
}

.tone-primary {
	border-color: var(--color-primary-dark) !important;
	background-color: var(--color-primary);
	color: var(--color-white);
}
.tone-accent {
	border-color: var(--color-accent-dark) !important;
	background-color: var(--color-accent);
	color: var(--color-dark);
}
.tone-success {
	border-color: var(--color-success-dark) !important;
	background-color: var(--color-success);
	color: var(--color-dark);
}
.tone-success-dark {
	border-color: var(--color-success-dark) !important;
	background-color: var(--color-success-dark);
	color: var(--color-dark);
}
.tone-danger {
	border-color: var(--color-danger-dark);
	background-color: var(--color-danger);
	color: var(--color-dark);
}
.tone-danger-dark {
	border-color: var(--color-danger-dark);
	background-color: var(--color-danger-dark);
	color: var(--color-dark);
}
.tone-warning {
	border-color: var(--color-warning-dark);
	background-color: var(--color-warning);
	color: var(--color-dark);
}
.tone-info {
	border-color: var(--color-info-dark);
	background-color: var(--color-info);
	color: var(--color-dark);
}
.tone-primary-dark {
	border-color: var(--color-dark) !important;
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

/** TOASTS */
#toasts {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9999;
	margin: var(--p-md);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	/* width: 100%; */
	gap: var(--p);
	overflow: visible;
}
.toast {
	background: var(--color-black);
	padding: 0;
	padding: 0 var(--p-xl);
	color: var(--color-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--p);
	opacity: 0;
	animation: fadeInUpFadeOut 5s ease-in-out forwards;
	z-index: 9999;
	min-width: 200px;
}
.toast .title {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--p);
	font-weight: 500;
	font-size: 14px;
	justify-content: flex-end;
	width: 100%;
}
.toast .description {
	font-size: 12px;
	font-weight: 400;
	opacity: 0.9;
}
.toast .close {
	position: absolute;
	top: var(---md);
	right: var(--p-md);
	color: inherit;
}
.toast .tone-indicator {
	width: 20px;
	height: 20px;
	border-radius: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.toast .tone-indicator:before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
}
.toast .tone-indicator.tone-success:before {
	transform: translateX(-1px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
}
.toast .tone-indicator.tone-danger:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}
.toast .tone-indicator.tone-warning:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0zM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
}

/** DEV TOAST DRAWER */
#dev-toast-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999900000;
	width: 320px;
	max-height: 420px;
	background: rgba(10, 10, 10, 0.92);
	color: #e0e0e0;
	font-family: monospace;
	font-size: 11px;
	border-top-right-radius: 8px;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(6px);
	box-shadow: 2px -2px 12px rgba(0, 0, 0, 0.5);
}
.dev-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #aaa;
	flex-shrink: 0;
}
.dev-drawer-clear {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ccc;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 10px;
	cursor: pointer;
	font-family: monospace;
}
.dev-drawer-clear:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
#dev-toast-list {
	overflow-y: auto;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.dev-toast-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dev-toast-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	user-select: none;
}
.dev-toast-summary:hover {
	background: rgba(255, 255, 255, 0.05);
}
.dev-toast-ts {
	color: #666;
	flex-shrink: 0;
}
.dev-toast-tone {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 3px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.1);
	color: #aaa;
}
.dev-toast-tone.tone-success {
	background: rgba(34, 197, 94, 0.2);
	color: #4ade80;
}
.dev-toast-tone.tone-danger,
.dev-toast-tone.tone-danger-dark {
	background: rgba(239, 68, 68, 0.2);
	color: #f87171;
}
.dev-toast-tone.tone-warning {
	background: rgba(234, 179, 8, 0.2);
	color: #facc15;
}
.dev-toast-tone.tone-primary,
.dev-toast-tone.tone-primary-dark {
	background: rgba(99, 102, 241, 0.2);
	color: #a5b4fc;
}
.dev-toast-tone.tone-accent {
	background: rgba(236, 72, 153, 0.2);
	color: #f9a8d4;
}
.dev-toast-tone.tone-info {
	background: rgba(14, 165, 233, 0.2);
	color: #7dd3fc;
}
.dev-toast-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #ddd;
}
.dev-toast-detail {
	padding: 6px 10px 8px;
	background: rgba(255, 255, 255, 0.03);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dev-toast-description {
	margin: 0 0 4px;
	color: #bbb;
	line-height: 1.5;
}
.dev-toast-details {
	margin: 0;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	color: #90e0a0;
	font-size: 10px;
	overflow-x: auto;
	white-space: pre;
}

.input-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
}

input[type='text'],
input[type='email'],
input[type='password'] {
	display: block;
	margin-bottom: 0;
	border: 1px solid var(--color-gray-dark);
	font-size: 20px;
	border-radius: 4px;
	padding: 8px;
	flex-grow: 1;
	width: 100%;
}
input:disabled {
	background-color: var(--color-gray);
}
input.invalid {
	border-color: var(--color-danger);
	background: var(--color-danger-light);
}
.container {
	display: flex;
	flex-direction: column;
	padding: 0 var(--p-xl);
	max-width: 750px;
	width: 100%;
	gap: var(--p-xl);
	margin: 0 auto;
}
.w-100 {
	width: 100%;
}
@keyframes fadeInUpFadeOut {
	0% {
		padding-bottom: 0;
		padding-top: 0;
		opacity: 0;
		transform: translateY(-40px); /* Adjust the distance as needed */
	}
	10% {
		padding-bottom: var(--p-md);
		padding-top: var(--p-md);
		/* height: fit-content; */
		opacity: 1;
		transform: translateY(0);
	}
	90% {
		opacity: 1;
		transform: translateY(0);
	}
	99% {
		padding-bottom: var(--p-md);
		padding-top: var(--p-md);
		opacity: 0;
		transform: translateY(-40px);
	}
	100% {
		/* padding-bottom: var(--p-md); */
		/* padding-top: var(--p-md); */
		display: none;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px); /* Adjust the distance as needed */
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.desktop-only {
	display: none !important;
}
.mobile-only {
	display: flex !important;
}
@media (min-width: 992px) {
	.desktop-only {
		display: flex !important;
	}
	.mobile-only {
		display: none !important;
	}
}

/* SEARCH */
.search-outter {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	background-color: var(--color-gray);
	padding: var(--p-sm) var(--p-md);
	border-radius: var(--r);
}
.search-outter {
	flex-grow: 1;
	justify-content: flex-start;
	border-bottom-width: 0;
}
.search-outter input {
	flex-grow: 1;
}

/* Hide reCAPTCHA badge (attribution must be shown in UI per Google's terms) */
.grecaptcha-badge {
	display: none !important;
}

#back-button {
	line-height: 1;
	height: 28px;
	width: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray);
	border-radius: 1000px;
}