@font-face {
	font-family: 'GTPlanar';
	src: url('font/GT-Planar-VF.woff2') format('woff2'), url('font/GT-Planar-VF.ttf') format('truetype');
	font-weight: 100 900;
}

/* Ensure all elements use border-box sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reserve the top 160px for nav and use remaining height for main content */
.typepage-main {
	display: flex;
	/* Instead of a fixed gap, we use a responsive gap:
     When the viewport is narrow, use 24px; when wide, gap increases */
	gap: clamp(24px, calc((100vw - 1200px) / 4 + 24px), 80px);
	height: calc(100vh - 160px);
	align-items: stretch;
	overflow: hidden;
	margin: 15px;
}

/* Left/right panels use full available height and allow flexibility */
.typepage-left-right {
	flex: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px; /* Reduced gap to save vertical space */
	height: 100%;
}

.typepage-middle {
	flex: 8;
	height: 100%;
}

.typepage-right {
	flex: 2;
	height: 100%;
}

.bar {
	background-color: var(--color-accent);
	display: flex;
	width: 100%;
	height: 24px;
	align-items: center;
}

/* ------------------------- Type - Words ------------------------- */
.words-input {
	width: 100%;
	height: 80px;
	border: 2px solid var(--color-text);
	font-family: 'GTPlanar', sans-serif;
	font-size: 16px;
	outline: none;
	resize: none;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: keep-all;
	overflow: auto;
	padding: 5px;
}

/* ------------------------- Type Styles -------------------------- */
.type-styles-frame {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.type-style-image {
	border: 2px solid var(--color-text);
	border-top: 0px;
	height: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: 20px 0;
	position: relative;
}

/* Style for active indicators */
.active-indicator {
	position: absolute;
	top: 50%;
	right: 4px;
	width: 24px;
	height: 24px;
	color: var(--color-accent);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s, transform 0.3s;
}

/* Show the active indicator when the style is active */
.active-style .active-indicator {
	opacity: 1;
	transform: translateY(-50%);
}

.img-type-styles {
	width: 60%;
}

.img-type-styles-last {
	height: auto;
}

/* Adjust Draw button: use flexible sizing */
.button-draw {
	background-color: var(--color-text);
	color: var(--color-white);
	font-size: 16px;
	padding: 5px 10px;
	width: 100%;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.button-draw:hover {
	background-color: var(--color-bg-hover);
}

/* Range slider styles */
.slider-container {
	display: flex;
	align-items: center;
	width: 100%;
	border: 2px solid var(--color-text);
	border-top: none;
	padding: 0;
}

.slider-icon {
	color: var(--color-white);
	width: 24px;
	height: 24px;
	padding: 3px;
	background-color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.3s;
}

.slider-icon:hover {
	background-color: var(--color-background);
	color: inherit;
}

.minus-icon {
	border-right: 2px solid var(--color-border);
}

.plus-icon {
	border-left: 2px solid var(--color-border);
}

.saturation-heading {
	font-size: 0.75rem;
	letter-spacing: 2.55px;
	text-transform: uppercase;
	width: 100%;
	padding: 4px;
	border-bottom: 2px solid var(--color-border);
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	cursor: pointer;
	outline: none;
	margin: 0;
	height: auto;
	background: transparent;
	border: none;
	padding: 4px;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 2px;
	background: var(--color-text);
	border-radius: 0;
}

input[type='range']::-moz-range-track {
	height: 2px;
	background: var(--color-text);
	border-radius: 0;
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 16px;
	width: 2px;
	background-color: var(--color-text);
	border: none;
	border-radius: 0;
	margin-top: -7px;
}

input[type='range']::-moz-range-thumb {
	height: 16px;
	width: 8px;
	background-color: var(--color-text);
	border-radius: 0;
	border: none;
}

input[type='range']:hover {
	border-color: rgb(24, 91, 71);
}

input[type='range']:hover::-webkit-slider-thumb {
	background-color: var(--color-bg-hover);
}

input[type='range']:hover::-moz-range-thumb {
	background-color: var(--color-bg-hover);
}

/* Mode toggle container styles */
.mode-toggle-container {
	position: absolute;
	top: 90px; /* adjust vertical position as needed */
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
}

/* Common styles for mode toggle buttons */
.mode-toggle-btn {
	font-family: GTPlanar;
	font-size: 14px;
	padding: 5px 10px;
	border: none;
	cursor: pointer;
	/* border-radius: 4px; */
	border: 2px solid var(--color-text);
}

.mode-toggle-btn h3 {
	margin: 0;
}

/* Specific styles for sentence mode */
.sentence-btn {
	background-color: var(--color-background);
	color: var(--color-text);
	border-right: none;
}

/* Specific styles for word mode */
.word-btn {
	background-color: var(--color-background);
	color: var(--color-text);
}

/* When a mode is active, you can add an active class from JS and style accordingly */
.mode-toggle-btn.active {
	background-color: #ccc;
}

.word-options-container {
	position: absolute;
	top: 120px; /* adjust vertical position as needed */
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	line-height: 0.2;
}

.word-options-container button {
	border: 2px solid var(--color-text);
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: GTPlanar;
	padding: 3px;
}
.word-options-container button.active {
	background-color: #ccc;
}

.letter-spacing {
	position: absolute;
	line-height: 0;
	top: 20px;
	left: calc(50% - 100px);
	width: 200px;
	z-index: 100;
}

/* ------------------------- Type Canvas -------------------------- */

.canvas {
	position: relative;
	display: block;
	align-items: center; /* Vertically center the content */
	justify-content: center; /* Horizontally center the content */
	text-align: center; /* Center aligns the text */
	font-family: 'GTPlanar', sans-serif;
	font-size: 48px;
	line-height: 1;
	font-variation-settings: 'wght' 400;
	border: 2px solid var(--color-text);
	background-color: var(--color-white);
	width: 100%;

	height: 96%;
	padding: 30px;
	overflow-wrap: break-word; /* Allow long words to break and wrap */
	white-space: pre-wrap; /* Preserve white space and allow wrapping */
	overflow: hidden; /* Hide overflow if necessary */
	white-space: normal;
	word-wrap: break-word; /* breaks long words if needed */
	overflow-wrap: break-word; /* similar to word-wrap */
}

.text-wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	text-align: center; /* Keeps the text centered horizontally */
	padding: 30px;
	line-height: 0.85 !important;
}

#text {
	background-color: blue;
}

/* ------------------------- Colors ------------------------------- */
.frontback {
	width: 100%;
	height: auto;
	border: 2px solid var(--color-text);
	display: flex;
	padding-bottom: 3px;
}

.half {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 15px;
}

.half input[type='radio'] {
	accent-color: var(--color-text);
	cursor: pointer;
}

.half label h3 {
	margin: 0;
}

.half img {
	width: 20px;
	height: 20px;
}

.all-colors {
	width: 100%;
	height: auto;
	border: 2px solid var(--color-text);
	border-top: none;
	display: grid;
	grid-template-columns: repeat(5, 20%);
}

.color-box {
	width: 100%-1px;
	height: 24px;
	border: 2px solid transparent;
	transition: border 0.2s, transform 0.3s ease;
	transition: opacity 0.2s, transform 0.3s ease;
	cursor: pointer;
}

.color-box:hover {
	opacity: 0.75;
}

.original-color {
	background-color: var(--color-white);
	position: relative;
	overflow: hidden;
}

.original-color::after {
	content: '';
	position: absolute;
	width: 200%; /* Wide enough to cover the diagonal */
	height: 2px; /* Fixed line width */
	background-color: red;
	top: 50%;
	left: -50%;
	transform: rotate(-45deg);
	transform-origin: center;
	pointer-events: none;
}

.original-color img {
	width: 100%;
	height: 20px;
	object-fit: fill;
}

.green {
	background-color: #1de927;
}
.dark-green {
	background-color: var(--color-text);
}
.peach {
	background-color: #ffb69e;
}
.olive {
	background-color: var(--color-accent);
}
.light-grey {
	background-color: var(--color-background);
}
.yellow {
	background-color: #e5ee60;
}
.periwinkle {
	background-color: #7b92f8;
}
.brown {
	background-color: #a06800;
}
.magenta {
	background-color: #c700b9;
}
.white {
	background-color: #ffffff;
}
.red {
	background-color: #ff4000;
}
.dark-grey {
	background-color: #a4968d;
}
.dark-brown {
	background-color: #3f3a3a;
}

.light-grey-none {
	cursor: auto;
}

/* ------------------------- Type Align ------------------------- */
.align-box {
	width: 100%;
	height: 40px;
	display: flex;
}

.each-box {
	width: 33.3%;
	height: 40px;
	border: 2px solid var(--color-text);
	border-right: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button-align {
	width: 100%;
	height: 100%;
	border: none;
	cursor: pointer;
	background-color: var(--color-background);
}

.button-align:hover {
	background-color: var(--color-white);
}

.button-align-right {
	border-right: 2px solid var(--color-text);
}

/* ------------------------- Img Style -------------------------- */
.img-img-styles {
	border: 2px solid var(--color-text);
	width: 75%;
	transition: 0.3s ease;
	cursor: pointer;
}

.img-img-styles:hover {
	transform: scale(1.05);
}

.img-styles-frame {
	width: 100%;
	border: 2px solid var(--color-text);
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.style-each {
	width: 100%;
	position: relative;
}

.line-style,
.dot-style {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-bottom: 2px solid var(--color-text);
	position: relative;
}

.line-style img,
.dot-style img {
	width: 128px;
	height: 128px;
}

#dot-slider,
#line-slider {
	width: 100%;
	/* border-top: 2px solid var(--color-text); */
	border-left: none;
	border-right: none;
}

/* ------------------------- Img Canvas ------------------------- */
.canvas-img {
	width: 100%;
	height: calc(100vh - 183px);
	border: 2px solid var(--color-text);
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-img {
	width: 50%;
}

.button-img-upload {
	width: 100%;
	height: 10%;
	display: flex;
	justify-content: center;
	align-items: start;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

/* ------------------------- Download --------------------------- */
.download {
	width: 100%;
	/* Instead of fixed 150px, use a flexible height relative to viewport */
	/* height: clamp(120px, 15vh, 150px); */
	/* margin-bottom: -7px; */
}

.download-button {
	background: var(--color-bright);
	border: 2px solid var(--color-text);
	color: var(--color-text);
	outline: none;
	padding: 5px 10px;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.3s, background-color 0.3s ease;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	font-size: 16px;
	height: 64px;
}

.download-button:hover {
	background-color: var(--color-text);
	color: var(--color-background);
}

.download img:last-child {
	width: 24px;
	height: 24px;
}

/* ---------------- Responsive Adjustments ---------------- */
@media (min-width: 1200px) {
	/* When the window is wide, adjust button padding and let the gap expand */
	.button-draw {
		padding: 5px 8px;
		font-size: 14px;
	}
	.download-button {
		padding: 15px;
		gap: 15px;
	}
}