/**
 * Go Test Interface Styles
 */

.gotest-container {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.gotest-container .gotest-block {
	background-color: var(--gm-block-bg);
	padding: 32px;
	border-radius: 25px;
}
.gotest-container h1 {
	margin-top: 0;
	margin-bottom: 20px;
}
.test-date {
	font-size: 15px;
}
.test-footnote {
	margin-top: 20px;
	font-size: 15px;
}

/* Settings Panel */

.gotest-header h2 {
	margin-top: 0;
}

select.gotest-selector {
	font-size: 16px;
	font-weight: 500;
}

.gotest-description {
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 28px;
	line-height: 1.4;
}

.setting-group {
	margin-bottom: 20px;
	max-width: 370px;
}

.setting-group label {
	display: block;
}

.setting-group input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	padding: 0;
	margin: 0;
	background: linear-gradient(to right, var(--gm-blue) var(--progress, 0%), var(--gm-progress-bg) var(--progress, 0%));
	border: none;
	border-radius: 0;
	outline: none;
	cursor: pointer;
}

/* Важно помнить: псевдоэлементы ::-webkit-* и ::-moz-* нельзя объединять в один селектор — браузер игнорирует весь блок, если не понимает часть. */
.setting-group input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 8px;
	height: 20px;
	background: var(--gm-blue);
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.setting-group input[type="range"]::-moz-range-thumb {
	width: 8px;
	height: 20px;
	background: var(--gm-blue);
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.setting-group input[type="range"]::-moz-range-track {
	height: 6px;
	background: var(--gm-progress-bg);
	border-radius: 0;
}

.setting-group input[type="range"]::-moz-range-progress {
	height: 6px;
	background: var(--gm-blue);
	border-radius: 0;
}

.setting-group .count-display,
.level-display,
.spread-display {
	font-weight: 500;
	color: var(--gm-blue);
}

.setting-group input[type="number"],
.setting-group select {
	width: 100%;
	padding: 8px;
}

.setting-group small {
	display: block;
	font-style: italic;
	margin-top: 5px;
}

.topics-selector {
	border-top: 1px solid var(--gm-border);
	padding-top: 20px;
}

.topics-checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.topics-checkboxes label {
	display: flex;
	align-items: center;
	font-weight: normal;
	margin: 0;
}

.topics-checkboxes input[type="checkbox"] {
	margin-right: 8px;
}

.gotest-buttons {
	display: flex;
	gap: 15px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.gotest-start-btn,
.gotest-continue-btn {
	padding: 12px 30px;
}

/* History Section */

.gotest-history h3 {
	margin-top: 0;
}

.history-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history-table th,
.history-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--gm-border);
}

.history-table th {
	font-weight: 500;
	white-space: nowrap;
}

.history-table tbody tr {
	transition: background 0.2s;
}

.history-table tr:hover {
	background: var(--gm-table-hover);
}

.history-table td:first-child {
	font-weight: 500;
}

.view-details-btn {
	padding: 6px 12px;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}

/* Login Notice */
.gotest-login-notice {
	padding: 20px;
	border-radius: 4px;
	margin-top: 30px;
}

.gotest-login-notice p {
	margin: 0;
}

.gotest-login-notice a {
	font-weight: 500;
}

/* Modal Window (matching skill_window styles from style.css) */
#gotest_window {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: var(--bg-light);
	display: none;
	z-index: 99999;
	overflow-y: overlay!important;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

/* Dark theme support */
.bb-dark-theme #gotest_window {
	background: var(--bg-dark);
}

/* Loading animation (matching skill tree pattern) */
#gotest_window.loading_animation .loading_elem {
	display: block;
}

.loading_elem {
	width: 230px;
	height: 6px;
	overflow: hidden;
	position: absolute;
	top: 35%;
	left: calc(50% - 115px);
	display: none;
}

.loading_inner_elem {
	background-color: #007cff;
	margin-top: 0;
	margin-left: -230px;
	animation-name: bounce_loadingProgress;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	width: 230px;
	height: 12px;
}

@keyframes bounce_loadingProgress {
	0% {
		margin-left: -230px;
	}
	100% {
		margin-left: 230px;
	}
}

/* Close button (matching skill_close styles) */
#gotest_close {
	top: 19px;
	right: 24px;
	color: black;
	position: fixed;
	background: rgb(0 0 0 / 8%);
	z-index: 9999;
	border: none;
	cursor: pointer;
	padding: 10px;
	line-height: 1;
}

#gotest_close i {
	font-size: 42px;
}

.bb-dark-theme #gotest_close {
	color: #c8c8c8;
	background: rgba(255, 255, 255, 0.12);
}

/* GoTest Output Styles (Server-Side Rendered) */
.gotest-output {
	width: 100%;
}

.gotest-output .test-info {
	padding: 0 32px;
	margin-top: 14px;
	margin-bottom: 22px;
}
.gotest-output .test-info h2 {
	margin-bottom: 4px;
}
.gotest-output .test-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--gm-text-secondary, #666);
	font-size: 14px;
}
.gotest-output .test-user-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.gotest-output .test-user-link:hover {
	color: var(--gm-link, #0073aa);
}
.gotest-output .test-user-link img {
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.gotest-output .section {
	border: 1px solid var(--gm-border);
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 32px;
}

.gotest-output .section h3 {
	border-bottom: 1px solid var(--gm-border);
	padding-bottom: 10px;
}

.gotest-output .section h4 {
	margin-top: 0;
	margin-bottom: 15px;
	font-weight: 500;
}

/* Overall Performance Section */
.overall-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

:root {
	--gotest-stat-bg: #f9f9f9;
}
.bb-dark-theme {
	--gotest-stat-bg: #2e2e2e;
}

.stat-item {
	background: var(--gotest-stat-bg);
	padding: 20px;
	border-radius: 6px;
	border-left: 4px solid var(--gm-blue);
	text-align: center;
	min-height: 124px;
}

.stat-item .stat-label {
	display: block;
	font-size: 13px;
	margin-bottom: 8px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.stat-item .stat-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.stat-item .stat-info {
	font-size: 15px;
}
	
/* Skills Performance Section */
.skill-sets {
	/* display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
	display: flex;
	flex-wrap: wrap;	
	gap: 48px;
}
.skillset {
	flex: 1 1 190px;
}

.gotest-output .skill_progress {
	max-width: 100%;
}
.skill_progress.no-data .skill_legend{
	opacity: 0.5;
}
.skill_legend {
	font-size: 15px;
}

/* Topics Performance Section */
.topics-list {
	display: grid;
	gap: 20px;
}

.topic-item {
	/* border: 1px solid var(--gm-border); */
	border-radius: 12px;
	padding: 20px;
	transition: all 0.2s;
	background: var(--gotest-stat-bg);
}

.topic-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.topic-item.super,
.topic-item.good {
	background: #33cc660f;
}

.topic-item.low {
	background: #ffae000d;
}

.topic-item.verylow,
.topic-item.superlow {
	background: #e3051e0a;
}

.topic-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.topic-name {
	font-size: 18px;
	font-weight: 500;
}

.topic-badge {
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 38px;
	/* font-weight: 500; */
}

.topic-badge.green {
	background: var(--gm-green);
	color: white;
}

.topic-badge.yellow {
	background: var(--gm-yellow);
	color: white;
}

.topic-badge.red {
	background: var(--gm-red);
	color: white;
}

.topic-stats {
	display: flex;
	gap: 25px;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.topic-stat {
	display: flex;
	gap: 5px;
	font-size: 14px;
}

.topic-stat .value {
	font-weight: 700;
}

.topic-stat .value.super,
.topic-stat .value.good {
	color: var(--gm-green);
}
.topic-stat .value.low {
	color: var(--gm-yellow);
}
.topic-stat .value.verylow,
.topic-stat .value.superlow {
	color: var(--gm-red);
}

/* Related Content */
.related-content {
	margin-top: 15px;
	border-top: 1px solid var(--gm-border);
	padding-top: 10px;
}

.related-content summary {
	cursor: pointer;
	font-weight: 500;
	padding: 8px;
	border-radius: 4px;
	transition: background 0.2s;
	user-select: none;
	font-size: 15px;
	text-transform: uppercase;
	transition: color 0.2s;
}

.related-content summary:hover {
	/* background: var(--bg-light); */
	color: var(--gm-blue);
}

.related-content[open] summary {
	margin-bottom: 15px;
}

.related-content .content-item {
	margin-bottom: 15px;
	padding: 12px 20px;
	background: white;
	border-radius: 4px;
	/* border-left: 3px solid var(--gm-blue); */
}

.bb-dark-theme .related-content .content-item {
	background: #252525;
}

.related-content .content-link {
	font-size: 15px;
	color: #666;
	/* margin-bottom: 5px; */
	font-weight: 500;
	display: block;
	transition: color 0.2s;
}
.related-content .content-link:hover {
	color: var(--gm-blue);
}
.bb-dark-theme .related-content .content-link {
	color: #c6c6c6;
}
.bb-dark-theme .related-content .content-link:hover {
	color: var(--gm-blue);
}
span.content-title {
	margin-right: 5px;
}
.related-content .content-type {
	font-size: 11px;
	/* text-transform: uppercase; */
	/* margin-left: 8px; */
	padding: 2px 8px;
	background: #f9f9f9;
	border-radius: 32px;
	color: #777777;
	font-weight: 400;
}

.bb-dark-theme .related-content .content-type {
	background: #333;
	color: #a9a9a9;
}

.related-content .content-reason {
	margin: 8px 0 0 0;
	font-size: 15px;
	line-height: 1.5;
}

/* Recommendations Section */
.recommendations-intro {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
}

.recommendations .content-item {
	margin-bottom: 15px;
	padding: 12px;
	background: #007cff0d;
	border-radius: 4px;
	border-left: 3px solid var(--gm-blue);
}

.recommendations .content-link {
	font-size: 15px;
	font-weight: 500;
	display: block;
}
.bb-dark-theme .recommendations .content-link {
	color: #c6c6c6;
}
.bb-dark-theme .recommendations .content-link:hover {
	color: var(--gm-blue);
}
.recommendations .content-type {
	font-size: 11px;
	/* text-transform: uppercase; */
	margin-left: 8px;
	padding: 2px 8px;
	background: #fff;
	border-radius: 32px;
	color: #777;
	font-weight: 400;
}
.bb-dark-theme .recommendations .content-type {
	background: #252525;
	color: #a9a9a9;
}

.recommendations .content-reason {
	margin: 8px 0 0 0;
	font-size: 15px;
	line-height: 1.5;
}

/* Disabled slider state */
.setting-group input[type="range"].disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Duration slider with blocked range for All Levels mode */
/* We don't use this blocking feature anymore, but keeping it for reference */
.setting-group input[type="range"].all-levels-mode {
	background: 
		/* Top layer: transparent 0-50% (stripes show), then normal progress colors */
		linear-gradient(
			to right,
			transparent 0%,
			transparent 50%,
			var(--gm-blue) 50%,
			var(--gm-blue) var(--progress, 50%),
			var(--gm-progress-bg) var(--progress, 50%)
		),
		/* Middle: stripes pattern (visible only where top layer is transparent) */
		repeating-linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0.4) 0px,
			rgba(255, 255, 255, 0.4) 2px,
			transparent 2px,
			transparent 4px
		),
		/* Bottom: blue base for blocked zone */
		linear-gradient(var(--gm-blue), var(--gm-blue));
}

/* Firefox-specific styles for All Levels mode */
.setting-group input[type="range"].all-levels-mode::-moz-range-track {
	background: var(--gm-progress-bg);
}

.setting-group input[type="range"].all-levels-mode::-moz-range-progress {
	background: var(--gm-blue);
}

/* Setting label row - for label + checkbox on same line */
.setting-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* All Levels Checkbox */
.all-levels-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-weight: normal;
}

.all-levels-checkbox input[type="checkbox"] {
	margin: 0;
}

/* Duration display in label */
.duration-name {
	font-weight: 500;
	color: var(--gm-blue);
}

.duration-time {
	font-weight: normal;
	color: #888;
	font-size: 0.9em;
}

.bb-dark-theme .duration-time {
	color: #999;
}

.history-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll на iOS */
}

@media (max-width: 768px) {
	.history-table th:nth-child(3),
	.history-table td:nth-child(3),
	.history-table th:nth-child(5),
	.history-table td:nth-child(5) {
			display: none;
	}
	.history-table {
		font-size: 15px;
	}
	
	#gotest_close {
		display: none;
	}
}

/* Responsive Design */
@media (max-width: 580px) {
	.gotest-container {
		padding: 15px 0;
	}
	.gotest-container .gotest-block {
    padding: 12px;
	}
	.gotest-output .test-info {
    padding: 0 12px;
	}
	
	.gotest-settings,
	.gotest-results,
	.gotest-history {
		padding: 20px;
	}
	
	.topics-checkboxes {
		grid-template-columns: 1fr;
	}
	
	.history-table {
		font-size: 14px;
	}
	
	.history-table th,
	.history-table td {
		padding: 8px;
	}
	
	.gotest-controls {
		flex-direction: column;
	}
	
	.gotest-controls button {
		width: 100%;
	}
	
	/* Output sections responsive */
	.gotest-output .section {
		padding: 15px;
    margin-bottom: 28px;
	}
	
	.overall-stats {
		gap: 15px;
	}
	
	.stat-item .stat-value {
		font-size: 24px;
	}

	.topic-item {
    padding: 16px;
	}
	.related-content[open] summary {
    margin-bottom: 5px;
	}
	.related-content .content-item, .recommendations .content-item {
    margin-bottom: 8px;
    padding: 8px 20px;
	}
	
	.skill-stats,
	.topic-stats {
		flex-direction: column;
		gap: 2px;
	}
	
	.skill-header,
	.topic-header {
		align-items: flex-start;
		gap: 8px;
	}

	.skill-sets {
    gap: 32px;
	}
	.retake-btn {
    margin-bottom: 12px;
	}
}

/* Result Actions */
.gotest-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	/* margin-top: 24px; */
}

.test-info-item {
	font-size: 16px;
}

/* Share button in test-info */
.test-info .share-result {
	margin-top: 12px;
}

.copy-result-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}

.copy-result-link-btn i {
	font-size: 16px;
}

.copy-result-link-btn.under-test-result {
	font-size: inherit;
	margin-bottom: 18px;
}

/* Feedback Form */
.gotest-feedback {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--gm-border);
}

.feedback-toggle-btn {
	font-size: 17px;
	transition: color 0.2s;
}

.feedback-toggle-btn:hover {
	color: var(--gm-blue);
}

.toggle-icon {
	font-size: 10px;
	transition: transform 0.2s;
}

.feedback-form-container {
	margin-top: 16px;
}

.feedback-intro {
	margin: 0 0 16px 0;
	font-size: 14px;
}

.feedback-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.feedback-rating label:first-child,
.feedback-message label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 14px;
}

/* Star Rating */
.rating-stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.rating-stars input {
	display: none;
}

.rating-stars label {
	cursor: pointer;
	font-size: 28px;
	color: var(--gm-border);
	transition: color 0.15s;
}

.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked ~ label {
	color: #ffc107;
}

.feedback-message textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--gm-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	min-height: 100px;
	box-sizing: border-box;
}

.feedback-message textarea:focus {
	outline: none;
	border-color: var(--gm-blue, #007cff);
}

.feedback-submit-btn {
	align-self: flex-start;
	font-size: 14px;
	transition: background 0.2s, opacity 0.2s;
}

.feedback-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.feedback-success {
	display: flex;
	font-weight: 500;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #33cc660f;
	border-radius: 8px;
	color: var(--gm-green);
}

.feedback-success .success-icon {
	font-size: 24px;
	color: var(--gm-green);
}

.feedback-success p {
	margin: 0;
	font-size: 14px;
}