/* AG tyl HPP Admin Interface Styles */

/* Hidden field styling */
.ag-hidden-field {
	display: none !important;
}

.ag-tyl-admin-wrapper {
	max-width: none;
	width: 100%;
	margin: 20px 0;
	background: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	overflow: hidden;
}

.ag-admin-header {
	background: linear-gradient(120deg, rgba(255, 0, 140, 0.8) 0%, rgba(142, 0, 189, 0.8) 100%);
	color: white;
	padding: 30px;
}

.ag-admin-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ag-admin-logo {
	display: flex;
	align-items: center;
}

.ag-admin-logo h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	color: white;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.version-badge {
	background: transparent;
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	margin-right: 10px;
	border: 2px solid white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.environment-badge {
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	min-width: 100px;
	text-align: center;
}

.environment-badge.test-mode {
	background: white;
	color: #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	font-weight: 700;
	position: relative;
	padding-left: 35px;
}

.environment-badge.test-mode::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: #6c757d;
	border-radius: 50%;
	animation: pulse-grey 2s infinite;
}

@keyframes pulse-grey {
	0% {
		box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(108, 117, 125, 0);
	}
}

.environment-badge.live-mode {
	background: black;
	color: white;
	border: 2px solid #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	font-weight: 700;
	position: relative;
	padding-left: 35px;
}

.environment-badge.live-mode::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: #28a745;
	border-radius: 50%;
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
	}
}

.ag-admin-tabs {
	background: #f8f9fa;
}

.ag-tab-nav {
	display: flex;
	background: white;
	border-bottom: 1px solid #e1e5e9;
	padding: 0 50px;
}

.ag-tab-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px 25px;
	text-decoration: none;
	color: #6c757d;
	border-bottom: 3px solid transparent;
	transition: all 0.3s ease;
	font-weight: 500;
}

.ag-tab-link:hover {
	color: #ff008c;
	background: #f8f9fa;
}

.ag-tab-link.active {
	color: #ff008c;
	border-bottom-color: #ff008c;
	background: #f8f9fa;
}

.ag-tab-content {
	padding: 40px 50px;
}

.ag-tab-pane {
	display: none;
}

.ag-tab-pane.active {
	display: block;
}

.ag-tab-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e1e5e9;
}

.ag-tab-header h3 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 24px;
}

.ag-tab-header p {
	margin: 0;
	color: #6c757d;
	font-size: 16px;
}

.ag-settings-form {
	background: white;
	padding: 25px;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
}

.ag-advanced-settings {
	background: white;
	padding: 25px;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
}

.ag-setup-steps {
	background: white;
	padding: 25px;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
}

/* Webhook Configuration Section */
.ag-webhook-section {
	margin-top: 30px;
	padding: 25px;
	background: #f0f8ff;
	border-radius: 8px;
	border-left: 4px solid #0073aa;
}

.ag-webhook-section h4 {
	margin: 0 0 10px 0;
	color: #0073aa;
	font-size: 18px;
	font-weight: 600;
}

.ag-webhook-section p {
	margin: 0 0 20px 0;
	color: #6c757d;
	line-height: 1.6;
}

.ag-webhook-url {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 15px 0;
}

.ag-webhook-url label {
	font-weight: 600;
	min-width: 100px;
	color: #2c3e50;
}

.ag-webhook-url input[type="text"] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-family: monospace;
	font-size: 13px;
}

.ag-webhook-url .copy-webhook-url {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	background: #0073aa !important;
	border-color: #0073aa !important;
	color: white !important;
}

.ag-webhook-url .copy-webhook-url:hover {
	background: #005a87 !important;
	border-color: #005a87 !important;
}

.ag-webhook-info {
	margin-top: 15px;
	padding: 15px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.ag-webhook-info ul {
	margin: 10px 0 0 20px;
}

.ag-webhook-info li {
	margin-bottom: 5px;
	color: #666;
}

/* API Test Section */
.ag-api-test-section {
	margin-top: 30px;
	padding: 25px;
	background: #f8f9fa;
	border-radius: 8px;
	border-left: 4px solid #17a2b8;
}

.ag-api-test-section h4 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
}

.ag-api-test-section p {
	margin: 0 0 20px 0;
	color: #6c757d;
	line-height: 1.6;
}

.ag-api-test-controls {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

#ag-test-api {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: white !important;
	padding: 10px 20px !important;
	font-weight: 500 !important;
	border-radius: 6px !important;
	transition: all 0.3s ease !important;
}

#ag-test-api:hover:not(:disabled) {
	background: #138496 !important;
	border-color: #138496 !important;
	transform: translateY(-1px) !important;
}

#ag-test-api:disabled {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

.ag-api-test-result {
	flex: 1;
	padding: 12px 16px;
	border-radius: 6px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ag-api-test-result.success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.ag-api-test-result.test-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.ag-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.ag-setup-steps {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.ag-step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ag-step-number {
	background: linear-gradient(120deg, rgba(255, 0, 140, 0.8) 0%, rgba(142, 0, 189, 0.8) 100%);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(214, 51, 132, 0.2);
}

.ag-step-content h4 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 18px;
}

.ag-step-content p {
	margin: 0 0 15px 0;
	color: #6c757d;
	line-height: 1.6;
}

.ag-credentials-info {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 6px;
	border-left: 4px solid #667eea;
}

.ag-credential-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 8px 0;
	border-bottom: 1px solid #e1e5e9;
}

.ag-credential-item:last-child {
	border-bottom: none;
}

.ag-environment-note {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 6px;
	padding: 15px;
	margin-top: 20px;
}

.ag-environment-note p {
	margin: 0;
	color: #856404;
	font-size: 14px;
	line-height: 1.5;
}

/* Webhook Setup Styling */
.ag-webhook-setup {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 6px;
	margin-top: 15px;
}

.ag-webhook-step {
	padding: 10px 0;
	border-bottom: 1px solid #e1e5e9;
	color: #2c3e50;
	line-height: 1.6;
}

.ag-webhook-step:last-child {
	border-bottom: none;
}

.ag-webhook-step strong {
	color: #28a745;
	margin-right: 8px;
}

.ag-webhook-url {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 10px;
	background: white;
	border-radius: 4px;
	border: 1px solid #e1e5e9;
}

.ag-webhook-url code {
	flex: 1;
	background: none;
	padding: 0;
	border: none;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 13px;
	color: #2c3e50;
}

.button-small.ag-copy-btn {
	padding: 4px 12px !important;
	font-size: 12px !important;
	height: auto !important;
	line-height: 1.4 !important;
}

/* Videos Tab Styling */
.ag-video-section {
	margin-bottom: 40px;
	margin-top: 40px;
}

.ag-video-section h4 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 20px;
	font-weight: 600;
	padding-bottom: 10px;
	border-bottom: 2px solid #e1e5e9;
}

.ag-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-bottom: 30px;
}

.ag-video-card {
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 8px;
	padding: 25px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.ag-video-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 0, 140, 0.15);
	border-color: #ff008c;
}

.ag-video-thumbnail {
	position: relative;
	text-align: center;
	margin-bottom: 20px;
	border-radius: 8px;
	overflow: hidden;
	background: #f8f9fa;
	border: 1px solid #e1e5e9;
}

.ag-video-thumbnail img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ag-video-thumbnail:hover img {
	transform: scale(1.05);
}

.ag-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ag-video-thumbnail:hover .ag-video-overlay {
	opacity: 1;
}

.ag-video-overlay .dashicons {
	font-size: 48px;
	color: white;
	width: 48px;
	height: 48px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.ag-video-card h5 {
	margin: 0 0 15px 0;
	color: #333;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}

.ag-video-card p {
	margin: 0 0 20px 0;
	color: #6c757d;
	line-height: 1.6;
	text-align: center;
}

.ag-video-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	padding: 12px 20px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background: rgba(255, 0, 140, 0.8) !important;
	border: none !important;
	color: white !important;
	transition: all 0.3s ease !important;
}

.ag-video-link:hover {
	background: rgba(142, 0, 189, 0.8) !important;
	border-color: transparent !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(255, 0, 140, 0.3) !important;
}

/* Privacy Notice Styling */
.ag-privacy-notice {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 30px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.ag-privacy-icon {
	flex-shrink: 0;
}

.ag-privacy-icon .dashicons {
	font-size: 24px;
	color: #856404;
	width: 24px;
	height: 24px;
}

.ag-privacy-content h4 {
	margin: 0 0 10px 0;
	color: #856404;
	font-size: 16px;
	font-weight: 600;
}

.ag-privacy-content p {
	margin: 0 0 10px 0;
	color: #856404;
	font-size: 14px;
	line-height: 1.5;
}

.ag-privacy-content p:last-child {
	margin-bottom: 0;
}

/* Coming Soon Section */
.ag-coming-soon {
	background: #f8f9fa;
	border: 1px solid #e1e5e9;
	border-radius: 8px;
	padding: 25px;
	text-align: center;
}

.ag-coming-soon p {
	margin: 0 0 20px 0;
	color: #6c757d;
	font-size: 16px;
	line-height: 1.6;
}

.ag-suggestions {
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	padding: 20px;
	margin-top: 20px;
}

.ag-suggestions h5 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 16px;
	font-weight: 600;
}

.ag-suggestions p {
	margin: 0;
	color: #6c757d;
	font-size: 14px;
	line-height: 1.5;
}

/* AG Hub Styling */
.ag-hub-section {
	margin-top: 80px;
}

.ag-hub-docs {
	padding: 0;
	background: transparent;
	border: none;
}

.ag-video-section p {
	margin: 0 0 20px 0 !important;
	color: #2c3e50 !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
}

.ag-hub-docs-container {
	background: #f8f9fa;
	border: 1px solid #e1e5e9;
	border-radius: 8px;
	padding: 25px;
}

.ag-hub-docs h5 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
}

.ag-hub-docs-grid {
	display: grid;
	gap: 12px;
}

.ag-hub-doc-link {
	display: block;
	padding: 12px 16px;
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	color: #2c3e50;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ag-hub-doc-link:hover {
	background: #f8f9fa;
	border-color: #ff008c;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,0,140,0.15);
}

.ag-video-section.ag-hub-additional p {
    margin: 0 0 20px 0 !important;
    color: #6c757d !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.ag-hub-docs-message {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin: 20px 0;
}

.ag-hub-docs-message p {
    margin: 0 0 15px 0 !important;
    color: #6c757d !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Style Guide Specific Styles */
.ag-style-guide {
    padding: 20px 0;
}

.ag-style-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
}

.ag-style-section h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 24px;
    border-bottom: 2px solid #ff008c;
    padding-bottom: 10px;
}

.ag-style-example {
    margin-bottom: 30px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #ff008c;
}

.ag-style-example h4 {
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 18px;
}

.ag-style-example h1,
.ag-style-example h2,
.ag-style-example h3,
.ag-style-example h4,
.ag-style-example h5,
.ag-style-example h6 {
    margin: 10px 0;
}

.ag-style-example p {
    margin: 10px 0;
}

.ag-style-example button {
    margin: 5px 10px 5px 0;
}

.ag-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.ag-icon-grid .dashicons {
    font-size: 24px;
    color: #666;
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
}

.ag-icon-grid .dashicons:hover {
    color: #ff008c;
    background: #fff;
    border-color: #ff008c;
}

/* Custom Notice Colors */
.ag-success-notice {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-left: 4px solid #28a745;
    color: #155724;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}

.ag-warning-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-left: 4px solid #ffc107;
    color: #856404;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}

.ag-error-notice {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-left: 4px solid #dc3545;
    color: #721c24;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}

.ag-privacy-notice {
    background: #e2e3f0;
    border: 1px solid #c5c7e8;
    border-left: 4px solid #6f42c1;
    color: #4a2c7a;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}

.ag-info-notice {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-left: 4px solid #17a2b8;
    color: #0c5460;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
}

/* Make cards and buttons not full width */
.ag-feature-card,
.ag-video-card {
    max-width: 400px;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
}

.ag-style-example .ag-feature-card,
.ag-style-example .ag-video-card {
    max-width: 350px;
}

.ag-style-example button {
    display: inline-block;
    width: auto;
    margin: 5px 10px 5px 0;
}

.ag-style-example .button.button-primary.ag-video-link,
.ag-style-example .button.button-primary.ag-hub-doc-link {
    width: auto;
    min-width: 150px;
}

/* Layout & Grid Systems */
.ag-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 10px 0;
}

.ag-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 10px 0;
}

.ag-grid-item {
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    text-align: center;
}

.ag-flex-examples {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ag-flex-horizontal {
    display: flex;
    gap: 10px;
}

.ag-flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ag-flex-horizontal span,
.ag-flex-space-between span {
    padding: 8px 12px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 14px;
}

/* Interactive Elements */
.ag-hover-demo {
    background: #8e00bd !important;
    border-color: #8e00bd !important;
    color: #fff !important;
}

.ag-hover-demo:hover {
    background: #ff008c !important;
    border-color: #ff008c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,140,0.3);
}

.ag-card-hover-demo {
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ag-card-hover-demo:hover {
    background: #fff;
    border-color: #ff008c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,140,0.15);
}

.ag-loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.ag-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #ff008c;
    border-radius: 50%;
    animation: ag-spin 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

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

.ag-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin: 0 10px;
}

.ag-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ag-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.ag-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.ag-toggle input:checked + .ag-toggle-slider {
    background-color: #ff008c;
}

.ag-toggle input:checked + .ag-toggle-slider:before {
    transform: translateX(26px);
}

.ag-progress {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0;
}

.ag-progress-bar {
    height: 100%;
    background-color: #ff008c;
    transition: width 0.3s ease;
}

/* Navigation Elements */
.ag-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.ag-breadcrumb a {
    color: #ff008c;
    text-decoration: none;
}

.ag-breadcrumb a:hover {
    text-decoration: underline;
}

.ag-breadcrumb-separator {
    color: #6c757d;
}

.ag-breadcrumb-current {
    color: #495057;
    font-weight: 500;
}

.ag-pagination {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ag-pagination-btn {
    padding: 6px 12px;
    border: 1px solid #e1e5e9;
    background: #fff;
    color: #495057;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.ag-pagination-btn:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #ff008c;
}

.ag-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ag-pagination-active {
    background: #ff008c !important;
    color: #fff !important;
    border-color: #ff008c !important;
}

.ag-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ag-menu-item {
    padding: 8px 12px;
    color: #495057;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ag-menu-item:hover {
    background: #f8f9fa;
    color: #ff008c;
}

.ag-menu-active {
    background: #ff008c !important;
    color: #fff !important;
}

/* Feedback Elements */
.ag-tooltip-demo {
    position: relative;
}

.ag-toast {
    padding: 12px 16px;
    margin: 5px 0;
    border-radius: 4px;
    font-size: 14px;
    max-width: 300px;
}

.ag-toast-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ag-toast-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.ag-toast-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Spacing & Layout */
.ag-spacing-demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ag-margin-small {
    margin: 8px 0;
    padding: 10px;
    background: #f8f9fa;
    border-left: 4px solid #ff008c;
}

.ag-margin-medium {
    margin: 16px 0;
    padding: 10px;
    background: #f8f9fa;
    border-left: 4px solid #ff008c;
}

.ag-margin-large {
    margin: 24px 0;
    padding: 10px;
    background: #f8f9fa;
    border-left: 4px solid #ff008c;
}

.ag-border-demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ag-border-solid {
    padding: 10px;
    border: 2px solid #ff008c;
    border-radius: 4px;
}

.ag-border-dashed {
    padding: 10px;
    border: 2px dashed #ff008c;
    border-radius: 4px;
}

.ag-border-dotted {
    padding: 10px;
    border: 2px dotted #ff008c;
    border-radius: 4px;
}

.ag-shadow-demo {
    display: flex;
    gap: 15px;
    align-items: center;
}

.ag-shadow-light {
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ag-shadow-medium {
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ag-shadow-heavy {
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Color Palette */
.ag-color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.ag-color-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ag-color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
}

.ag-color-primary { background: #ff008c; }
.ag-color-secondary { background: #8e00bd; }
.ag-color-accent { background: #17a2b8; }
.ag-color-success { background: #28a745; }
.ag-color-warning { background: #ffc107; }
.ag-color-error { background: #dc3545; }
.ag-color-info { background: #17a2b8; }

/* Typography Scale */
.ag-font-light { font-weight: 300; }
.ag-font-normal { font-weight: 400; }
.ag-font-bold { font-weight: 700; }

.ag-line-tight { line-height: 1.2; }
.ag-line-normal { line-height: 1.6; }
.ag-line-loose { line-height: 2.0; }

.ag-letter-condensed { letter-spacing: -0.5px; }
.ag-letter-normal { letter-spacing: 0px; }
.ag-letter-expanded { letter-spacing: 1px; }

/* Component Combinations */
.ag-combo-demo {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ag-combo-card {
    max-width: 300px;
    flex: 1;
    min-width: 250px;
}

.ag-combo-inline {
    display: block;
}

.ag-combo-inline .ag-feature-action {
    margin-top: 15px;
}

.ag-form-validation-demo {
    max-width: 400px;
}

.ag-form-group {
    position: relative;
    margin-bottom: 20px;
}

.ag-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #2c3e50;
}

.ag-form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 14px;
}

.ag-form-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: bold;
}

.ag-icon-success { color: #28a745; }
.ag-icon-error { color: #dc3545; }
.ag-icon-warning { color: #ffc107; }

.ag-form-help {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.ag-form-success input {
    border-color: #28a745;
    background-color: #f8fff9;
}

.ag-form-error input {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.ag-form-warning input {
    border-color: #ffc107;
    background-color: #fffdf5;
}

.ag-header-with-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
}

.ag-header-badges {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ag-status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.ag-status-active {
    background: #d4edda;
    color: #155724;
}

.ag-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 400px;
}

.ag-action-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e1e5e9;
}

.ag-action-list li:last-child {
    border-bottom: none;
}

.ag-list-content {
    flex: 1;
}

.ag-list-content strong {
    display: block;
    color: #2c3e50;
    margin-bottom: 2px;
}

.ag-list-content small {
    color: #6c757d;
    font-size: 12px;
}

/* Content Blocks */
.ag-quote-block {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #ff008c;
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

.ag-quote-block p {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.6;
    color: #2c3e50;
}

.ag-quote-block cite {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: #6c757d;
    text-align: right;
}

.ag-quote-testimonial {
    background: #fff;
    border: 1px solid #e1e5e9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ag-code-block {
    background: #2c3e50;
    border-radius: 4px;
    overflow: hidden;
    margin: 15px 0;
}

.ag-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #34495e;
    border-bottom: 1px solid #4a5f7a;
}

.ag-code-title {
    color: #ecf0f1;
    font-size: 14px;
    font-weight: 500;
}

.ag-code-block pre {
    margin: 0;
    padding: 15px;
    background: transparent;
    overflow-x: auto;
}

.ag-code-block code {
    color: #ecf0f1;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.ag-alert-box {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid;
    position: relative;
}

.ag-alert-box {
    background: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.ag-alert-warning {
    background: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.ag-alert-icon {
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

.ag-alert-content {
    flex: 1;
    font-size: 14px;
}

.ag-alert-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 10px;
    flex-shrink: 0;
}

.ag-alert-close:hover {
    opacity: 1;
}

.ag-info-panel {
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    margin: 15px 0;
}

.ag-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ag-info-header:hover {
    background: #e9ecef;
}

.ag-info-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 16px;
}

.ag-info-toggle {
    font-size: 12px;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.ag-info-expanded .ag-info-toggle {
    transform: rotate(180deg);
}

.ag-info-content {
    padding: 0 15px;
    max-height: fit-content;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ag-info-expanded .ag-info-content {
    padding: 15px;
    max-height: 500px;
}

.ag-info-content p {
    margin: 0 0 10px 0;
    color: #495057;
}

.ag-info-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ag-info-content li {
    margin-bottom: 5px;
    color: #495057;
}

/* Modal & Overlay Components */
.ag-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.ag-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.ag-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
}

.ag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-modal-header h3 {
    margin: 0;
    color: #2c3e50;
}

.ag-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-modal-close:hover {
    color: #2c3e50;
}

.ag-modal-body {
    padding: 20px;
}

.ag-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-tooltip-demo {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ag-tooltip-trigger {
    position: relative;
}

.ag-tooltip-trigger:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
}

.ag-tooltip-trigger:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c3e50;
    z-index: 1000;
}

.ag-dropdown-demo {
    max-width: 200px;
}

.ag-dropdown {
    position: relative;
    display: inline-block;
}

.ag-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ag-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

.ag-dropdown:hover .ag-dropdown-menu {
    display: block;
}

.ag-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
}

.ag-dropdown-item:hover {
    background: #f8f9fa;
    color: #2c3e50;
}

.ag-dropdown-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.ag-dropdown-divider {
    height: 1px;
    background: #e1e5e9;
    margin: 5px 0;
}

.ag-dropdown-danger {
    color: #dc3545;
}

.ag-dropdown-danger:hover {
    background: #f8d7da;
    color: #721c24;
}

.ag-loading-demo {
    display: flex;
    gap: 30px;
    align-items: center;
}

.ag-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff008c;
    border-radius: 50%;
    animation: ag-spin 1s linear infinite;
}

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

.ag-skeleton-card {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 20px;
    width: 250px;
}

.ag-skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ag-skeleton-loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ag-skeleton-title {
    height: 20px;
    width: 60%;
}

.ag-skeleton-text {
    height: 16px;
    width: 100%;
}

.ag-skeleton-short {
    width: 80%;
}

@keyframes ag-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* E-commerce Specific */
.ag-product-cards-demo {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ag-product-card {
    position: relative;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    width: 280px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.ag-product-featured {
    border-color: #ff008c;
    box-shadow: 0 0 0 2px rgba(255, 0, 140, 0.1);
}

.ag-product-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff008c;
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.ag-product-image {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.ag-product-image .dashicons {
    font-size: 24px;
    color: #6c757d;
}

.ag-product-info h5 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 18px;
}

.ag-product-description {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.ag-product-price {
    margin-bottom: 20px;
}

.ag-price-current {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.ag-price-period {
    color: #6c757d;
    font-size: 14px;
}

.ag-product-btn {
    width: 100%;
}

.ag-cart-demo {
    max-width: 400px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-cart-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-cart-item:last-of-type {
    border-bottom: none;
}

.ag-cart-item-info {
    flex: 1;
}

.ag-cart-item-info h6 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 14px;
}

.ag-cart-item-info small {
    color: #6c757d;
    font-size: 12px;
}

.ag-cart-item-price {
    font-weight: 600;
    color: #2c3e50;
    margin-right: 10px;
}

.ag-cart-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-cart-remove:hover {
    background: #f8d7da;
    border-radius: 50%;
}

.ag-cart-total {
    background: #f8f9fa;
    padding: 15px;
    border-top: 2px solid #e1e5e9;
}

.ag-cart-subtotal,
.ag-cart-tax,
.ag-cart-total-amount {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.ag-cart-total-amount {
    font-weight: 700;
    font-size: 16px;
    color: #2c3e50;
    border-top: 1px solid #e1e5e9;
    padding-top: 10px;
    margin-top: 10px;
}

.ag-order-status-demo {
    max-width: 400px;
}

.ag-order-timeline {
    position: relative;
    padding-left: 30px;
}

.ag-order-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e1e5e9;
}

.ag-timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.ag-timeline-marker {
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e1e5e9;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e1e5e9;
}

.ag-timeline-completed .ag-timeline-marker {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a745;
}

.ag-timeline-current .ag-timeline-marker {
    background: #ff008c;
    box-shadow: 0 0 0 2px #ff008c;
    animation: ag-pulse 2s infinite;
}

@keyframes ag-pulse {
    0% { box-shadow: 0 0 0 2px #ff008c; }
    50% { box-shadow: 0 0 0 6px rgba(255, 0, 140, 0.3); }
    100% { box-shadow: 0 0 0 2px #ff008c; }
}

.ag-timeline-content h6 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 14px;
}

.ag-timeline-content small {
    color: #6c757d;
    font-size: 12px;
}

.ag-reviews-demo {
    max-width: 400px;
}

.ag-review-card {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
}

.ag-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.ag-review-rating {
    display: flex;
    gap: 2px;
}

.ag-review-rating .dashicons {
    color: #ffc107;
    font-size: 16px;
}

.ag-review-meta strong {
    display: block;
    color: #2c3e50;
    font-size: 14px;
}

.ag-review-meta small {
    color: #6c757d;
    font-size: 12px;
}

.ag-review-text {
    color: #495057;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.ag-review-date {
    color: #6c757d;
    font-size: 12px;
}

/* Dashboard Widgets */
.ag-chart-demo {
    max-width: 500px;
}

.ag-chart-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-chart-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-chart-period select {
    padding: 5px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 12px;
}

.ag-chart-placeholder {
    padding: 20px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ag-chart-bars {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 120px;
    gap: 8px;
}

.ag-chart-bar {
    flex: 1;
    background: linear-gradient(to top, #ff008c, #8e00bd);
    border-radius: 2px 2px 0 0;
    min-height: 20px;
}

.ag-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6c757d;
}

.ag-chart-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-chart-stat {
    text-align: center;
}

.ag-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
}

.ag-stat-label {
    font-size: 12px;
    color: #6c757d;
}

.ag-activity-demo {
    max-width: 400px;
}

.ag-activity-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-activity-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-activity-list {
    padding: 10px 0;
}

.ag-activity-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f4;
}

.ag-activity-item:last-child {
    border-bottom: none;
}

.ag-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.ag-activity-success {
    background: #d4edda;
    color: #155724;
}

.ag-activity-warning {
    background: #fff3cd;
    color: #856404;
}

.ag-activity-info {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-activity-icon .dashicons {
    font-size: 16px;
}

.ag-activity-content {
    flex: 1;
}

.ag-activity-content p {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 14px;
}

.ag-activity-content small {
    color: #6c757d;
    font-size: 12px;
}

.ag-quick-actions-demo {
    max-width: 400px;
}

.ag-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.ag-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 15px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #2c3e50;
}

.ag-quick-action:hover {
    border-color: #ff008c;
    box-shadow: 0 2px 8px rgba(255, 0, 140, 0.1);
    color: #2c3e50;
}

.ag-quick-action .dashicons {
    font-size: 24px;
    color: #ff008c;
}

.ag-quick-action span:last-child {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.ag-system-status-demo {
    max-width: 400px;
}

.ag-status-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-status-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-status-indicator {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.ag-status-healthy {
    background: #d4edda;
    color: #155724;
}

.ag-status-list {
    padding: 15px 20px;
}

.ag-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-status-item:last-child {
    border-bottom: none;
}

.ag-status-label {
    color: #2c3e50;
    font-size: 14px;
}

.ag-status-value {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
}

.ag-status-success {
    color: #155724;
}

.ag-status-warning {
    color: #856404;
}

.ag-status-info {
    color: #0c5460;
}

.ag-status-value .dashicons {
    font-size: 14px;
}

/* Fix breadcrumbs positioning */
.ag-breadcrumbs {
    margin-left: auto;
    margin-right: 0;
}

/* Fix video card icon centering */
.ag-video-card .ag-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Payment Analytics Widgets */
.ag-analytics-demo {
    max-width: 500px;
}

.ag-analytics-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-analytics-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-analytics-controls select {
    padding: 5px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 12px;
}

.ag-analytics-chart {
    padding: 20px;
}

.ag-line-chart {
    margin-bottom: 20px;
}

.ag-line-path {
    position: relative;
    border-radius: 4px;
}

.ag-chart-metrics {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.ag-metric {
    text-align: center;
    flex: 1;
}

.ag-metric-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ag-metric-label {
    font-size: 12px;
    color: #6c757d;
}

.ag-payment-methods-demo {
    max-width: 400px;
}

.ag-payment-methods-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-payment-methods-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-payment-methods-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-period-badge {
    background: #e9ecef;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-payment-methods-content {
    padding: 15px 20px;
}

.ag-payment-method-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-payment-method-item:last-child {
    border-bottom: none;
}

.ag-payment-method-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ag-payment-method-icon {
    width: 40px;
    height: 25px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.ag-visa-icon {
    background: #1a1f71;
}

.ag-mastercard-icon {
    background: #eb001b;
}

.ag-amex-icon {
    background: #006fcf;
}

.ag-paypal-icon {
    background: #003087;
}

.ag-payment-method-details {
    display: flex;
    flex-direction: column;
}

.ag-payment-method-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.ag-payment-method-count {
    color: #6c757d;
    font-size: 12px;
}

.ag-payment-method-stats {
    text-align: right;
}

.ag-payment-method-percentage {
    font-weight: 700;
    color: #2c3e50;
    font-size: 14px;
}

.ag-payment-method-amount {
    color: #6c757d;
    font-size: 12px;
}

.ag-success-rate-demo {
    max-width: 400px;
}

.ag-success-rate-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-success-rate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-success-rate-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-success-rate-indicator {
    text-align: right;
}

.ag-success-rate-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #28a745;
}

.ag-success-rate-trend {
    font-size: 12px;
    font-weight: 500;
}

.ag-trend-up {
    color: #28a745;
}

.ag-trend-down {
    color: #dc3545;
}

.ag-success-rate-chart {
    padding: 20px;
}

.ag-mini-chart {
    height: 60px;
    position: relative;
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

.ag-mini-chart-line {
    position: relative;
    height: 100%;
}

.ag-mini-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff008c;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ff008c;
}

.ag-success-rate-breakdown {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.ag-success-rate-item {
    text-align: center;
    flex: 1;
}

.ag-success-rate-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.ag-success-rate-number {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}

/* Real-time Monitoring Widgets */
.ag-live-feed-demo {
    max-width: 400px;
}

.ag-live-feed-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-live-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-live-feed-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-live-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ag-live-dot {
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
    animation: ag-pulse 2s infinite;
}

.ag-live-text {
    font-size: 11px;
    font-weight: 700;
    color: #dc3545;
    text-transform: uppercase;
}

.ag-live-feed-content {
    max-height: 300px;
    overflow-y: auto;
}

.ag-live-transaction {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f3f4;
}

.ag-live-transaction:last-child {
    border-bottom: none;
}

.ag-transaction-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-transaction-success .ag-transaction-icon {
    background: #d4edda;
    color: #155724;
}

.ag-transaction-3ds .ag-transaction-icon {
    background: #fff3cd;
    color: #856404;
}

.ag-transaction-declined .ag-transaction-icon {
    background: #f8d7da;
    color: #721c24;
}

.ag-transaction-icon .dashicons {
    font-size: 16px;
}

.ag-transaction-details {
    flex: 1;
}

.ag-transaction-amount {
    font-weight: 700;
    color: #2c3e50;
    font-size: 14px;
}

.ag-transaction-info {
    color: #6c757d;
    font-size: 12px;
}

.ag-transaction-time {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.ag-health-monitor-demo {
    max-width: 400px;
}

.ag-health-monitor-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-health-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-health-monitor-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-health-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-health-excellent {
    background: #d4edda;
    color: #155724;
}

.ag-health-status .dashicons {
    font-size: 14px;
}

.ag-health-metrics {
    padding: 20px;
}

.ag-health-metric {
    margin-bottom: 20px;
}

.ag-health-metric:last-child {
    margin-bottom: 0;
}

.ag-health-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ag-health-metric-label {
    font-size: 12px;
    color: #6c757d;
}

.ag-health-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-health-metric-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.ag-health-metric-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ag-health-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-health-summary-item {
    text-align: center;
    flex: 1;
}

.ag-health-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-health-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-error-tracker-demo {
    max-width: 400px;
}

.ag-error-tracker-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-error-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-error-tracker-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-error-rate-indicator {
    text-align: right;
}

.ag-error-rate-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #dc3545;
}

.ag-error-breakdown {
    padding: 15px 20px;
}

.ag-error-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-error-item:last-child {
    border-bottom: none;
}

.ag-error-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-error-3ds {
    background: #fff3cd;
    color: #856404;
}

.ag-error-timeout {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-error-declined {
    background: #f8d7da;
    color: #721c24;
}

.ag-error-icon .dashicons {
    font-size: 16px;
}

.ag-error-details {
    flex: 1;
}

.ag-error-type {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.ag-error-count {
    color: #6c757d;
    font-size: 12px;
}

.ag-error-percentage {
    font-weight: 700;
    color: #dc3545;
    font-size: 14px;
}

/* Customer Insights Widgets */
.ag-top-customers-demo {
    max-width: 400px;
}

.ag-top-customers-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-top-customers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-top-customers-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-top-customers-content {
    padding: 15px 20px;
}

.ag-customer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-customer-item:last-child {
    border-bottom: none;
}

.ag-customer-rank {
    width: 24px;
    height: 24px;
    background: #ff008c;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.ag-customer-info {
    flex: 1;
}

.ag-customer-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-customer-details {
    color: #6c757d;
    font-size: 12px;
}

.ag-customer-trend {
    font-size: 12px;
    font-weight: 600;
}

.ag-geographic-demo {
    max-width: 400px;
}

.ag-geographic-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-geographic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-geographic-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-geographic-controls select {
    padding: 5px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 12px;
}

.ag-geographic-content {
    padding: 15px 20px;
}

.ag-location-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-location-item:last-child {
    border-bottom: none;
}

.ag-location-flag {
    font-size: 20px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.ag-location-info {
    flex: 1;
}

.ag-location-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-location-stats {
    color: #6c757d;
    font-size: 12px;
}

.ag-location-percentage {
    font-weight: 700;
    color: #2c3e50;
    font-size: 14px;
}

.ag-location-other {
    opacity: 0.7;
}

.ag-lifetime-value-demo {
    max-width: 400px;
}

.ag-lifetime-value-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-lifetime-value-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-lifetime-value-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-lifetime-value-summary {
    text-align: right;
}

.ag-lifetime-value-avg {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ff008c;
}

.ag-lifetime-value-label {
    font-size: 11px;
    color: #6c757d;
}

.ag-lifetime-value-content {
    padding: 20px;
}

.ag-lifetime-value-metrics {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.ag-lifetime-metric {
    text-align: center;
    flex: 1;
}

.ag-lifetime-metric-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ag-lifetime-metric-label {
    font-size: 11px;
    color: #6c757d;
}

.ag-lifetime-value-chart {
    height: 120px;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
}

.ag-lifetime-chart-bars {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 100%;
    gap: 10px;
}

.ag-lifetime-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 30px;
}

.ag-lifetime-new {
    background: linear-gradient(to top, #17a2b8, #20c997);
}

.ag-lifetime-returning {
    background: linear-gradient(to top, #ffc107, #fd7e14);
}

.ag-lifetime-vip {
    background: linear-gradient(to top, #ff008c, #8e00bd);
}

.ag-lifetime-bar-label {
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
}

.ag-retention-demo {
    max-width: 400px;
}

.ag-retention-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-retention-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-retention-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-retention-period-label {
    font-size: 11px;
    color: #6c757d;
}

.ag-retention-content {
    padding: 20px;
}

.ag-retention-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.ag-retention-stat {
    text-align: center;
    flex: 1;
}

.ag-retention-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ag-retention-stat-label {
    font-size: 10px;
    color: #6c757d;
}

.ag-retention-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

.ag-retention-summary-item {
    text-align: center;
    flex: 1;
}

.ag-retention-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-retention-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Security & Compliance Widgets */
.ag-fraud-alerts-demo {
    max-width: 400px;
}

.ag-fraud-alerts-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-fraud-alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-fraud-alerts-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-fraud-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-fraud-monitoring {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-fraud-status .dashicons {
    font-size: 14px;
}

.ag-fraud-alerts-content {
    padding: 15px 20px;
}

.ag-fraud-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-fraud-alert:last-child {
    border-bottom: none;
}

.ag-fraud-alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-fraud-high .ag-fraud-alert-icon {
    background: #f8d7da;
    color: #721c24;
}

.ag-fraud-medium .ag-fraud-alert-icon {
    background: #fff3cd;
    color: #856404;
}

.ag-fraud-low .ag-fraud-alert-icon {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-fraud-alert-icon .dashicons {
    font-size: 16px;
}

.ag-fraud-alert-details {
    flex: 1;
}

.ag-fraud-alert-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-fraud-alert-info {
    color: #6c757d;
    font-size: 12px;
}

.ag-fraud-alert-time {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.ag-fraud-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-fraud-summary-item {
    text-align: center;
    flex: 1;
}

.ag-fraud-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-fraud-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-pci-compliance-demo {
    max-width: 400px;
}

.ag-pci-compliance-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-pci-compliance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-pci-compliance-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-pci-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-pci-compliant {
    background: #d4edda;
    color: #155724;
}

.ag-pci-status .dashicons {
    font-size: 14px;
}

.ag-pci-checklist {
    padding: 15px 20px;
}

.ag-pci-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-pci-item:last-child {
    border-bottom: none;
}

.ag-pci-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-pci-complete .ag-pci-item-icon {
    background: #d4edda;
    color: #155724;
}

.ag-pci-warning .ag-pci-item-icon {
    background: #fff3cd;
    color: #856404;
}

.ag-pci-item-icon .dashicons {
    font-size: 14px;
}

.ag-pci-item-content {
    flex: 1;
}

.ag-pci-item-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-pci-item-status {
    color: #6c757d;
    font-size: 12px;
}

.ag-pci-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-pci-certificate {
    font-size: 12px;
}

.ag-pci-cert-label {
    color: #6c757d;
}

.ag-pci-cert-date {
    color: #2c3e50;
    font-weight: 600;
}

.ag-ssl-monitor-demo {
    max-width: 400px;
}

.ag-ssl-monitor-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-ssl-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-ssl-monitor-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-ssl-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-ssl-valid {
    background: #d4edda;
    color: #155724;
}

.ag-ssl-status .dashicons {
    font-size: 14px;
}

.ag-ssl-certificates {
    padding: 15px 20px;
}

.ag-ssl-certificate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-ssl-certificate:last-child {
    border-bottom: none;
}

.ag-ssl-cert-info {
    flex: 1;
}

.ag-ssl-cert-domain {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-ssl-cert-issuer {
    color: #6c757d;
    font-size: 12px;
}

.ag-ssl-cert-status {
    text-align: right;
}

.ag-ssl-cert-expiry {
    font-size: 12px;
    color: #2c3e50;
    font-weight: 500;
    margin-bottom: 2px;
}

.ag-ssl-cert-strength {
    font-size: 11px;
    color: #6c757d;
}

.ag-ssl-warning .ag-ssl-cert-expiry {
    color: #856404;
}

.ag-ssl-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-ssl-summary-item {
    text-align: center;
    flex: 1;
}

.ag-ssl-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-ssl-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-audit-trail-demo {
    max-width: 400px;
}

.ag-audit-trail-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-audit-trail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-audit-trail-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-audit-trail-controls select {
    padding: 5px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 12px;
}

.ag-audit-trail-content {
    padding: 15px 20px;
}

.ag-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-audit-item:last-child {
    border-bottom: none;
}

.ag-audit-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-audit-config {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-audit-access {
    background: #d4edda;
    color: #155724;
}

.ag-audit-test {
    background: #fff3cd;
    color: #856404;
}

.ag-audit-export {
    background: #e2e3e5;
    color: #383d41;
}

.ag-audit-icon .dashicons {
    font-size: 16px;
}

.ag-audit-details {
    flex: 1;
}

.ag-audit-action {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-audit-info {
    color: #6c757d;
    font-size: 12px;
}

.ag-audit-time {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

/* Financial Summary Widgets */
.ag-financial-totals-demo {
    max-width: 500px;
}

.ag-financial-totals-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-financial-totals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-financial-totals-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-financial-period-selector {
    display: flex;
    gap: 5px;
}

.ag-period-btn {
    padding: 6px 12px;
    border: 1px solid #e1e5e9;
    background: #fff;
    color: #6c757d;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ag-period-btn:hover {
    background: #f8f9fa;
}

.ag-period-btn.ag-period-active {
    background: #ff008c;
    color: #fff;
    border-color: #ff008c;
}

.ag-financial-totals-content {
    padding: 20px;
}

.ag-financial-metrics {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.ag-financial-metric {
    text-align: center;
    flex: 1;
}

.ag-financial-metric-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.ag-financial-metric-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.ag-financial-metric-change {
    font-size: 11px;
    font-weight: 600;
}

.ag-change-up {
    color: #28a745;
}

.ag-financial-chart {
    height: 150px;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
}

.ag-financial-chart-bars {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 100px;
    gap: 8px;
}

.ag-financial-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 20px;
}

.ag-financial-bar-value {
    position: absolute;
    top: -20px;
    font-size: 10px;
    color: #2c3e50;
    font-weight: 600;
}

.ag-financial-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 8px;
}

.ag-financial-chart-labels span {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: #6c757d;
}

.ag-fee-calculator-demo {
    max-width: 400px;
}

.ag-fee-calculator-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-fee-calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-fee-calculator-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-fee-calculator-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ag-fee-toggle-label {
    font-size: 12px;
    color: #6c757d;
}

.ag-fee-toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
}

.ag-fee-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ag-fee-toggle-switch label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.ag-fee-toggle-switch label:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.ag-fee-toggle-switch input:checked + label {
    background-color: #ff008c;
}

.ag-fee-toggle-switch input:checked + label:before {
    transform: translateX(20px);
}

.ag-fee-calculator-content {
    padding: 20px;
}

.ag-fee-input-section {
    margin-bottom: 20px;
}

.ag-fee-input-section label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.ag-fee-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.ag-fee-currency {
    position: absolute;
    left: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #6c757d;
    z-index: 1;
}

.ag-fee-input-group input {
    width: 100%;
    padding: 12px 12px 12px 30px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
}

.ag-fee-breakdown {
    margin-bottom: 20px;
}

.ag-fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-fee-item:last-child {
    border-bottom: none;
}

.ag-fee-item.ag-fee-total {
    border-top: 2px solid #e1e5e9;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
}

.ag-fee-label {
    font-size: 14px;
    color: #2c3e50;
}

.ag-fee-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-fee-result {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}

.ag-fee-net-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
}

.ag-fee-net-value {
    font-size: 24px;
    font-weight: 700;
    color: #ff008c;
}

.ag-settlement-tracking-demo {
    max-width: 400px;
}

.ag-settlement-tracking-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-settlement-tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-settlement-tracking-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-settlement-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-settlement-pending {
    background: #fff3cd;
    color: #856404;
}

.ag-settlement-status .dashicons {
    font-size: 14px;
}

.ag-settlement-tracking-content {
    padding: 20px;
}

.ag-settlement-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f3f4;
}

.ag-settlement-summary-item {
    text-align: center;
    flex: 1;
}

.ag-settlement-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-settlement-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-settlement-timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ag-settlement-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ag-settlement-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-settlement-completed .ag-settlement-icon {
    background: #d4edda;
    color: #155724;
}

.ag-settlement-current .ag-settlement-icon {
    background: #fff3cd;
    color: #856404;
}

.ag-settlement-icon .dashicons {
    font-size: 16px;
}

.ag-settlement-details {
    flex: 1;
}

.ag-settlement-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-settlement-info {
    color: #6c757d;
    font-size: 12px;
}

.ag-refund-management-demo {
    max-width: 400px;
}

.ag-refund-management-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-refund-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-refund-management-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-refund-stat {
    text-align: center;
}

.ag-refund-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ff008c;
    margin-bottom: 2px;
}

.ag-refund-stat-label {
    font-size: 11px;
    color: #6c757d;
}

.ag-refund-management-content {
    padding: 15px 20px;
}

.ag-refund-list {
    margin-bottom: 15px;
}

.ag-refund-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-refund-item:last-child {
    border-bottom: none;
}

.ag-refund-info {
    flex: 1;
}

.ag-refund-order {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-refund-details {
    color: #6c757d;
    font-size: 12px;
}

.ag-refund-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-refund-pending {
    background: #fff3cd;
    color: #856404;
}

.ag-refund-processing {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-refund-completed {
    background: #d4edda;
    color: #155724;
}

.ag-refund-status .dashicons {
    font-size: 14px;
}

.ag-refund-actions {
    flex-shrink: 0;
}

.ag-refund-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

.ag-refund-summary-item {
    text-align: center;
    flex: 1;
}

.ag-refund-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-refund-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Integration Status Widgets */
.ag-dependencies-demo {
    max-width: 400px;
}

.ag-dependencies-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-dependencies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-dependencies-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-dependencies-overall {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-deps-healthy {
    background: #d4edda;
    color: #155724;
}

.ag-dependencies-overall .dashicons {
    font-size: 14px;
}

.ag-dependencies-content {
    padding: 15px 20px;
}

.ag-dependency-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-dependency-item:last-child {
    border-bottom: none;
}

.ag-dependency-info {
    flex: 1;
}

.ag-dependency-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-dependency-version {
    color: #6c757d;
    font-size: 12px;
}

.ag-dependency-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-dependency-ok {
    background: #d4edda;
    color: #155724;
}

.ag-dependency-warning {
    background: #fff3cd;
    color: #856404;
}

.ag-dependency-status .dashicons {
    font-size: 14px;
}

.ag-webhook-status-demo {
    max-width: 400px;
}

.ag-webhook-status-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-webhook-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-webhook-status-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-webhook-overall {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-webhook-healthy {
    background: #d4edda;
    color: #155724;
}

.ag-webhook-overall .dashicons {
    font-size: 14px;
}

.ag-webhook-status-content {
    padding: 15px 20px;
}

.ag-webhook-endpoints {
    margin-bottom: 15px;
}

.ag-webhook-endpoint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-webhook-endpoint:last-child {
    border-bottom: none;
}

.ag-webhook-endpoint-info {
    flex: 1;
}

.ag-webhook-endpoint-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-webhook-endpoint-url {
    color: #6c757d;
    font-size: 11px;
    font-family: monospace;
}

.ag-webhook-endpoint-status {
    text-align: right;
}

.ag-webhook-delivery-rate {
    font-size: 14px;
    font-weight: 600;
    color: #28a745;
    margin-bottom: 2px;
}

.ag-webhook-last-delivery {
    font-size: 11px;
    color: #6c757d;
}

.ag-webhook-stats {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

.ag-webhook-stat {
    text-align: center;
    flex: 1;
}

.ag-webhook-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 3px;
}

.ag-webhook-stat-label {
    font-size: 10px;
    color: #6c757d;
}

.ag-api-health-demo {
    max-width: 400px;
}

.ag-api-health-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-api-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-api-health-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-api-overall {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-api-healthy {
    background: #d4edda;
    color: #155724;
}

.ag-api-overall .dashicons {
    font-size: 14px;
}

.ag-api-health-content {
    padding: 15px 20px;
}

.ag-api-endpoints {
    margin-bottom: 15px;
}

.ag-api-endpoint {
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-api-endpoint:last-child {
    border-bottom: none;
}

.ag-api-endpoint-info {
    margin-bottom: 8px;
}

.ag-api-endpoint-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-api-endpoint-url {
    color: #6c757d;
    font-size: 11px;
    font-family: monospace;
}

.ag-api-endpoint-metrics {
    display: flex;
    gap: 20px;
}

.ag-api-metric {
    flex: 1;
}

.ag-api-metric-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 2px;
}

.ag-api-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-api-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

.ag-api-summary-item {
    text-align: center;
    flex: 1;
}

.ag-api-summary-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 3px;
}

.ag-api-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.ag-database-sync-demo {
    max-width: 400px;
}

.ag-database-sync-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-database-sync-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-database-sync-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-sync-overall {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-sync-healthy {
    background: #d4edda;
    color: #155724;
}

.ag-sync-overall .dashicons {
    font-size: 14px;
}

.ag-database-sync-content {
    padding: 15px 20px;
}

.ag-sync-tables {
    margin-bottom: 15px;
}

.ag-sync-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-sync-table:last-child {
    border-bottom: none;
}

.ag-sync-table-info {
    flex: 1;
}

.ag-sync-table-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-sync-table-count {
    color: #6c757d;
    font-size: 12px;
}

.ag-sync-table-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ag-sync-table-sync {
    font-size: 11px;
    color: #6c757d;
}

.ag-sync-table-status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-sync-ok {
    background: #d4edda;
    color: #155724;
}

.ag-sync-warning {
    background: #fff3cd;
    color: #856404;
}

.ag-sync-table-status-indicator .dashicons {
    font-size: 12px;
}

.ag-sync-actions {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

/* Notification Center Widgets */
.ag-alert-inbox-demo {
    max-width: 400px;
}

.ag-alert-inbox-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-alert-inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-alert-inbox-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-alert-count-badge {
    background: #ff008c;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.ag-alert-inbox-content {
    padding: 15px 20px;
}

.ag-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-alert-item:last-child {
    border-bottom: none;
}

.ag-alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-alert-high .ag-alert-icon {
    background: #f8d7da;
    color: #721c24;
}

.ag-alert-medium .ag-alert-icon {
    background: #fff3cd;
    color: #856404;
}

.ag-alert-low .ag-alert-icon {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-alert-icon .dashicons {
    font-size: 16px;
}

.ag-alert-details {
    flex: 1;
}

.ag-alert-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 4px;
}

.ag-alert-message {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.ag-alert-time {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.ag-alert-actions {
    flex-shrink: 0;
}

.ag-alert-dismiss {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-alert-dismiss:hover {
    color: #dc3545;
}

.ag-alert-inbox-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

.ag-maintenance-schedule-demo {
    max-width: 400px;
}

.ag-maintenance-schedule-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-maintenance-schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-maintenance-schedule-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-maintenance-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-maintenance-scheduled {
    background: #fff3cd;
    color: #856404;
}

.ag-maintenance-status .dashicons {
    font-size: 14px;
}

.ag-maintenance-schedule-content {
    padding: 15px 20px;
}

.ag-maintenance-upcoming {
    margin-bottom: 20px;
}

.ag-maintenance-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-maintenance-item:last-child {
    border-bottom: none;
}

.ag-maintenance-info {
    flex: 1;
}

.ag-maintenance-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-maintenance-description {
    color: #6c757d;
    font-size: 12px;
}

.ag-maintenance-schedule {
    text-align: right;
    margin-right: 12px;
}

.ag-maintenance-date {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.ag-maintenance-time {
    font-size: 11px;
    color: #6c757d;
}

.ag-maintenance-status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-maintenance-upcoming {
    background: #fff3cd;
    color: #856404;
}

.ag-maintenance-completed {
    background: #d4edda;
    color: #155724;
}

.ag-maintenance-status-indicator .dashicons {
    font-size: 14px;
}

.ag-maintenance-recent {
    padding-top: 15px;
    border-top: 1px solid #f1f3f4;
}

.ag-update-notifications-demo {
    max-width: 400px;
}

.ag-update-notifications-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-update-notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-update-notifications-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-update-count-badge {
    background: #ff008c;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.ag-update-notifications-content {
    padding: 15px 20px;
}

.ag-update-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-update-item:last-child {
    border-bottom: none;
}

.ag-update-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-update-available .ag-update-icon {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-update-current .ag-update-icon {
    background: #d4edda;
    color: #155724;
}

.ag-update-icon .dashicons {
    font-size: 16px;
}

.ag-update-details {
    flex: 1;
}

.ag-update-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 4px;
}

.ag-update-description {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.ag-update-meta {
    font-size: 11px;
    color: #6c757d;
}

.ag-update-actions {
    flex-shrink: 0;
    align-self: flex-start;
}

.ag-support-tickets-demo {
    max-width: 400px;
}

.ag-support-tickets-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-support-tickets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e5e9;
}

.ag-support-tickets-header h5 {
    margin: 0;
    color: #2c3e50;
}

.ag-support-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-support-active {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-support-status .dashicons {
    font-size: 14px;
}

.ag-support-tickets-content {
    padding: 15px 20px;
}

.ag-support-ticket {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f3f4;
}

.ag-support-ticket:last-child {
    border-bottom: none;
}

.ag-support-ticket-info {
    flex: 1;
}

.ag-support-ticket-id {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}

.ag-support-ticket-subject {
    color: #6c757d;
    font-size: 12px;
    margin-bottom: 2px;
}

.ag-support-ticket-meta {
    font-size: 11px;
    color: #6c757d;
}

.ag-support-ticket-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.ag-support-open {
    background: #fff3cd;
    color: #856404;
}

.ag-support-in-progress {
    background: #d1ecf1;
    color: #0c5460;
}

.ag-support-resolved {
    background: #d4edda;
    color: #155724;
}

.ag-support-ticket-status .dashicons {
    font-size: 14px;
}

.ag-support-tickets-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e1e5e9;
}

/* Customer Reviews Grid Widget */
.ag-reviews-grid-demo {
    max-width: 500px;
}

.ag-reviews-grid-widget {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.ag-reviews-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.ag-reviews-grid-header h5 {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
}

.ag-reviews-summary {
    text-align: right;
}

.ag-reviews-average {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.ag-reviews-average-rating {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.ag-reviews-stars {
    display: flex;
    gap: 2px;
}

.ag-reviews-stars .dashicons {
    font-size: 16px;
    color: #ffc107;
}

.ag-reviews-count {
    font-size: 12px;
    color: #6c757d;
}

.ag-reviews-grid-content {
    padding: 20px;
}

.ag-reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.ag-review-item {
    padding: 15px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: #f8f9fa;
}

.ag-review-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ag-review-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #17a2b8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ag-review-item-avatar .dashicons {
    font-size: 18px;
}

.ag-review-item-info {
    flex: 1;
}

.ag-review-item-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 4px;
}

.ag-review-item-rating {
    display: flex;
    gap: 2px;
}

.ag-review-item-rating .dashicons {
    font-size: 14px;
    color: #ffc107;
}

.ag-review-item-date {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.ag-review-item-text {
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-style: italic;
}

.ag-review-item-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #28a745;
    font-weight: 500;
}

.ag-review-item-verified .dashicons {
    font-size: 14px;
}

.ag-reviews-footer {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #e1e5e9;
}

.ag-hub-links {
	display: flex;
	justify-content: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.ag-hub-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	color: #2c3e50;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ag-hub-link:hover {
	background: #f8f9fa;
	border-color: #ff008c;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,0,140,0.15);
}

/* Test Cards Styling */
.ag-test-cards {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 8px;
	border-left: 4px solid #667eea;
	margin-top: 20px;
}

.ag-test-cards h5 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 18px;
	font-weight: 600;
}

.ag-test-card-group {
	margin-bottom: 25px;
}

.ag-test-card-group:last-of-type {
	margin-bottom: 20px;
}

.ag-test-card-group h6 {
	margin: 0 0 15px 0;
	color: #2c3e50;
	font-size: 16px;
	font-weight: 600;
	padding: 8px 0;
	border-bottom: 1px solid #e1e5e9;
}

.ag-test-card-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ag-test-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 15px;
	background: white;
	border-radius: 6px;
	border: 1px solid #e1e5e9;
}

.ag-test-card strong {
	min-width: 100px;
	color: #2c3e50;
	font-weight: 600;
}

.ag-test-card code {
	flex: 1;
	background: #f8f9fa;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 14px;
	color: #2c3e50;
	border: 1px solid #e1e5e9;
	letter-spacing: 1px;
}

.ag-test-card-info {
	background: white;
	padding: 20px;
	border-radius: 6px;
	border: 1px solid #e1e5e9;
	margin-top: 20px;
}

.ag-test-card-info p {
	margin: 0 0 10px 0;
	color: #2c3e50;
}

.ag-test-card-info ul {
	margin: 10px 0;
	padding-left: 20px;
	color: #6c757d;
}

.ag-test-card-info li {
	margin-bottom: 5px;
	line-height: 1.5;
}

.ag-test-note {
	background: #fff3cd;
	padding: 12px 15px;
	border-radius: 4px;
	border-left: 4px solid #ffc107;
	margin-top: 15px !important;
	color: #856404 !important;
}

.ag-test-note strong {
	color: #856404;
}

.ag-step-content .ag-test-note p {
	margin: 0 !important;
}

/* Test Instructions Styling */
.ag-test-instructions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 20px 0;
}

.ag-test-instruction {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border-left: 4px solid #667eea;
}

.ag-test-instruction strong {
	color: #2c3e50;
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
}

.ag-test-instruction p {
	margin: 0;
	color: #6c757d;
	line-height: 1.6;
}

.ag-test-instruction ul {
	margin: 8px 0 0 0;
	padding-left: 20px;
	color: #6c757d;
}

.ag-test-instruction li {
	margin-bottom: 5px;
	line-height: 1.5;
}

.ag-test-card-note {
	font-size: 12px;
	color: #6c757d;
	font-style: italic;
	margin: 0 10px;
}

.ag-setup-links {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #e1e5e9;
}

.ag-setup-links h4 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 20px;
}

.ag-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 25px;
	max-width: none;
}

.ag-link-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	text-decoration: none;
	color: #2c3e50;
	transition: all 0.3s ease;
}

.ag-link-card:hover {
	border-color: #d63384;
	box-shadow: 0 4px 12px rgba(214, 51, 132, 0.15);
	transform: translateY(-2px);
}

.ag-link-card .dashicons {
	background: linear-gradient(120deg, rgba(255, 0, 140, 0.8) 0%, rgba(142, 0, 189, 0.8) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d63384;
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.ag-copy-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #667eea !important;
	border-color: #667eea !important;
	color: white !important;
	transition: all 0.3s ease !important;
}

.ag-copy-btn:hover {
	background: #5a6fd8 !important;
	border-color: #5a6fd8 !important;
}

.ag-copy-btn.copied {
	background: #28a745 !important;
	border-color: #28a745 !important;
}

.ag-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 90px 30px;
	max-width: none;
}

.ag-feature-card {
	background: white;
	padding: 25px;
	border-radius: 8px;
	border: 1px solid #e1e5e9;
	text-align: center;
	transition: all 0.3s ease;
}

.ag-feature-card:hover {
	border-color: #d63384;
	box-shadow: 0 8px 25px rgba(214, 51, 132, 0.15);
	transform: translateY(-3px);
}

.ag-feature-icon {
	margin-bottom: 20px;
	text-align: center;
}

.ag-feature-icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	background: linear-gradient(120deg, rgba(255, 0, 140, 0.8) 0%, rgba(142, 0, 189, 0.8) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d63384;
	margin: 0 auto 20px auto;
	display: block;
}

.ag-feature-card h4 {
	margin: 0 0 15px 0;
	color: #2c3e50;
	font-size: 18px;
}

.ag-feature-card p {
	margin: 0;
	color: #6c757d;
	line-height: 1.6;
}


/* Modern Setup Steps */
.ag-setup-steps {
	padding: 40px !important;
}

.ag-step {
	display: flex !important;
	gap: 30px !important;
	align-items: flex-start !important;
	margin-bottom: 50px !important;
	padding: 30px !important;
	background: #ffffff !important;
	border-radius: 12px !important;
	border: 1px solid #e9ecef !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.ag-step-number {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	flex-shrink: 0 !important;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
	animation: ag-pulse 2s infinite !important;
}

.ag-step-content {
	flex: 1 !important;
}

.ag-step-content h4 {
	margin: 0 0 15px 0 !important;
	color: #2c3e50 !important;
	font-size: 22px !important;
	font-weight: 600 !important;
}

.ag-step-content p {
	margin: 0 0 20px 0 !important;
	color: #6c757d !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

/* Modern Info Cards */
.ag-credentials-info,
.ag-environment-note,
.ag-credentials-note,
.ag-operation-note,
.ag-back-office-config,
.ag-support-note,
.ag-testing-checklist,
.ag-timezone-note,
.ag-error-handling,
.ag-live-checklist,
.ag-live-mode-note {
	background: #f8f9fa !important;
	padding: 25px !important;
	border-radius: 10px !important;
	border-left: 4px solid #667eea !important;
	margin: 20px 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.ag-credentials-info p,
.ag-environment-note p,
.ag-credentials-note p,
.ag-operation-note p,
.ag-back-office-config p,
.ag-support-note p,
.ag-testing-checklist p,
.ag-timezone-note p,
.ag-error-handling p,
.ag-live-checklist p,
.ag-live-mode-note p {
	margin: 0 !important;
}

.ag-environment-note {
	border-left-color: #ffc107 !important;
	background: #fffdf7 !important;
}

.ag-credentials-note {
	border-left-color: #17a2b8 !important;
	background: #f7fcfd !important;
}

.ag-operation-note {
	border-left-color: #28a745 !important;
	background: #f8fff9 !important;
}

.ag-support-note {
	border-left-color: #dc3545 !important;
	background: #fff8f8 !important;
}

.ag-testing-checklist {
	border-left-color: #28a745 !important;
	background: #f8fff9 !important;
}

.ag-timezone-note {
	border-left-color: #ffc107 !important;
	background: #fffdf7 !important;
}

.ag-error-handling {
	border-left-color: #dc3545 !important;
	background: #fff8f8 !important;
}

.ag-live-checklist {
	border-left-color: #28a745 !important;
	background: #f8fff9 !important;
}

.ag-live-mode-note {
	border-left-color: #dc3545 !important;
	background: #fff8f8 !important;
}

.ag-environment-note h5,
.ag-credentials-info h5,
.ag-back-office-config h5,
.ag-testing-checklist h5,
.ag-error-handling h5,
.ag-live-checklist h5 {
	margin: 0 0 15px 0 !important;
	color: #2c3e50 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
}

.ag-credential-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	margin-bottom: 15px !important;
	padding: 15px !important;
	background: white !important;
	border-radius: 8px !important;
	border: 1px solid #e9ecef !important;
	width: 450px;
}

.ag-credential-item strong {
	color: #2c3e50 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.ag-credential-item span {
	color: #6c757d !important;
	font-size: 14px !important;
}

/* Settings Path */
.ag-settings-path {
	background: #2d3748 !important;
	color: #e2e8f0 !important;
	padding: 16px 20px !important;
	border-radius: 8px !important;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
	font-size: 14px !important;
	margin: 15px 0 !important;
	overflow-x: auto !important;
	border-left: 4px solid #667eea !important;
}

.ag-settings-path code {
	background: none !important;
	color: inherit !important;
	padding: 0 !important;
	font-size: inherit !important;
}

/* Operation Modes */
.ag-operation-modes {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
	gap: 25px !important;
	margin: 25px 0 !important;
}

.ag-operation-mode {
	background: white !important;
	padding: 25px !important;
	border-radius: 12px !important;
	border: 2px solid #e9ecef !important;
}

.ag-operation-mode h5 {
	margin: 0 0 15px 0 !important;
	color: #2c3e50 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
}

.ag-operation-mode p {
	margin: 0 0 20px 0 !important;
	color: #6c757d !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

.ag-use-case {
	background: #f8f9fa !important;
	padding: 15px !important;
	border-radius: 8px !important;
	border-left: 3px solid #28a745 !important;
}

.ag-use-case strong {
	color: #28a745 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* Back Office Access */
.ag-back-office-access {
	display: flex !important;
	gap: 15px !important;
	margin: 25px 0 !important;
	flex-wrap: wrap !important;
}

.ag-back-office-access .button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: none !important;
	cursor: pointer !important;
	width: 190px !important;
}

/* Modern Lists */
.ag-info-content {
	margin: 15px 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}

.ag-info-content li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
	padding: 12px !important;
	background: white !important;
	border-radius: 8px !important;
	border: 1px solid #e9ecef !important;
	width: 450px;
}

.ag-info-content li::before {
	content: '✓' !important;
	color: #28a745 !important;
	font-weight: bold !important;
	font-size: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

/* Support Section */
.ag-support-section {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
	padding: 50px 40px !important;
	text-align: left !important;
	margin-top: 40px !important;
}

.ag-support-section h4 {
	margin: 0 0 15px 0 !important;
	color: #2c3e50 !important;
	font-size: 24px !important;
	font-weight: 700 !important;
}

.ag-support-section p {
	margin: 0 0 30px 0 !important;
	color: #6c757d !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

.ag-support-actions {
	display: flex !important;
	gap: 15px !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
}

.ag-support-actions .button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: none !important;
	cursor: pointer !important;
	width: 190px !important;

}

/* Animation for step numbers */
@keyframes ag-pulse {
	0% {
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	}
	50% {
		box-shadow: 0 4px 25px rgba(102, 126, 234, 0.5);
	}
	100% {
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	}
}


/* Two Column Layout for Settings Sections */
.ag-two-column-layout {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 40px !important;
	align-items: start !important;
	margin: 30px 0 !important;
}

.ag-column-left {
	display: flex !important;
	flex-direction: column !important;
}

.ag-column-right {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

.ag-settings-image {
	width: 100% !important;
	max-width: 700px !important;
	height: auto !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid #e9ecef !important;
}

.ag-settings-image-placeholder {
	width: 100% !important;
	height: 300px !important;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 2px dashed #667eea !important;
	color: #667eea !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: center !important;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
	.ag-admin-header {
		padding: 30px 20px !important;
	}

	.ag-admin-header-content {
		flex-direction: column !important;
		gap: 20px !important;
		text-align: center !important;
	}

	.ag-setup-steps {
		padding: 20px !important;
	}

	.ag-step {
		flex-direction: column !important;
		gap: 20px !important;
		padding: 20px !important;
	}

	.ag-operation-modes {
		grid-template-columns: 1fr !important;
	}

	.ag-back-office-access {
		flex-direction: column !important;
	}

	.ag-admin-tabs {
		flex-direction: column !important;
	}

	.ag-tab-link {
		justify-content: center !important;
	}
	.ag-two-column-layout {
		grid-template-columns: 1fr !important;
		gap: 30px !important;
	}

	.ag-settings-image-placeholder {
		height: 250px !important;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.ag-admin-header-content {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	.ag-tab-nav {
		flex-wrap: wrap;
		padding: 0 15px;
	}

	.ag-tab-link {
		padding: 15px 20px;
		font-size: 14px;
	}

	.ag-tab-content {
		padding: 20px 15px;
	}

	.ag-links-grid {
		grid-template-columns: 1fr;
	}

	.ag-features-grid {
		grid-template-columns: 1fr;
	}

	.ag-url-display {
		flex-direction: column;
		align-items: stretch;
	}


}