.cf-license-dashboard,
.cf-license-catalog,
.cf-license-product,
.cf-license-product-list,
.cf-license-price--standalone,
.cf-license-buy-button,
.cf-license-access,
.cf-license-checkout,
.cf-license-checkout-empty {
	--cf-license-border: color-mix(in srgb, currentColor 18%, transparent);
	--cf-license-muted: color-mix(in srgb, currentColor 68%, transparent);
	--cf-license-soft: color-mix(in srgb, currentColor 5%, transparent);
	--cf-license-accent: #135e96;
	color: inherit;
	font-size: 1rem;
	line-height: 1.55;
}

.cf-license-dashboard *,
.cf-license-catalog *,
.cf-license-product *,
.cf-license-product-list *,
.cf-license-access *,
.cf-license-checkout *,
.cf-license-checkout-empty * { box-sizing: border-box; }

.cf-license-eyebrow {
	margin: 0 0 .35rem;
	color: var(--cf-license-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-license-access {
	max-width: 680px;
	margin-inline: auto;
	padding-block: clamp(2rem, 6vw, 5rem);
}

.cf-license-access h2,
.cf-license-dashboard h2,
.cf-license-catalog h2,
.cf-license-checkout h2,
.cf-license-checkout-empty h2 { margin: 0; }

.cf-license-access > p:not(.cf-license-eyebrow, .cf-license-access-login) {
	max-width: 58ch;
	color: var(--cf-license-muted);
}

.cf-license-access-form {
	margin-top: 2rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--cf-license-border);
}

.cf-license-access-form label { display: block; margin-bottom: .5rem; font-weight: 650; }
.cf-license-access-form > div { display: flex; gap: .6rem; }
.cf-license-access-form input {
	min-width: 0;
	flex: 1;
	min-height: 46px;
	padding: .65rem .8rem;
	border: 1px solid var(--cf-license-border);
	border-radius: 4px;
	background: Canvas;
	color: CanvasText;
}

.cf-license-access-form button,
.cf-license-button {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	padding: .65rem 1rem;
	border: 1px solid var(--cf-license-accent);
	border-radius: 4px;
	background: var(--cf-license-accent);
	color: #fff;
	font: inherit;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.cf-license-access-form button:hover,
.cf-license-button:hover { background: #0a4b78; color: #fff; }
.cf-license-access-form input:focus,
.cf-license-button:focus-visible,
.cf-license-text-button:focus-visible { outline: 2px solid var(--cf-license-accent); outline-offset: 2px; }
.cf-license-access-login { margin-top: 1rem; color: var(--cf-license-muted); }
.cf-license-notice { margin-top: 1.25rem; padding: .8rem 1rem; border: 1px solid #68a36f; background: #f0f6f1; color: #1e4620; }
.cf-license-notice--error { border-color: #d63638; background: #fcf0f1; color: #8a2424; }

.cf-license-dashboard { display: grid; gap: 3rem; }
.cf-license-dashboard-header,
.cf-license-item-header,
.cf-license-product > header,
.cf-license-orders > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.cf-license-dashboard-header > div > p:last-child,
.cf-license-item-header p { margin: .3rem 0 0; color: var(--cf-license-muted); }
.cf-license-count { white-space: nowrap; color: var(--cf-license-muted); }
.cf-license-dashboard-section { min-width: 0; }
.cf-license-item { padding: 1.5rem 0; border-top: 1px solid var(--cf-license-border); }
.cf-license-item:last-child { border-bottom: 1px solid var(--cf-license-border); }
.cf-license-item h3,
.cf-license-item h4 { margin: 0; }

.cf-license-status {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	border: 1px solid var(--cf-license-border);
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 650;
}
.cf-license-status--active { border-color: #68a36f; color: #27622d; background: #f0f6f1; }
.cf-license-status--disabled,
.cf-license-status--expired { border-color: #dba617; color: #6b4d00; background: #fcf7e8; }

.cf-license-key-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	padding: .8rem 1rem;
	background: var(--cf-license-soft);
}
.cf-license-key-row > div:first-child { min-width: 0; }
.cf-license-key-row span { display: block; margin-bottom: .2rem; color: var(--cf-license-muted); font-size: .8rem; }
.cf-license-key-row code { overflow-wrap: anywhere; font-size: .84rem; }
.cf-license-key-row > div:last-child { display: flex; gap: .75rem; }
.cf-license-text-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cf-license-accent);
	font: inherit;
	font-size: .9rem;
	font-weight: 650;
	cursor: pointer;
}

.cf-license-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0;
}
.cf-license-meta div { min-width: 0; }
.cf-license-meta dt { color: var(--cf-license-muted); font-size: .8rem; }
.cf-license-meta dd { margin: .2rem 0 0; font-weight: 650; }
.cf-license-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.cf-license-actions form { margin: 0; }
.cf-license-button--secondary { background: transparent; color: var(--cf-license-accent); }
.cf-license-button--secondary:hover { background: color-mix(in srgb, var(--cf-license-accent) 8%, transparent); color: var(--cf-license-accent); }
.cf-license-button--text { min-height: auto; padding: .4rem; border-color: transparent; background: transparent; color: var(--cf-license-muted); }
.cf-license-button--text:hover { background: transparent; color: currentColor; text-decoration: underline; }
.cf-license-subscription-note { margin: .8rem 0 0; color: var(--cf-license-muted); font-size: .88rem; }

.cf-license-sites { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cf-license-border); }
.cf-license-sites ul { margin: .6rem 0 0; padding: 0; list-style: none; }
.cf-license-sites li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.cf-license-sites li + li { border-top: 1px solid var(--cf-license-border); }
.cf-license-sites li div { min-width: 0; }
.cf-license-sites li strong { display: block; overflow-wrap: anywhere; }
.cf-license-sites li span { color: var(--cf-license-muted); font-size: .82rem; }

.cf-license-orders { padding-top: 1rem; }
.cf-license-order-table { overflow-x: auto; }
.cf-license-order-table table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.cf-license-order-table th,
.cf-license-order-table td { padding: .8rem .5rem; border-bottom: 1px solid var(--cf-license-border); text-align: left; }
.cf-license-order-table th { color: var(--cf-license-muted); font-size: .8rem; font-weight: 650; }
.cf-license-empty-state { padding: 1.5rem 0; color: var(--cf-license-muted); }
.cf-license-empty-state h3 { margin: 0; color: inherit; }
.cf-license-empty-state p { margin: .3rem 0 0; }

.cf-license-catalog { display: grid; gap: 3rem; }
.cf-license-catalog--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.cf-license-catalog--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cf-license-catalog--columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cf-license-catalog:not(.cf-license-catalog--columns-1) .cf-license-product > header { flex-wrap: wrap; }
.cf-license-catalog:not(.cf-license-catalog--columns-1) .cf-license-plan { grid-template-columns: 1fr auto; }
.cf-license-catalog:not(.cf-license-catalog--columns-1) .cf-license-plan .cf-license-button { grid-column: 1 / -1; }
.cf-license-product { padding-top: 1.5rem; border-top: 1px solid var(--cf-license-border); }
.cf-license-product-heading { display: flex; min-width: 0; align-items: center; gap: .85rem; }
.cf-license-product-heading > div { min-width: 0; }
.cf-license-product-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--cf-license-border);
	border-radius: 9px;
	background: Canvas;
}
.cf-license-product-icon--fallback { background: var(--cf-license-soft); color: var(--cf-license-muted); }
.cf-license-product-icon--fallback .dashicons { width: 24px; height: 24px; font-size: 24px; }
.cf-license-product-icon__image { width: 100%; height: 100%; object-fit: cover; }
.cf-license-product > header > span { color: var(--cf-license-muted); font-size: .86rem; white-space: nowrap; }
.cf-license-product-description { max-width: 68ch; color: var(--cf-license-muted); }
.cf-license-product-description > :first-child { margin-top: .75rem; }
.cf-license-plans { margin-top: 1rem; }
.cf-license-plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto);
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--cf-license-border);
}
.cf-license-plan h3 { margin: 0; font-size: 1rem; }
.cf-license-plan p { margin: .2rem 0 0; color: var(--cf-license-muted); font-size: .86rem; }
.cf-license-price { white-space: nowrap; font-size: 1.05rem; }
.cf-license-unavailable { color: var(--cf-license-muted); font-size: .84rem; text-align: right; }

.cf-license-product-list { margin: 0; padding: 0; border-top: 1px solid var(--cf-license-border); list-style: none; }
.cf-license-product-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--cf-license-border); }
.cf-license-product-list li > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.cf-license-product-list li small { color: var(--cf-license-muted); }
.cf-license-product-list__price { white-space: nowrap; font-weight: 650; }
.cf-license-product-list .cf-license-button { min-height: 36px; padding: .45rem .75rem; }
.cf-license-price--standalone { font-weight: 700; }
.cf-license-block-placeholder { padding: 1.25rem 0; border-block: 1px solid var(--cf-license-border, #dcdcde); }
.cf-license-block-placeholder p { margin: .35rem 0 0; color: var(--cf-license-muted, #646970); }

.cf-license-checkout,
.cf-license-checkout-empty {
	max-width: 920px;
	margin-inline: auto;
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.cf-license-checkout-empty { max-width: 620px; }
.cf-license-checkout-empty p:not(.cf-license-eyebrow) { color: var(--cf-license-muted); }

.cf-license-checkout__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--cf-license-border);
}

.cf-license-checkout__header p:last-child { margin: .2rem 0 0; color: var(--cf-license-muted); }
.cf-license-product-icon--large { width: 58px; height: 58px; flex-basis: 58px; }

.cf-license-checkout__layout {
	display: grid;
	grid-template-columns: minmax(230px, .75fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-top: 1.5rem;
}

.cf-license-checkout__summary h3,
.cf-license-checkout__details legend,
.cf-license-checkout__unavailable h3 { margin: 0 0 1rem; font-size: 1rem; }
.cf-license-checkout__summary dl { margin: 0; }
.cf-license-checkout__summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--cf-license-border); }
.cf-license-checkout__summary dt { color: var(--cf-license-muted); }
.cf-license-checkout__summary dd { margin: 0; text-align: right; font-weight: 650; }
.cf-license-checkout__summary .cf-license-checkout__total { padding-top: 1rem; border-bottom: 0; font-size: 1.08rem; }

.cf-license-checkout__form fieldset { min-width: 0; margin: 0 0 1.4rem; padding: 0; border: 0; }
.cf-license-checkout__form p { margin: 0 0 1rem; }
.cf-license-checkout__form label:not(.cf-license-checkout__terms, .cf-license-checkout__gateways label) { display: block; font-weight: 650; }
.cf-license-checkout__form input[type="text"],
.cf-license-checkout__form input[type="email"] {
	width: 100%;
	min-height: 46px;
	margin-top: .35rem;
	padding: .65rem .8rem;
	border: 1px solid var(--cf-license-border);
	border-radius: 4px;
	background: Canvas;
	color: CanvasText;
	font: inherit;
}
.cf-license-checkout__form input:focus-visible { outline: 2px solid var(--cf-license-accent); outline-offset: 2px; }
.cf-license-checkout__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.cf-license-checkout__gateways { display: grid; gap: .6rem; }
.cf-license-checkout__gateways label {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8rem;
	border: 1px solid var(--cf-license-border);
	border-radius: 6px;
	cursor: pointer;
}
.cf-license-checkout__gateways label:has(input:checked) { border-color: var(--cf-license-accent); background: color-mix(in srgb, var(--cf-license-accent) 5%, transparent); }
.cf-license-checkout__gateways span { display: flex; flex-direction: column; }
.cf-license-checkout__gateways small { color: var(--cf-license-muted); font-weight: 400; }
.cf-license-checkout__terms { display: flex; align-items: flex-start; gap: .55rem; margin: 1.2rem 0; }
.cf-license-checkout__terms input { margin-top: .25rem; }
.cf-license-checkout__submit {
	width: 100%;
	min-height: 48px;
	padding: .7rem 1rem;
	border: 1px solid var(--cf-license-accent);
	border-radius: 4px;
	background: var(--cf-license-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.cf-license-checkout__submit:hover { background: #0a4b78; }
.cf-license-checkout__submit:focus-visible { outline: 2px solid var(--cf-license-accent); outline-offset: 2px; }
.cf-license-checkout__security { display: flex; justify-content: center; gap: .35rem; margin: .8rem 0 0; color: var(--cf-license-muted); font-size: .78rem; text-align: center; }
.cf-license-checkout__security .dashicons { width: 16px; height: 16px; font-size: 16px; }
.cf-license-checkout__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cf-license-checkout__unavailable { padding-block: 1rem; }
.cf-license-checkout__unavailable p { color: var(--cf-license-muted); }

@media (max-width: 700px) {
	.cf-license-catalog--columns-2,
	.cf-license-catalog--columns-3,
	.cf-license-catalog--columns-4 { grid-template-columns: 1fr; }
	.cf-license-access-form > div { align-items: stretch; flex-direction: column; }
	.cf-license-dashboard-header,
	.cf-license-item-header { align-items: flex-start; }
	.cf-license-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cf-license-key-row { align-items: flex-start; flex-direction: column; }
	.cf-license-plan { grid-template-columns: 1fr auto; }
	.cf-license-plan .cf-license-button,
	.cf-license-plan .cf-license-unavailable { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
	.cf-license-order-table thead { display: none; }
	.cf-license-order-table tr { display: block; padding: .65rem 0; border-bottom: 1px solid var(--cf-license-border); }
	.cf-license-order-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
	.cf-license-order-table td::before { content: attr(data-label); color: var(--cf-license-muted); text-align: left; }
	.cf-license-checkout__layout { grid-template-columns: 1fr; gap: 2rem; }
	.cf-license-product-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
	.cf-license-product-list__price { grid-column: 2; }
	.cf-license-product-list .cf-license-button { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 430px) {
	.cf-license-dashboard-header { flex-direction: column; }
	.cf-license-meta { grid-template-columns: 1fr; }
	.cf-license-actions,
	.cf-license-actions form,
	.cf-license-actions .cf-license-button { width: 100%; }
	.cf-license-sites li { align-items: flex-start; }
	.cf-license-checkout__names { grid-template-columns: 1fr; gap: 0; }
}
