/**
 * WP PowerSuite License Page Styles
 *
 * @package WP_PowerSuite
 * @since 1.0.0
 */

/* License page wrapper - centered on page (not full width) */
.wpps-license-page {
	max-width: 880px;
	margin: 0 auto 48px;
}

.wpps-license-page__hero {
	margin-bottom: 24px;
}

.wpps-license-page__hero .wpps-page-hero.wpps-settings-hero {
	margin-bottom: 0;
}

/* Main card container */
.el-license-container {
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 0;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

/* Header section - left-aligned for consistency */
.el-license-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 32px;
	background: radial-gradient(circle at top left, rgba(34, 113, 177, 0.18), transparent 32%), linear-gradient(135deg, #1e6767 0%, #8dd3d3 100%);
	border-bottom: none;
	text-align: left;
}

.el-license-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;
	color: #fff;
	font-size: 22px;
	flex-shrink: 0;
}

.el-license-header__icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.el-license-header__text {
	flex: 1;
	min-width: 0;
}

.el-license-header__text h3 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
}

.el-license-header__text p {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

/* Content area - consistent left alignment */
.el-license-content {
	padding: 28px 32px 32px;
	text-align: left;
}

.wpps-license-status-card {
	display: grid;
	grid-template-columns: minmax(180px, 240px) 1fr;
	gap: 20px;
	margin: 0 0 24px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0;
}

.wpps-license-eyebrow {
	display: block;
	margin-bottom: 8px;
	color: #64748b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wpps-license-status-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 6px 12px;
	border-radius: 0;
	background: #0f172a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.wpps-license-status-card--active .wpps-license-status-badge,
.wpps-license-status-card--grace .wpps-license-status-badge {
	background: #008a20;
}

.wpps-license-status-card--connection_issue .wpps-license-status-badge {
	background: #b45309;
}

.wpps-license-status-card--invalid .wpps-license-status-badge,
.wpps-license-status-card--expired .wpps-license-status-badge {
	background: #b32d2e;
}

.wpps-license-status-badge--vendor {
	margin-left: 8px;
	background: #1e6767;
	font-weight: 600;
}

.wpps-license-status-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
	color: #475569;
	font-size: 13px;
}

.wpps-license-status-meta code {
	font-size: 12px;
}

.wpps-license-status-message {
	grid-column: 1 / -1;
	margin: 0;
	color: #334155;
}

.wpps-license-status-message--invalid,
.wpps-license-status-message--expired,
.wpps-license-status-message--connection_issue {
	padding: 12px 14px;
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #b32d2e;
}

.wpps-license-status-message--active,
.wpps-license-status-message--grace {
	padding: 12px 14px;
	background: #edfaef;
	border-left: 4px solid #00a32a;
	color: #1e4620;
}

.wpps-license-alert {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid transparent;
	border-radius: 0;
	text-align: left;
}

.wpps-license-alert p {
	margin: 0;
}

.wpps-license-alert--error {
	background: #fcf0f1;
	border-left-color: #d63638;
	color: #b32d2e;
}

.wpps-license-alert--success {
	background: #edfaef;
	border-left-color: #00a32a;
	color: #1e4620;
}

.wpps-license-alert--warning {
	background: #fff8e5;
	border-left-color: #dba617;
	color: #6e4a00;
}

.wpps-license-update-card {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid #dcdcde;
	border-left-width: 4px;
	background: #fff;
	text-align: left;
}

.wpps-license-update-card--ready {
	border-left-color: #2271b1;
}

.wpps-license-update-card--blocked {
	border-left-color: #dba617;
	background: #fffbf0;
}

.wpps-license-update-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 1rem;
}

.wpps-license-update-card__header .dashicons {
	color: #2271b1;
}

.wpps-license-update-card--blocked .wpps-license-update-card__header .dashicons {
	color: #b26200;
}

.wpps-license-update-card__versions,
.wpps-license-update-card__message {
	margin: 0 0 10px;
}

.wpps-license-update-card__message--blocked {
	color: #6e4a00;
}

.wpps-license-update-card__actions {
	margin: 0;
}

.wpps-license-inline-form {
	display: inline-block;
	margin-left: 8px;
}

.wpps-license-actions,
.wpps-license-refresh-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.wpps-license-actions form,
.wpps-license-refresh-form {
	margin: 0;
}

.wpps-license-actions .button,
.wpps-license-refresh-form .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Button dashicons match label color (overrides WP admin color scheme defaults). */
[class*="branch-"].wp-core-ui .wpps-license-page .button .dashicons,
[class*="branch-"].wp-core-ui .wpps-license-page .button .dashicons::before,
[class*="branch-"].wp-core-ui .el-license-container .button .dashicons,
[class*="branch-"].wp-core-ui .el-license-container .button .dashicons::before,
.wp-core-ui .wpps-license-page .button .dashicons,
.wp-core-ui .wpps-license-page .button .dashicons::before,
.wp-core-ui .el-license-container .button .dashicons,
.wp-core-ui .el-license-container .button .dashicons::before {
	color: currentColor;
	line-height: 1;
}

.wpps-license-page .button .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.el-license-info .button.button-small {
	margin-left: 8px;
	vertical-align: middle;
}

.el-license-quick-links__grid .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.el-license-links .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.el-license-title {
	margin-top: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #1d2327;
}

.el-license-container hr {
	margin: 0 28px;
	border: none;
	border-top: 1px solid #e2e4e7;
}

/* Intro text - tighter spacing */
.el-license-intro {
	margin: 0 0 20px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #50575e;
}

/* Form fields - consistent vertical rhythm (8px grid) */
.el-license-field {
	display: block;
	margin-bottom: 16px;
	text-align: left;
}

.el-license-field:last-of-type {
	margin-bottom: 0;
}

.el-license-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 0.9rem;
	color: #1d2327;
}

.el-license-field input[type="text"],
.el-license-field input[type="email"] {
	width: 100%;
	font-size: 1rem;
	padding: 10px 14px;
	border: 1px solid #8c8f94;
	border-radius: 0;
	font-family: Consolas, Monaco, monospace;
	letter-spacing: 0.5px;
	display: block;
	box-sizing: border-box;
}

.el-license-field input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: none;
}

/* Form block */
.el-license-form-block {
	width: 100%;
}

.el-license-field .description {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: #646970;
	line-height: 1.5;
}

/* Submit area - reduced spacing, left-aligned */
.el-license-active-btn {
	margin-top: 20px;
	text-align: left;
}

.el-license-active-btn .button {
	padding: 8px 20px;
	font-size: 0.95rem;
}

.el-license-active-btn .button-secondary {
	border-color: #8c8f94;
	color: #2c3338;
}

.el-license-active-btn .button-secondary:hover {
	border-color: #646970;
	background: #f6f7f7;
	color: #1d2327;
}

/* License info list */
.el-license-info {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.el-license-info li {
	padding: 14px 16px;
	border: 1px solid #eef2f7;
	border-radius: 0;
	background: #fff;
	list-style: none;
}

.el-license-info li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.el-license-info li:first-child {
	padding-top: 14px;
}

.el-license-info-title {
	display: block;
	min-width: 0;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 0.9rem;
	color: #646970;
}

.el-license-info-title::after {
	content: "";
	margin-left: 2px;
}

@media (max-width: 782px) {
	.wpps-license-page {
		margin: 16px 10px 32px;
	}

	.wpps-license-status-card,
	.el-license-info {
		grid-template-columns: 1fr;
	}

	.wpps-license-status-meta {
		grid-template-columns: 1fr;
	}

	.el-license-header,
	.el-license-content {
		padding: 22px;
	}
}

/* Status badges */
.el-license-valid {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #fff;
	background: #00a32a;
	border-radius: 0;
}

.el-license-invalid {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #fff;
	background: #d63638;
	border-radius: 0;
}

/* License key display */
.el-license-key {
	font-family: Consolas, Monaco, monospace;
	font-size: 0.9rem;
	font-weight: 500;
	color: #50575e;
	letter-spacing: 0.5px;
}

/* Purchase / Don't have license section - left-aligned, consistent spacing */
.el-license-links {
	margin-top: 24px;
	padding: 20px 24px;
	background: #f6f7f7;
	border-radius: 0;
	border: 1px solid #e2e4e7;
	text-align: left;
}

.el-license-links__heading {
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #50575e;
}

.el-license-links__sub {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #646970;
}

.el-license-links__sub a {
	color: #2271b1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.el-license-links__sub a:hover {
	color: #135e96;
}

/* Quick links grid (license info page) - left-aligned */
.el-license-quick-links {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e2e4e7;
	text-align: left;
}

.el-license-quick-links__heading {
	margin: 0 0 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #50575e;
}

.el-license-quick-links__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
}
