/* originele kleuren */
/*
:root {
	--bg: #a3bcff;
	--black: #000;
	--white: #fff;
	--yellow: #ffd600;

	--success: #2a9d8f;
	--success-text: #fff;
	--warning: #f9c74f;
	--warning-text: #000;
	--danger: #e63946;
	--danger-text: #fff;
} */

:root {
	/* Kleuren */
	--bg: #e1e1e1;
	--black: #0e0e0e;
	--white: #7d7f7d;
	--yellow: #ff6f20;

	/* Status Kleuren */
	--success: #2a9d8f;
	--success-text: #fff;
	--warning: #f9c74f;
	--warning-text: var(--black);
	--danger: #e63946;
	--danger-text: #fff;

	/* Afmetingen & Stijl */
	--mb: 1.875em;
	--max-width: 46ch;
	--border: 4px solid var(--black);
	--border-thin: 3px solid var(--black);
	--shadow: 8px 8px 0px var(--black);
	--shadow-md: 6px 6px 0px var(--black);
	--shadow-sm: 4px 4px 0px var(--black);
}

* {
	box-sizing: border-box;
}
html,
body {
	padding: 0;
	margin: 0;
}

body {
	background: var(--bg);
	font-family: "Arial Black", sans-serif;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	padding-inline: 15px;
}

header {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 80ch;
	flex: 1;
}

#resultsContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

form {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

/* Zoekbalk Fix */
.search-input {
	width: calc(100% - 10px);
	/* Ruimte voor de schaduw */
	padding: 1em;
	border: var(--border);
	box-shadow: var(--shadow-md);
	font-size: 1.125rem;
	outline: none;
	display: block;
	margin-block: var(--mb);
}

input {
	background-color: inherit;
}

input::placeholder {
	font-weight: bold;
	text-transform: uppercase;
}

input:focus {
	background-color: #fff;
	border-color: var(--white);
}

/* Wis Knop */
.clear {
	text-align: center;
}

.clear-btn {
	display: inline-block;
	background: var(--yellow);
	color: var(--black);
	text-decoration: none;
	padding: 8px 15px;
	border: var(--border-thin);
	box-shadow: var(--shadow-sm);
	font-size: 0.75rem;
	text-transform: uppercase;
	width: 100%;
	max-width: var(--max-width);
}

.clear-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0px var(--black);
}

/* Animaties */
@keyframes fadeInUp {
	from {
		opacity: 0.5;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Kaarten */
.card {
	background: var(--white);
	border: var(--border);
	box-shadow: var(--shadow);
	width: calc(100% - 10px);
	max-width: var(--max-width);
	margin-block: var(--mb);
	align-self: center;
	text-align: end;
	animation: fadeInUp 0.5s ease-out;

	&.not-found {
		padding: 20px;
		text-align: center;
		background: #ff4136;
	}
}

.category-tag {
	background: var(--black);
	color: var(--bg);
	display: inline-block;
	padding: 5px 10px;
	font-size: 0.625rem;
	text-transform: uppercase;
	margin: 10px;
	text-decoration: none;
}

.product-title {
	padding: 0 15px 15px 15px;
	font-size: 1.125rem;
	border-bottom: var(--border);
	word-wrap: break-word;
	text-align: left;
	text-transform: uppercase;
}

.status-bar {
	padding: 12px;
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #eee;
}

.status-bar.success {
	background-color: var(--success);
	color: var(--success-text);
}

.status-bar.warning {
	background-color: var(--warning);
	color: var(--warning-text);
}

.status-bar.danger {
	background-color: var(--danger);
	color: var(--danger-text);
}

#scrollTopBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	background-color: var(--white);
	border: var(--border);
	padding: 12px;
	box-shadow: var(--shadow-sm);
	font-weight: bold;
}

.footer {
	text-align: center;
	height: auto;
	margin-top: 1em;

	& p {
		font-size: 1rem;
		font-weight: bold;
		color: var(--black);
	}
}

/* Offline styles */
.offline {
	padding: 20px;
	text-align: center;
	background: var(--white);
	transform: rotate(-5deg);
	margin: auto 0;
	background-color: var(--yellow);
}
.retry-btn {
	display: inline-block;
	background: var(--warning);
	color: var(--black);
	text-decoration: none;
	padding: 8px 15px;
	border: var(--border-thin);
	box-shadow: var(--shadow-sm);
	font-size: 0.75rem;
	text-transform: uppercase;
	width: 100%;
	max-width: var(--max-width);
}

.clear-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0px var(--black);
}

.progress-container {
	width: 100%;
	height: 10px;
	border: var(--border-thin);
	margin-top: 20px;
}

.progress-bar {
	height: 100%;
	background: var(--warning);
	width: 0%;
}

/* Geschiedenis Titel */
.history-title {
	text-align: center;
	font-size: 0.75rem;
	font-weight: bold;
	margin-bottom: 5px;
	display: none;
}

/* Zoekgeschiedenis */
.history-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: var(--mb);
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
}

.history-tag {
	background: var(--warning);
	color: var(--warning-text);
	border: var(--border-thin);
	box-shadow: var(--shadow-sm);
	padding: 5px 10px;
	font-size: 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
}

.history-tag:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0px var(--black);
}