/**
 * WP Content Copy Protection - admin panel skin.
 *
 * Ports the wp-buy.com shop design DNA (https://www.wp-buy.com/shop/) into
 * wp-admin: the same token palette, the 20px/1px-border card, the .wpb-pill
 * button rail that replaces the old tab strip, the gradient .wpb-featured
 * banner used here to advertise the PRO version, and the .wpb-shop__help
 * three-column footer CTA.
 *
 * Everything is scoped under #wpb-admin so it cannot leak into other admin
 * screens or fight with core styles.
 */

/* ------------------------------------------------------------------
   Inter (variable, latin subset) - self-hosted, admin only.
   Shipped in the plugin's /fonts folder so wp-admin pulls no remote
   assets. The single variable file covers the whole 100-900 range.
   ------------------------------------------------------------------ */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"),
		url("../fonts/inter-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#wpb-admin {
	/* ---- Design tokens (verbatim from the shop theme) ---- */
	--wpb-primary: #6C63FF;
	--wpb-primary-dark: #4F46E5;
	--wpb-secondary: #0F172A;
	--wpb-bg-soft: #F8FAFC;
	--wpb-text-primary: #0B1220;
	--wpb-text-secondary: #6B7280;
	--wpb-border-soft: rgba(0, 0, 0, .08);
	--wpb-accent: #22C7E0;

	/* Inter ships with the plugin (see the @font-face above); the system
	   geometric stack stays behind it as the fallback while the variable
	   file loads, keeping the theme's weight/tracking rhythm. */
	--wpb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	max-width: 1280px;
	margin: 14px 20px 30px 0;
	font-family: var(--wpb-font);
	color: var(--wpb-text-primary);
	font-size: 14px;
	line-height: 1.6;
	box-sizing: border-box;
}

#wpb-admin *,
#wpb-admin *::before,
#wpb-admin *::after {
	box-sizing: border-box;
}

/* wp-admin ships 13px / 1.4 on everything below it; reassert our rhythm. */
#wpb-admin p,
#wpb-admin li,
#wpb-admin label {
	font-size: .82rem;
	line-height: 1.55;
	color: var(--wpb-text-primary);
}

#wpb-admin a {
	color: var(--wpb-primary);
	text-decoration: none;
}

#wpb-admin a:hover {
	color: var(--wpb-primary-dark);
}

#wpb-admin a:focus-visible,
#wpb-admin button:focus-visible,
#wpb-admin select:focus-visible,
#wpb-admin input:focus-visible,
#wpb-admin textarea:focus-visible {
	outline: 2px solid var(--wpb-primary);
	outline-offset: 2px;
	box-shadow: none;
}

/* ============================================================
   HEAD - .wpb-shop__head
   ============================================================ */
.wpb-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.gradient-text {
	background: linear-gradient(135deg, #6C63FF, #4F46E5);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.wpb-head__main {
	min-width: 0;
}

.wpb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #F4F4FF;
	color: var(--wpb-primary);
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.wpb-eyebrow svg {
	width: 13px;
	height: 13px;
}

.wpb-title {
	font-size: clamp(1.45rem, 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wpb-secondary);
	line-height: 1.15;
	margin: 0 0 7px;
	padding: 0;
}

#wpb-admin .wpb-subtitle {
	color: var(--wpb-text-secondary);
	font-size: .85rem;
	line-height: 1.55;
	max-width: 620px;
	margin: 0;
}

.wpb-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.wpb-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	color: var(--wpb-secondary);
	font-weight: 600;
	font-size: .78rem;
	padding: 8px 14px;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wpb-badge svg {
	color: var(--wpb-primary);
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* ============================================================
   FEATURED - PRO advertisement (.wpb-featured)
   ============================================================ */
.wpb-featured {
	display: grid;
	grid-template-columns: max-content minmax(0, 3fr) max-content;
	gap: 24px;
	align-items: center;
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .14), transparent 45%),
		linear-gradient(135deg, #6C63FF, #4F46E5);
	border-radius: 16px;
	padding: 21px 26px;
	margin-bottom: 22px;
	color: #fff;
	box-shadow: 0 18px 38px -18px rgba(108, 99, 255, .55);
}

.wpb-featured__icon {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
}

.wpb-featured__icon img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wpb-featured__info {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
}

.wpb-featured__tag {
	order: 3;
	display: inline-block;
	background: rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.wpb-featured__title {
	order: 1;
	flex: 0 0 100%;
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 5px;
	padding: 0;
	color: #fff;
}

.wpb-featured__desc {
	order: 2;
	flex: 0 0 100%;
	color: rgba(255, 255, 255, .85) !important;
	font-size: .82rem;
	line-height: 1.5;
	margin: 0 0 9px;
}

/* Stands in for the shop's star rating row - same slot, same weight. */
.wpb-featured__points {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#wpb-admin .wpb-featured__points li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	margin: 0;
}

.wpb-featured__points svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: .9;
}

.wpb-featured__buy {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.wpb-featured__price {
	font-size: 1.45rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}

.wpb-featured__price del {
	opacity: .6;
	font-size: 1rem;
	font-weight: 500;
}

.wpb-featured__price ins {
	text-decoration: none;
}

#wpb-admin .wpb-featured__btn {
	background: #fff;
	color: var(--wpb-primary);
	padding: 10px 22px;
	border-radius: 10px;
	font-size: .84rem;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s;
}

#wpb-admin .wpb-featured__btn:hover {
	transform: translateY(-2px);
	color: var(--wpb-primary);
}

.wpb-featured__mbg {
	font-size: .72rem;
	color: rgba(255, 255, 255, .75);
	font-weight: 600;
}

/* Medium - the buy column drops under the copy and reads as one footer row. */
@media (max-width: 1080px) {

	.wpb-featured {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 8px 18px;
		padding: 20px 22px;
	}

	.wpb-featured__icon {
		width: 72px;
		height: 72px;
		align-self: start;
	}

	.wpb-featured__buy {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 10px 14px;
		text-align: left;
		margin-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, .2);
		padding-top: 16px;
	}

	/* Price keeps the left edge, button and guarantee ride the right one. */
	#wpb-admin .wpb-featured__btn {
		margin-left: auto;
	}
}

/* Mobile - the pitch copy is dead weight on a phone. Only the headline
   survives, riding beside the box art; the buy row keeps its own line. */
@media (max-width: 782px) {

	.wpb-featured {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 6px 14px;
		align-items: center;
		padding: 16px;
		border-radius: 14px;
	}

	.wpb-featured__icon {
		width: 56px;
		height: 56px;
		align-self: center;
	}

	.wpb-featured__icon img {
		padding: 4px;
	}

	.wpb-featured__info {
		align-items: center;
		min-height: 56px;
		gap: 0;
	}

	.wpb-featured__tag,
	.wpb-featured__desc,
	.wpb-featured__points {
		display: none;
	}

	.wpb-featured__title {
		margin: 0;
		font-size: .98rem;
	}
}

/* Small - never let the box art claim the column; keep it a thumbnail. */
@media (max-width: 600px) {

	.wpb-featured {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.wpb-featured__icon {
		width: 48px;
		height: 48px;
	}

	.wpb-featured__info {
		min-height: 48px;
	}

	.wpb-featured__price {
		font-size: 1.25rem;
	}

	/* Guarantee wraps to its own line once price + button fill the row. */
	.wpb-featured__mbg {
		flex: 0 0 100%;
	}
}

/* Very small - the button stops sharing the row and goes full width. */
@media (max-width: 420px) {

	.wpb-featured__buy {
		gap: 8px 12px;
	}

	#wpb-admin .wpb-featured__btn {
		flex: 1 1 100%;
		margin-left: 0;
		text-align: center;
	}

	.wpb-subtitle {
		display: none;
	}
}

/* ============================================================
   PILL RAIL - replaces the old .simpleTabsNavigation tab strip
   ============================================================ */
.wpb-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

#wpb-admin .wpb-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 9px;
	font-weight: 600;
	font-size: .82rem;
	font-family: inherit;
	line-height: 1.4;
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	color: var(--wpb-secondary);
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
}

.wpb-pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

#wpb-admin .wpb-pill:hover {
	border-color: var(--wpb-primary);
	color: var(--wpb-primary);
	background: #fff;
}

#wpb-admin .wpb-pill.is-active {
	background: linear-gradient(135deg, #6C63FF, #4F46E5);
	color: #fff;
	border-color: transparent;
	font-weight: 700;
	box-shadow: 0 10px 22px -10px rgba(108, 99, 255, .5);
}

#wpb-admin .wpb-pill.is-active svg {
	color: #fff;
}

/* Numeric indicator riding on a pill - the shop's cyan count badge. */
.wpb-pill__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: rgba(34, 199, 224, .16);
	color: #0e7490;
	font-size: .7rem;
	font-weight: 800;
}

#wpb-admin .wpb-pill.is-active .wpb-pill__n {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.wpb-panel {
	display: none;
}

.wpb-panel.is-active {
	display: block;
}

/* No-JS fallback: without the switcher every panel stays readable. */
.no-js .wpb-panel {
	display: block;
}

.no-js .wpb-pills {
	display: none;
}

/* ============================================================
   CARD - the .wpb-plugin-card box DNA
   ============================================================ */
.wpb-card {
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	border-radius: 15px;
	padding: 18px 22px;
	margin: 0 0 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: box-shadow .3s;
}

.wpb-card:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.wpb-card:last-child {
	margin-bottom: 0;
}

.wpb-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.wpb-card__ic {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(108, 99, 255, .1);
	color: var(--wpb-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpb-card__ic svg {
	width: 18px;
	height: 18px;
}

.wpb-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wpb-secondary);
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

.wpb-card__desc {
	color: var(--wpb-text-secondary);
	font-size: .82rem;
	line-height: 1.55;
	margin: 0 0 14px;
}

.wpb-card__foot {
	padding-top: 12px;
	margin-top: 14px;
	border-top: 1px solid var(--wpb-border-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* Badge - .wpb-plugin-card__badge and its accent-tint rotation */
.wpb-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(108, 99, 255, .1);
	color: var(--wpb-primary);
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
}

.wpb-tag svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.wpb-tag--free {
	background: rgba(16, 185, 129, .13);
	color: #047857;
}

#wpb-admin .wpb-tag--pro {
	background: rgba(250, 204, 21, .16);
	color: #b45309;
}

#wpb-admin .wpb-tag--pro:hover {
	background: rgba(250, 204, 21, .3);
	color: #92400e;
}

.wpb-tag--layer {
	background: rgba(99, 102, 241, .12);
	color: #4338ca;
}

/* Trust/meta chip row - .wpb-plugin-card__meta */
.wpb-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.wpb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--wpb-text-secondary);
}

.wpb-chip svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.wpb-chip--safe {
	color: #16a34a;
}

.wpb-sep {
	width: 1px;
	height: 15px;
	background: #e2e8f0;
	flex-shrink: 0;
}

/* ============================================================
   SETTINGS ROWS - the field grid inside a card
   ============================================================ */
.wpb-fields {
	display: flex;
	flex-direction: column;
}

.wpb-field {
	display: grid;
	grid-template-columns: minmax(200px, 250px) 170px minmax(0, 1fr);
	gap: 6px 16px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--wpb-border-soft);
}

.wpb-field:first-child {
	padding-top: 0;
}

.wpb-field:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Full-width control (text box, textarea) - label then control. */
.wpb-field--wide {
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
}

.wpb-field--wide.wpb-field--top {
	align-items: flex-start;
}

#wpb-admin .wpb-field__label {
	font-weight: 600;
	font-size: .85rem;
	color: var(--wpb-secondary);
	margin: 0;
	line-height: 1.4;
}

.wpb-field__label u {
	text-decoration-color: var(--wpb-primary);
	text-underline-offset: 2px;
}

#wpb-admin .wpb-field__hint {
	color: var(--wpb-text-secondary);
	font-weight: 400;
	font-size: .8rem;
	line-height: 1.45;
	margin: 0;
}

/* Locked-behind-PRO cell sitting where a control would be: it takes the
   exact footprint of the select it stands in for, so the row does not read
   as if a control went missing. */
.wpb-field__locked {
	display: flex;
	align-items: center;
}

#wpb-admin .wpb-field__locked .wpb-tag {
	width: 100%;
	min-height: 40px;
	justify-content: center;
	border: 1px dashed rgba(180, 83, 9, .38);
	border-radius: 9px;
	font-size: .7rem;
}

/* Select / input / textarea - the shop's 12px radius + soft border */
#wpb-admin select,
#wpb-admin input[type="text"],
#wpb-admin input[type="email"],
#wpb-admin textarea {
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 9px;
	border: 1px solid #e7e9ef;
	background-color: #fff;
	color: var(--wpb-secondary);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

#wpb-admin textarea {
	min-height: 70px;
	font-weight: 500;
	line-height: 1.45;
	resize: vertical;
}

/* A one-line message field does not need the control's default height. */
#wpb-admin .wpb-field--wide input[type="text"] {
	min-height: 40px;
}

#wpb-admin select:focus,
#wpb-admin input[type="text"]:focus,
#wpb-admin textarea:focus {
	border-color: var(--wpb-primary);
	box-shadow: 0 0 0 3px rgba(108, 99, 255, .12);
}

/* Checkbox row - selectable pill tiles */
.wpb-checks {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#wpb-admin .wpb-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 9px;
	border: 1px solid var(--wpb-border-soft);
	background: #fff;
	font-weight: 600;
	font-size: .82rem;
	color: var(--wpb-secondary);
	cursor: pointer;
	transition: all .2s;
}

#wpb-admin .wpb-check:hover {
	border-color: var(--wpb-primary);
	color: var(--wpb-primary);
}

#wpb-admin .wpb-check.is-on {
	border-color: var(--wpb-primary);
	background: rgba(108, 99, 255, .06);
	color: var(--wpb-primary);
}

#wpb-admin .wpb-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	flex-shrink: 0;
}

#wpb-admin .wpb-check input[type="checkbox"]:checked {
	background: var(--wpb-primary);
	border-color: var(--wpb-primary);
}

#wpb-admin .wpb-check input[type="checkbox"]:checked::before {
	color: #fff;
	margin: -2px 0 0 -3px;
}

/* Feature list - the PRO panel bullet columns */
.wpb-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#wpb-admin .wpb-list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--wpb-text-primary);
}

.wpb-list li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 3px;
	color: #16a34a;
}

.wpb-list--pro li svg {
	color: var(--wpb-primary);
}

/* PRO feature index - the grouped breakdown inside "More with PRO" */
.wpb-pro-first {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 16px;
	margin: 0 0 20px;
	border: 1px solid rgba(16, 185, 129, .28);
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(16, 185, 129, .09), rgba(108, 99, 255, .07));
}

.wpb-pro-first__num {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #16a34a;
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Module 1 gets an icon of its own so the row reads like the numbered
   group heads below it, which all carry num + icon + title. */
.wpb-pro-first__ic {
	display: inline-flex;
	color: #16a34a;
	flex-shrink: 0;
}

.wpb-pro-first__ic svg {
	width: 18px;
	height: 18px;
}

.wpb-pro-first__txt {
	flex: 1 1 260px;
	min-width: 0;
}

#wpb-admin .wpb-pro-first__txt h3 {
	margin: 0 0 2px;
	padding: 0;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpb-secondary);
}

#wpb-admin .wpb-pro-first__txt p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--wpb-text-secondary);
}

.wpb-group {
	margin: 0 0 20px;
}

.wpb-group:last-of-type {
	margin-bottom: 0;
}

#wpb-admin .wpb-group__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 11px;
	padding: 0 0 9px;
	border-bottom: 1px dashed var(--wpb-border-soft);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpb-secondary);
}

.wpb-group__num {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(108, 99, 255, .12);
	color: var(--wpb-primary);
	font-size: .76rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpb-group__ic {
	display: inline-flex;
	color: var(--wpb-primary);
	flex-shrink: 0;
}

.wpb-group__ic svg {
	width: 17px;
	height: 17px;
}

.wpb-group__title {
	flex: 1 1 auto;
	min-width: 0;
}

.wpb-group__n {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpb-text-secondary);
	background: var(--wpb-bg-soft);
	border: 1px solid var(--wpb-border-soft);
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* The count chip carries the same tick the feature rows below it use. */
.wpb-group__n svg {
	width: 11px;
	height: 11px;
	color: var(--wpb-primary);
	flex-shrink: 0;
}

/* ============================================================
   PREMIUM FEATURES VIEW SWITCH - "Plans" vs "Detailed info"

   One card, two readings of the same PRO offer. The plans grid is
   the default because most people want the price first; the module
   breakdown stays one click away for anyone comparing feature lists.
   ============================================================ */
.wpb-switch {
	display: inline-flex;
	gap: 3px;
	margin-left: auto;
	padding: 3px;
	background: var(--wpb-bg-soft);
	border: 1px solid var(--wpb-border-soft);
	border-radius: 999px;
	flex-shrink: 0;
}

#wpb-admin .wpb-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	color: var(--wpb-text-secondary);
	font-family: inherit;
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .25s, color .25s, box-shadow .25s;
}

#wpb-admin .wpb-switch__btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

#wpb-admin .wpb-switch__btn:hover {
	color: var(--wpb-primary);
}

#wpb-admin .wpb-switch__btn.is-active {
	background: #fff;
	color: var(--wpb-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.wpb-view {
	display: none;
}

.wpb-view.is-active {
	display: block;
}

/* Without JS the switch is dead weight, so both readings stay open. */
.no-js .wpb-view {
	display: block;
}

.no-js .wpb-switch {
	display: none;
}

/* ============================================================
   PLANS GRID - FREE / ESSENTIAL / COMPLETE
   ============================================================ */
/* Full prices are shown in the cards, so the running promotion is announced above the grid. */
.wpb-plans__promo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 15px;
	border: 1px dashed var(--wpb-primary);
	border-radius: 13px;
	background: linear-gradient(135deg, rgba(108, 99, 255, .07), rgba(108, 99, 255, .02));
}

.wpb-plans__promo-ic {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
	color: #fff;
}

.wpb-plans__promo-ic svg {
	width: 18px;
	height: 18px;
}

#wpb-admin .wpb-plans__promo-txt {
	margin: 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--wpb-text-primary);
}

#wpb-admin .wpb-plans__promo-txt b {
	color: var(--wpb-secondary);
}

.wpb-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
}

.wpb-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	border-radius: 15px;
	padding: 20px;
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

.wpb-plan:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.wpb-plan--current {
	background: var(--wpb-bg-soft);
}

/* The recommended column: primary border, tinted ground, ribbon on top. */
.wpb-plan--popular {
	border-color: var(--wpb-primary);
	box-shadow: 0 6px 24px rgba(108, 99, 255, .12);
	background: linear-gradient(180deg, rgba(108, 99, 255, .05), #fff 120px);
}

.wpb-plan__ribbon {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wpb-secondary);
	color: #fff;
	font-size: .66rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 13px;
	border-radius: 999px;
	white-space: nowrap;
}

.wpb-plan__ribbon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	flex-shrink: 0;
}

.wpb-plan__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.wpb-plan__ic {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(0, 0, 0, .05);
	color: var(--wpb-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpb-plan__ic--paid {
	background: linear-gradient(135deg, var(--wpb-primary), var(--wpb-primary-dark));
	color: #fff;
}

.wpb-plan__ic svg {
	width: 21px;
	height: 21px;
}

.wpb-plan__id {
	min-width: 0;
}

#wpb-admin .wpb-plan__name {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wpb-secondary);
	margin: 0;
	padding: 0;
	line-height: 1.25;
}

#wpb-admin .wpb-plan__name--paid {
	color: var(--wpb-primary);
}

#wpb-admin .wpb-plan__note {
	font-size: .76rem;
	color: var(--wpb-text-secondary);
	margin: 2px 0 0;
	line-height: 1.4;
}

#wpb-admin .wpb-plan__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	color: var(--wpb-secondary);
}

.wpb-plan__from,
.wpb-plan__per {
	font-size: .78rem;
	font-weight: 600;
	color: var(--wpb-text-secondary);
}

.wpb-plan__amount {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.wpb-plan__cur {
	font-size: 1.05rem;
	font-weight: 700;
	margin-right: 1px;
}

#wpb-admin .wpb-plan__badge {
	align-self: flex-start;
	margin: -4px 0 12px;
}

/* Lifetime licences still carry an optional support line - it sits under the price. */
#wpb-admin .wpb-plan__care {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: -4px 0 14px;
	font-size: .74rem;
	line-height: 1.45;
	color: var(--wpb-text-secondary);
}

.wpb-plan__care svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--wpb-primary);
}

.wpb-plan__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

#wpb-admin .wpb-plan__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--wpb-text-primary);
	margin: 0;
}

.wpb-plan__list svg {
	width: 15px;
	height: 15px;
	color: #16a34a;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Buttons sit on the same baseline no matter how long the lists are. */
#wpb-admin .wpb-plan__cta {
	margin-top: auto;
	width: 100%;
	justify-content: center;
	text-align: center;
}

#wpb-admin .wpb-plan__cta--current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--wpb-border-soft);
	border-radius: 10px;
	padding: 11px 18px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--wpb-text-secondary);
	background: #fff;
	cursor: default;
}

/* Trust rail under the grid - the shop's guarantee strip. */
.wpb-plans__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wpb-border-soft);
}

@media (max-width: 1200px) {
	.wpb-plans {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.wpb-plans {
		grid-template-columns: 1fr;
	}

	/* The ribbon needs headroom once the columns stack. */
	.wpb-plan--popular {
		margin-top: 8px;
	}

	.wpb-switch {
		margin-left: 0;
		width: 100%;
	}

	#wpb-admin .wpb-switch__btn {
		flex: 1 1 0;
		justify-content: center;
	}

	.wpb-plans__trust {
		gap: 10px;
	}

	.wpb-plans__trust .wpb-sep {
		display: none;
	}
}

/* Screenshot gallery in the PRO panels */
.wpb-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.wpb-shot {
	display: block;
	border: 1px solid var(--wpb-border-soft);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wpb-bg-soft);
	transition: transform .3s, box-shadow .3s;
}

.wpb-shot:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.wpb-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   BUTTONS - .wpb-plugin-card__buy / __view
   ============================================================ */
.wpb-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

#wpb-admin .wpb-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border-radius: 9px;
	border: 1px solid transparent;
	background: none;
	font-family: inherit;
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
}

#wpb-admin .wpb-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

#wpb-admin .wpb-btn--primary {
	background: linear-gradient(135deg, #6C63FF, #4F46E5);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 22px -10px rgba(108, 99, 255, .5);
}

#wpb-admin .wpb-btn--primary:hover {
	transform: translateY(-2px);
	color: #fff;
}

#wpb-admin .wpb-btn--ghost {
	background: #fff;
	border-color: #e7e9ef;
	color: var(--wpb-primary);
	box-shadow: none;
}

#wpb-admin .wpb-btn--ghost:hover {
	border-color: var(--wpb-primary);
	background: rgba(108, 99, 255, .05);
}

#wpb-admin .wpb-btn--quiet {
	background: #fff;
	border-color: var(--wpb-border-soft);
	color: var(--wpb-text-secondary);
}

#wpb-admin .wpb-btn--quiet:hover {
	border-color: #f43f5e;
	color: #f43f5e;
}

/* ============================================================
   GLASS SHINE - the sweep the wp-buy.com cards use (.shine /
   .shine-layer there). Every PRO badge, primary CTA and screenshot
   gets a band of light travelling across it on hover, and once more
   when the tab holding it is opened - the .wpb-shine class the
   tab switcher drops on them for the length of one sweep.
   ============================================================ */
#wpb-admin .wpb-shot,
#wpb-admin .wpb-tag--pro,
#wpb-admin .wpb-btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* The glass band itself: a narrow, skewed highlight parked off the
   left edge until an animation walks it across. */
#wpb-admin .wpb-shot::after,
#wpb-admin .wpb-tag--pro::after,
#wpb-admin .wpb-btn--primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	width: 50%;
	height: 100%;
	transform: skewX(-25deg);
	pointer-events: none;
}

/* On the indigo gradient a soft white reads as glass... */
#wpb-admin .wpb-btn--primary::after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 100%);
}

/* ...while the amber badge sits on a light tint, so its band has to
   push closer to white before the sweep is visible at all. */
#wpb-admin .wpb-tag--pro::after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 100%);
}

/* A screenshot is busy artwork, so the band stays halfway between the
   two: enough to read as glass sliding over the image, not enough to
   wash the screenshot out while it passes. */
#wpb-admin .wpb-shot::after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);
}

/* Hover and tab-open share one declaration on purpose: an element
   still carrying .wpb-shine keeps the identical animation value when
   hovered, so the browser has nothing to restart and the sweep does
   not stutter or replay on mouse-out. */
#wpb-admin .wpb-shot.wpb-shine::after,
#wpb-admin .wpb-tag--pro.wpb-shine::after,
#wpb-admin .wpb-btn--primary.wpb-shine::after,
#wpb-admin .wpb-tag--pro:hover::after,
#wpb-admin .wpb-shot:hover::after,
#wpb-admin .wpb-btn--primary:hover::after {
	animation: wpb-shine .75s ease-out;
}

@keyframes wpb-shine {
	100% {
		left: 125%;
	}
}

/* The soft lift that goes with it on the shop's cards. */
#wpb-admin .wpb-tag--pro:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

#wpb-admin .wpb-btn--primary:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 14px 26px -12px rgba(108, 99, 255, .6);
}

/* A tag is an inline chip, so it needs the transition the buttons
   already declare before the shadow can fade in. */
#wpb-admin .wpb-tag {
	transition: background .2s, color .2s, box-shadow .2s;
}

/* The save bar stays reachable while the panels scroll. */
.wpb-formbar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding: 9px 18px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	border: 1px solid var(--wpb-border-soft);
	border-radius: 14px;
	box-shadow: 0 -6px 24px -12px rgba(15, 23, 42, .18);
}

#wpb-admin .wpb-formbar__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 500;
	color: var(--wpb-text-secondary);
	margin: 0;
}

.wpb-formbar__note svg {
	width: 15px;
	height: 15px;
	color: var(--wpb-primary);
	flex-shrink: 0;
}

/* Priority order in the footer rail: Save Settings first, the secondary
   actions beside it deliberately quieter so they stop competing with it. */
#wpb-admin .wpb-formbar .wpb-btn--primary {
	padding: 10px 24px;
	font-size: .85rem;
	font-weight: 800;
	box-shadow: 0 12px 26px -10px rgba(108, 99, 255, .65);
}

#wpb-admin .wpb-formbar .wpb-btn--ghost,
#wpb-admin .wpb-formbar .wpb-btn--quiet {
	font-weight: 600;
	color: var(--wpb-text-secondary);
	border-color: var(--wpb-border-soft);
	background: #fff;
	box-shadow: none;
}

#wpb-admin .wpb-formbar .wpb-btn--ghost:hover {
	border-color: var(--wpb-primary);
	color: var(--wpb-primary);
}

/* ============================================================
   FOOTER CTA - .wpb-shop__help
   ============================================================ */
.wpb-help {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	border-radius: 16px;
	padding: 18px 24px;
	margin-top: 28px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* The shop runs two columns in a full-bleed shell; we run three inside a
   1280px one minus the admin menu, so the button is allowed to wrap under
   its text rather than squeezing the copy into four lines. */
.wpb-help-col {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.wpb-help-col__txt {
	flex: 1 1 150px;
	min-width: 0;
}

.wpb-help-ic {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(108, 99, 255, .1);
	color: var(--wpb-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpb-help-ic svg {
	width: 18px;
	height: 18px;
}

#wpb-admin .wpb-help-col h3 {
	font-size: .88rem;
	font-weight: 700;
	color: var(--wpb-secondary);
	margin: 0 0 2px;
	padding: 0;
}

#wpb-admin .wpb-help-col p {
	font-size: .78rem;
	color: var(--wpb-text-secondary);
	margin: 0;
}

#wpb-admin .wpb-help-btn {
	margin-left: auto;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 9px;
	border: 1px solid var(--wpb-border-soft);
	color: var(--wpb-secondary);
	font-weight: 600;
	font-size: .8rem;
	text-decoration: none;
	transition: all .2s;
}

#wpb-admin .wpb-help-btn:hover {
	border-color: var(--wpb-primary);
	color: var(--wpb-primary);
}

.wpb-help-sep {
	width: 1px;
	height: 40px;
	background: var(--wpb-border-soft);
}

/* The 5-column CTA needs more room than the shop's 3-column one; it folds
   one breakpoint earlier because wp-admin also spends ~160px on the menu.
   Stacked, each column becomes an icon gutter plus a text/button column so
   the button lines up under the copy instead of drifting under the icon. */
@media (max-width: 1200px) {

	.wpb-help {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px 20px;
	}

	.wpb-help-sep {
		width: 100%;
		height: 1px;
	}

	.wpb-help-col {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		column-gap: 14px;
		row-gap: 12px;
	}

	.wpb-help-col__txt {
		grid-column: 2;
	}

	#wpb-admin .wpb-help-btn {
		grid-column: 2;
		justify-self: start;
		margin-left: 0;
		white-space: normal;
	}
}

/* Phones: the button spans the icon gutter too, so it reads as a full-width
   tap target instead of a small chip floating beside the copy. */
@media (max-width: 600px) {

	.wpb-help {
		padding: 16px;
		border-radius: 12px;
	}

	.wpb-help-col {
		row-gap: 10px;
	}

	#wpb-admin .wpb-help-btn {
		grid-column: 1 / -1;
		justify-self: stretch;
		text-align: center;
		padding: 10px 16px;
	}
}

@media (max-width: 782px) {

	#wpb-admin {
		margin-right: 10px;
	}

	.wpb-field,
	.wpb-field--wide {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Sticky costs ~30% of a phone viewport - let it scroll with the form. */
	.wpb-formbar {
		position: static;
		bottom: auto;
		justify-content: center;
		backdrop-filter: none;
		background: #fff;
		box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
	}

	.wpb-actions {
		width: 100%;
	}

	#wpb-admin .wpb-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ============================================================
   SUBSCRIBE NOTICE - restyled to the same DNA
   ============================================================ */
#wpccp_subscribe.wpb-notice {
	border: 1px solid var(--wpb-border-soft);
	box-sizing: border-box;
	border-left: 4px solid #6C63FF;
	border-radius: 12px;
	padding: 9px 18px;
	margin: 14px 20px 0 0;
	max-width: 1280px;
	background: #fff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

#wpccp_subscribe.wpb-notice *,
#wpccp_subscribe.wpb-notice *::before,
#wpccp_subscribe.wpb-notice *::after {
	box-sizing: border-box;
}

.wpb-notice__in {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wpb-notice__ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(108, 99, 255, .1);
	color: #6C63FF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpb-notice__ic svg {
	width: 17px;
	height: 17px;
}

.wpb-notice__txt {
	flex: 1 1 240px;
	min-width: 0;
}

#wpccp_subscribe.wpb-notice .wpb-notice__txt h3 {
	margin: 0 0 1px;
	padding: 0;
	font-size: .85rem;
	line-height: 1.3;
	font-weight: 700;
	color: #0F172A;
}

#wpccp_subscribe.wpb-notice .wpb-notice__txt p {
	margin: 0;
	font-size: .76rem;
	line-height: 1.45;
	color: #6B7280;
}

.wpb-notice__form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

#wpccp_subscribe.wpb-notice input[type="email"],
#wpccp_subscribe.wpb-notice input[type="text"] {
	min-width: 210px;
	min-height: 36px;
	padding: 6px 12px;
	border-radius: 9px;
	border: 1px solid #e7e9ef;
	font-family: inherit;
	font-size: .82rem;
}

#wpccp_subscribe.wpb-notice .wpb-notice__go {
	min-height: 36px;
	padding: 7px 18px;
	border: 0;
	border-radius: 9px;
	background: linear-gradient(135deg, #6C63FF, #4F46E5);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: .81rem;
	cursor: pointer;
	transition: transform .2s;
}

#wpccp_subscribe.wpb-notice .wpb-notice__go:hover {
	transform: translateY(-2px);
}

#wpccp_subscribe.wpb-notice .wpb-notice__x {
	border: 0;
	background: transparent;
	color: #6B7280;
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 4px;
}

#wpccp_subscribe.wpb-notice .wpb-notice__x:hover {
	color: #f43f5e;
}


/* ============================================================
   CONFIRM MODAL - .wpb-modal
   The Restore defaults guard rail. Same card DNA as .wpb-card
   (white, 1px soft border, 15px radius) sitting on a blurred
   veil, with the destructive action tinted rose so it reads
   differently from Save. Logical properties throughout so the
   box mirrors itself on the Arabic/RTL admin.
   ============================================================ */
#wpb-admin .wpb-modal {
	position: fixed;
	inset: 0;
	/* Above the admin bar (99999) so the veil covers the whole screen. */
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* The hidden attribute is the closed state - it has to beat the flex above. */
#wpb-admin .wpb-modal[hidden] {
	display: none;
}

/* The page behind the veil must not scroll away under the box. Set on
   <body>, so this one rule cannot live inside the #wpb-admin scope. */
body.wpb-modal-open {
	overflow: hidden;
}

#wpb-admin .wpb-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, .55);
	backdrop-filter: blur(3px);
	animation: wpb-modal-veil .18s ease-out;
}

#wpb-admin .wpb-modal__box {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border: 1px solid var(--wpb-border-soft);
	border-radius: 15px;
	padding: 26px 26px 20px;
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45);
	text-align: center;
	animation: wpb-modal-rise .2s ease-out;
}

#wpb-admin .wpb-modal__x {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	padding: 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wpb-text-secondary);
	cursor: pointer;
	transition: all .2s;
}

#wpb-admin .wpb-modal__x svg {
	width: 16px;
	height: 16px;
}

#wpb-admin .wpb-modal__x:hover {
	background: var(--wpb-bg-soft);
	color: #f43f5e;
}

#wpb-admin .wpb-modal__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(244, 63, 94, .1);
	color: #f43f5e;
}

#wpb-admin .wpb-modal__ic svg {
	width: 23px;
	height: 23px;
}

#wpb-admin .wpb-modal__title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--wpb-text-primary);
}

#wpb-admin .wpb-modal__text {
	margin: 0 0 20px;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--wpb-text-secondary);
}

#wpb-admin .wpb-modal__acts {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

#wpb-admin .wpb-btn--danger {
	background: linear-gradient(135deg, #FB7185, #E11D48);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 22px -10px rgba(225, 29, 72, .55);
}

#wpb-admin .wpb-btn--danger:hover {
	transform: translateY(-2px);
	color: #fff;
}

@keyframes wpb-modal-veil {
	from {
		opacity: 0;
	}
}

@keyframes wpb-modal-rise {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.97);
	}
}

/* The narrow admin: stack the two actions so neither label truncates. */
@media (max-width: 480px) {

	#wpb-admin .wpb-modal__box {
		padding: 22px 18px 18px;
	}

	#wpb-admin .wpb-modal__acts {
		flex-direction: column-reverse;
	}

	#wpb-admin .wpb-modal__acts .wpb-btn {
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {

	#wpb-admin *,
	#wpb-admin *::after,
	#wpccp_subscribe.wpb-notice * {
		transition: none !important;
		animation: none !important;
	}
}