/**
 * Front-end styles for the [license_manager_my_licenses] shortcode.
 *
 * Every interactive selector below is qualified with the `button`/`input`
 * element type (e.g. `button.license-manager-my-licenses__renew-button`),
 * not just the class alone. The active theme's own stylesheet carries a
 * broad `[type="submit"]` rule at the same specificity as a bare class
 * selector, and loads after this file — on a tie, cascade order wins, so
 * a bare class selector here silently lost to the theme's generic button
 * styling and every button rendered identically. Element+class beats the
 * theme's attribute selector outright, with no !important needed.
 *
 * @package LicenseManager
 */

.license-manager-my-licenses {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.license-manager-my-licenses__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	border: 1px solid #ddd;
	border-radius: 4px;
	flex-wrap: wrap;
}

.license-manager-my-licenses__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.license-manager-my-licenses__product {
	font-size: 1.1rem;
}

.license-manager-my-licenses__status {
	display: inline-block;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.license-manager-my-licenses__status--active {
	color: #1a7e3c;
}

.license-manager-my-licenses__status--expired,
.license-manager-my-licenses__status--inactive {
	color: #a94442;
}

.license-manager-my-licenses__expiration {
	font-size: 0.9rem;
	color: #555;
}

.license-manager-my-licenses__key-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.license-manager-my-licenses__key {
	padding: 2px 6px;
	background-color: #f2f5f7;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.85rem;
	color: #3a4f66;
	user-select: all;
}

button.license-manager-my-licenses__copy-button {
	padding: 2px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: transparent;
	color: #555;
	font-size: 0.8rem;
	cursor: pointer;
}

button.license-manager-my-licenses__copy-button:hover,
button.license-manager-my-licenses__copy-button:focus {
	background-color: #f2f5f7;
	border-color: #999;
}

button.license-manager-my-licenses__copy-button:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

button.license-manager-my-licenses__copy-button:disabled {
	color: #1a7e3c;
	border-color: #1a7e3c;
	cursor: default;
}

/*
 * Renew is this card's one primary action — the only solid, filled
 * button here, and the only one worth a customer's immediate attention.
 * Top-aligned via the row's own align-items: flex-start, so it sits next
 * to the product title instead of floating centered against however
 * tall the site list underneath happens to be.
 */
.license-manager-my-licenses__renew-form {
	margin: 0;
}

button.license-manager-my-licenses__renew-button {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	background-color: var(--license-manager-renew-button-color, #216cff);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

button.license-manager-my-licenses__renew-button:hover,
button.license-manager-my-licenses__renew-button:focus {
	background-color: var(--license-manager-renew-button-hover-color, #1a56cc);
}

button.license-manager-my-licenses__renew-button:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

.license-manager-my-licenses__empty,
.license-manager-my-licenses__login-prompt {
	font-size: 1rem;
}

.license-manager-my-licenses__domain {
	font-size: 0.9rem;
	color: #555;
}

.license-manager-my-licenses__sites {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}

.license-manager-my-licenses__sites-count {
	font-size: 0.85rem;
	color: #555;
}

.license-manager-my-licenses__site-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

/*
 * Remove is a rare, mildly destructive action — kept deliberately quiet
 * (outlined, not filled) so it never competes with Renew for attention.
 */
.license-manager-my-licenses__remove-domain-form {
	margin: 0;
}

button.license-manager-my-licenses__remove-domain-button {
	padding: 2px 8px;
	border: 1px solid #a94442;
	border-radius: 4px;
	background-color: transparent;
	color: #a94442;
	font-size: 0.8rem;
	cursor: pointer;
}

button.license-manager-my-licenses__remove-domain-button:hover,
button.license-manager-my-licenses__remove-domain-button:focus {
	background-color: #a94442;
	color: #fff;
}

button.license-manager-my-licenses__remove-domain-button:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/*
 * Add site is a secondary action — a deliberate, occasional click, so it
 * stays a real (outlined) button, but one visual step below Renew.
 */
.license-manager-my-licenses__add-domain-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
}

input.license-manager-my-licenses__add-domain-input {
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 0.85rem;
	min-width: 180px;
}

button.license-manager-my-licenses__add-domain-button {
	padding: 4px 10px;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background-color: transparent;
	color: #2271b1;
	font-size: 0.8rem;
	cursor: pointer;
}

button.license-manager-my-licenses__add-domain-button:hover,
button.license-manager-my-licenses__add-domain-button:focus {
	background-color: #2271b1;
	color: #fff;
}

button.license-manager-my-licenses__add-domain-button:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}