#ubitto-playground *[hidden] {display: none !important;}
#ubitto-playground {flex: auto; width: 100%; position: relative;}
#ubitto-playground #header {display: flex; justify-content: space-between; padding: 15px 0 10px 0; align-items: center;}
#ubitto-playground #header #breadcrumbs {font-size: 24px; flex-grow: 2;}
#ubitto-playground #header #breadcrumbs > div {
	display: inline-block; 
	cursor: pointer; 
	transition: all 0.2s; 
	font-weight: 500;
	font-size: 18px;
	padding: 3px 12px;
	border-radius: 6px;
	background: #e3f2fd;
	border: 1px solid #1976d2;
	color: #1976d2;
}
#ubitto-playground #header #breadcrumbs > div:hover {
	background: #bbdefb;
	border-color: #1565c0;
	color: #1565c0;
}
#ubitto-playground #header #breadcrumbs > #breadcrumb-separator:not(:empty) {
	display: inline-block;
	margin: 0 10px;
	color: #757575;
	font-weight: normal;
}
#ubitto-playground #header #breadcrumbs > #breadcrumb-separator:empty {
	display: none;
}
#ubitto-playground #header #breadcrumbs > #category:empty {
	display: none;
}


#ubitto-playground #header #activate-coupon-block {position: relative; display: flex; align-items: center;}
#ubitto-playground #header #activate-coupon-block > * {display: none;}
#ubitto-playground #header #activate-coupon-block:not([state]) #show-input {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 16px; color: #666; cursor: pointer;
	background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
	font-size: 13px; font-weight: 500; transition: all 0.2s;
}
#ubitto-playground #header #activate-coupon-block:not([state]) #show-input:hover {
	border-color: #F9653F; color: #F9653F;
}
#ubitto-playground #header #activate-coupon-block[state = "input"] #coupon {
	display: inline-block; width: 160px; padding: 8px 12px;
	border: 1px solid #e5e7eb; border-radius: 8px 0 0 8px;
	font-size: 14px; color: #333; outline: none;
}
#ubitto-playground #header #activate-coupon-block[state = "input"] #coupon:focus {
	border-color: #F9653F;
}
#ubitto-playground #header #activate-coupon-block[state = "input"] #activate {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; width: 38px; padding: 0;
	background: #F9653F; color: #fff; border: none;
	border-radius: 0 8px 8px 0; font-size: 18px; cursor: pointer;
	transition: background 0.2s;
}
#ubitto-playground #header #activate-coupon-block[state = "input"] #activate:hover {
	background: #e85530;
}
#ubitto-playground #header #activate-coupon-block[state = "result"] #result {
	display: block; padding: 8px 16px; font-size: 13px;
	border-radius: 8px; background: #f0fdf4; color: #166534;
	border: 1px solid #86efac;
}

#ubitto-playground > .page {display: none;}
#ubitto-playground > .page[current] {display: flex; flex-wrap: wrap;}

#ubitto-playground #quizzes.page {justify-content: center; gap: 16px; padding: 10px 0;}
#ubitto-playground #quizzes.page .element {
	width: 280px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	position: relative;
	cursor: pointer;
	background: #fff;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
#ubitto-playground #quizzes.page .element:hover {
	border-color: #F9653F;
	box-shadow: 0 8px 24px rgba(249,101,63,0.12);
	transform: translateY(-3px);
}
#ubitto-playground #quizzes.page .element .quiz-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#ubitto-playground #quizzes.page .element .quiz-icon svg {
	width: 28px;
	height: 28px;
}
#ubitto-playground #quizzes.page .element #text {display: flex; flex-direction: column; gap: 4px;}
#ubitto-playground #quizzes.page .element #title {font-weight: 600; font-size: 15px; color: #1a1a1a;}
#ubitto-playground #quizzes.page .element #title #class {font-size: 16px; position: relative; line-height: 16px; top: 2px; color: #888;}
#ubitto-playground #quizzes.page .element #description {font-size: 13px; line-height: 1.4; color: #666;}

@media (max-width: 640px) {
	#ubitto-playground #quizzes.page .element { width: 100%; }
}

#ubitto-playground #quiz-selector.page #quizzes {overflow: auto; width: 100%;}
#ubitto-playground #quiz-selector.page #quizzes > div {background: #eef; padding: 10px; margin: 5px 0;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="1"] {cursor: pointer;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="1"]:hover {background: #bbf;}
#ubitto-playground #quiz-selector.page #quizzes > div:not([level=""])::before {content: attr(level); background: cornflowerblue; color: #fff; padding: 3px 5px;}
#ubitto-playground #quiz-selector.page #quizzes > div:not([score=""])::after {content: attr(score)'/100'; float: right;display: inline-block; background: #fff; padding: 0 10px; border-radius: 10px;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy {display: none;}
#ubitto-playground #quiz-selector.page #quizzes > div #no-buy {display: none;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="0"][can-buy="true"] #buy {display: inline-block;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="0"][can-buy="false"] #no-buy {display: inline-block; width: 110px; text-align: center;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="0"][can-buy="false"] #no-buy:hover {background: lightgreen; color: #000;}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="0"][can-buy="false"] #no-buy::before {content: 'Not enough 'attr(coins);}
#ubitto-playground #quiz-selector.page #quizzes > div[is-paid="0"][can-buy="false"] #no-buy:hover::before {content: 'Buy 'attr(coins);}
#ubitto-playground #quiz-selector.page #quizzes > div #no-buy {float: right; background: #bbb; color: #fff; font-size: 10px; padding: 0 10px; border-radius: 15px;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy {float: right; background: azure; padding: 0 10px; border-radius: 15px; cursor: pointer;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy:hover {background: lightgreen;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy #label {display: inline-block; font-weight: bold;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy #price {display: inline-block; margin-right: 5px;}
#ubitto-playground #quiz-selector.page #quizzes > div #buy #price::before {display: inline-block; width: 16px; height: 16px; background-image: url(/wp-content/plugins/ubitto/assets/images/coin16.png); content: ' '; background-size: cover; margin-right: 2px; position: relative; top: 2px;}
#ubitto-playground #quiz-selector.page #quizzes > div #link {float: right;color: #000; font-size: 24px; margin-left: 10px;}
#ubitto-playground #quiz-selector.page #quiz-viewer {margin: 10px auto; width: 600px; max-width: 100%;}
#ubitto-playground #quiz-selector.page #quizzes:not([hidden]) ~ #quiz-viewer {display: none;}

#ubitto-playground #ubitto-statistics-dialog header h2 {margin: 0; padding: 10px;}
#ubitto-playground #ubitto-statistics-dialog header #close {position: absolute; top: 10px; right: 10px; line-height: 10px; cursor: pointer; font-size: 24px;}
#ubitto-playground #ubitto-statistics-dialog .block {width: 250px; padding: 20px; margin: 10px; border: 1px solid #bbb; display: inline-block; vertical-align: top;}
#ubitto-playground #ubitto-statistics-dialog .block #header {font-size: 1.25rem; text-align: center; margin-bottom: 10px;}
#ubitto-playground #ubitto-statistics-dialog .block .selector {text-align: center; font-size: 0; line-height: 12px;}
#ubitto-playground #ubitto-statistics-dialog .block .selector > div {display: inline-block; font-size: 11px; cursor: pointer; color: cornflowerblue; padding: 2px 3px; margin: 0 2px; line-height: 12px;}
#ubitto-playground #ubitto-statistics-dialog .block .selector > div[current] {font-weight: bold;}
#ubitto-playground #ubitto-statistics-dialog .block #level-selector.selector {border-top: 1px solid #bbb; padding-top: 5px;}
#ubitto-playground #ubitto-statistics-dialog .block .row {display: flex; justify-content: space-between;}
#ubitto-playground #ubitto-statistics-dialog .block .row:hover {background: #eee;} 
#ubitto-playground #ubitto-statistics-dialog .block .row .point:first-letter {text-transform: uppercase;}
#ubitto-playground #ubitto-statistics-dialog .block .row .name:first-letter {text-transform: uppercase;}
#ubitto-playground #ubitto-statistics-dialog .block .row .amount:before {content: '+';}
#ubitto-playground #ubitto-statistics-dialog .block .row .amount:after {content: 'XP';}

@media (max-width: 799px) {
	#ubitto-playground #header #breadcrumbs {font-size: 18px;}
	#ubitto-playground #header #breadcrumbs > #category:not(:empty):before {margin: 0 5px;}	


	#ubitto-playground #header #activate-coupon-block #show-input:not([state]) {padding: 5px 10px; font-size: 11px;}
	#ubitto-playground #header #activate-coupon-block[state = "input"] #coupon {width: 110px; font-size: 20px; line-height: 30px; padding: 2px;}
	#ubitto-playground #header #activate-coupon-block[state = "input"] #activate {font-size: 24px; width: 37px; display: inline-block; position: absolute; right: 0; top: 0; line-height: 37px; padding: 0; border-radius: 0;}
	#ubitto-playground #header #activate-coupon-block[state = "result"] #result {display: block; padding: 5px 20px; height: 100%; text-align: center;}	
}

@media (max-width: 400px) {
	#ubitto-playground #header #breadcrumbs {font-size: 17px;}
}

/* Playground Pagination styles */
/* Playground Pagination styles */
#ubitto-playground #quiz-pagination {
	margin: 30px 0 20px 0;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

#ubitto-playground .pagination-controls {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

#ubitto-playground .pagination-controls .page-btn {
	min-width: 40px;
	height: 36px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	background: white;
	color: #333;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	transition: all 0.2s ease;
}

#ubitto-playground .pagination-controls .page-btn:hover:not(.disabled):not(.active) {
	background: #f0f7ff;
	border-color: #3498db;
	color: #3498db;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#ubitto-playground .pagination-controls .page-btn.active {
	background: #3498db;
	color: white;
	border-color: #3498db;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

#ubitto-playground .pagination-controls .page-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

#ubitto-playground .pagination-controls .page-ellipsis {
	padding: 8px 4px;
	color: #999;
	font-size: 14px;
}

#ubitto-playground .pagination-info {
	color: #666;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
	#ubitto-playground .pagination-controls .page-btn {
		min-width: 36px;
		height: 32px;
		padding: 6px 10px;
		font-size: 13px;
	}
	
	#ubitto-playground .pagination-info {
		font-size: 11px;
	}
}

/* Playground Quiz Table Styles */
#ubitto-playground #quizzes-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	background: white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}


/* More vivid header colors */
#ubitto-playground #quizzes-table thead th {
	padding: 15px 12px;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
	border-right: 2px solid rgba(255, 255, 255, 0.3);
}

/* Individual column colors */
#ubitto-playground #quizzes-table thead th:nth-child(1) {
	background: linear-gradient(to bottom, #9b59b6, #8e44ad);
}

#ubitto-playground #quizzes-table thead th:nth-child(2) {
	background: linear-gradient(to bottom, #3498db, #2980b9);
}

#ubitto-playground #quizzes-table thead th:nth-child(3) {
	background: linear-gradient(to bottom, #e67e22, #d35400);
}

#ubitto-playground #quizzes-table thead th:nth-child(4) {
	background: linear-gradient(to bottom, #f39c12, #e67e22);
}

#ubitto-playground #quizzes-table thead th:nth-child(5) {
	background: linear-gradient(to bottom, #1abc9c, #16a085);
}

#ubitto-playground #quizzes-table thead th:nth-child(6) {
	background: linear-gradient(to bottom, #27ae60, #229954);
}

#ubitto-playground #quizzes-table thead th:nth-child(7) {
	background: linear-gradient(to bottom, #e74c3c, #c0392b);
}
}

#ubitto-playground #quizzes-table tbody tr {
	border-bottom: 1px solid #e0e0e0;
	transition: background 0.2s ease;
}

#ubitto-playground #quizzes-table tbody tr:hover {
	background: #f8f9fa;
}

#ubitto-playground #quizzes-table tbody tr:last-child {
	border-bottom: none;
}

#ubitto-playground #quizzes-table tbody td {
	padding: 12px;
	font-size: 14px;
	vertical-align: middle;
}

#ubitto-playground #quizzes-table tbody td.level {
	font-weight: 600;
	color: #7f8c8d;
}

#ubitto-playground #quizzes-table tbody td.name {
	font-weight: 500;
	color: #2c3e50;
}

#ubitto-playground #quizzes-table tbody td.author {
	color: #666;
	font-size: 13px;
}

#ubitto-playground #quizzes-table tbody td.cookies {
	font-weight: 600;
	color: #e67e22;
}

#ubitto-playground #quizzes-table tbody td.points {
	font-size: 11px;
	color: #3498db;
}

#ubitto-playground #quizzes-table tbody td.score {
	font-weight: 600;
	color: #27ae60;
}

#ubitto-playground #quizzes-table tbody td.action {
	text-align: center;
}

/* Play and Buy Buttons */
#ubitto-playground .play-btn,
#ubitto-playground .buy-btn {
	padding: 8px 20px;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

#ubitto-playground .play-btn {
	background: #27ae60;
	color: white;
}

#ubitto-playground .play-btn:hover {
	background: #229954;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(39, 174, 96, 0.4);
}

#ubitto-playground .buy-btn {
	background: #e67e22;
	color: white;
}

#ubitto-playground .buy-btn:hover:not(:disabled) {
	background: #d35400;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(230, 126, 34, 0.4);
}

#ubitto-playground .buy-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

#ubitto-playground .buy-btn .price-icon {
	margin-right: 4px;
}

#ubitto-playground .no-buy-link {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	color: #3498db;
	text-decoration: none;
}

#ubitto-playground .no-buy-link:hover {
	text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
	#ubitto-playground #quizzes-table {
		font-size: 11px;
	}

	#ubitto-playground #quizzes-table thead {
		display: none;
	}

	#ubitto-playground #quizzes-table tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 10px;
	}

	#ubitto-playground #quizzes-table tbody td {
		display: block;
		text-align: left;
		padding: 8px 0;
		border: none;
	}

	#ubitto-playground #quizzes-table tbody td::before {
		content: attr(class) ": ";
		font-weight: bold;
		text-transform: capitalize;
		margin-right: 5px;
	}

	#ubitto-playground #quizzes-table tbody td.action {
		text-align: left;
	}
}

/* Quiz viewer visibility */
#ubitto-playground #quiz-viewer {
	display: none;
}

#ubitto-playground #quizzes-table tbody td.points .point-badge {
	display: inline-block;
	padding: 2px 8px;
	margin: 2px;
	background: #e8f5e9;
	border: 1px solid #4caf50;
	border-radius: 12px;
	font-size: 11px;
	color: #2e7d32;
	font-weight: 500;
	white-space: nowrap;
}

/* Unified Quiz Table Badges */
.ubitto-quiz-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.ubitto-quiz-badge-ai {
	background: #e3f2fd;
	color: #1976d2;
	border: 1px solid #bbdefb;
}

.ubitto-quiz-badge-course {
	background: #f3e5f5;
	color: #7b1fa2;
	border: 1px solid #e1bee7;
}

.ubitto-quiz-badge-not-attempted {
	background: #fafafa;
	color: #757575;
	border: 1px solid #e0e0e0;
}

.ubitto-quiz-badge-attempted {
	background: #fff3e0;
	color: #f57c00;
	border: 1px solid #ffe0b2;
}

.ubitto-quiz-badge-free {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #c8e6c9;
}

.ubitto-quiz-badge-paid {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ffcdd2;
}

/* Quiz Link */
.ubitto-quiz-link {
	color: #1976d2;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
}

.ubitto-quiz-link:hover {
	text-decoration: underline;
	color: #1565c0;
}

/* Points Display */
.ubitto-quiz-points {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ubitto-quiz-point-item {
	display: inline-block;
	padding: 3px 8px;
	background: #e8f5e9;
	border: 1px solid #81c784;
	border-radius: 12px;
	font-size: 11px;
	color: #2e7d32;
	font-weight: 500;
	white-space: nowrap;
}

.ubitto-quiz-point-earned {
	color: #1b5e20;
	font-weight: 700;
}

/* Buy Button in Access Column */
#ubitto-playground #quizzes-table .buy-btn {
	display: inline-block;
	margin-left: 8px;
	padding: 4px 10px;
	background: #ff9800;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

#ubitto-playground #quizzes-table .buy-btn:hover {
	background: #f57c00;
}

#ubitto-playground #quizzes-table .buy-btn .price-icon {
	margin-right: 3px;
}

/* Table Responsive with data-label */
@media screen and (max-width: 768px) {
	#ubitto-playground #quizzes-table thead {
		display: none;
	}

	#ubitto-playground #quizzes-table tr {
		display: block;
		margin-bottom: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 12px;
		background: white;
	}

	#ubitto-playground #quizzes-table td {
		display: block;
		text-align: right;
		padding: 8px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	#ubitto-playground #quizzes-table td:last-child {
		border-bottom: none;
	}

	#ubitto-playground #quizzes-table td::before {
		content: attr(data-label);
		float: left;
		font-weight: 600;
		color: #757575;
		font-size: 11px;
		text-transform: uppercase;
	}
}

/* Remove old colorful headers, use simple styling */
#ubitto-playground #quizzes-table thead th {
	background: #f5f5f5 !important;
	color: #424242 !important;
	font-weight: 600 !important;
	text-align: left !important;
	padding: 12px 16px !important;
	border-bottom: 2px solid #e0e0e0 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

#ubitto-playground #quizzes-table tbody td {
	padding: 12px 16px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	vertical-align: middle !important;
}

#ubitto-playground #quizzes-table tbody tr:hover {
	background-color: #fafafa !important;
}

/* Override old point-badge styling */
#ubitto-playground #quizzes-table tbody td .point-badge {
	display: none;
}

/* Level Badge Styling */
.level-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 11px;

	text-align: center;
	white-space: nowrap;
	border: 1px solid;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Level 1 - Seed (Light Blue) */
.level-badge.level-1 {
	background: #e3f2fd;
	color: #0d47a1;
	border-color: #1976d2;
}

/* Level 2 - Sprout (Light Green) */
.level-badge.level-2 {
	background: #e8f5e9;
	color: #1b5e20;
	border-color: #388e3c;
}

/* Level 3 - Survival (Orange) */
.level-badge.level-3 {
	background: #fff3e0;
	color: #e65100;
	border-color: #f57c00;
}

/* Level 4 - Solid (Purple) */
.level-badge.level-4 {
	background: #f3e5f5;
	color: #4a148c;
	border-color: #7b1fa2;
}

/* Level 5 - Significant (Red) */
.level-badge.level-5 {
	background: #ffebee;
	color: #b71c1c;
	border-color: #d32f2f;
}

/* Level 6 - Advanced (Teal) */
.level-badge.level-6 {
	background: #e0f2f1;
	color: #004d40;
	border-color: #00796b;
}

/* Level 7 - Expert (Indigo) */
.level-badge.level-7 {
	background: #e8eaf6;
	color: #1a237e;
	border-color: #3f51b5;
}

/* Default fallback for other levels */
.level-badge:not([class*="level-"]) {
	background: #f5f5f5;
	color: #424242;
	border-color: #757575;
}

/* Sortable Headers */
#ubitto-playground #quizzes-table thead th.sortable {
	cursor: pointer;
	user-select: none;
}

#ubitto-playground #quizzes-table thead th.sortable:hover {
	background: #eeeeee !important;
}

#ubitto-playground #quizzes-table thead th .sort-icon {
	font-size: 14px;
	color: #1976d2;
	margin-left: 4px;
}

/* Point Filter Dropdown */
.point-filter-dropdown {
	margin-left: 8px;
	padding: 4px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: white;
	font-size: 12px;
	font-weight: 500;
	color: #424242;
	cursor: pointer;
	outline: none;
}

.point-filter-dropdown:hover {
	border-color: #1976d2;
}

.point-filter-dropdown:focus {
	border-color: #1976d2;
	box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

}