/**
 * MightyPress Woo Provisioning - Frontend Styles
 *
 * @package MightyPress_Woo_Provisioning
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Theming)
   ========================================================================== */

:root {
	/* Colors */
	--mwp-color-primary: #0073aa;
	--mwp-color-primary-hover: #005a87;
	--mwp-color-primary-light: #e5f3f9;
	--mwp-color-secondary: #50575e;
	--mwp-color-secondary-hover: #3c4043;

	/* Status Colors */
	--mwp-color-success: #00a32a;
	--mwp-color-success-bg: #edfaef;
	--mwp-color-warning: #dba617;
	--mwp-color-warning-bg: #fcf9e8;
	--mwp-color-error: #d63638;
	--mwp-color-error-bg: #fcf0f1;
	--mwp-color-info: #72aee6;
	--mwp-color-info-bg: #f0f6fc;

	/* State Colors */
	--mwp-state-live: #00a32a;
	--mwp-state-live-bg: #edfaef;
	--mwp-state-pending: #72aee6;
	--mwp-state-pending-bg: #f0f6fc;
	--mwp-state-staging: #2271b1;
	--mwp-state-staging-bg: #f0f6fc;
	--mwp-state-disabled: #dba617;
	--mwp-state-disabled-bg: #fcf9e8;
	--mwp-state-failed: #d63638;
	--mwp-state-failed-bg: #fcf0f1;

	/* Subscription Status Colors */
	--mwp-sub-active: #00a32a;
	--mwp-sub-active-bg: #edfaef;
	--mwp-sub-pending: #72aee6;
	--mwp-sub-pending-bg: #f0f6fc;
	--mwp-sub-on-hold: #dba617;
	--mwp-sub-on-hold-bg: #fcf9e8;
	--mwp-sub-cancelled: #d63638;
	--mwp-sub-cancelled-bg: #fcf0f1;
	--mwp-sub-pending-cancel: #dba617;
	--mwp-sub-pending-cancel-bg: #fcf9e8;

	/* Neutrals */
	--mwp-color-text: #1d2327;
	--mwp-color-text-secondary: #50575e;
	--mwp-color-text-light: #787c82;
	--mwp-color-border: #c3c4c7;
	--mwp-color-border-light: #dcdcde;
	--mwp-color-bg: #ffffff;
	--mwp-color-bg-secondary: #f6f7f7;
	--mwp-color-bg-tertiary: #f0f0f1;

	/* Shadows */
	--mwp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--mwp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--mwp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--mwp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* Border Radius */
	--mwp-radius-sm: 4px;
	--mwp-radius: 6px;
	--mwp-radius-md: 8px;
	--mwp-radius-lg: 12px;
	--mwp-radius-full: 9999px;

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

	/* Typography */
	--mwp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--mwp-font-size-sm: 13px;
	--mwp-font-size: 14px;
	--mwp-font-size-md: 16px;
	--mwp-font-size-lg: 18px;
	--mwp-font-size-xl: 24px;
	--mwp-font-weight-normal: 400;
	--mwp-font-weight-medium: 500;
	--mwp-font-weight-semibold: 600;
	--mwp-font-weight-bold: 700;
	--mwp-line-height: 1.5;

	/* Transitions */
	--mwp-transition-fast: 150ms ease;
	--mwp-transition: 200ms ease;
	--mwp-transition-slow: 300ms ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

.mwp-hosting-dashboard,
.mwp-site-details-page {
	font-family: var(--mwp-font-family);
	font-size: var(--mwp-font-size);
	line-height: var(--mwp-line-height);
	color: var(--mwp-color-text);
}

.mwp-site-details-page template,
.mwp-hosting-dashboard template {
	display: none !important;
}

/* ==========================================================================
   Icons
   ========================================================================== */

.mwp-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	vertical-align: middle;
}

.mwp-icon-sm {
	width: 14px;
	height: 14px;
}

.mwp-icon-lg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.mwp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mwp-spacing-sm);
	padding: 8px 16px;
	font-family: inherit;
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-medium);
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--mwp-radius);
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
	white-space: nowrap;
}

.mwp-button:focus {
	outline: 2px solid var(--mwp-color-primary);
	outline-offset: 2px;
}

.mwp-button:disabled,
.mwp-button.mwp-button-loading {
	opacity: 0.6;
	cursor: not-allowed;
}

.woocommerce .mwp-button-primary,.woocommerce a.mwp-button-primary {
	background-color: var(--mwp-color-primary);
	border-color: var(--mwp-color-primary);
	color: #ffffff;
}

.mwp-button-primary:hover:not(:disabled) {
	background-color: var(--mwp-color-primary-hover);
	border-color: var(--mwp-color-primary-hover);
	color: #ffffff;
}

.mwp-button-secondary {
	background-color: var(--mwp-color-bg);
	border-color: var(--mwp-color-border);
	color: var(--mwp-color-text);
}

.mwp-button-secondary:hover:not(:disabled) {
	background-color: var(--mwp-color-bg-secondary);
	border-color: var(--mwp-color-secondary);
	color: var(--mwp-color-text);
}

.mwp-button-danger {
	background-color: var(--mwp-color-error);
	border-color: var(--mwp-color-error);
	color: #ffffff;
}

.mwp-button-danger:hover:not(:disabled) {
	background-color: #b32d2e;
	border-color: #b32d2e;
}

.mwp-button-small {
	padding: 6px 12px;
	font-size: var(--mwp-font-size-sm);
}

.mwp-button-loading .mwp-button-text {
	display: none;
}

.mwp-button-loading .mwp-button-loading {
	display: inline;
}

.mwp-button:not(.mwp-button-loading) .mwp-button-loading {
	display: none;
}

.mwp-link-button {
	background: none;
	border: none;
	padding: 0;
	margin-left: var(--mwp-spacing-sm);
	font-family: inherit;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-primary);
	cursor: pointer;
	text-decoration: underline;
}

.mwp-link-button:hover {
	color: var(--mwp-color-primary-hover);
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.mwp-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--mwp-color-border-light);
	border-top-color: var(--mwp-color-primary);
	border-radius: 50%;
	animation: mwp-spin 0.8s linear infinite;
}

.mwp-spinner-large {
	width: 24px;
	height: 24px;
	border-width: 3px;
}

@keyframes mwp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.mwp-progress-bar {
	height: 4px;
	background-color: var(--mwp-color-bg-tertiary);
	border-radius: var(--mwp-radius-full);
	overflow: hidden;
	margin-top: var(--mwp-spacing);
}

.mwp-progress-large {
	height: 6px;
}

.mwp-progress-bar-fill {
	height: 100%;
	background-color: var(--mwp-color-primary);
	border-radius: var(--mwp-radius-full);
	transition: width var(--mwp-transition);
}

.mwp-progress-indeterminate {
	width: 30%;
	animation: mwp-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes mwp-progress-indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.mwp-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: var(--mwp-font-size-sm);
	font-weight: var(--mwp-font-weight-medium);
	line-height: 1.4;
	border-radius: var(--mwp-radius-full);
	white-space: nowrap;
}

.mwp-status-badge-icon {
	display: flex;
	width: 14px;
	height: 14px;
}

.mwp-status-badge-icon svg {
	width: 100%;
	height: 100%;
}

.mwp-state-live {
	background-color: var(--mwp-state-live-bg);
	color: var(--mwp-state-live);
}

.mwp-state-pending,
.mwp-state-staging {
	background-color: var(--mwp-state-pending-bg);
	color: var(--mwp-state-pending);
}

.mwp-state-staging {
	color: var(--mwp-state-staging);
}

.mwp-state-disabled {
	background-color: var(--mwp-state-disabled-bg);
	color: var(--mwp-state-disabled);
}

.mwp-state-failed {
	background-color: var(--mwp-state-failed-bg);
	color: var(--mwp-state-failed);
}

/* Subscription Status Badges */
.mwp-subscription-badge,
.mwp-subscription-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: var(--mwp-font-weight-medium);
	border-radius: var(--mwp-radius-sm);
}

.mwp-sub-active {
	background-color: var(--mwp-sub-active-bg);
	color: var(--mwp-sub-active);
}

.mwp-sub-pending {
	background-color: var(--mwp-sub-pending-bg);
	color: var(--mwp-sub-pending);
}

.mwp-sub-on-hold {
	background-color: var(--mwp-sub-on-hold-bg);
	color: var(--mwp-sub-on-hold);
}

.mwp-sub-cancelled,
.mwp-sub-expired {
	background-color: var(--mwp-sub-cancelled-bg);
	color: var(--mwp-sub-cancelled);
}

.mwp-sub-pending-cancel {
	background-color: var(--mwp-sub-pending-cancel-bg);
	color: var(--mwp-sub-pending-cancel);
}

/* Generic Badges */
.mwp-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: var(--mwp-font-weight-medium);
	border-radius: var(--mwp-radius-sm);
	background-color: var(--mwp-color-bg-tertiary);
	color: var(--mwp-color-text-secondary);
}

.mwp-badge-info {
	background-color: var(--mwp-color-info-bg);
	color: #2271b1;
}

.mwp-badge-success {
	background-color: var(--mwp-color-success-bg);
	color: var(--mwp-color-success);
}

.mwp-badge-warning {
	background-color: var(--mwp-color-warning-bg);
	color: var(--mwp-color-warning);
}

.mwp-badge-error {
	background-color: var(--mwp-color-error-bg);
	color: var(--mwp-color-error);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.mwp-empty-state {
	text-align: center;
	padding: var(--mwp-spacing-xl) var(--mwp-spacing);
}

.mwp-empty-state-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--mwp-spacing-md);
	color: var(--mwp-color-text-light);
}

.mwp-empty-state-icon svg {
	width: 100%;
	height: 100%;
}

.mwp-empty-state-title {
	margin: 0 0 var(--mwp-spacing-sm);
	font-size: var(--mwp-font-size-lg);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text);
}

.mwp-empty-state-text {
	margin: 0 0 var(--mwp-spacing-md);
	color: var(--mwp-color-text-secondary);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Sites Grid (Dashboard)
   ========================================================================== */

.mwp-sites-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mwp-spacing);
}

@media (min-width: 600px) {
	.mwp-sites-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.mwp-sites-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Site Card
   ========================================================================== */

.mwp-site-card {
	display: flex;
	flex-direction: column;
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
	padding: 0;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mwp-site-card:hover {
	border-color: var(--mwp-color-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

/* Site Card Snapshot */
.mwp-site-card-snapshot {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mwp-color-bg-secondary, #f6f7f7);
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-site-card-snapshot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.3s ease;
}

.mwp-site-card:hover .mwp-site-card-snapshot img {
	transform: scale(1.03);
}

.mwp-site-card-snapshot-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mwp-color-text-light, #a7aaad);
	text-decoration: none;
}

.mwp-site-card-snapshot-placeholder svg {
	width: 48px;
	height: 48px;
	opacity: 0.5;
}

.mwp-site-card-header,
.mwp-site-card .mwp-site-url,
.mwp-site-card .mwp-subscription-info,
.mwp-site-card .mwp-clone-info,
.mwp-site-card-footer {
	padding-left: var(--mwp-spacing);
	padding-right: var(--mwp-spacing);
}

.mwp-site-card-header {
	padding-top: var(--mwp-spacing);
}

.mwp-site-card-footer {
	padding-bottom: var(--mwp-spacing);
}

.mwp-site-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-site-name {
	margin: 0;
	font-size: var(--mwp-font-size-md);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text);
	line-height: 1.3;
}

.mwp-site-url {
	margin: 0 0 var(--mwp-spacing-sm);
}

.mwp-site-url a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
	text-decoration: none;
}

.mwp-site-url a:hover {
	color: var(--mwp-color-primary);
}

.mwp-site-url .mwp-icon {
	width: 14px;
	height: 14px;
}

.mwp-subscription-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing);
	font-size: var(--mwp-font-size-sm);
}

.mwp-next-payment {
	color: var(--mwp-color-text-light);
}

/* Site Title Row (with type badge) */
.mwp-site-title-row {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	flex-wrap: wrap;
}

/* Site Type Badges */
.mwp-site-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: var(--mwp-font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--mwp-radius-full);
	white-space: nowrap;
}

.mwp-type-badge-clone {
	background-color: #f3e8ff;
	color: #7c3aed;
}

.mwp-type-badge-staging {
	background-color: var(--mwp-state-staging-bg);
	color: var(--mwp-state-staging);
}

/* Clone/Staging Site Info */
.mwp-clone-info {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-clone-info .mwp-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #7c3aed;
}

/* Child site cards (clones/staging) */
.mwp-site-card.mwp-child-site {
	border-left: 3px solid #7c3aed;
}

.mwp-site-card.mwp-type-staging.mwp-child-site {
	border-left-color: var(--mwp-state-staging);
}

.mwp-site-card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-top: auto;
	padding-top: var(--mwp-spacing);
	border-top: 1px solid var(--mwp-color-border-light);
}

.mwp-provisioning-status,
.mwp-suspended-status,
.mwp-failed-status {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-suspended-status {
	color: var(--mwp-color-warning);
}

.mwp-failed-status {
	color: var(--mwp-color-error);
}

.mwp-icon-warning {
	color: var(--mwp-color-warning);
}

.mwp-icon-error {
	color: var(--mwp-color-error);
}

/* ==========================================================================
   Site Details Page
   ========================================================================== */

/* Breadcrumb */
.mwp-breadcrumb {
	margin-bottom: var(--mwp-spacing-md);
}

.mwp-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mwp-breadcrumb-item a {
	color: var(--mwp-color-text-secondary);
	text-decoration: none;
	font-size: var(--mwp-font-size-sm);
}

.mwp-breadcrumb-item a:hover {
	color: var(--mwp-color-primary);
}

.mwp-breadcrumb-current {
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text);
	font-size: var(--mwp-font-size-sm);
}

.mwp-breadcrumb-separator {
	display: flex;
	width: 16px;
	height: 16px;
	color: var(--mwp-color-text-light);
}

.mwp-breadcrumb-separator svg {
	width: 100%;
	height: 100%;
}

/* Site Header */
.mwp-site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mwp-spacing);
	margin-bottom: var(--mwp-spacing-md);
	padding-bottom: var(--mwp-spacing-md);
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-site-header-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mwp-spacing);
}

.mwp-site-header-info {
	flex: 1;
	min-width: 200px;
}

.mwp-site-title {
	margin: 0 0 var(--mwp-spacing-xs);
	font-size: var(--mwp-font-size-xl);
	font-weight: var(--mwp-font-weight-bold);
	color: var(--mwp-color-text);
}

.mwp-site-header .mwp-site-url {
	margin: 0;
}

.mwp-site-header .mwp-site-url a {
	font-size: var(--mwp-font-size);
}

.mwp-site-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
}

/* ==========================================================================
   Notices
   ========================================================================== */

.mwp-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	margin-bottom: var(--mwp-spacing);
	border-radius: var(--mwp-radius);
	border-left: 4px solid;
}

.mwp-notice-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.mwp-notice-content {
	flex: 1;
}

.mwp-notice-content strong {
	display: block;
	margin-bottom: var(--mwp-spacing-xs);
}

.mwp-notice-content p {
	margin: 0;
}

.mwp-notice-info {
	background-color: var(--mwp-color-info-bg);
	border-color: var(--mwp-color-info);
}

.mwp-notice-info .mwp-notice-icon,
.mwp-notice-info .mwp-spinner {
	color: var(--mwp-color-info);
	border-top-color: var(--mwp-color-info);
}

.mwp-notice-warning {
	background-color: var(--mwp-color-warning-bg);
	border-color: var(--mwp-color-warning);
}

.mwp-notice-warning .mwp-notice-icon {
	color: var(--mwp-color-warning);
}

.mwp-notice-error {
	background-color: var(--mwp-color-error-bg);
	border-color: var(--mwp-color-error);
}

.mwp-notice-error .mwp-notice-icon {
	color: var(--mwp-color-error);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.mwp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: var(--mwp-spacing-md);
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all var(--mwp-transition-fast);
}

.mwp-tab:hover {
	color: var(--mwp-color-text);
	background-color: var(--mwp-color-bg-secondary);
}

.mwp-tab-active {
	color: var(--mwp-color-primary);
	border-bottom-color: var(--mwp-color-primary);
}

.mwp-tab-icon {
	display: flex;
	width: 18px;
	height: 18px;
}

.mwp-tab-icon svg {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.mwp-card {
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
	margin-bottom: var(--mwp-spacing);
}

.mwp-card-secondary {
	background: var(--mwp-color-bg-secondary);
}

.mwp-card-danger {
	border-color: var(--mwp-color-error);
	background: var(--mwp-color-error-bg);
}

.mwp-card-danger .mwp-card-header {
	border-bottom-color: rgba(214, 54, 56, 0.2);
}

.mwp-card-danger .mwp-card-title {
	color: var(--mwp-color-error);
}

.mwp-card-danger .mwp-card-title .mwp-icon {
	color: var(--mwp-color-error);
}

.mwp-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-card-header-content {
	flex: 1;
	min-width: 200px;
}

.mwp-card-title {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin: 0;
	font-size: var(--mwp-font-size-md);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text);
}

.mwp-card-title .mwp-icon {
	width: 20px;
	height: 20px;
	color: var(--mwp-color-text-secondary);
}

.mwp-card-description {
	margin: var(--mwp-spacing-xs) 0 0;
	color: var(--mwp-color-text-secondary);
	font-size: var(--mwp-font-size-sm);
}

.mwp-card-body {
	padding: var(--mwp-spacing);
}

.mwp-card-body-table {
	padding: 0;
}

.mwp-card-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing);
	border-top: 1px solid var(--mwp-color-border-light);
	background: var(--mwp-color-bg-secondary);
	border-radius: 0 0 var(--mwp-radius-md) var(--mwp-radius-md);
}

/* ==========================================================================
   Info List
   ========================================================================== */

.mwp-info-list {
	margin: 0;
}

.mwp-info-item {
	display: flex;
	flex-wrap: wrap;
	padding: var(--mwp-spacing-sm) 0;
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-info-item:last-child {
	border-bottom: none;
}

.mwp-info-item dt {
	flex: 0 0 140px;
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text-secondary);
}

.mwp-info-item dd {
	flex: 1;
	margin: 0;
	color: var(--mwp-color-text);
}

.mwp-info-item dd a {
	color: var(--mwp-color-primary);
	text-decoration: none;
}

.mwp-info-item dd a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.mwp-table {
	width: 100%;
	border-collapse: collapse;
}

.mwp-table th,
.mwp-table td {
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	text-align: left;
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-table th {
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text-secondary);
	background: var(--mwp-color-bg-secondary);
	font-size: var(--mwp-font-size-sm);
}

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

.mwp-table tbody tr:hover {
	background: var(--mwp-color-bg-secondary);
}

.mwp-empty-table-state {
	text-align: center;
	padding: var(--mwp-spacing-lg);
	color: var(--mwp-color-text-secondary);
}

.mwp-empty-table-state .mwp-icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--mwp-spacing);
	color: var(--mwp-color-text-light);
}

.mwp-empty-table-state p {
	margin: 0;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.mwp-loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--mwp-spacing-lg);
	color: var(--mwp-color-text-secondary);
}

.mwp-loading-state p {
	margin: var(--mwp-spacing-sm) 0 0;
}

/* ==========================================================================
   Credentials Display
   ========================================================================== */

.mwp-credentials-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mwp-spacing);
}

.mwp-credential-full {
	grid-column: 1 / -1;
}

.mwp-credential-item {
	display: flex;
	flex-direction: column;
	gap: var(--mwp-spacing-xs);
}

.mwp-credential-label {
	font-size: var(--mwp-font-size-sm);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text-secondary);
}

.mwp-credential-value {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
}

.mwp-credential-code {
	flex: 1;
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	background: var(--mwp-color-bg-tertiary);
	border-radius: var(--mwp-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: var(--mwp-font-size-sm);
	word-break: break-all;
}

.mwp-password-placeholder {
	font-style: italic;
	color: var(--mwp-color-text-light);
}

/* Copy Button */
.mwp-copy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mwp-spacing-xs);
	padding: var(--mwp-spacing-sm);
	background: transparent;
	border: 1px solid var(--mwp-color-border);
	border-radius: var(--mwp-radius-sm);
	color: var(--mwp-color-text-secondary);
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
}

.mwp-copy-button:hover {
	background: var(--mwp-color-bg-secondary);
	color: var(--mwp-color-text);
}

.mwp-copy-button .mwp-icon-check {
	display: none;
	color: var(--mwp-color-success);
}

.mwp-copy-button.mwp-copied .mwp-icon-copy {
	display: none;
}

.mwp-copy-button.mwp-copied .mwp-icon-check {
	display: block;
}

.mwp-copy-button-large {
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
}

/* New Password Display */
.mwp-new-password-display {
	background: var(--mwp-color-success-bg);
	border: 1px solid var(--mwp-color-success);
	border-radius: var(--mwp-radius);
	padding: var(--mwp-spacing);
	margin-top: var(--mwp-spacing);
}

.mwp-password-header {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-success);
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-password-value {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-password-code {
	flex: 1;
	background: var(--mwp-color-bg);
}

.mwp-password-warning {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing-sm);
	margin: 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-warning);
}

.mwp-password-warning .mwp-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.mwp-form-group {
	margin-bottom: var(--mwp-spacing);
}

.mwp-form-label {
	display: block;
	margin-bottom: var(--mwp-spacing-xs);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text);
}

.mwp-input {
	width: 100%;
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	font-family: inherit;
	font-size: var(--mwp-font-size);
	border: 1px solid var(--mwp-color-border);
	border-radius: var(--mwp-radius);
	background: var(--mwp-color-bg);
	transition: border-color var(--mwp-transition-fast), box-shadow var(--mwp-transition-fast);
}

.mwp-input:focus {
	outline: none;
	border-color: var(--mwp-color-primary);
	box-shadow: 0 0 0 2px var(--mwp-color-primary-light);
}

.mwp-input-group {
	display: flex;
	gap: var(--mwp-spacing-sm);
}

.mwp-input-group .mwp-input {
	flex: 1;
}

.mwp-form-help {
	margin: var(--mwp-spacing-xs) 0 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-light);
}

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

.mwp-info-box {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg-secondary);
	border-radius: var(--mwp-radius);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-info-box .mwp-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--mwp-color-text-light);
}

/* ==========================================================================
   Help Steps
   ========================================================================== */

.mwp-help-steps {
	margin: 0;
	padding-left: var(--mwp-spacing-md);
}

.mwp-help-steps li {
	margin-bottom: var(--mwp-spacing-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-help-steps li:last-child {
	margin-bottom: 0;
}

.mwp-help-text {
	margin: 0 0 var(--mwp-spacing);
	color: var(--mwp-color-text-secondary);
}

.mwp-help-note {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing-sm);
	margin: var(--mwp-spacing) 0 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-light);
}

.mwp-help-note .mwp-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

/* ==========================================================================
   DNS Records
   ========================================================================== */

.mwp-dns-records {
	display: flex;
	flex-direction: column;
	gap: var(--mwp-spacing);
}

.mwp-dns-record {
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border-radius: var(--mwp-radius);
}

.mwp-dns-record-header {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-dns-record-for {
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-dns-record-value {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
}

.mwp-dns-record-value code {
	flex: 1;
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	background: var(--mwp-color-bg-tertiary);
	border-radius: var(--mwp-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: var(--mwp-font-size-sm);
}

/* ==========================================================================
   PHP Version Selector
   ========================================================================== */

.mwp-php-versions {
	display: flex;
	flex-direction: column;
	gap: var(--mwp-spacing-sm);
}

.mwp-php-option {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border: 2px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius);
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
}

.mwp-php-option:hover {
	border-color: var(--mwp-color-border);
}

.mwp-php-option input {
	flex-shrink: 0;
}

.mwp-php-option:has(input:checked) {
	border-color: var(--mwp-color-primary);
	background: var(--mwp-color-primary-light);
}

.mwp-php-option-content {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mwp-spacing-sm);
}

.mwp-php-version-label {
	font-weight: var(--mwp-font-weight-semibold);
}

.mwp-php-version-note {
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-php-current-badge {
	padding: 2px 6px;
	font-size: 11px;
	font-weight: var(--mwp-font-weight-semibold);
	background: var(--mwp-color-success-bg);
	color: var(--mwp-color-success);
	border-radius: var(--mwp-radius-sm);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.mwp-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mwp-spacing);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mwp-transition), visibility var(--mwp-transition);
}

.mwp-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.mwp-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.mwp-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--mwp-color-bg);
	border-radius: var(--mwp-radius-lg);
	box-shadow: var(--mwp-shadow-lg);
	transform: translateY(-10px);
	transition: transform var(--mwp-transition);
}

.mwp-modal[aria-hidden="false"] .mwp-modal-dialog {
	transform: translateY(0);
}

.mwp-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	border-bottom: 1px solid var(--mwp-color-border-light);
}

.mwp-modal-title {
	margin: 0;
	font-size: var(--mwp-font-size-lg);
	font-weight: var(--mwp-font-weight-semibold);
}

.mwp-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--mwp-radius);
	color: var(--mwp-color-text-secondary);
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
}

.mwp-modal-close:hover {
	background: var(--mwp-color-bg-secondary);
	color: var(--mwp-color-text);
}

.mwp-modal-close svg {
	width: 20px;
	height: 20px;
}

.mwp-modal-body {
	padding: var(--mwp-spacing);
}

.mwp-modal-description {
	margin: 0 0 var(--mwp-spacing);
	color: var(--mwp-color-text-secondary);
}

.mwp-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing);
	border-top: 1px solid var(--mwp-color-border-light);
	background: var(--mwp-color-bg-secondary);
	border-radius: 0 0 var(--mwp-radius-lg) var(--mwp-radius-lg);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.mwp-toast-container {
	position: fixed;
	bottom: var(--mwp-spacing);
	right: var(--mwp-spacing);
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: var(--mwp-spacing-sm);
	max-width: 400px;
}

.mwp-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border-radius: var(--mwp-radius);
	box-shadow: var(--mwp-shadow-lg);
	border-left: 4px solid;
	animation: mwp-toast-in 0.3s ease;
}

.mwp-toast.mwp-toast-out {
	animation: mwp-toast-out 0.3s ease forwards;
}

@keyframes mwp-toast-in {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes mwp-toast-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}

.mwp-toast-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.mwp-toast-content {
	flex: 1;
}

.mwp-toast-message {
	margin: 0;
	font-size: var(--mwp-font-size);
}

.mwp-toast-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--mwp-color-text-light);
	cursor: pointer;
}

.mwp-toast-close:hover {
	color: var(--mwp-color-text);
}

.mwp-toast-close svg {
	width: 16px;
	height: 16px;
}

.mwp-toast-success {
	border-color: var(--mwp-color-success);
}

.mwp-toast-success .mwp-toast-icon {
	color: var(--mwp-color-success);
}

.mwp-toast-error {
	border-color: var(--mwp-color-error);
}

.mwp-toast-error .mwp-toast-icon {
	color: var(--mwp-color-error);
}

.mwp-toast-warning {
	border-color: var(--mwp-color-warning);
}

.mwp-toast-warning .mwp-toast-icon {
	color: var(--mwp-color-warning);
}

.mwp-toast-info {
	border-color: var(--mwp-color-info);
}

.mwp-toast-info .mwp-toast-icon {
	color: var(--mwp-color-info);
}

/* ==========================================================================
   Skeleton Loading
   ========================================================================== */

.mwp-skeleton {
	background: linear-gradient(90deg, var(--mwp-color-bg-tertiary) 25%, var(--mwp-color-bg-secondary) 50%, var(--mwp-color-bg-tertiary) 75%);
	background-size: 200% 100%;
	animation: mwp-skeleton-loading 1.5s infinite;
	border-radius: var(--mwp-radius-sm);
}

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

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

.mwp-skeleton-badge {
	height: 24px;
	width: 80px;
}

.mwp-skeleton-url {
	height: 16px;
	width: 80%;
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-skeleton-meta {
	height: 16px;
	width: 50%;
	margin-bottom: var(--mwp-spacing);
}

.mwp-skeleton-button {
	height: 36px;
	width: 100px;
}

/* ==========================================================================
   Domain Table Styles
   ========================================================================== */

.mwp-domain-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--mwp-color-text);
	text-decoration: none;
	font-weight: var(--mwp-font-weight-medium);
}

.mwp-domain-link:hover {
	color: var(--mwp-color-primary);
}

.mwp-domain-link .mwp-icon {
	width: 14px;
	height: 14px;
	opacity: 0;
	transition: opacity var(--mwp-transition-fast);
}

.mwp-domain-link:hover .mwp-icon {
	opacity: 1;
}

.mwp-ssl-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.mwp-ssl-active {
	color: var(--mwp-color-success);
}

.mwp-ssl-pending {
	color: var(--mwp-color-warning);
}

.mwp-ssl-inactive {
	color: var(--mwp-color-text-light);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 599px) {
	.mwp-site-header {
		flex-direction: column;
		align-items: stretch;
	}

	.mwp-site-header-actions {
		flex-direction: column;
	}

	.mwp-site-header-actions .mwp-button {
		width: 100%;
	}

	.mwp-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}

	.mwp-tab {
		flex-shrink: 0;
	}

	.mwp-credentials-grid {
		grid-template-columns: 1fr;
	}

	.mwp-info-item {
		flex-direction: column;
		gap: var(--mwp-spacing-xs);
	}

	.mwp-info-item dt {
		flex: none;
	}

	.mwp-modal-dialog {
		max-height: calc(100vh - 20px);
	}

	.mwp-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mwp-input-group {
		flex-direction: column;
	}
}

/* ==========================================================================
   Collaborators
   ========================================================================== */

.mwp-collaborators-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mwp-spacing);
}

@media (min-width: 768px) {
	.mwp-collaborators-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mwp-collaborator-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
	transition: border-color var(--mwp-transition-fast), box-shadow var(--mwp-transition-fast);
}

.mwp-collaborator-card:hover {
	border-color: var(--mwp-color-border);
	box-shadow: var(--mwp-shadow-sm);
}

.mwp-collaborator-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--mwp-color-bg-tertiary);
	border-radius: var(--mwp-radius-full);
	color: var(--mwp-color-text-light);
	flex-shrink: 0;
}

.mwp-collaborator-avatar svg {
	width: 24px;
	height: 24px;
}

.mwp-collaborator-info {
	flex: 1;
	min-width: 150px;
}

.mwp-collaborator-name {
	margin: 0 0 var(--mwp-spacing-xs);
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text);
}

.mwp-collaborator-email {
	margin: 0 0 var(--mwp-spacing-sm);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-collaborator-roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-xs);
}

.mwp-collaborator-status {
	flex-shrink: 0;
}

.mwp-collaborator-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
	width: 100%;
	margin-top: var(--mwp-spacing-sm);
	padding-top: var(--mwp-spacing-sm);
	border-top: 1px solid var(--mwp-color-border-light);
}

/* Role Badges */
.mwp-role-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: var(--mwp-font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--mwp-radius-sm);
	background-color: var(--mwp-color-bg-tertiary);
	color: var(--mwp-color-text-secondary);
}

.mwp-role-onepress {
	background-color: #e8f4fd;
	color: #0073aa;
}

.mwp-role-sftp {
	background-color: #fef3e8;
	color: #d46b08;
}

.mwp-role-clone {
	background-color: #f0f6fc;
	color: #2271b1;
}

.mwp-role-staging {
	background-color: #f5f0ff;
	color: #6b21a8;
}

/* Status Badges for Collaborators */
.mwp-status-pending {
	background-color: var(--mwp-color-warning-bg);
	color: var(--mwp-color-warning);
}

.mwp-status-active {
	background-color: var(--mwp-color-success-bg);
	color: var(--mwp-color-success);
}

/* Role Checkboxes */
.mwp-role-checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--mwp-spacing-sm);
}

.mwp-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	background: var(--mwp-color-bg-secondary);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius);
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
}

.mwp-checkbox-label:hover {
	background: var(--mwp-color-bg-tertiary);
	border-color: var(--mwp-color-border);
}

.mwp-checkbox-label:has(input:checked) {
	background: var(--mwp-color-primary-light);
	border-color: var(--mwp-color-primary);
}

.mwp-checkbox-label input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
}

.mwp-checkbox-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mwp-checkbox-text strong {
	font-size: var(--mwp-font-size-sm);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text);
}

.mwp-checkbox-description {
	font-size: 12px;
	color: var(--mwp-color-text-secondary);
}

/* ==========================================================================
   Site Actions
   ========================================================================== */

.mwp-clone-form {
	margin-bottom: var(--mwp-spacing);
}

.mwp-form-row {
	margin-bottom: var(--mwp-spacing);
}

.mwp-form-row:last-child {
	margin-bottom: 0;
}

.mwp-input-suffix {
	display: flex;
	align-items: center;
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	background: var(--mwp-color-bg-tertiary);
	border: 1px solid var(--mwp-color-border);
	border-left: none;
	border-radius: 0 var(--mwp-radius) var(--mwp-radius) 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-input-group .mwp-input:has(+ .mwp-input-suffix) {
	border-radius: var(--mwp-radius) 0 0 var(--mwp-radius);
}

.mwp-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
	margin-top: var(--mwp-spacing);
}

/* Maintenance Mode Toggle */
.mwp-maintenance-toggle-container {
	margin-bottom: var(--mwp-spacing);
}

.mwp-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg-secondary);
	border-radius: var(--mwp-radius);
}

.mwp-toggle-info {
	display: flex;
	flex-direction: column;
	gap: var(--mwp-spacing-xs);
}

.mwp-toggle-label {
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text);
}

.mwp-toggle-status {
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

/* Toggle Switch */
.mwp-toggle {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 26px;
	flex-shrink: 0;
}

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

.mwp-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--mwp-color-border);
	border-radius: var(--mwp-radius-full);
	transition: all var(--mwp-transition-fast);
}

.mwp-toggle-slider::before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background-color: var(--mwp-color-bg);
	border-radius: var(--mwp-radius-full);
	transition: all var(--mwp-transition-fast);
	box-shadow: var(--mwp-shadow-sm);
}

.mwp-toggle-input:checked + .mwp-toggle-slider {
	background-color: var(--mwp-color-primary);
}

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

.mwp-toggle-input:focus + .mwp-toggle-slider {
	box-shadow: 0 0 0 2px var(--mwp-color-primary-light);
}

.mwp-toggle-input:disabled + .mwp-toggle-slider {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Maintenance Warning */
.mwp-maintenance-warning {
	margin-top: var(--mwp-spacing);
}

/* ==========================================================================
   Editable Fields
   ========================================================================== */

.mwp-editable-field {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
}

.mwp-editable-value {
	font-weight: var(--mwp-font-weight-medium);
}

.mwp-edit-field {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
}

.mwp-input-small {
	padding: var(--mwp-spacing-xs) var(--mwp-spacing-sm);
	font-size: var(--mwp-font-size-sm);
}

/* ==========================================================================
   Connections Tab
   ========================================================================== */

.mwp-connections-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--mwp-spacing);
}

.mwp-connection-item {
	display: flex;
	align-items: flex-start;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
}

.mwp-connection-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mwp-color-primary);
}

.mwp-connection-icon svg {
	width: 40px;
	height: 40px;
}

.mwp-connection-details {
	flex: 1;
	min-width: 0;
}

#mwp-phpmyadmin-url-container{
	display: none;
}

.mwp-connection-details h3 {
	margin: 0 0 0.25rem;
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-semibold);
}

.mwp-connection-details p {
	margin: 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-connection-card {
	display: flex;
	flex-direction: column;
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
}

.mwp-connection-header {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	margin-bottom: var(--mwp-spacing-sm);
}

.mwp-connection-header h3 {
	margin: 0;
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-semibold);
}

.mwp-connection-header .mwp-icon {
	width: 20px;
	height: 20px;
	color: var(--mwp-color-text-secondary);
}

.mwp-connection-description {
	margin: 0 0 var(--mwp-spacing);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-connection-action {
	margin-top: auto;
}

/* ==========================================================================
   Inline Icon
   ========================================================================== */

.mwp-icon-inline {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	vertical-align: middle;
}

/* ==========================================================================
   Small Notices
   ========================================================================== */

.mwp-notice-small {
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	font-size: var(--mwp-font-size-sm);
}

.mwp-notice-small .mwp-notice-icon {
	width: 18px;
	height: 18px;
}

.mwp-notice-small p {
	margin: 0;
}

/* ==========================================================================
   Tab Button Styles
   ========================================================================== */

.mwp-tab-button {
	display: inline-flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	padding: var(--mwp-spacing-sm) var(--mwp-spacing);
	font-family: inherit;
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text-secondary);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: all var(--mwp-transition-fast);
}

.mwp-tab-button:hover {
	color: var(--mwp-color-text);
	background-color: var(--mwp-color-bg-secondary);
}

.mwp-tab-button.active {
	color: var(--mwp-color-primary);
	border-bottom-color: var(--mwp-color-primary);
}

.mwp-tab-button .mwp-icon {
	width: 18px;
	height: 18px;
}

/* Tab Panels */
.mwp-tab-panel {
	display: none;
}

.mwp-tab-panel.active {
	display: block;
}

/* ==========================================================================
   Card Actions
   ========================================================================== */

.mwp-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
	margin-top: var(--mwp-spacing);
}

/* ==========================================================================
   Link Button with Icon
   ========================================================================== */

.mwp-link-button .mwp-icon {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-right: 4px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.mwp-loading {
	display: flex;
	align-items: center;
	gap: var(--mwp-spacing-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-error {
	color: var(--mwp-color-error);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.mwp-button,
	.mwp-copy-button,
	.mwp-toast-container,
	.mwp-modal {
		display: none !important;
	}

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

/* ==========================================================================
   Light-Mode Style Guide Overrides (My Account)
   Scoped to body.woocommerce-account so admin
   and other frontend pages are not affected.
   ========================================================================== */

/* --- Design token overrides --- */

body.woocommerce-account {
	/* Primary — Steel Blue */
	--mwp-color-primary: #1572b6;
	--mwp-color-primary-hover: #125e99;
	--mwp-color-primary-light: rgba(21, 114, 182, 0.1);
	--mwp-color-secondary: #50575e;
	--mwp-color-secondary-hover: #3c4043;

	/* Status Colors — Emerald-tinted greens */
	--mwp-color-success: #059669;
	--mwp-color-success-bg: #ecfdf5;
	--mwp-color-warning: #d97706;
	--mwp-color-warning-bg: #fffbeb;
	--mwp-color-error: #dc2626;
	--mwp-color-error-bg: #fef2f2;
	--mwp-color-info: #2563eb;
	--mwp-color-info-bg: #eff6ff;

	/* State Colors — Emerald greens */
	--mwp-state-live: #059669;
	--mwp-state-live-bg: #ecfdf5;
	--mwp-state-pending: #2563eb;
	--mwp-state-pending-bg: #eff6ff;
	--mwp-state-staging: #1d4ed8;
	--mwp-state-staging-bg: #eff6ff;
	--mwp-state-disabled: #d97706;
	--mwp-state-disabled-bg: #fffbeb;
	--mwp-state-failed: #dc2626;
	--mwp-state-failed-bg: #fef2f2;

	/* Subscription Status */
	--mwp-sub-active: #059669;
	--mwp-sub-active-bg: #ecfdf5;
	--mwp-sub-pending: #2563eb;
	--mwp-sub-pending-bg: #eff6ff;
	--mwp-sub-on-hold: #d97706;
	--mwp-sub-on-hold-bg: #fffbeb;
	--mwp-sub-cancelled: #dc2626;
	--mwp-sub-cancelled-bg: #fef2f2;
	--mwp-sub-pending-cancel: #d97706;
	--mwp-sub-pending-cancel-bg: #fffbeb;

	/* Neutrals — Light Mode */
	--mwp-color-text: #212630;
	--mwp-color-text-secondary: #676e7d;
	--mwp-color-text-light: #9198a5;
	--mwp-color-border: #dcdee2;
	--mwp-color-border-light: #e8e9ec;
	--mwp-color-bg: #ffffff;
	--mwp-color-bg-secondary: #f0f1f3;
	--mwp-color-bg-tertiary: #e8e9ec;

	/* Shadows — refined for light backgrounds */
	--mwp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--mwp-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--mwp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
	--mwp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

	/* Typography — Inter */
	--mwp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Typography refinements --- */

body.woocommerce-account .mwp-site-title,
body.woocommerce-account .mwp-site-details-page h1,
body.woocommerce-account .mwp-empty-state-title {
	font-weight: 800;
	letter-spacing: -0.02em;
}

body.woocommerce-account .mwp-card-title {
	font-weight: 700;
}

/* Container fills the available content column —
   outer page width is controlled by the theme. */

/* --- Card spacing refinements --- */

body.woocommerce-account .mwp-card {
	margin-bottom: 1.5rem;
}

body.woocommerce-account .mwp-card-header,
body.woocommerce-account .mwp-card-body,
body.woocommerce-account .mwp-card-footer {
	padding: 1.25rem;
}

/* --- Status badge borders --- */

body.woocommerce-account .mwp-status-badge {
	border: 1px solid transparent;
	font-size: 12px;
}

body.woocommerce-account .mwp-state-live {
	border-color: rgba(5, 150, 105, 0.3);
}

body.woocommerce-account .mwp-state-pending,
body.woocommerce-account .mwp-state-staging {
	border-color: rgba(37, 99, 235, 0.3);
}

body.woocommerce-account .mwp-state-disabled {
	border-color: rgba(217, 119, 6, 0.3);
}

body.woocommerce-account .mwp-state-failed {
	border-color: rgba(220, 38, 38, 0.3);
}

body.woocommerce-account .mwp-sub-active {
	border-color: rgba(5, 150, 105, 0.3);
}

body.woocommerce-account .mwp-sub-pending {
	border-color: rgba(37, 99, 235, 0.3);
}

body.woocommerce-account .mwp-sub-on-hold,
body.woocommerce-account .mwp-sub-pending-cancel {
	border-color: rgba(217, 119, 6, 0.3);
}

body.woocommerce-account .mwp-sub-cancelled {
	border-color: rgba(220, 38, 38, 0.3);
}

/* --- Toggle switch: 44×24px per style guide --- */

body.woocommerce-account .mwp-toggle {
	width: 44px;
	height: 24px;
}

body.woocommerce-account .mwp-toggle-slider::before {
	height: 18px;
	width: 18px;
}

body.woocommerce-account .mwp-toggle-input:checked + .mwp-toggle-slider::before {
	transform: translateX(20px);
}

/* --- Monospace: JetBrains Mono --- */

body.woocommerce-account .mwp-credential-code,
body.woocommerce-account .mwp-dns-record-value code {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* --- Site switcher dropdown --- */

.mwp-site-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.mwp-site-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border);
	border-radius: var(--mwp-radius-md);
	padding: 0.5rem 2.25rem 0.5rem 0.75rem;
	font-family: var(--mwp-font-family);
	font-size: var(--mwp-font-size-sm);
	font-weight: var(--mwp-font-weight-medium);
	color: var(--mwp-color-text);
	cursor: pointer;
	min-width: 160px;
	height: 40px;
	line-height: 1.25;
	transition: border-color var(--mwp-transition-fast), box-shadow var(--mwp-transition-fast);
}

.mwp-site-select:hover {
	border-color: var(--mwp-color-primary);
}

.mwp-site-select:focus {
	outline: none;
	border-color: var(--mwp-color-primary);
	box-shadow: 0 0 0 2px var(--mwp-color-primary-light);
}

.mwp-site-select-icon {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 16px;
	height: 16px;
	max-width: 16px;
	max-height: 16px;
	overflow: hidden;
	color: var(--mwp-color-text-secondary);
	pointer-events: none;
}

/* =========================================================================
   Team Members
   ========================================================================= */

.mwp-team-members-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mwp-spacing);
}

@media (min-width: 768px) {
	.mwp-team-members-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mwp-team-member-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--mwp-spacing);
	padding: var(--mwp-spacing);
	background: var(--mwp-color-bg);
	border: 1px solid var(--mwp-color-border-light);
	border-radius: var(--mwp-radius-md);
	transition: border-color var(--mwp-transition-fast), box-shadow var(--mwp-transition-fast);
}

.mwp-team-member-card:hover {
	border-color: var(--mwp-color-border);
	box-shadow: var(--mwp-shadow-sm);
}

.mwp-team-member-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--mwp-color-bg-tertiary);
	border-radius: var(--mwp-radius-full);
	color: var(--mwp-color-text-light);
	flex-shrink: 0;
}

.mwp-team-member-avatar svg {
	width: 24px;
	height: 24px;
}

.mwp-team-member-info {
	flex: 1;
	min-width: 150px;
}

.mwp-team-member-name {
	margin: 0 0 var(--mwp-spacing-xs);
	font-size: var(--mwp-font-size);
	font-weight: var(--mwp-font-weight-semibold);
	color: var(--mwp-color-text);
}

.mwp-team-member-email {
	margin: 0 0 var(--mwp-spacing-sm);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
}

.mwp-team-member-status {
	flex-shrink: 0;
}

.mwp-team-member-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mwp-spacing-sm);
	width: 100%;
	margin-top: var(--mwp-spacing-sm);
	padding-top: var(--mwp-spacing-sm);
	border-top: 1px solid var(--mwp-color-border-light);
}

/* Shared badge on site title */
.mwp-shared-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: var(--mwp-font-weight-medium);
	background-color: #f0e6ff;
	color: #7b2cbf;
	border-radius: var(--mwp-radius-sm);
	vertical-align: middle;
	margin-left: var(--mwp-spacing-sm);
}

/* Form help text */
.mwp-form-help {
	margin: var(--mwp-spacing-xs) 0 0;
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-light);
}

/* Section description */
.mwp-section-description {
	margin: 0 0 var(--mwp-spacing);
	font-size: var(--mwp-font-size-sm);
	color: var(--mwp-color-text-secondary);
	line-height: 1.6;
}