/* WP Masquerade theme: Free vs Pro highlighting (inc/pro-highlight.php). Plan badges, features hub filter,
   Pro cards, "What Pro adds" band, feature page strips. Inline SVG / CSS only. */

:root {
	--pro-a: #1765f4;          /* brand blue */
	--pro-b: #6b3cf0;          /* violet (white text 5.6:1) */
	--pro-grad: linear-gradient(118deg, var(--pro-a) 0%, #3f4ff2 48%, var(--pro-b) 100%);
	--pro-gold: #ffd36a;       /* crown accent on the gradient (decorative) */
	--pro-glow: 0 3px 12px rgba(91, 62, 240, .32);
	--crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 7.6l5.3 4.3L12 4.2l4.1 7.7 5.3-4.3-2.2 10.6H4.8zM4.9 19.6h14.2v2H4.9z'/%3E%3C/svg%3E");
	--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 1. Plan badges */
.wpm-tag--pro, .wpm-tag--free, .wpm-tag--mixed, .badge-pro {
	display: inline-flex; align-items: center; gap: 5px; border-radius: 100px; padding: 4px 10px 4px 8px;
	font-size: .7rem; font-weight: 800; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.wpm-tag--pro::before, .badge-pro::before, .wpm-tag--free::before, .wpm-tag-part.is-pro::before {
	content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
	-webkit-mask: var(--crown) center / contain no-repeat; mask: var(--crown) center / contain no-repeat;
}
.wpm-tag--pro, .badge-pro {
	background: var(--pro-grad); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--pro-glow);
	text-shadow: 0 1px 0 rgba(10, 20, 80, .25);
}
.wpm-tag--pro::before, .badge-pro::before { background: var(--pro-gold); }
.wpm-tag--free { background: #eaf8f1; color: var(--green-text); box-shadow: inset 0 0 0 1px #bfe6d2; }
.wpm-tag--free::before { width: 11px; height: 11px; -webkit-mask-image: var(--tick); mask-image: var(--tick); }

/* "Free + Pro": two joined halves. */
.wpm-tag--mixed { padding: 0; gap: 0; background: none; box-shadow: none; overflow: hidden; }
.wpm-tag-part { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; }
.wpm-tag-part.is-free { background: #eaf8f1; color: var(--green-text); box-shadow: inset 0 0 0 1px #bfe6d2; border-radius: 100px 0 0 100px; padding-right: 8px; }
.wpm-tag-part.is-pro { background: var(--pro-grad); color: #fff; border-radius: 0 100px 100px 0; padding-left: 7px; text-shadow: 0 1px 0 rgba(10, 20, 80, .25); box-shadow: var(--pro-glow); }
.wpm-tag-part.is-pro::before { background: var(--pro-gold); width: 11px; height: 11px; }
/* Unsplit mixed label (other wording): soft violet pill. */
.wpm-tag--mixed:not(:has(.wpm-tag-part)) { padding: 4px 10px; background: #f1edff; color: #4a2fc0; box-shadow: inset 0 0 0 1px #d6ccff; }

.wpm-tag.is-lg { font-size: .8rem; padding: 6px 14px 6px 11px; gap: 7px; }
.wpm-tag.is-lg::before { width: 15px; height: 15px; }

/* Headings and table cells keep the pill readable. */
h2 .wpm-tag, h3 .wpm-tag, th .wpm-tag { margin-left: 8px; position: relative; top: -2px; }
td .wpm-tag, th .wpm-tag { margin-top: 2px; margin-bottom: 2px; }

/* Buttons in Pro colours. */
.btn-pro { background: var(--pro-grad); border-color: transparent; color: #fff; box-shadow: var(--pro-glow); }
.btn-pro:hover { background: linear-gradient(118deg, #0752d7, #3a45e0 48%, #5a2fd6); border-color: transparent; color: #fff; }
.icon-crown { color: var(--pro-gold); flex: none; }

/* ------------------------------------------------------------------ 2. Features hub: filter bar */
.feat-filter { display: flex; justify-content: center; margin: 4px 0 26px; }
html:not(.js) .feat-filter { display: none; }
.feat-filter-group { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; background: #f2f6fd; border: 1px solid var(--edge); border-radius: 14px; }
.feat-filter-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border: 1px solid transparent; border-radius: 10px;
	background: transparent; color: #33476b; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.feat-filter-btn:hover { background: #fff; color: var(--ink); }
.feat-filter-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.feat-filter-count { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 100px; background: #e1e9f7; color: #33476b; font-size: .76rem; font-weight: 800; text-align: center; }
.feat-filter-btn[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #c9d8f3; box-shadow: var(--shadow-sm); }
.feat-filter-btn.is-free[aria-pressed="true"] .feat-filter-count { background: #dff4ea; color: var(--green-text); }
.feat-filter-btn.is-pro .icon-crown { color: var(--pro-b); }
.feat-filter-btn.is-pro[aria-pressed="true"] { background: var(--pro-grad); color: #fff; border-color: transparent; box-shadow: var(--pro-glow); }
.feat-filter-btn.is-pro[aria-pressed="true"] .icon-crown { color: var(--pro-gold); }
.feat-filter-btn.is-pro[aria-pressed="true"] .feat-filter-count { background: rgba(255, 255, 255, .22); color: #fff; }
.wpm-grid > .wpm-card[hidden] { display: none !important; }
@media (max-width: 520px) {
	.feat-filter-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
	.feat-filter-btn { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: .78rem; line-height: 1.2; text-align: center; }
	.feat-filter-btn .icon-crown { display: none; }
}

/* ------------------------------------------------------------------ 3. Features hub: Pro cards */
.wpm-grid > .wpm-card[data-plan] { position: relative; }
.wpm-grid > .wpm-card.is-plan-pro {
	border: 1.5px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #7aa6ff, #8b67f5 60%, #b39cff) border-box;
	box-shadow: 0 8px 26px rgba(91, 62, 240, .1);
}
.wpm-grid > .wpm-card.is-plan-pro:hover { border-color: transparent; box-shadow: 0 16px 38px rgba(91, 62, 240, .18); }
.wpm-card.is-plan-pro .card-thumb { background: radial-gradient(240px 120px at 100% 0%, rgba(107, 60, 240, .14), transparent 70%), linear-gradient(165deg, #f6f5ff, #ece9ff); border-bottom-color: #e2dcfb; }
.wpm-card.is-plan-mixed .card-thumb { background: radial-gradient(220px 110px at 100% 0%, rgba(107, 60, 240, .08), transparent 70%), linear-gradient(165deg, #f6f9ff, #edf3ff); }
.card-plan-flag {
	position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 100px;
	font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; pointer-events: none;
}
.card-plan-flag.is-pro { background: var(--pro-grad); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), var(--pro-glow); text-shadow: 0 1px 0 rgba(10, 20, 80, .25); }
.card-plan-flag.is-mixed { background: #fff; color: #4a2fc0; box-shadow: inset 0 0 0 1px #d6ccff, 0 2px 8px rgba(91, 62, 240, .12); }
.wpm-card:not(.has-thumb) .card-plan-flag { top: 22px; right: 18px; }

/* ------------------------------------------------------------------ 4. "What Pro adds" band */
.pro-band {
	position: relative; isolation: isolate; overflow: hidden; margin: 0 0 56px; border-radius: 22px; color: #fff;
	background: radial-gradient(520px 260px at 100% 0%, rgba(139, 103, 245, .5), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(64, 127, 253, .35), transparent 70%), linear-gradient(140deg, #0f2550, #1a2f78 55%, #2b2a8c);
	box-shadow: 0 24px 60px rgba(16, 36, 73, .22);
}
.pro-band::after {
	content: ""; position: absolute; z-index: -1; right: 28px; top: 22px; width: 120px; height: 80px; opacity: .35;
	background: radial-gradient(#9fb8ff 1.3px, transparent 1.7px) 0 0 / 14px 14px;
	-webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
}
.pro-band-inner { padding: 40px 42px 36px; }
.pro-band-head { max-width: 760px; margin-bottom: 26px; }
.pro-band-head .wpm-tag { margin-bottom: 14px; }
.pro-band h2 { color: #fff; margin: 0 0 8px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.pro-band-head p { margin: 0; color: #d6e1fb; font-size: 1.02rem; }
.pro-band-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.pro-band-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #c9d7ff; }
.pro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pro-list.is-plus { grid-template-columns: 1fr; }
.pro-list a {
	display: flex; align-items: center; gap: 11px; height: 100%; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #fff;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; font-weight: 650; line-height: 1.35;
	transition: background-color .15s ease, border-color .15s ease;
}
.pro-list a:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff; }
.pro-list a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pro-list-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pro-grad); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pro-list-icon svg { width: 18px; height: 18px; color: #fff; }
.pro-list.is-plus .pro-list-icon { background: rgba(255, 255, 255, .12); }
.pro-list.is-plus strong { display: block; font-weight: 700; }
.pro-list-extra { display: block; margin-top: 2px; color: #cfdbfa; font-size: .82rem; font-weight: 500; }
.pro-band-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pro-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: #e1e9fd; }
.pro-perks li { display: flex; gap: 9px; align-items: center; }
.pro-perks svg { width: 17px; height: 17px; color: #6ee7b0; flex: none; }
.pro-band-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pro-band-price { margin: 0; color: #e1e9fd; font-size: .95rem; }
.pro-band-price strong { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.pro-band-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pro-band .btn-pro { background: #fff; color: #3b2fc9; text-shadow: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.pro-band .btn-pro:hover { background: #f0edff; color: #2e22b0; }
.pro-band .btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff; box-shadow: none; }
.pro-band .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
@media (max-width: 960px) {
	.pro-band-cols { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
	.pro-band { border-radius: 18px; margin-bottom: 40px; }
	.pro-band-inner { padding: 28px 20px 24px; }
	.pro-list { grid-template-columns: 1fr; }
	.pro-band-cta, .pro-band-actions, .pro-band-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------ 5. Feature pages: strip and hint */
.plan-strip {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 4px; padding: 12px 14px 12px 14px; max-width: 640px;
	border-radius: 14px; border: 1.5px solid transparent;
	background: linear-gradient(110deg, #fff, #f6f3ff) padding-box, linear-gradient(120deg, #8eb2ff, #9a7bf7) border-box;
	box-shadow: 0 10px 28px rgba(91, 62, 240, .12);
}
.plan-strip-text { flex: 1 1 220px; margin: 0; display: grid; line-height: 1.35; }
.plan-strip-text strong { color: var(--ink); font-size: .98rem; }
.plan-strip-text span { color: var(--muted); font-size: .86rem; }
.plan-strip-text span strong { font-size: inherit; color: #3b2fc9; }
.plan-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0 0; max-width: 680px; font-size: .9rem; color: #3a4d6e; }
.plan-hint-label {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 100px; background: #f1edff; color: #4a2fc0;
	font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #d6ccff; align-self: center;
}
.plan-hint-label .icon-crown { color: var(--pro-b); }
.plan-hint-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; text-decoration: none; }
.plan-hint-link svg { width: 15px; height: 15px; }
.plan-hint-link:hover { text-decoration: underline; }

/* Feature "In short" card. */
.rail-card.is-pro { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #8eb2ff, #9a7bf7) border-box; }
.rail-price { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; padding: 8px 11px; border-radius: 10px; background: #f4f1ff; color: #3a2fa6; font-size: .86rem; }
.rail-price .icon-crown { color: var(--pro-b); }
.rail-price strong { font-size: 1rem; }
.rail-card.is-pro .rail-actions .btn:first-child { background: var(--pro-grad); border-color: transparent; box-shadow: var(--pro-glow); }

/* ------------------------------------------------------------------ 6. Comparison table */
.cmp-plan-head.is-pro .cmp-plan-name {
	display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 100px; background: var(--pro-grad); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--pro-glow); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem;
	text-shadow: 0 1px 0 rgba(10, 20, 80, .25);
}
.entry-content .cmp-table thead .cmp-plan-head.is-pro { box-shadow: inset 0 3px 0 var(--pro-b); background: linear-gradient(180deg, #f4f1ff, #f3f7ff); }
.entry-content .cmp-table thead .cmp-plan-head.is-pro:hover { background: linear-gradient(180deg, #ece7ff, #eaf1ff); }
.cmp-plan-head.is-pro .cmp-cta { background: var(--pro-grad); border-color: transparent; box-shadow: var(--pro-glow); }
.cmp-cell.is-pro .cmp-plan-tag { color: #4a2fc0; }

@media (prefers-reduced-motion: reduce) {
	.feat-filter-btn, .pro-list a { transition: none; }
}
@media print {
	.feat-filter, .card-plan-flag { display: none !important; }
	.wpm-tag--pro, .badge-pro, .wpm-tag-part.is-pro { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
}