/* ============================================================
   LMNTRTI: Student Registrations - front styles
   ============================================================ */

.lsr-container {
	--lsr-surface: #ffffff;
	--lsr-section-bg: #e0f2f1;
	--lsr-accent: #00796b;
	--lsr-accent-soft: rgba( 0, 121, 107, 0.3 );
	--lsr-action: #0056b3;
	--lsr-action-hover: #004085;
	--lsr-text: #000000;
	--lsr-label: #222222;
	--lsr-muted: #444444;
	--lsr-heading: #333333;
	--lsr-border: #bbbbbb;
	--lsr-locked: #f1f1f1;
	--lsr-danger: #c62828;
	--lsr-danger-bg: #fdecea;
	--lsr-success-bg: #e8f5e9;
	--lsr-success: #2e7d32;
	--lsr-shadow: 0 4px 10px rgba( 0, 0, 0, 0.1 );

	--lsr-radius: 6px;
	--lsr-radius-sm: 4px;
	--lsr-field-height: 45px;
	--lsr-gap: 20px;
	--lsr-col-min: 220px;
	--lsr-max-width: 1700px;
	--lsr-gate-width: 560px;

	max-width: var( --lsr-max-width );
	margin: auto;
	background: var( --lsr-surface );
	padding: 30px;
	border-radius: 8px;
	box-shadow: var( --lsr-shadow );
}

/* Sections */

.lsr-container .lsr-section-title {
	background-color: var( --lsr-section-bg );
	color: var( --lsr-accent );
	padding: 10px 15px;
	font-size: 18px;
	border-radius: var( --lsr-radius-sm );
	margin: 25px 0 15px 0;
}

.lsr-container .lsr-qual-title {
	font-size: 16px;
	color: var( --lsr-heading );
	margin-bottom: 8px;
}

.lsr-qual-block {
	margin-bottom: 25px;
}

/* Layout */

.lsr-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --lsr-gap );
	margin-bottom: 15px;
}

.lsr-row-tight {
	gap: 12px;
}

.lsr-col {
	flex: 1;
	min-width: var( --lsr-col-min );
	display: flex;
	flex-direction: column;
}

.lsr-col-wide {
	flex: 3;
}

.lsr-row-tight .lsr-col {
	flex: 1 1 0;
	min-width: 0;
}

.lsr-col-filler {
	flex: 5;
}

.lsr-col-action {
	flex: 0 0 auto;
	min-width: 0;
	justify-content: flex-end;
}

/* Fields */

.lsr-container label {
	font-size: 14px;
	font-weight: bold;
	color: var( --lsr-label );
	margin-bottom: 5px;
}

.lsr-container .lsr-inline-label {
	margin-bottom: 0;
	cursor: pointer;
	font-weight: normal;
	font-size: 15px;
}

.lsr-required {
	color: var( --lsr-danger );
}

.lsr-container input:not([type="checkbox"]),
.lsr-container select,
.lsr-container textarea {
	height: var( --lsr-field-height );
	box-sizing: border-box;
	padding: 0 12px;
	border: 1.5px solid var( --lsr-border );
	border-radius: var( --lsr-radius );
	font-size: 15px;
	color: var( --lsr-text );
	background-color: var( --lsr-surface );
	outline: none;
	width: 100%;
}

.lsr-container input:not([type="checkbox"])::placeholder,
.lsr-container textarea::placeholder {
	color: var( --lsr-muted );
	opacity: 1;
}

.lsr-container input:not([type="checkbox"]):not([readonly]):focus,
.lsr-container select:not(:disabled):focus,
.lsr-container textarea:not([readonly]):focus {
	border-color: var( --lsr-accent );
	box-shadow: 0 0 5px var( --lsr-accent-soft );
	color: var( --lsr-text ) !important;
	background-color: var( --lsr-surface ) !important;
}

.lsr-container input:not([type="checkbox"])[readonly]:focus,
.lsr-container textarea[readonly]:focus {
	border-color: var( --lsr-border );
	box-shadow: none;
}

/* Date fields, which browsers style on their own */

.lsr-container input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	line-height: normal;
}

.lsr-container input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	padding: 4px;
	opacity: 0.6;
}

.lsr-container input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

.lsr-container input[type="date"]:not(:focus):invalid::-webkit-datetime-edit {
	color: var( --lsr-muted );
}

/* File fields */

.lsr-container input[type="file"] {
	padding: 8px 12px;
	line-height: 1;
	border: 1.5px solid var( --lsr-border );
	border-radius: var( --lsr-radius );
}

.lsr-container input[type="file"]::file-selector-button {
	font-family: inherit;
	font-size: 14px;
	color: var( --lsr-label );
	background: #f5f5f5;
	border: 1px solid var( --lsr-border );
	border-radius: var( --lsr-radius-sm );
	padding: 5px 12px;
	margin-right: 10px;
	cursor: pointer;
}

.lsr-container input[type="file"]::-webkit-file-upload-button {
	font-family: inherit;
	font-size: 14px;
	color: var( --lsr-label );
	background: #f5f5f5;
	border: 1px solid var( --lsr-border );
	border-radius: var( --lsr-radius-sm );
	padding: 5px 12px;
	margin-right: 10px;
	cursor: pointer;
}

/* Fields the student cannot edit */

.lsr-container input:not([type="checkbox"])[readonly],
.lsr-container input:not([type="checkbox"]):disabled,
.lsr-container textarea[readonly],
.lsr-container select:disabled {
	background-color: var( --lsr-locked ) !important;
	color: var( --lsr-text ) !important;
	opacity: 1;
	cursor: default;
}

.lsr-container textarea {
	padding-top: 10px;
	resize: vertical;
}

.lsr-container input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.lsr-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 15px 0;
	font-size: 15px;
	color: var( --lsr-text );
}

/* Buttons */

.lsr-container .lsr-btn {
	background-color: var( --lsr-action );
	color: #ffffff;
	border: none;
	padding: 12px 25px !important;
	font-size: 16px;
	font-weight: bold;
	border-radius: var( --lsr-radius-sm );
	cursor: pointer;
	transition: background 0.3s;
	height: var( --lsr-field-height );
	width: auto;
}

.lsr-container .lsr-btn:hover {
	background-color: var( --lsr-action-hover );
}

.lsr-container .lsr-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.lsr-container .lsr-btn-submit {
	display: block;
	margin: 30px auto 0 auto;
}

.lsr-container .lsr-link {
	background: none;
	border: none;
	padding: 0;
	color: var( --lsr-action );
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	width: auto;
	height: auto;
}

/* Messages */

.lsr-notice {
	display: none;
	padding: 12px 15px;
	border-radius: var( --lsr-radius-sm );
	margin-bottom: 15px;
	font-size: 15px;
	background-color: var( --lsr-success-bg );
	color: var( --lsr-success );
}

.lsr-notice.is-visible {
	display: block;
}

.lsr-notice-error {
	background-color: var( --lsr-danger-bg );
	color: var( --lsr-danger );
}

.lsr-error {
	display: block;
	color: var( --lsr-danger );
	font-size: 13px;
	margin-top: 4px;
}

.lsr-has-error input,
.lsr-has-error select,
.lsr-has-error textarea {
	border-color: var( --lsr-danger );
}

.lsr-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 18px 0 0 0;
	padding-top: 14px;
	border-top: 1px solid #eeeeee;
}

.lsr-container #lsr-resend {
	color: var( --lsr-action );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	min-width: 170px;
	text-align: left;
}

.lsr-container #lsr-resend:hover {
	text-decoration: underline;
}

.lsr-container #lsr-resend[disabled] {
	color: var( --lsr-muted );
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	opacity: 1;
}

.lsr-container #lsr-change-email {
	color: var( --lsr-muted );
	font-size: 13px;
	text-decoration: none;
	margin-left: auto;
}

.lsr-container #lsr-change-email:hover {
	text-decoration: underline;
}

/* Single purpose screens: email gate and thank you */

.lsr-gate,
.lsr-done {
	--lsr-max-width: var( --lsr-gate-width );

	padding: 24px;
}

.lsr-gate .lsr-row {
	gap: 14px;
	margin-bottom: 0;
}

.lsr-gate .lsr-col,
.lsr-gate .lsr-col-action {
	flex: 1 1 100%;
	min-width: 100%;
}

.lsr-gate .lsr-col-action {
	margin-top: 4px;
}

.lsr-gate .lsr-btn {
	width: 100%;
}

.lsr-gate .lsr-section-title,
.lsr-done .lsr-section-title {
	margin-top: 0;
}

.lsr-lead-text {
	font-size: 15px;
	color: var( --lsr-muted );
	margin: 0 0 20px 0;
}

.lsr-verified {
	font-size: 14px;
	color: var( --lsr-accent );
	margin: 0 0 10px 0;
}

.lsr-file-note {
	font-size: 13px;
	color: var( --lsr-muted );
	margin-top: 10px;
}

.lsr-hidden {
	display: none;
}

/* Small screens */

@media ( max-width: 782px ) {

	.lsr-container {
		padding: 18px;
	}

	.lsr-col {
		min-width: 100%;
	}

	.lsr-row-tight .lsr-col {
		flex: 1 1 100%;
		min-width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.lsr-container .lsr-btn {
		transition: none;
	}
}