.tacpp-wrapper {
	background-color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
}

.tacpp-admin .screen-heading .tacpp-avatar {
	width: 20px;
	margin-right: 6px;
}

.tacpp-promo-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	background: #F1EBFA;
	border: 1px solid #d9c6f5;
	border-left: 4px solid #8650B0;
	padding: 12px 44px 10px 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.tacpp-promo-banner .tacpp-promo-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tacpp-promo-banner .tacpp-promo-icon .dashicons {
	width: 44px;
	height: 44px;
	font-size: 44px;
	color: #FFB900;
}


.tacpp-promo-banner .tacpp-promo-content {
	flex: 1 1 220px;
	border-right: 1px solid #d9c6f5;
	padding-right: 20px;
}

.tacpp-promo-banner h2 {
	color: #1d2327;
	margin: 0 0 4px;
	font-size: 15px;
}

.tacpp-promo-banner p {
	margin: 0;
	color: #646970;
}

.tacpp-promo-banner .tacpp-promo-features {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tacpp-promo-banner .tacpp-promo-features li {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 180px;
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
}

.tacpp-promo-banner .tacpp-promo-features .dashicons {
	flex-shrink: 0;
	color: #8650B0;
	width: 28px;
	height: 28px;
	font-size: 28px;

}

.tacpp-promo-banner .tacpp-promo-action {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.tacpp-promo-banner .tacpp-promo-action .button-primary {
	background: #673AB7;
	border-color: #673AB7;
	box-shadow: none;
	text-shadow: none;
}

.tacpp-promo-banner .tacpp-promo-action .button-primary:hover,
.tacpp-promo-banner .tacpp-promo-action .button-primary:focus {
	background: #5a2fa3;
	border-color: #5a2fa3;
}

.tacpp-promo-banner .tacpp-promo-trust {
	font-size: 11px;
	color: #8c8f94;
}

.tacpp-promo-banner .tacpp-promo-dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #646970;
}

.tacpp-promo-banner .tacpp-promo-dismiss:hover {
	color: #1d2327;
}

.tacpp-promo-banner .tacpp-promo-dismiss .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

#tacpp-admin-form-wrapper {
	display: flex;
	gap: 20px;
}


/* The form gives way, never the sidebar: without min-width 0 and a fixed
   sidebar basis, flexbox squeezes the sidebar on narrower screens. */
#tacpp-admin-form {
	flex-grow: 1;
	min-width: 0;
}

#tacpp-admin-form-wrapper .tacpp-admin-sidebar {
	flex: 0 0 auto;
	width: 340px;
}

#tacpp-admin-form-wrapper .tacpp-admin-sidebar > div {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0 14px;
	margin-bottom: 12px;
}

#tacpp-admin-form-wrapper .tacpp-admin-sidebar > div img {
	max-width: 100%;
}

#tacpp-admin-form-wrapper .tacpp-admin-sidebar .tacpp-links #thewplogo-sidebar {
	display: block;
	margin-top: 26px;
	max-width: 250px;
}

/**
 * Save panel: the one pinned box in the sidebar.
 *
 * Sticks to the top of the sidebar column while the form scrolls, so Save is
 * always in reach. The sidebar is a stretched flex item as tall as the form,
 * which gives it room to travel. 44px clears the admin bar plus a 12px gap,
 * which ::before paints over so nothing shows through above it.
 */
#tacpp-admin-form-wrapper .tacpp-admin-sidebar > .tacpp-save-panel {
	position: sticky;
	top: 44px;
	z-index: 10;
	padding: 12px 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

#tacpp-admin-form-wrapper .tacpp-admin-sidebar > .tacpp-save-panel::before {
	content: '';
	position: absolute;
	top: -13px;
	left: -1px;
	right: -1px;
	height: 12px;
	background: #f0f0f1;
}

.tacpp-save-panel__status {
	margin: 0 0 8px;
	color: #007017;
	font-weight: 600;
}

.tacpp-save-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
}

.tacpp-save-panel__actions .button-primary {
	background: #673AB7;
	border-color: #673AB7;
}

.tacpp-save-panel__actions .button-primary:hover,
.tacpp-save-panel__actions .button-primary:focus {
	background: #5a2fa3;
	border-color: #5a2fa3;
}

/* Head box: name on its own line, then a row of version and licence pills,
   then the description. */
.tacpp-head h3 {
	margin-bottom: 8px;
}

.tacpp-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
}

.tacpp-head__version,
.tacpp-head__licence {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}

.tacpp-head__version {
	background: #f0f0f1;
	color: #50575e;
}

.tacpp-head__licence {
	gap: 3px;
	padding-left: 4px;
	background: #F1EBFA;
	color: #673AB7;
	font-weight: 600;
	text-decoration: none;
}

.tacpp-head__licence:hover,
.tacpp-head__licence:focus {
	background: #e4d7f5;
	color: #5a2fa3;
}

.tacpp-head__licence .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.tacpp-head > .description {
	margin: 0 0 14px;
	color: #50575e;
	line-height: 1.5;
}

/**
 * Sidebar Premium box. The list is plain bullets, not ticks: these are things
 * the merchant does not have yet, and a column of checkmarks reads as owned.
 */
.tacpp-pro__list {
	margin: 0 0 12px 18px;
	list-style: disc;
	color: #50575e;
	line-height: 1.5;
}

.tacpp-pro__list li {
	margin-bottom: 4px;
}

.tacpp-pro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.tacpp-priorities ol {
	color: #50575e;
	line-height: 1.5;
}
#tacpp-admin-form .forminp label {
	display: inline-flex;
	flex-direction: row-reverse;
}

#tacpp-admin-form .forminp label .woocommerce-help-tip {
	font-size: 20px;
	line-height: 22px;
	height: auto;
	margin-right: 20px;
}

#tacpp-admin-form th {
	padding-left: 14px;
}

#tacpp-admin-form th, #tacpp-admin-form td {
	padding: 12px 0 0;
}

#tacpp-admin-no-wc p {
	font-size: 14px;
}

.tacpp-admin .screen-heading {
	background-color: #673AB7;
	padding: 10px 20px;
	border-radius: 8px;
	margin-bottom: 20px;
	color: #fff;
}

.tacpp-admin .screen-heading img {
	vertical-align: text-bottom;
}

.tacpp-admin .form-table th {
	width: 330px;
}

#tacpp-admin-form fieldset .setting-info {

}

#tacpp-admin-form fieldset .description {
	display: none;
}

#tacpp-admin-form .inside h2 {
	font-size: 18px;
	border-bottom: 1px solid #ccc;
	padding: 0 0 8px 0;
}


.tippy-box {
	padding: 10px;
	background-color: #673AB7;
	color: #fff;
	border-radius: 8px;
}

/* Match arrow color to the tooltip background (v6: arrow inherits from `color` on .tippy-arrow). */
.tippy-box .tippy-arrow {
	color: #673AB7;
}

.tippy-box .tacpp-setting-image {
	margin-top: 20px;
	text-align: center;
	display: block;
}

.tippy-box img {
	width: 100%;
}

/**
* Welcome page
 */
.tacpp-admin .column-wrapper {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;

}

.tacpp-admin .column-wrapper li {
	width: calc(25% - 30px);
	padding: 10px;
	background-color: #fff;
	border-radius: 8px;
}

.tacpp-admin .column-wrapper li h3 {
	margin: 8px 0;
}

/**
 * Checkbox Toggle UI
 */
.tacpp-admin input[type="checkbox"].terms-ui-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	width: auto;
	height: auto;
	vertical-align: middle;
	position: relative;
	border: 0;
	outline: 0;
	cursor: pointer;
	margin: 0 4px;
	background: none;
	box-shadow: none;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle.disabled {
	cursor: not-allowed;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle:focus {
	box-shadow: none;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle:after {
	content: '';
	font-size: 10px;
	font-weight: 400;
	line-height: 20px;
	text-indent: -14px;
	color: #ffffff;
	width: 40px;
	height: 20px;
	display: inline-block;
	border-radius: 72px;
	box-shadow: 0 0 12px rgb(0 0 0 / 15%) inset;
	background: rgba(103, 58, 183, 0.30);
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle.disabled:after {
	background: rgba(0, 0, 0, 0.08);
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle:before {
	content: '';
	width: 12px;
	height: 12px;
	display: block;
	position: absolute;
	top: 4px;
	left: 4px;
	margin: 0;
	border-radius: 50%;
	background-color: #ffffff;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle:checked:before {
	left: 24px;
	margin: 0;
	background-color: #ffffff;
	top: 4px;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle,
.tacpp-admin input[type="checkbox"].terms-ui-toggle:before,
.tacpp-admin input[type="checkbox"].terms-ui-toggle:after,
.tacpp-admin input[type="checkbox"].terms-ui-toggle:checked:before,
.tacpp-admin input[type="checkbox"].terms-ui-toggle:checked:after {
	transition: ease .15s;
}

.tacpp-admin input[type="checkbox"].terms-ui-toggle:checked:after {
	content: ' ';
	background-color: #673AB7;
}

.acceptance-terms-wrapper {
	overflow-x: auto;
}

#user-accepted-terms {
	width: 100%;
	font-size: 14px;
}

#user-accepted-terms th {
	text-align: left;
	padding: 1em;
	font-size: 15px;
	font-weight: 400;
	color: #999;
	background: #f8f8f8;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}
#user-accepted-terms td{
	padding: 0 1em;
}

#user-accepted-terms .center {
	text-align: center;
}

#user-accepted-terms .url {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

#user-accepted-terms tbody .dashicons {
	color: #673AB7;
}

#acceptance_log h2 {
	display: block;
}

/* Between the folded menu and a wide screen the 340px sidebar takes too much
   of the row; narrow it before the layout stacks at 960px. */
@media screen and (max-width: 1280px) {
	#tacpp-admin-form-wrapper .tacpp-admin-sidebar {
		width: 260px;
	}
}

/**
 * Narrow screens: the sidebar stacks under the form, so the save panel becomes
 * a bar fixed to the bottom of the screen instead. At this width WordPress
 * folds its menu to 36px, and below 783px hides it, hence the two left offsets.
 * The form gets matching bottom padding so its last row is never under the bar.
 */
@media screen and (max-width: 960px) {
	#tacpp-admin-form-wrapper {
		flex-direction: column;
	}

	#tacpp-admin-form-wrapper .tacpp-admin-sidebar {
		width: auto;
	}

	#tacpp-admin-form-wrapper #tacpp-admin-form {
		padding-bottom: 72px;
	}

	#tacpp-admin-form-wrapper .tacpp-admin-sidebar > .tacpp-save-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 36px;
		right: 0;
		z-index: 99;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 4px 16px;
		margin: 0;
		padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 0;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, .08);
	}

	#tacpp-admin-form-wrapper .tacpp-admin-sidebar > .tacpp-save-panel::before {
		display: none;
	}

	#tacpp-admin-form-wrapper .tacpp-save-panel .tacpp-save-panel__status,
	#tacpp-admin-form-wrapper .tacpp-save-panel .tacpp-save-panel__actions {
		margin: 0;
	}
}

@media screen and (max-width: 782px) {
	#tacpp-admin-form-wrapper .tacpp-admin-sidebar > .tacpp-save-panel {
		left: 0;
	}
}

@media all and (max-width: 768px) {
	.tacpp-admin .column-wrapper li {
		width: calc(50% - 30px)
	}

}

@media all and (max-width: 480px) {
	.tacpp-admin .column-wrapper li {
		width: 100%;
	}

}