/* CSS Document */

/* =========================================================
   TABELL – AVGIFTER
========================================================= */

.tabellavgift-wrapper {
	overflow-x: auto;

	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 22px;

	background: rgba(255, 255, 255, 0.045);

	box-shadow:
		0 25px 70px rgba(0, 0, 0, 0.20);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


/* Selve tabellen */

.tabellavgift {
	width: 100%;
	margin: 0;

	border-collapse: collapse;

	color: rgba(255, 255, 255, 0.74);

	background: transparent;
}


/* Tabellhode */

.tabellavgift thead {
	background: rgba(255, 255, 255, 0.045);
}

.tabellavgift thead th {
	padding: 20px 18px;

	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);

	color: #FFFFFF;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.07em;

	white-space: nowrap;
}

.tabellavgift-subtitle {
	display: block;

	margin-top: 4px;

	color: rgba(255, 255, 255, 0.45);

	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}


/* Tabellrader */

.tabellavgift tbody tr {
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.tabellavgift tbody tr:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tabellavgift tbody tr:hover {
	background: rgba(255, 255, 255, 0.045);
}


/* Tabellceller */

.tabellavgift tbody td {
	padding: 18px;

	border: 0;

	color: rgba(255, 255, 255, 0.68);

	font-size: 15px;
	line-height: 1.45;

	vertical-align: middle;
}

.tabellavgift tbody td:first-child strong {
	color: #FFFFFF;
	font-weight: 700;
}


/* Antall plasser */

.tabellavgift-plasser {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 34px;
	padding: 0 11px;

	border: 1px solid rgba(0, 229, 255, 0.18);
	border-radius: 999px;

	background: rgba(0, 229, 255, 0.08);
	color: #00E5FF;

	font-weight: 700;
}


/* Pris */

.tabellavgift-pris {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}


/* Knapp */

.tabellavgift-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.65rem 1.05rem;

	font-size: 12px;
	white-space: nowrap;
}


/* Tom tabell */

.tabellavgift-empty {
	padding: 35px !important;

	color: rgba(255, 255, 255, 0.55) !important;
	text-align: center;
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 767px) {

	.tabellavgift-wrapper {
		overflow: visible;

		border: 0;
		border-radius: 0;

		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.tabellavgift,
	.tabellavgift tbody,
	.tabellavgift tr,
	.tabellavgift td {
		display: block;
		width: 100%;
	}

	.tabellavgift thead {
		display: none;
	}

	.tabellavgift tbody tr {
		margin-bottom: 18px;
		padding: 18px;

		border: 1px solid rgba(255, 255, 255, 0.10) !important;
		border-radius: 18px;

		background: rgba(255, 255, 255, 0.045);

		box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.16);
	}

	.tabellavgift tbody tr:hover {
		background: rgba(255, 255, 255, 0.055);
	}

	.tabellavgift tbody td {
		display: grid;
		grid-template-columns: minmax(115px, 42%) 1fr;
		align-items: center;
		gap: 15px;

		padding: 10px 0;

		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.tabellavgift tbody td::before {
		content: attr(data-label);

		color: rgba(255, 255, 255, 0.45);

		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.07em;
	}

	.tabellavgift tbody td:last-child {
		padding-top: 16px;
		padding-bottom: 0;

		border-bottom: 0;
	}

	.tabellavgift tbody td:last-child::before {
		display: none;
	}

	.tabellavgift-knapp {
		width: 100%;
	}

	.tabellavgift-empty::before {
		display: none;
	}

}