/* ProdTabs admin. WordPress admin styles first: grays of the admin, accent of the user's color scheme
   (--wp-admin-theme-color), logical properties for right-to-left languages. */

/* Product data box: icon of the panel entry. */
#woocommerce-product-data ul.wc-tabs li.prodtabs_options a::before {
	content: "\f163";
	font-family: dashicons;
}

/* Product panel ---------------------------------------------------------------------------------------------- */

.prodtabs-panel {
	padding: 12px;
}

.prodtabs-panel .prodtabs-intro,
.prodtabs-panel .prodtabs-empty {
	margin: 0 0 12px;
	color: #50575e;
}

.prodtabs-list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.prodtabs-item {
	margin: 0 0 8px;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	background: #fff;
}

.prodtabs-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 8px 10px;
	min-height: 36px;
}

.prodtabs-item--native .prodtabs-item__head {
	background: #f6f7f7;
}

.prodtabs-item__handle {
	flex: none;
	color: #8c8f94;
	cursor: move;
}

.prodtabs-item__label {
	display: flex;
	flex: 1 1 220px;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.prodtabs-item__title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.prodtabs-item.is-hidden .prodtabs-item__title {
	color: #646970;
	text-decoration: line-through;
}

.prodtabs-item__note {
	color: #b32d2e;
	font-size: 12px;
}

.prodtabs-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 11px;
	line-height: 18px;
	white-space: nowrap;
	background: #f0f0f1;
	color: #2c3338;
}

.prodtabs-badge--local {
	background: var(--wp-admin-theme-color, #2271b1);
	color: #fff;
}

.prodtabs-badge--library {
	background: #fff;
	color: var(--wp-admin-theme-color, #2271b1);
	box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
}

.prodtabs-item__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin-inline-start: auto;
}

.prodtabs-panel .prodtabs-visible {
	display: inline-flex;
	float: none;
	align-items: center;
	gap: 4px;
	width: auto;
	margin: 0;
	margin-inline-end: 6px;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
}

.prodtabs-panel .prodtabs-visible input[type="checkbox"] {
	float: none;
	margin: 0;
}

.prodtabs-item__tools .button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	padding: 0 4px;
	border-radius: 2px;
	text-decoration: none;
}

.prodtabs-item__tools .button-link:disabled {
	color: #a7aaad;
	cursor: default;
}

.prodtabs-item__tools .prodtabs-remove {
	color: #b32d2e;
}

/* Edit and Details take the same room, so that the columns line up from one row to the next. */
.prodtabs-item__tools .prodtabs-toggle {
	min-width: 84px;
	font-size: 13px;
}

/* Same width as the Remove button, so that the columns line up on WooCommerce rows. */
.prodtabs-item__spacer {
	display: inline-flex;
	gap: 2px 8px;
	visibility: hidden;
}

.prodtabs-item__spacer .button-link {
	box-sizing: border-box;
}

.prodtabs-item__tools .button-link:focus {
	box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
	outline: 2px solid transparent;
}

.prodtabs-item__body {
	padding: 4px 12px 12px;
	border-top: 1px solid #dcdcde;
}

.prodtabs-panel .prodtabs-field {
	margin: 12px 0;
	padding: 0;
}

.prodtabs-panel .prodtabs-field label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 4px;
	font-weight: 600;
}

.prodtabs-panel .prodtabs-field input[type="text"] {
	float: none;
	width: 100%;
	max-width: 640px;
}

.prodtabs-panel .prodtabs-field--editor .wp-editor-wrap {
	max-width: 100%;
}

.prodtabs-panel .prodtabs-field--editor textarea {
	float: none;
	width: 100%;
}

.prodtabs-panel .prodtabs-anchor {
	margin: 8px 0 0;
	padding: 0;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
}

/* WooCommerce gives a display to the paragraphs of its panels, which would show elements marked hidden. */
.prodtabs-panel [hidden] {
	display: none !important;
}

/* Messages of the panel: WordPress moves or hides .notice boxes, so the panel has its own. */
.prodtabs-message {
	margin: 12px 0;
	padding: 1px 12px;
	border: 1px solid #c3c4c7;
	border-inline-start: 4px solid #72aee6;
	background: #fff;
}

.prodtabs-message--warning {
	border-inline-start-color: #dba617;
}

.prodtabs-panel .prodtabs-message p {
	margin: 0.5em 0;
	padding: 2px 0;
}

.prodtabs-reference {
	margin: 8px 0 0;
}

.prodtabs-reference summary {
	cursor: pointer;
	color: var(--wp-admin-theme-color, #2271b1);
}

.prodtabs-panel.is-locked .prodtabs-visible {
	color: #646970;
}

.prodtabs-origin .button-link {
	margin-inline-start: 4px;
}

.prodtabs-preview {
	max-height: 260px;
	margin: 12px 0;
	padding: 8px 12px;
	overflow: auto;
	border: 1px solid #dcdcde;
	background: #f6f7f7;
}

.prodtabs-preview:focus {
	box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
	outline: 2px solid transparent;
}

.prodtabs-preview img {
	max-width: 100%;
	height: auto;
}

/* The panels of the Product data box pad their paragraphs for their labels: not in the preview. */
.prodtabs-panel .prodtabs-preview p {
	margin: 0 0 8px;
	padding: 0;
}

.prodtabs-preview ul,
.prodtabs-preview ol {
	margin: 0 0 8px;
	padding-inline-start: 1.5em;
}

.prodtabs-preview ul {
	list-style: disc;
}

.prodtabs-preview ol {
	list-style: decimal;
}

/* Attributes, weight and dimensions shown by the WooCommerce tab Additional information. */
.prodtabs-native-table {
	border-collapse: collapse;
}

.prodtabs-native-table th,
.prodtabs-native-table td {
	padding: 2px 0;
	text-align: start;
	vertical-align: top;
}

.prodtabs-native-table th {
	padding-inline-end: 16px;
	font-weight: 600;
}

.prodtabs-panel .prodtabs-library-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 8px;
	padding: 0;
}

.prodtabs-panel .description {
	margin: 0;
	padding: 0;
}

.prodtabs-placeholder {
	height: 40px;
	border: 1px dashed var(--wp-admin-theme-color, #2271b1);
	background: #f0f6fc;
}

.prodtabs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.prodtabs-actions .button .dashicons {
	margin-top: 4px;
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.prodtabs-add-library .select2-container {
	min-width: 260px;
}

.prodtabs-actions .prodtabs-library-select {
	min-width: 260px;
}

@media screen and (max-width: 782px) {
	.prodtabs-item__tools {
		width: 100%;
		margin-inline-start: 0;
	}

	.prodtabs-item__tools .button-link {
		min-width: 40px;
		min-height: 40px;
	}
}

/* Settings: WooCommerce tabs table --------------------------------------------------------------------------- */

.prodtabs-natives {
	max-width: 760px;
}

.prodtabs-natives td,
.prodtabs-natives th {
	vertical-align: middle;
}

/* The settings form styles its own cells (wide headers without left padding): not this table's. */
.form-table .prodtabs-natives th,
.form-table .prodtabs-natives td {
	width: auto;
	padding: 8px 12px;
}

.prodtabs-natives .prodtabs-natives__title input {
	width: 100%;
	max-width: 320px;
}

.prodtabs-natives .prodtabs-natives__move .button-link {
	min-width: 28px;
	min-height: 28px;
}

.prodtabs-natives .prodtabs-natives__move .button-link:disabled {
	color: #a7aaad;
}

/* Our screens: header, welcome and status boxes ------------------------------------------------------------- */

.prodtabs-box {
	position: relative;
	max-width: 960px;
	margin: 16px 0;
	padding: 16px 20px;
	border: 1px solid #c3c4c7;
	border-inline-start: 4px solid var(--wp-admin-theme-color, #2271b1);
	background: #fff;
}

.prodtabs-box h2 {
	margin: 0 0 8px;
}

.prodtabs-box .prodtabs-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.prodtabs-box .notice-dismiss {
	top: 4px;
}

.prodtabs-status {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prodtabs-status li {
	margin: 0 0 6px;
}

.prodtabs-status .dashicons-yes-alt {
	color: #008a20;
}

.prodtabs-status .dashicons-warning {
	color: #996800;
}

/* Library list ----------------------------------------------------------------------------------------------- */

.post-type-prodtabs_tab .column-prodtabs_uses {
	width: 12em;
}

.post-type-prodtabs_tab .column-prodtabs_excerpt {
	width: 35%;
	color: #50575e;
}

/* Import ----------------------------------------------------------------------------------------------------- */

.prodtabs-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 16px 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: prodtabs-step;
}

.prodtabs-steps li {
	margin: 0;
	color: #646970;
	counter-increment: prodtabs-step;
}

.prodtabs-steps li::before {
	content: counter(prodtabs-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-inline-end: 6px;
	border-radius: 50%;
	background: #dcdcde;
	color: #1d2327;
	font-size: 12px;
}

.prodtabs-steps li.is-current {
	color: #1d2327;
	font-weight: 600;
}

.prodtabs-steps li.is-current::before {
	background: var(--wp-admin-theme-color, #2271b1);
	color: #fff;
}

.prodtabs-preview-tabs {
	margin: 0;
	padding-inline-start: 1.4em;
}

.prodtabs-preview-tabs li {
	margin: 0 0 2px;
}

.prodtabs-import .prodtabs-progress {
	max-width: 520px;
	height: 12px;
	margin: 12px 0;
	overflow: hidden;
	border-radius: 6px;
	background: #dcdcde;
}

.prodtabs-import .prodtabs-progress__bar {
	width: 0;
	height: 100%;
	background: var(--wp-admin-theme-color, #2271b1);
	transition: width 0.2s ease-out;
}

.prodtabs-import table.widefat td,
.prodtabs-import table.widefat th {
	vertical-align: top;
}

.prodtabs-import .prodtabs-warning {
	color: #996800;
}

@media (prefers-reduced-motion: reduce) {
	.prodtabs-import .prodtabs-progress__bar {
		transition: none;
	}
}

/* Overview of ProdTabs */
.prodtabs-hub { max-width: 1180px; color: #1d2327; }
.prodtabs-hub h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.prodtabs-hub__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 20px; }
.prodtabs-hub__brand { display: flex; align-items: center; gap: 16px; }
.prodtabs-hub__brand img { display: block; width: 56px; height: 56px; }
.prodtabs-hub__brand h1 { margin: 0; padding: 0; font-size: 26px; font-weight: 600; color: #073857; line-height: 1.2; }
.prodtabs-hub__version { font-size: 12px; font-weight: 400; color: #50575e; background: #fff; border: 1px solid #dcdcde; border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.prodtabs-hub__lead { margin: 2px 0 0; color: #50575e; font-size: 14px; }
.prodtabs-hub__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prodtabs-hub .button-hero { font-size: 14px; min-height: 40px; line-height: 2.6; padding: 0 16px; }
.prodtabs-hub__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.prodtabs-hub__stats li { margin: 0; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 14px 18px; }
.prodtabs-hub__stats strong { display: block; font-size: 28px; font-weight: 600; color: #073857; line-height: 1.15; }
.prodtabs-hub__stats span { color: #50575e; }
.prodtabs-hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 16px; }
.prodtabs-hub__card { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; }
.prodtabs-hub__card h2 { display: flex; align-items: center; gap: 10px; }
.prodtabs-hub__card p { margin: 0 0 12px; color: #50575e; }
.prodtabs-hub__icon { width: 36px; height: 36px; border-radius: 8px; background: #f2f7fa; color: #0281cc; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.prodtabs-hub__card-actions { margin-top: auto !important; margin-bottom: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prodtabs-hub__card .button { max-width: 100%; height: auto; min-height: 30px; white-space: normal; text-align: center; line-height: 1.4; padding-top: 4px; padding-bottom: 4px; }
.prodtabs-hub__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.prodtabs-hub__chips li { margin: 0; background: #f0f0f1; border-radius: 12px; padding: 2px 10px; font-size: 13px; }
.prodtabs-hub__chips li.is-hidden { color: #646970; text-decoration: line-through; }
.prodtabs-hub__chips--ok li { background: #edfaef; border: 1px solid #b8e6bf; color: #00450c; }
.prodtabs-hub__chips--ok li.is-warning { background: #fcf9e8; border-color: #f0c33c; color: #614200; }
.prodtabs-hub__chip-count { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #f0c33c; color: #1d2327; font-weight: 600; }
.prodtabs-hub__premium { background: #073857; color: #fff; border-radius: 10px; padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin: 0 0 16px; }
.prodtabs-hub__premium h2 { color: #fff; font-size: 19px; margin-bottom: 12px; }
.prodtabs-hub__premium-text { flex: 1 1 520px; }
.prodtabs-hub__premium ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.prodtabs-hub__premium li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.prodtabs-hub__premium li svg { flex: none; color: #7cc4f2; margin-top: 1px; }
.prodtabs-hub__premium-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #cfe3f1; }
.prodtabs-hub__premium .button-hero { background: #fff; color: #073857; border-color: #fff; font-weight: 600; }
.prodtabs-hub__premium .button-hero:hover, .prodtabs-hub__premium .button-hero:focus { background: #f0f6fc; color: #073857; border-color: #f0f6fc; }
.prodtabs-hub__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.prodtabs-hub__checks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.prodtabs-hub__checks svg { flex: none; color: #008a20; margin-top: 1px; }
.prodtabs-hub__translate { margin: 14px 0 0 !important; padding: 10px 14px; background: #f0f6fc; border-left: 4px solid #2271b1; color: #1d2327 !important; }
.prodtabs-hub__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0 !important; padding-top: 12px; border-top: 1px solid #f0f0f1; }
.prodtabs-hub__report { margin-top: 16px; }
.prodtabs-hub__report textarea { display: block; width: 100%; margin: 0 0 12px; font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }
.prodtabs-review { padding: 14px 18px !important; }
.prodtabs-review p { margin: 0 !important; }
.prodtabs-review__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.prodtabs-review__row > p { flex: 1 1 360px; }
.prodtabs-review__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prodtabs-hub__premium-active { margin: 0 0 16px; }
.prodtabs-hub__badge { font-size: 12px; font-weight: 400; color: #00450c; background: #edfaef; border: 1px solid #b8e6bf; border-radius: 10px; padding: 1px 8px; }

/* Shortcode ready to copy: tabs of a product, a shared tab, overview. */
.prodtabs-shortcode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.prodtabs-panel .prodtabs-shortcode label,
.prodtabs-shortcode label { float: none; width: auto; margin: 0; padding: 0; flex-basis: 100%; font-weight: 600; }
.prodtabs-shortcode .prodtabs-shortcode__code { flex: 1 1 16em; max-width: 100%; min-width: 0; font-family: Consolas, Monaco, monospace; font-size: 12px; }
.prodtabs-panel > .prodtabs-shortcode { margin: 12px; }
.prodtabs-hub__more summary { cursor: pointer; color: #2271b1; }
.prodtabs-hub__more summary:hover { color: #135e96; }
.prodtabs-hub__more[open] summary { margin-bottom: 10px; }
.prodtabs-hub__codes { margin: 0 0 12px; }
.prodtabs-hub__codes dt { margin: 8px 0 0; }
.prodtabs-hub__codes dt:first-child { margin-top: 0; }
.prodtabs-hub__codes code { font-size: 12px; overflow-wrap: anywhere; }
.prodtabs-hub__codes dd { margin: 2px 0 0; color: #50575e; }
.woocommerce_options_panel .prodtabs-shortcode input[type="text"].prodtabs-shortcode__code { float: none; width: auto; margin: 0; }