/* ///////////////////////
 *
 * VARIABLES
 *
 * ///////////////////////
*/

#tfs {
	--tm_form_steps__green:				#004f9f;
	--tm_form_steps__gray:				#888;
	--tm_form_steps__red:				#e20613;
	--tm_form_steps__on-red:			white;
	--tm_form_steps__card_background:	white;
	--tm_form_steps__base_size:			15px;
}


/* ///////////////////////
 *
 * FOOTER / BUTTONS
 *
 * ///////////////////////
*/

#tfs__btns {
	margin-top: 1.5rem;
	display: flex;
	gap: 1rem;
}


/* ///////////////////////
 *
 * STEPS
 *
 * ///////////////////////
*/

#tfs__answers {
	/**
	 * Variables will be overwritten by javascript
	*/
	--grid-layout-gap: var(--tm_form_steps__base_size);
	--grid-column-count: 1;
	--grid-item--min-width: 100%;

	/**
	 * Calculated values
	*/
	--gap-count: calc(var(--grid-column-count) - 1);
	--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
	--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
	grid-gap: var(--grid-layout-gap);
}

#tfs__answers > h2,
#tfs__answers > p {
	grid-column: 1/-1; /* full width at grid */
}

#tfs__answers label {
	margin-bottom: 0.5rem;
}


/* ///////////////////////
 *
 * Scrolltargets
 *
 * ///////////////////////
*/

#tfs__btns {
	scroll-margin-bottom: 5rem;
}
#tfs__header {
	scroll-margin-top: 5rem;
}


/* ///////////////////////
 *
 * CARDS
 *
 * ///////////////////////
*/

.tfs_card {
	padding: 25px;
}

.tfs_card.tfs_elevated {
	box-shadow: 2px 2px 10px var(--tm_form_steps__gray);
}

.tfs_card.tfs_rounded {
	border-radius: var(--tm_form_steps__base_size);
}

.tfs_card {
	background-color: var(--tm_form_steps__card_background);
}

.tfs_card.tfs_checked {
	outline: 3px solid var(--tm_form_steps__green);
}


/* ///////////////////////
 *
 * FORM
 *
 * ///////////////////////
*/

form.tfs_card {
	display: grid;
	gap: var(--tm_form_steps__base_size);
	grid-template-columns: repeat(2, 1fr);
}

#tfs .tfs_input-width-full {
	grid-column: 1/-1; /* full width at grid */
}

#tfs .tfs_input input:not([type="checkbox"]) {
	width: 100%;
}

#tfs label {
	display: block;
}

#tfs .tfs_input--checkbox label {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	cursor: pointer;
}

#tfs input {
	position: relative;
}

#tfs .tfs_card.tfs_radio,
#tfs .tfs_card.tfs_checkbox {
	cursor: pointer;
	padding: 0;
	overflow: hidden;
}

#tfs .tfs_card.tfs_radio > p,
#tfs .tfs_card.tfs_checkbox > p {
	margin: var(--tm_form_steps__base_size);
	text-align: center;
}

#tfs .tfs_card.tfs_radio > img,
#tfs .tfs_card.tfs_checkbox > img {
	width: 100%;
}

.tfs_input input[type="checkbox"] + p {
	margin: 0;
}

#tfs input.tfs_check-failed::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	opacity: 0.5;
	background: var(--tm_form_steps__red);
}

#tfs .tfs_input_error {
	display: none;
	width: 100%;
	margin: 0.25rem 0 0 0;
	color: var(--tm_form_steps__red);
	font-weight: bold;
	font-size: 0.8rem;
}

#tfs .tfs_check-failed ~ .tfs_input_error {
	display: block;
}

@media (max-width: 499px) {
	.tfs_input {
		grid-column: 1/-1; /* full width at grid */
	}
}


/* ///////////////////////
 *
 * MESSAGES > Success
 *
 * ///////////////////////
*/

.tfs_success {
	display: inline-block;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: var(--tm_form_steps__green);
	color: white;
}

/* ///////////////////////
 *
 * HELPER
 *
 * ///////////////////////
*/

#tfs .tfs_hidden {
	display: none !important;
}

#tfs .tfs_clickable {
	cursor: pointer;
}