/* ========================================================================
   VARIABLES & GLOBAL STYLES
   ======================================================================== */
	 :root {
		--clr-primary: #fd6900;
		--clr-primary-dark: #cc4100;
		--font-family-text: "Open Sans", sans-serif;
		--font-family-heading: "Raleway", sans-serif;
	}

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

	/* ========================================================================
		 BASE STYLES & RESETS
		 ======================================================================== */
	body,
	p {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-text);
	}

	body {
		background-image: url("https://loadingartist.com/img/bg/main.png");
		background-repeat: repeat;
	}

	/* ========================================================================
		 LAYOUT & STRUCTURE
		 ======================================================================== */
	/* Character Container */
	.character {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 320px;
		height: 320px;
		z-index: 1;
		pointer-events: none; /* Prevents clicks on the character */
	}

	/* Loading Screen */
	#loading-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #1c0e30;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 1.5rem;
		font-family: var(--font-family-heading);
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.2;
		z-index: 100;
		background-image: url("https://loadingartist.com/img/bg/main.png");
		background-repeat: repeat;
	}

	/* Main Content (hidden until loaded) */
	#main-content {
		display: none;
		opacity: 0;
	}

	/* Loading Bar */
	#loading-bar-container {
		width: 80%;
		max-width: 400px;
		height: 20px;
		background: #ffffff;
		border-radius: 5px;
		margin-top: 10px;
		overflow: hidden;
		border: 3px solid white;
	}

	#loading-bar {
		width: 0%;
		height: 100%;
		background: var(--clr-primary);
	}

	/* Colored Bar (Footer) */
	.colored-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		border-top: 6px solid #000;
		background-color: #7c3ed8;
		z-index: -10;
	}

	/* ========================================================================
		 COMPONENTS
		 ======================================================================== */

	/* ---------------------
		 Customizer Header
	------------------------ */
	.customizer-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative; /* Allows absolute positioning for the icon */
		padding: 10px;
		background-color: var(--clr-primary);
		border-bottom: 1px solid #ccc;
	}

	.back-link {
		position: absolute;
		left: 10px;
		font-size: 1.5rem;
		color: #fff;
		text-decoration: none;
	}

	.back-link:hover {
		color: #c55200;
	}

	.customizer-title {
		font-size: 18px;
		margin: 0;
		text-transform: uppercase;
		color: #fff;
		text-align: center;
	}

	/* ---------------------
		 Character Images & Layers
	------------------------ */
	/* General Image Styling */
	.character img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Head & Body Layer Positioning */
	.charBody img {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -5;
	}

	.charHead img {
		position: absolute;
		bottom: 0;
		left: 0;
		margin-bottom: 50px;
		z-index: 2;
		transform-origin: bottom center;
	}

	/* Hat & Hatback Specifics */
	#hat,
	#hatback {
		filter: hue-rotate(0deg);
	}

	#hat {
		z-index: 3;
	}

	#hat_x {
		z-index: 4;
	}

	#hatback {
		z-index: 1;
	}

	#hatback_x {
		z-index: 2;
	}

	/* ---------------------
		 Options & Customization Controls
	------------------------ */
	.options {
		display: flex;
		flex-direction: column;
		max-width: 600px;
		margin: auto;
		padding: 20px;
	}

	.customization-section {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 10px;
		font-family: var(--font-family-text);
		font-size: 14px;
		color: #000;
		margin-bottom: 20px;
	}

	/* Option Indexes */
	#currentHatIndex,
	#currentBodyIndex,
	#currentEyesIndex,
	#currentMouthIndex {
		display: block;
		margin-top: 0;
		font-weight: bold;
		color: #9790a3;
	}

	/* Horizontal Rule for Sections */
	.custom-hr {
		border: none;
		border-top: 2px solid #00000038;
		margin: 15px 0;
	}

	/* ---------------------
		 Button Containers & Button Styles
	------------------------ */
	/* Header Button Container & Arrow Buttons */
	.header-button-container {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.title-index {
		flex: 0 0 120px; /* Fixed width for title/index */
	}

	.middle-buttons {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.arrow-buttons {
		display: flex;
		gap: 4px;
	}


	/* General Button Styling */
	.header-button-container button {
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 5px;
		font-family: var(--font-family-text);
		font-size: 20px;
		border: none;
		text-transform: uppercase;
		cursor: pointer;
	}

	/* Random Button */
	.random-button {
		background-color: #007bff;
		color: #fff;

	}
	.random-button:hover {
		background-color: #0056b3;
	}

	/* Next & Previous Buttons */
	.next-button,
	.prev-button {
		width: 80px;
		background-color: var(--clr-primary);
		color: #fff;
	}
	.next-button:hover,
	.prev-button:hover {
		background-color: var(--clr-primary-dark);
	}
	.header-button-container button.hidden {
		background-color: #999;
		cursor: not-allowed;
		pointer-events: none;
	}


	/* Export & Back Button Containers */
	.button-container {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
		margin-right: 10px;
	}

	.button-container button.exportButton,
	.button-container button.backButton,
	button.closeButton{
		width: 40%;
		padding: 12px 0;
		margin-top: 10px;
		font-size: 18px;
		background-color: var(--clr-primary);
		color: #fff;
		border: none;
		border-radius: 5px;
		outline: 3px solid #ffffff;
	}
	.button-container button.exportButton:hover,
	.button-container button.backButton:hover,
	button.closeButton:hover{
		background-color: var(--clr-primary-dark);
	}


	/* Button with Icon Styling */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		font-size: 1.2rem;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.2;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		white-space: nowrap;
		flex-shrink: 0;
		text-align: center;
		width: 220px;
		position: relative;
	}
	.btn-text {
		flex: 1;
		text-align: center;
	}
	.exportButton .btn-text {
		padding-right: 30px;
	}
	.backButton .btn-text {
		padding-left: 30px;
	}
	.btn-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.exportButton .btn-arrow {
		right: 10px;
	}
	.backButton .btn-arrow {
		left: 10px;
	}

	/* Download & Copy Buttons */
	.downloadButton {
		background-color: var(--clr-primary);
		color: #fff;
		outline: 2px solid #ffffff;
		outline-offset: -6px;
	}
	.downloadButton:hover {
		background-color: var(--clr-primary-dark);
	}
	.downloadButton i {
		font-size: 1.2rem;
		line-height: 1;
		vertical-align: middle;
		margin-right: 5px;
	}

	.copyButton {
		background-color: #7c3ed8;
		color: #fff;
	}
	.copyButton:hover {
		background-color: #53009b;
	}
	.copyButton.full::after {
		content: attr(data-original-text);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		visibility: hidden;
	}
	.copyButton.single {
		width: 100px;
	}

	/* ---------------------
		 Range Inputs & Labels
	------------------------ */
	.custom-ranges-container {
		display: flex;
		justify-content: space-between;
	}

	.range-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 10px;
	}

	.range-container input[type="range"] {
		width: 100%;
		height: 20px;
		margin-top: 10px;
		border: 2px solid #7c3ed8;
		background: linear-gradient(to right, #1c0e30, #7c3ed8) no-repeat, var(--clr-primary);
		border-radius: 5px;
		outline: none;
		transition: background-color 0.3s ease;
		-webkit-appearance: none;
	}

	.range-container input[type="range"]::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
		background-color: var(--clr-primary);
		border: 2px solid #ffffff;
		border-radius: 50%;
		cursor: pointer;
	}

	.range-container input[type="range"]::-moz-range-thumb {
		width: 20px;
		height: 20px;
		background-color: var(--clr-primary);
		border: 2px solid #ffffff;
		border-radius: 50%;
		cursor: pointer;
	}

	.range-container label {
		font-size: 1rem;
		text-align: center;
		color: #474747;
	}

	/* Specific Range Backgrounds */
	#hat-hue-range,
	#body-hue-range {
		background: linear-gradient(
			to right,
			var(--hue-min-color) 0%,
			var(--hue-max-color) 100%
		);
	}

	#hat-saturation-range,
	#body-saturation-range {
		background: linear-gradient(
			to right,
			hsl(0, 0%, 50%) 0%,
			hsl(var(--saturation-color), 100%, 50%) 100%
		);
	}

	#hat-brightness-range,
	#body-brightness-range {
		background: linear-gradient(
			to right,
			hsl(0, 0%, var(--brightness-min)) 0%,
			hsl(0, 0%, var(--brightness-max)) 100%
		);
	}

	/* ---------------------
		 Export Section
	------------------------ */
	.export-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 10px;
		font-family: var(--font-family-heading);
		font-size: 18px;
		color: #494949;
	}

	.export-section .button-row {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	.export-section .button-row button.downloadButton,
	.export-section .button-row button.copyButton {
		flex: 0 0 45%;
		padding: 20px 0;
		font-size: 20px;
		box-sizing: border-box;
	}

	.export-section input[type="text"] {
		width: 100%;
		padding: 10px;
		margin-top: 10px;
		font-size: 1rem;
		border: none;
		border-radius: 5px;
		color: #000;
		background-color: #d6d6d6;
	}

	.export-section p {
		font-size: 0.9rem;
		margin: 10px 5px;
		line-height: 1.5;
		text-align: center;
	}

	.export-section a {
		color: var(--clr-primary);
		text-decoration: none;
		font-weight: bold;
	}

	.export-section a:hover {
		text-decoration: underline;
	}

	/* Custom String Box */
	#customStringBox {
		width: 100%;
		max-width: 400px;
		min-height: 40px;
		height: auto;
		overflow-wrap: break-word;
		word-wrap: break-word;
		white-space: pre-wrap;
		resize: none;
		font-family: var(--font-family-text);
		padding: 10px;
		border-radius: 5px;
		border: none;
		background-color: #ececec;
		color: #a7a7a7;
		font-size: 0.8rem;
	}



	/* Preview background on EXPORT */




.background-options {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
  font-size: 1rem;
  font-family: var(--font-family-text);
}

.background-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}


.background-options input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--clr-primary);
  cursor: pointer;
}

.background-options input[type="color"] {
  width: 40px;
  height: 30px;
  border: none;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 0 2px #ccc;
}




	/* ========================================================================
		 MEDIA QUERIES
		 ======================================================================== */

	/* Animate background on larger screens */
	@media (min-width: 769px) {
		body {
			animation: panBackground 150s linear infinite;
		}
	}



	/* Smallest character for small view */
	@media (max-width: 450px) or (max-height: 780px) {
		.character {
			width: 200px;
			height: 200px;
			bottom: 0;
			left: 0;
		}
		.charHead img {
			margin-bottom: 30px;
		}
		.colored-bar {
			height: 35px;
		}
	}

	/* Largest character for larger view */
	@media (min-width: 480px) and (min-height: 1000px) {
		.character {
			width: 450px;
			height: 450px;
			bottom: 0;
			left: 0;
		}
		.charHead img {
			margin-bottom: 70px;
		}
		.colored-bar {
			height: 80px;
		}
	}

	/* Smaller mobile UI adjustments */
	@media (max-width: 768px) or (max-height: 800px) {
		html,
		body {
			overflow-x: hidden;
		}
		.options {
			width: 100%;
			padding: 5px;
			margin: 0 auto;
			box-sizing: border-box;
		}
		.customization-section,
		.export-section {
			width: 98%;
			max-width: 100vw;
			margin: 5px auto;
			padding: 10px;
			border-radius: 8px;
			font-family: var(--font-family-text);
			font-size: 12px;
			text-align: center;
			color: #000;
			box-sizing: border-box;
		}
		.header-button-container {
			flex-wrap: wrap;
			justify-content: center;
			gap: 0;
			margin: 0;
		}
		.header-button-container button {
			padding: 5px;
			font-size: 16px;
		}
		.header-button-container h2 {
			width: 60px;
		}
		.header-button-container .prev-button,
		.header-button-container .next-button {
			margin-left: 0;
		}
		.range-container input[type="range"] {
			width: 100%;
		}
		.title-index {
			flex: 0 0 70px; /* Fixed width for title/index */
		}

		.button-container {
			margin-top: 5px;
			margin-right: 5px;
			justify-content: flex-end;
		}
		.next-button,
		.prev-button {
			width: 60px !important;
		}

		.copyButton.single {
			width: 60px;
		}
		.customization-section h2 {
			font-size: 14px;
		}
		.export-section .button-row button.downloadButton,
		.export-section .button-row button.copyButton {
			font-size: 18px;
		}
		#customStringBox {
			box-sizing: border-box;
		}
	}

	/* ========================================================================
		 KEYFRAMES
		 ======================================================================== */
	@keyframes panBackground {
		from {
			background-position: 0 0;
		}
		to {
			background-position: 100vw 100vh;
		}
	}