/* Øvingssenteret – kun mobil (max-width 768px / 480px). Påvirker ikke desktop. */

@media (max-width: 768px) {
	.practice-layout {
		flex-direction: column;
		min-height: 100vh;
		padding-bottom: 0;
	}
	.practice-sidebar {
		width: 100%;
		height: auto;
		position: relative;
		border-right: none;
		border-bottom: 1px solid #E5E7EB;
		flex-shrink: 0;
	}
	/* Mobil: kompakt header med hamburger */
	.practice-sidebar-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		min-height: 52px;
		background: #fff;
		border-bottom: 1px solid #E5E7EB;
		position: relative;
		z-index: 1001;
	}
	.practice-sidebar-mobile-header .practice-sidebar-brand {
		padding: 0;
		border: none;
		font-size: 0.9375rem;
		color: #374151;
	}
	.practice-sidebar-mobile-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		background: #f3f4f6;
		border-radius: 10px;
		cursor: pointer;
		transition: background .2s;
	}
	.practice-sidebar-mobile-toggle:hover {
		background: #e5e7eb;
	}
	.practice-sidebar-mobile-toggle span {
		display: block;
		width: 20px;
		height: 2px;
		background: #374151;
		border-radius: 1px;
		transition: transform .2s, opacity .2s;
	}
	.practice-sidebar-open .practice-sidebar-mobile-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.practice-sidebar-open .practice-sidebar-mobile-toggle span:nth-child(2) {
		opacity: 0;
	}
	.practice-sidebar-open .practice-sidebar-mobile-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	/* Drawer: skjult som standard, åpnes ved .practice-sidebar-open */
	.practice-sidebar-drawer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 16px;
		padding-top: calc(52px + 16px);
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
		visibility: hidden;
		opacity: 0;
		transition: visibility .2s, opacity .2s;
	}
	.practice-sidebar-open .practice-sidebar-drawer {
		visibility: visible;
		opacity: 1;
	}
	.practice-sidebar-drawer-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background: rgba(0,0,0,0.35);
		visibility: hidden;
		opacity: 0;
		transition: visibility .2s, opacity .2s;
	}
	.practice-sidebar-open .practice-sidebar-drawer-backdrop {
		visibility: visible;
		opacity: 1;
	}
	.practice-sidebar-drawer .practice-sidebar-brand {
		display: none;
	}
	.practice-sidebar-group-title {
		padding: 8px 0 4px;
		margin-top: 12px;
	}
	.practice-sidebar-group-title:first-child {
		margin-top: 0;
	}
	.practice-sidebar-nav {
		display: block;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.practice-sidebar-nav li {
		margin: 0;
	}
	.practice-sidebar-nav a {
		display: block;
		padding: 14px 16px;
		min-height: 48px;
		border-radius: 10px;
		margin-bottom: 4px;
		font-size: 1rem;
	}
	.practice-sidebar-link-desc {
		display: block;
		font-size: 0.8125rem;
		color: #6b7280;
		margin-top: 2px;
		font-weight: 400;
	}
	.practice-sidebar-bottom {
		position: static;
		margin-top: 24px;
		padding: 16px 0 0;
		border-top: 1px solid #E5E7EB;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		box-shadow: none;
	}
	.practice-sidebar-account {
		padding: 0;
	}
	.practice-sidebar-account a {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		padding: 12px 16px;
		font-size: 1rem;
	}
	.practice-sidebar .practice-sidebar-btn {
		flex: 1;
		min-width: 0;
		min-height: 48px;
		margin: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 14px 20px;
		font-size: 1rem;
	}
	.practice-sidebar-membership {
		margin: 0 0 12px;
		padding: 12px 16px;
	}

	.practice-content {
		flex: 1;
		min-width: 0;
	}
	.practice-main {
		padding: 16px 12px;
		width: 100%;
		max-width: none;
	}
	.practice-topbar {
		padding: 10px 12px;
		flex-wrap: wrap;
		gap: 8px;
	}
	.practice-topbar h1 {
		font-size: 1.125rem;
	}
	.practice-topbar-left {
		flex-wrap: wrap;
		gap: 8px;
	}

	.practice-card {
		padding: 16px 14px;
	}
	.practice-card-inner {
		flex-direction: column;
		gap: 20px;
	}
	.practice-question-wrap {
		flex: none;
	}
	.practice-question-wrap img {
		max-height: min(50vh, 320px);
	}
	.practice-choices-col {
		flex: none;
		max-width: none;
		width: 100%;
	}
	.practice-choices {
		gap: 8px;
	}
	.practice-choice {
		min-height: 52px;
		padding: 12px;
	}
	.practice-feedback {
		padding: 16px 14px;
		margin-top: 16px;
	}
	.practice-next-btn {
		min-height: 44px;
		padding: 12px 20px;
	}

	.practice-question-nav {
		padding: 10px 0;
		gap: 6px;
	}
	.practice-question-nav .practice-nav-prev,
	.practice-question-nav .practice-nav-next {
		min-height: 44px;
		padding: 10px 14px;
	}
	.practice-question-nav .practice-nav-num {
		min-width: 36px;
		min-height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.practice-modal-overlay {
		padding: 16px;
		align-items: flex-end;
	}
	.practice-modal {
		max-height: 90vh;
		overflow-y: auto;
		border-radius: 16px 16px 0 0;
		padding: 24px 20px;
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
	}
	.practice-modal-cards {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.practice-modal-close {
		min-width: 44px;
		min-height: 44px;
		top: 12px;
		right: 12px;
	}

	.fulltest-quiz {
		padding: 12px 10px;
	}
	.fulltest-topbar {
		padding: 10px 12px;
		flex-wrap: wrap;
	}
	.fulltest-card {
		padding: 28px 20px;
		border-radius: 16px;
	}
	.fulltest-card h1 {
		font-size: 1.375rem;
	}
	.fulltest-card-inner {
		flex-direction: column;
		gap: 20px;
	}
	.fulltest-question-wrap {
		flex: none;
	}
	.fulltest-question-wrap img {
		max-height: min(45vh, 280px);
	}
	.fulltest-choices-col {
		flex: none;
		max-width: none;
		width: 100%;
	}
	.fulltest-choice {
		min-height: 52px;
		padding: 12px;
	}
	.fulltest-nav {
		gap: 8px;
		margin-top: 16px;
	}
	.fulltest-nav button {
		min-height: 44px;
		padding: 12px 16px;
	}
	.fulltest-finish-btn {
		min-height: 44px;
		padding: 14px 24px;
	}
	.fulltest-result-card {
		padding: 28px 20px;
		margin: 16px auto;
	}
	.fulltest-result-card #fulltest-iq {
		font-size: 2.5rem;
	}

	.results-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.results-stat-card {
		padding: 16px;
	}
	.results-section {
		padding: 16px;
		margin-bottom: 16px;
	}
	.results-section {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px;
		padding-right: 12px;
	}
	.results-section .results-table {
		min-width: 480px;
	}
	.results-chart-wrap {
		padding: 16px;
	}
	.results-chart-container {
		height: 200px;
	}
	.results-chart-container.bar-chart {
		height: 240px;
	}

	.profile-page h1 {
		font-size: 1.25rem;
	}
	.profile-card {
		padding: 16px;
		margin-bottom: 16px;
	}
	.profile-form-group input {
		max-width: none;
		min-height: 44px;
	}
	.profile-btn {
		min-height: 44px;
		padding: 12px 20px;
	}
	.profile-card:has(.purchases-table) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.purchases-table {
		min-width: 420px;
	}

	.auth-card {
		padding: 24px 20px;
		margin: 16px;
		max-width: none;
	}
	.auth-card input {
		min-height: 44px;
		padding: 12px 14px;
	}
	.auth-card .btn-primary {
		min-height: 48px;
		padding: 14px;
	}

	.cert-card {
		padding: 20px 16px;
		margin: 16px 0;
	}
	.cert-canvas-wrap {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 auto;
	}
	.cert-canvas-wrap #Canvas {
		transform-origin: 0 0;
	}
	.cert-download-btn {
		min-height: 44px;
		padding: 12px 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.practice-paywall {
		padding: 24px 20px;
		margin: 0;
	}
	.practice-paywall .practice-next-btn {
		min-height: 44px;
	}
}

@media (max-width: 480px) {
	.practice-main {
		padding: 12px 10px;
	}
	.practice-card {
		padding: 14px 12px;
	}
	.practice-choices {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.practice-choice {
		min-height: 56px;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.practice-choice h4 {
		margin-bottom: 0;
		min-width: 24px;
	}
	.practice-choice img {
		min-height: 44px;
		max-width: 80px;
		margin-left: auto;
	}

	.fulltest-choices {
		grid-template-columns: 1fr;
	}
	.fulltest-choice {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		min-height: 56px;
	}
	.fulltest-choice h4 {
		margin-bottom: 0;
		min-width: 24px;
	}
	.fulltest-choice img {
		max-width: 72px;
		margin-left: auto;
	}

	.results-stats {
		grid-template-columns: 1fr;
	}
	.practice-sidebar-nav a {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
}