/* Survey Container */
.survey-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #fff;
	color: #333;
	font-size: clamp(11px, 2.75vw, 13px);
	padding: 0.25rem;
	width: 100%;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* Landing Container */
.landing-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #fff;
	color: #333;
	font-size: clamp(11px, 2.75vw, 13px);
	padding: 0.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	margin: 0;
	overflow-x: hidden;
}

/* Form Styles */
.survey-container .form {
	background: #f9f9f9;
	padding: 0.75rem;
	border-radius: 0.6rem;
}

.survey-container .form-label {
	font-size: clamp(11px, 2.75vw, 13px);
	margin-bottom: 0.5rem;
}

.survey-container .form-control {
	min-height: clamp(2rem, 5.5vw, 2.5rem);
	padding: 0.5rem;
	font-size: clamp(11px, 2.75vw, 13px);
	border-radius: 4px;
	border: 1px solid #ccc;
}

.survey-container .form-control[readonly] {
	background: #f5f5f5;
	cursor: pointer;
}

/* Site and Location Buttons */
.survey-container .mic-button.btn {
	background: #00c569;
	color: white;
	font-size: clamp(11px, 2.75vw, 13px);
	min-height: clamp(2rem, 5.5vw, 2.5rem);
	min-width: clamp(8rem, 20vw, 10rem);
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	touch-action: manipulation;
}

.survey-container .mic-button.btn:hover {
	background: #00a858;
}

/* Dropdown Styles */
.survey-container .site-dropdown,
.survey-container .location-dropdown {
	position: absolute;
	top: calc(100% + 0.3rem);
	left: 0;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 10;
	max-height: 65vh;
	overflow-y: auto;
	padding: 0.3rem 0;
}

.survey-container .site-search.form-control,
.survey-container .location-search.form-control {
	width: calc(100% - 0.6rem);
	margin: 0.3rem;
	padding: 0.5rem;
	font-size: clamp(11px, 2.75vw, 13px);
	border: 1px solid #ccc;
	border-radius: 0.3rem;
}

.survey-container .site-options,
.survey-container .location-options {
	max-height: 55vh;
	overflow-y: auto;
}

.survey-container .site-option,
.survey-container .location-option {
	padding: 0.5rem;
	font-size: clamp(11px, 2.75vw, 13px);
	cursor: pointer;
	min-height: clamp(2rem, 5.5vw, 2.5rem);
	display: flex;
	align-items: center;
}

.survey-container .site-option:hover,
.survey-container .location-option:hover {
	background: #f0f0f0;
}

/* Category and Item Styles */
.survey-container h2 {
	font-size: clamp(13px, 3.25vw, 15px);
	margin-bottom: 0.5rem;
}

.survey-container .category {
	color: #00c569;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
	font-size: clamp(13px, 3.25vw, 15px);
}

.survey-container .item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.5rem 0;
	font-size: clamp(11px, 2.75vw, 13px);
	gap: 0.5rem;
	flex-wrap: nowrap;
	width: 100%;
}

.survey-container .item-row .item-text {
	flex: 1;
	max-width: 60%;
	overflow-wrap: anywhere;
	white-space: normal;
}

.survey-container .item-row.long-item-row {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}

.survey-container .item-row.long-item-row .item-text {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.survey-container .item-row.long-item-row .qty-controls {
	margin-left: 0;
	justify-content: flex-start;
	width: 100%;
}

.survey-container .qty-controls {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	margin-left: auto;
}

.survey-container .qty-controls button {
	background: #00c569;
	color: white;
	border: none;
	padding: 0.2rem 0.5rem;
	border-radius: 0.3rem;
	font-size: clamp(11px, 2.75vw, 13px);
	cursor: pointer;
	min-height: clamp(1.5rem, 4.5vw, 2rem);
	min-width: clamp(1.5rem, 4.5vw, 2rem);
	touch-action: manipulation;
}

.survey-container .qty-controls input {
	width: clamp(2.25rem, 6vw, 2.75rem);
	text-align: center;
	font-size: clamp(11px, 2.75vw, 13px);
	border: 1px solid #ccc;
	border-radius: 0.3rem;
	padding: 0.2rem;
	min-height: clamp(1.5rem, 4.5vw, 2rem);
}

/* Button Styles */
.survey-container .save.btn,
.survey-container .finish.btn {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	font-size: clamp(11px, 2.75vw, 13px);
	min-height: clamp(2rem, 5.5vw, 2.5rem);
	touch-action: manipulation;
}

.survey-container .save.btn {
	background: #00c569;
	color: white;
}

.survey-container .finish.btn {
	background: #0d122b;
	color: white;
}

/* Landing Styles */
.landing-container .container {
	text-align: center;
}

.landing-container h1 {
	font-size: clamp(20px, 5vw, 32px);
	font-weight: 700;
	margin-bottom: 12px;
	color: #333;
}

.landing-container .start-button {
	display: inline-block;
	padding: 6px 12px;
	background: #00c569;
	color: white;
	font-size: clamp(13px, 3.5vw, 20px);
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
	min-height: clamp(2rem, 5.5vw, 2.5rem);
}

.landing-container .start-button:hover {
	background: #00a858;
}

/* Responsive Breakpoints */
@media screen and (min-width: 576px) {
	.survey-container .item-row.long-item-row {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}

	.survey-container .item-row.long-item-row .item-text {
		max-width: 60%;
	}

	.survey-container .item-row.long-item-row .qty-controls {
		margin-left: auto;
		justify-content: flex-end;
		width: auto;
	}
}

@media screen and (min-width: 768px) {
	.survey-container {
		padding: 0.75rem;
		max-width: 100%;
		margin: 0 auto;
	}

	.survey-container .form {
		padding: 1.5rem;
	}

	.survey-container .form-label {
		font-size: clamp(13px, 2.25vw, 15px);
	}

	.survey-container .form-control,
	.survey-container .mic-button.btn {
		min-height: clamp(2.5rem, 5vw, 3rem);
		font-size: clamp(13px, 2.25vw, 15px);
		min-width: clamp(9rem, 15vw, 11rem);
	}

	.survey-container h2 {
		font-size: clamp(15px, 2.75vw, 17px);
	}

	.survey-container .category {
		font-size: clamp(15px, 2.75vw, 17px);
	}

	.survey-container .item-row {
		font-size: clamp(13px, 2.25vw, 15px);
		gap: 0.75rem;
	}

	.survey-container .item-row .item-text {
		max-width: 65%;
	}

	.survey-container .qty-controls button,
	.survey-container .qty-controls input {
		font-size: clamp(13px, 2.25vw, 15px);
		min-height: clamp(1.8rem, 3.5vw, 2.25rem);
		min-width: clamp(1.8rem, 3.5vw, 2.25rem);
		width: clamp(2.5rem, 5vw, 3rem);
	}

	.survey-container .save.btn,
	.survey-container .finish.btn {
		font-size: clamp(13px, 2.25vw, 15px);
		min-height: clamp(2.5rem, 5vw, 3rem);
	}

	.landing-container {
		padding: 0.75rem;
		max-width: 100%;
		margin: 0 auto;
	}
}

@media screen and (min-width: 1024px) {
	.survey-container {
		max-width: 100%;
	}

	.survey-container h2 {
		font-size: clamp(17px, 2.25vw, 19px);
	}

	.survey-container .form {
		padding: 2rem;
	}

	.landing-container {
		max-width: 100%;
	}
}
body {
	overflow-y: auto;
}