:root {
				/* Fonts */
				--font-family: "Open Sans", sans-serif;
				--font-size-body: 12px;
				--font-size-label: 14px;
				--font-size-test-notice: 12px;
				--font-size-input: 14px;
				--font-size-header: 20px;
				--font-size-paragraph: 14px;
				--font-size-link: 12px;
				--font-size-error: 12px;
				--font-size-html-h1: 28px;
				--font-size-html-h2: 20px;
				--font-size-html-h3: 16px;
				--font-size-html-h4: 14px;
				--font-size-html-h5: 12px;
				--font-size-html-h6: 10px;

				/* Colors */
				--color-background: #fbfcfe;
				--color-test-notice-text: #e6a23d;
				--color-test-notice-bg: #fefaf6;
				--color-test-notice-border: #f6dcb7;
				--color-card-bg: #ffffff;
				--color-card-border: #dbdfe7;
				--color-card-shadow: rgba(99, 77, 255, 0.06);
				--color-link: #7e8186;
				--color-header: #525356;
				--color-label: #555555;
				--color-input-border: #dbdfe7;
				--color-input-text: #71747A;
				--color-input-bg: #ffffff;
				--color-focus-border: rgb(90, 76, 194);
				--color-submit-btn-bg: #ff6d5a;
				--color-submit-btn-text: #ffffff;
				--color-error: #ea1f30;
				--color-required: #ff6d5a;
				--color-clear-button-bg: #7e8186;
				--color-html-text: #555;
				--color-html-link: #FF6D5A;

				/* Border Radii */
				--border-radius-card: 8px;
				--border-radius-input: 6px;
				--border-radius-clear-btn: 50%;

				/* Spacing */
				--padding-container-top: 24px;
				--padding-card: 24px;
				--padding-test-notice-vertical: 12px;
				--padding-test-notice-horizontal: 24px;
				--margin-bottom-card: 16px;
				--padding-form-input: 12px;

				/* Dimensions */
				--container-width: 448px;
				--submit-btn-height: 48px;
				--checkbox-size: 18px;

				/* Others */
				--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);
				--opacity-placeholder: 0.5;
			}

			*,
			::after,
			::before {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			body {
				font-family: var(--font-family);
				font-weight: 400;
				font-size: var(--font-size-body);
				display: flex;
				flex-direction: column;
				justify-content: start;
				background-color: var(--color-background);
			}

			.container {
				margin: auto;
				text-align: center;
				padding-top: var(--padding-container-top);
				width: var(--container-width);
			}

			.test-notice {
				padding: var(--padding-test-notice-vertical) var(--padding-test-notice-horizontal);
				color: var(--color-test-notice-text);
				background-color: var(--color-test-notice-bg);
				border-radius: var(--border-radius-card);
				border: 1px solid var(--color-test-notice-border);
				font-size: var(--font-size-test-notice);
				font-weight: 400;
				line-height: 16px;
				text-align: left;
				margin-bottom: var(--margin-bottom-card);
			}

			.card {
				padding: var(--padding-card);
				background-color: var(--color-card-bg);
				border: 1px solid var(--color-card-border);
				border-radius: var(--border-radius-card);
				box-shadow: var(--box-shadow-card);
				margin-bottom: var(--margin-bottom-card);
			}

			.n8n-link {
				padding-bottom: var(--padding-container-top);
			}
			.n8n-link a {
				color: var(--color-link);
				font-weight: 600;
				font-size: var(--font-size-link);
				text-decoration: none;
			}

			.n8n-link svg {
				display: inline-block;
				vertical-align: middle;
			}

			.form-header h1 {
				color: var(--color-header);
				font-size: var(--font-size-header);
				font-weight: 400;
			}

			.form-header p {
				padding-top: 8px;
				color: var(--color-link);
				font-size: var(--font-size-paragraph);
				font-weight: 400;
			}

			.inputs-wrapper {
				padding-top: var(--padding-container-top);
				padding-bottom: var(--padding-container-top);
			}

			form label {
				display: block;
				text-align: left;
				font-size: var(--font-size-label);
				font-weight: 600;
				color: var(--color-label);
				padding-bottom: 6px;
			}

			form textarea {
				max-width: 100%;
			}

			form .form-input {
				border: 1px solid var(--color-input-border);
				border-radius: var(--border-radius-input);
				width: 100%;
				font-size: var(--font-size-input);
				color: var(--color-input-text);
				background-color: var(--color-input-bg);
				font-weight: 400;
				padding: var(--padding-form-input);
			}

			form textarea:focus,
			form input:focus {
				outline: none;
				border-color: var(--color-focus-border);
			}

			.select-input {
				border: 1px solid var(--color-input-border);
				border-radius: var(--border-radius-input);
			}

			.select-input:focus-within {
				border: 1px solid var(--color-focus-border);
			}

			form select {
				outline: transparent;
				border: none;
				border-radius: var(--border-radius-input);
				width: 100%;
				font-size: var(--font-size-input);
				color: var(--color-input-text);
				font-weight: 400;
				background-color: var(--color-card-bg);
				padding: var(--padding-form-input);
				border-right: 12px solid transparent;
			}

			input[type='date'] {
				font-family: var(--font-family);
			}

			::placeholder {
				opacity: var(--opacity-placeholder);
			}

			#submit-btn {
				width: 100%;
				height: var(--submit-btn-height);
				padding: var(--padding-form-input);
				border-radius: var(--border-radius-input);
				border: 0;
				font-size: var(--font-size-input);
				font-weight: 600;
				font-family: var(--font-family);
				background-color: var(--color-submit-btn-bg);
				color: var(--color-submit-btn-text);
				cursor: pointer;
			}

			#submit-btn span {
				padding-right: 6px;
				display: none;
			}

			#submit-btn span svg {
				display: inline-block;
				vertical-align: middle;
				fill: var(--color-submit-btn-text);
				animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
			}

			@keyframes lds-ring {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}

			#submit-btn:hover {
				opacity: 0.7;
			}

			.error-hidden {
				display: block;
				position: relative;
				color: var(--color-error);
				text-align: left;
				font-size: var(--font-size-error);
				font-weight: 400;
				visibility: hidden;
				padding-top: 6px;
				padding-bottom: 9px;
			}

			.error-show {
				visibility: visible;
			}

			/* multiselect ----------------------------------- */
			.multiselect {
				padding-left: 6px;
				padding-right: 6px;
			}

			.multiselect-option {
				padding-top: 6px;
				display: flex;
			}

			.multiselect-option label {
				padding-left: 12px;
				color: var(--color-link);
				font-weight: 400;
				cursor: pointer;
			}

			.multiselect-checkbox {
				vertical-align: middle;
				min-width: var(--checkbox-size);
			}

			input[type='checkbox'] {
				appearance: none;
				width: var(--checkbox-size);
				height: var(--checkbox-size);
				border: 1px solid var(--color-input-border);
				border-radius: 3px;
				cursor: pointer;
				position: relative;
			}
			.multiselect-checkbox:checked {
				background: var(--color-focus-border);
				border-color: var(--color-focus-border);
			}
			.multiselect-checkbox:checked::after {
				content: '✔';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-size: var(--font-size-label);
				font-weight: bold;
			}

			.multiselect[data-radio-select] .multiselect-checkbox {
				border-radius: 50%;
				width: var(--checkbox-size);
				height: var(--checkbox-size);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.multiselect[data-radio-select] .multiselect-checkbox:checked {
				background: white;
				border-color: var(--color-focus-border);
				border-width: 4px;
				border-radius: 50%;
			}
			.multiselect[data-radio-select] .multiselect-checkbox:checked::after {
				content: '';
			}
			/* required field ----------------------------- */
			.form-required {
			}
			label.form-required::after {
				content: ' *';
				color: var(--color-required);
			}

			hr {
				border: 0;
				height: 1px;
				border-top: 1px solid var(--color-input-border);
				margin-top: 24px;
				margin-bottom: 24px;
				display: none;
			}

			.file-input-wrapper {
				position: relative;
				display: inline-block;
				width: 100%;
			}
			input[type="file"] {
			}
			.clear-button {
				position: absolute;
				right: 5px;
				top: 50%;
				transform: translateY(-65%);
				background-color: var(--color-clear-button-bg);
				border: none;
				border-radius: var(--border-radius-clear-btn);
				font-size: 14px;
				font-weight: 600;
				font-family: var(--font-family);
				color: white;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
				display: none;
			}
			input[type="file"]:not(:empty) + .clear-button {
				display: inline-block;
			}

			div.html {
				text-align: left;
				color: var(--color-html-text);
				font-size: var(--font-size-input);
			}
			div.html h1, div.html h2, div.html h3, div.html h4, div.html h5, div.html h6, div.html p, div.html ul, div.html ol, div.html a {
				font-weight: 400;
				font-style: normal;
				margin-bottom: 8px;
			}
			div.html li {
				margin-bottom: 8px;
				margin-left: 24px;
			}
			div.html ul, div.html ol {
				font-size: var(--font-size-input);
				display: flex;
				flex-direction: column;
				align-self: stretch;
				line-height: normal;
			}
			div.html b {
				font-weight: 600;
			}
			div.html h1 {
				font-size: var(--font-size-html-h1);
				line-height: 35px;
			}
			div.html h2 {
				font-size: var(--font-size-html-h2);
				line-height: 26px;
			}
			div.html h3 {
				font-size: var(--font-size-html-h3);
				line-height: 24px;
			}
			div.html h4 {
				font-size: var(--font-size-html-h4);
				line-height: 18px;
			}
			div.html h5 {
				font-size: var(--font-size-html-h5);
			}
			div.html h6 {
				font-size: var(--font-size-html-h6);
			}
			div.html p {
				margin-bottom: 8px;
			}
			div.html a {
				color: var(--color-html-link);
				font-size: var(--font-size-input);
			}

			@media only screen and (max-width: 500px) {
				body {
					background-color: var(--color-background);
				}
				hr {
					display: block;
				}
				.container {
					width: 95%;
					min-height: 100vh;
					padding: 24px;
					border: 0px solid var(--color-input-border);
					border-radius: 0px;
					box-shadow: 0px 0px 0px 0px #ffffff;
				}
				.card {
					padding: 0px;
					background-color: var(--color-card-bg);
					border: 0px solid var(--color-input-border);
					border-radius: 0px;
					box-shadow: 0px 0px 0px 0px #ffffff;
					margin-bottom: 0px;
				}
			}
		

				/* n8n Form Trigger: Pichwai background + neo-brutalist form.
   Paste into Form Trigger > Options > Custom Form Styling. */

:root {
  --cream:  #FBF6EA;
  --ink:    #1E1530;
  --pink:   #E58BB5;
  --crimson:#C8464F;
  --green:  #2F5D3A;
  --purple: #3B2A66;
  --gold:   #F2B84B;
  --bg-img: url("https://i.pinimg.com/736x/1c/9a/8d/1c9a8d75f5af6e2b8b3c964732d1afa3.jpg");
}

/* ---------- Page background: painting sits behind the form, flowers peek out above it ---------- */
html, body {
  min-height: 100vh;
  background-color: var(--cream) !important;
  background-image: var(--bg-img) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center top !important;
  background-size: auto 100vh !important;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif !important;
  color: var(--ink) !important;
}

@media (max-width: 800px) {
  html, body {
    background-size: auto 85vh !important;
  }
}

/* ---------- Form card ---------- */
.container, section {
  background: transparent !important;
}

form, .card, .form-card, #n8n-form {
  background: var(--cream) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 10px 10px 0 var(--ink) !important;
  padding: 28px !important;
  max-width: 520px !important;
  /* top margin leaves room so the flowers show above the card */
  margin: clamp(120px, 22.4vh, 224px) auto 40px !important;
  position: relative;
  z-index: 1;
}

/* ---------- Title / description ---------- */
h1, .form-header h1, #form-title {
  display: inline-block;
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 6px 14px;
  margin: 0 0 12px !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink) !important;
}

.form-header p, #form-description, p {
  font-weight: 500;
  color: var(--ink) !important;
}

/* ---------- Labels ---------- */
label, .form-label {
  display: block;
  margin: 18px 0 6px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--purple) !important;
}

/* ---------- Inputs ---------- */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="tel"], input[type="url"], input:not([type]),
select, textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  padding: 10px 12px !important;
  font: inherit !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: transform .08s, box-shadow .08s, background .08s;
}

input::placeholder, textarea::placeholder {
  color: #7a6f8f;
  font-weight: 500;
}

input:focus, select:focus, textarea:focus {
  background: #FFF3C9 !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--crimson) !important;
  border-color: var(--crimson) !important;
}

textarea { min-height: 110px; resize: vertical; }

/* ---------- Checkbox / radio ---------- */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--pink);
  box-shadow: inset 0 0 0 3px #fff, 3px 3px 0 var(--ink);
}

/* ---------- Submit button ---------- */
button, input[type="submit"], .btn, #submit-btn, .form-submit-button {
  display: block;
  width: 100%;
  margin-top: 26px !important;
  padding: 14px 18px !important;
  background: var(--crimson) !important;
  color: #fff !important;
  border: 4px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  font: inherit !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .08s;
}

button:hover, input[type="submit"]:hover, .btn:hover {
  background: var(--green) !important;
}

button:active, input[type="submit"]:active, .btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--ink) !important;
}

/* ---------- Errors / required marker / links ---------- */
.error, .error-message, [class*="error"] {
  display: inline-block;
  background: var(--crimson);
  color: #fff !important;
  border: 2px solid var(--ink);
  padding: 2px 8px;
  margin-top: 6px;
  font-weight: 700;
}

a { color: var(--purple) !important; font-weight: 700; text-decoration: underline 3px var(--pink); }

/* ---------- Footer ("form automated with n8n") ---------- */
.n8n-link, .form-footer, footer {
  background: var(--cream) !important;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 4px 10px;
  display: inline-block;
}
			

/* landing-page additions */
.error-hidden{background:transparent!important;border:0!important;color:var(--color-error)!important;padding:6px 0 9px!important;display:block!important}
.error-show{background:var(--crimson)!important;color:#fff!important;border:2px solid var(--ink)!important;padding:2px 8px!important;display:inline-block!important}
#submit-btn:disabled{opacity:.6;cursor:wait}
#form-error{display:none;margin-top:14px;text-align:left}