/*
	Newdesign was niet compleet qua inputs en styling
*/

.form-contact {
	--form_input-bg: #ffffff;
	--form_input-border: var(--color-gray);
	--form_input-border-focus: var(--color-orange);
	--form_input-text: var(--color-blue-200);
	--form_input-muted: var(--color-blue-150);
	--form_input-radius: 0;
	--form_input-height: 56px;
	--form_input-padding: 0 16px;
	font-family: inherit;
}

.width-xs {
	width: 2em !important;
}
.width-sm {
	width: 4em !important;
}
.width-md {
	width: 6em !important;
}
.width-lg {
	width: 8em !important;
}
.width-xl {
	width: 10em !important;
}
.width-20p {
	width: 20% !important;
}
.width-40p {
	width: 40% !important;
}
.width-60p {
	width: 60% !important;
}
.width-80p {
	width: 80% !important;
}
.width-100p {
	width: 100% !important;
}

.custom-field-trigger.is-invalid {
	border: 2px solid #d92d20 !important;
}

.custom-field-trigger.is-invalid:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15);
}

.custom-field-error-message {
	display: block;
	margin-top: 6px;
	color: #d92d20;
	font-size: 0.875rem;
	line-height: 1.35;
}

/* =======================
   TEXT INPUT
======================= */
.autocomplete-list li.is-highlighted {
	color: var(--color-orange);
	background: #f0f0f0;
}

/* =======================
   NUMBER INPUT
======================= */
.form_input-number {
	width: 100%;
	height: var(--form_input-height);
	padding: var(--form_input-padding);
	background: var(--form_input-bg);
	border: 1px solid var(--form_input-border);
	border-radius: var(--form_input-radius);
	font-size: 16px;
	color: var(--form_input-text);
	outline: none;
	text-align: left;
	font-variant-numeric: tabular-nums;
	box-shadow: inset 0 0 0 1px transparent;
}

/*.form_input-number::placeholder {*/
/*	color: var(--form_input-muted);*/
/*}*/

.form_input-number:focus-visible {
	border-color: var(--form_input-border-focus);
	box-shadow: 0 0 0 2px rgba(240, 140, 0, 0.25);
}

/* Remove default spinners */
.form_input-number::-webkit-outer-spin-button,
.form_input-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.form_input-number {
	-moz-appearance: textfield;
}
/* Improved placeholder styling (all inputs) */
.form_input-number::placeholder,
.form_input-date::placeholder {
	/*color: var(--color-blue-80);*/
	opacity: 1;
	/* prevent browser dimming */
	font-weight: 400;
}

.form_input-number:focus-visible {
	box-shadow:
	inset 0 0 0 1px transparent,
	0 0 0 2px rgba(240, 140, 0, 0.25);
}

/* =======================
   DATE INPUT
======================= */
.container-form_input-date {
	margin-top: 15px;
}

.label-form_input-date {
	display: inline-block;
}

.form_input-date {
	width: 100%;
	height: var(--form_input-height);
	padding: var(--form_input-padding);
	background: var(--form_input-bg);
	border: 1px solid var(--form_input-border);
	border-radius: var(--form_input-radius);
	font-size: 16px;
	color: var(--form_input-text);
	outline: none;
}

.form_input-date:focus-visible {
	border-color: var(--form_input-border-focus);
	box-shadow: 0 0 0 2px rgba(240, 140, 0, 0.25);
}

.form_input-date::-webkit-calendar-picker-indicator {
	opacity: 0.7;
	cursor: pointer;
}
/* =======================
   RADIO BUTTONS (SQUARE)
======================= */
/* Radio group layout */
.form_input-radio-group {
	display: grid;
	grid-template-columns: 1fr;
	/* default: 1 column */
	gap: 12px 32px;
}

/* Switch to two columns when there is enough space or many items */
@media (min-width: 600px) {
	.form_input-radio-group {
		grid-template-columns: 1fr 1fr;
	}
}
.form_input-radio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--form_input-text);
	cursor: pointer;
	user-select: none;
}

.form_input-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.form_input-radio span {
	position: relative;
	padding-left: 28px;
}

/* Square outer box */
.form_input-radio span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	border: 2px solid var(--form_input-border);
	background: #fff;
	transform: translateY(-50%);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Square inner indicator */
.form_input-radio span::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 10px;
	height: 10px;
	background: var(--color-orange);
	transform: translateY(-50%) scale(0);
	transition: transform 0.15s ease;
}

/* Checked state */
.form_input-radio input:checked + span::before {
	border-color: var(--color-orange);
	background: var(--color-blue-40);
}

.form_input-radio input:checked + span::after {
	transform: translateY(-50%) scale(1);
}

/* Focus state (WCAG friendly) */
.form_input-radio input:focus-visible + span::before {
	box-shadow: 0 0 0 3px rgba(240, 140, 0, 0.3);
}


/* =======================
   FILE UPLOAD
======================= */
.form-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
	width: 100%;
}

.form-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-blue-200);
	margin: 0 0 2rem 0;
}

.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-blue-200);
	margin: 0 0 1.5rem 0;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.form-group {
	width: 100%;
}

.form-input {
	width: 100%;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-blue-150);
	background-color: var(--color-blue-40);
	border: 2px solid transparent;
	border-radius: 8px;
	outline: none;
	transition: all 0.2s ease;
}

.form-input::placeholder {
	color: var(--color-gray);
}

.form-input:focus {
	background-color: #fff;
	border-color: var(--color-blue-60);
}

.file-upload-section {
	margin-top: 3rem;
}

.file-input-wrapper {
	margin-bottom: 1.5rem;
}

.file-input-hidden {
	display: none;
}

.file-input-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	background-color: var(--color-blue-40);
	border: 2px dashed var(--color-gray);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.file-input-label:hover {
	background-color: var(--color-blue-60);
	border-color: var(--color-blue-80);
}

.file-input-label.drag-over {
	background-color: var(--color-blue-60);
	border-color: var(--color-blue-100);
	transform: scale(1.01);
}

.upload-icon {
	color: var(--color-blue-150);
	margin-bottom: 1rem;
}

.file-input-text {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-blue-200);
	margin-bottom: 0.5rem;
}

.file-input-hint {
	font-size: 0.875rem;
	color: var(--color-orange);
}

.file-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 1rem 1.25rem;
	background-color: #fff;
	border: 1px solid var(--color-blue-60);
	border-radius: 8px;
	transition: all 0.2s ease;
}

.file-item:hover {
	box-shadow: 0 2px 8px rgba(5, 10, 80, 0.08);
}

.file-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 0;
}

.file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	line-height: 1;
	font-size: 1.25rem;
}

.file-details {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	line-height: 1.35;
	padding-block: 2px;
}

.file-name,
.file-size {
	display: block;
	line-height: 1.35;
}

.file-name {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-blue-200);
	overflow: clip;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 1rem;
}

.file-size {
	font-size: 0.85rem;
	color: var(--color-gray);
}

.file-remove {
	padding: 0.5rem;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	color: var(--color-gray);
	transition: all 0.2s ease;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.file-remove:hover {
	background-color: var(--color-blue-40);
	color: var(--color-orange);
}

.file-remove:focus {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.file-input-label.is-invalid {
  border-color: #d92d20;
  background-color: #fdecea;
}

.file-input-label.is-invalid:focus,
.file-input-label.is-invalid:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15);
}

@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	#app {
		padding: 1rem;
	}

	.form-title {
		font-size: 1.5rem;
	}

	.section-title {
		font-size: 1.25rem;
	}

	.file-input-label {
		padding: 2rem 1rem;
	}
}

.alert {
  padding: 16px 20px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Succes */
.alert--success {
  background-color: #e6f9f0;
  color: #1a7f4b;
  border-color: #b6eacb;
}

/* Error */
.alert--error {
  background-color: #fdecea;
  color: #b42318;
  border-color: #f5c2c0;
}

.js-custom-select {
  position: relative;
}

.js-custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
}

.custom-field-error-message {
  position: relative;
  z-index: 1;
}