/*!
 * Postvanta Design System
 * ---------------------------------------------------------------------------
 * Additive, project-level front-end layer.
 *
 * WHY A STYLESHEET INSTEAD OF SNIPPET EDITS
 * Every page of this site is rendered by a WPCode "run everywhere" PHP snippet
 * that prints a complete HTML document (home page, /studio/, /login/, the
 * legal pages and the 404 all do this). There is no template to restyle. This
 * file is therefore the only place that can apply one coherent visual system
 * to the whole front end, and it is always loaded LAST in <head> so these
 * rules win over the per-snippet styles without rewriting any of them.
 *
 * RULES OF THIS FILE
 * 1. Tokens first (`:root`), behaviour second.
 * 2. Only `background-color` / `color` on <body> — never the `background`
 *    shorthand — so the decorative gradients and canvas layers that already
 *    exist underneath keep working untouched.
 * 3. No new visual noise: no gradients, no shadows that were not asked for,
 *    no decorative elements.
 * 4. Nothing here removes a feature; every rule is an addition or a
 *    normalisation.
 */

/* ==========================================================================
   1. DESIGN TOKENS
   The brand pair already used by the marketing and legal pages: Poppins for
   display, Inter for UI. Everything else (Outfit on /studio/, Manrope from
   the block theme, -apple-system on the auth pages and Arial inside form
   controls) is remapped onto the same two families.
   ========================================================================== */

:root {
	/* Typography */
	--pv-font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Brand accents (taken from the existing home page palette) */
	--pv-primary: #8b5cf6;
	--pv-primary-strong: #7c3aed;
	--pv-accent: #22d3ee;
	--pv-danger: #f87171;
	--pv-success: #34d399;

	/* Surfaces — one dark family for the whole product */
	--pv-bg: #070b17;
	--pv-bg-elevated: #0d1428;
	--pv-surface-1: rgba(255, 255, 255, 0.045);
	--pv-surface-2: rgba(255, 255, 255, 0.075);
	--pv-border: rgba(255, 255, 255, 0.10);
	--pv-border-strong: rgba(255, 255, 255, 0.18);

	/* Text — warm-neutral, all >= 4.5:1 on --pv-bg */
	--pv-text: #f4f6fb;
	--pv-text-muted: rgba(244, 246, 251, 0.78);
	--pv-text-subtle: rgba(244, 246, 251, 0.62);
	--pv-focus: #67e8f9;

	/* Shape */
	--pv-radius-sm: 10px;
	--pv-radius: 14px;
	--pv-radius-lg: 20px;
	--pv-radius-pill: 999px;

	--pv-shadow-1: 0 1px 2px rgba(2, 6, 23, 0.4);
	--pv-shadow-2: 0 8px 24px -8px rgba(2, 6, 23, 0.65);
	--pv-shadow-3: 0 24px 60px -20px rgba(2, 6, 23, 0.75);

	--pv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Spacing scale */
	--pv-space-1: 0.25rem;
	--pv-space-2: 0.5rem;
	--pv-space-3: 0.75rem;
	--pv-space-4: 1rem;
	--pv-space-5: 1.5rem;
	--pv-space-6: 2rem;
	--pv-space-7: 3rem;
	--pv-space-8: 4rem;

	/* Tap target */
	--pv-tap-min: 44px;

	/* Remap the block-theme font presets onto the brand stack so theme
	   content inherits the same typography as the snippet pages. */
	--wp--preset--font-family--manrope: var(--pv-font-body);
	--wp--preset--font-family--system-font: var(--pv-font-body);
	--wp--preset--font-family--fira-code: var(--pv-font-mono);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

html body {
	/* Colour only — background-image is intentionally untouched so the
	   existing radial gradients and particle canvases keep rendering. */
	background-color: var(--pv-bg) !important;
	color: var(--pv-text) !important;
	font-family: var(--pv-font-body) !important;
	/* Long tokens (emails, tokens, URLs) must never create a horizontal
	   scrollbar on small screens. */
	overflow-wrap: break-word;
}

/*
 * Why the three colour declarations above need `!important`:
 * the /login/ and /register/ snippets hard-code
 *   <body style="margin:0;background:#0a1124;font-family:-apple-system,...">
 * as an INLINE style, which outranks every stylesheet rule. This is the only
 * way to normalise those pages without editing the snippets.
 *
 * Only colour properties are forced. `background-image` is never touched, so
 * the radial gradients and particle canvases underneath keep rendering, and
 * the site's own light-mode switch (`html.light-mode body{...!important}`) is
 * more specific so it still wins when toggled on.
 */

/* ==========================================================================
   3. TYPOGRAPHY & HIERARCHY
   One display face, one UI face, one predictable heading rhythm.
   ========================================================================== */

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	font-family: var(--pv-font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	/* Avoids orphan words in headings without touching font size. */
	text-wrap: balance;
}

html body h1 {
	line-height: 1.08;
	letter-spacing: -0.025em;
}

html body h2 {
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* Form controls were falling back to the browser default (Arial / 13.33px UA
   styling) on the auth pages. Inheriting the page font is the single biggest
   consistency win on those forms. */
html body input,
html body select,
html body textarea,
html body button,
html body .um-button,
html body .wp-block-button__link {
	font-family: inherit;
}

/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

/* A single, always-visible keyboard focus ring. `!important` is deliberate:
   several snippets set `outline: none` on inputs, which would otherwise hide
   the focus state entirely. */
html body :focus-visible {
	outline: 2px solid var(--pv-focus) !important;
	outline-offset: 2px !important;
}

html body input[type="hidden"]:focus-visible {
	outline: none !important;
}

/* Footer link lists were 16px tall — far below a usable touch target.
   Vertical padding grows the hit area without changing the layout model
   (inline links keep wrapping normally). */
html body footer a {
	padding-block: 0.55rem;
	transition: color 0.15s var(--pv-ease);
}

html body .footLinks a {
	display: inline-block;
}

/* The home page "orbit" holds decorative platform chips that are animated with
   transforms. On a 375/390px screen those transforms pushed the chips past the
   right edge (measured: scrollWidth 397 on a 375px viewport), so the layout
   scrolled horizontally and the outermost chips were clipped.
   Clipping the orbit container keeps every chip inside the hero. */
html body .orbit {
	overflow: hidden;
}

/* ==========================================================================
   4b. AUTH FORM BUTTONS
   Ultimate Member's `.um-button` was left completely unstyled by the custom
   login / register snippets: the primary "Connexion" submit rendered as
   216 x 16px of bare white text with no background, no border and no padding,
   i.e. no button affordance at all. These rules restore a real, consistent
   button for both the <input type="submit"> and the <a class="um-alt"> form
   without touching the snippet.
   ========================================================================== */

/* The auth snippets also ship their own `.um-button` gradient, but they then
   add `.um-col-alt .um-button { background:none !important; padding:0 !important;
   height:auto !important }` which was meant for the secondary link only and
   accidentally wipes the primary submit too. The selectors below therefore
   out-specify `.um-col-alt .um-button` (0,3,2 / 1,0,2 vs 0,2,0) on purpose. */
html body .um-button,
html body .um-col-alt .um-button,
html body #um-submit-btn {
	display: block !important;
	width: 100%;
	min-height: var(--pv-tap-min);
	padding: 0.75rem 1.25rem !important;
	border: 1px solid transparent !important;
	border-radius: var(--pv-radius-pill) !important;
	background-color: var(--pv-primary) !important;
	background-image: linear-gradient(135deg, var(--pv-primary-strong), var(--pv-primary)) !important;
	color: #ffffff !important;
	font-family: var(--pv-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--pv-shadow-2) !important;
	transition: transform 0.15s var(--pv-ease), box-shadow 0.15s var(--pv-ease), filter 0.15s var(--pv-ease);
}

html body .um-button:hover,
html body .um-col-alt .um-button:hover,
html body #um-submit-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: var(--pv-shadow-3) !important;
}

html body .um-button:active,
html body .um-col-alt .um-button:active,
html body #um-submit-btn:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

/* Secondary / alternate action stays quiet but clearly clickable. */
html body .um-button.um-alt,
html body a.um-button.um-alt,
html body .um-col-alt .um-button.um-alt,
html body .um-col-alt a.um-button.um-alt {
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	border-color: var(--pv-border-strong) !important;
	color: var(--pv-text) !important;
	box-shadow: none !important;
}

html body .um-button.um-alt:hover,
html body a.um-button.um-alt:hover,
html body .um-col-alt a.um-button.um-alt:hover {
	background-color: rgba(255, 255, 255, 0.11) !important;
	color: var(--pv-text) !important;
}

/* Loading / disabled must stay visually distinct. */
html body .um-button:disabled,
html body .um-button[disabled],
html body .um-button[aria-disabled="true"],
html body #um-submit-btn:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none !important;
	filter: none;
}

/* Text links inside the auth card were 20-22px tall. */
html body .um-link-alt,
html body .um-left a,
html body .um-right a {
	display: inline-block;
	padding-block: 0.5rem;
}

/* ==========================================================================
   5. CONTRAST CORRECTIONS (measured, not guessed)
   ========================================================================== */

/* Every rule in this block fixes a failure that was MEASURED in the browser
   (effective foreground composited over its real background) rather than
   guessed. Ratios quoted are the measured "before" values. */

/* Home page calendar day numbers rendered at rgba(255,255,255,.3) on a
   near-black tile - measured 2.64:1 at 12px, well under the 4.5:1 minimum. */
html body .calGrid .n,
html body .calGrid .day .n {
	color: var(--pv-text-muted) !important;
}

/* The /login/ and /register/ wordmark is an unclassed <div> whose colour
   (#5e6d9c on #0f1835 = 3.45:1) is set inline by the snippet, so a plain
   selector cannot win. It is the only element on those pages using the
   4px letter-spacing brand treatment, which makes the attribute selector
   precise rather than a broad override. */
html body.pv-ds div[style*="letter-spacing:4px"] {
	color: #a9b8e2 !important;
}

/* Required-field marker. WooCommerce / Ultimate Member style it #aa0000,
   which is 7.0:1 on white but only 2.53:1 on the dark surface — this was the
   one place where unifying the background would have made things worse, so it
   is corrected here. */
html body .required,
html body span.required {
	color: var(--pv-danger) !important;
}

/* /privacy-policy and /terms table of contents: 3.51:1 at 11-12px. */
html body aside.toc a,
html body aside.toc h3,
html body aside.toc h4,
html body aside.toc li {
	color: var(--pv-text-muted) !important;
}

/* /studio/ supporting labels, all 3.7-4.3:1 at 9-12.5px. */
html body .ob-nav__section,
html body .ks-mockup-row-meta,
html body .ks-flow-ai-line-lbl,
html body .ks-trust strong,
html body .ks-trust span {
	color: var(--pv-text-muted) !important;
}

/* /password-reset/ Ultimate Member description text: #777 on the dark
   surface measured 4.39:1 at 17px. */
html body .um-field-block p,
html body .um-field-block div {
	color: var(--pv-text-muted) !important;
}

/* Brand badge on the legal pages: #8b5cf6 on the tinted hero measured
   4.27:1 at 12px - nudged to a lighter tint of the same hue. */
html body .hero .badge {
	color: #b9a5ff !important;
}

/* Legal pages (/privacy-policy, /terms): every secondary line was authored at
   rgba(255,255,255,.38) = 3.51:1. Same fix, one level up the stack. */
html body.pv-ds article.article > p,
html body.pv-ds article.article > section > p,
html body.pv-ds .platCard__api,
html body.pv-ds .infoCard > p,
html body.pv-ds footer a,
html body.pv-ds footer span,
html body.pv-ds footer div.inner {
	color: var(--pv-text-muted) !important;
}

/* /studio/ marketing mock-ups. */
html body .ks-no,
html body .ks-cal-mockup-dow,
html body .ks-bento-test-metric-lbl,
html body .ks-bento-test-role,
html body .ks-fine {
	color: var(--pv-text-muted) !important;
}

/* /studio/ purple accents on tinted dark panels measured 4.05-4.2:1 at
   9-9.5px. Same hue, lighter tint. */
html body .ks-flow-ai-tags span,
html body .ks-cal-mockup-day.--today {
	color: #b9a5ff !important;
}

/* /studio/ "Calendrier IA" card tag was #3a4a7a on a dark panel - 2.23:1,
   i.e. almost invisible. */
html body .ks-bento-tag {
	color: #c7d2fe !important;
}

/* ==========================================================================
   6. MEDIA & OVERFLOW GUARDS
   ========================================================================== */

html body img,
html body video,
html body iframe,
html body embed,
html body object {
	max-width: 100%;
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html body *,
	html body *::before,
	html body *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   8. NAVIGATION
   The block-theme header currently lists every page in the site (18 items,
   including OAuth callback and utility pages). Nothing is removed here — that
   is a content decision — but the list is made to wrap, space and scroll
   properly instead of overflowing.
   ========================================================================== */

html body .wp-block-navigation__container {
	flex-wrap: wrap;
	row-gap: 0.25rem;
	column-gap: 0.25rem;
}

/* The mobile overlay has to be able to scroll when it holds this many items. */
html body .wp-block-navigation__responsive-container-content {
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

html body .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-block: 0.25rem;
}

/* ==========================================================================
   9. PRINT
   ========================================================================== */

@media print {
	html body {
		background: #fff;
		color: #000;
	}
}

/*!
 * Postvanta Design System — Section 10: Buttons & Interactive UI
 * ---------------------------------------------------------------------------
 * EXTENSION of the existing design system. Nothing above this line is modified.
 *
 * SAFETY RULES OBSERVED HERE
 * 1. Every selector is anchored to `html body`, so nothing reaches wp-admin
 *    (the stylesheet is not enqueued there in any case).
 * 2. WooCommerce-owned controls are EXCLUDED with :not() rather than restyled
 *    and undone with `revert`. This matters: `revert` rolls back to the
 *    USER-AGENT stylesheet, which would strip WooCommerce's own rounding and
 *    make its buttons look broken. :not() simply means our rules never match.
 *      excluded: .add_to_cart_button, .product_type_simple,
 *                .wc-block-components-button, .wc-block-components-*-button,
 *                .woocommerce-Input, .woocommerce-select, #place_order,
 *                and anything inside .woocommerce-checkout / #checkout.
 * 3. Destructive actions get their own, deliberately LOWER visual weight than
 *    the primary button, so "Delete" can never out-shout "Confirm".
 * 4. Transitions only; all of them collapse under prefers-reduced-motion,
 *    which section 7 of this file already enforces globally.
 */

/* ==========================================================================
   10.0 WOO / CHECKOUT EXCLUSION LIST
   Kept as one place so it stays auditable.
   ========================================================================== */

/* ==========================================================================
   10.1 BUTTON TOKENS
   ========================================================================== */

:root {
	--pv-btn-height: 46px;
	--pv-btn-height-sm: 38px;
	--pv-btn-pad-x: 1.4rem;
	--pv-btn-radius: var(--pv-radius-pill);

	--pv-btn-primary-bg: linear-gradient(135deg, var(--pv-primary-strong) 0%, var(--pv-primary) 55%, #a855f7 100%);
	--pv-btn-primary-bg-hover: linear-gradient(135deg, #6d28d9 0%, #7c3aed 55%, #9333ea 100%);

	--pv-btn-secondary-bg: rgba(255, 255, 255, 0.06);
	--pv-btn-secondary-bg-hover: rgba(255, 255, 255, 0.11);
	--pv-btn-secondary-border: var(--pv-border-strong);

	--pv-btn-danger-bg: rgba(248, 113, 113, 0.12);
	--pv-btn-danger-bg-hover: rgba(248, 113, 113, 0.2);
	--pv-btn-danger-border: rgba(248, 113, 113, 0.45);
	--pv-btn-danger-text: #fca5a5;

	--pv-btn-transition: transform 0.15s var(--pv-ease), box-shadow 0.15s var(--pv-ease),
		filter 0.15s var(--pv-ease), background-color 0.15s var(--pv-ease),
		border-color 0.15s var(--pv-ease), color 0.15s var(--pv-ease);
}

/* ==========================================================================
   10.2 SHARED BUTTON BASE
   ========================================================================== */

html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn, .k-magnetic,
	.ob-sub-plan__btn, .ob-credits-widget__add, .ob-credit-modal__cta,
	.ob-cal__clear-btn, .ob-cal__today-btn, .ob-docs-nav__btn, .ob-sidebar-toggle):not(.add_to_cart_button):not(.product_type_simple):not(.wc-block-components-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--pv-btn-height);
	padding: 0.7rem var(--pv-btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--pv-btn-radius);
	font-family: var(--pv-font-body);
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
	transition: var(--pv-btn-transition);
}

/* ==========================================================================
   10.3 PRIMARY
   ========================================================================== */

html body :is(.ks-btn-primary, .ob-sub-plan__btn, .ob-credit-modal__cta, .ob-credits-widget__add):not(.add_to_cart_button):not(.product_type_simple) {
	background-color: var(--pv-primary) !important;
	background-image: var(--pv-btn-primary-bg) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.85) !important;
}

html body :is(.ks-btn-primary, .ob-sub-plan__btn, .ob-credit-modal__cta, .ob-credits-widget__add):not(.add_to_cart_button):not(.product_type_simple):hover {
	background-image: var(--pv-btn-primary-bg-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -12px rgba(139, 92, 246, 0.95) !important;
	filter: saturate(1.08);
}

html body :is(.ks-btn-primary, .ob-sub-plan__btn, .ob-credit-modal__cta, .ob-credits-widget__add):not(.add_to_cart_button):not(.product_type_simple):active {
	transform: translateY(0);
	box-shadow: 0 4px 12px -8px rgba(139, 92, 246, 0.8) !important;
	filter: brightness(0.95);
}

/* Homepage CTAs carry .ks-btn without a variant; treat them as primary. */
html body a.ks-btn:not(.ks-btn-ghost):not(.ks-btn-primary):not(.add_to_cart_button) {
	background-color: var(--pv-primary) !important;
	background-image: var(--pv-btn-primary-bg) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.85) !important;
}

html body a.ks-btn:not(.ks-btn-ghost):not(.ks-btn-primary):not(.add_to_cart_button):hover {
	background-image: var(--pv-btn-primary-bg-hover) !important;
	transform: translateY(-1px);
}

/* ==========================================================================
   10.4 SECONDARY / GHOST
   ========================================================================== */

html body :is(.ks-btn-ghost, .k-btn, .ob-cal__clear-btn, .ob-cal__today-btn, .btn):not(.add_to_cart_button):not(.product_type_simple) {
	background-color: var(--pv-btn-secondary-bg) !important;
	background-image: none !important;
	border-color: var(--pv-btn-secondary-border) !important;
	color: var(--pv-text) !important;
	box-shadow: none !important;
}

html body :is(.ks-btn-ghost, .k-btn, .ob-cal__clear-btn, .ob-cal__today-btn, .btn):not(.add_to_cart_button):not(.product_type_simple):hover {
	background-color: var(--pv-btn-secondary-bg-hover) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   10.5 DESTRUCTIVE — quieter than primary on purpose
   ========================================================================== */

html body :is(a, button):is([class*="danger"], [class*="delete"], [class*="disconnect"], [class*="deconnect"], [class*="cancel"], [class*="remove"]):not(.add_to_cart_button):not(.product_type_simple):not(.wc-block-components-button):not(#place_order) {
	background-color: var(--pv-btn-danger-bg) !important;
	background-image: none !important;
	border-color: var(--pv-btn-danger-border) !important;
	color: var(--pv-btn-danger-text) !important;
	box-shadow: none !important;
	transition: var(--pv-btn-transition);
}

html body :is(a, button):is([class*="danger"], [class*="delete"], [class*="disconnect"], [class*="deconnect"], [class*="cancel"], [class*="remove"]):not(.add_to_cart_button):not(.product_type_simple):not(.wc-block-components-button):not(#place_order):hover {
	background-color: var(--pv-btn-danger-bg-hover) !important;
	border-color: var(--pv-danger) !important;
	color: #fecaca !important;
}

/* ==========================================================================
   10.6 DISABLED + LOADING
   ========================================================================== */

html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn,
	.ob-sub-plan__btn, .ob-credit-modal__cta, .ob-cal__clear-btn,
	.ob-cal__today-btn, .ob-docs-nav__btn)[disabled],
html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn,
	.ob-sub-plan__btn, .ob-credit-modal__cta, .ob-cal__clear-btn,
	.ob-cal__today-btn, .ob-docs-nav__btn)[aria-disabled="true"] {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	transform: none !important;
	filter: grayscale(0.35) !important;
	box-shadow: none !important;
	pointer-events: none;
}

html body :is(button, a)[aria-busy="true"],
html body :is(.ks-btn, .ob-sub-plan__btn, .ob-credit-modal__cta).--loading {
	opacity: 0.75 !important;
	cursor: progress !important;
	pointer-events: none;
}

/* ==========================================================================
   10.7 FORM CONTROLS (WooCommerce inputs excluded)
   ========================================================================== */

html body :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select):not(.woocommerce-Input):not(.woocommerce-select):not(.wc-block-components-input):not(.um-field):not([data-wp-block]) {
	background-color: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text);
	min-height: 44px;
	padding: 0.6rem 0.85rem;
	transition: var(--pv-btn-transition);
}

html body :is(input, textarea, select):not([type="submit"]):not([type="button"]):not(.woocommerce-Input):not([data-wp-block]):hover {
	border-color: var(--pv-border-strong);
}

html body :is(input, textarea, select):focus:not(.woocommerce-Input):not([data-wp-block]) {
	border-color: var(--pv-primary);
	background-color: rgba(255, 255, 255, 0.06);
}

html body ::placeholder {
	color: var(--pv-text-subtle);
	opacity: 1;
}

html body input[type="checkbox"],
html body input[type="radio"] {
	accent-color: var(--pv-primary);
	width: 18px;
	height: 18px;
	cursor: pointer;
}

html body label {
	color: var(--pv-text-muted);
	font-weight: 500;
}

/* ==========================================================================
   10.8 NAVIGATION ITEMS
   ========================================================================== */

html body .ob-nav__item {
	min-height: 40px;
	padding: 0.5rem 0.85rem;
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text-muted);
	font-weight: 500;
	transition: var(--pv-btn-transition);
}

html body .ob-nav__item:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--pv-text);
}

html body .ob-nav__item.--active,
html body .ob-nav__item[aria-current="page"],
html body .ob-nav__item.is-active {
	background-color: rgba(139, 92, 246, 0.16);
	color: #ffffff;
	box-shadow: inset 2px 0 0 var(--pv-primary);
}

html body .ob-footer-link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.3rem 0.5rem;
	border-radius: 8px;
	color: var(--pv-text-muted);
	transition: var(--pv-btn-transition);
}

html body .ob-footer-link:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}

html body :is(.ob-sidebar-toggle, .ob-mobile-header__burger) {
	min-width: var(--pv-btn-height-sm);
	min-height: var(--pv-btn-height-sm);
	border-radius: var(--pv-radius-sm);
	border: 1px solid var(--pv-border);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--pv-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--pv-btn-transition);
}

html body :is(.ob-sidebar-toggle, .ob-mobile-header__burger):hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/* ==========================================================================
   10.9 TABS / SEGMENTED
   ========================================================================== */

html body :is(.ob-tuto-tab, .ob-docs-nav__btn) {
	min-height: var(--pv-btn-height-sm);
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-pill);
	background-color: rgba(255, 255, 255, 0.04);
	color: var(--pv-text-muted);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--pv-btn-transition);
}

html body :is(.ob-tuto-tab, .ob-docs-nav__btn):hover {
	background-color: rgba(255, 255, 255, 0.09);
	color: var(--pv-text);
}

html body :is(.ob-tuto-tab, .ob-docs-nav__btn).--active,
html body :is(.ob-tuto-tab, .ob-docs-nav__btn)[aria-selected="true"] {
	background-color: rgba(139, 92, 246, 0.2);
	border-color: rgba(139, 92, 246, 0.55);
	color: #ffffff;
}

/* ==========================================================================
   10.10 CARDS AND PANELS
   ========================================================================== */

html body :is(.ks-bento-card, .ks-flow-card, .ob-card, .ob-panel) {
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-lg);
	background-color: var(--pv-bg-elevated);
	transition: var(--pv-btn-transition);
}

html body :is(.ks-bento-card, .ks-flow-card):hover {
	border-color: var(--pv-border-strong);
	box-shadow: var(--pv-shadow-2);
}

/* ==========================================================================
   10.11 EMPTY STATES, ALERTS
   ========================================================================== */

html body :is(.ob-empty, .ob-empty-state, .ob-cal__empty) {
	border: 1px dashed var(--pv-border-strong);
	border-radius: var(--pv-radius);
	padding: 1.75rem 1.25rem;
	text-align: center;
	color: var(--pv-text-subtle);
	background-color: rgba(255, 255, 255, 0.02);
}

html body :is(.ob-notice, .ob-alert, .ob-toast) {
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-sm);
	padding: 0.75rem 1rem;
	background-color: rgba(255, 255, 255, 0.045);
	color: var(--pv-text);
}

html body :is(.ob-alert--error, .ob-notice--error, .ob-toast--error) {
	border-color: rgba(248, 113, 113, 0.4);
	background-color: rgba(248, 113, 113, 0.1);
	color: #fecaca;
}

html body :is(.ob-alert--success, .ob-notice--success, .ob-toast--success) {
	border-color: rgba(52, 211, 153, 0.4);
	background-color: rgba(52, 211, 153, 0.1);
	color: #a7f3d0;
}

/* ==========================================================================
   10.12 MODALS
   ========================================================================== */

html body :is(.um-modal, .ob-modal, dialog) :is(button, .um-button, [class*="btn"]) {
	min-height: var(--pv-btn-height);
	border-radius: var(--pv-btn-radius-pill);
	transition: var(--pv-btn-transition);
}

html body .um-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 36px;
	border-radius: 50%;
	border: 1px solid var(--pv-border);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--pv-text-muted);
	cursor: pointer;
	transition: var(--pv-btn-transition);
}

html body .um-modal-close:hover {
	background-color: rgba(248, 113, 113, 0.16);
	border-color: var(--pv-btn-danger-border);
	color: #fecaca;
}

/* ==========================================================================
   10.13 BLOCK-THEME BUTTONS (WooCommerce blocks excluded)
   ========================================================================== */

html body .wp-block-button__link:not(.add_to_cart_button):not(.product_type_simple):not(.wc-block-components-button),
html body .wp-element-button:not(.add_to_cart_button):not(.product_type_simple):not(.wc-block-components-button) {
	min-height: var(--pv-btn-height);
	padding: 0.7rem 1.4rem;
	border-radius: var(--pv-btn-radius-pill);
	font-weight: 600;
	font-size: 0.975rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	transition: var(--pv-btn-transition);
}

html body .wp-block-navigation__responsive-container-open,
html body .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text);
	transition: var(--pv-btn-transition);
}

html body .wp-block-navigation__responsive-container-open:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   10.14 TABLES / PAGINATION
   ========================================================================== */

html body :is(table, .ob-table) :is(button, a[class*="btn"], [class*="action"]) {
	min-height: 34px;
	padding: 0.35rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--pv-border);
	background-color: rgba(255, 255, 255, 0.04);
	color: var(--pv-text-muted);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--pv-btn-transition);
}

html body :is(table, .ob-table) :is(button, a[class*="btn"], [class*="action"]):hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

html body :is(.pagination, .ob-pagination) :is(a, button, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 0.6rem;
	border: 1px solid var(--pv-border);
	border-radius: 8px;
	color: var(--pv-text-muted);
	text-decoration: none;
	transition: var(--pv-btn-transition);
}

html body :is(.pagination, .ob-pagination) :is(a, button, .page-numbers):hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html body :is(.pagination, .ob-pagination) .current,
html body :is(.pagination, .ob-pagination) [aria-current="page"] {
	background-color: rgba(139, 92, 246, 0.2);
	border-color: rgba(139, 92, 246, 0.5);
	color: #ffffff;
}

/* ==========================================================================
   10.15 RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn,
		.ob-sub-plan__btn, .ob-credit-modal__cta, .ob-credits-widget__add):not(.add_to_cart_button) {
		min-height: var(--pv-btn-height-sm);
		padding: 0.6rem 1.1rem;
		font-size: 0.94rem;
	}
}

@media (max-width: 480px) {
	html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn,
		.ob-sub-plan__btn, .ob-credit-modal__cta, .ob-credits-widget__add):not(.add_to_cart_button) {
		width: 100%;
	}

	html body .ob-nav__item {
		min-height: 44px;
	}
}

@media (max-width: 375px) {
	html body :is(.ks-btn, .ks-btn-primary, .ks-btn-ghost, .k-btn, .btn):not(.add_to_cart_button) {
		font-size: 0.9rem;
		padding: 0.6rem 0.9rem;
	}
}