:root {
	--slider-thumb-dimensions: 1rem;
}

div.main-content-container {
	min-height: 90vh;
}

div.text-watermark-form-container,
div.image-watermark-form-container {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

div.buttons-container {
	background-color: #faf9f8;
}

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

.form__item {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	width: unset;
	grid-template-columns: unset;
}

.form__item input,
.form__item select {
	min-width: 392px;
}

.field__input,
.select__field,
.select-wrapper {
	width: unset;
}

.imageUploaded {
	top: 50%;
	transform: translateY(-50%);
}

.imageUploaded.imageUploadedSuccess {
	right: 1rem;
	color: var(--text-success);
}

.imageUploaded.imageUploadedDelete {
	right: 12.5%;
}

div.loader-overlay-block {
	z-index: 120;
}

/* PDF Viewer */

div#viewer {
	height: 100%;
}

iframe#viewer-iframe {
	min-height: 68rem;
}

/* Slider */

.slider:hover {
	opacity: 1;
}

.slider {
	-webkit-appearance: none;
	height: 0.55rem;
	outline: none;
	opacity: 0.7;
	border: 1px solid darkgray;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--slider-thumb-dimensions);
	height: var(--slider-thumb-dimensions);
	border-radius: 50%;
	background: #04AA6D;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: var(--slider-thumb-dimensions);
	height: var(--slider-thumb-dimensions);
	border-radius: 50%;
	background: #04AA6D;
	cursor: pointer;
}

input[type=range]:focus {
	border: 1px solid var(--hl-primary);
	box-shadow: 0px 0px 0px 3px rgba(234, 246, 244, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}

.slider-value-container {
	top: -1.1rem;
	transform: translateX(-50%);
	display: inline-block;
	white-space: nowrap;
}

.slider-value-unit {
	margin-left: -0.25rem;
}

@media (max-width: 575px) {
	div.form__item {
		flex-direction: column;
		gap: 0.8rem;
	}

	.form__item input,
	.form__item select {
		min-width: 95vw;
	}
}

.container {
	background-color: white;
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	width: 100%;
	max-width: 28rem;
	box-sizing: border-box;
}

.title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #2d3748;
	text-align: center;
}

.toggle-buttons {
	display: flex;
	justify-content: center;
}

.toggle-buttons > div {
	margin: 0 0.5rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.toggle-label {
	cursor: pointer;
	padding: 0.5rem 1.5rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	border: 2px solid #d2d6dc;
	transition: all 0.3s ease;
	background-color: white;
	color: #4a5568;
}

.toggle-label.selected {
	background-color: #10886f;
	color: white;
	border-color: #10886f;
}

.form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4a5568;
	margin-bottom: 0.5rem;
}

.form-input {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid #d2d6dc;
	border-radius: 0.375rem;
	transition: box-shadow 0.2s, border-color 0.2s;
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: #10886f;
}

.upload-area {
	margin-top: 0.25rem;
	display: flex;
	justify-content: center;
	padding: 1.25rem 1.5rem;
	border: 2px dashed #d2d6dc;
	border-radius: 0.375rem;
}

.upload-area-content {
	text-align: center;
}

.upload-area-content svg {
	margin: 0 auto;
	height: 3rem;
	width: 3rem;
	color: #a0aec0;
}

.upload-text {
	font-size: 0.875rem;
	color: #4a5568;
}

.upload-text label {
	cursor: pointer;
	border-radius: 0.375rem;
	font-weight: 500;
	color: #3182ce;
}

#upload-input-container, 
#url-input-container,
#image-url {
	width: 100%;
}

#image-upload-label span {
	color: #10886f;

	&:hover {
		opacity: 0.7;
	}
}


/* Simple transition for the content visibility */
.toggle-content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

.toggle-content.visible {
	max-height: 500px; /* Adjust as needed */
	opacity: 1;
}

.upload-hint {
	display: none;
	font-size: 0.75rem;
	color: #718096;
}

.upload-hint.visible {
	display: block;
}

img.qr-code-image,
img.placeholder-img {
	height: 20rem;
	width: 20rem;
}

div.placeholder-container,
div.qr-code-container {
	display: none;
}

div.placeholder-container.visible,
div.qr-code-container.visible {
	display: flex;
}

textarea#content {
	resize: none;
	width: 100%;
}

div.gap-09rem {
	gap: 0.9rem;
}

.button-group {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 80%;
	max-width: 29rem;
}

#download-btn {
	background-color: #10886f;
	color: var(--text-white);
}

#copy-btn {
	background-color: var(--bg-subtle);
	color: var(--text-black);
}

html {
	overflow-x: hidden;
}