.vn3w {
	--vn3w-accent: #2a5fa5;
	--vn3w-ink: #1c3760;
	--vn3w-icon-bg: #f0f5fb;
	--vn3w-card-bg: #ffffff;

	background: #fcfcfc;
	border-radius: 5px 5px 0 0;
	filter: drop-shadow( 0 4px 2px rgba( 0, 0, 0, 0.25 ) );
	padding: 32px;
	margin: 0 0 24px;
}

/* ---- heading ---------------------------------------------------------- */

.vn3w__head {
	color: var( --vn3w-ink );
	font-family: "Metropolis", sans-serif;
	font-size: 24px;
	line-height: 38px;
	text-align: center;
	border-bottom: 1px solid #314158;
	padding-bottom: 6px;
	margin-bottom: 32px;
}

.vn3w__head p { margin: 0; }

.vn3w__head strong,
.vn3w__head b { font-weight: 800; }

.vn3w .vn3w__panel {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
	padding: 0;
}

.vn3w .vn3w__panel.active {
	display: block;
}

.vn3w:not(.tabsactive) .vn3w__panel:first-child {
	display: block;
}


.vn3w__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 208px ) );
	gap: 16px;
	justify-content: center;
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- card ------------------------------------------------------------- */

.vn3w__card {
	display: flex;
	flex-direction: column;
	background: var( --vn3w-card-bg );
	border: 2px solid var( --vn3w-accent );
	border-radius: 16px;
	overflow: hidden;
	min-height: 365px;
	margin: 0;
	padding: 0;
	transition: border-color 0.2s ease;
}

.vn3w__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --vn3w-icon-bg );
	padding: 13px 0 8px;
	width: 100%;
}

.vn3w__card-icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.vn3w__card-title {
	background: var( --vn3w-accent );
	color: #ffffff;
	font-family: "Metropolis", sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.35px;
	text-align: center;
	padding: 12px 20px;
	margin: 0;
	width: 100%;
	transition: background-color 0.2s ease;
}

/* ---- rows ------------------------------------------------------------- */

.vn3w__rows {
	list-style: none;
	margin: 0;
	padding: 4px 20px;
	width: 100%;
}

.vn3w__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	margin: 0;
	border-bottom: 1px solid color-mix( in srgb, var( --vn3w-accent ) 13%, transparent );
}

.vn3w__row:last-child { border-bottom: 0; }

.vn3w__row-icon {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.vn3w__row-icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.vn3w__row-text {
	font-family: "Metropolis", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var( --vn3w-ink );
}

/* ---- no location selected --------------------------------------------- */

/* Cancel the global .blurry blur — the block stays in full colour before a location is picked. */
.vn3w .vn3w__state.blurry {
	filter: none;
}

@media ( max-width: 767px ) {
	.vn3w { padding: 20px; }
	.vn3w__grid { grid-template-columns: minmax( 0, 208px ); }
	.vn3w__card { min-height: 0; }
	.vn3w__head { font-size: 20px; line-height: 30px; }
}