@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------------------------------------

		Group 7
		Anniki Skeidsvoll Edén,  Ramine Jalili, Therese Andersson,
		Viggo Strömberg, Franco K, Karl Jones och Artin
		Webbadress: http://#
		
		INNEHÅLL

		01 HTML * Adjustments site-wide 
        02 Body
        03 Typography
        04 Images and logo
		05 HEADING
		06 Header
		07 Navbar
		08 Buttons
		09 Pharagraps
		10 Citat, Blockqoute
		11 Links
		13 Main page
		14 Section Login
		15 Section Introduction
		16 Section 
		17 Section 
		18 Footer

		-----------------------------------------------------------------------------------*/

/* 01 HTML */
* {
	box-sizing: border-box;
	font-kerning: none;
	margin: 0;
	padding: 0;
}

:root {
	--primary: #4F46E5;
	/* Main color for buttons and highlights*/
	--primary-dark: #4338CA;
	/* Darker version for when hovering over buttons */
	--background-color: #F9FAFB;
	/* The main background color of the page */
	--sidebar-color: #FFFFFF;
	/* The white background for our sidebar */
	--text-primary: #111827;
	/* Main text color - dark gray */
	--text-secondary: #6B7280;
	/* Secondary text - lighter gray */
	--border: #E5E7EB;
	/* Color for borders and lines */
	--menu-text-color: #000000;
}

html {
	font-size: 62.5%;
}

.light-theme {
	--background-color: #fff;
	--text-color: #000000;
	--menu-background-color: #F0F0F0;
	--footer-background-color: transparent;
	--menu-text-color: #222;
	--nedryckare-text-color: #333;
	--fas-background-color: #2f2e38;
	--line-color: #2f2e38;
	--background-color-passpartou: #f0f0f0;
}

.dark-theme {
	--background-color: #2f2e38;
	--text-color: #FAFAFA;
	--menu-background-color: #2f2e38;
	--footer-background-color: #2f2e38;
	--menu-text-color: #FAFAFA;
	--nedryckare-text-color: #cab4a1;
	--fas-background-color: #fff;
	--line-color: #fff;
	--background-color-passpartou: #2f2e38;
}

/* 02 BODY */
body {
	overflow-wrap: break-word;
	list-style-type: none;
	font-family: 'Poppins', sans-serif;
	color: var(--text-primary);
	padding: 0;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1rem auto 1fr;
	grid-template-areas: "header" "main" "footer";
	background-color: var(--background-color);
	padding-bottom: 80px;
}

/* 05 HEADING – Calculation with clamp(min, flexible-value, max) */
/* MODIFIED: Updated h1 with Afacad font and increased bottom margin for spacing */
h1 {
	font-size: 2.4rem;
	line-height: 1.2;
	letter-spacing: 0;
	font-weight: 500;
	text-align: left;
	color: var(--text-primary);
	margin-bottom: 2.5rem;
	font-family: "Afacad", "Poppins", sans-serif;
}

h2 {
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1rem;
	color: var(--text-primary);
}

h3 {
	font-size: calc(11.1429px + 0.267857vw);
}

h4 {
	font-size: calc(9.42857px + 0.178571vw);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.2rem;
	margin-bottom: 15px;
	padding-top: 15px;
	font-size: 1.2rem;
}

h5 {
	font-size: calc(9.42857px + 0.178571vw);
}

h6 {
	font-size: calc(9.42857px + 0.178571vw);
}

.utdrag-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 30px;
	overflow: hidden;
	max-width: 100%;
	padding-bottom: 10px;
}

/* 03 TYPOGRAPHY */
p {
	font-size: 1.6rem;
	line-height: 1.8em;
	letter-spacing: 0.02em;
	font-weight: 400;
	padding-bottom: 20px;
}

.ingress {
	font-size: 2.4rem;
	font-weight: 400;
	margin-bottom: 0px;
	line-height: 4rem;
	margin-top: 6rem;
}

/* 10 Blockquote */
blockquote {
	margin-top: 3rem;
	font-size: 3rem;
}

#exam-cards a:link {
	font-size: 1.5rem;
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 400;
	text-align: center;
	font-family: "Afacad", "Poppins", sans-serif;
	display: block;
	width: 100%;
}

#exam-cards a:visited {
	color: var(--text-secondary);
}

#exam-cards a:hover {
	color: var(--primary);
}

#exam-cards a:active {
	color: var(--primary-dark);
}

#exam-cards a.disabled {
	color: var(--text-secondary);
	cursor: default;
}

/* 04 Bilder och logo */
img {
	max-width: 100%;
	vertical-align: middle;
	display: inline-block;
}

.logo {
	grid-area: 2/2/3/3;
	margin-top: 0rem;
	margin-left: 0;
	z-index: 99;
	width: 7rem;
}

/* 06 Header */
header {
	grid-area: header;
	display: grid;
	grid-template-columns: minmax(11rem, 1fr) repeat(8, minmax(min-content, 16rem)) minmax(10rem, 1fr);
	/*grid-template-rows: repeat(2, 4.5rem);*/
	grid-template-rows: repeat(2, 1rem);
	/*box-shadow: 1px 1px 5px #ddd;*/
	color: var(--menu-text-color);
}

.toprowmessage {
	grid-row: 1/2;
	grid-column: 1/-1;
	height: 4rem;
}

/* --=============================
		FORMATTERING LEFT MENY
==============================*/
.left-margin {
	position: fixed;
	width: 60px;
	height: 100vh;
	z-index: 500;
	top: 0px;
	left: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sidebar {
	position: fixed;
	width: 60px;
	height: 100vh;
	z-index: 0;
	top: 0px;
	left: 0;
}

.passpartou {
	position: fixed;
	width: 60px;
	height: 100vh;
	z-index: 490;
	top: 40px;
	left: 0;
	background-color: var(--background-color-passpartou);
}

/* 07 Nav – Hamburgermeny */
.navigering-mobil {
	grid-row: 2/3;
	grid-column: 1/2;
}

#hamburgerdropdown {
	display: block;
	position: relative;
	top: 20px;
	left: 20px;
	z-index: 330;
}

#hamburgerdropdown a {
	text-decoration: none;
	color: var(--text-color);
	transition: color 0.3s ease;
}

#hamburgerdropdown a:hover {
	color: #9E9393;
}

#hamburgerdropdown input {
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	cursor: pointer;
	opacity: 0;
	z-index: 12;
}

.line-1,
.line-3 {
	width: 2rem;
	transition: width .3s;
	color: #5FBC71;
}

.line-2 {
	width: 2.4rem;
	transition: width .3s;
	color: #5FBC71;
}

#hamburgerdropdown span {
	display: block;
	height: 2px;
	margin-bottom: 5px;
	position: relative;
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
}

#hamburgerdropdown span:first-child {
	transform-origin: 0% 0%;
}

#hamburgerdropdown span:nth-last-child(2) {
	transform-origin: 0% 100%;
}

#hamburgerdropdown input:checked~span {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
}

#hamburgerdropdown input:checked~span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -1px);
}

#hamburgerdropdown input:checked~span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

#menyval_i_hamburgermenyn {
	position: absolute;
	width: 34vh;
	height: 100vh;
	margin: 0px 0px 0px 20px;
	padding: 55px 0px 0px 60px;
	list-style-type: none;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
	line-height: 3.22rem;
	background-color: var(--background-color);
}

#menyval_i_hamburgermenyn li {
	padding: 1rem 0;
	font-size: 2rem;
}

#hamburgerdropdown input:checked~ul {
	transform: none;
}

/* 06 Navigering – Huvudnavigeringen på sidan */
.mainNav {
	grid-row: 2/3;
	grid-column: 4/8;
	margin-top: 2rem;
	text-align: center;
	z-index: 3;
	display: none;
}

.mainNav li {
	display: inline-block;
	margin-right: 40px;
	text-transform: uppercase;
}

.mainNav a:link {
	font-weight: 700;
	line-height: 1.2em;
	font-size: calc(9.42857px + 0.178571vw);
	letter-spacing: 1px;
	text-decoration: none;
	color: #212121;
	font-family: "josefin sans", lovelo, sans-serif;
	transition: all .2s ease 0s;
}

.mainNav a:visited {
	color: var(--menu-text-color);
}

.mainNav a:hover {
	color: #c2c2c2;
}

.mainNav:hover #mobile-container {
	visibility: hidden;
	opacity: 0;
}

.mainNav a:active {
	color: var(--menu-text-color);
}

.mainNav .current {
	font-weight: 700;
	line-height: 1.2em;
	font-size: calc(9.42857px + 0.178571vw);
	letter-spacing: 3rem;
	text-decoration: none;
	color: #222222;
	font-family: afacad, overpass, lato, sans-serif;
}

/* 06 Nav – Users preferences */
.login-menu {
	grid-row: 1/3;
	grid-column: 9/11;
	margin-top: 2.4rem;
	width: 100%;
	color: var(--menu-text-color);
}

.login-menu ul {
	text-align: right;
	padding-right: 5rem;
}

.login-menu li {
	display: inline-block;
	min-width: 4rem;
	max-width: 5rem;
	padding-bottom: 0px;
	margin-top: -5px;
}

.login-menu a:link {
	font-size: 1.6rem;
	color: var(--menu-text-color);
}

.login-menu a:visited {
	color: #212121;
}

.login-menu a:hover {
	color: #24b526;
}

.login-menu a:active {
	color: #212121;
}

/* --=============================
		TOGGLE BAREN 
==============================*/
/* Toggle switch styles  this is dublicate with code below. /Tess*/
/*.switch {
	position: relative;
	display: inline-block;
	margin-left: 5px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider_menu_preferences {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 3rem;
}
.slider_menu_preferences:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: #EBBFCA;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 3rem;
}
input:checked+.slider_menu_preferences { */
/*background-color: #2196F3; BLUE*/
/*background-color: #7D8888;
	border-radius: 3rem;
}
input:focus+.slider_menu_preferences {
	box-shadow: 0 0 1px #2196F3;
	border-radius: 3rem;
}
input:checked+.slider_menu_preferences:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	border-radius: 3rem;
}
.slider_menu_preferences {
	border-radius: 34px;
	border-radius: 3rem;
}
.slider_menu_preferences:before {
	border-radius: 50%;
	border-radius: 3rem;
} */
.fas {
	color: var(--fas-background-color);
}

/* 12 Main  */
main {
	grid-area: main;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 4rem;
}

#welcome-name {
	grid-column: 3/10;
	grid-row: 1/2;
	color: var(--menu-text-color);
	margin-top: 40px;
}

.nedryckare {
	color: var(--nedryckare-text-color);
}

#onboarding {
	grid-column: 4/10;
	grid-row: 2/4;
	color: var(--menu-text-color);
}

#exam-cards {
	padding: 0 4rem;
	margin-top: 2rem;
}

/* 18 FOOTER */
footer {
	grid-column: 1/-1;
	grid-row: 3/4;
	display: grid;
	grid-template-columns: minmax(3rem, 1fr) repeat(8, minmax(min-content, 16rem)) minmax(3rem, 1fr);
	grid-template-rows: repeat(2, min-content);
	background-color: #343434;
}



/*==============================		
		navigation, the very below to the left (translated from navigationen längst ner till vänster)
		==============================*/
.sidebar {
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 60px;

}

#nav-preferences {
	margin-top: 6rem;
	padding-bottom: 2rem;
	margin-left: 8px;
	align: center;
}

#nav-preferences .fas {
	margin-left: 2px;

}

#nav-preferences .fas a:hover {
	color: #059669;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none !important;
}

.sidebar {
	background-color: var(--menu-background-color);
	color: var(--menu-text-color);
}


/* --=============================
		FORMATTERING TYPO I MENYN
==============================*/
.menu-item {
	display: inline-block;
	align-items: center;
	padding: 10px;
	border-radius: 0px;
	margin-bottom: 10px;
	transition: background-color 0.3s;
	width: 100%;
}

.menu-item:hover {
	background-color: none;
}

.menu-text {
	flex-grow: 1;
	font-size: 0.35rem;
	text-align: left;
	text-transform: uppercase;
	color: #222;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 500;
}

.menu-list,
.sub-menu {
	list-style-type: none;
	padding: 0;
}

.menu-item>span {
	display: block;
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid #333;
}

.menu-item:hover {}

.sub-item {
	padding: 5px 10px;
	border-bottom: 1px solid #444;
}

.sub-item:hover {
	background-color: #3a3a3a;
}

.fa,
.fab,
.fad,
.fal,
.far,
.fas {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing:
		antialiased;
	display: inline-block;
	font-style: normal;
	font-variant:
		normal;
	text-rendering: auto;
	line-height: 1;
	font-size: 1.565rem !important;
}


.menu-item a:link {
	font-weight: 700;
	line-height: 1.2em;
	letter-spacing: 1px;
	text-decoration: none !important;
	color: #212121;
	transition: all .2s ease 0s;
	letter-spacing: 0;
	font-weight: 400
}

.menu-item a:visited {
	color: var(--menu-text-color);
}

.menu-item a:hover {
	color: #a8a8a8;
}

.menu-item:hover #mobile-container {
	visibility: hidden;
	opacity: 0;
}

.menu-item a:active {
	color: var(--menu-text-color);
}

.menu-item .current {
	font-weight: 700;
	line-height: 1.2em;
	font-size: calc(9.42857px + 0.178571vw);
	letter-spacing: 3rem;
	text-decoration: none;
	color: #222222;
	font-family: afacad, overpass, lato, sans-serif;
}



/* --=============================
		TOGGLE BUTTON · DARK AND LIGHT MODE
		==============================*/
.switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 24px;
	margin-left: 4px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider_menu_preferences {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 100px;
	bottom: 0;
	background-color: #fff;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider_menu_preferences:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	right: 6px;
	bottom: 4px;
	background-color: #222;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider_menu_preferences {
	background-color: #fff;
}

input:focus+.slider_menu_preferences {
	box-shadow: 0 0 1px #fff;
}

input:checked+.slider_menu_preferences:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* --Rounded sliders */
.slider_menu_preferences.round {
	border-radius: 34px;
	padding-bottom: 1rem;
	padding-top: 4rem;
}

.slider_menu_preferences.round:before {
	border-radius: 20%;
}

.fas {
	color: var(--fas-background-color);
}

/* --=============================
		END TOGGLE BAREN 
		==============================*/

/*==============================		
		White round arrown
		==============================*/
.arrow-button {
	background-image: url('path-to-your/arrow-right.png');
	border: 2px solid #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.arrow-button:hover {
	transform: translateX(-10px);
}

/*==============================		
		CARD ON FRONTPAGE
		==============================*/
/* MODIFIED: Increased top margin of card container for better spacing */
.card-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.card {
	background-color: #fff;
	border-radius: 0.8rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	position: relative;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-corner-button {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #7AB6B6;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border: none;
	cursor: pointer;
}

.card-corner-button i {
	color: white;
	font-size: 10px;
}

.card-body {
	padding: 2rem 1.5rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.card-body h2 {
	margin-bottom: 1rem;
	font-weight: 600;
	font-size: 1.8rem;
	color: var(--text-primary);
	text-align: center;
	font-family: "Afacad", "Poppins", sans-serif;
}

.card-footer {
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid var(--border);
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #10B981;
}

/*==============================		
CARD Create exam
==============================*/
#create_exam {
	grid-column: 3/10;
	grid-row: 3/8;
	margin-top: 40rem;
}

.card-container_create_exam {
	display: flex;
	justify-content: left;
	margin-top: 0px;
	gap: 3rem;
	flex-wrap: wrap;
	height: 254px;
}

.card_create_exam {
	background-color: #f0f0f0;
	border-radius: 15px;
	overflow: hidden;
	width: 250px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	position: relative;
}

.card-img_create_exam {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-bottom: 1px solid #ccc;
}

.card-body_create_exam {
	padding: 20px;
	text-align: center;
	height: 10rem;

}

.card-body_create_exam h2 {
	font-size: 18px;
	margin-bottom: 0px;
	font-weight: 500;
}

.card-body p {
	font-size: 14px;
	color: #666;
}

.card-footer_create_exam {
	position: absolute;
	top: 10px;
	right: 10px;
}

.status-dot_create_exam {
	width: 12px;
	height: 12px;
	background-color: #76c7c0;
	border-radius: 50%;
}



/*==============================		
EXAMS - old 
==============================*/

/* Main content area 
.main_exam {
	grid-column: 2/10;
	grid-row: 1/2;
	flex: 1;
	margin-left: 0px;
	display: flex;
	flex-direction: column;
	min-height: 80vh;
}

/* Question container styles 
.question-container {
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	flex: 1;
	display: flex;
	flex-direction: column;
	max-height: 560px;
	width: 800px;
}

/* Question header 
.question-header {
	margin-bottom: 24px;
}

/* Question number text 
.q-number {
	color: var(--text-secondary);
	font-size: 1.4rem;
	margin-bottom: 12px;
	font-weight: 500;
}

/* The actual question text 
.question-header h3 {
	color: var(--text-primary);
	font-size: 2.8rem;
	line-height: 1;
	font-weight: 400;
}

/* Answer section 
.answer-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
	flex: 1;
}

/* Each answer option 
.option {
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	color: #333;
	font-size: 15px;
	font-weight: 500;
}

/* When you hover over an answer 
.option:hover {
	border-color: #4355FF;
	background-color: #f8f9fa;
}

/* The selected answer 
.option.selected {
	background-color: #EEF5FF;
	border-color: #4355FF;
}

/* The checkmark for selected answers 
.option.selected::after {
	content: "✓";
	float: right;
	color: #4355FF;
	font-weight: bold;
}

/* Navigation section 
.navigation-section {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

/* Navigation buttons container 
.nav-buttons {
		padding: 12px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.2s;
	font-weight: 500;
}
*/
/* Basic button styles 
button {
	padding: 14px 40px;
	border-radius: 50px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.2rem;
	background: #10B981;
	color: white;
	border: none;
}

/* Back button style 
#prevBtn {
	background: white;
	color: var(--text-secondary);
	border: 2px solid var(--border);
	margin-right: auto;
}

/* When you hover over the back button 
#prevBtn:hover {
	border-color: var(--text-secondary);
	color: var(--text-primary);
	transform: translateX(-2px);
}

/* Next button style 
#nextBtn {
	background: var(--primary);
	color: white;
	border: none;
	min-width: 120px;
	justify-content: center;
}

/* When you hover over the next button 
#nextBtn:hover {
	background: var(--primary-dark);
	transform: translateX(2px);
} */

/* Bottom navigation bar 
.nav-bar {
	background: white;
	border-radius: 12px;
	padding: 12px;
	margin-top: 16px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Question number buttons container 
.q-numbers {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	flex: 1;
}

/* Each question number button 
.q-number-btn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: white;
	color: var(--text-secondary);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

/* Resultatrubrik 
.question-text {
	color: var(--text-secondary);
	font-size: 2.2rem;
	margin-bottom: 0rem;
	font-weight: 400;
	line-height: 2.2rem;
	margin-top: 4px;
}

/* When you hover over a question number 
.q-number-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Question numbers for answered questions 
.q-number-btn.answered {
	background: #EEF5FF;
	border-color: #4355FF;
	color: #4355FF;
}

/* The current question number 
.q-number-btn.current {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
}

.question-result h3 {
	margin-top: 4rem !important;
}

.correct-answer {
	margin-bottom: 3rem;
	font-size: 1.465rem;
	font-weight: 400;
}

/* Submit button style 
.submit {
	background: #10B981;
	color: white;
	border: none;
	padding: 14px 40px;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1.2rem;
}

/* When you hover over the submit button 
.submit:hover {
	background: #059669;
	transform: translateY(-2px);
} 

textarea {
	padding: 2rem;
	font-family: "inter";
} */

/* --- Start Replacing Block --- */

/* UPDATE (Apr 9): Style for the 'Go BACK' link - Absolute positioning */
.home-link {
	/* Remove previous positioning styles */
	/* display: block; */
	/* width: fit-content; */
	/* margin-bottom: 15px; */
	/* margin-top: 15px; */
	/* margin-left: 0; */
	/* margin-right: auto; */
	/* padding-left: 80px; */
	/* text-align: left; */

	/* --- New Absolute Positioning --- */
	position: absolute;
	/* Position relative to nearest positioned ancestor (or viewport) */
	top: 30px;
	/* Distance from the top. */
	left: 80px;
	/* Distance from the left edge (just right of the 60px sidebar). */
	z-index: 10;
	/* Ensure it's clickable if overlapping */
}

.home-link a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.4rem;
}

.home-link:hover,
.home-link a:hover {
	color: var(--primary);
}

/* Styles for the main exam area */
.main_exam {
	grid-column: 3 / 10;
	/* Centered within the main grid */
	grid-row: 2;
	width: 100%;
	max-width: 800px;
	/* Limit maximum width */
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	/* Space below the .home-link */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Styles for the card containing the question */
.main_exam>.card {
	background: white;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 40px;
	/* Space above the bottom nav */
	width: 100%;
	box-sizing: border-box;
	/* Removed conflicting rules from front page card */
	flex-basis: auto;
	min-width: auto;
	max-width: none;
	position: static;
	/* Ensure it's not position:relative like front page cards */
}

/* Styles for question info text (e.g., "Question 1 of 11") */
.question-info {
	color: #666;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 500;
}

/* Styles for the main question title/text */
.question-title {
	font-size: 20px;
	color: #333;
	margin: 0 0 30px 0;
	font-weight: 600;
	line-height: 1.4;
}

/* Container for answer options or textarea */
.answer-section {
	margin-bottom: 30px;
}

/* Styles for the essay answer textarea */
.text-answer {
	width: 100%;
	min-height: 40px;
	/* Minimum height */
	padding: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	resize: none;
	/* Disable manual resize handle */
	outline: none;
	transition: all 0.2s;
	box-sizing: border-box;
	/* Auto-resize handled by JS */
}

.text-answer:focus {
	border-color: #4355FF;
	/* Use var(--primary)? */
}

/* Container for multiple-choice options */
.options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Styles for each multiple-choice option */
.option {
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s;
	background: white;
	color: #333;
	font-size: 15px;
	font-weight: 500;
}

.option:hover {
	border-color: #4355FF;
	/* Use var(--primary)? */
	background-color: #f8f9fa;
}

/* Style for the selected MC option */
.option.selected {
	background-color: #EEF5FF;
	border-color: #4355FF;
	/* Use var(--primary)? */
}

/* Checkmark for selected MC option */
.option.selected::after {
	content: "✓";
	float: right;
	color: #4355FF;
	/* Use var(--primary)? */
	font-weight: bold;
}

/* Container for Prev/Next buttons */
.navigation {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

/* General style for Prev/Next buttons */
.nav-btn {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.2s;
	font-weight: 500;
}

/* Style for the 'Back' button */
.nav-btn:not(.primary) {
	background-color: #f5f5f5;
	color: #666;
}

.nav-btn:not(.primary):hover {
	background-color: #e0e0e0;
}

/* Style for the 'Next' button */
.nav-btn.primary {
	background-color: #4355FF;
	/* Use var(--primary)? */
	color: white;
}

.nav-btn.primary:hover {
	background-color: #3344EE;
	/* Use var(--primary-dark)? */
}

/* UPDATE (Apr 9): Styling for bottom navigation bar */
/* Changed to be fixed at the bottom and span full width */
.bottom-nav {
	/* --- Fixed Positioning --- */
	position: fixed;
	/* Fix the bar at the bottom */
	bottom: 0;
	/* Align to the bottom edge */
	left: 0;
	/* Align to the left edge */
	width: 100%;
	/* Make the bar span the full viewport width */
	z-index: 1000;
	/* Ensure it stays on top of other content */

	/* --- Appearance & Layout (Full Width) --- */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background: white;
	border-radius: 0;
	/* Removed radius for sharp corners on full width */
	border-top: 1px solid var(--border);
	/* Added top border */
	padding: 12px 24px;
	/* Adjusted padding for full width */
	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
	/* Shadow on top */
	box-sizing: border-box;
	/* Removed max-width and centering rules for full width */
}

/* Container for the number buttons */
.bottom-nav #q-numbers {
	display: flex;
	gap: 8px;
	/* Space between buttons */
	flex-wrap: wrap;
	/* Allow buttons to wrap to next line if needed */
	justify-content: center;
	/* Center buttons within the container */
	flex: 1;
	/* Allow container to take available space */
	margin: 0 12px;
	/* Margin around the button group */
	padding: 0;
	overflow-x: initial;
}

/* UPDATE (Apr 9): Styling for individual number buttons */
/* Set to be consistently larger, oblong, with slightly rounded corners */
.bottom-nav #q-numbers .q-number-btn {
	height: 36px;
	/* Increased height */
	width: auto;
	/* Width determined by padding */
	min-width: 36px;
	/* Minimum width */
	padding: 0 16px;
	/* Horizontal padding makes it oblong */
	border: 1px solid var(--border);
	border-radius: 8px;
	/* Slightly rounded corners */
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	color: var(--text-secondary);
	font-size: 15px;
	/* Increased font size */
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	flex-shrink: 0;
	line-height: 1;
}

/* Removed adaptive rules based on question count (Apr 9) */

/* Hover state for number buttons */
.bottom-nav #q-numbers .q-number-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
	background-color: #f0f0f0;
}

/* Style for the current question's number button */
.bottom-nav #q-numbers .q-number-btn.current {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	border-radius: 8px;
	/* Match base style */
}

/* UPDATE (Apr 9): Style for answered question's number button */
/* Uses light blue background with blue text/border */
.bottom-nav #q-numbers .q-number-btn.answered {
	background: #EEF5FF;
	border-color: var(--primary);
	color: var(--primary);
	border-radius: 8px;
	/* Match base style */
}

/* Style for the submit button */
.bottom-nav .submit {
	background: #10B981;
	/* Green */
	color: white;
	border: none;
	padding: 12px 28px;
	/* Slightly larger padding */
	border-radius: 50px;
	/* Pill shape */
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 1.3rem;
	/* Slightly larger font */
	font-weight: 600;
	flex-shrink: 0;
	display: inline-block;
	text-align: center;
	line-height: initial;
}

.bottom-nav .submit:hover {
	background: #059669;
	transform: translateY(-2px);
}

/* --- End Replacing Block --- */

/* Results View */
.results {
	background: white;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	grid-column: 3 / 10;
	grid-row: 2;
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	box-sizing: border-box;
}

.question-result {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
}

.question-result:last-child {
	border-bottom: none;
}

.question-result h3 {
	margin: 0 0 10px 0;
	font-size: 16px;
	color: #333;
	font-weight: 600;
}

.answer {
	padding: 15px;
	border-radius: 8px;
	margin: 10px 0;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid;
	word-wrap: break-word;
}

.answer strong {
	margin-right: 0.5em;
	display: inline;
}


.answer.correct {
	background-color: #e8f5e9;
	color: #1b5e20;
	border-color: #4CAF50;
}

.answer.incorrect {
	background-color: #ffebee;
	color: #b71c1c;
	border-color: #f44336;
}

.correct-answer {
	/* Box showing correct MC/Essay answer */
	padding: 15px;
	border-radius: 8px;
	margin: 10px 0;
	font-size: 15px;
	background-color: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #4CAF50;
	font-weight: 500;
	word-wrap: break-word;
}

.correct-answer strong {
	/* "Correct answer:" prefix */
	margin-right: 0.5em;
	display: inline;
	/* Keep on same line */
}

.correct-answer pre {
	/* Ensure pre formatting is respected */
	margin: 0;
	display: inline;
	white-space: pre-wrap;
	word-wrap: break-word;
	font: inherit;
}


.essay-answer {
	/* Box showing user's essay answer */
	padding: 15px;
	border-radius: 8px;
	margin: 10px 0;
	font-size: 15px;
	background-color: #f5f5f5;
	/* Neutral background */
	color: #333;
	border: 1px solid #e0e0e0;
	font-weight: 500;
	word-wrap: break-word;
}

.essay-answer strong {
	/* "Your answer:" prefix */
	margin-right: 0.5em;
	display: inline;
	/* Keep on same line */
}

.essay-answer pre {
	/* Ensure pre formatting is respected */
	margin: 0;
	display: inline;
	white-space: pre-wrap;
	word-wrap: break-word;
	font: inherit;
}


.question-text {
	/* Question text within results */
	margin-bottom: 15px;
	font-size: 15px;
	color: #333;
	/* Use var(--text-primary)? */
	line-height: 1.4;
	/* Added line-height */
}

.final-score {
	text-align: center;
	margin: 30px 0;
	font-weight: 600;
}

.final-score h2 {
	font-size: 24px;
	color: #333;
	/* Use var(--text-primary)? */
	margin: 0;
}

.result-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.exit-btn,
.restart-btn {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.2s;
	font-weight: 500;
}

.exit-btn {
	background-color: #f5f5f5;
	color: #666;
	/* Use var(--text-secondary)? */
}

.exit-btn:hover {
	background-color: #e0e0e0;
}

.restart-btn {
	background-color: #4355FF;
	/* Use var(--primary)? */
	color: white;
}

.restart-btn:hover {
	background-color: #3344EE;
	/* Use var(--primary-dark)? */
}

/* Responsive Design from exam-style.css */
@media (max-width: 768px) {
	main {
		/* Adjust grid gaps? */
	}

	.card,
	.results {
		/* // Update: Apply padding also to results */
		padding: 20px;
	}

	.question-title {
		font-size: 18px;
	}

	.option {
		padding: 12px;
	}

	.nav-btn,
	.submit,
	.exit-btn,
	.restart-btn {
		/* // Update: Apply to all buttons */
		padding: 10px 20px;
	}

	.q-number-btn {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}

	/* UPDATE: Adjust front page card layout for smaller screens */
	#exam-cards .card-container .card {
		flex-basis: calc(50% - 1.5rem);
		/* Aim for 2 cards per row */
		min-width: 180px;
	}

	#exam-cards .card-container {
		gap: 1.5rem;
	}
}

/* Responsiv design för mobila enheter */
@media (max-width: 768px) {
	.card-container {
		justify-content: center;
		/* Centrerar korten på mobilen */
	}

	.card {
		width: 45%;
		/* Gör varje kort 45% bredd på mobila enheter */
	}
}

@media (max-width: 480px) {
	.card {
		width: 100%;
		/* Gör varje kort 100% bredd på små skärmar */
	}
}

@media only screen and (max-width: 1246px) {
	.mainNav {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
	.fab {
		font-weight: 400;
		font-size: 1.2rem;
	}

	.huvudnavigation {
		display: none;
		grid-row: 2/3;
		grid-column: 4/8;
		margin-top: 5px;
		text-align: center;
	}

	.hamburgermeny {
		grid-row: 2/3;
		grid-column: 1/2;
		display: grid;
		grid-template-columns: repeat(1, 24px);
		grid-template-rows: repeat(2, 10px);
		margin-top: 17px;
		margin-left: 2rem;
	}

	#latest_exams h2 {
		margin-top: 7rem;
	}

	#latest_exams {
		grid-gap: 3rem;
	}

	.login-menu {
		grid-row: 2/3;
		grid-column: 4/11;
		margin-top: 2.4rem;
		width: 100%;
	}
}

@media only screen and (max-width: 684px) {
	.login-menu {
		grid-row: 2/3;
		grid-column: 2/11;
		margin-top: 2.4rem;
		width: 100%;
	}
}

@media only screen and (max-width: 520px) {
	.login-menu {
		grid-row: 2/3;
		grid-column: 4/11;
		margin-top: 2.4rem;
		width: 100%;
	}
}

/* Loading Indicator */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid var(--border);
	border-top: 5px solid var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 1rem;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Error Message */
.error-message {
	background-color: #FEE2E2;
	color: #DC2626;
	padding: 1rem;
	margin: 1rem 0;
	border-radius: 0.5rem;
	border: 1px solid #FCA5A5;
	font-size: 1.4rem;
}

/* Mobile Menu Improvements */
.mobile-nav {
	display: none;
}

@media (max-width: 768px) {
	.mobile-nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: var(--sidebar-color);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.hamburger-btn {
		display: block;
		padding: 1rem;
		background: none;
		border: none;
		cursor: pointer;
	}

	.hamburger-icon {
		display: block;
		width: 24px;
		height: 2px;
		background-color: var(--text-primary);
		position: relative;
		transition: background-color 0.3s;
	}

	.hamburger-icon::before,
	.hamburger-icon::after {
		content: '';
		position: absolute;
		width: 24px;
		height: 2px;
		background-color: var(--text-primary);
		transition: transform 0.3s;
	}

	.hamburger-icon::before {
		top: -6px;
	}

	.hamburger-icon::after {
		bottom: -6px;
	}

	.hamburger-btn[aria-expanded="true"] .hamburger-icon {
		background-color: transparent;
	}

	.hamburger-btn[aria-expanded="true"] .hamburger-icon::before {
		transform: rotate(45deg);
		top: 0;
	}

	.hamburger-btn[aria-expanded="true"] .hamburger-icon::after {
		transform: rotate(-45deg);
		bottom: 0;
	}

	.mobile-menu {
		display: none;
		list-style: none;
		padding: 0;
		margin: 0;
		background-color: var(--sidebar-color);
	}

	.mobile-menu.active {
		display: block;
	}

	.mobile-menu li {
		border-bottom: 1px solid var(--border);
	}

	.mobile-menu a {
		display: block;
		padding: 1rem;
		color: var(--text-primary);
		text-decoration: none;
		font-size: 1.6rem;
	}

	.mobile-menu a:hover {
		background-color: var(--background-color);
	}
}

.card h2 {
	margin-bottom: 1rem;
	color: var(--text-primary);
	font-size: 1.6rem;
	font-weight: 500;
}

.card-img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}