/* LicenseFox — Customer Portal Styles
   Scoped to .lfx-portal so nothing bleeds into the theme.
   Uses CSS custom properties so themes can override easily. */

.lfx-portal {
	--lfx-primary:   #3b82f6;
	--lfx-success:   #16a34a;
	--lfx-warning:   #d97706;
	--lfx-danger:    #dc2626;
	--lfx-surface:   #ffffff;
	--lfx-border:    #e5e7eb;
	--lfx-text:      #111827;
	--lfx-muted:     #6b7280;
	--lfx-radius:    8px;
	font-family: inherit;
	color: var(--lfx-text);
}

/* Header */
.lfx-portal-header { margin-bottom: 1.5rem; }
.lfx-portal-title  { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; }
.lfx-portal-greeting { color: var(--lfx-muted); margin: 0; }

/* License grid */
.lfx-license-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

/* License card */
.lfx-license-card {
	background: var(--lfx-surface);
	border: 1px solid var(--lfx-border);
	border-radius: var(--lfx-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.lfx-license-card.lfx-status-valid    { border-left: 4px solid var(--lfx-success); }
.lfx-license-card.lfx-status-inactive { border-left: 4px solid var(--lfx-muted); }
.lfx-license-card.lfx-status-expired  { border-left: 4px solid var(--lfx-danger); }
.lfx-license-card.lfx-status-disabled { border-left: 4px solid var(--lfx-danger); opacity: .7; }

/* Card header row */
.lfx-license-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Tier badge */
.lfx-tier-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 100px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.lfx-tier-basic      { background: #dbeafe; color: #1d4ed8; }
.lfx-tier-pro        { background: #ede9fe; color: #6d28d9; }
.lfx-tier-enterprise { background: #fef3c7; color: #92400e; }

/* Status badge */
.lfx-status-badge {
	font-size: .75rem;
	color: var(--lfx-muted);
	font-weight: 600;
}

/* Key display */
.lfx-license-key-wrap {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #f9fafb;
	border: 1px solid var(--lfx-border);
	border-radius: 6px;
	padding: .5rem .75rem;
}

.lfx-license-key {
	font-family: 'Courier New', monospace;
	font-size: .9rem;
	letter-spacing: .1em;
	color: var(--lfx-text);
	background: none;
	border: none;
	padding: 0;
	flex: 1;
	word-break: break-all;
}

.lfx-copy-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	padding: 0 .25rem;
	color: var(--lfx-muted);
	flex-shrink: 0;
}
.lfx-copy-btn:hover { color: var(--lfx-primary); }

/* Meta list */
.lfx-license-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .2rem .75rem;
	font-size: .875rem;
	margin: 0;
}
.lfx-license-meta dt { color: var(--lfx-muted); font-weight: 600; }
.lfx-license-meta dd { margin: 0; }
.lfx-warning { color: var(--lfx-warning); font-size: .8rem; }

/* Sites details */
.lfx-sites-details { font-size: .85rem; }
.lfx-sites-details summary {
	cursor: pointer;
	color: var(--lfx-primary);
	font-weight: 600;
	list-style: none;
}
.lfx-sites-details summary::-webkit-details-marker { display: none; }
.lfx-sites-list {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
}
.lfx-sites-list li {
	padding: .25rem 0;
	border-bottom: 1px solid var(--lfx-border);
	color: var(--lfx-muted);
}
.lfx-sites-list li:last-child { border-bottom: none; }
.lfx-staging-tag {
	background: #f3f4f6;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: .75rem;
	margin-left: .5rem;
}

/* Card footer */
.lfx-license-card-footer { margin-top: auto; }
.lfx-activate-hint {
	font-size: .75rem;
	color: var(--lfx-muted);
	margin: .5rem 0 0;
}

/* Buttons */
.lfx-btn {
	display: inline-block;
	padding: .5rem 1.1rem;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: opacity .15s;
}
.lfx-btn:hover { opacity: .85; }
.lfx-btn-primary   { background: var(--lfx-primary); color: #fff; }
.lfx-btn-secondary { background: #f3f4f6; color: var(--lfx-text); border: 1px solid var(--lfx-border); }

/* Portal split (login + lookup) */
.lfx-portal-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}
@media (max-width: 640px) {
	.lfx-portal-split { grid-template-columns: 1fr; }
}

.lfx-portal-pane { }
.lfx-portal-pane h3 { margin-top: 0; font-size: 1.1rem; }
.lfx-portal-pane-lookup { border-left: 1px solid var(--lfx-border); padding-left: 2rem; }
@media (max-width: 640px) {
	.lfx-portal-pane-lookup { border-left: none; padding-left: 0; border-top: 1px solid var(--lfx-border); padding-top: 1.5rem; }
}

/* Lookup form */
.lfx-lookup-form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.lfx-lookup-form input[type="email"] {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid var(--lfx-border);
	border-radius: 6px;
	font-size: .9rem;
	box-sizing: border-box;
}
.lfx-lookup-form input[type="email"]:focus {
	outline: 2px solid var(--lfx-primary);
	outline-offset: 1px;
}

/* Error / misc */
.lfx-error {
	color: var(--lfx-danger);
	font-size: .875rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: .5rem .75rem;
}
.lfx-form-links { font-size: .85rem; margin-top: .5rem; }
.lfx-form-links a { color: var(--lfx-primary); }
.lfx-portal-empty { text-align: center; padding: 2rem 1rem; color: var(--lfx-muted); }
.lfx-portal-buy-more { font-size: .875rem; text-align: right; }
.lfx-portal-buy-more a { color: var(--lfx-primary); }
.lfx-portal-logout { font-size: .8rem; color: var(--lfx-muted); text-align: right; }
.lfx-portal-logout a { color: var(--lfx-muted); }