/* =============================================================================
   VAULT → PICK VIZ SKIN BRIDGE
   Loaded only when "Use plugin widget themes" is OFF (body.vault-skin).
   Strategy: keep the plugin's card STRUCTURE (bet-slip layout etc.) but remap
   every --pp-* CSS variable to the theme's --vt-* tokens, so all plugin widgets
   follow the theme preset + light/dark mode automatically.
   ============================================================================= */

body.vault-skin .predictions-plugin-wrap,
body.vault-skin .predictions-plugin-wrap[data-theme]{
	--pp-bg:            var(--vt-canvas);
	--pp-bg-card:       var(--vt-surface);
	--pp-bg-card-hover: var(--vt-raised);
	--pp-bg-input:      var(--vt-input);
	--pp-border:        var(--vt-line);
	--pp-border-strong: var(--vt-line-strong);
	--pp-text:          var(--vt-text);
	--pp-text-muted:    var(--vt-muted);
	--pp-text-faint:    var(--vt-faint);
	--pp-accent:        var(--vt-accent);
	--pp-accent-2:      var(--vt-accent-2);
	--pp-accent-soft:   var(--vt-accent-soft);
	--pp-accent-text:   var(--vt-accent-ink);
	--pp-win:           var(--vt-win);
	--pp-win-bg:        var(--vt-win-bg);
	--pp-loss:          var(--vt-loss);
	--pp-loss-bg:       var(--vt-loss-bg);
	--pp-push:          var(--vt-push);
	--pp-push-bg:       var(--vt-push-bg);
	--pp-pending:       var(--vt-pending);
	--pp-pending-bg:    var(--vt-pending-bg);
	--pp-void:          var(--vt-void);
	--pp-void-bg:       var(--vt-void-bg);
	--pp-radius:16px; --pp-radius-sm:10px; --pp-radius-xs:7px;
	--pp-shadow:        var(--vt-shadow);
	--pp-shadow-hover:  var(--vt-shadow);
	--pp-shadow-card:   0 2px 10px rgba(0,0,0,.18);
	--pp-glow:          0 0 22px var(--vt-accent-soft);
	--pp-featured-ring: 0 0 0 2px var(--vt-accent), 0 0 16px var(--vt-accent-soft);
	background:transparent;
}

/* The wrap itself sits on the page canvas, not its own background */
body.vault-skin .predictions-plugin-wrap{ padding:0; }

/* Buttons + pills inherit the accent cleanly */
body.vault-skin .predictions-plugin-wrap .predictions-paywall-btn,
body.vault-skin .predictions-plugin-wrap .pp-btn{ border-radius:10px; }

/* All package/subscribe/paywall buttons → theme accent gradient (incl. the green
   "Activate Free Access" free-tier button which otherwise clashes). */
body.vault-skin .predictions-plugin-wrap .pp-btn,
body.vault-skin .predictions-plugin-wrap .pp-btn-free,
body.vault-skin .predictions-plugin-wrap .pp-btn-stripe,
body.vault-skin .predictions-plugin-wrap .pp-btn-wc,
body.vault-skin .predictions-plugin-wrap .pp-btn-activate-free,
body.vault-skin .predictions-plugin-wrap .predictions-paywall-btn,
body.vault-skin .predictions-plugin-wrap .predictions-attach-btn .pp-btn{
	background:linear-gradient(135deg, var(--vt-accent), var(--vt-accent-2)) !important;
	color:var(--vt-accent-ink) !important; border:0 !important;
	box-shadow:0 12px 26px -12px var(--vt-accent-2) !important; font-weight:800 !important;
	transition:filter .2s, transform .15s !important;
}
body.vault-skin .predictions-plugin-wrap .pp-btn:hover,
body.vault-skin .predictions-plugin-wrap .pp-btn-free:hover,
body.vault-skin .predictions-plugin-wrap .predictions-paywall-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
/* renew/secondary keep an outline treatment */
body.vault-skin .predictions-plugin-wrap .pp-btn-renew{
	background:transparent !important; color:var(--vt-accent) !important; border:1px solid var(--vt-accent) !important; box-shadow:none !important;
}

/* Hide the plugin's front-end theme switcher dots — the THEME owns design now */
body.vault-skin .predictions-theme-switcher{ display:none !important; }

/* Metallic structural themes keep their metal (they're a deliberate look),
   but align their status colors with the theme tokens */
body.vault-skin .predictions-plugin-wrap[data-theme^="metallic"]{
	--pp-win:var(--vt-win); --pp-loss:var(--vt-loss);
}

/* ── Locked picks — liquid-glass "members only" overlay ───────────────────
   The plugin already gates locked picks SERVER-SIDE (the pick body is never
   printed for non-members — only a .predictions-paywall block is). We style
   that block as a frosted glass panel with a lock, a blurred faux-content
   backdrop, and the accent subscribe button. Free picks render normally. */
body.vault-skin .predictions-pick-card:has(.predictions-paywall){ position:relative; overflow:hidden; }
body.vault-skin .predictions-pick-card .predictions-paywall{
	position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
	text-align:center; border-radius:16px; margin:6px; padding:34px 22px !important;
	background:color-mix(in srgb, var(--vt-surface) 55%, transparent);
	border:1px solid var(--vt-line, rgba(255,255,255,.12));
	-webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
	overflow:hidden;
}
/* Blurred faux "picks" behind the glass (decoration only — no real data). */
body.vault-skin .predictions-pick-card .predictions-paywall::before{
	content:""; position:absolute; inset:0; z-index:0; opacity:.5; filter:blur(7px);
	background:
		linear-gradient(90deg, var(--vt-accent-soft) 30%, transparent 30%) 0 22% / 62% 10px no-repeat,
		linear-gradient(90deg, var(--vt-line) 45%, transparent 45%) 0 44% / 82% 10px no-repeat,
		linear-gradient(90deg, var(--vt-accent-soft) 22%, transparent 22%) 0 66% / 48% 10px no-repeat,
		linear-gradient(90deg, var(--vt-line) 38%, transparent 38%) 0 86% / 70% 10px no-repeat;
	background-color:color-mix(in srgb, var(--vt-raised) 70%, transparent);
	-webkit-mask-image:linear-gradient(#000,#000); mask-image:linear-gradient(#000,#000);
}
body.vault-skin .predictions-pick-card .predictions-paywall > *{ position:relative; z-index:1; }
body.vault-skin .predictions-pick-card .predictions-lock-badge{
	display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font-size:22px;
	background:var(--vt-accent); color:var(--vt-accent-ink);
	box-shadow:0 12px 30px -10px color-mix(in srgb, var(--vt-accent) 60%, transparent);
}
body.vault-skin .predictions-pick-card .predictions-paywall p{ color:var(--vt-text) !important; max-width:26ch; }
body.vault-skin .predictions-pick-card .predictions-paywall-btn{
	background:linear-gradient(135deg, var(--vt-accent), var(--vt-accent-2)) !important; color:var(--vt-accent-ink) !important;
	border:none !important; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:12px 22px; border-radius:11px; text-decoration:none;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	body.vault-skin .predictions-pick-card .predictions-paywall{ background:color-mix(in srgb, var(--vt-surface) 92%, transparent); }
}

/* ── PayPal button — dark-mode-safe frame ──────────────────────────────────
   The PayPal SDK renders its OWN branded button inside an iframe we cannot
   restyle internally. Instead we give it a clean white "card" frame (rounded,
   padded, subtle shadow) so the white/blue PayPal chrome reads as an
   intentional payment card instead of a jarring bare rectangle on a dark bg. */
body.vault-skin .predictions-paypal-button-container{
	background:#fff; border-radius:14px; padding:10px; margin:14px 0;
	box-shadow:0 10px 30px -14px rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.06);
}
body.vault-skin .predictions-paypal-button-container .paypal-buttons{ border-radius:10px; overflow:hidden; display:block; }
/* Loading/placeholder text before the SDK mounts */
body.vault-skin .predictions-paypal-button-container:empty{ display:none; }