/**
 * Simplis Attribute Labels — Styles
 *
 * Covers:
 *  - Info button (circular, 22×22px)
 *  - Hint block (collapsible, muted)
 *  - Label + button horizontal alignment
 *  - Admin panel overrides UI
 *
 * @package Simplis_Attribute_Labels
 * @since   1.0.0
 */

/* =========================================================================
   FRONTEND: Label alignment
   ========================================================================= */

/**
 * Ensure labels and the info button sit side-by-side.
 * WooCommerce default theme places labels in a <td class="label">.
 */
table.variations td.label,
table.variations th.label,
.woocommerce-variation-add-to-cart td.label,
.woocommerce table.variations td:first-child {
	vertical-align: middle;
}

table.variations td.label label,
table.variations th.label label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}

/* =========================================================================
   FRONTEND: Info button
   ========================================================================= */

.simplis-al-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	/* Geometry */
	width: 22px;
	height: 22px;
	padding: 0;
	border-radius: 50%;

	/* Appearance */
	background-color: transparent;
	border: 1.5px solid currentColor;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	font-style: normal;
	font-family: Georgia, 'Times New Roman', serif; /* Italicised "i" looks more information-like */

	/* Transitions */
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;

	/* Accessibility: visible focus ring */
	outline: none;
}

.simplis-al-info-btn:hover,
.simplis-al-info-btn:focus-visible {
	opacity: 1;
	background-color: currentColor;
}

.simplis-al-info-btn:hover span,
.simplis-al-info-btn:focus-visible span {
	/* Invert the "i" colour when button background is filled */
	mix-blend-mode: difference;
	color: #fff;
}

.simplis-al-info-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.simplis-al-info-btn--active {
	opacity: 1;
	background-color: currentColor;
}

.simplis-al-info-btn--active span {
	mix-blend-mode: difference;
	color: #fff;
}

/* =========================================================================
   FRONTEND: Hint block
   ========================================================================= */

.simplis-al-hint {
	display: block;
	overflow: hidden;

	/* When shown, rendered below the select */
	margin-top: 6px;
	margin-bottom: 10px;
}

.simplis-al-hint[hidden] {
	display: none !important;
}

.simplis-al-hint-inner {
	font-size: 13px;
	line-height: 1.55;
	color: #666;
	background-color: #f9f9f9;
	border-left: 3px solid #d0d0d0;
	padding: 8px 12px;
	border-radius: 0 3px 3px 0;
}

/* Light emphasis within hint copy */
.simplis-al-hint-inner strong {
	font-weight: 600;
	color: #444;
}

.simplis-al-hint-inner a {
	color: inherit;
	text-decoration: underline;
}

/* Neutral pre-selection prompt */
.simplis-al-hint-prompt {
	color: #aaa;
	font-style: italic;
}

/* Optional open/closed transition — graceful enhancement */
.simplis-al-hint {
	animation: simplis-hint-in 0.18s ease;
}

@keyframes simplis-hint-in {
	from {
		opacity: 0;
		transform: translateY( -4px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* =========================================================================
   ADMIN: Product data panel
   ========================================================================= */

#simplis_attribute_labels_panel.panel {
	padding: 0;
}

/* Intro bar with link to global defaults */
.simplis-al-intro-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px 12px;
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
}

.simplis-al-intro {
	margin: 0;
	font-size: 13px;
	color: #50575e;
	line-height: 1.5;
	flex: 1;
}

.simplis-al-global-link {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	color: #2271b1;
	padding: 4px 0;
}

.simplis-al-global-link:hover {
	text-decoration: underline;
}

/* ---- Attribute group ---- */

.simplis-al-attribute-group {
	border-bottom: 2px solid #dcdcde;
	margin: 0;
}

.simplis-al-attribute-group:last-child {
	border-bottom: none;
}

.simplis-al-attr-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: #f0f0f1;
	border-bottom: 1px solid #dcdcde;
	margin: 0;
}

.simplis-al-attr-name {
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.simplis-al-attr-slug {
	font-size: 11px;
	font-weight: 400;
	color: #787c82;
	background: none;
	padding: 0;
}

/* ---- Column headers ---- */

.simplis-al-col-headers {
	display: grid;
	grid-template-columns: 140px 1fr 200px 110px 80px;
	gap: 0;
	padding: 6px 18px;
	background: #fafafa;
	border-bottom: 1px solid #e2e4e7;
}

.simplis-al-col-header {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #787c82;
	padding: 2px 8px 2px 0;
}

.simplis-al-col-note {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #a7aaad;
	font-size: 10px;
}

/* ---- Term rows ---- */

.simplis-al-term-row {
	display: grid;
	grid-template-columns: 140px 1fr 200px 110px 80px;
	gap: 0;
	align-items: start;
	padding: 10px 18px;
	border-bottom: 1px solid #f0f0f1;
	transition: background 0.1s ease;
}

.simplis-al-term-row:last-child {
	border-bottom: none;
}

.simplis-al-term-row:hover {
	background: #fafafa;
}

.simplis-al-term-row.simplis-al-has-override {
	background: #fff8f0;
}

.simplis-al-term-row.simplis-al-has-override:hover {
	background: #fef4e8;
}

/* ---- Columns ---- */

.simplis-al-col {
	padding: 4px 10px 4px 0;
}

.simplis-al-col--term {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 6px;
}

.simplis-al-term-name {
	font-size: 13px;
	color: #1d2327;
	font-weight: 600;
	line-height: 1.3;
}

.simplis-al-term-slug {
	font-size: 11px;
	color: #a7aaad;
	font-family: monospace;
}

.simplis-al-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 6px;
	border-radius: 10px;
	background: #f0860a;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.6;
	width: fit-content;
}

/* Global default preview (shown when field is blank) */
.simplis-al-global-preview {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 5px;
}

.simplis-al-global-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2271b1;
	background: #e8f0fb;
	border-radius: 3px;
	padding: 1px 5px;
	flex-shrink: 0;
}

.simplis-al-global-val {
	font-size: 12px;
	color: #787c82;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

/* Textarea */
.simplis-al-override-text {
	width: 100%;
	font-size: 12px;
	line-height: 1.5;
	resize: vertical;
	border-color: #dcdcde;
	box-shadow: none;
}

.simplis-al-override-text:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: none;
}

/* Label input */
.simplis-al-label-input {
	width: 100%;
	font-size: 12px;
}

/* Checkbox col */
.simplis-al-col--open {
	display: flex;
	align-items: flex-start;
	padding-top: 8px;
}

.simplis-al-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
}

.simplis-al-inherited-note {
	font-size: 11px;
	color: #a7aaad;
	font-style: italic;
}

/* Actions col */
.simplis-al-col--actions {
	display: flex;
	align-items: flex-start;
	padding-top: 6px;
}

.simplis-al-clear-override {
	font-size: 11px !important;
	padding: 2px 8px !important;
	height: auto !important;
	line-height: 1.6 !important;
	color: #b32d2e !important;
	border-color: #b32d2e !important;
	background: transparent !important;
	white-space: nowrap;
}

.simplis-al-clear-override:hover {
	background: #b32d2e !important;
	color: #fff !important;
}

/* =========================================================================
   ADMIN: Term edit screens (pa_* taxonomies)
   ========================================================================= */

/* No specific extra styles needed — WP core form-field styles handle it.
   Adding a small bottom margin for the textarea to breathe. */

#simplis_default_help_text {
	margin-top: 4px;
}