/* poppins-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/poppins-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --color-primary: #b60000;
    --color-primary-light: #f0f0f0;
    --color-primary-border: #e0e0e0;

    --color-text: #111111;
    --color-text-muted: #333333;
    --color-text-strong: #374151;

	--color-stepper-border: #b60000;
	--color-stepper-text: #111111;
	--color-stepper-background: #ffffff;
	
	--color-stepper-active-text: #ffffff;
	--color-stepper-active-background: #b60000;
	
	--color-stepper-done-background: #F2F2F2;

    --color-bg: #f6f6f6;
    --color-card: #ffffff;

    --color-border: #ffffff;
	
	--color-input: #f2f2f2;
    --color-input-border: #e0e0e0;

    --color-slider-bg: #d7dde5;
    --color-slider-focus: rgba(15, 94, 168, 0.2);

    --color-image-placeholder: #e9eef3;
    --color-input-bg-alt: #f8fafc;

    --color-error-bg: #fff1f2;
    --color-error-text: #b42318;
    --color-error-border: #f3c7cd;

    --radius: 3px;
    --radius-sm: 3px;
}

* {
    box-sizing: border-box;
}

body {
  font-family : Poppins, sans-serif;
  font-size : 18px;
  text-align:left;
}

main.search-page {
    background-color: var(--color-card);
}
.search-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

img.logo {
	display:block;
	width:180px;
	height:auto;
	border:0;
	margin:20px auto -20px auto;
}

h1 {
	font-size: 65px;
	font-weight:300;
	text-align:center;
	color: var(--color-primary);
	line-height:70px;
}

h2 {
	font-size: 40px;
	font-weight:700;
	text-align:center;
	color: var(--color-text);
}

h3 {
	font-size: 20px;
	font-weight:700;
	text-align:center;
	color: var(--color-text);
}

p.intro-text {
	font-size:20px;
	font-weight:700;
	text-align:center;
	color: var(--color-text);
	margin-bottom:28px;
}

.application-stepper {
    display: flex;
	justify-content:center;
    gap: 20px;
    margin-bottom: 34px;
}

.stepper-item {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid var(--color-stepper-border);
	font-size:20px;
	font-weight:700;
    background: var(--color-stepper-background);
	color: var(--color-stepper-text);
    cursor: pointer;
}

.stepper-item.active {
    background: var(--color-stepper-active-background);
    color: var(--color-stepper-active-text);
}

.stepper-item.done {
    background: var(--color-stepper-done-background);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
	margin:4px 4px 4px 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    background: var(--color-card);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-card);
}

.btn-secondary {
    background: var(--color-card);
    color: var(--color-primary);
}

.btn-area {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.btn-area .btn {
	font-size:20px;
	font-weight:700;
}


.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
	font-size: 14px;
}

.form-group input[type="text"], .form-group input[type="email"] {
    width: 100%;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 16px;
    background: var(--color-card);
}


.results-error {
	padding: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

.error {
    border-color: var(--color-error-text);
}

.field-error {
    font-size: 13px;
    color: var(--color-error-text);
    margin-top: 4px;
}

.kiitos-section-box {
	max-width:650px;
	margin:auto;
	padding:10px;
}

@media (max-width: 640px) {
	
	body {
	  font-family : Poppins, sans-serif;
	  font-size : 16px;
	  text-align:left;
	}
	
	.search-page {
        padding: 10px 2px;
		border-radius:0;
    }
	
	img.logo {
		display:block;
		width:130px;
		height:auto;
		border:0;
		margin:10px auto -30px auto;
	}
	
	h1 {
		font-size: 38px;
		font-weight:300;
		text-align:center;
		color: var(--color-primary);
	}

	h2 {
		font-size: 25px;
		font-weight:700;
		text-align:center;
		color: var(--color-text);
	}

	h3 {
		font-size: 20px;
		font-weight:700;
		text-align:center;
		color: var(--color-text);
	}
	
	p.intro-text {
		font-size:16px;
		font-weight:700;
		text-align:center;
		color: var(--color-text);
		margin-bottom:28px;
		margin-right:10px;
		margin-left:10px;
	}
	
	.stepper-item {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 3px solid var(--color-stepper-border);
		font-size:18px;
		font-weight:700;
		background: var(--color-stepper-background);
		color: var(--color-stepper-text);
		cursor: pointer;
	}
	
	.btn {
        width: 100%;
    }
	
	div.btn-area {
		padding:0 16px;
	}
	
}