html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
	background-image: url('/images/CrossTalk_bg_alap.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-position-y: 4vh;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* Custom font for a slightly nicer look */
body {
	font-family: 'Inter', sans-serif;
}

navbar {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* Basic styling for messages */
.message-box {
	padding: 1rem;
	border-radius: 0.5rem;
	margin-top: 1rem;
	font-weight: 500;
}

	.message-box.success {
		background-color: #d4edda; /* Light green */
		color: #155724; /* Dark green */
		border: 1px solid #c3e6cb;
	}

	.message-box.error {
		background-color: #f8d7da; /* Light red */
		color: #721c24; /* Dark red */
		border: 1px solid #f5c6cb;
	}

	.message-box.info {
		background-color: #d1ecf1; /* Light blue */
		color: #0c5460; /* Dark blue */
		border: 1px solid #bee5eb;
	}
/* Spinner CSS */
.spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: #3b82f6; /* Blue */
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.logo {
	display: flex; /* Ensures image and text align */
	align-items: center;
	text-decoration: none;
	color: var(--primary-blue); /* Logo text color */
}

.logo-image {
	height: 5.4rem;
	margin-right: 10px; /* Space between logo image and text */
	vertical-align: middle; /* Align image with text baseline */
}

.logo-image-crosstalk {
	height: 2rem; /* Adjust as needed for your logo size */
	vertical-align: middle; /* Align image with text baseline */
}

.logo-text {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.page-heading {
	font-size: clamp(1.2rem, 1.4vw, 2.1rem);
	font-weight: 600;
	text-align: center;
}

/* Grid container */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
	gap: 1em;
	margin-top: 1.25rem;
	width: 100%;
	max-width: 65vw;
	color: white;
	justify-items: center;
}

/* Card base */
.stat-card {
	position: relative;
	background: #1095ff;
	border-radius: 2px;
	padding: 2.4rem 2rem 1.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
	transition: transform .25s ease, box-shadow .25s ease;
	overflow: hidden;
	height: 13rem;
	width: 25rem;
}

	.stat-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.18), transparent 60%), radial-gradient(circle at 85% 78%, rgba(255,255,255,.12), transparent 70%);
		pointer-events: none;
	}

	.stat-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 18px -6px rgba(0,0,0,.35);
	}

/* Light (first) variant */
.stat-card--light {
	background: #eef3f9;
	color: #1d4f80;
}

	.stat-card--light .stat-card__title {
		color: #2d5e8d;
	}

	.stat-card--light .stat-card__value {
		color: #2d5e8d;
	}

	.stat-card--light::before {
		background: none;
	}

/* Title */
.stat-card__title {
	font-size: 1.35rem;
	font-weight: 600;
	text-align: center;
	letter-spacing: .5px;
	position: relative;
	padding-bottom: .85rem;
	width: 100%;
	max-width: 330px;
}

	.stat-card__title::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 100%;
		height: 2px;
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 100%);
	}

.stat-card--light .stat-card__title::after {
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(60,87,110,.5) 30%, rgba(60,87,110,.5) 70%, rgba(0,0,0,0) 100%);
}

/* Value */
.stat-card__value {
	margin-top: 1.4rem;
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	letter-spacing: 1px;
}

/* Reduce size on very small screens */
@media (max-width: 480px) {
	.stat-card {
		padding: 1.8rem 1.4rem 1.4rem;
	}

	.stat-card__value {
		font-size: 2.4rem;
	}
}

/* Remove old unused stat styles */
.main_card, .stat_card, .stat_card_white, .stat_card_blue {
	all: unset;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}