/* =====================================================
   Back-in-Stock App - Premium Modern Design System
   ===================================================== */

/* CSS Variables - Design Tokens */
:root {
	/* Brand Colors */
	--brand-primary: #6366f1;
	--brand-primary-light: #818cf8;
	--brand-primary-dark: #4f46e5;
	--brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
	--brand-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);

	/* Surface Colors */
	--bg-main: #f8fafc;
	--bg-card: #ffffff;
	--bg-card-hover: #fefefe;
	--bg-elevated: #ffffff;
	--bg-muted: #f1f5f9;

	/* Text Colors */
	--text-primary: #0f172a;
	--text-secondary: #475569;
	--text-muted: #94a3b8;
	--text-inverse: #ffffff;
	--muted: #94a3b8;

	/* Status Colors */
	--success: #10b981;
	--success-light: #d1fae5;
	--warning: #f59e0b;
	--warning-light: #fef3c7;
	--error: #ef4444;
	--error-light: #fee2e2;
	--info: #3b82f6;
	--info-light: #dbeafe;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;

	/* Border Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
	--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--max-width: 1200px;
	--header-height: 72px;
}

/* Reset & Base */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100%;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-primary);
	background: var(--bg-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* App Shell */
.app-shell {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-lg);
	/* Avoid forcing a full viewport height which can create excessive
     whitespace when the app is embedded inside Shopify Admin frames. */
	min-height: auto;
	display: flex;
	flex-direction: column;
}

/* =====================================================
   Header
   ===================================================== */
.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-lg);
	position: relative;
	overflow: hidden;
}

/* Scope Warning Banner */
.scope-warning-banner {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #f59e0b;
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-md);
	box-shadow: var(--shadow-md);
}

.scope-warning-inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
}

.scope-warning-icon {
	font-size: 24px;
	flex-shrink: 0;
}

.scope-warning-message {
	flex: 1;
	color: #92400e;
	font-size: 14px;
}

.scope-warning-message strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.btn-warning {
	background: #f59e0b;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.btn-warning:hover {
	background: #d97706;
	transform: translateY(-1px);
}

.app-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--brand-gradient);
}

.brand-left {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.brand-icon {
	width: 44px;
	height: 44px;
	background: var(--brand-gradient);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.brand-icon:hover {
	transform: scale(1.05) rotate(-2deg);
	box-shadow: var(--shadow-glow);
}

.brand-icon svg {
	width: 24px;
	height: 24px;
}

.brand-titles {
	display: flex;
	flex-direction: column;
}

.app-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

.app-sub {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 2px;
}

.brand-right {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Status Badges */
.header-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	transition: all var(--transition-fast);
}

.header-badge .badge-icon {
	width: 14px;
	height: 14px;
}

.header-badge.connected {
	background: var(--success-light);
	color: #059669;
}

.header-badge.sub-active {
	background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
	color: #4338ca;
}


.header-badge.sub-unknown {
	background: var(--bg-muted);
	color: var(--text-muted);
}

/* Base (refined) */
.header-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

/* PREMIUM */
.sub-premium {
	background: linear-gradient(135deg, #ffe8a3 0%, #ffd43b 35%, #f5b700 100%);
	color: #3a2a00;
	box-shadow: 0 6px 18px rgba(245, 183, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	position: relative;
	overflow: hidden;
	padding: 9px 18px; /* match header-badge */
	font-size: 14px;
}

/* Surrounding outline / ring to make badge look "entourré" (purple attention ring) */
.sub-premium::after {
	content: '';
	position: absolute;
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	border-radius: 999px;
	border: 2px solid rgba(99, 102, 241, 0.28); /* purple ring */
	box-shadow: 0 6px 18px rgba(99,102,241,0.12), 0 0 18px rgba(99,102,241,0.18);
	animation: premiumPurplePulse 2.8s ease-in-out infinite;
	pointer-events: none;
}

/* subtle shimmer */
.sub-premium::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent 30%,
		rgba(255,255,255,0.35) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	animation: premiumShimmer 4s ease-in-out infinite;
	pointer-events: none;
}

/* Crown icon */
.sub-premium .badge-icon {
	width: 20px;
	height: 20px;
	fill: #3a2a00;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

/* Jewel */
.sub-premium .badge-icon circle {
	fill: #e63946;
}

/* Text hierarchy */
.badge-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.sub-premium .badge-text {
	font-weight: 700;
}

.badge-text small {
	font-size: 10px;
	font-weight: 500;
	opacity: 0.75;
}

/* Gentle glow (no pulse spam) */
.sub-premium {
	animation: premiumGlow 3s ease-in-out infinite;
}

/* Animations */
@keyframes premiumGlow {
	0%, 100% {
		box-shadow:
			0 6px 18px rgba(245, 183, 0, 0.25),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}
	50% {
		box-shadow:
			0 8px 22px rgba(245, 183, 0, 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}
}

@keyframes premiumShimmer {
	0% { transform: translateX(-120%); }
	40%, 100% { transform: translateX(120%); }
}

@keyframes premiumPurplePulse {
	0% {
		transform: scale(0.995);
		box-shadow: 0 6px 18px rgba(99,102,241,0.08), 0 0 12px rgba(99,102,241,0.06);
		opacity: 0.92;
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 12px 28px rgba(99,102,241,0.18), 0 0 28px rgba(99,102,241,0.14);
		opacity: 1;
	}
	100% {
		transform: scale(0.995);
		box-shadow: 0 6px 18px rgba(99,102,241,0.08), 0 0 12px rgba(99,102,241,0.06);
		opacity: 0.92;
	}
}

.header-badge.sub-cancelled,
.header-badge.sub-expired {
	background: var(--error-light);
	color: #dc2626;
}


/* =====================================================
   Subscription Banner
   ===================================================== */
.subscription-banner {
	background: var(--brand-gradient);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-lg);
	overflow: hidden;
	position: relative;
}

.subscription-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.subscription-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	position: relative;
	z-index: 1;
}

.subscription-message {
	color: white;
	font-size: 14px;
	font-weight: 500;
}

.subscription-message strong {
	font-weight: 700;
}

.subscription-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.subscription-cta-area {
	display: flex;
	gap: var(--space-sm);
}

/* =====================================================
   Navigation Tabs
   ===================================================== */
.app-tabs {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-sm);
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-lg);
	overflow-x: auto;
	scrollbar-width: none;
}

.app-tabs::-webkit-scrollbar {
	display: none;
}

.tab {
	flex-shrink: 0;
	padding: var(--space-sm) var(--space-md);
	border: none;
	background: transparent;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tab svg {
	width: 16px;
	height: 16px;
	opacity: 0.7;
	transition: opacity var(--transition-fast);
}

.tab:hover svg {
	opacity: 1;
}

.tab:hover {
	background: var(--bg-muted);
	color: var(--text-primary);
}

.tab.active {
	background: var(--brand-gradient);
	color: white;
	box-shadow: var(--shadow-md);
}

.tab.active svg {
	opacity: 1;
}

.tab.active:hover {
	background: var(--brand-gradient);
	color: white;
}

/* Button with icon styling */
.btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* =====================================================
   Main Content
   ===================================================== */
.app-main {
	/* Do not force the main area to stretch to the full remaining height
     — allow its content to size naturally to avoid large empty gaps. */
	flex: none;
}

.page {
	animation: fadeSlideIn var(--transition-slow) forwards;
}

.page.hidden {
	display: none;
}

@keyframes fadeSlideIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

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

/* Page Header */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
	gap: var(--space-md);
}

.page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.02em;
	margin: 0;
}

.page-actions {
	display: flex;
	gap: var(--space-sm);
}

/* =====================================================
   Cards
   ===================================================== */
.card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.card:hover {
	box-shadow: var(--shadow-lg);
}

.card h2,
.card h3 {
	margin: 0 0 var(--space-md) 0;
	font-weight: 600;
	color: var(--text-primary);
}

.card h3 {
	font-size: 16px;
}

.card.small h2 {
	font-size: 14px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* =====================================================
   KPI Cards
   ===================================================== */
.kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.kpi {
	padding: var(--space-lg);
	position: relative;
	overflow: hidden;
	cursor: default;
}

.kpi::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--brand-gradient);
	border-radius: 0 4px 4px 0;
}

.kpi:nth-child(1)::before {
	background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

.kpi:nth-child(2)::before {
	background: linear-gradient(180deg, #10b981, #34d399);
}

.kpi:nth-child(3)::before {
	background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

.kpi:nth-child(4)::before {
	background: linear-gradient(180deg, #ec4899, #f472b6);
}

.kpi-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-sm);
}

.kpi-value {
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.kpi:nth-child(1) .kpi-value {
	color: #6366f1;
}

.kpi:nth-child(2) .kpi-value {
	color: #10b981;
}

.kpi:nth-child(3) .kpi-value {
	color: #f59e0b;
}

.kpi:nth-child(4) .kpi-value {
	color: #ec4899;
}

.kpi-sub {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

/* Modal styles */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1100;
}

.modal[style*="display:flex"] {
	display: flex;
}

/* Backdrop should cover the viewport even if ancestors create new stacking contexts */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

/* Center the modal content. Use absolute centering as a reliable fallback for
   cases where an ancestor has a transform/stacking context that breaks flex */
.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--bg-card);
	border-radius: 12px;
	padding: 20px;
	width: 640px;
	max-width: calc(100% - 64px);
	max-height: calc(100% - 80px);
	overflow: auto;
	box-shadow: var(--shadow-lg);
	z-index: 1101;
}

.invoice-row {
	padding: 6px 0;
}

.invoice-row .btn {
	padding: 6px 10px;
	font-size: 13px;
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 10px 18px;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.btn.primary {
	background: var(--brand-gradient);
	color: white;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn.primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn.primary:active {
	transform: translateY(0);
}

.btn.primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.btn.secondary {
	background: var(--bg-muted);
	color: var(--text-primary);
	border: 1px solid transparent;
}

.btn.secondary:hover {
	background: #e2e8f0;
}

.btn.ghost {
	background: transparent;
	color: var(--text-primary);
	border: 1px solid #e2e8f0;
}

.btn.ghost:hover {
	background: var(--bg-muted);
	border-color: #cbd5e1;
}

.btn.ghost-light {
	background: rgba(255, 255, 255, 0.15);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn.ghost-light:hover {
	background: rgba(255, 255, 255, 0.25);
}

.btn.danger {
	background: var(--error);
	color: white;
}

.btn.danger:hover {
	background: #dc2626;
}

/* Icon Buttons */
.btn-icon {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--radius-sm);
}

/* =====================================================
   Tables
   ===================================================== */
.polaris-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.polaris-table thead th {
	padding: var(--space-md);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--bg-muted);
	border-bottom: 1px solid #e2e8f0;
}

.polaris-table thead th:first-child {
	border-radius: var(--radius-sm) 0 0 0;
}

.polaris-table thead th:last-child {
	border-radius: 0 var(--radius-sm) 0 0;
}

.polaris-table tbody tr {
	transition: background var(--transition-fast);
}

.polaris-table tbody tr:hover {
	background: var(--bg-muted);
}

.polaris-table tbody td {
	padding: var(--space-md);
	border-bottom: 1px solid #f1f5f9;
	color: var(--text-secondary);
}

.polaris-table tbody tr:last-child td {
	border-bottom: none;
}

.recent-activity-card {
	padding: var(--space-md);
}

.recent-activity-card h2.small {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-md);
	padding: 0 var(--space-sm);
}

/* =====================================================
   Forms
   ===================================================== */
.form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="file"],
.form-row select,
.form-row textarea {
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--text-primary);
	background: var(--bg-card);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: none;
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-row input[type="checkbox"],
.form-row input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--brand-primary);
}

.form-row input[type="color"] {
	width: 48px;
	height: 36px;
	padding: 2px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

/* =====================================================
   Layout Helpers
   ===================================================== */
.layout-two {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-md);
}

.subscription-grid {
	display: grid;
	/* Use flexible columns with a sensible minimum so cards don't stretch
     endlessly on wide screens. Constrain the grid's overall width and
     center it so the subscription area appears centered instead of
     stretching the full page width. */
	grid-template-columns: repeat(3, minmax(300px, 1fr));
	gap: var(--space-lg);
	margin: var(--space-md) auto 0;
	max-width: 1140px;
	justify-content: center;
	align-items: start;
}

/* Ensure the Subscription page header aligns with the centered subscription grid */
.page#subscription .page-header {
	max-width: 1140px;
	margin: 0 auto var(--space-md);
	padding: 0 12px;
	/* slight padding so title doesn't hug card edges on small screens */
}

@media (max-width: 768px) {
	.page#subscription .page-header {
		max-width: 100%;
		margin: 0 0 var(--space-md);
		padding: 0;
	}
}

.subscription-grid .card {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: var(--space-xl);
}

.subscription-grid .card h3 {
	font-size: 16px;
	margin-bottom: var(--space-md);
}

.subscription-grid #subStatus {
	font-size: 28px;
	font-weight: 800;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.subscription-grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.subscription-grid li {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid #f1f5f9;
	color: var(--text-secondary);
	font-size: 14px;
}

.subscription-grid li:last-child {
	border-bottom: none;
}

.subscription-grid li strong {
	color: var(--text-primary);
	font-weight: 600;
}

/* CTA Group */
.cta-group {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

/* Preview Box */
.preview {
	background: var(--bg-muted);
	border: 2px dashed #e2e8f0;
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	text-align: center;
	color: var(--text-muted);
}

/* =====================================================
   Status Elements
   ===================================================== */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
}

.status-pill.loading {
	background: var(--warning-light);
	color: #b45309;
}

.status-pill.success {
	background: var(--success-light);
	color: #059669;
}

.status-pill.error {
	background: var(--error-light);
	color: #dc2626;
}

/* Products List */
.product {
	padding: var(--space-md);
	border: 1px solid #f1f5f9;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-sm);
	background: var(--bg-card);
	transition: all var(--transition-fast);
}

.product:hover {
	border-color: var(--brand-primary-light);
	box-shadow: var(--shadow-md);
}

.product-title {
	font-weight: 600;
	color: var(--text-primary);
}

.product-sub {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 4px;
}

/* =====================================================
   Footer
   ===================================================== */
.app-footer {
	padding: var(--space-xl) 0 var(--space-lg);
	text-align: center;
	color: var(--text-muted);
	font-size: 13px;
}

.app-footer small {
	opacity: 0.8;
}

/* =====================================================
   Page Transitions
   ===================================================== */
.page--enter {
	opacity: 0;
	transform: translateY(12px);
}

.page--enter-active {
	opacity: 1;
	transform: translateY(0);
}

.page--exit {
	opacity: 1;
	transform: translateY(0);
}

.page--exit-active {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

/* =====================================================
   Empty States
   ===================================================== */
.empty-state {
	text-align: center;
	padding: var(--space-2xl);
	color: var(--text-muted);
}

.empty-state-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-md);
	background: var(--bg-muted);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
}

.empty-state h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--space-sm);
}

.empty-state p {
	font-size: 14px;
	max-width: 320px;
	margin: 0 auto var(--space-md);
}

/* =====================================================
   Animations
   ===================================================== */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.skeleton {
	background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}

/* Welcome Hero Section */
.welcome-hero {
	background: var(--brand-gradient);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl);
	margin-bottom: var(--space-lg);
	position: relative;
	overflow: hidden;
	color: white;
}

.welcome-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

.welcome-hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.welcome-hero-content {
	position: relative;
	z-index: 1;
}

.welcome-hero h1 {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: var(--space-sm);
	letter-spacing: -0.02em;
}

.welcome-hero p {
	font-size: 15px;
	opacity: 0.9;
	max-width: 500px;
	line-height: 1.6;
}

/* Quick Actions Grid */
.quick-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.quick-action-card {
	padding: var(--space-lg);
	cursor: pointer;
	transition: all var(--transition-normal);
	border: 2px solid transparent;
}

.quick-action-card:hover {
	transform: translateY(-4px);
	border-color: var(--brand-primary-light);
	box-shadow: var(--shadow-lg);
}

.quick-action-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
	font-size: 24px;
}

.quick-action-card:nth-child(1) .quick-action-icon {
	background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
	color: #4f46e5;
}

.quick-action-card:nth-child(2) .quick-action-icon {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	color: #059669;
}

.quick-action-card:nth-child(3) .quick-action-icon {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #d97706;
}

.quick-action-card h3 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.quick-action-card p {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
}

/* Status Badge in Table */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.status-badge.delivered {
	background: var(--success-light);
	color: #059669;
}

.status-badge.pending {
	background: var(--warning-light);
	color: #d97706;
}

.status-badge.failed {
	background: var(--error-light);
	color: #dc2626;
}

/* =====================================================
   Responsive Design
   ===================================================== */
@media (max-width: 1024px) {
	.kpi-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.layout-two {
		grid-template-columns: 1fr;
	}

	.subscription-grid {
		grid-template-columns: 1fr;
	}

	.quick-actions {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.app-shell {
		padding: var(--space-md);
	}

	.app-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.brand-right {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.app-tabs {
		padding: var(--space-xs);
		gap: var(--space-xs);
	}

	.tab {
		padding: var(--space-sm) var(--space-md);
		font-size: 12px;
	}

	.page-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.page-title {
		font-size: 20px;
	}

	.page-actions {
		width: 100%;
	}

	.page-actions .btn {
		flex: 1;
	}

	.subscription-banner-inner {
		flex-direction: column;
		gap: var(--space-md);
		text-align: center;
	}

	.subscription-actions {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.welcome-hero {
		padding: var(--space-xl);
	}

	.welcome-hero h1 {
		font-size: 22px;
	}

	.quick-actions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.kpi-row {
		grid-template-columns: 1fr;
	}

	.kpi-value {
		font-size: 28px;
	}

	.btn {
		width: 100%;
		justify-content: center;
	}

	.cta-group {
		flex-direction: column;
	}
}

/* =====================================================
   Utility Classes
   ===================================================== */
.hidden {
	display: none !important;
}

.text-center {
	text-align: center;
}

.text-muted {
	color: var(--text-muted);
}

.mt-md {
	margin-top: var(--space-md);
}

.mb-md {
	margin-bottom: var(--space-md);
}

.gap-sm {
	gap: var(--space-sm);
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-between {
	justify-content: space-between;
}

/* =====================================================
   Special Effects & Polish
   ===================================================== */

/* Gradient text for premium elements */
.gradient-text {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Glow effect on hover for important cards */
.card.highlight:hover {
	box-shadow: var(--shadow-glow), var(--shadow-lg);
}

/* Subscription card first item special styling */
.subscription-grid .card:first-child {
	background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
	border: 2px solid rgba(139, 92, 246, 0.2);
}

.subscription-grid .card:first-child:hover {
	border-color: rgba(139, 92, 246, 0.4);
}

/* Trial-specific animations removed — Shopify billing manages trials */

/* Loading skeleton for data */
.loading-text {
	background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 4px;
	display: inline-block;
	min-width: 60px;
	height: 1em;
}

/* Focus states for accessibility */
.btn:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Selection color */
::selection {
	background: rgba(99, 102, 241, 0.2);
	color: var(--text-primary);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-muted);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Print styles */
@media print {

	.app-header,
	.app-tabs,
	.subscription-banner,
	.app-footer,
	.btn {
		display: none !important;
	}

	.card {
		box-shadow: none;
		border: 1px solid #e2e8f0;
	}
}

.subscription-grid .card #billingEmail {
	font-size: 15px;
	font-weight: 700;
}

.subscription-grid .card #manageBilling {
	margin-top: 12px;
}

@media (max-width:1100px) {
	.subscription-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:900px) {
	.subscription-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:1100px) {
	.subscription-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:720px) {
	.subscription-grid {
		grid-template-columns: 1fr
	}
}

/* Subscription banner boxed style */
.subscription-banner {
	padding: 12px 0;
	margin-bottom: 16px
}

.subscription-banner .boxed {
	background: var(--card);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: var(--shadow);
	display: flex;
	justify-content: space-between;
	align-items: center
}

.subscription-message {
	font-size: 15px
}

.subscription-actions {
	display: flex;
	align-items: center;
	gap: 12px
}

.subscription-cta-area {
	display: flex;
	gap: 8px
}

.subscription-manage {
	margin-left: 12px
}
/* =====================================================
   Theme App Extension Setup Banner
   ===================================================== */
.theme-extension-banner {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
	border: 2px solid #0ea5e9;
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	box-shadow: var(--shadow-lg), 0 0 20px rgba(14, 165, 233, 0.15);
	animation: themeExtPulse 3s ease-in-out infinite;
}

@keyframes themeExtPulse {
	0%, 100% {
		box-shadow: var(--shadow-lg), 0 0 20px rgba(14, 165, 233, 0.15);
	}
	50% {
		box-shadow: var(--shadow-lg), 0 0 30px rgba(14, 165, 233, 0.25);
	}
}

.theme-extension-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
}

.theme-extension-icon {
	font-size: 32px;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.theme-extension-message {
	flex: 1;
	color: #0c4a6e;
}

.theme-extension-message strong {
	display: block;
	font-size: 17px;
	margin-bottom: var(--space-sm);
	color: #0369a1;
}

.theme-extension-message p {
	font-size: 14px;
	margin: 0 0 var(--space-md) 0;
	line-height: 1.6;
}

.theme-extension-message .setup-steps {
	margin: var(--space-md) 0;
	padding-left: var(--space-lg);
	color: #0c4a6e;
}

.theme-extension-message .setup-steps li {
	margin-bottom: var(--space-sm);
	font-size: 14px;
	line-height: 1.6;
}

.theme-extension-message .setup-steps li strong {
	display: inline;
	font-size: inherit;
	color: #0369a1;
}

.theme-extension-message a {
	color: #0284c7;
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.theme-extension-message a:hover {
	color: #0369a1;
}

.theme-extension-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.theme-extension-actions .btn-primary {
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
	white-space: nowrap;
}

.theme-extension-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

@media (max-width: 768px) {
	.theme-extension-inner {
		flex-direction: column;
	}
	
	.theme-extension-actions {
		width: 100%;
		flex-direction: row;
	}
	
	.theme-extension-actions .btn {
		flex: 1;
	}
}