/**
 * Survey-Specific Material Design 3 Styles
 * Extends base material-design.css for survey pages
 * Optimized version - redundancies removed, conflicts resolved
 */

/* ============================================================
   ALTERNATIVE FONTS
   ============================================================ */

.alt-font1 {
	font-family: "Montserrat", sans-serif;
}

.alt-font2 {
	font-family: "Comfortaa", sans-serif;
}

.alt-font3 {
	font-family: "Cousine", sans-serif;
}

.alt-font4 {
	font-family: "Quicksand", sans-serif;
}

.alt-font5 {
	font-family: "Roboto", sans-serif;
}

/* ============================================================
   SURVEY HEADER
   ============================================================ */

.survey-header {
	background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
	color: var(--md-sys-color-on-primary);
	padding: 2rem 0;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 32px;
}

.survey-header h1,
.header-title {
	font-size: 1.75rem;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	line-height: 1.3;
}

.survey-header p,
.header-subtitle {
	font-size: 1.125rem;
	font-weight: 400;
	margin: 0;
	color: #fff;
	opacity: 0.9;
}

.pill-badge {
	background-color: #008a56;
	color: white;
	padding: 4px 16px;
	border-radius: 9999px; /* Creates the pill shape */
	display: inline-block;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.survey-page,
.thank-you-page {
	background-color: var(--md-sys-color-surface-variant);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.survey-main,
.thank-you-main {
	flex: 1;
	padding: 2rem 0;
}

/* ============================================================
   SURVEY CONTAINER
   ============================================================ */

.survey-container {
	background: var(--md-sys-color-surface);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 24px;
}

/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */

.survey-progress-container {
	background: var(--md-sys-color-surface);
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.survey-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.survey-progress-label,
.progress-status {
	font-size: 0.875rem;
	color: var(--md-sys-color-on-surface-variant);
}

.progress-section {
	font-size: 1rem;
	font-weight: 500;
	color: var(--md-sys-color-primary);
}

.survey-progress-bar-container {
	background: var(--md-sys-color-surface-variant);
	border-radius: 100px;
	height: 32px;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.survey-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #0088cc 0%, #00a8e8 100%);
	border-radius: 100px;
	transition: width 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 1rem;
	min-width: 60px;
	box-shadow: 0 2px 4px rgba(0, 136, 204, 0.2);
}

.survey-progress-bar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.survey-progress-percentage {
	font-size: 0.875rem;
	font-weight: 600;
	color: white;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Handle very low percentages */
.survey-progress-bar[style*="width: 0"],
.survey-progress-bar[style*="width: 1"],
.survey-progress-bar[style*="width: 2"],
.survey-progress-bar[style*="width: 3"],
.survey-progress-bar[style*="width: 4"],
.survey-progress-bar[style*="width: 5"],
.survey-progress-bar[style*="width: 6"],
.survey-progress-bar[style*="width: 7"],
.survey-progress-bar[style*="width: 8"],
.survey-progress-bar[style*="width: 9"] {
	justify-content: center;
	padding: 0;
}

/* ============================================================
   SECTION TITLES & DESCRIPTIONS
   ============================================================ */

.survey-section-header {
	margin-bottom: 2rem;
}

.survey-section-title {
	color: #4270b7;
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	padding-bottom: 12px;
	border-bottom: 2px solid #4270b7;
	line-height: 1.3;
}

.survey-section-description {
	color: var(--md-sys-color-on-surface-variant);
	margin: 0;
	font-size: 1rem;
}

.survey-lead {
	font-size: var(--md-sys-typescale-body-large-size);
	color: var(--md-sys-color-on-surface-variant);
	margin-bottom: 24px;
}

.survey-lead strong {
	color: var(--md-sys-color-on-surface);
}

/* ============================================================
   INFO BOXES & INSTRUCTIONS
   ============================================================ */

.survey-info-box,
.survey-instructions {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	border-radius: 0.75rem;
	padding: 1rem 1.5rem;
	margin-bottom: 2rem;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	border-left: 4px solid #1565c0;
}

.survey-info-box .material-icons,
.survey-instructions i {
	color: #1565c0;
	font-size: 1.5rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.survey-info-box-content,
.instructions-content {
	flex: 1;
	color: #0d47a1;
	font-size: 1rem;
	line-height: 1.6;
}

.survey-info-text {
	margin: 0;
	color: #0d47a1;
	font-size: 1rem;
	line-height: 1.5;
}

.instructions-content strong {
	color: #1565c0;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */

.survey-field {
	margin-bottom: 32px;
}

.survey-field-label,
.form-label {
	display: block;
	margin-bottom: 12px;
	font-size: var(--md-sys-typescale-body-large-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	line-height: 1.5;
}

.survey-field-label-required::after {
	content: " *";
	color: var(--md-sys-color-error);
}

.mb-4 {
	margin-bottom: 32px !important;
}

.fw-bold {
	font-weight: 500 !important;
}

.form-control,
.form-select {
	width: 100%;
	padding: 16px;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-extra-small);
	background-color: var(--md-sys-color-surface-container-highest);
	color: var(--md-sys-color-on-surface);
	font-size: var(--md-sys-typescale-body-large-size);
	transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
	outline: none;
	font-family: inherit;
}

.form-control:focus,
.form-select:focus {
	border-color: #4270b7;
	border-width: 2px;
	padding: 15px;
}

.form-select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2341474d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea {
	min-height: 56px;
	display: block;
}

textarea.form-control {
	min-height: 120px;
	resize: vertical;
}

/* ============================================================
   CHECKBOXES AND RADIO BUTTONS
   ============================================================ */

.form-check {
	margin-bottom: 8px;
	padding-left: 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	position: relative;
	padding: 8px 0;
}

.form-check:hover {
	background-color: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-small);
	margin-left: -8px;
	margin-right: -8px;
	padding-left: 8px;
	padding-right: 8px;
}

.form-check-input {
	width: 24px;
	height: 24px;
	margin: 0;
	margin-right: 16px;
	cursor: pointer;
	accent-color: #4270b7;
	flex-shrink: 0;
}

.form-check-label {
	font-size: var(--md-sys-typescale-body-large-size);
	color: var(--md-sys-color-on-surface);
	cursor: pointer;
	line-height: 0.4;
	padding: 8px 0;
	display: flex;
	align-items: center;
}

/* ============================================================
   CHECKBOX OTHER SECTION
   ============================================================ */

.checkbox-other-section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--md-sys-color-outline-variant);
}

.checkbox-other-section .form-label {
	font-size: 0.9375rem;
	margin-bottom: 0.5rem;
}

.checkbox-other-section .form-control {
	max-width: 100%;
}

/* ============================================================
   CHECKBOX GROUP SEPARATOR
   ============================================================ */

.checkbox-group-separator {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--md-sys-color-outline-variant);
}

.checkbox-group-separator .form-check-label {
	font-size: 1rem;
}

.checkbox-group-separator .form-check-label strong {
	color: var(--md-sys-color-on-surface);
}

/* ============================================================
   LONG CHECKBOX LISTS
   ============================================================ */

/* Better spacing for long checkbox lists */
.survey-field .checkbox-group > .form-check:nth-child(n + 5) {
	margin-top: 0.875rem;
}

/* Visual grouping for related checkboxes */
.checkbox-group > .form-check:nth-child(4n + 1) {
	position: relative;
}

.checkbox-group > .form-check:nth-child(4n + 1)::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--md-sys-color-outline-variant);
	opacity: 0.3;
}

.checkbox-group > .form-check:first-child::before {
	display: none;
}

/* ============================================================
   FIELDSET IMPROVEMENTS
   ============================================================ */

fieldset.survey-field {
	background: var(--md-sys-color-surface-container-lowest);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: 0.75rem;
	padding: 1.5rem;
}

fieldset.survey-field legend {
	padding: 0 0.5rem;
	margin-left: -0.5rem;
}

/* ============================================================
   MATRIX TABLES
   ============================================================ */

.matrix-table-wrapper {
	overflow-x: auto;
	overflow-y: visible;
	margin: 1rem 0;
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	background: var(--md-sys-color-surface);
}

.matrix-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 700px;
}

.matrix-table caption {
	padding: 1rem;
	text-align: left;
	font-weight: 500;
}

/* Table Header */
.matrix-table thead {
	background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
	color: white;
}

.matrix-table thead th {
	padding: 1rem 0.75rem;
	font-weight: 500;
	font-size: 0.9375rem;
	text-align: center;
	vertical-align: middle;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	line-height: 1.3;
}

.matrix-statement-col {
	text-align: left !important;
	min-width: 280px;
	position: sticky;
	left: 0;
	background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
	z-index: 2;
}

.matrix-option-col {
	min-width: 100px;
	white-space: normal;
}

/* Table Body */
.matrix-table tbody tr {
	transition: background-color 0.2s ease;
}

.matrix-table tbody tr:nth-child(odd) {
	background: var(--md-sys-color-surface);
}

.matrix-table tbody tr:nth-child(even) {
	background: var(--md-sys-color-surface-variant);
}

.matrix-table tbody tr:hover {
	background: var(--md-sys-color-surface-container-high);
}

.matrix-table tbody th,
.matrix-table tbody td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* Statement Column (Row Headers) */
.matrix-statement,
.matrix-table td.row-label,
.matrix-table .row-label {
	text-align: left;
	font-weight: 500;
	font-size: 1rem;
	color: var(--md-sys-color-on-surface);
	position: sticky;
	left: 0;
	background: inherit;
	z-index: 1;
	padding-left: 24px;
	padding-right: 24px;
	line-height: 1.5;
}

/* Option Cells */
.matrix-option {
	text-align: center;
	vertical-align: middle;
}

/* Radio Button Styling */
.matrix-radio-label,
.matrix-table td label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	cursor: pointer;
	margin: 0;
	min-height: 44px;
}

.matrix-radio-input,
.matrix-table input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
	margin: 0;
	accent-color: var(--md-sys-color-primary);
}

.matrix-radio-input:focus,
.matrix-table input[type="radio"]:focus {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
}

.matrix-radio-input:focus-visible,
.matrix-table input[type="radio"]:focus-visible {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
}

/* Mobile Note */
.matrix-mobile-note {
	display: none;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--md-sys-color-surface-variant);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	color: var(--md-sys-color-on-surface-variant);
	text-align: center;
}

.matrix-mobile-note i {
	margin-right: 0.5rem;
	color: var(--md-sys-color-primary);
}

/* ============================================================
   SUBSTANCE USE GRID
   ============================================================ */

.substance-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem 2rem;
}

.substance-field {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* ============================================================
   DAYS INPUT COMPONENTS
   ============================================================ */

.days-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.days-input {
	width: 100px;
	flex-shrink: 0;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 500;
	padding: 0.75rem 0.5rem;
}

.days-input::-webkit-inner-spin-button,
.days-input::-webkit-outer-spin-button {
	opacity: 1;
	height: 40px;
}

.days-input[type="number"] {
	-moz-appearance: textfield;
}

.days-input:focus {
	border-color: var(--md-sys-color-primary);
	box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

.days-input:invalid {
	border-color: var(--md-sys-color-error);
}

.days-input:invalid:focus {
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

.was-validated .days-input:valid {
	border-color: var(--md-sys-color-success, #2e7d32);
}

.days-label {
	font-size: 0.9375rem;
	color: var(--md-sys-color-on-surface-variant);
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.4;
}

/* ============================================================
   DRINKS INPUT COMPONENT
   ============================================================ */

.drinks-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 300px;
}

.drinks-input {
	width: 100px;
	flex-shrink: 0;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 500;
	padding: 0.75rem 0.5rem;
}

.drinks-input::-webkit-inner-spin-button,
.drinks-input::-webkit-outer-spin-button {
	opacity: 1;
	height: 40px;
}

.drinks-label {
	font-size: 1rem;
	color: var(--md-sys-color-on-surface-variant);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ============================================================
   CONDITIONAL SECTIONS
   ============================================================ */

.conditional-section {
	display: none;
	margin-left: 24px;
	padding: 16px;
	padding-left: 24px;
	border-left: 3px solid #4270b7;
	background: var(--md-sys-color-surface-container-low);
	border-radius: 0 var(--md-sys-shape-corner-small)
		var(--md-sys-shape-corner-small) 0;
	margin-top: 16px;
	margin-bottom: 16px;
}

.conditional-section.show {
	display: block;
	animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.survey-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	gap: 1rem;
}

.nav-previous,
.nav-next {
	display: flex;
}

/* ============================================================
   STATUS MESSAGES
   ============================================================ */

.survey-status {
	text-align: center;
	margin-top: 1.5rem;
}

.status-message {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--md-sys-color-on-surface-variant);
	font-size: 0.875rem;
	margin: 0;
}

.status-message .material-icons {
	font-size: 1rem;
	color: #2e7d32;
}

.survey-reset {
	text-align: center;
	margin-top: 1rem;
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */

.thank-you-card {
	background: var(--md-sys-color-surface);
	border-radius: 1rem;
	padding: 3rem 2rem;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.success-icon,
.thank-you-icon {
	font-size: 4rem;
	color: #2e7d32;
	margin-bottom: 1.5rem;
	line-height: 1;
	animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.thank-you-title {
	font-size: 2rem;
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

.thank-you-lead {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--md-sys-color-on-surface-variant);
	margin: 0 0 1.5rem 0;
}

.thank-you-message,
.thank-you-description {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--md-sys-color-on-surface);
	margin: 0 0 2rem 0;
	text-align: left;
}

.info-card {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin: 2rem 0;
	text-align: left;
}

.info-card-title {
	font-size: 1.125rem;
	font-weight: 500;
	color: #1565c0;
	margin: 0 0 1rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.info-card-title i {
	font-size: 1.25rem;
}

.info-card-text {
	font-size: 1rem;
	line-height: 1.6;
	color: #0d47a1;
	margin: 0;
}

.thank-you-actions {
	margin: 2.5rem 0 2rem 0;
}

.md-button-large {
	padding: 1rem 2rem;
	font-size: 1rem;
	gap: 0.75rem;
}

.thank-you-footer {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--md-sys-color-outline-variant);
}

.footer-note {
	font-size: 0.875rem;
	color: var(--md-sys-color-on-surface-variant);
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

.survey-footer {
	background: #000000;
	color: #ffffff;
	padding: 0;
	margin-top: 48px;
}

.survey-footer .footer-content {
	padding: 0.5rem 0;
}

.footer-copyright {
	padding: 0;
}

.footer-copyright .md-flex {
	min-height: auto;
}

.footer-copyright p,
.footer-copyright .copyright-text {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

.footer-credit {
	display: flex;
	align-items: center;
}

.footer-credit a {
	display: inline-block;
	opacity: 0.9;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	line-height: 0;
}

.footer-credit a:hover {
	opacity: 1;
}

.footer-credit img {
	display: block;
	width: 145px;
	height: 25px;
}

/* ============================================================
   HELPER CLASSES
   ============================================================ */

.helper-text {
	font-size: var(--md-sys-typescale-body-small-size);
	color: var(--md-sys-color-on-surface-variant);
	margin-top: 4px;
}

.text-muted {
	color: var(--md-sys-color-on-surface-variant) !important;
}

.mt-2 {
	margin-top: 16px !important;
}

.d-inline-block {
	display: inline-block !important;
}

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

/* Text Transform Utilities */
.text-uppercase,
.md-text-transform-uppercase {
	text-transform: uppercase !important;
	letter-spacing: 0.5px;
}

.text-lowercase,
.md-text-transform-lowercase {
	text-transform: lowercase !important;
}

.text-capitalize,
.md-text-transform-capitalize {
	text-transform: capitalize !important;
}

.md-text-transform-none {
	text-transform: none !important;
}

/* ============================================================
   REQUIRED FIELD INDICATOR
   ============================================================ */

.required-indicator {
	color: var(--md-sys-color-error, #c62828);
	font-weight: 700;
	margin-left: 0.25rem;
	font-size: 1.125rem;
}

/* Screen reader text for required indicator */
.required-indicator[aria-label] {
	position: relative;
}

/* ============================================================
   VALIDATION STATES
   ============================================================ */

/* Error state for fields */
.form-control:invalid,
.form-select:invalid {
	border-color: var(--md-sys-color-error, #c62828);
}

.form-control:invalid:focus,
.form-select:invalid:focus {
	border-color: var(--md-sys-color-error, #c62828);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

/* Valid state (only show after form submission attempt) */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
	border-color: var(--md-sys-color-success, #2e7d32);
}

.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
	border-color: var(--md-sys-color-success, #2e7d32);
	box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

/* Error state for checkbox/radio groups */
fieldset.has-error {
	border-color: var(--md-sys-color-error, #c62828);
	background: rgba(198, 40, 40, 0.03);
}

fieldset.has-error legend {
	color: var(--md-sys-color-error, #c62828);
}

/* Checkbox/Radio Validation */
.was-validated .form-check-input:invalid {
	border-color: var(--md-sys-color-error, #c62828);
}

.was-validated .form-check-input:invalid ~ .form-check-label {
	color: var(--md-sys-color-error, #c62828);
}

.was-validated .form-check-input:valid:checked {
	background-color: var(--md-sys-color-success, #2e7d32);
	border-color: var(--md-sys-color-success, #2e7d32);
}

/* ============================================================
   ERROR MESSAGES
   ============================================================ */

.invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--md-sys-color-error, #c62828);
	padding: 0.5rem 0.75rem;
	background: rgba(198, 40, 40, 0.08);
	border-radius: 0.375rem;
	border-left: 3px solid var(--md-sys-color-error, #c62828);
}

.invalid-feedback::before {
	content: "⚠ ";
	font-weight: 700;
	margin-right: 0.25rem;
}

/* Show error message when field is invalid */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.has-error .invalid-feedback {
	display: block;
}

/* ============================================================
   VALIDATION ANIMATIONS
   ============================================================ */

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-4px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(4px);
	}
}

/* Only shake fieldsets with errors, not individual inputs */
.has-error {
	animation: shake 0.5s ease-in-out;
}

/* Disable animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.has-error {
		animation: none;
	}
}

/* ============================================================
   SMOOTH SCROLLING FOR FOCUS
   ============================================================ */

html {
	scroll-behavior: smooth;
}

/* Disable smooth scrolling when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   SURVEY COMPLETION ALERTS
   ============================================================ */

.survey-completion-alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: linear-gradient(
		135deg,
		var(--md-sys-color-success-container) 0%,
		var(--md-sys-color-tertiary-container) 100%
	);
	border-left: 4px solid var(--md-sys-color-success);
	border-radius: 0.75rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.survey-completion-alert i {
	font-size: 2rem;
	color: var(--md-sys-color-success);
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.completion-content {
	flex: 1;
	color: var(--md-sys-color-on-surface);
}

.completion-content strong {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--md-sys-color-success);
}

/* ============================================================
   SURVEY SUBMIT READY BOX
   ============================================================ */

.survey-submit-ready {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 2rem;
	background: linear-gradient(
		135deg,
		var(--md-sys-color-primary-container) 0%,
		var(--md-sys-color-secondary-container) 100%
	);
	border-left: 5px solid var(--md-sys-color-primary);
	border-radius: 1rem;
	margin-top: 3rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.survey-submit-ready i {
	font-size: 3rem;
	color: var(--md-sys-color-primary);
	flex-shrink: 0;
	margin-top: 0.25rem;
}

.submit-ready-content {
	flex: 1;
}

.submit-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--md-sys-color-primary);
	margin: 0 0 0.75rem 0;
}

.submit-description {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--md-sys-color-on-surface);
	margin: 0;
}

.submit-description strong {
	color: var(--md-sys-color-primary);
	font-weight: 600;
}

/* ============================================================
   FOCUS STATES (ACCESSIBILITY)
   ============================================================ */

.md-textfield-input:focus,
.md-select-input:focus,
.md-checkbox-input:focus,
.md-radio-input:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.matrix-table input[type="radio"]:focus,
.matrix-radio-input:focus {
	outline: 2px solid #4270b7;
	outline-offset: 2px;
	border-color: var(--md-sys-color-primary);
}

/* Ensure focus is visible in high contrast mode */
@media (prefers-contrast: high) {
	.form-control:focus,
	.form-select:focus,
	.form-check-input:focus {
		outline-width: 3px;
		outline-offset: 3px;
	}
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.survey-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	color: var(--md-sys-color-on-surface-variant);
	gap: 12px;
}

.survey-loading .material-icons {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
   FOCUS STATES (ACCESSIBILITY)
   ============================================================ */

.md-textfield-input:focus,
.md-select-input:focus,
.md-checkbox-input:focus,
.md-radio-input:focus,
.matrix-table input[type="radio"]:focus {
	outline: 2px solid #4270b7;
	outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE DESIGN - TABLET
   ============================================================ */

@media (max-width: 992px) {
	.substance-grid {
		gap: 1.5rem;
	}

	.matrix-table thead th {
		padding: 0.75rem 0.5rem;
		font-size: 0.875rem;
	}

	.matrix-statement-col {
		min-width: 240px;
	}

	.matrix-option-col {
		min-width: 90px;
	}

	.matrix-table tbody th,
	.matrix-table tbody td {
		padding: 0.75rem 0.5rem;
	}
}

/* ============================================================
   RESPONSIVE DESIGN - MOBILE
   ============================================================ */

@media (max-width: 768px) {
	.survey-header {
		padding: 24px 0;
	}

	.survey-header h1,
	.header-title {
		font-size: 1.5rem;
	}

	.survey-header p,
	.header-subtitle {
		font-size: 1rem;
	}

	.survey-main,
	.thank-you-main {
		padding: 1rem 0;
	}

	.survey-container {
		padding: 1.5rem;
	}

	.survey-progress-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.survey-progress-bar-container {
		height: 36px;
	}

	.survey-progress-bar {
		padding: 0 0.75rem;
	}

	.survey-progress-percentage {
		font-size: 0.8125rem;
	}

	.survey-info-box,
	.survey-instructions {
		padding: 1rem;
		flex-direction: column;
		text-align: left;
	}

	.survey-info-box .material-icons,
	.survey-instructions i {
		align-self: flex-start;
	}

	.substance-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.matrix-mobile-note {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.matrix-table-wrapper {
		margin: 1rem -1rem;
		border-radius: 0;
	}

	.matrix-table thead th {
		font-size: 0.8125rem;
		padding: 0.75rem 0.375rem;
	}

	.matrix-statement-col {
		min-width: 200px;
	}

	.matrix-option-col {
		min-width: 80px;
	}

	.matrix-table tbody th {
		font-size: 0.9375rem;
	}

	.matrix-table tbody th,
	.matrix-table tbody td {
		padding: 0.75rem 0.5rem;
	}

	.conditional-section {
		margin-left: 12px;
		padding-left: 16px;
	}

	.form-check {
		min-height: 48px;
		margin-bottom: 12px;
	}

	.form-check-input {
		width: 28px;
		height: 28px;
	}

	.checkbox-other-section {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}

	.checkbox-group-separator {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}

	fieldset.survey-field {
		padding: 1.25rem;
	}

	.survey-navigation {
		flex-direction: column;
		gap: 1rem;
	}

	.survey-navigation > div,
	.nav-previous,
	.nav-next {
		width: 100%;
	}

	.survey-navigation .md-button,
	.nav-previous button,
	.nav-next button,
	.nav-next a {
		width: 100%;
		justify-content: center;
	}

	.thank-you-card {
		padding: 2rem 1.5rem;
	}

	.success-icon,
	.thank-you-icon {
		font-size: 3rem;
	}

	.thank-you-title {
		font-size: 1.5rem;
	}

	.thank-you-lead {
		font-size: 1.125rem;
	}

	.info-card {
		padding: 1.25rem;
	}

	.md-button-large {
		width: 100%;
		justify-content: center;
	}

	.drinks-input-wrapper {
		max-width: 100%;
	}

	.survey-footer .footer-content {
		padding: 0.625rem 1rem;
	}

	.footer-copyright .md-flex {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
		min-height: auto;
	}

	.footer-copyright {
		padding: 0;
	}

	.footer-credit {
		justify-content: center;
	}

	.invalid-feedback {
		font-size: 0.8125rem;
		padding: 0.375rem 0.625rem;
	}

	.required-indicator {
		font-size: 1rem;
	}

	.survey-completion-alert,
	.survey-submit-ready {
		flex-direction: column;
		gap: 1rem;
		padding: 1.25rem;
	}

	.survey-completion-alert i {
		font-size: 1.75rem;
	}

	.survey-submit-ready i {
		font-size: 2.5rem;
	}

	.submit-title {
		font-size: 1.25rem;
	}

	.submit-description {
		font-size: 0.9375rem;
	}
}

/* ============================================================
   RESPONSIVE DESIGN - SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
	.survey-container {
		padding: 1rem;
		border-radius: 0.5rem;
	}

	.survey-progress-container {
		padding: 1rem;
	}

	.survey-progress-bar-container {
		height: 40px;
	}

	.survey-progress-percentage {
		font-size: 0.875rem;
		font-weight: 700;
	}

	.survey-section-title {
		font-size: 1.25rem;
	}

	.matrix-radio-input,
	.matrix-table input[type="radio"] {
		width: 1.5rem;
		height: 1.5rem;
	}

	.matrix-table {
		min-width: 600px;
	}

	.matrix-statement-col {
		min-width: 180px;
	}

	.matrix-option-col {
		min-width: 70px;
	}

	.days-input-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.days-input {
		width: 100%;
		max-width: 120px;
	}

	.days-label {
		white-space: normal;
		font-size: 0.875rem;
	}

	.substance-field {
		gap: 0.5rem;
	}

	.drinks-input {
		width: 80px;
	}

	fieldset.survey-field {
		padding: 1rem;
		border-radius: 0.5rem;
	}

	.checkbox-other-section,
	.checkbox-group-separator {
		margin-top: 1rem;
		padding-top: 1rem;
	}

	.thank-you-card {
		padding: 1.5rem 1rem;
		border-radius: 0.5rem;
	}

	.success-icon,
	.thank-you-icon {
		font-size: 2.5rem;
	}

	.thank-you-title {
		font-size: 1.25rem;
	}

	.invalid-feedback::before {
		display: block;
		margin-bottom: 0.25rem;
	}

	.survey-submit-ready {
		margin-top: 2rem;
	}

	.submit-title {
		font-size: 1.125rem;
	}
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
	.days-input,
	.drinks-input {
		min-height: 48px;
		font-size: 1rem;
	}

	.days-input::-webkit-inner-spin-button,
	.days-input::-webkit-outer-spin-button {
		height: 48px;
	}

	.matrix-radio-label {
		padding: 0.75rem;
		min-height: 48px;
		min-width: 48px;
	}

	.matrix-radio-input,
	.matrix-table input[type="radio"] {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* Larger focus indicators for touch devices */
	.form-control:focus,
	.form-select:focus,
	.form-check-input:focus {
		outline-width: 3px;
		outline-offset: 3px;
	}
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
	.survey-header,
	.survey-navigation,
	.survey-footer {
		display: none;
	}

	.survey-container {
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.survey-footer {
		background: #ffffff;
		color: #000000;
		border-top: 1px solid #ccc;
		page-break-before: avoid;
	}

	.footer-copyright-text p {
		color: #000000;
	}

	.survey-completion-alert,
	.survey-submit-ready {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}
}