/**
 * Account Modern Styles
 *
 * Modern, clean UI for the Account page with design tokens,
 * modern card styling, form inputs, buttons, and license badges.
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/assets/css
 * @author     miniOrange
 * @since      1.0.0
 */

/* ==========================================================================
   Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
	/* Colors - Primary */
	--momcs-bg-primary: #ffffff;
	--momcs-bg-secondary: #f8f9fa;
	--momcs-bg-tertiary: #f1f3f5;
	--momcs-bg-hover: #f0f4f8;

	/* Colors - Borders */
	--momcs-border-color: #e5e7eb;
	--momcs-border-color-light: #f0f0f0;
	--momcs-border-color-dark: #d1d5db;

	/* Colors - Text */
	--momcs-text-primary: #1f2937;
	--momcs-text-secondary: #6b7280;
	--momcs-text-muted: #9ca3af;
	--momcs-text-white: #ffffff;

	/* Colors - Accent */
	--momcs-accent-blue: #3b82f6;
	--momcs-accent-blue-hover: #2563eb;
	--momcs-accent-blue-light: #eff6ff;
	--momcs-accent-green: #10b981;
	--momcs-accent-green-light: #d1fae5;
	--momcs-accent-orange: #f59e0b;
	--momcs-accent-orange-light: #fef3c7;
	--momcs-accent-red: #ef4444;
	--momcs-accent-red-light: #fee2e2;
	--momcs-accent-purple: #8b5cf6;
	--momcs-accent-purple-light: #ede9fe;
	--momcs-accent-amber: #f59e0b;
	--momcs-accent-amber-light: #fef3c7;
	--momcs-accent-yellow: #eab308;
	--momcs-accent-yellow-light: #fef9c3;

	/* Border Radius */
	--momcs-radius-xs: 4px;
	--momcs-radius-sm: 6px;
	--momcs-radius-md: 8px;
	--momcs-radius-lg: 12px;
	--momcs-radius-xl: 16px;
	--momcs-radius-full: 6px;

	/* Shadows */
	--momcs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--momcs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Spacing */
	--momcs-spacing-xs: 4px;
	--momcs-spacing-sm: 8px;
	--momcs-spacing-md: 12px;
	--momcs-spacing-lg: 16px;
	--momcs-spacing-xl: 24px;
	--momcs-spacing-2xl: 32px;

	/* Typography */
	--momcs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--momcs-font-size-xs: 11px;
	--momcs-font-size-sm: 12px;
	--momcs-font-size-md: 13px;
	--momcs-font-size-base: 14px;
	--momcs-font-size-lg: 16px;
	--momcs-font-size-xl: 18px;
	--momcs-font-size-2xl: 24px;
	--momcs-font-weight-normal: 400;
	--momcs-font-weight-medium: 500;
	--momcs-font-weight-semibold: 600;
	--momcs-font-weight-bold: 700;
	--momcs-line-height-tight: 1.25;
	--momcs-line-height-normal: 1.5;

	/* Transitions */
	--momcs-transition-fast: 0.15s ease;
	--momcs-transition-normal: 0.2s ease;
	--momcs-transition-slow: 0.3s ease;
}

/* ==========================================================================
   Modern Account Container
   ========================================================================== */

.momcs-account-modern {
	font-family: var(--momcs-font-family);
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.momcs-account-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--momcs-spacing-lg);
	padding: var(--momcs-spacing-lg) 0;
	margin-bottom: var(--momcs-spacing-xl);
}

.momcs-account-title {
	font-size: var(--momcs-font-size-2xl);
	font-weight: var(--momcs-font-weight-bold);
	color: var(--momcs-text-primary);
	margin: 0;
	line-height: var(--momcs-line-height-tight);
}

/* ==========================================================================
   Modern Card Styling
   ========================================================================== */

.momcs-connect-card {
	background: var(--momcs-bg-primary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-lg);
	box-shadow: var(--momcs-shadow-sm);
	padding: var(--momcs-spacing-xl);
	margin-bottom: var(--momcs-spacing-xl);
	transition: box-shadow var(--momcs-transition-normal);
}

.momcs-connect-card:hover {
	box-shadow: var(--momcs-shadow-md);
}

/**
 * License terms callout (previously inline-styled; token-friendly for dark mode).
 */
.momcs-license-terms {
	background: var(--momcs-bg-secondary);
	padding: var(--momcs-spacing-xl);
	border-radius: var(--momcs-radius-xs);
	margin-bottom: var(--momcs-spacing-xl);
	border-left: 4px solid var(--momcs-accent-orange);
	color: var(--momcs-text-primary);
}

.momcs-license-terms-list {
	margin: 0;
	padding-left: 20px;
	line-height: 1.8;
}

.momcs-license-terms-list li {
	color: var(--momcs-text-primary);
}

.momcs-connect-card h2 {
	font-size: var(--momcs-font-size-xl);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
	margin: 0 0 var(--momcs-spacing-lg) 0;
	padding-bottom: var(--momcs-spacing-md);
	border-bottom: 1px solid var(--momcs-border-color-light);
}

/* ==========================================================================
   Account Details Table
   ========================================================================== */

.momcs-account-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.momcs-account-table th {
	width: 180px;
	padding: var(--momcs-spacing-md) 0;
	font-size: var(--momcs-font-size-base);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
	text-align: left;
	vertical-align: top;
}

.momcs-account-table td {
	padding: var(--momcs-spacing-md) 0;
	font-size: var(--momcs-font-size-base);
	color: var(--momcs-text-secondary);
	vertical-align: top;
}

.momcs-account-table tr {
	border-bottom: 1px solid var(--momcs-border-color-light);
}

.momcs-account-table tr:last-child {
	border-bottom: none;
}

/* ==========================================================================
   License Badges
   ========================================================================== */

.momcs-license-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	border-radius: var(--momcs-radius-full);
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-semibold);
	margin-left: var(--momcs-spacing-md);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all var(--momcs-transition-fast);
}

.momcs-badge-success {
	background-color: var(--momcs-accent-green-light);
	color: #065f46;
	border: 1px solid var(--momcs-accent-green);
}

.momcs-badge-warning {
	background-color: var(--momcs-accent-amber-light);
	color: #92400e;
	border: 1px solid var(--momcs-accent-amber);
}

.momcs-badge-error {
	background-color: var(--momcs-accent-red-light);
	color: #991b1b;
	border: 1px solid var(--momcs-accent-red);
}

.momcs-badge-trial {
	background-color: var(--momcs-accent-blue-light);
	color: #1e40af;
	border: 1px solid var(--momcs-accent-blue);
}

/* ==========================================================================
   Account Actions
   ========================================================================== */

.momcs-account-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--momcs-spacing-md);
	margin-top: var(--momcs-spacing-xl);
	padding-top: var(--momcs-spacing-lg);
	border-top: 1px solid var(--momcs-border-color-light);
}

.momcs-account-actions form {
	margin: 0;
}

.momcs-account-actions .button {
	display: inline-flex;
	align-items: center;
	gap: var(--momcs-spacing-sm);
	padding: var(--momcs-spacing-sm) var(--momcs-spacing-lg);
	font-size: var(--momcs-font-size-sm);
	font-weight: var(--momcs-font-weight-medium);
	border-radius: var(--momcs-radius-md);
	border: 1px solid var(--momcs-border-color);
	background: var(--momcs-bg-primary);
	color: var(--momcs-text-primary);
	cursor: pointer;
	transition: all var(--momcs-transition-fast);
	text-decoration: none;
}

.momcs-account-actions .button:hover {
	background: var(--momcs-bg-hover);
	border-color: var(--momcs-border-color-dark);
	color: var(--momcs-text-primary);
	transform: translateY(-1px);
	box-shadow: var(--momcs-shadow-sm);
}

.momcs-account-actions .button:active {
	transform: translateY(0);
	box-shadow: var(--momcs-shadow-xs);
}

.momcs-account-actions .button-primary {
	background: var(--momcs-accent-orange);
	color: var(--momcs-text-white);
	border-color: var(--momcs-accent-orange);
}

.momcs-account-actions .button-primary:hover {
	background: #e68a00;
	border-color: #e68a00;
	color: var(--momcs-text-white);
}

.momcs-account-actions .button-secondary {
	background: var(--momcs-bg-primary);
	color: var(--momcs-text-primary);
	border-color: var(--momcs-border-color);
}

.momcs-account-actions .button-secondary:hover {
	background: var(--momcs-bg-hover);
	border-color: var(--momcs-border-color-dark);
	color: var(--momcs-text-primary);
}

.momcs-account-actions .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

/* ==========================================================================
   Form Styling
   ========================================================================== */

.momcs-account-modern .momcs-form-label {
	display: block;
	font-size: var(--momcs-font-size-sm);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
	margin-bottom: var(--momcs-spacing-sm);
}

.momcs-account-modern .regular-text,
.momcs-account-modern input[type="text"],
.momcs-account-modern input[type="email"],
.momcs-account-modern input[type="password"] {
	width: 100%;
	max-width: 400px;
	padding: var(--momcs-spacing-sm) var(--momcs-spacing-md);
	font-size: var(--momcs-font-size-base);
	font-family: var(--momcs-font-family);
	color: var(--momcs-text-primary);
	background: var(--momcs-bg-primary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-md);
	transition: all var(--momcs-transition-fast);
	box-sizing: border-box;
}

.momcs-account-modern .regular-text:focus,
.momcs-account-modern input[type="text"]:focus,
.momcs-account-modern input[type="email"]:focus,
.momcs-account-modern input[type="password"]:focus {
	outline: none;
	border-color: var(--momcs-accent-blue);
	box-shadow: 0 0 0 3px var(--momcs-accent-blue-light);
}

.momcs-account-modern .regular-text::placeholder,
.momcs-account-modern input[type="text"]::placeholder,
.momcs-account-modern input[type="email"]::placeholder,
.momcs-account-modern input[type="password"]::placeholder {
	color: var(--momcs-text-muted);
}

.momcs-account-modern input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: var(--momcs-spacing-sm);
	cursor: pointer;
	accent-color: var(--momcs-accent-blue);
}

.momcs-account-modern .button-link {
	color: var(--momcs-accent-blue);
	text-decoration: none;
	font-size: var(--momcs-font-size-sm);
	transition: color var(--momcs-transition-fast);
}

.momcs-account-modern .button-link:hover {
	color: var(--momcs-accent-blue-hover);
	text-decoration: underline;
}

/* ==========================================================================
   License Info Box
   ========================================================================== */

.momcs-license-info {
	background: var(--momcs-accent-blue-light);
	padding: var(--momcs-spacing-lg);
	border-radius: var(--momcs-radius-md);
	margin-bottom: var(--momcs-spacing-xl);
	border-left: 4px solid var(--momcs-accent-blue);
}

.momcs-license-info p {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--momcs-spacing-md);
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-primary);
}

.momcs-license-info strong {
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
}

/* ==========================================================================
   License Terms & Conditions
   ========================================================================== */

.momcs-license-terms {
	background: var(--momcs-bg-secondary);
	padding: var(--momcs-spacing-xl);
	border-radius: var(--momcs-radius-md);
	margin-bottom: var(--momcs-spacing-xl);
	border-left: 4px solid var(--momcs-accent-blue);
}

.momcs-license-terms ol {
	margin: 0;
	padding-left: var(--momcs-spacing-xl);
	line-height: var(--momcs-line-height-normal);
}

.momcs-license-terms li {
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-secondary);
	margin-bottom: var(--momcs-spacing-md);
}

.momcs-license-terms li:last-child {
	margin-bottom: 0;
}

.momcs-license-terms li strong {
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
}

/* ==========================================================================
   Description Text
   ========================================================================== */

.momcs-account-modern .description {
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-secondary);
	line-height: var(--momcs-line-height-normal);
	margin-bottom: var(--momcs-spacing-lg);
}

.momcs-account-modern .description a {
	color: var(--momcs-accent-blue);
	text-decoration: none;
	transition: color var(--momcs-transition-fast);
}

.momcs-account-modern .description a:hover {
	color: var(--momcs-accent-blue-hover);
	text-decoration: underline;
}

/* ==========================================================================
   Notice Styling
   ========================================================================== */

.momcs-orders-notice {
	background: var(--momcs-accent-blue-light);
	border: 1px solid var(--momcs-accent-blue);
	border-radius: var(--momcs-radius-md);
	padding: var(--momcs-spacing-md) var(--momcs-spacing-lg);
	margin-bottom: var(--momcs-spacing-lg);
}

.momcs-orders-notice p {
	margin: 0;
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-primary);
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-sm);
}

.momcs-orders-notice .dashicons {
	color: var(--momcs-accent-blue);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 782px) {
	.momcs-account-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.momcs-account-title {
		font-size: var(--momcs-font-size-xl);
	}

	.momcs-connect-card {
		padding: var(--momcs-spacing-lg);
	}

	.momcs-account-table {
		display: block;
	}

	.momcs-account-table thead {
		display: none;
	}

	.momcs-account-table tbody {
		display: block;
	}

	.momcs-account-table tr {
		display: block;
		border-bottom: 1px solid var(--momcs-border-color);
		margin-bottom: var(--momcs-spacing-md);
		padding-bottom: var(--momcs-spacing-md);
	}

	.momcs-account-table tr:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.momcs-account-table th,
	.momcs-account-table td {
		display: block;
		width: 100%;
		padding: var(--momcs-spacing-sm) 0;
		text-align: left;
	}

	.momcs-account-table th {
		font-weight: var(--momcs-font-weight-bold);
		margin-bottom: var(--momcs-spacing-xs);
	}

	.momcs-account-table td {
		padding-top: 0;
	}

	.momcs-account-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.momcs-account-actions .button {
		width: 100%;
		justify-content: center;
	}

	.momcs-account-modern .regular-text,
	.momcs-account-modern input[type="text"],
	.momcs-account-modern input[type="email"],
	.momcs-account-modern input[type="password"] {
		max-width: 100%;
	}
}