/**
 * Gaming Toplist - My Account CSS for Blade Templates
 */

/* Override the sidebar layout to make navigation horizontal */
.lg\:col-span-1 {
	grid-column: span 4 / span 4 !important; /* Make nav full width */
}

.lg\:col-span-3 {
	grid-column: span 4 / span 4 !important; /* Make content full width */
}

/* Horizontal navigation */
.bg-neutral-850 ul.space-y-2 {
	display: flex !important;
	flex-direction: row !important;
	gap: 1rem;
	space-y: 0 !important;
}

.bg-neutral-850 ul.space-y-2 li {
	margin: 0 !important;
}

/* Better background color */
.bg-neutral-850 {
	background-color: #252525 !important;
}

/* Increase form field spacing */
.space-y-6 > div {
	margin-bottom: 2.5rem !important;
}

/* Larger WYSIWYG editor */
#information {
	min-height: 350px !important;
	padding: 1.5rem !important;
}

#information p {
	margin-bottom: 1rem;
}

#information ul {
	  list-style: disc;
  }
  
#information ol {
		list-style: decimal;
	}
	  
  
  
#information ul li, #information ol li {
	  margin-left: 35px;
  }

#gtl-wysiwyg-toolbar {
	background: rgba(0, 0, 0, 0.5);
	padding: 0.75rem !important;
}

/* Better input field styling */
input[type="text"],
input[type="url"],
textarea,
select {
	padding: 1rem;
	font-size: 1rem;;
}

/* Make the navigation horizontal on desktop */
@media (min-width: 1024px) {
	.lg\:col-span-1 .sticky {
		position: relative !important;
		top: 0 !important;
	}
	
	.lg\:col-span-1 {
		margin-bottom: 2rem;
	}
	
	/* Grid adjustment for full-width layout */
	.grid.lg\:grid-cols-4 {
		display: block !important;
	}
}

/* Additional styling for My Account page elements */
.gtl-stat-box {
	transition: transform 0.3s ease;
}

.gtl-stat-box:hover {
	transform: translateY(-5px);
}

/* Style the navigation pills */
.bg-orange-500 {
	background-color: #ff6900 !important;
}

.hover\:bg-neutral-700:hover {
	background-color: rgba(255, 105, 0, 0.1) !important;
}

/* Better spacing for form groups */
form.space-y-6 > div {
	margin-bottom: 1.5rem !important;
}

/* Ensure detailed information field is larger */
.min-h-\[200px\] {
	min-height: 350px !important;
}





/* Platinum Settings Styles */
.gtl-platinum-settings {
	padding: 20px;
}

.gtl-platinum-settings h2 {
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: bold;
}

.gtl-platinum-settings h3 {
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600;
	border-bottom: 2px solid #ff6900;
	padding-bottom: 10px;
}

.gtl-platinum-selector {
	background: rgba(0, 0, 0, 0.3);
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 30px;
}

.gtl-platinum-selector label {
	margin-right: 10px;
	font-weight: 600;
}

.gtl-platinum-selector select {
	padding: 8px 15px;
	background: #1a1a1a;
	color: #fff;
	border: 1px solid #333;
	border-radius: 5px;
}

.gtl-platinum-form .gtl-form-group {
	margin-bottom: 25px;
}

.gtl-platinum-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #ff6900;
}

.gtl-platinum-form input[type="color"] {
	width: 60px;
	height: 40px;
	border: 2px solid #333;
	border-radius: 5px;
	cursor: pointer;
}

.gtl-platinum-form input[type="checkbox"] {
	margin-right: 8px;
}

#gtl-platinum-message {
	margin-top: 20px;
}

/* Color picker group styling */
.gtl-platinum-form .color-group {
	display: flex;
	gap: 30px;
	align-items: center;
}

.gtl-platinum-form .color-group > div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gtl-platinum-form .color-group label {
	margin: 0;
	font-weight: normal;
	color: #ccc;
}