.hide {
	display: none !important;
}

.wrap {
	background: #f0f0f1;
	max-width: 1400px !important;
	margin: 0 auto;
	padding: 60px 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

.wp-header-wrapper {
	text-align: center;
	margin-bottom: 60px;
}

.wp-heading-inline {
	font-size: 3em;
	font-weight: 800;
	color: #1e293b;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -1px;
}

.wp-subtitle {
	font-size: 1.3em;
	color: #64748b;
	margin: 0;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
}

.subscription-container {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: stretch;
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1200px;
}

.plan-card {
	background: #ffffff;
	border-radius: 24px;
	padding: 48px 32px;
	text-align: center;
	flex: 1;
	max-width: 380px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.plan-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.lifetime-badge {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	padding: 8px 20px;
	border-radius: 30px;
	display: inline-block;
	margin: 12px 0;
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.starter-plan .lifetime-badge {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.premium-plan .lifetime-badge {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.plan-card h2 {
	font-size: 32px;
	font-weight: 800;
	margin: 24px 0;
	color: #1e293b;
	letter-spacing: -0.5px;
}

.price {
	font-size: 56px;
	font-weight: 800;
	color: #1e293b;
	margin: 32px 0;
	letter-spacing: -2px;
}

.popular-badge,
.best-value-badge {
	position: absolute;
	top: -15px;
	right: -15px;
	padding: 10px 24px;
	border-radius: 30px;
	font-size: 0.9em;
	font-weight: 600;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	letter-spacing: 0.5px;
}

.popular-badge {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
}

.best-value-badge {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
	color: white;
}

.select-plan-button {
	/* Keep existing button styles */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 32px;
	border-radius: 16px;
	font-size: 1.2em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none; /* Important for anchor tag */
	transition: all 0.3s ease;
	width: 100%;
	margin: 24px 0;
	border: none;
	letter-spacing: 0.3px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box; /* Important for consistent sizing */
}

.button-icon {
	font-size: 1.2em;
	transition: transform 0.3s ease;
}

.select-plan-button:hover {
	transform: translateY(-2px);
	text-decoration: none; /* Important for anchor tag */
}

.select-plan-button:hover .button-icon {
	transform: translateX(5px);
}

.select-plan-button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

.select-plan-button.disabled:hover {
	transform: none;
	box-shadow: none;
}

.button-text, .button-icon {
	display: inline-flex;
	align-items: center;
}

.button-icon {
	transition: transform 0.3s ease;
}

.starter-plan .select-plan-button {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
	color: white !important;
}

.basic-plan .select-plan-button {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white !important;
}

.premium-plan .select-plan-button {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
	color: white !important;
}

.plan-card ul {
	list-style: none;
	padding: 0;
	margin: 32px 0;
	text-align: left;
}

.plan-card ul li {
	padding: 12px 0;
	color: #475569;
	display: flex;
	align-items: center;
	font-size: 1em;
	line-height: 1.5;

/* Styling for the subscription info section */
.subscription-info-section {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%) !important;
	border-radius: 16px !important;
	padding: 25px !important;
	margin: 0 auto 40px !important;
	max-width: 900px !important;
	box-shadow: 0 15px 30px rgba(124, 58, 237, 0.3) !important;
	border: 2px solid rgba(255, 255, 255, 0.2) !important;
	position: relative;
	overflow: hidden;
}

.subscription-info-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 70%);
	pointer-events: none;
}

.subscription-info-section::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	bottom: -100px;
	right: -100px;
	z-index: 0;
}

.subscription-info-details {
	position: relative;
	z-index: 1;
}

.subscription-info-details h3 {
	font-size: 1.5em !important;
	margin: 0 0 15px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.subscription-info-details p {
	margin: 8px 0 !important;
	font-size: 1em !important;
	color: rgba(255, 255, 255, 0.95) !important;
}

.subscription-info-details span {
	font-weight: 600 !important;
	background: rgba(255, 255, 255, 0.25) !important;
	padding: 3px 10px !important;
	border-radius: 6px !important;
	margin-left: 5px !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.subscription-actions {
	position: relative;
	z-index: 1;
	margin-top: 15px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px !important;
}

.manage-subscription-btn, .cancel-subscription-btn {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.manage-subscription-btn:hover, .cancel-subscription-btn:hover {
	background: rgba(255, 255, 255, 0.35) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.cancel-subscription-btn {
	background: rgba(255, 255, 255, 0.15) !important;
}

.cancel-subscription-btn:hover {
	background: rgba(255, 255, 255, 0.25) !important;
}
	margin-bottom: 8px;
}

.feature-check {
	color: #22c55e;
	margin-right: 12px;
	font-size: 1.2em;
}

.feature-plus {
	color: #ff0000;
	margin-right: 12px;
	font-size: 1.2em;
}

.percent-badge {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 0.9em;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	margin: 0 4px;
	position: relative;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	animation: badgePulse 2s infinite;
}

/* Subtle pulse animation */
@keyframes badgePulse {
	0% {
		transform: scale(1);
		box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
	}
}

/* Alternative gradient versions */
.percent-badge.green {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.percent-badge.purple {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
	box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

/* Hover effect */
.percent-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Optional: Add shine effect */
.percent-badge::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
			45deg,
			transparent 0%,
			rgba(255, 255, 255, 0.1) 45%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.1) 55%,
			transparent 100%
	);
	transform: rotate(45deg);
	animation: shine 3s infinite;
}

@keyframes shine {
	0% {
		transform: translateX(-100%) rotate(45deg);
	}
	20%, 100% {
		transform: translateX(100%) rotate(45deg);
	}
}

.feature-x {
	color: #ef4444;
	margin-right: 12px;
	font-size: 1.2em;
}

.feature-disabled {
	color: #94a3b8;
}

.plan-footnote {
	font-size: 0.9em;
	color: #64748b;
	margin: 16px 0 0 0;
}

@media (max-width: 1100px) {
	.subscription-container {
		flex-direction: column;
		align-items: center;
	}

	.plan-card {
		width: 100%;
		max-width: 480px;
		margin-bottom: 40px;
	}

	.wp-heading-inline {
		font-size: 2.4em;
	}
}

.vip-overlay {
	position: absolute;
	top: 350px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 94%;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.97) 0%, rgba(99, 102, 241, 0.97) 100%);
	backdrop-filter: blur(8px);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 28px;
	text-align: center;
	z-index: 999999;
	box-shadow: 0 8px 32px rgba(79, 70, 229, 0.25);
	animation: slideIn 0.4s ease-out;
	max-width: 500px;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vip-overlay .vip-feature {
	animation: fadeIn 0.5s ease-out forwards;
	opacity: 0;
	transform: translateY(10px);
}

@keyframes fadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Add staggered animation for features */
.vip-overlay .vip-feature:nth-child(1) { animation-delay: 0.2s; }
.vip-overlay .vip-feature:nth-child(2) { animation-delay: 0.3s; }
.vip-overlay .vip-feature:nth-child(3) { animation-delay: 0.4s; }

.vip-crown-container {
	background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
	border-radius: 16px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
	margin-bottom: 20px;
}

.vip-crown {
	font-size: 36px;
	animation: floating 3s ease-in-out infinite;
}

.vip-title {
	font-size: 24px;
	font-weight: 800;
	color: white;
	margin: 0 0 12px 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.vip-message {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
	margin: 0 0 20px 0;
	max-width: 90%;
}

.vip-badge {
	background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
	color: #1e293b;
	padding: 8px 20px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: pulse 2s infinite;
}

.vip-close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	background: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	z-index: 11;
}

.vip-close:hover {
	transform: scale(1.1);
	background: #f8fafc;
}

.vip-close::before,
.vip-close::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 2px;
	background: #4f46e5;
	border-radius: 1px;
}

.vip-close::before {
	transform: rotate(45deg);
}

.vip-close::after {
	transform: rotate(-45deg);
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translate(-50%, -40%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes floating {
	0% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(5deg); }
	100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.vip-overlay.hiding {
	animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideOut {
	from {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
	to {
		opacity: 0;
		transform: translate(-50%, -40%);
	}
}

#basic-overlay {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.97) 0%, rgba(37, 99, 235, 0.97) 100%);
	box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25);
}

#basic-overlay .vip-crown-container {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

#basic-overlay .vip-badge {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.loading-active {
	position: fixed;
	top: 32px;
	left: 160px;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99990;
}

@media screen and (max-width: 960px) {
	.loading-active {
		left: 36px; /* WordPress collapses sidebar on smaller screens */
	}
}

@media screen and (max-width: 782px) {
	.loading-active {
		top: 46px; /* WordPress admin bar is taller on mobile */
		left: 0; /* No sidebar on mobile */
	}
}

body:not(.admin-bar) .loading-active {
	top: 0;
}

.loading-content {
	text-align: center;
	transform: translateY(-50%);
	margin-top: -60px;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3b82f6;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 12px;
}

/** loading**/
.loading-text {
	color: #1e293b;
	font-size: 1.2em;
	font-weight: 600;
	margin-top: -8px;
}

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

/* Placeholder shimmer effect */
.placeholder {
	background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 8px;
	display: inline-block;
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.vip-features {
	margin-bottom: 14px;
	padding: 10px;
	border-radius: 15px;
	background: #ffffff5c;
	width: 40%;
}

.vip-subtitle{
	color: #00ff1b;
}

.per-month {
	font-size: 11.6667px; !important;
}

/* Styles for subscription warning when no active plan */
.subscription-warning {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.subscription-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.badge-warning {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 0.9em;
	box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.subscription-note {
	color: #64748b;
	font-size: 0.9em;
	margin: 0;
	font-style: italic;
}

/* Enhanced tooltip styles */
.tooltip-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: #f0f9ff;
	color: #3b82f6;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	margin-left: 6px;
	cursor: help;
	transition: all 0.2s ease;
	border: 1px solid #bfdbfe;
}

.tooltip-icon:hover {
	background: #3b82f6;
	color: white;
	box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 300px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #1e293b;
	color: white;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 100;
	text-align: center;
}

[data-tooltip]:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Form field enhancements */
.field-label {
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 10px;
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.3px;
}

/* Base styles for all text inputs, textareas, and selects */
.regular-text,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	transition: all 0.2s ease;
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2937;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Focus state for all inputs */
.regular-text:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* Hover state for all inputs */
.regular-text:hover:not(:focus):not([disabled]),
input[type="text"]:hover:not(:focus):not([disabled]),
input[type="number"]:hover:not(:focus):not([disabled]),
input[type="email"]:hover:not(:focus):not([disabled]),
input[type="password"]:hover:not(:focus):not([disabled]),
input[type="url"]:hover:not(:focus):not([disabled]),
input[type="tel"]:hover:not(:focus):not([disabled]),
input[type="search"]:hover:not(:focus):not([disabled]),
textarea:hover:not(:focus):not([disabled]),
select:hover:not(:focus):not([disabled]) {
	border-color: #9ca3af;
}

/* Disabled state for all inputs */
.regular-text[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
	background-color: #f3f4f6;
	color: #6b7280;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Placeholder styling */
::placeholder {
	color: #9ca3af;
	opacity: 1;
}

/* Checkbox and radio container */
.checkbox-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: 12px;
	padding: 12px;
	border-radius: 8px;
	transition: all 0.2s ease;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.checkbox-item:hover {
	background-color: #f8fafc;
	border-color: #d1d5db;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Checkbox and radio input styling */
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	margin-right: 12px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #ffffff;
}

/* Radio button specific styling */
.checkbox-item input[type="radio"] {
	border-radius: 50%;
}

/* Checked state for checkbox */
.checkbox-item input[type="checkbox"]:checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
}

/* Checked state for radio */
.checkbox-item input[type="radio"]:checked {
	border-color: #3b82f6;
	border-width: 5px;
}

/* Focus state for checkbox and radio */
.checkbox-item input[type="checkbox"]:focus,
.checkbox-item input[type="radio"]:focus {
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* Checkmark for checkbox */
.checkbox-item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Radio group container */
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}

/* Radio option styling */
.radio-option {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-radius: 8px;
	transition: all 0.2s ease;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.radio-option:hover {
	background-color: #f8fafc;
	border-color: #d1d5db;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.setting-group {
	margin-bottom: 24px;
	padding: 16px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-section h3 {
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
	margin-top: 0;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e2e8f0;
}

/* Category selection styles */
.category-selection-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 8px;
}

.category-input-wrapper {
	flex: 1;
}

.auto-select-checkbox {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
	white-space: nowrap;
	margin-top: 2px;
}

.auto-select-checkbox:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.auto-select-input {
	margin-right: 8px;
}

.auto-select-label {
	font-size: 14px;
	color: #475569;
	font-weight: 500;
}

/* Post description styles */
.post-description-wrapper {
	position: relative;
	margin-top: 8px;
}

.post-description-textarea {
	width: 100%;
	resize: vertical;
	min-height: 80px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	line-height: 1.5;
}

.field-description {
	margin-top: 8px;
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
}

/* Badge styling improvements */
.badge-container {
	display: flex;
	align-items: center;
	position: relative;
	width: fit-content;
	height: fit-content;
	margin-left: 5px;
	margin-top: 0;
	margin-bottom: 0;
}

.checkbox-item > .badge-container {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.feature-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-right: 8px;
}

.pro-badge {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
	color: white;
	box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.basic-badge {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* Required field indicator */
.required-icon {
	color: #ef4444;
	font-weight: bold;
	margin-left: 2px;
}

/* Error message styling */
.error-text {
	color: #ef4444;
	font-size: 13px;
	margin-top: 6px;
	font-weight: 500;
}

/* Main title styling */
.main-title-group {
	border-left: 3px solid #3b82f6;
	padding-left: 16px;
	position: relative;
}

.main-title-input-wrapper {
	margin-top: 8px;
}

.main-title-input {
	font-size: 16px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid #d1d5db;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	background-color: #ffffff;
	color: #1f2937;
	width: 100%;
	box-sizing: border-box;
	font-weight: 500;
}

.main-title-input:hover:not(:focus) {
	border-color: #9ca3af;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.main-title-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* Bulk titles styling */
.bulk-titles-group {
	border-left: 3px solid #6366f1;
	padding-left: 16px;
	position: relative;
}

.bulk-titles-wrapper {
	margin-top: 8px;
}

.bulk-titles-textarea {
	font-size: 15px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid #d1d5db;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	width: 100%;
	resize: vertical;
	min-height: 150px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	background-color: #ffffff;
	color: #1f2937;
	box-sizing: border-box;
}

.bulk-titles-textarea:hover:not(:focus) {
	border-color: #9ca3af;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.bulk-titles-textarea:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
	outline: none;
}

/* Select Wrapper Enhancement */
.select-wrapper {
	position: relative;
	width: 100%;
	font-weight: 400;
	margin-bottom: 12px;
}

.select-wrapper select {
	width: 100%;
	padding: 12px 16px;
	padding-right: 140px; /* Space for badges */
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2937;
	background-color: white;
	transition: all 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236B7280' d='M7 7l3 3 3-3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.select-wrapper select:hover:not(:focus) {
	border-color: #9ca3af;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.select-wrapper select:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* Style for dropdown menu */
.dropdown-menu {
	padding: 14px 40px 14px 16px !important;
	border: 1px solid #d1d5db !important;
	background-color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	font-size: 14px !important;
	color: #1f2937 !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	transition: all 0.2s ease !important;
}

.dropdown-menu:hover:not(:focus) {
	border-color: #9ca3af !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

.dropdown-menu:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
	outline: none !important;
}

/* Premium feature styling */
.premium-feature {
	position: relative;
}

/* Button Enhancements */
.button,
.button-primary,
.button-secondary,
button[type="submit"],
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	letter-spacing: 0.3px;
}

/* Primary button */
.button-primary,
button.button-primary,
.wp-core-ui .button-primary,
#generate_post {
	background: linear-gradient(to bottom, #3b82f6, #2563eb);
	color: white;
	border-color: #2563eb;
}

.button-primary:hover,
button.button-primary:hover,
.wp-core-ui .button-primary:hover,
#generate_post:hover {
	background: linear-gradient(to bottom, #2563eb, #1d4ed8);
	box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
	transform: translateY(-1px);
}

.button-primary:focus,
button.button-primary:focus,
.wp-core-ui .button-primary:focus,
#generate_post:focus {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
	outline: none;
}

/* Secondary button */
.button-secondary,
button.button-secondary,
.wp-core-ui .button-secondary,
#show-options {
	background: #f9fafb;
	color: #1f2937;
	border-color: #d1d5db;
}

.button-secondary:hover,
button.button-secondary:hover,
.wp-core-ui .button-secondary:hover,
#show-options:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.button-secondary:focus,
button.button-secondary:focus,
.wp-core-ui .button-secondary:focus,
#show-options:focus {
	box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.5);
	outline: none;
}

/* Danger button */
.button-danger,
button.button-danger,
.wp-core-ui .button-danger,
#generate_post_bu_credit {
	background: linear-gradient(to bottom, #ef4444, #dc2626);
	color: white;
	border-color: #dc2626;
}

.button-danger:hover,
button.button-danger:hover,
.wp-core-ui .button-danger:hover,
#generate_post_bu_credit:hover {
	background: linear-gradient(to bottom, #dc2626, #b91c1c);
	box-shadow: 0 4px 6px rgba(220, 38, 38, 0.2);
	transform: translateY(-1px);
}

.button-danger:focus,
button.button-danger:focus,
.wp-core-ui .button-danger:focus,
#generate_post_bu_credit:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
	outline: none;
}

/* Disabled button state */
.button[disabled],
.button-primary[disabled],
.button-secondary[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Button with icon */
.button-icon {
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.button:hover .button-icon {
	transform: translateX(3px);
}

/* Featured image selector button */
#featured_image_selector {
	padding: 10px 16px;
	background-color: #f9fafb;
	color: #1f2937;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#featured_image_selector:hover {
	background-color: #f3f4f6;
	border-color: #9ca3af;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

#featured_image_selector:focus {
	box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.5);
	outline: none;
}

/* Remove button */
.remove-btn,
#selected_image_rmv_btn {
	background-color: #f3f4f6;
	color: #4b5563;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.remove-btn:hover,
#selected_image_rmv_btn:hover {
	background-color: #ef4444;
	color: white;
	border-color: #ef4444;
}

/* Number input with increment/decrement buttons */
.bulk-control-btn {
	background-color: #f3f4f6;
	color: #4b5563;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bulk-control-btn:hover:not(:disabled) {
	background-color: #e5e7eb;
	color: #1f2937;
	border-color: #9ca3af;
}

.bulk-control-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bulk-creation-input {
	width: 60px;
	text-align: center;
	padding: 8px;
	margin: 0 8px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #1f2937;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.bulk-creation-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* User section styling */
.user-section {
	border-left: 3px solid #22c55e;
	padding-left: 16px;
	background: linear-gradient(to right, rgba(34, 197, 94, 0.05), transparent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.user-section:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.highlighted-user-section {
	position: relative;
	padding: 8px;
	border-radius: 8px;
	background-color: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.2);
	transition: all 0.3s ease;
}

.highlighted-user-section:hover {
	background-color: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.3);
}

.user-dropdown {
	border-color: rgba(34, 197, 94, 0.4) !important;
	background-color: white !important;
	font-weight: 600 !important;
	color: #166534 !important;
}

.user-dropdown:focus {
	border-color: #22c55e !important;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

.user-dropdown option {
	font-weight: 600 !important;
	padding: 8px !important;
}

/* Subscription Dashboard Styling */
.subscription-dashboard {
	background: linear-gradient(135deg, #ffffff, #f8fafc);
	border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}

.subscription-dashboard::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #3b82f6, #6366f1);
}

.subscription-dashboard:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* Dashboard Title */
.dashboard-title {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 24px;
	color: #1e293b;
	border-bottom: 1px solid #e2e8f0;
}

.dashboard-title::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 60px;
	height: 3px;
	background: linear-gradient(to right, #3b82f6, #6366f1);
	border-radius: 3px;
}

/* Dashboard Grid Layout */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	position: relative;
	z-index: 1;
}

/* Dashboard Cards */
.dashboard-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid rgba(226, 232, 240, 0.8);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.dashboard-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.card-header {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #3b82f6, #60a5fa);
	border-radius: 10px;
	margin-right: 12px;
	color: white;
}

.card-icon.expired {
	background: linear-gradient(135deg, #ef4444, #f87171);
}

.card-title {
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
	margin: 0;
	display: flex;
	align-items: center;
}

.info-icon {
	margin-left: 6px;
	color: #3b82f6;
	transition: color 0.2s;
}

.info-icon:hover {
	color: #2563eb;
}

/* Card Content */
.card-content {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Plan Badge */
.plan-badge {
	display: inline-block;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: white;
	border-radius: 30px;
	margin-bottom: 16px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.bg-plan-basic {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.bg-plan-premium,
.bg-plan-pro {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
	box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.bg-plan-starter {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
	box-shadow: 0 2px 6px rgba(71, 85, 105, 0.3);
}

.plan-badge.expired {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* Progress Bar */
.progress-container {
	margin-top: 12px;
}

.progress-bar {
	height: 8px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 8px;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(to right, #3b82f6, #60a5fa);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}

.days-remaining {
	font-weight: 600;
	color: #1e293b;
}

.progress-label {
	color: #64748b;
	font-style: italic;
}

/* Expired Message */
.expired-message {
	color: #64748b;
	font-size: 14px;
	margin: 12px 0;
}

/* Credit Amount */
.credit-amount {
	font-size: 36px;
	font-weight: 700;
	color: #1e293b;
	text-align: center;
	margin: 10px 0 20px;
	padding: 10px;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px dashed #cbd5e1;
}

/* Buttons */
.upgrade-button,
.add-credits-button,
.primary-action-button,
.secondary-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
	text-decoration: none;
	margin-top: auto;
}

.upgrade-button,
.primary-action-button {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: white;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.upgrade-button:hover,
.primary-action-button:hover {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
	transform: translateY(-2px);
}

.add-credits-button {
	color: #3b82f6;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	text-align: center;
}

.add-credits-button:hover {
	background: #dbeafe;
	color: #2563eb;
}

.secondary-action-button {
	background: white;
	color: #4b5563;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.secondary-action-button:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

.add-icon,
.button-icon {
	margin-right: 6px;
}

/* Action Buttons Container */
.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
}

/* Plan Credit Summary Section */
.plan-credit-summary {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.plan-credit-summary:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.plan-credit-summary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, #3b82f6, #6366f1);
}

.plan-credit-summary .flex-shrink-0 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.plan-credit-summary h3 {
	margin-bottom: 4px;
}

.plan-credit-summary .text-lg {
	line-height: 1.2;
}

@media (max-width: 768px) {
	.plan-credit-summary .flex {
		flex-direction: column;
		align-items: flex-start;
	}

	.plan-credit-summary .ml-4 {
		margin-left: 0;
		margin-top: 12px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.plan-credit-summary .space-x-4 {
		margin-top: 12px;
	}
}

/* Plan and Credits Box Styling */
.plan-box, .credits-box {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(226, 232, 240, 0.8);
}

.plan-box:hover, .credits-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.plan-box::before, .credits-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
}

.plan-box::before {
	background: linear-gradient(to right, #3b82f6, #60a5fa);
}

.credits-box::before {
	background: linear-gradient(to right, #6366f1, #8b5cf6);
}

.plan-box .plan-label {
	margin-bottom: 12px;
	display: block;
}

.credits-box .credits-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1e293b;
	display: block;
	margin: 10px 0;
}

.credits-box .add-credits-link {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	background: #f1f5f9;
	border-radius: 6px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.credits-box .add-credits-link:hover {
	background: #e2e8f0;
	transform: translateY(-1px);
}

/* Responsive adjustments for plan and credits boxes */
@media (max-width: 768px) {
	.plan-box, .credits-box {
		width: 100%;
		margin-bottom: 16px;
	}

	.credits-box {
		margin-left: 0 !important;
		text-align: left;
	}

	.credits-box .flex {
		justify-content: flex-start !important;
	}

	.subscription-dashboard .flex-wrap {
		flex-direction: column;
	}
}

/* Add subtle animations */
.subscription-dashboard .flex-col {
	transition: all 0.3s ease;
}

.subscription-dashboard .flex-col:hover {
	transform: translateY(-2px);
}

/* Credit balance styling */
.subscription-dashboard .ml-auto {
	position: relative;
}

.subscription-dashboard .ml-auto::before {
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M16 8l-8 8'%3E%3C/path%3E%3Cpath d='M8 8l8 8'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1;
	z-index: 0;
}

/* Action buttons styling */
.subscription-dashboard a[id="upgrade_plan_btn"] {
	transform: scale(1);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subscription-dashboard a[id="upgrade_plan_btn"]:hover {
	transform: scale(1.05);
}

/* Responsive improvements */
@media (max-width: 782px) {
	.category-selection-wrapper {
		flex-direction: column;
		gap: 12px;
	}

	.auto-select-checkbox {
		width: fit-content;
	}

	.setting-group {
		padding: 12px;
	}

	.button,
	.button-primary,
	.button-secondary,
	button[type="submit"],
	input[type="submit"],
	input[type="button"] {
		padding: 10px 16px;
		font-size: 13px;
	}

	.bulk-control-btn {
		width: 28px;
		height: 28px;
		font-size: 16px;
	}

	.bulk-creation-input {
		width: 50px;
		padding: 6px;
		font-size: 13px;
	}
}

/* Subscription Dashboard Styles */
.subscription-dashboard {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

.subscription-dashboard::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #3b82f6, #6366f1);
}

.subscription-dashboard h2 {
	position: relative;
}

.bg-plan-basic {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.bg-plan-standard {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.bg-plan-premium {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.bg-plan-enterprise {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Hover effect for the dashboard */
.subscription-dashboard:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Enhanced styling for the subscription info section */
.subscription-info-section {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%) !important;
	border-radius: 16px !important;
	padding: 25px !important;
	margin: 0 auto 40px !important;
	max-width: 900px !important;
	box-shadow: 0 15px 30px rgba(124, 58, 237, 0.3) !important;
	border: 2px solid rgba(255, 255, 255, 0.2) !important;
	position: relative;
	overflow: hidden;
}

.subscription-info-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 70%);
	pointer-events: none;
}

.subscription-info-section::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	bottom: -100px;
	right: -100px;
	z-index: 0;
}

.subscription-info-details {
	position: relative;
	z-index: 1;
}

.subscription-info-details h3 {
	font-size: 1.5em !important;
	margin: 0 0 15px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.subscription-info-details p {
	margin: 8px 0 !important;
	font-size: 1em !important;
	color: rgba(255, 255, 255, 0.95) !important;
}

.subscription-info-details span {
	font-weight: 600 !important;
	background: rgba(255, 255, 255, 0.25) !important;
	padding: 3px 10px !important;
	border-radius: 6px !important;
	margin-left: 5px !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.subscription-actions {
	position: relative;
	z-index: 1;
	margin-top: 15px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px !important;
}

.manage-subscription-btn, .cancel-subscription-btn {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.manage-subscription-btn:hover, .cancel-subscription-btn:hover {
	background: rgba(255, 255, 255, 0.35) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.cancel-subscription-btn {
	background: rgba(255, 255, 255, 0.15) !important;
}

.cancel-subscription-btn:hover {
	background: rgba(255, 255, 255, 0.25) !important;
}

/* Warning and success text styles */
.warning-text {
	color: #ffcc00 !important;
	font-weight: 500 !important;
	padding: 5px 10px !important;
	border-radius: 6px !important;
	background: rgba(255, 204, 0, 0.1) !important;
	border-left: 3px solid #ffcc00 !important;
}

.success-text {
	color: #00cc66 !important;
	font-weight: 500 !important;
	padding: 5px 10px !important;
	border-radius: 6px !important;
	background: rgba(0, 204, 102, 0.1) !important;
	border-left: 3px solid #00cc66 !important;
}