#mktoStyleLoaded {
  color: #123456;
}

.mktoForm {
  --mkto--color--accent: var(--bs-primary, #1ac8c6);
  --mkto--color--base: var(--bs-white, #ffffff);
  --mkto--color--contrast: var(--bs-dark, #000000);
  --mkto--border--radius: 0.15rem;
  color: var(--mkto--color--contrast);
  accent-color: var(--mkto--color--accent);
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  font-size: var(--wp--preset--font-size--base, 1rem);
  width: 100% !important;
  font-family: "Archivo", sans-serif;

  
	& * {
		box-sizing: border-box;
		font-family: inherit;
		margin: 0;
		padding: 0;
	}

	.mktoFormRow {

		/*Prevents hidden fields from taking up space */
		&:has([type=hidden]) {
			display: none;
		}

		/* Moves HTML block to the end */
		&:has(.mktoHtmlText) {
			order: 1;
			font-size: 0.9em;
			line-height: 1.4;
		}
	}

	.mktoButtonRow {
		margin-block: 0.7rem;

		[type=submit] {
			appearance: none;
			background-color: var(--mkto--color--accent);
			color: var(--mkto--color--base);
			border-radius: var(--mkto--border--radius);
			border: none;
			padding: 0.8em 1.4em;
			cursor: pointer;
			transition: background-color .3s ease;
			width: 100%;
	
			&:is(:hover, :active, :focus) {
				background-color: color-mix(in srgb, var(--mkto--color--accent) 80%, var(--mkto--color--contrast));
			}
		}
	}

	.mktoClear,
	.mktoOffset,
	.mktoGutter {
		display: none;
	}

	.mktoError {
		color: var(--mkto--color--accent);
		background-color: color-mix(in srgb, var(--mkto--color--accent) 10%, transparent);
		padding: .5em;
		border-radius: var(--mkto--border--radius);
		border: 1px solid currentColor;
		font-size: .8em;
		margin-top: 1rem;
	}

	.mktoLabel {
		display: flex;
		gap: .2ch;
		font-weight: 600;
		padding-block: .3em;

		&:has( ~ .mktoRequired)::after {
			content: "*";
			color: var(--mkto--color--accent);
		}
	}

	.mktoFieldWrap {

		&:has( :is(.mktoRadioList , .mktoCheckboxList) > input:only-of-type ) {
			position: relative;
			background-color: color-mix(in srgb, currentColor 10%, transparent);
			padding: .4em .9em;
			border-radius: calc(var(--mkto--border--radius) * 2);
			border: 2px solid currentColor;
			display: flex; 
			align-items: center;
			margin-block: .5em;

			label {
				cursor: pointer;
				order: 1;
				font-size: .9em;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}

		& :is(.mktoRadioList, .mktoCheckboxList) {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			label {
				padding: .2em .6em .2em .3em;
				flex: 0 0 auto;
				font-weight: 600;
			}
		}

	}

	.mktoAsterix {
		display: none;
	}
	
	input[type=text],
	input[type=url],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	select,
	textarea {
		font-family: inherit;
		font-size: 0.9em;
		display: block;
		width: 100% !important;
		border-radius: var(--mkto--border--radius);
		border: 1px solid currentColor;
		padding: .6em !important;

		&:focus {
			outline-color: var(--mkto--color--accent);;
		}

		&::placeholder {
			opacity: .8;
			color: currentColor;
		}
	}

	select {
		appearance: none;
		background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='5' width='14.83' viewBox='0 0 14.83 8.47'><path d='M13.44,1.39l-5.45,5.45c-.32.32-.83.32-1.14,0L1.39,1.39' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' margin-right='10px' stroke-miterlimit='10' /></svg>") right 1ch center no-repeat;
	}

	textarea {
		resize: vertical;
		min-height: 6lh;
	}

	[type=checkbox],
	[type=radio] {
		background-color: var(--mkto--color--base);
		appearance: none;
		border-radius: 0.15em;
		margin: 0;
		font: inherit;
		color: currentColor;
		width: 1.15em;
		height: 1.15em;
		border: 2px solid currentColor;
		display: grid;
  		place-content: center;

		&:focus {
			outline-color: var(--mkto--color--accent);;
		}

		&:checked {
			background-color: var(--mkto--color--accent);
			box-shadow: inset 0 0 0 2px var(--mkto--color--base);
		}
	} 

	[type=radio] {
		border-radius: 50%;
	}
	
}