/*=========================================
=
= QUIZ ENGINE
=
=========================================*/

.gbk-quiz-engine{

	max-width:900px;

	margin:60px auto;

}


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

.gbk-question-header{

	display:flex;

	justify-content:space-between;

	align-items:center;

	margin-bottom:30px;

}

.gbk-question-header h2{

	margin:0;

	font-size:34px;

	font-weight:700;

	color:#1f2937;

}


/*=========================================
=
= QUESTION BOX
=
=========================================*/

.gbk-question-box{

	background:#fff;

	border:1px solid #e5e7eb;

	border-radius:14px;

	padding:35px;

	box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.gbk-question-title{

	font-size:30px;

	font-weight:700;

	line-height:1.6;

	margin:0 0 30px;

	color:#111827;

}


/*=========================================
=
= OPTIONS
=
=========================================*/

.gbk-options{

	display:flex;

	flex-direction:column;

	gap:18px;

}

.gbk-option{

	display:flex;

	align-items:center;

	gap:15px;

	padding:18px 22px;

	border:2px solid #dbe3ef;

	border-radius:10px;

	cursor:pointer;

	background:#fff;

	transition:.25s;

}

.gbk-option:hover{

	border-color:#2563eb;

	background:#f8fbff;

}

.gbk-option input{

	transform:scale(1.3);

}

.gbk-option span{

	font-size:18px;

	font-weight:500;

	color:#1f2937;

}


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

.gbk-navigation{

	display:flex;

	justify-content:space-between;

	margin-top:35px;

}

.gbk-navigation button{

	padding:14px 35px;

	border:none;

	border-radius:8px;

	background:#2563eb;

	color:#fff;

	font-size:16px;

	font-weight:600;

	cursor:pointer;

	transition:.25s;

}

.gbk-navigation button:hover{

	background:#1d4ed8;

}


/*=========================================
=
= PALETTE
=
=========================================*/

.gbk-question-palette{

	margin-top:45px;

}

.gbk-question-palette h3{

	margin-bottom:20px;

	font-size:26px;

}

.gbk-palette-grid{

	display:grid;

	grid-template-columns:repeat(5,1fr);

	gap:12px;

}

.gbk-palette-btn{

	height:55px;

	border:none;

	border-radius:8px;

	background:#eef2ff;

	font-size:18px;

	font-weight:700;

	cursor:pointer;

	transition:.25s;

}

.gbk-palette-btn:hover{

	background:#2563eb;

	color:#fff;

}


/*=========================================
=
= SUBMIT
=
=========================================*/

.gbk-submit{

	text-align:center;

	margin-top:40px;

}

.gbk-submit-btn{

	padding:16px 60px;

	border:none;

	border-radius:10px;

	background:#16a34a;

	color:#fff;

	font-size:18px;

	font-weight:700;

	cursor:pointer;

	transition:.25s;

}

.gbk-submit-btn:hover{

	background:#15803d;

}


/*=========================================
=
= MOBILE
=
=========================================*/

@media(max-width:768px){

	.gbk-question-header{

		flex-direction:column;

		align-items:flex-start;

		gap:15px;

	}

	.gbk-question-header h2{

		font-size:26px;

	}

	.gbk-question-box{

		padding:22px;

	}

	.gbk-question-title{

		font-size:24px;

	}

	.gbk-navigation{

		flex-direction:column;

		gap:15px;

	}

	.gbk-navigation button{

		width:100%;

	}

	.gbk-palette-grid{

		grid-template-columns:repeat(5,1fr);

	}

	.gbk-palette-btn{

		height:48px;

		font-size:16px;

	}

	.gbk-submit-btn{

		width:100%;

	}

}




.gbk-palette-btn{

	background:#ffffff;

	border:2px solid #d1d5db;

}

.gbk-current{

	background:#2563eb !important;

	color:#fff;

	border-color:#2563eb;

}

.gbk-answered{

	background:#16a34a !important;

	color:#fff;

	border-color:#16a34a;

}