@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;700&family=Mitr:wght@500&display=swap');

* {
	font-family: hind, sans-serif;
}

body {
	margin: 0;
	padding: 20px;
	background-color: #f4f4f4;
}

h1 {
	color: #20a338;
	font-family: Mitr;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	font-size: 2.5em;
}

h2 {
	font-family: Mitr;
	font-weight: 500;
}

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: space-evenly;
	gap: 20px;
}

form,
#result {
	background: white;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	flex: 1 1 0;
	min-width: 300px;
}

#result {
	color: white;
	background-color: rgb(47, 47, 47);
	label,
	textarea {
		color: white;
		background-color: rgb(47, 47, 47);
	}
	textarea {
		outline: none;
		border: 1px solid rgb(87, 87, 87);
	}
	hr {
		border: 1px solid rgb(87, 87, 87);
		margin: 2em 0;
	}
}

label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}

input[type='text'],
input[type='number'],
input[type='date'],
textarea,
.ql-container {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: #fff;
}

textarea {
	resize: none;
	overflow: hidden; /* Hide scrollbars */
	transition: height 0.1s ease;
	min-height: 3em;
	word-break: break-all;
	font-size: 1.05rem;
	font-family: monospace;
	field-sizing: content;
}

button,
a.button {
	background-color: #20a338;
	color: white;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	display: inline-block;
	text-transform: uppercase;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-top: 10px;
}

button:disabled,
button.disabled,
a.disabled {
	background-color: #666;
	color: rgb(47, 47, 47);
	cursor: pointer;
	pointer-events: none;
}

button:not(.disabled):hover,
a.button:not(.disabled):hover {
	background-color: #77b843;
}

.form-hint {
	display: block;
	margin-top: -15px;
	margin-bottom: 15px;
	color: #666;
	font-size: 0.85em;
}

input:user-invalid,
#editorContainer.user-invalid > div {
	border-color: rgb(240, 74, 91);
}

input:user-valid,
#editorContainer.user-valid > div {
	border-color: #20a338;
}

input:focus,
textarea:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(17, 151, 12, 0.25);
}

.ql-editor {
	font-size: 16px;
	position: relative;
	--padding: 10px;
	padding: var(--padding);
	&.ql-blank::before {
		inset: var(--padding);
	}
}

.ql-toolbar {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.ql-formats button {
	margin-top: 0;
}

.ql-container {
	border-radius: 0 0 4px 4px;
	font-family: inherit;
	border-top: none;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
	background: #20a338;
	color: white;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow
	.ql-toolbar
	.ql-picker-label:hover
	.ql-stroke-miter,
.ql-snow.ql-toolbar
	.ql-picker-label.ql-active
	.ql-stroke-miter,
.ql-snow
	.ql-toolbar
	.ql-picker-label.ql-active
	.ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar
	.ql-picker-item.ql-selected
	.ql-stroke-miter,
.ql-snow
	.ql-toolbar
	.ql-picker-item.ql-selected
	.ql-stroke-miter {
	stroke: white;
}

#preview {
	margin-bottom: 20px;
}

pre,
pre * {
	font-family: monospace;
	font-size: 1.05rem;
}

/* JavaScript Object Syntax Highlighting */
.js-object-output {
	color: #e0e0e0;
	background-color: #2f2f2f;
	padding: 15px;
	border-radius: 4px;
	margin: 0;
	line-height: 1.5;
	display: block;
	width: 100%;
	counter-reset: line;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	counter-reset: line;
	max-width: 100%;
	box-sizing: border-box;
	background: rgb(0 0 0 / 22%);
	border-radius: 15px;
}

/* Line numbers (optional) */
.js-object-output .line:before {
	counter-increment: line;
	content: counter(line);
	counter-increment: line;
	display: inline-block;
	width: 2em;
	margin-right: 1em;
	color: #666;
	font-size: 0.9em;
	text-align: right;
	opacity: 0.5;
}

/* Basic syntax elements */
.js-object-output .open-brace,
.js-object-output .close-brace,
.js-object-output .open-bracket,
.js-object-output .close-bracket {
	color: #f8c555;
	font-weight: bold;
}

.js-object-output .indent {
	color: transparent;
}

/* Object keys */
.js-object-output .key {
	color: white; /* Matches your theme green in a lighter shade */
	font-weight: normal;
}

/* Punctuation */
.js-object-output .colon-mark,
.js-object-output .comma-mark {
	color: #cecece;
}

/* String values */
.js-object-output .quote-mark {
	color: #a1a1a1;
}

.js-object-output .string {
	color: #aded79;
}

/* Additional value types */
.js-object-output .number {
	color: rgb(134, 243, 239);
}

.js-object-output .boolean {
	color: #ff7b72;
	font-weight: bold;
}

.js-object-output .null,
.js-object-output .undefined {
	color: #d2a8ff;
	font-style: italic;
}

/* Special elements */
.js-object-output .circular {
	color: #ff7b72;
	font-style: italic;
}

.js-object-output .max-depth {
	color: #d2a8ff;
	font-style: italic;
}

/* Hover effect for easier reading */
.js-object-output .line:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* Offers Multi-select Component */
.multi-select-field {
	margin-bottom: 20px;

	.input-wrapper,
	.multi-select-input-wrapper {
		position: relative;

		.input-display {
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 0;

			&:focus {
				outline: none;
				box-shadow: 0 0 0 3px
					rgba(17, 151, 12, 0.25);
			}
		}
		.input-list {
			--radius: 4px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background: white;
			border-radius: var(--radius);
			border: 1px solid #ccc;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			z-index: 1000;
			overflow: hidden;
			display: none;

			&.active {
				display: block;
			}

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
				border-radius: var(--radius) var(--radius) 0
					0;
				border-bottom: 1px solid #eee;
				background-color: #f9f9f9;

				.search-field {
					margin-bottom: 0;
				}
				.clear-search {
					margin-top: 0;
					aspect-ratio: 1;
					width: 43.5px;
					background: transparent;
					color: black;
					position: absolute;
					right: 0;
					box-sizing: content-box;
					padding: 10px;

					&.hidden {
						display: none;
					}
				}
			}
			.body,
			.options-list {
				padding: 10px;
				max-height: 30vh;
				overflow-y: scroll;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				flex-wrap: nowrap;
				gap: 5px;
				align-items: flex-start;

				label {
					margin-bottom: 0;
				}

				.checkbox-wraper {
					display: flex;
					align-items: center;
					padding: 6px 0;

					input[type='checkbox'] {
						margin-right: 10px;
					}
				}
				&.filtered {
					.checkbox-wraper {
						opacity: 0.3;
						&.found {
							opacity: 1;
							color: #20a338;
						}
						&:has(:checked) {
							opacity: 1;
						}
					}
				}
			}
			.actions {
				display: flex;
				gap: 1px;

				button {
					margin: 0;
					background-color: #e9e9e9;
					color: #353535;
					border-radius: 0;

					&:hover {
						background-color: #353535;
						color: #e9e9e9;
					}

					&:first-child {
						border-radius: 0 0 0 var(--radius);
					}

					&:last-child {
						border-radius: 0 0 var(--radius) 0;
					}

					&.apply {
						&:hover {
							background-color: #20a338;
							color: white;
						}
					}
					&.cancel {
						&:hover {
							background-color: #e63939;
							color: white;
						}
					}
				}
			}
		}
	}
}

select {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: #fff;
	appearance: none; /* Remove default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 24px;
	padding-right: 35px; /* Make room for the custom arrow */
	cursor: pointer;
}

/* Match your existing focus states */
select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(17, 151, 12, 0.25);
	border-color: #20a338;
}

/* Hover effect */
select:hover,
input:hover {
	border-color: #20a338;
}

/* Match your validation states */
select:user-invalid {
	border-color: rgb(240, 74, 91);
}

select:user-valid {
	border-color: #20a338;
}

/* Style for the dropdown items (limited browser support) */
select option {
	padding: 8px;
	font-size: 1em;
}

/* For disabled state */
select:disabled {
	background-color: #f4f4f4;
	color: #888;
	cursor: not-allowed;
	border-color: #ddd;
}

/* Add these styles for improved fieldset appearance */

fieldset {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 25px;
	background-color: #fcfcfc;
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

legend {
	font-family: Mitr, sans-serif;
	font-weight: 500;
	color: #20a338;
	padding: 0 10px;
	background-color: white;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	font-size: 1.1em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Add subtle hover effect to fieldsets */
fieldset:hover {
	border-color: #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Style the heading inside fieldset */
fieldset h2 {
	margin-top: 0;
	font-size: 1.3em;
	color: #333;
}

/* Add a bit more spacing to the last element in the fieldset */
fieldset > *:last-child {
	margin-bottom: 0;
}

/* Adjust the dark theme result section to match */
#result {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}