/*
Theme Name: Sparkplug
Theme URI: https://ninjaforms.com/
Author: Saturday Drive
Author URI: https://saturdaydrive.com
Description: The spark that ignites beautiful website design.
Version: 0.2.159
Template: kadence
Text Domain: nf-spark
*/

/* ==========================================================================
   Base Layout & Browser Consistency
   ========================================================================== */

/* Force scrollbar to always be visible to prevent layout shift */
html {
    overflow-y: scroll;
}

/* ==========================================================================
   Layout Overrides
   ========================================================================== */

/* Main content area background for reveal footer effect */
main.wrap, #wrapper {
    background-color: var(--sprk-color-background);
}

/* ==========================================================================
   Typography with Custom Properties
   ========================================================================== */

h1, .h1 {
    font-size: var(--sprk-font-size-4xl);
    line-height: var(--sprk-line-height-tight);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
}

h2, .h2 {
    font-size: var(--sprk-font-size-3xl);
    line-height: var(--sprk-line-height-tight);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
}

h3, .h3 {
    font-size: var(--sprk-font-size-xxl);
    line-height: var(--sprk-line-height-snug);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
}

h4, .h4 {
    font-size: var(--sprk-font-size-xl);
    line-height: var(--sprk-line-height-snug);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
}

h5, .h5 {
    font-size: var(--sprk-font-size-lg);
    line-height: var(--sprk-line-height-base);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
}

h6, .h6 {
    font-size: var(--sprk-font-size-base);
    line-height: var(--sprk-line-height-base);
    font-weight: var(--sprk-font-weight-bold);
    font-family: var(--sprk-font-heading);
    color: var(--global-palette5);
}

body {
    font-family: var(--sprk-font-body);
    font-size: var(--sprk-font-size-base);
    line-height: var(--sprk-line-height-base);
    font-weight: var(--sprk-font-weight-regular);
    color: var(--sprk-color-text-primary);
}

/* ==========================================================================
   Link Styles
   ========================================================================== */

/* Global link defaults - override Kadence global.min.css */
a,
a:visited,
.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list),
.kadence-posts-list .loop-entry h2.entry-title a {
    color: var(--sprk-color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.25em;
    transition: text-underline-offset 0.1s linear,
                text-decoration-color 0.1s linear,
                text-decoration-thickness 0.1s linear;
}

a:hover,
a:focus,
.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list):hover,
.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list):focus,
.kadence-posts-list .loop-entry h2.entry-title a:hover,
.kadence-posts-list .loop-entry h2.entry-title a:focus {
    color: var(--sprk-color-text-primary);
    text-decoration-color: var(--sprk-color-accent-hover);
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.36em; /* Moves underline down on hover (further from text) */
}

/* Base link styles for content areas - COMMENTED OUT FOR TESTING
   (May be redundant with global link styles - testing if needed)
*/
/*
.entry-content a,
.content-bg a,
article a {
    color: var(--sprk-color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.25em;
    transition: text-underline-offset 0.1s linear,
                text-decoration-color 0.1s linear,
                text-decoration-thickness 0.1s linear;
}

.entry-content a:hover,
.entry-content a:focus,
.content-bg a:hover,
.content-bg a:focus,
article a:hover,
article a:focus {
    text-decoration-color: var(--sprk-color-accent-hover);
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.36em;
}

.entry-content a:visited,
.content-bg a:visited,
article a:visited {
    color: var(--sprk-color-text-secondary);
    text-decoration-color: var(--sprk-color-accent);
}
*/

/* ==========================================================================
   Typography Overrides
   ========================================================================== */

h1.entry-title,
h1.page-title {
    font-size: var(--sprk-font-size-title);
}

/* Override Kadence default title background */
.entry-hero-container-inner {
    background: transparent;
}

/* Display Title & Sub-title */
.nf-spark-display-hero,
.entry-hero-layout-standard,
.entry-hero-layout-inherit,
main.page-404__main {
    margin-block-start: 4.5rem;  /* mirrors content_spacing desktop top */
    margin-block-end: 5rem;

    @media (max-width: 1024px) {
        margin-block-start: 3rem;
        margin-block-end: 3.5rem;
    }

    @media (max-width: 767px) {
        margin-block-start: 2.5rem;
        margin-block-end: 3rem;
    }

    & .entry-hero-container-inner .entry-header {
        min-height: auto;
    }

    /* Zeroed for cross-site testing (2026-05-07) — under flex parents
       (no margin collapse), this stacked with the first content
       element's own margin-top, producing additive spacing on some
       pages. Reviewing the dev mirror to identify which pages still
       need this gap before writing a more targeted rule.
       Original value: var(--sprk-space-4). */
    & + .content-area {
        margin-block-start: 0;
    }
}

/* WP/template title (no Display Title) — tighter bottom margin.
   Mirrors the selector list in the parent rule above so Kadence's native
   .entry-hero-layout-standard / -inherit wrappers get the same treatment
   as our custom .nf-spark-display-hero when no Display Title is present. */
:is(
    .nf-spark-display-hero,
    .entry-hero-layout-standard,
    .entry-hero-layout-inherit
):not(:has(.nf-spark-display-title)) {
    margin-block-end: 2rem;
}

/* Single-title default alignment — left-align the hero header on any
   single post / CPT whose `<post_type>_title_align` customizer option
   is unset (resolves to 'inherit' in nf_spark_render_hero()). Per-post-
   type overrides emit `title-align-{value}` which doesn't match this
   selector, so an explicit center/right setting still wins.

   Overrides Kadence's `.entry-hero-container-inner .entry-header` rule
   which forces text-align: center + align-items: center on the
   column-flex header. Both must be reset to fully left-align. */
.single .title-align-inherit,
.single .title-tablet-align-inherit,
.single .title-mobile-align-inherit {
    text-align: left;
    align-items: flex-start;
}

h1.nf-spark-display-title,
h1.archive-title {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 900px; /* was 1024px, just testing a smaller size */
}

/* Shared color for any subtitle-style element. `.entry-subtitle` is auto-
   emitted on the subtitle <p> by nf_spark_render_hero(); archive
   descriptions are Kadence-emitted and grouped here so they inherit the
   same treatment. Future subtitle variants get the color "for free" as
   long as they ride on .entry-subtitle. */
.entry-subtitle,
.archive-description p {
    color: var(--global-palette5);
}

/* Large/standard subtitle treatment — sizing/spacing for the dominant
   display-subtitle variant. FT tagline opts out of this and uses its
   own .sd-gb-ft__tagline rule for a tighter visual size. */
.nf-spark-display-subtitle,
.archive-description p {
    font-size: var(--sprk-font-size-xxl);
    max-width: 900px; /* was 1024px, just testing a smaller size */
    margin-block-start: 0.75rem;
    margin-block-end: 0;
    line-height: var(--sprk-line-height-snug);
}

.archive-description p {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Global Sidebar Styles
   ========================================================================== */

.primary-sidebar h2 {
    font-size: var(--sprk-font-size-xxl);
    margin-bottom: 0.5em;
}

.primary-sidebar h3 {
    font-size: var(--sprk-font-size-xl);
    margin-bottom: 0.5em;
}

.primary-sidebar p:first-child,
.primary-sidebar :is(h1, h2, h3, h4, h5, h6) + p {
    margin-top: 0;
}

.primary-sidebar p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Focus States for Accessibility
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--sprk-color-accent);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   Rich Text Content Formatting
   Baseline prose/article styles for Kadence single-post content areas.
   Targets .entry-content.single-content on any singular view (.single body
   class). Font size overrides for specific post types (blog, downloads) are
   handled separately in their own sections further down.
   ========================================================================== */

.wp-singular .entry-content {

    /* --- Heading Margins --- */

    & h1, & h2, & h3,
    & h4, & h5, & h6 {
        margin: 1.25em 0 0.5em;
    }

    /* First heading needs no top gap */
    & h1:first-child, & h2:first-child, & h3:first-child,
    & h4:first-child, & h5:first-child, & h6:first-child {
        margin-top: 0;
    }

    /* Element immediately after a heading needs no top gap */
    & h1 + *, & h2 + *, & h3 + *,
    & h4 + *, & h5 + *, & h6 + * {
        margin-top: 0;
    }

    /* --- Block Element Spacing --- */

    /* Paragraphs - em-based spacing scales with font size */
    & p {
        margin-top: 0;
        margin-bottom: 1.33em; /* 4:3 ratio - comfortable for larger fonts */
    }

    /* Visual break elements - more space for hierarchy */
    & blockquote,
    & figure {
        margin-top: 0;
        margin-bottom: 2em;
    }

    /* Structural/code elements - fixed spacing for consistency */
    & hr,
    & table,
    & pre,
    & form,
    & address {
        margin-top: 0;
        margin-bottom: var(--global-md-spacing);
    }

    /* Last child in any container needs no bottom gap */
    & p:last-child,
    & address:last-child,
    & figure:last-child,
    & hr:last-child,
    & table:last-child,
    & pre:last-child,
    & form:last-child,
    & blockquote:last-child,
    & h1:last-child, & h2:last-child, & h3:last-child,
    & h4:last-child, & h5:last-child, & h6:last-child,
    & ul:last-child,
    & ol:last-child {
        margin-bottom: 0;
    }

    /* --- Lists --- */

    & ul,
    & ol {
        margin: 0 0 1.33em; /* Matches paragraph spacing */
        padding-left: 2em;
    }

    /* Nested lists — no extra bottom gap */
    & li > ul,
    & li > ol {
        margin: 0;
    }

    /* --- Images --- */

    & p > img {
        display: inline-block;
    }

    & p > img.aligncenter {
        display: block;
    }
}


/* ==========================================================================
   Header
   ========================================================================== */

.wp-block-kadence-header {
    z-index: 5;
    background: var(--sprk-color-background);
}

body.mega-menu-open .wp-block-kadence-header {
    z-index: 10012;
}

/* Card-edit modal on the account billing page sits in a stacking context
   inside <main>; drop the header below it so it doesn't peek through. */
body.nf-spark-cc-modal-active .wp-block-kadence-header {
    z-index: 1;
}

/* Mega menu backdrop overlay — dims page behind open sub-menus */
body.mega-menu-open #wrapper::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(2px);
    z-index: -1;
    opacity: 0;
    animation: nf-spark-overlay-in var(--sprk-drawer-duration) var(--sprk-drawer-easing) forwards;
}

@keyframes nf-spark-overlay-in {
    to { 
        opacity: 1;
        z-index: 10011;
    }
}

/* ==========================================================================
   Off-Canvas Menu Panel
   ========================================================================== */

.nf-spark-menu-panel__content a {
    text-decoration-color: transparent;
}

.nf-spark-menu-panel__content a:hover,
.nf-spark-menu-panel__content a:focus {
    text-decoration-color: var(--sprk-color-accent-hover);
}

/* ==========================================================================
   Off-Canvas Navigation System
   ========================================================================== */

/* Off-Canvas System Container */
.nf-spark-off-canvas-system {
    position: relative;
}

.nf-spark-off-canvas-system::before {
    content: '';
    position: fixed;
    top: 0;
    right: -1px; /* Hide by default (-1px off screen) */
    width: 1px; /* Start narrow */
    height: 100vh;
    background: var(--sprk-color-background);
    z-index: var(--sprk-drawer-toggle-z);
    opacity: 1;
}

.panels-active.panel-opening .nf-spark-off-canvas-system::before {
    /* Maintain full width when panels are active, +1px to cover the -1px offset */
    width: calc(var(--scrollbar-offset) + 1px);
    animation: scrollGapCoverExpandFade 800ms var(--sprk-drawer-easing) forwards;
}

.panels-active.panel-switching .nf-spark-off-canvas-system::before {
    animation: scrollGapCoverSwitchFade 650ms var(--sprk-drawer-easing) forwards;
}

@keyframes scrollGapCoverExpandFade {
    0% {
        width: 1px;
        background: var(--sprk-color-background);
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    15% {
        width: calc(var(--scrollbar-offset) + 1px); /* Expand quickly to scrollbar width + 1px to cover offset */
        background: var(--sprk-color-background);
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    40% {
        width: calc(var(--scrollbar-offset) + 1px); /* Maintain width */
        background: var(--sprk-color-background);
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    60% {
        width: calc(var(--scrollbar-offset) + 1px); /* Maintain width */
        background: var(--sprk-color-background-subtle); /* Color change starts sooner */
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    99% {
        width: calc(var(--scrollbar-offset) + 1px); /* Maintain width while fading */
        background: var(--sprk-color-background-subtle);
        opacity: 0;
        z-index: var(--sprk-drawer-toggle-z);
    }
    100% {
        width: calc(var(--scrollbar-offset) + 1px); /* Maintain width at end */
        background: var(--sprk-color-background-subtle);
        opacity: 0;
        z-index: -1;
    }
}

@keyframes scrollGapCoverSwitchFade {
    0% {
        width: calc(var(--scrollbar-offset) + 1px); /* Full width instantly + 1px to cover offset */
        background: var(--sprk-color-background-subtle);
        opacity: 0;
        z-index: var(--sprk-drawer-toggle-z);
    }
    15% {
        width: calc(var(--scrollbar-offset) + 1px); /* Hold visible longer during switch */
        background: var(--sprk-color-background-subtle);
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    85% {
        width: calc(var(--scrollbar-offset) + 1px); /* Hold visible longer during switch */
        background: var(--sprk-color-background-subtle);
        opacity: 1;
        z-index: var(--sprk-drawer-toggle-z);
    }
    99% {
        width: calc(var(--scrollbar-offset) + 1px); /* Quick fade out at the end */
        background: var(--sprk-color-background-subtle);
        opacity: 0;
        z-index: var(--sprk-drawer-toggle-z);
    }
    100% {
        width: calc(var(--scrollbar-offset) + 1px);
        background: var(--sprk-color-background-subtle);
        opacity: 0;
        z-index: -1;
    }
}

/* Tab Column Container - Full Height */
.nf-spark-off-canvas-tab-column {
    position: fixed;
    top: 0; /* Back to top of viewport */
    right: -1px; /* Mobile-first: slightly off-screen for cleaner edge */
    width: 40px; /* Mobile-first: wider buttons */
    height: 100vh; /* Full height */
    z-index: var(--sprk-drawer-toggle-z);

    /* Hidden by default, shown on scroll */
    opacity: 0;
    visibility: hidden;

    transition:
        right var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        opacity var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing),
        visibility var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing),
        background-color var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        border-color var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        box-shadow var(--sprk-drawer-duration) var(--sprk-drawer-easing);
}

/* WordPress Admin Bar Adjustments */
.admin-bar .nf-spark-off-canvas-tab-column,
.admin-bar .nf-spark-off-canvas-panels {
    top: var(--sprk-admin-bar-offset);
    height: calc(100vh - var(--sprk-admin-bar-offset));
}

/* Show tabs when scrolled (like side branding) */
.scrolled .nf-spark-off-canvas-tab-column {
    opacity: 1;
    visibility: visible;
}

/* Slide tabs down when visible */
.scrolled .nf-spark-off-canvas-toggles {
    top: var(--sprk-sticky-top); /* Slide down to final position */
}

/* When panels are active, move tabs to right edge (0px from right) */
.panels-active .nf-spark-off-canvas-tab-column {
    right: 0; /* Move to right edge when panels are open */
    opacity: 1;
    visibility: visible;
}

/* Slide tabs down when panels are active */
.panels-active .nf-spark-off-canvas-toggles {
    top: var(--sprk-sticky-top); /* Slide down to final position */
    gap: 2px; /* Tighter gap when panels are open */
}

/* Toggle Buttons Container - Positioned within Column */
.nf-spark-off-canvas-toggles {
    position: absolute;
    top: calc(var(--sprk-sticky-top) - 16px); /* Start 16px higher than final position */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sprk-space-1); /* Default gap between tabs */
    transition:
        transform var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        top var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing);
}

.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Mobile-first: wider buttons */
    height: 48px;
    padding: var(--sprk-space-1);
    background: none;
    cursor: pointer;
    font-size: var(--sprk-font-size-lg);
    color: var(--sprk-color-text-primary);
    position: relative;
    overflow: hidden;
    box-shadow: none !important; /* Override any theme button styles */

    /* Animation properties */
    transition:
        width var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        height var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        flex var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        background var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing),
        z-index 0s;
}

.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link):focus {
    outline: none;
    background: none;
    color: var(--sprk-color-text-primary);
}

/* Hover state - keep background and color unchanged */
.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link):hover {
    background: none;
    color: var(--sprk-color-text-primary);
}

/* Active state (click/press) - keep consistent with hover */
.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link):active {
    background: none;
    color: var(--sprk-color-text-primary);
}

/* Icon container - remove extra space below icon */
.nf-spark-off-canvas-icon {
    line-height: 1;
    font-size: 1px; /* Remove inherited font-size to eliminate extra space below icon */
}

/* Icon zoom effect on hover */
.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link) .nf-spark-icon {
    transform: scale(0.85);
    transition: transform 0.2s ease;
}

.nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link):hover .nf-spark-icon {
    transform: scale(1);
}

/* Global close button */
.nf-spark-off-canvas-system button.nf-spark-off-canvas-close-all {
    position: absolute;
    top: var(--sprk-space-4);
    left: 2px;
    transform: translateX(25%);
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 30px;
    height: 30px;
    padding: 6px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--sprk-radius-md);
    transition: var(--sprk-transition-base);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
}

/* Native corner-shape for close button */
@supports (corner-shape: squircle) {
    .nf-spark-off-canvas-system button.nf-spark-off-canvas-close-all {
        border-radius: var(--sprk-corner-shape-radius);
        corner-shape: superellipse(var(--sprk-corner-shape-smooth));
    }
}

/* Show close button when panels are active */
.panels-active .nf-spark-off-canvas-system button.nf-spark-off-canvas-close-all {
    opacity: 1;
    visibility: visible;
}

/* Close button focus state */
.nf-spark-off-canvas-system button.nf-spark-off-canvas-close-all:focus {
    outline: none;
    /* background: var(--sprk-color-background-subtle); */
}

/* Close button icon */
.nf-spark-off-canvas-close-all .nf-spark-icon {
    width: 15px;
    height: 15px;
}

/* Mobile-only off-canvas trigger (e.g. in Kadence mobile header) */
.nf-spark-off-canvas-toggle.nf-spark-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sprk-space-5);
    height: var(--sprk-space-5);
    background: none;
    border: none;
    padding: 0 0 7px;
    cursor: pointer;
    color: var(--sprk-color-text-primary);
    flex-shrink: 0;
}
.nf-spark-off-canvas-toggle.nf-spark-mobile-toggle .nf-spark-icon {
    width: clamp(28px, 10vw, 48px);
    height: auto;
    transform: scale(1);
}

@media (min-width: 769px) {
    .nf-spark-off-canvas-toggle.nf-spark-mobile-toggle {
        display: none;
    }
}

/* Menu toggle specific styles - light border and lighter background */
body:not(.panels-active) #nf-off-canvas-system .nf-spark-off-canvas-toggle-menu {
    border: 1px solid var(--sprk-color-border);
    background: var(--sprk-color-background-subtle);

    /* Apply vertical layout from the start */
    height: auto; /* Allow button to expand for vertical text */
    flex-direction: column-reverse; /* Text above icon */
    padding: var(--sprk-space-1);
    gap: 0;
    margin-bottom: var(--sprk-space-1);
}

/* Menu toggle hover - maintain same background and border color */
body:not(.panels-active) #nf-off-canvas-system .nf-spark-off-canvas-toggle-menu:hover {
    background: var(--sprk-color-background-subtle);
    border-color: var(--sprk-color-border); /* Keep border color unchanged */
}

/* Menu toggle active state - maintain same background */
body:not(.panels-active) #nf-off-canvas-system .nf-spark-off-canvas-toggle-menu:active {
    background: var(--sprk-color-background-subtle);
    border-color: var(--sprk-color-border); /* Keep border color unchanged */
}

/* Menu toggle focus state - maintain same background */
body:not(.panels-active) #nf-off-canvas-system .nf-spark-off-canvas-toggle-menu:focus {
    background: var(--sprk-color-background-subtle);
    border-color: var(--sprk-color-border); /* Keep border color unchanged */
}

/* Menu label always visible (not just in panels-active state) */
body:not(.panels-active) #nf-off-canvas-system .nf-spark-off-canvas-toggle-menu .nf-spark-off-canvas-label {
    max-height: 100px;
    opacity: 1;
    transform: rotate(180deg);
    padding: var(--sprk-space-1) 0;
}

.nf-spark-off-canvas-label {
    font-size: var(--sprk-font-size-xs);
    font-weight: var(--sprk-font-weight-regular);
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-transform: uppercase; /* Force uppercase */
    line-height: 1;
    letter-spacing: 0.5px;
    
    /* Collapsible approach */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: rotate(180deg);
    
    transition: 
        max-height var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        opacity var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing),
        padding var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing);
}

/* Overlay appearance */
.nf-spark-off-canvas-overlay,
.nf-spark-cc-modal-overlay,
#glightbox-body .goverlay {
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(2px);
}

/* Overlay functionality */
.nf-spark-off-canvas-overlay,
.nf-spark-cc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--sprk-drawer-overlay-z);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        visibility var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        backdrop-filter var(--sprk-drawer-duration) var(--sprk-drawer-easing);
}

/* GLightbox */

/* Use position:fixed scroll lock instead of overflow:hidden to prevent
   layout shift with sticky elements. position:fixed and scroll save/restore
   are managed entirely in JS (single-download.js) for correct teardown order. */
body.glightbox-open {
    overflow: visible !important;
}

/* Correct for scrollbar and admin bar on position:fixed */
body.gscrollbar-fixer {
    margin-right: 0 !important;
    padding-right: var(--scrollbar-offset) !important;
    padding-top: var(--sprk-admin-bar-offset) !important;
}

.glightbox-container .gslide-media {
    border-radius: var(--sprk-radius-lg);
    box-shadow: var(--sprk-shadow-strong);
}
.glightbox-container .gslide-media.gslide-video {
    border-radius: 0;
}

.glightbox-container .gclose, .glightbox-container .gnext, .glightbox-container .gprev,
.glightbox-container .gclose:hover, .glightbox-container .gnext:hover, .glightbox-container .gprev:hover {
    background-color: var(--sprk-color-background);
    opacity: 1;
}

.glightbox-container .gclose path, .glightbox-container .gnext path, .glightbox-container .gprev path {
    fill: var(--sprk-color-text-primary);
}

.glightbox-container .gclose svg {
    transform: scale(0.7);
    transition: background 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 150ms ease-out;
}

.glightbox-container .gclose:hover svg {
    transform: scale(0.95);
}

/* Panel Containers */
.nf-spark-off-canvas-panels {
    position: fixed;
    top: 0;
    right: 0; /* Extend all the way to the right edge */
    height: 100vh;
    width: calc(640px + 32px + var(--scrollbar-offset, 15px)); /* Menu width + tab bar + scrollbar space */
    max-width: 90vw;
    z-index: var(--sprk-drawer-panel-z);
    pointer-events: none; /* Allow clicks to pass through when closed */
}

.panels-active .nf-spark-off-canvas-panels {
    border-right: var(--sprk-drawer-gutter) solid var(--sprk-color-background); /* Padding to account for scrollbar space */
    width: calc(640px + 48px + var(--scrollbar-offset, 15px)); /* Menu width + wider tab bar + scrollbar space when open */
}

.nf-spark-off-canvas-panel {
    position: absolute;
    top: 0;
    right: calc(var(--sprk-drawer-gutter) * -1); /* Offset by gutter width so final position accounts for it */
    width: 100%;
    height: 100%;
    background: var(--sprk-color-background);
    border-left: 1px solid var(--sprk-color-border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    pointer-events: auto;
    
    /* Default closed state */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    
    /* Animation properties */
    transition: 
        transform var(--sprk-drawer-bounce-duration) var(--sprk-drawer-bounce-easing), /* Slower bouncy slide-in */
        opacity var(--sprk-drawer-duration) var(--sprk-drawer-easing),
        visibility var(--sprk-drawer-duration) var(--sprk-drawer-easing);
}

/* Panel Content - Now contains everything and is scrollable */
.nf-spark-off-canvas-content {
    height: 100%;
    overflow-y: hidden; /* Start with no scrollbar - JavaScript will control timing */
    padding-right: var(--sprk-space-6); /* Space for toggle buttons + gap */
    overflow: auto; /* Enable scrolling when content overflows */

    /* Start content invisible */
    opacity: 0;
    transition: opacity var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing);
}

/* Generic Panel Content Wrapper - Shared styles for all panels */
.nf-spark-panel-content {
    padding: var(--sprk-space-6);
}

/* ========================================
   ANIMATION STATES - Body Class Triggered
   ======================================== */

/* When any panel is active */
.panels-active .nf-spark-off-canvas-overlay {
    opacity: 1;
    visibility: visible;
}

/* Style tab column when panels are active */
.panels-active .nf-spark-off-canvas-tab-column {
    background: var(--sprk-color-background-muted);
    right: var(--scrollbar-offset, 15px); /* Move to scrollbar position when active */
    width: 48px; /* Wider to match expanded buttons */
}

/* Transform toggle buttons container when panels are active */
.panels-active .nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link) {
    width: 48px; /* Wider when panels are open */
    flex: 1; /* Dynamic height - each button takes equal space */
    background: none;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse; /* Text above icon */
    padding: var(--sprk-space-1);
    gap: 0; /* No gap inside tabs */
    border-radius: 0; /* Remove rounded corners when panels open */
}

/* Menu toggle removes border and margin when any panel is active */
.panels-active ##nf-off-canvas-system .nf-spark-off-canvas-toggle.nf-spark-off-canvas-toggle-menu {
    border: none;
    background: var(--sprk-color-background-subtle);
    margin-bottom: 0;
    height: auto;
    flex: 0 0 auto;
}

.panels-active .nf-spark-off-canvas-toggle .nf-spark-off-canvas-label {
    max-height: 100px; /* Large enough for any text */
    opacity: 1;
    transform: rotate(180deg);
    padding: var(--sprk-space-1) 0; /* Add some breathing room */
}

/* Active toggle button (tab) styling */
.panels-active .nf-spark-off-canvas-toggle.active {
    background: var(--sprk-color-background);
    z-index: var(--sprk-drawer-active-toggle-z);
    color: var(--sprk-color-text-primary);
}

/* Menu toggle removes border when active to blend with panel */
.panels-active .nf-spark-off-canvas-toggle-menu.active {
    border: none;
    background: var(--sprk-color-background);
}

/* COMMENTED OUT - Remnant from previous development, no longer needed with scrollbar gap cover
.panels-active .nf-spark-off-canvas-toggle.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--sprk-color-background);
    z-index: 2;
}
*/

/* Inactive toggle buttons when panels are active */
.panels-active .nf-spark-off-canvas-toggle:not(.active):not(.nf-spark-top-nav-link) {
    opacity: 0.7;
    transform: translateX(0);
    background: rgba(0, 0, 0, 0); /* Fully transparent */
}

/* Menu toggle removes border when inactive (inherits background from general inactive state) */
.panels-active .nf-spark-off-canvas-toggle-menu:not(.active) {
    border: none;
}

/* Show specific active panel */
.panels-active .nf-spark-off-canvas-panel.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    z-index: var(--sprk-drawer-panel-z);
    transition-delay: 0ms; /* Immediate entrance */
    /* Bouncy slide-in with faster fade */
    transition: 
        transform var(--sprk-drawer-bounce-duration) var(--sprk-drawer-bounce-easing), /* Slower bouncy slide-in */
        opacity var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing), /* Faster opacity */
        visibility var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing);
}

/* Fade in content near the end of slide animation */
.panels-active .nf-spark-off-canvas-panel.active .nf-spark-off-canvas-content {
    opacity: 1;
    scrollbar-gutter: stable; /* Ensure scrollbar doesn't interfere with column positioning */
    transition: opacity var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing) 200ms;
    /* Note: overflow-y is now controlled by JavaScript for precise timing */
}

/* Hide inactive panels */
.panels-active .nf-spark-off-canvas-panel:not(.active) {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition-delay: 0ms;
    z-index: calc(var(--sprk-drawer-panel-z) - 1);
}

/* Enhanced switching animations */
.panels-active .nf-spark-off-canvas-panel.switching-in {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms; /* New panel enters immediately */
    z-index: var(--sprk-drawer-panel-z);
}

.panels-active .nf-spark-off-canvas-panel.switching-out {
    transform: translateX(100%); /* Slide out to original position */
    opacity: 0; /* Fade out while sliding */
    visibility: hidden;
    z-index: calc(var(--sprk-drawer-panel-z) - 1);
    
    /* Combined fade and slide with shorter delay */
    transition: 
        opacity var(--sprk-drawer-duration) var(--sprk-drawer-easing) 80ms,
        transform var(--sprk-drawer-duration) var(--sprk-drawer-easing) 80ms,
        visibility var(--sprk-drawer-duration) var(--sprk-drawer-easing) 80ms;
}

/* ========================================
   RESPONSIVE ANIMATIONS
   ======================================== */

@media (max-width: 768px) {
    .nf-spark-off-canvas-panels {
        width: calc(100% + 32px + var(--scrollbar-offset, 15px)); /* Full width + tab bar + scrollbar space */
        max-width: none;
        right: 0; /* Extend to right edge */
        padding-right: calc(32px + var(--scrollbar-offset, 15px)); /* Space for tab bar + scrollbar */
    }

    .panels-active .nf-spark-off-canvas-panels {
        width: calc(100% + 48px + var(--scrollbar-offset, 15px)); /* Full width + wider tab bar + scrollbar space when open */
        padding-right: calc(48px + var(--scrollbar-offset, 15px)); /* Space for wider tab bar + scrollbar when open */
    }

    .nf-spark-off-canvas-tab-column {
        width: 32px; /* Narrower column on mobile */
    }

    .panels-active .nf-spark-off-canvas-tab-column {
        width: 48px; /* Wider to match expanded buttons when panels open */
    }

    .panels-active .nf-spark-off-canvas-toggle {
        width: 48px; /* Wider when panels are open */
        flex: 1; /* Dynamic height on tablet too */
    }

    /* Hide side-tab toggles on small screens — mobile hamburger handles menu open */
    body:not(.panels-active) .nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link):not(.nf-spark-mobile-toggle) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .panels-active .nf-spark-off-canvas-toggle {
        width: 48px; /* Wider when panels are open */
        flex: 1; /* Dynamic height on mobile too */
    }
}

/* ========================================
   ACCESSIBILITY & MOTION PREFERENCES
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --nf-drawer-duration: 150ms;
        --nf-drawer-duration-fast: 100ms;
        --nf-drawer-tab-transform-duration: 120ms;
    }
    
    .nf-spark-off-canvas-overlay {
        backdrop-filter: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .panels-active .nf-spark-off-canvas-toggle.active {
        /* No outline for clean scrollbar illusion */
    }
}

/* COMMENTED OUT - Enhanced Button-to-Tab Visual Polish (remnants from previous development)
.nf-spark-off-canvas-toggle {
    position: relative;
    overflow: visible;
}

.nf-spark-off-canvas-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing);
}

.panels-active .nf-spark-off-canvas-toggle::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(to right,
        transparent 0%,
        var(--sprk-color-background) 30%,
        var(--sprk-color-background) 100%);
    opacity: 0;
    transition: opacity var(--sprk-drawer-tab-transform-duration) var(--sprk-drawer-tab-easing);
}

.panels-active .nf-spark-off-canvas-toggle.active::after {
    opacity: 1;
}

.panels-active .nf-spark-off-canvas-toggle.active {
}
*/

/* Focus trap styles */
.nf-spark-off-canvas-panel[data-focus-trap="active"] {
    isolation: isolate;
}

.nf-spark-off-canvas-panel[data-focus-trap="active"] * {
    outline: none;
}

/* ==========================================================================
   Form Controls — Fieldset & Legend
   ========================================================================== */

fieldset {
    border: 0;
    padding: 0;
    margin: var(--global-md-spacing) 0;
    min-width: 0;
}

fieldset:first-child {
    margin-top: 0;
}

fieldset:last-child {
    margin-bottom: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 0.5em 0;
    float: none;
}

/* ==========================================================================
   Form Controls — Checkbox & Radio
   ========================================================================== */

/* Native controls outside Ninja Forms field wrappers */
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *),
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *) {
    --nf-spark-control-size: clamp(18px, 1em, 24px);
    appearance: none;
    font: inherit;
    display: inline-grid;
    place-content: center;
    width: var(--nf-spark-control-size);
    height: var(--nf-spark-control-size);
    margin: 4px;
    padding: 0;
    background: var(--sprk-color-background);
    border: clamp(2px, 0.125em, 3px) solid var(--sprk-color-border-strong);
    border-radius: 50%;
    transform: translateY(-0.075em);
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.125s ease;
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *) {
    border-radius: 4px;
}

@supports (corner-shape: squircle) {
    input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *) {
        border-radius: var(--sprk-radius-md);
        corner-shape: superellipse(var(--sprk-corner-shape-smooth));
    }
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):hover,
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):active,
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *):hover,
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *):active {
    border-color: var(--sprk-color-text-muted);
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):focus-visible,
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *):focus-visible {
    outline: 2px solid var(--sprk-color-text-primary);
    outline-offset: 2px;
}

/* Indicator base — shared transition/scale for radio dot + checkbox outline + checkbox fill */
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before,
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before,
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::after {
    content: "";
    transform: scale(0);
    transition: transform 0.125s ease-in-out;
}

/* Hold checkbox indicators at their final offsets while hidden so the scale grows in place */
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before {
    transform: scale(0) translate(19%, -22%);
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::after {
    transform: scale(0) translate(14%, -17%);
}

/* Radio dot */
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before {
    width: var(--nf-spark-control-size);
    height: var(--nf-spark-control-size);
    background: var(--sprk-color-accent-active);
    border-radius: 50%;
    padding: 20%;
    background-clip: content-box;
}

/* Checkbox layered indicator — ::before = white outline (behind), ::after = fill (on top) */
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before,
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::after {
    grid-area: 1 / 1;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 20.796875 5.8027344 L 20.089844 6.5097656 L 9.0136719 17.585938 L 4.40625 12.992188 L 3.6992188 12.287109 L 2.2871094 13.703125 L 2.9941406 14.408203 L 9.015625 20.414062 L 21.503906 7.9238281 L 22.210938 7.2167969 L 20.796875 5.8027344 z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 20.796875 5.8027344 L 20.089844 6.5097656 L 9.0136719 17.585938 L 4.40625 12.992188 L 3.6992188 12.287109 L 2.2871094 13.703125 L 2.9941406 14.408203 L 9.015625 20.414062 L 21.503906 7.9238281 L 22.210938 7.2167969 L 20.796875 5.8027344 z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    place-self: center;
}

/* Checkbox outline layer — masked to a thicker check shape (stroke widens the alpha) */
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::before {
    width: calc(var(--nf-spark-control-size) * 1.3);
    height: calc(var(--nf-spark-control-size) * 1.3);
    background: var(--sprk-color-background);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='4' stroke-linejoin='round' d='M 20.796875 5.8027344 L 20.089844 6.5097656 L 9.0136719 17.585938 L 4.40625 12.992188 L 3.6992188 12.287109 L 2.2871094 13.703125 L 2.9941406 14.408203 L 9.015625 20.414062 L 21.503906 7.9238281 L 22.210938 7.2167969 L 20.796875 5.8027344 z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='4' stroke-linejoin='round' d='M 20.796875 5.8027344 L 20.089844 6.5097656 L 9.0136719 17.585938 L 4.40625 12.992188 L 3.6992188 12.287109 L 2.2871094 13.703125 L 2.9941406 14.408203 L 9.015625 20.414062 L 21.503906 7.9238281 L 22.210938 7.2167969 L 20.796875 5.8027344 z'/%3E%3C/svg%3E");
}

/* Checkbox fill layer — normal size, themed color, overridable */
input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *)::after {
    width: calc(var(--nf-spark-control-size) * 1.3);
    height: calc(var(--nf-spark-control-size) * 1.3);
    background: var(--sprk-color-accent-active);
}

input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *):checked::before {
    transform: scale(1);
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):checked::before {
    transform: scale(1) translate(19%, -22%);
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):checked::after {
    transform: scale(1) translate(14%, -17%);
}

input[type="checkbox"]:not(.ninja-forms-field, .nf-spark-price-slider *):checked,
input[type="radio"]:not(.ninja-forms-field, .nf-spark-price-slider *):checked {
    border-color: var(--sprk-color-text-muted);
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */

.nf-spark-loader,
.edd-checkout .wp-block-edd-checkout .edd-loading-ajax.edd-loading,
.kt-loader-ellips {
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    font-size: 1em;
    /*
     * Bottom/smallest dot — painted via radial-gradient inside the 24px box
     * so the visible fill is ~60% (~14px diameter). clip-path on the parent
     * would also clip the pseudos, so the gradient trick is used instead.
     */
    background: radial-gradient(
        circle closest-side at center,
        color-mix(in srgb, var(--sprk-color-brand-red) 16%, transparent) 0,
        color-mix(in srgb, var(--sprk-color-brand-red) 16%, transparent) 60%,
        transparent 60%
    );
    transform-origin: top;
    display: grid;
    animation: nfSparkLoader 1s infinite linear;
}

.nf-spark-loader::before,
.nf-spark-loader::after,
.edd-checkout .wp-block-edd-checkout .edd-loading-ajax.edd-loading::before,
.edd-checkout .wp-block-edd-checkout .edd-loading-ajax.edd-loading::after,
.kt-loader-ellips::before,
.kt-loader-ellips::after {
    content: "";
    grid-area: 1/1;
    background: color-mix(in srgb, var(--sprk-color-brand-red) 50%, transparent);
    border-radius: 50%;
    /* Middle dot — clipped to 80% of the box (~22px diameter). */
    clip-path: circle(40% at center);
    transform-origin: top;
    animation: inherit;
    animation-name: nfSparkLoaderSpin;
}

.nf-spark-loader::after,
.edd-checkout .wp-block-edd-checkout .edd-loading-ajax.edd-loading::after,
.kt-loader-ellips::after {
    background: var(--sprk-color-brand-red);
    --s: 180deg;
    /* Top/largest dot — full 28px; override the inherited clip from ::before. */
    clip-path: none;
}

/*
 * Infinite Scroll sets inline `display: block` on this element when a request
 * is active and `display: none` when idle / end-of-feed / errored. We only
 * upgrade the active state to `grid` so the custom ::before/::after spinner
 * stacks via `grid-area: 1/1`. The hidden state is left alone so the spinner
 * doesn't linger next to the "End of content" message.
 */
.page-load-status .kt-loader-ellips[style*="block"] {
    display: grid !important;
    font-size: inherit;
    position: inherit;
    width: 28px;
    height: inherit;
    margin-top: 48px;
}

.kt-loader-ellips .kt-loader-ellips__dot {
    display: none;
}

@keyframes nfSparkLoader {
    0%,20% { transform: rotate(0); }
    100%    { transform: rotate(360deg); }
}

@keyframes nfSparkLoaderSpin {
    50%  { transform: rotate(var(--s, 90deg)); }
    100% { transform: rotate(0); }
}

/* End-of-content / error text shown by Kadence Pro's infinite-scroll wrapper. */
.infinite-scroll-last,
.infinite-scroll-error {
    font-family: var(--sprk-font-mono);
    font-weight: var(--sprk-font-weight-bold);
    margin-top: 2.5em;
}

/* Archive pagination */
.pagination .nav-links {
    text-align: center;
}

.pagination .page-numbers {
    border-radius: var(--sprk-radius-full);
}

/* Blog search form — input fills the row, button stays its content size. */
.nf-spark-blog-search-form {
    display: flex;
    gap: var(--sprk-space-2);
    align-items: stretch;
    height: 44px;
}

.nf-spark-blog-search-form .nf-spark-blog-search-form__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.nf-spark-blog-search-form .nf-spark-blog-search-form__submit {
    flex: 0 0 auto;
}

/* Blog search — loading state
 * Animated shimmer overlay applied to the posts grid while a search AJAX
 * request is in flight. Class is toggled by assets/js/blog-load-more.js.
 * Uses color-mix so the shimmer tint tracks whatever --sprk-color-background
 * resolves to (light or dark palette). */
.nf-load-more .kt-post-grid-wrap.is-loading {
    position: relative;
    filter: grayscale(90%) brightness(110%) opacity(0.5);
}

.nf-load-more .kt-post-grid-wrap.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--sprk-color-background) 25%, transparent) 0%,
        color-mix(in srgb, var(--sprk-color-background) 85%, transparent) 15%,
        color-mix(in srgb, var(--sprk-color-background) 25%, transparent) 50%,
        color-mix(in srgb, var(--sprk-color-background) 85%, transparent) 85%,
        color-mix(in srgb, var(--sprk-color-background) 25%, transparent) 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: nf-spark-blog-search-shimmer 4.25s linear infinite;
}

@keyframes nf-spark-blog-search-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* Respect reduced-motion: fall back to a static translucent overlay. */
@media (prefers-reduced-motion: reduce) {
    .nf-load-more .kt-post-grid-wrap.is-loading::before {
        animation: none;
        background: color-mix(in srgb, var(--sprk-color-background) 40%, transparent);
        background-size: auto;
    }
}

/* ==========================================================================
   Search Results
   Featured-image slot holds a post-type icon instead of an <img>.
   See includes/search-result-icons.php for the swap logic.
   ========================================================================== */

body.search-results {
    /* Thumbnail container — override Kadence's 1:1 aspect-ratio padding trick
     * so the slot is an explicit square that hosts the icon, plus a subtle
     * border + rounded corners to frame the icon as a visible "chip". */
    .wp-site-blocks .post-thumbnail.kadence-thumbnail-ratio-1-1 {
        width: var(--sprk-space-7);
        height: var(--sprk-space-7);
        padding-bottom: 0;
        border: 1px solid var(--sprk-color-border);
        border-radius: var(--sprk-radius-base);
    }

    /* Inner wrapper — center the icon within the 64px slot. */
    .post-thumbnail-inner {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    /* Icon inside the thumbnail slot. */
    .post-thumbnail .nf-spark-icon {
        width: var(--sprk-space-4);
        height: var(--sprk-space-4);
    }

    /* Beside-image 1-column layout — pin the thumbnail track to the 64px
     * slot width instead of Kadence's default 1fr 2fr. Media query matches
     * Kadence's own breakpoint so mobile stays as-is (stacked layout). */
    @media screen and (min-width: 768px) {
        .grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
            display: grid;
            grid-template-columns: var(--sprk-space-7) 1fr;
            grid-gap: var(--sprk-space-3);
            align-items: start;
            border-radius: 0;
        }
    }

    /* Entry header — grid + align-content: center keeps the title
     * vertically centered against the thumbnail chip; small vertical margin
     * gives some breathing room between stacked results. */
    .kadence-posts-list .loop-entry.type-post .entry-header,
    .kadence-posts-list .loop-entry.entry .entry-header {
        margin: 0.5em 0;
        padding: 0;
        display: grid;
        align-content: center;
    }

    /* Entry title — sized to xl (suitable for a scannable list, not a blog
     * article heading) with zero padding so it sits clean beside the icon. */
    .kadence-posts-list .loop-entry.type-post h2.entry-title,
    .loop-entry .entry-header .entry-title {
        padding: 0;
        font-size: var(--sprk-font-size-xl);
    }

    /* Excerpt — cap line length for readability on wide screens. */
    .kadence-posts-list .entry-summary {
        max-width: 70ch;
    }

    /* Search page title — sized below the default entry-title token since
     * "Search results for: X" competes less for attention than a blog title. */
    h1.page-title.search-title {
        font-size: var(--sprk-font-size-3xl);
        margin-bottom: 1em;
    }

    /* The inner <span> wraps Kadence's "Search results for:" label, separating
     * it from the search term. Lighten it so the query itself stays dominant. */
    h1.page-title.search-title span {
        font-weight: var(--sprk-font-weight-light);
    }

    /* Search header heading — visually sized as an H3 even though the element
     * is an H1 (kept for document-landmark accessibility). */
    h1.nf-spark-search-header__heading {
        font-size: var(--sprk-font-size-xxl);
        margin-bottom: 0.25em;
    }

    /* Search form — two-column grid: input takes the majority, submit button
     * is a narrower fixed-ish column on the right. 720px max so the form
     * doesn't sprawl on wide layouts. */
    .nf-spark-search-form {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 5fr 1fr;
        gap: var(--sprk-space-2);
        max-width: 720px;
    }

    .nf-spark-search-form .nf-spark-search-form__field {
        font-size: var(--sprk-font-size-lg);
    }

    .nf-spark-search-form .nf-spark-search-form__submit {
        display: flex;
        justify-content: center;
    }
}

/* ==========================================================================
   Panel Header (Standardized)
   ========================================================================== */

.nf-spark-panel-header {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    padding: var(--sprk-space-8) var(--sprk-space-6) 0 var(--sprk-space-6);
    flex-shrink: 0;
}

.nf-spark-panel-header__icon {
    width: 40px;
    height: 40px;
    color: var(--sprk-color-text-primary);
    flex-shrink: 0;
}

.nf-spark-panel-header__icon svg {
    width: 100%;
    height: 100%;
}

.nf-spark-panel-header__title {
    flex: 1;
    font-size: var(--sprk-font-size-xl);
    font-weight: var(--sprk-font-weight-regular);
    text-transform: uppercase;
    margin: 0;
    color: var(--sprk-color-text-primary);
}

/* Menu Panel Header - Special styling for logo */
.nf-spark-off-canvas-panel-menu .nf-spark-panel-header {
    justify-content: space-between;
}

.nf-spark-off-canvas-panel-menu .nf-spark-panel-header__logo-link {
    width: auto;
    height: var(--sprk-space-5);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nf-spark-off-canvas-panel-menu .nf-spark-panel-header__logo-link:hover {
    opacity: 0.8;
}

.nf-spark-off-canvas-panel-menu .nf-spark-panel-header__logo-link .nf-logo {
    height: 100%;
    width: auto;
}

.nf-spark-off-canvas-panel-menu .nf-spark-panel-header__title {
    display: none; /* Hide title text, show only logo */
}

/* ==========================================================================
   Account Off-Canvas Panel
   ========================================================================== */

/* Panel Container */
.nf-spark-account-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sprk-color-background);
}

/* Panel Header */
.nf-spark-account-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sprk-space-4) var(--sprk-space-4) var(--sprk-space-3);
    border-bottom: 1px solid var(--sprk-color-border);
    flex-shrink: 0;
}

.nf-spark-account-panel__title-row {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
}

.nf-spark-account-panel__icon {
    width: 24px;
    height: 24px;
    color: var(--sprk-color-text-primary);
}

.nf-spark-account-panel__title {
    margin: 0;
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-regular);
    letter-spacing: 0.05em;
    color: var(--sprk-color-text-primary);
}

.nf-spark-off-canvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--sprk-radius-base);
    cursor: pointer;
    color: var(--sprk-color-text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nf-spark-off-canvas-close:hover {
    background: var(--sprk-color-background-subtle);
    color: var(--sprk-color-text-primary);
}

.nf-spark-off-canvas-close svg {
    width: 20px;
    height: 20px;
}

/* Panel Content */
.nf-spark-account-panel__content {
    flex: 1;
    /* padding inherited from .nf-spark-panel-content */
}

/* Menu Panel Content */
.nf-spark-menu-panel__content {
    /* padding inherited from .nf-spark-panel-content */
}

/* Cart Panel Content */
.nf-spark-cart-panel__content {
    /* padding inherited from .nf-spark-panel-content */
}

/* Welcome Message (Logged Out State) */
.nf-spark-account-welcome {
    margin-bottom: var(--sprk-space-4);
}

.nf-spark-account-welcome__greeting {
    margin: 0;
    font-size: var(--sprk-font-size-xl);
    line-height: var(--sprk-line-height-snug);
    color: var(--sprk-color-text-primary);
}

.nf-spark-account-welcome__greeting strong {
    font-weight: var(--sprk-font-weight-bold);
}

.nf-spark-greeting {
    font-weight: var(--sprk-font-weight-bold);
}

/* Action Link — generic icon+text link with directional arrow */
[class*="nf-spark-action-link"] {
    display: inline-flex;
    align-items: center;
    gap: var(--sprk-space-1);
}

[class*="nf-spark-action-link"]::before,
[class*="nf-spark-action-link"]::after {
    content: '';
    display: inline-block;
    width: 1.334em;
    height: 1.334em;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.nf-spark-action-link--back::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 10.175781 3.8496094 L 2.0234375 12 L 10.175781 20.150391 L 11.589844 18.736328 L 5.8515625 13 L 22 13 L 22 11 L 5.8515625 11 L 11.589844 5.2636719 L 10.175781 3.8496094 z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 10.175781 3.8496094 L 2.0234375 12 L 10.175781 20.150391 L 11.589844 18.736328 L 5.8515625 13 L 22 13 L 22 11 L 5.8515625 11 L 11.589844 5.2636719 L 10.175781 3.8496094 z'/%3E%3C/svg%3E");
}
.nf-spark-action-link--back::after {
    display: none;
}

.nf-spark-action-link--forward::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 13.824219 3.8496094 L 12.410156 5.2636719 L 18.148438 11 L 2 11 L 2 13 L 18.148438 13 L 12.410156 18.736328 L 13.824219 20.150391 L 21.976562 12 L 13.824219 3.8496094 z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 13.824219 3.8496094 L 12.410156 5.2636719 L 18.148438 11 L 2 11 L 2 13 L 18.148438 13 L 12.410156 18.736328 L 13.824219 20.150391 L 21.976562 12 L 13.824219 3.8496094 z'/%3E%3C/svg%3E");
}
.nf-spark-action-link--forward::before {
    display: none;
}

.nf-spark-action-link--back:hover::before {
    transform: translateX(-2px);
}

.nf-spark-action-link--forward:hover::after {
    transform: translateX(2px);
}

/* Account Link */
.nf-spark-account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sprk-space-3);
    margin-bottom: var(--sprk-space-4);
}

/* License Management Heading */
.nf-spark-license-manage-heading {
    font-size: var(--sprk-font-size-xxl);
    margin-bottom: 0.75em;
}

/* License Management Page Width Constraint */
.edd-purchase-history .entry-content {
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sprk-space-4);
    padding-right: var(--sprk-space-4);
}

.nf-spark-account-link--downloads {
    font-size: var(--sprk-font-size-sm);
    margin-top: 2em;
}

/* Welcome Box (Default Message & Custom Content) */
.nf-spark-account-welcome-box {
    margin: var(--sprk-space-4) 0 var(--sprk-space-5);
    font-size: var(--sprk-font-size-lg);
    line-height: var(--sprk-line-height-snug);
}

.nf-spark-account-welcome-box > div {
    margin-bottom: 0.25em;
}

.nf-spark-account-quote {
    margin: 0;
    font-size: var(--sprk-font-size-base);
    line-height: 1.6;
    color: var(--sprk-color-text-primary);
    font-style: italic;
}

.nf-spark-account-quote p {
    margin: 0 0 var(--sprk-space-2);
}

.nf-spark-account-quote p:last-child {
    margin-bottom: 0;
}

/* Sign In Form */
.nf-spark-signin-form {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-3);
}

/* Error Messages (using hardcoded error colors - no design token available) */
.nf-spark-signin-form__error {
    padding: var(--sprk-space-2) var(--sprk-space-3);
    background: #fee; /* Light red background for errors */
    border: 1px solid #fcc; /* Red border for errors */
    border-radius: var(--sprk-radius-base);
    font-size: var(--sprk-font-size-sm);
    color: #c00; /* Dark red text for errors */
}

.nf-spark-signin-form__error-text {
    display: block;
}

/* Form Fields */
.nf-spark-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-1);
}

.nf-spark-form-field label {
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-regular);
    color: var(--sprk-color-text-primary);
}

.nf-spark-form-field input[type="text"],
.nf-spark-form-field input[type="password"],
.nf-spark-form-field select {
    padding: var(--sprk-space-2) var(--sprk-space-3);
    font-size: var(--sprk-font-size-base);
    line-height: 1.5;
    color: var(--sprk-color-text-primary);
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nf-spark-form-field input[type="text"]:focus,
.nf-spark-form-field input[type="password"]:focus,
.nf-spark-form-field select:focus {
    outline: none;
    border-color: var(--sprk-color-text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}


/* Checkbox */
.nf-spark-form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
}

.nf-spark-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.nf-spark-form-checkbox label {
    margin: 0;
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-primary);
    cursor: pointer;
}


.nf-spark-signin-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sprk-space-2);
    padding: var(--sprk-space-2-5) var(--sprk-space-4);
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-regular);
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

.nf-spark-signin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nf-spark-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Form Footer */
.nf-spark-signin-form__footer {
    margin-top: var(--sprk-space-1);
    text-align: center;
}

.nf-spark-signin-form__link {
    font-size: var(--sprk-font-size-sm);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.nf-spark-signin-form__link:hover {
    /* Inherits color from global link styles */
}

/* Products List */
.nf-spark-account-products {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sprk-color-border);
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-account-product {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--sprk-space-2);
    align-items: center;
    padding: var(--sprk-space-2) 0;
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-account-product:last-child {
    border-bottom: none;
}

.nf-spark-account-product__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sprk-color-text-secondary);
}

.nf-spark-account-product__icon svg {
    width: 24px;
    height: 24px;
}

.nf-spark-account-product__details {
    min-width: 0; /* Allow text truncation */
}

.nf-spark-account-product__title {
    margin: 0;
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-regular);
    color: var(--sprk-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-spark-account-product__download .nf-spark-btn-wrapper {
    flex-shrink: 0;
}

.nf-spark-account-product__download .nf-spark-btn-wrapper.nf-spark-btn-primary > a,
.nf-spark-account-product__download .nf-spark-btn-wrapper.nf-spark-btn-secondary > a {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
    font-size: var(--sprk-font-size-sm);
    white-space: nowrap;
}

.nf-spark-account-product__download .nf-spark-btn-wrapper svg {
    flex-shrink: 0;
    width: var(--sprk-space-2);
    height: var(--sprk-space-2);
}

/* Lazy-load placeholder for the off-canvas products list */
.nf-spark-account-products-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sprk-space-6) var(--sprk-space-4);
}

/* Empty State */
.nf-spark-account-empty {
    padding: var(--sprk-space-6) var(--sprk-space-4);
    text-align: center;
    color: var(--sprk-color-text-secondary);
}

.nf-spark-account-empty p {
    margin: 0 0 var(--sprk-space-2);
    font-size: var(--sprk-font-size-base);
}

.nf-spark-account-empty p:last-child {
    margin-bottom: 0;
}

.nf-spark-account-empty a {
    color: var(--sprk-color-brand-red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: var(--sprk-font-weight-regular);
}

.nf-spark-account-empty a:hover {
    color: var(--sprk-color-brand-dark);
}

/* Responsive Design */
@media (max-width: 480px) {
    .nf-spark-account-product {
        grid-template-columns: var(--sprk-space-4) 1fr;
        grid-template-rows: auto auto;
        gap: var(--sprk-space-2);
    }

    .nf-spark-account-product__download {
        grid-column: 1 / -1;
    }

    .nf-spark-account-product__download .nf-spark-btn-wrapper {
        width: 100%;
    }

    .nf-spark-account-product__download a {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   Left Side Branding System
   ========================================================================== */

/* Side Branding Container */
.nf-spark-side-branding {
    position: fixed;
    top: calc(var(--sprk-sticky-top) + var(--sprk-admin-bar-offset) - 16px); /* Start 16px above final position */
    left: clamp(52px, calc(((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding)) / 2), 93px);
    transform: translateX(-50%);
    z-index: var(--sprk-side-branding-z);

    /* Hidden by default, shown on scroll */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing),
        visibility var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing),
        top var(--sprk-drawer-bounce-duration) var(--sprk-drawer-easing),
        left 0.3s ease-out,
        transform 0.3s ease-out;

    /* Prevent pointer events when hidden */
    pointer-events: none;
}

/* Logo Container */
.nf-spark-branding-logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto; /* Let height be determined by aspect ratio */
    max-height: 313px; /* SVG native height */
    margin-left: 11%;
}

/* Logo Link Styling */
.nf-spark-branding-logo a {
    display: block;
    color: var(--sprk-color-brand-gray);
    transition: color var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing);
    text-decoration: none;
}

.nf-spark-branding-logo a:hover,
.nf-spark-branding-logo a:focus {
    color: var(--sprk-color-brand-dark);
}

/* SVG Logo Styling */
.nf-spark-branding-logo svg {
    width: clamp(24px, calc(100vw / 34.3), 42px); /* Scales from 57% to 100% of native width */
    height: auto; /* Maintain aspect ratio */
    max-height: 313px; /* Cap at native height */
    color: inherit; /* Inherit color from parent link */
    shape-rendering: geometricPrecision;
    transition: width 0.3s ease-out;
}

/* Show branding when scrolled */
.scrolled .nf-spark-side-branding {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: calc(var(--sprk-sticky-top) + var(--sprk-admin-bar-offset));
}

/* Show branding when off-canvas panels are active (even if not scrolled) */
.panels-active .nf-spark-side-branding {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: calc(var(--sprk-sticky-top) + var(--sprk-admin-bar-offset));
}

/* Hide branding near page bottom to prevent footer overlap */
.scrolled.scrolled-bottom .nf-spark-side-branding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing),
        visibility var(--sprk-drawer-duration-fast) var(--sprk-drawer-easing);
}

/* Responsive: Hide on smaller screens */
@media (max-width: 768px) {
    .nf-spark-side-branding {
        display: none;
    }
}

/* ==========================================================================
   EDD Cart Drawer
   ========================================================================== */

.nf-spark-cart-drawer {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sprk-color-bg-primary);
	padding-right: 0;
	padding-bottom: 60px; /* Space for fixed checkout button */
	position: relative;
}

/* Empty Cart State */
.nf-spark-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--sprk-space-12) var(--sprk-space-6);
	text-align: center;
	flex: 1;
}

.nf-spark-cart-empty__message {
	font-size: var(--sprk-font-size-xl);
	color: var(--sprk-color-text-muted);
	margin-bottom: var(--sprk-space-6);
}

.nf-spark-cart-empty__cta {
	min-width: 160px;
	font-size: var(--sprk-font-size-lg);
	gap: var(--sprk-space-2);
}

.nf-spark-cart-empty__cta svg {
	width: var(--sprk-space-3);
	height: var(--sprk-space-3);
}

/* Cart Header */
.nf-spark-cart-header {
	display: flex;
	align-items: center;
	gap: var(--sprk-space-3);
	padding: var(--sprk-space-4);
	border-bottom: 1px solid var(--sprk-color-border);
	flex-shrink: 0;
}

.nf-spark-cart-header__icon {
	width: 24px;
	height: 24px;
	color: var(--sprk-color-text-primary);
}

.nf-spark-cart-header__icon svg {
	width: 100%;
	height: 100%;
}

.nf-spark-cart-header__title {
	flex: 1;
	font-size: var(--sprk-font-size-base);
	font-weight: var(--sprk-font-weight-regular);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

.nf-spark-cart-header__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--sprk-color-text-primary);
	border: none;
	border-radius: var(--sprk-radius-sm);
	color: var(--sprk-color-background);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.nf-spark-cart-header__close:hover {
	opacity: 0.8;
}

.nf-spark-cart-header__close svg {
	width: 16px;
	height: 16px;
}

/* Cart Scroll Area */
.nf-spark-cart-scroll {
	flex: 1;
	overflow-y: auto;
}

/* Single Cart Item */
.nf-spark-cart-item {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: var(--sprk-space-2);
	align-items: start;
	padding: 0 0 var(--sprk-space-2) 0;
	border-bottom: 1px solid var(--sprk-color-border);
	transition: opacity 0.2s ease, transform 0.2s ease;
	margin-bottom: var(--sprk-space-2);
}


.nf-spark-cart-item.is-removing {
	opacity: 0;
	transform: translateX(20px);
}

.nf-spark-cart-item__icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sprk-color-text-primary);
	margin-top: 2px;
}

.nf-spark-cart-item__icon svg,
.nf-spark-cart-item__icon img {
	width: 32px;
	height: 32px;
}

.nf-spark-cart-item__icon img {
	object-fit: cover;
	border-radius: var(--sprk-radius-xs);
}

.nf-spark-cart-item__icon-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sprk-color-text-muted);
}

.nf-spark-cart-item__icon-placeholder svg {
	width: 24px;
	height: 24px;
}

.nf-spark-cart-item__details {
	min-width: 0;
}

.nf-spark-cart-item__title-row {
	display: flex;
	align-items: baseline;
	gap: var(--sprk-space-1);
	flex-wrap: wrap;
}

.nf-spark-cart-item__title {
	font-size: var(--sprk-font-size-base);
	font-weight: var(--sprk-font-weight-regular);
	color: var(--sprk-color-text-primary);
	margin: 0;
}

.nf-spark-cart-item__separator {
	color: var(--sprk-color-text-muted);
}

.nf-spark-cart-item__license {
	font-size: var(--sprk-font-size-sm);
	color: var(--sprk-color-text-secondary);
}

.nf-spark-cart-item__billing {
	font-size: var(--sprk-font-size-xs);
	font-style: italic;
	color: var(--sprk-color-text-muted);
}

.nf-spark-cart-item__price {
	font-size: var(--sprk-font-size-sm);
	color: var(--sprk-color-text-primary);
	white-space: nowrap;
}

.nf-spark-cart-item__remove {
	width: 1em;
	height: 1em;
	display: block;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgY2xhc3M9InctNiBoLTYiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE0Ljc0IDlsLS4zNDYgOW0tNC43ODggMEw5LjI2IDltOS45NjgtMy4yMWMuMzQyLjA1Mi42ODIuMTA3IDEuMDIyLjE2Nm0tMS4wMjItLjE2NUwxOC4xNiAxOS42NzNhMi4yNSAyLjI1IDAgMDEtMi4yNDQgMi4wNzdIOC4wODRhMi4yNSAyLjI1IDAgMDEtMi4yNDQtMi4wNzdMNC43NzIgNS43OW0xNC40NTYgMGE0OC4xMDggNDguMTA4IDAgMDAtMy40NzgtLjM5N20tMTIgLjU2MmMuMzQtLjA1OS42OC0uMTE0IDEuMDIyLS4xNjVtMCAwYTQ4LjExIDQ4LjExIDAgMDEzLjQ3OC0uMzk3bTcuNSAwdi0uOTE2YzAtMS4xOC0uOTEtMi4xNjQtMi4wOS0yLjIwMWE1MS45NjQgNTEuOTY0IDAgMDAtMy4zMiAwYy0xLjE4LjAzNy0yLjA5IDEuMDIyLTIuMDkgMi4yMDF2LjkxNm03LjUgMGE0OC42NjcgNDguNjY3IDAgMDAtNy41IDAiIC8+Cjwvc3ZnPgo=) 50% no-repeat;
	background-size: 1em;
	border: none;
	opacity: 0.6;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color 0.15s ease, border-color 0.15s ease;
	margin-top: 2px;
}

.nf-spark-cart-item__remove:hover {
	opacity: 1;
}

/* Cart Summary / Pricing Breakdown */
.nf-spark-cart-summary {
	padding: 0 0 var(--sprk-space-4) 0;
	background: var(--sprk-color-background);
}

.nf-spark-cart-summary__row {
	display: grid;
	grid-template-columns: 1fr auto 24px;
	gap: var(--sprk-space-1);
	align-items: center;
	padding: var(--sprk-space-2) 0 0;
	font-size: var(--sprk-font-size-sm);
}

.nf-spark-cart-summary__label {
	color: var(--sprk-color-text-secondary);
	text-align: right;
}

.nf-spark-cart-summary__value {
	font-weight: var(--sprk-font-weight-regular);
	color: var(--sprk-color-text-primary);
	text-align: right;
	min-width: 70px;
}

.nf-spark-cart-summary__action {
	width: 24px;
	display: flex;
	justify-content: center;
}

.nf-spark-cart-summary__row--discount .nf-spark-cart-summary__value {
	color: var(--sprk-color-success);
}

.nf-spark-cart-summary__discount-percent {
	font-size: var(--sprk-font-size-xs);
	color: var(--sprk-color-text-muted);
	margin-left: var(--sprk-space-1);
}

.nf-spark-cart-summary__remove-discount {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--sprk-color-border);
	border-radius: 50%;
	color: var(--sprk-color-text-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nf-spark-cart-summary__remove-discount:hover {
	color: var(--sprk-color-brand-red);
	border-color: var(--sprk-color-brand-red);
}

.nf-spark-cart-summary__remove-discount svg {
	width: 12px;
	height: 12px;
}


.nf-spark-cart-summary__row--total .nf-spark-cart-summary__label {
	font-weight: var(--sprk-font-weight-bold);
	color: var(--sprk-color-text-primary);
}

.nf-spark-cart-summary__row--total .nf-spark-cart-summary__value {
	font-size: var(--sprk-font-size-lg);
	font-weight: var(--sprk-font-weight-bold);
}

/* Fixed Checkout Button */
.nf-spark-cart-checkout {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 64px;
	z-index: 10;
}

.nf-spark-cart-checkout .nf-spark-cart-checkout-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: var(--sprk-space-3) var(--sprk-space-6);
	font-size: var(--sprk-font-size-lg);
	font-weight: var(--sprk-font-weight-regular);
	border-radius: 0 !important;
	color: var(--sprk-color-background) !important;
	transition: padding 0.2s ease, font-size 0.2s ease;
}

.nf-spark-cart-checkout .nf-spark-cart-checkout-btn:hover {
	filter: none !important;
	box-shadow: none !important;
	color: var(--sprk-color-background) !important;
	padding-bottom: var(--sprk-space-4);
	padding-top: var(--sprk-space-4);
	font-size: var(--sprk-font-size-xl);
}

/* Upsells Panel */
.nf-spark-cart-upsells-panel {
	--upsells-width: 400px;

	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--sprk-drawer-width, 640px) + var(--sprk-drawer-gutter, 20px) - 1px);
	width: var(--upsells-width);
	background: var(--sprk-color-background-subtle, #f7fafc);
	border-right: 1px solid var(--sprk-color-border, #e2e8f0);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
	z-index: 1;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.15s ease,
	            visibility 0s linear 0.2s;
}

.nf-spark-cart-upsells-panel[data-visible="true"] {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
	            opacity 0.4s ease 0.6s,
	            visibility 0s linear 0.6s;
}

.nf-spark-cart-upsells-panel[data-visible="true"] ~ .nf-spark-off-canvas-panel-cart {
	box-shadow: none;
	border-left: none;
}

@media screen and (max-width: 900px) {
	.nf-spark-cart-upsells-panel {
		display: none;
	}
}

.nf-spark-cart-upsells-panel__content {
	padding: var(--sprk-space-8) var(--sprk-space-5) var(--sprk-space-5) var(--sprk-space-5);
}

/* Upsells Content */
.nf-spark-cart-upsells {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nf-spark-cart-upsells__heading {
	font-size: var(--sprk-font-size-base);
	font-weight: var(--sprk-font-weight-regular);
	color: var(--sprk-color-text-primary);
	margin: 0 0 var(--sprk-space-4) 0;
}

.nf-spark-cart-upsells__added-item.nf-spark-notice {
	display: flex;
	align-items: center;
	gap: var(--sprk-space-1);
	padding: 12px var(--sprk-space-3) 12px var(--sprk-space-4);
	justify-content: center;
	margin-bottom: var(--sprk-space-6);
}

.nf-spark-cart-upsells__added-item.nf-spark-notice::before {
	top: -16px;
	left: -16px;
	width: 48px;
	height: 48px;
}

.nf-spark-cart-upsells__added-item.nf-spark-notice::after {
	left: -4px;
	top: -4px;
	width: 24px;
	height: 24px;
}


.nf-spark-cart-upsells__added-title {
	font-size: 0.85em;
	font-weight: var(--sprk-font-weight-bold);
}

.nf-spark-cart-upsells__added-separator,
.nf-spark-cart-item__separator {
}

.nf-spark-cart-upsells__added-price {
	font-size: var(--sprk-font-size-sm);
	font-weight: var(--sprk-font-weight-regular);
}

.nf-spark-cart-upsells__promo {
	font-size: var(--sprk-font-size-sm);
	font-weight: var(--sprk-font-weight-regular);
	color: var(--sprk-color-text-primary);
	margin: 0 0 var(--sprk-space-4) 0;
}

.nf-spark-cart-upsells__promo strong {
	font-weight: var(--sprk-font-weight-bold);
}

.nf-spark-cart-upsells__items {
	display: flex;
	flex-direction: column;
	gap: var(--sprk-space-4);
}

/* Single Upsell Item */
a.nf-spark-upsell-item {
	display: block;
	padding-bottom: var(--sprk-space-4);
	border-bottom: 1px solid var(--sprk-color-border, #e2e8f0);
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

a.nf-spark-upsell-item:hover {
	opacity: 0.8;
}

a.nf-spark-upsell-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.nf-spark-upsell-item__header {
	display: flex;
	align-items: center;
	gap: var(--sprk-space-2);
	margin-bottom: var(--sprk-space-1);
}

.nf-spark-upsell-item__icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--sprk-color-text-secondary, #4a5568);
}

.nf-spark-upsell-item__icon svg,
.nf-spark-upsell-item__icon img {
	width: 24px;
	height: 24px;
}

.nf-spark-upsell-item__icon img {
	object-fit: cover;
	border-radius: var(--sprk-radius-sm);
}

.nf-spark-upsell-item__icon-placeholder {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sprk-color-text-muted);
}

.nf-spark-upsell-item__icon-placeholder svg {
	width: 24px;
	height: 24px;
}

.nf-spark-upsell-item__info {
	min-width: 0;
}

.nf-spark-upsell-item__title {
	font-size: var(--sprk-font-size-sm);
	font-weight: var(--sprk-font-weight-regular);
	color: var(--sprk-color-text-primary);
	margin: 0 0 var(--sprk-space-1) 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nf-spark-upsell-item__description {
	font-size: var(--sprk-font-size-xs);
	color: var(--sprk-color-text-secondary, #4a5568);
	line-height: 1.4;
	margin: 0;
}

/* Membership Upgrade Upsell */
.nf-spark-upsell-membership,
a.nf-spark-upsell-membership,
a.nf-spark-upsell-membership:visited {
	display: block;
	padding: var(--sprk-space-4);
	background: var(--sprk-color-text-primary);
	color: white;
	border-radius: var(--sprk-radius-md);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.nf-spark-upsell-membership:hover {
	opacity: 0.9;
	color: white;
}

.nf-spark-upsell-membership__promo {
	display: block;
	font-size: var(--sprk-font-size-sm);
	line-height: 1.5;
}

.nf-spark-upsell-membership__period {
	font-size: var(--sprk-font-size-sm);
	font-weight: var(--sprk-font-weight-normal);
	color: var(--sprk-color-text-muted);
}

.nf-spark-upsell-membership__add {
	width: 100%;
	text-align: center;
}

/* Loading States */
.nf-spark-cart-drawer.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.nf-spark-cart-drawer.is-loading .nf-spark-cart-scroll {
	overflow-x: hidden;
}

.nf-spark-upsell-item__add.is-loading,
.nf-spark-upsell-membership__add.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

@media (max-width: 768px) {
	.nf-spark-cart-upsells-panel {
		display: none;
	}
}

@media (max-width: 480px) {
	.nf-spark-cart-item {
		grid-template-columns: 40px 1fr auto;
	}

	.nf-spark-cart-item__price {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		font-size: var(--sprk-font-size-xs);
	}

	.nf-spark-cart-item__remove {
		grid-column: 3;
		grid-row: 1 / 3;
	}
}

/* ==========================================================================
   Peeking Ninja System (Bottom Sticky)
   ========================================================================== */

/* Ensure main container can contain absolutely positioned ninja */
#main,
.site-main,
.content-area {
    position: relative;
}

/* Peeking Ninja Wrapper - Clipping Container */
.nf-spark-peeking-ninja-wrapper {
    position: sticky;
    bottom: 0; /* Stick to bottom of main container */
    left: clamp(54px, calc(((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding)) / 2), 95px);
    width: clamp(70px, calc(100vw / 15), 126px);
    transform: translateX(-50%);
    z-index: var(--sprk-side-branding-z); /* Same z-index as side branding */
    overflow: hidden; /* Clip the ninja so it can't be seen when hidden */
}

/* Shy Ninja — dodges the mouse by scooting horizontally */
.nf-spark-peeking-ninja-wrapper {
    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nf-spark-peeking-ninja-wrapper.nf-shy-ninja-scooted {
    left: 50vw !important;
}

.nf-spark-peeking-ninja-wrapper.nf-shy-ninja-returning {
    transition: left 2s cubic-bezier(0.6, 0, 0.4, 1),
                transform 2s cubic-bezier(0.6, 0, 0.4, 1);
}

.nf-spark-peeking-ninja-wrapper.nf-shy-ninja-fled {
    left: 0px !important;
    transform: translateX(-150%);
}

.nf-spark-peeking-ninja-wrapper.nf-shy-ninja-wiggle .nf-spark-peeking-ninja {
    animation: nf-shy-ninja-wiggle 0.3s ease;
}


@keyframes nf-shy-ninja-wiggle {
    0%, 100% { transform: translateX(0) translateY(0); }
    15% { transform: translateX(-6px) translateY(8%); }
    30% { transform: translateX(5px) translateY(8%); }
    45% { transform: translateX(-4px) translateY(8%); }
    60% { transform: translateX(3px) translateY(8%); }
    75% { transform: translateX(-2px) translateY(8%); }
    90% { transform: translateX(1px) translateY(0); }
}

/* Peeking Ninja Inner Container - Animated Element */
.nf-spark-peeking-ninja {
    position: relative;
    width: 100%;
    height: auto;
    padding-left: 11%;

    /* Hidden by default, slides up from below */
    opacity: 0;
    transform: translateY(100%); /* Start completely below wrapper */
    transition: all var(--sprk-transition-slow);

    /* Prevent pointer events when hidden */
    pointer-events: none;
}

/* SVG Ninja Styling */
.nf-spark-peeking-ninja svg {
    display: block; /* Remove extra space below SVG */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    color: var(--sprk-color-brand-gray); /* Use brand gray like the logo */
    shape-rendering: geometricPrecision;
}

/* Show ninja when scrolled - slides up from below */
.scrolled .nf-spark-peeking-ninja-wrapper .nf-spark-peeking-ninja {
    opacity: 1;
    transform: translateY(0); /* Slide to final position */
    pointer-events: auto;
    transition-delay: 600ms; /* Delay only when appearing */
}

.panels-active .nf-spark-peeking-ninja-overlay-wrapper {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Maintain centering while sliding up */
    pointer-events: auto;
    transition-delay: 600ms; /* Delay only when appearing */
}

.panels-active .nf-spark-peeking-ninja-overlay-wrapper .nf-spark-peeking-ninja {
    opacity: 1;
    transform: translateY(0); /* Slide to final position */
    pointer-events: auto;
    transition-delay: 600ms; /* Delay only when appearing */
}

/* ==========================================================================
   Overlay Ninja System (Above Off-Canvas Panels)  
   ========================================================================== */
.nf-spark-peeking-ninja-overlay-wrapper {
    position: fixed;
    bottom: 0;
    left: clamp(54px, calc(((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding)) / 2), 95px);
    width: clamp(70px, calc(100vw / 12), 126px);
    transform: translateX(-50%) translateY(100%);
    z-index: calc(var(--sprk-drawer-overlay-z) + 1); /* Above overlay but below tabs */
    overflow: hidden;

    /* Hidden by default */
    opacity: 0;
    transition: all var(--sprk-transition-slow);
}

/* Show overlay ninja only when panels are active */
.panels-active .nf-spark-peeking-ninja-overlay-wrapper {
    transition: all var(--sprk-transition-base);
    transition-delay: 450ms; /* Delay entrance when panels open */
}
.panels-active .nf-spark-peeking-ninja-overlay-wrapper .nf-spark-peeking-ninja {
    transition-delay: 450ms; /* Delay only when appearing */
}

/* Responsive: Hide on smaller screens */
@media (max-width: 768px) {
    .nf-spark-peeking-ninja-wrapper,
    .nf-spark-peeking-ninja-overlay-wrapper {
        display: none;
    }
}

/* ==========================================================================
   Top Navigation 
   ========================================================================== */

/* Navigation container */
.nf-top-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.nf-top-nav ul.menu {
    flex-wrap: nowrap;
    white-space: nowrap;
    display: inline-flex;
}

/* Branding areas */
.nf-topnav {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nf-topnav-branding-text {
    margin-right: var(--sprk-space-3);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.nf-topnav-logo,
.nf-topnav-logo a,
.nf-topnav-logo-text,
.nf-topnav-logo-text a {
    /* font-family: var(--sprk-font-heading); */
    color: var(--sprk-color-brand-gray);
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.nf-topnav-logo svg {
    width: calc(var(--sprk-space-unit) * 11.25); /* head = 80px, head + bg = 90px */
    height: auto;
    transform: translate(-11.11%, -9.8%); /* position offset for red bg */
    margin: 0 -5.55% 0 0;
}
.nf-topnav-logo-text svg {
    width: 173px;
    height: auto;
    margin: 9px 0 0 12px;
}

.hide-logo-symbol .nf-topnav-logo-text svg {
    margin-left: 0;
}

.nf-top-nav.hide-logo-symbol.hide-logo-text {
    margin-left: calc(-1 * var(--kb-nav-link-padding-left, 0.5em));
}

/* Navigation area */
.nf-topnav-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.nf-topnav-collapsible {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 16px;
    /* display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-width: max-content;
    flex-direction: row; */
}

.nf-topnav-collapsible > * {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.nf-topnav-navigation {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Top navigation link padding and font size - fixed for logo alignment */
.nf-topnav-navigation > .primary-menu-container > .wp-block-kadence-navigation > .navigation > .menu-container > .menu > li > .kb-link-wrap > .kb-nav-link-content {
    padding-top: 16px;
    padding-bottom: 13px;
    font-size: 17px;
}

/* Top navigation link underlines — pseudo-element spans text + dropdown arrow.
   Selector targets only the top-level nav items, not sub-menu Kadence nav blocks. */
.nf-topnav-navigation > .primary-menu-container > .wp-block-kadence-navigation > .navigation > .menu-container > .menu > li {
    position: relative;

    & > .kb-link-wrap::after {
        content: '';
        position: absolute;
        left: calc(var(--kb-nav-link-padding-left, 0.5em) - 0.3rem);
        right: calc(var(--kb-nav-link-padding-left, 0.5em) - 0.3rem);
        bottom: 0.5em;
        height: 0.1em;
        background-color: var(--sprk-color-background);
        transition: bottom 0.1s linear,
                    background-color 0.1s linear,
                    height 0.1s linear;
    }

    &.menu-item-has-children > .kb-link-wrap::after {
        right: var(--kb-nav-link-padding-left, 0.5em);
    }

    &:hover > .kb-link-wrap::after {
        background-color: var(--sprk-color-accent-hover);
        height: 0.15em;
        bottom: 0.39em;
    }
}

/* Remove native text-decoration from top-level nav links since pseudo handles it */
.nf-topnav-navigation > .primary-menu-container > .wp-block-kadence-navigation > .navigation > .menu-container > .menu > li > .kb-link-wrap > .kb-nav-link-content {
    text-decoration: none !important;
}

.nf-topnav-navigation > .primary-menu-container > .wp-block-kadence-navigation > .navigation > .menu-container > .menu > li > .kb-link-wrap > .kb-nav-dropdown-toggle-btn {
    justify-content: end;
    opacity: 0.5;
}

.nf-topnav-navigation .sub-menu .kb-nav-label-description {
    white-space: normal;
}

/* Spacer divider line in sub-menus — transforms a WP spacer into a visible separator */
.nf-topnav-navigation .sub-menu .wp-block-spacer {
    position: relative;
    width: 100%;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 2px;
        background-color: var(--global-palette6, #718096);
    }
}


/* Top nav right utility links — mirrors top-level nav link styling */
.nf-spark-top-nav-right {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;

    & li {
        position: relative;
    }

    & a {
        display: block;
        padding: 16px 1rem 13px;
        font-size: 17px;
        text-decoration: none !important;
        color: var(--sprk-color-text-primary);
    }

    & li::after {
        content: '';
        position: absolute;
        left: calc(1rem - 0.3rem);
        right: calc(1rem - 0.3rem);
        bottom: 0.5em;
        height: 0.1em;
        background-color: var(--sprk-color-background);
        transition: bottom 0.1s linear,
                    background-color 0.1s linear,
                    height 0.1s linear;
    }

    & li:hover::after {
        background-color: var(--sprk-color-accent-hover);
        height: 0.15em;
        bottom: 0.39em;
    }
}

/* Override Kadence navigation styles to prevent width constraints and stacking */
.nf-topnav-collapsible .header-navigation {
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    vertical-align: top !important;
    margin: 0 !important;
}
.nf-topnav-collapsible .primary-menu-container {
    width: auto !important;
    display: inline-flex !important;
    vertical-align: top !important;
    margin: 0 !important;
}
.nf-topnav-collapsible .primary-menu-container > .wp-block-kadence-navigation > .navigation > .menu-container > .menu {
    width: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    vertical-align: top !important;
}
.nf-topnav-collapsible .primary-menu-container > .wp-block-kadence-navigation > .navigation {
    display: inline-flex !important;
    vertical-align: top !important;
    margin: 0 !important;
}

/* Toggle button */
.nf-topnav-toggle {
    position: absolute;
    top: 0;
    background: none !important;
    border: none !important;
    border-right: 2px solid var(--sprk-color-border) !important;
    border-radius: 0;
    margin: var(--sprk-space-0-5) 0;
    padding: calc(var(--sprk-space-1) * 1.5) var(--sprk-space-3);
    height: var(--sprk-space-6);
    cursor: pointer;
    font-size: var(--sprk-font-size-lg);
    color: var(--sprk-color-text-primary) !important;
    transition: transform var(--sprk-transition-smooth), opacity var(--sprk-transition-base) !important;
    flex-shrink: 0;
    opacity: 0; /* Start invisible to prevent jump on page load */
    transform: translateX(0); /* Default collapsed position */

    & button,
    & {
        line-height: 1;
    }
}

/* When menu is open (X icon visible), move toggle button and change border side */
.nf-top-nav.is-open .nf-topnav-toggle {
    border-right: none !important;
    border-left: 2px solid var(--sprk-color-border) !important;
    border-radius: 0;
    transform: translateX(var(--menu-width, 0px));
}

/* Override Kadence button hover/active/focus states */
.nf-topnav-toggle:hover,
.nf-topnav-toggle:focus,
.nf-topnav-toggle:active {
    background: none !important;
    background-color: transparent !important;
    color: var(--sprk-color-text-primary) !important;
    box-shadow: none !important;
}

.nf-topnav-toggle:focus-visible {
    outline: 2px solid var(--sprk-color-accent);
    outline-offset: 2px;
    background: none !important;
}

/* Collapsible navigation clipping animation */
.nf-topnav-collapsible {
    /* display:inline-block; */
    overflow:visible;                  /* clip-path hides visually */
    clip-path: inset(0 0 0 0);         /* starts fully visible */
    opacity: 1;
    transition: all var(--sprk-transition-base);
}
.nf-top-nav:not(.is-open) .nf-topnav-collapsible {
    clip-path: inset(0 100% 0 0);      /* hidden from the right when collapsed */
    opacity: 0;
}
.nf-topnav-collapsible:hover {
    clip-path: none;
}

/* Breadcrumb clipping and fade animation */
.nf-top-nav .nf-topnav-breadcrumb {
    opacity: 0;
    clip-path: inset(0 100% 0 0);      /* starts hidden from the right */
    transition: all var(--sprk-transition-base);
    pointer-events: none;
    line-height: 32px;
    padding: 12px;
}
.nf-top-nav:not(.is-open) .nf-topnav-breadcrumb {
    opacity: 1;
    clip-path: inset(0 0 0 0);         /* fully visible when collapsed */
    pointer-events: auto;
}


/* Breadcrumb styling */
.nf-topnav-breadcrumb {
    flex: 1;
    font-size: 17px;
    font-weight: var(--sprk-font-weight-regular);
    color: var(--sprk-color-text-secondary);
    order: 2;
}

/* Breadcrumb links - no underlines */
.nf-topnav-breadcrumb a {
    text-decoration: none;
    color: inherit;
}

.nf-topnav-breadcrumb a:hover,
.nf-topnav-breadcrumb a:focus {
    text-decoration: none;
    color: var(--sprk-color-text-primary);
}

.breadcrumb-text {
    font-size: 17px;
    margin-left: var(--sprk-space-10);
    padding: 12px 8px;
    position: relative;
    top: 1px;
}

/* No-collapse state — navigation stays fully expanded (e.g. home page) */
.nf-top-nav.no-collapse {
    & .nf-topnav-collapsible {
        position: relative;
    }
    & .nf-topnav-toggle {
        display: none;
    }
    & .nf-topnav-breadcrumb {
        display: none;
    }
    & .nf-topnav-navigation {
        opacity: 1;
        visibility: visible;
    }
}

/* Branding visibility — classes applied server-side alongside inline styles.
   !important needed to override .nf-topnav-collapsible > * { display: inline-flex !important } */
.nf-top-nav.hide-logo-symbol .nf-topnav-stayvisible {
    display: none !important;
}
.nf-top-nav.hide-logo-text .nf-topnav-branding-text {
    display: none !important;
}

/* Hamburger icon transitions */
.hamburger-icon {
    display: inline-block;
    transition: transform var(--sprk-transition-base);
}

/* Responsive behavior */
@media (max-width: 768px) {
    .nf-top-nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sprk-space-3);
    }
    
    .nf-topnav-navigation {
        justify-content: center;
    }
}


/* ==========================================================================
   Blog & Post Single + Product Single
   ========================================================================== */

/* Title: Post + Product + Form Template */
.single-post,
.single-download,
.single-sd_gb_template {
    & .entry-header:has(h1) {
        max-width: var(--sprk-blog-title-width);
        margin-block-end: 4.5rem;

        @media (max-width: 1024px) {
            margin-block-end: 3rem;
        }

        @media (max-width: 767px) {
            margin-block-end: 2.5rem;
        }
    }
}

/* FT hero override — zero the bottom margin on the header (and the tagline
   inside it) so the hero sits flush against the layout grid below. The
   compound `.sd-gb-ft__header.entry-header` selector beats the
   `.single-sd_gb_template .entry-header:has(h1)` rule above on specificity
   (0,3,0 vs 0,2,1) at all breakpoints. */
.single-sd_gb_template .sd-gb-ft__header.entry-header,
.single-sd_gb_template .sd-gb-ft__tagline {
    margin-block-end: 0;
}

/* Content: Post + Product */
.single-post {
    & .entry-content.single-content,
    & .comments-area {
        max-width: var(--sprk-blog-text-width);
    }
    & .comments-area {
        margin-left: 0;
    }
}

.single-download {
    & .entry-content.single-content {
        width: 88%;
        max-width: 100%;
    }
}

/* Blog post left-alignment - compensate for narrow width centering */
.content-width-narrow.single-post .content-container.site-container {
    max-width: var(--global-content-width);
    /* padding-right: calc(var(--global-content-width) - var(--global-content-narrow-width) + var(--global-content-edge-padding)); */
}

/* Image sizing: Post + Product */
.single-post,
.single-download {
    & .wp-block-kadence-image.alignfull img,
    & .wp-block-kadence-image.alignwide img {
        width: 100%
    }
}

/* Image & content alignment: Post, KB Article */
.single-post,
.single-ht_kb {
    /* Calculations for margin offsets on blog content area */
    --viewport-to-content-gap: calc((100vw - var(--global-content-width)) / -2 - var(--global-content-edge-padding));
    --narrow-width-minus-padding: calc(var(--global-content-narrow-width) - var(--global-content-edge-padding) * 2);
    --viewport-width-minus-padding: calc(100vw - var(--global-content-edge-padding) * 2 - var(--scrollbar-offset, 0px));

    /* Inner container width (starts as same inner width as narrow content) */
    & .site-container .site-main {
        max-width: min(var(--narrow-width-minus-padding), var(--viewport-width-minus-padding));
    }

    /* full width containers/images */
    & .entry-content.single-content {
        & .alignfull,
        & .alignwide,
        & .entry-content .alignfull,
        & .entry-content .alignwide {
            margin-left: min(var(--viewport-to-content-gap), calc(-1 * var(--global-content-edge-padding)));
            max-width: 100vw;
            width: calc(100vw + (var(--scrollbar-offset) / 2)); /* add a little extra to ensure overlap instead of gaps */
            padding-left: 0;
            padding-right: 0;
            clear: both;
        }
    }

    /* content width containers/images (should match width of featured image) */
    &.content-width-narrow .wp-site-blocks .content-container .alignwide {
        margin-left: 0;
        max-width: min(var(--narrow-width-minus-padding), var(--viewport-width-minus-padding));
    }
}

/* .wp-block-image .alignleft {
    margin-right: var(--global-md-spacing)
} */

/* .wp-block-image .alignright {
    margin-left: var(--global-md-spacing)
} */

/* ==========================================================================
   Blog Archive Grid
   ========================================================================== */

/* Pagination wrapper spacing */
.kt-blocks-page-nav {
    margin: var(--sprk-space-5) 0;
}

/* Post grid title links: hide underline until hover */
.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list),
.kadence-posts-list .loop-entry h2.entry-title a {
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
}

.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list):hover,
.kt-blocks-post-grid-item.type-post .entry-title a:not(.button):not(.list):focus,
.kadence-posts-list .loop-entry h2.entry-title a:hover,
.kadence-posts-list .loop-entry h2.entry-title a:focus {
    text-underline-offset: 0.25em;
}

/* Post card title and content font sizes in Kadence post grid blocks */
.kt-blocks-post-grid-item .entry-content,
.kadence-posts-list .entry-summary p {
    font-size: 0.88889em; /* ~16px when inherited from 18px base */
    margin-top: 0;
    margin-bottom: 0;
}

.kadence-posts-list .entry-summary {
    margin-top: 0;
    margin-bottom: 0;
}

.kt-blocks-post-grid-item h2,
.kadence-posts-list .loop-entry.type-post h2.entry-title {
    font-size: var(--sprk-font-size-xl);
    padding-top: 10px;
    padding-bottom: 5px;
}

.kadence-posts-list .loop-entry.type-post .entry-header {
    margin-bottom: 0;
    padding-bottom: var(--global-kb-spacing-xxs, 0.5rem);
}

.archive .kadence-posts-list.grid-cols {
    column-gap: 32px;
    row-gap: 32px;
}

.content-style-boxed .kadence-posts-list .entry.loop-entry {
    border: 1px solid var(--sprk-color-border);
    padding: 24px;
}

.kadence-posts-list.post-archive .post-thumbnail {
    margin-bottom: var(--global-kb-spacing-xs, 1rem);
    border-radius: var(--sprk-radius-sm);
}

/* ==========================================================================
   Terms Grid Block (Blog index categories)
   ========================================================================== */

.nf-spark-block-grid-list.nf-spark-grid-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--sprk-space-4);
    margin: 0;
    padding: 0;
}

.nf-spark-block-grid-list .nf-terms-flat-list {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nf-spark-block-grid-list .nf-term-item {
    position: relative;
    padding: var(--sprk-space-3);
    border-radius: var(--sprk-radius-base);
    transition: var(--sprk-transition-base);
    background: transparent;
    border: 1px solid transparent;
}

.nf-spark-block-grid-list .nf-term-item:hover {
    border-color: var(--sprk-color-border);
}

.nf-spark-block-grid-list .nf-term-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.nf-spark-block-grid-list .nf-term-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.nf-spark-block-grid-list .nf-term-header {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    margin-bottom: var(--sprk-space-1);
}

.nf-spark-block-grid-list .nf-term-icon {
    flex-shrink: 0;
    width: var(--sprk-space-4);
    height: var(--sprk-space-4);
    position: relative;
}

.nf-spark-block-grid-list .nf-term-icon svg {
    width: var(--sprk-space-4);
    height: var(--sprk-space-4);
}


.nf-spark-block-grid-list .nf-term-header .nf-term-title {
    flex: 1;
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-regular);
    line-height: var(--sprk-line-height-tight);
    margin: 0;
}

.nf-spark-block-grid-list .nf-term-count {
    display: none;
}

.nf-spark-block-grid-list .nf-term-description {
    font-size: var(--sprk-font-size-sm);
    line-height: var(--sprk-line-height-base);
    margin: 0;
    color: var(--sprk-color-text-muted);
}

.nf-spark-block-grid-list .nf-term-description p {
    margin: 0;
}

/* Mobile: Single column */
@media (max-width: 768px) {
    .nf-spark-block-grid-list.nf-spark-grid-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Footer - Reveal Effect
   ========================================================================== */

/* Float the page over the footer */
main.wrap {
    position: relative;
    z-index: 1;
    /* min-height: 100vh applied via inline style in wp_head for faster paint */
}

main#inner-wrap {
    box-shadow: var(--sprk-shadow-lg);
    min-height: calc(100vh - var(--sprk-header-height) - var(--sprk-admin-bar-offset));
    display: flex;
    flex-direction: column;
}

main#inner-wrap > .nf-spark-peeking-ninja-wrapper {
    margin-top: auto;
}

/* Hold the footer in place */
footer.site-footer {
    position: sticky;
    bottom: 2px;
}

body, footer#colophon {
    background: var(--global-palette7);
}

/* ==========================================================================
   EDD Single Download Pages
   ========================================================================== */

/* Pricing Slider Component */
.nf-spark-pricing-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: var(--sprk-space-4);
}

.nf-spark-pricing-slider-title {
    margin: var(--sprk-space-3) 0 var(--sprk-space-0-5) 0;
    font-size: var(--sprk-font-size-base);
    text-align: center;
}

.nf-spark-price-slider {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    position: relative;
    width: 100%;
    height: 50px;
    user-select: none;
    margin-bottom: var(--sprk-space-3);
}

/* Horizontal line connecting all dots */
.nf-spark-price-slider::before {
    content: " ";
    position: absolute;
    height: 6px;
    width: calc((var(--dot-count) - 1) / var(--dot-count) * 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--global-palette6);
    z-index: 0;
}

.nf-spark-price-slider input,
.nf-spark-price-slider label {
    box-sizing: border-box;
    flex: 1;
    user-select: none;
    cursor: pointer;
}

.nf-spark-price-slider label {
    display: inline-block;
    position: relative;
    width: 20%;
    height: 100%;
    user-select: none;
}

/* Price labels below dots */
.nf-spark-price-slider label::before {
    content: attr(data-price-label);
    position: absolute;
    left: 50%;
    padding-top: 10px;
    transform: translate(-50%, 45px);
    white-space: nowrap;
    opacity: 0.7;
    transition: all 0.15s ease-in-out;
    color: var(--sprk-color-text-secondary);
}

/* Dots/circles - unselected: solid gray with white border */
.nf-spark-price-slider label::after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--global-palette9);
    background: var(--global-palette6);
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* Hover effect */
.nf-spark-price-slider label:hover::after {
    transform: translate(-50%, -50%) scale(1.2);
    border-color: var(--global-palette6);
}

/* Hide radio inputs */
.nf-spark-price-slider input {
    display: none;
}

/* Selected state for labels */
.nf-spark-price-slider input:checked + label::before {
    opacity: 1;
    color: var(--sprk-color-text-primary);
    font-weight: var(--sprk-font-weight-bold);
}

/* Selected state for dots - gray outline with white center */
.nf-spark-price-slider input:checked + label::after {
    border: 4px solid var(--global-palette6);
    background: var(--global-palette9);
    transform: translate(-50%, -50%) scale(1.2);
}

/* Moving indicator dot */
.nf-spark-price-slider input:checked ~ .nf-spark-price-pos {
    opacity: 1;
}

/* Moving indicator dot - dark color center */
.nf-spark-price-pos {
    display: block;
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    background: var(--global-palette5);
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
    transform: translate(-50%, -50%);
    border: none;
    opacity: 0;
    z-index: 2;
}

/* Selected price display */
.nf-spark-selected-price {
    text-align: center;
    margin-bottom: var(--sprk-space-3);
}

.nf-spark-selected-price-amount {
    font-size: var(--sprk-font-size-xl);
    font-weight: 700;
    color: var(--sprk-color-text-primary);
    display: block;
}

.nf-spark-selected-price-label {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
    margin-top: var(--sprk-space-1);
}

@media (max-width: 768px) {
    .nf-spark-price-slider label::before {
        font-size: var(--sprk-font-size-xs);
        transform: translate(-50%, 35px);
    }

    .nf-spark-price-slider label::after {
        width: 16px;
        height: 16px;
    }

    .nf-spark-price-pos {
        width: 6px;
        height: 6px;
    }
}

/* Guarantee Section */
.nf-spark-guarantee-section {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    margin: var(--sprk-space-10) 0 var(--sprk-space-8);
}

.nf-spark-guarantee-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nf-spark-guarantee-icon svg {
    width: var(--sprk-space-9);
    height: var(--sprk-space-9);
}

.nf-spark-guarantee-content {
    min-width: 0;
}

.nf-spark-guarantee-text {
    font-size: var(--sprk-font-size-xl);
    color: var(--sprk-color-text-muted);
    margin: 0;
    line-height: var(--sprk-line-height-tight);
}

/* Sidebar Inner Wrap */
.single-download .sidebar-inner-wrap {
    height: 100%;
}

/* Sidebar Section Spacing */
.nf-spark-sidebar-section {
    margin-bottom: var(--sprk-space-6);
}

/* Product Meta Section */
.nf-spark-product-meta-section {
    border: 2px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    overflow: hidden;
    padding: 0 var(--sprk-space-3);
}

.nf-spark-meta-group {
    padding: var(--sprk-space-2) 0;
}

.nf-spark-meta-group + .nf-spark-meta-group {
    border-top: 1px solid var(--sprk-color-border);
}

.primary-sidebar .nf-spark-product-meta-section h3.nf-spark-meta-group-title {
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sprk-color-text-muted);
    margin: 0;
    padding: var(--sprk-space-0-5) 0;
}

.nf-spark-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sprk-space-0-75) 0;
}

.nf-spark-meta-label {
    font-weight: var(--sprk-font-weight-bold);
    font-size: var(--sprk-font-size-sm);
}

.nf-spark-meta-value {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-muted);
}

/* Icon in meta value rows */
.nf-spark-meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Match link color to muted meta values in product info section */
.nf-spark-product-meta-section .nf-spark-meta-link,
.nf-spark-product-meta-section .nf-spark-meta-link:visited {
    color: var(--sprk-color-text-muted);
}

/* Support Block */
.nf-spark-support-block-text {
    margin: 0.5em 0;
    color: var(--sprk-color-text-muted);
}

/* License Info */
.nf-spark-license-info-section {
    display: flex;
    gap: var(--sprk-space-0-75);
    align-items: flex-start;
}

.nf-spark-license-info-icon {
    width: var(--sprk-space-2);
    height: var(--sprk-space-2);
    flex-shrink: 0;
    color: var(--sprk-color-text-primary);
    margin-top: 0.1em;
}

.nf-spark-license-text {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-muted);
    margin: 0;
}

/* Pricing Section */
.nf-spark-pricing-section {
    padding-top: calc(var(--sprk-space-unit) * 19);
    padding-bottom: var(--sprk-space-6);
    position: sticky;
    top: calc(var(--sprk-space-9) * -1);
    background: linear-gradient(to bottom, var(--sprk-color-background) calc(100% - 68px), transparent 100%);
    z-index: 5;
}

.admin-bar .nf-spark-pricing-section {
    top: calc(var(--sprk-space-5) * -1);
}

/* Mobile: fixed bottom bar with reversed gradient (transparent top → solid bottom) */
@media (max-width: 1024px) {
    .nf-spark-pricing-slider {
        margin-bottom: 0;
    }

    .single-download .primary-sidebar h3 {
        display: none;
    }

    .nf-spark-pricing-section,
    .admin-bar .nf-spark-pricing-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        padding-top: var(--sprk-space-5);
        padding-right: var(--sprk-space-4);
        padding-bottom: var(--sprk-space-3);
        padding-left: var(--sprk-space-4);
        background: linear-gradient(to bottom, transparent 0%, var(--sprk-color-background) var(--sprk-space-5));
        transition: opacity 0.4s ease;
    }

    .nf-spark-pricing-section.is-hidden {
        opacity: 0;
        pointer-events: none;
    }
}

.nf-spark-pricing-section .edd_download_purchase_form,
.nf-spark-pricing-section .edd_purchase_submit_wrapper {
    width: 100%;
}

.nf-spark-pricing-section .nf-spark-add-to-cart-btn {
    font-size: var(--sprk-font-size-lg);
}

/* Override Kadence xl grid gap for single download sidebar layout */
@media screen and (min-width: 1025px) {
    .single-download.has-sidebar .content-container {
        grid-gap: var(--sprk-space-5);
    }
}

/* Main Title Line: Icon + Title + "for" + NF Logo */
.nf-spark-download-pre-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

/* Download Icon */
.nf-spark-download-icon {
    display: flex;
    align-items: center;
    font-size: var(--sprk-font-size-lg);
    color: var(--sprk-color-text-dark);
}

.nf-spark-download-icon {
    font-size: var(--sprk-font-size-base);
}

.nf-spark-download-icon svg {
    width: 2.25em;
    height: auto;
    fill: currentColor;
}

/* WordPress Title (Add-on Title) */
.nf-spark-download-wp-title {
    margin: 0;
    font-size: var(--sprk-font-size-xl);
    line-height: var(--sprk-line-height-tight);
    color: var(--sprk-color-text-dark);
    text-transform: uppercase;
}

/* "for" Text */
.nf-spark-download-for-text {
    font-size: var(--sprk-font-size-xl);
    font-size: 1.25em;
    color: var(--sprk-color-text-muted);
    padding: 0 0.25em;
}

/* NF Logo */
.nf-spark-download-nf-logo {
    display: flex;
    align-items: center;
    padding-bottom: 0.3em;
}

.nf-spark-download-nf-logo .nf-logo {
    height: 1.34em; /* var(--sprk-space-3) */
    width: auto;
}

/* Display Sub-title text */
.nf-spark-download-display-title .nf-spark-display-subtitle,
.sd-gb-ft__tagline {
    font-size: var(--sprk-font-size-xl);
    line-height: var(--sprk-line-height-base);
    margin-block-start: 1em;
    width: 88%;
    max-width: 100%;
}

/* Download Actions (Button + Video Link) */
.nf-spark-download-actions {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-4);
    margin-top: var(--sprk-space-5);
    flex-wrap: wrap;
}

/* Pricing Button */
.nf-spark-download-membership-btn {
    padding: var(--sprk-space-2) var(--sprk-space-6);
    font-size: var(--sprk-font-size-lg);
}


.nf-spark-download-membership-btn span[class^='txt-'] {
    font-weight: var(--sprk-font-weight-bold);
}

.nf-spark-download-membership-btn {
    & .txt-free,
    & .txt-plan {
        text-transform: uppercase;
    }
}

/* Video Link */
.nf-spark-product-video-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sprk-space-1);
    text-decoration: none;
    font-size: var(--sprk-font-size-lg);
    font-weight: 500;
    transition: all 0.2s ease;
}

.nf-spark-product-video-link:hover {
    /* Inherits color from global link styles */
    text-decoration: none;
}

.nf-spark-product-video-link .nf-spark-video-icon {
    width: 24px;
    height: 24px;
}

/* Tooltip-enabled text indicator - global reusable class */
.nf-spark-tip-text {
    border-bottom: 1px dashed var(--sprk-color-border-strong);
    cursor: help;
}

.nf-spark-product-video-link .nf-spark-video-text {
    /* Inherits dashed underline from .nf-spark-tip-text */
}

/* Download Title Responsive Layout (font sizes scale automatically) */
/* @media (max-width: 768px) {
    .nf-spark-download-pre-title {
        gap: 0.45rem;
    }

    .nf-spark-download-nf-logo .nf-logo {
        height: 1.25rem;
    }

    .nf-spark-download-actions {
        gap: var(--sprk-space-3);
        margin-top: var(--sprk-space-5);
    }
} */

/* Wrapper groups for controlled wrapping */
.nf-spark-download-icon-title-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.nf-spark-download-for-nf-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

@media (max-width: 768px) {
    .nf-spark-download-pre-title {
        gap: 0.125em;
        margin-block-end: 1.125em;
    }

    /* .nf-spark-download-icon-title-group,
    .nf-spark-download-for-nf-group {
        display: flex;
        align-items: center;
        gap: 0.5em;
    } */

    /* Stack actions vertically on mobile */
    .nf-spark-download-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .nf-spark-download-membership-btn,
    .nf-spark-product-video-link {
        width: 100%;
        justify-content: center;
    }
}

/* Feature Grid ([nf_feature_section] shortcode) */
.nf-spark-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sprk-space-2);
    margin-bottom: var(--sprk-space-8);
}

@media (max-width: 768px) {
    .nf-spark-feature-grid {
        grid-template-columns: 1fr;
    }
}

.nf-spark-feature-card {
    display: flex;
    flex-direction: column;
    padding: var(--sprk-space-4);
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
}

.nf-spark-feature-card__icon {
    width: var(--sprk-space-4);
    height: var(--sprk-space-4);
    color: var(--sprk-color-text-primary);
}

.nf-spark-feature-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nf-spark-feature-card__title {
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-regular);
    line-height: var(--sprk-line-height-tight);
    margin-bottom: var(--sprk-space-2);
}

.nf-spark-feature-card__description {
    font-size: var(--sprk-font-size-base);
    line-height: var(--sprk-line-height-base);
    color: var(--sprk-color-text-muted);
    margin: 0;
    flex: 1;
}

/* Changelog Content Styling (used in sidebar lightbox and KB pages) */
.nf-spark-changelog__content {
    font-size: var(--sprk-font-size-sm);
}

.nf-spark-changelog__title,
.nf-spark-changelog__content h2 {
    font-size: var(--sprk-font-size-xxl);
    margin-bottom: var(--sprk-space-4);
}

.nf-spark-changelog__content h4 {
    font-size: var(--sprk-font-size-base);
    margin-top: 0.75em;
    margin-bottom: 0.25em;
}

.nf-spark-changelog__content p {
    margin-top: 0.75em;
    margin-bottom: 0.25em;
}

.nf-spark-changelog__content ul {
    margin-left: 2.5em;
}

.nf-spark-changelog__content li {
    font-family: var(--sprk-font-mono);
    font-size: var(--sprk-font-size-xs);
}

[id^="nf-spark-changelog-"] .nf-spark-changelog__content {
    padding: var(--sprk-space-3);
}

/* =============================================================================
   Form Templates (Glovebox · Form Templates CPT — sd_gb_template)
   =============================================================================
   Single + archive presentation for the Form Templates module. Shares
   patterns with the Blog and EDD Single Download sections above; theme
   overrides for the plugin's structural defaults live here.
   ============================================================================= */

/* Form preview lightbox — let the iframe fill whatever box GLightbox sized
   for us. Sizing itself comes from the `data-glightbox` config on the
   trigger anchor (see `includes/form-templates-lightbox.php`). */
.glightbox-container .sd-gb-ft__preview-lightbox-content,
.glightbox-container .sd-gb-ft__preview-lightbox-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sd-gb-ft__thumbnail,
.sd-gb-ft-card__thumbnail {
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-md);
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.sd-gb-ft-card__thumbnail {
    border-radius: var(--sprk-radius-base);
    margin-top: var(--sprk-space-2);
    overflow: hidden;
}

.sd-gb-ft__thumbnail--linked:hover,
.sd-gb-ft-card__thumbnail:hover {
    box-shadow: var(--sprk-shadow-btn-hover);
}

.sd-gb-ft__thumbnail-wrap .sd-gb-ft__thumbnail--linked::after {
    color: var(--sprk-btn-secondary-color);
    background-color: var(--sprk-btn-secondary-bg-hover);
}

.sd-gb-ft__actions{
    position: sticky;
    top: var(--sprk-admin-bar-offset);
    padding-top: 1.5rem;
    background: linear-gradient(to bottom, var(--sprk-color-background) calc(100% - 48px), transparent 100%);
    z-index: 5;
}

.sd-gb-ft__sidebar .sd-gb-ft__addons {
    margin-top: 0 !important;
}

/* Add-on icon — grows on link hover. Parent span is sized to the larger
   (hover) state up front so neighboring icons/text don't reflow. */
.sd-gb-ft__addon-icon {
    height: var(--sprk-space-4);
    display: flex;
    align-items: center;
}

.sd-gb-ft__addon-icon .nf-spark-icon {
    width: var(--sprk-space-3);
    height: var(--sprk-space-3);
    transition: width 0.25s ease, height 0.25s ease;
    transition-delay: 0.1s;
}

.sd-gb-ft__addon-link:hover .sd-gb-ft__addon-icon .nf-spark-icon {
    width: var(--sprk-space-4);
    height: var(--sprk-space-4);
}



/* =============================================================================
   EDD Account Dashboard
   ============================================================================= */

/**
 * Custom account dashboard pages.
 * Uses design tokens from design-tokens.css.
 *
 * Organization:
 * 1. Layout Structure
 * 2. Greeting Header
 * 3. Sidebar Navigation
 * 4. Product Cards
 * 5. Bundle/Membership Cards
 * 6. License Key Display
 * 7. Status Badges
 * 8. Action Links
 * 9. Downloads List
 * 10. Payment Methods
 * 11. Orders Table
 * 12. Membership Promo Banner
 * 13. Empty States
 * 14. Responsive Adjustments
 */

/* ==========================================================================
   1. Layout Structure
   ========================================================================== */

.nf-spark-account-page {
    padding: 0;
}

.nf-spark-account-container {
    max-width: var(--sprk-container-max-width);
    margin: 0 auto;
    padding: 0 var(--sprk-container-padding);
}

.nf-spark-account-content {
    min-width: 0; /* Prevent grid blowout */
}

/* Account Action Notices */
.nf-spark-notice,
.nf-spark-signin-form__error,
.edd-alert,
#edd_secure_site_wrapper {
    position: relative;
    padding: var(--sprk-space-2) var(--sprk-space-4);
    margin-bottom: var(--sprk-space-4);
    border-radius: var(--sprk-radius-sm);
    border: 2px solid;
}

.nf-spark-notice__title {
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-bold);
    margin: 0 0 var(--sprk-space-0-5) 0;
    line-height: var(--sprk-line-height-tight);
}

.nf-spark-notice__message {
    margin: 0;
    font-size: 0.889em;
    line-height: 1.6;
}

.nf-spark-notice p,
.edd-alert p {
    margin: 0;
    font-size: 0.889em;
    line-height: 1.6;
}

/* Remove bottom margin from last paragraph in notices */
.nf-spark-notice p:last-child,
.edd-alert p:last-child {
    margin-bottom: 0;
}

.nf-spark-notice--success,
.edd_success.edd-alert-success,
.edd-alert.edd-alert-success,
#edd_secure_site_wrapper {
    color: var(--sprk-color-success-text);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--sprk-color-success) 35%, transparent),
        inset 0px 0px 0px 2px rgba(255, 255, 255, .6);
    border-color: color-mix(in srgb, var(--sprk-color-success) 35%, transparent);
    background: color-mix(in srgb, var(--sprk-color-success) 5%, transparent);
    padding-left: var(--sprk-space-12);
}

.nf-spark-notice--success::before,
.edd_success.edd-alert-success::before,
.edd-alert.edd-alert-success::before,
#edd_secure_site_wrapper .padlock {
    content: '';
    position: absolute;
    left: var(--sprk-space-2);
    top: -12px;
    width: 64px;
    height: 64px;
    background: var(--sprk-color-success);
    border: 6px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-notice--success::after,
.edd_success.edd-alert-success::after,
.edd-alert.edd-alert-success::after {
    content: '';
    position: absolute;
    left: calc(var(--sprk-space-2) + 16px);
    top: 2px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 20.796875 5.8027344 L 20.089844 6.5097656 L 9.0136719 17.585938 L 4.40625 12.992188 L 3.6992188 12.287109 L 2.2871094 13.703125 L 2.9941406 14.408203 L 9.015625 20.414062 L 21.503906 7.9238281 L 22.210938 7.2167969 L 20.796875 5.8027344 z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nf-spark-notice--error,
.nf-spark-signin-form__error,
.edd_errors.edd-alert-error,
.edd_error.edd-alert-error,
.edd-alert.edd-alert-error {
    color: var(--sprk-color-error-text);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--sprk-color-error) 35%, transparent),
        inset 0px 0px 0px 2px rgba(255, 255, 255, .6);
    border-color: color-mix(in srgb, var(--sprk-color-error) 35%, transparent);
    background: color-mix(in srgb, var(--sprk-color-error) 5%, transparent);
    padding-left: var(--sprk-space-12);
}

.nf-spark-notice--error::before,
.nf-spark-signin-form__error::before,
.edd_errors.edd-alert-error::before,
.edd_error.edd-alert-error::before,
.edd-alert.edd-alert-error::before {
    content: '';
    position: absolute;
    left: var(--sprk-space-2);
    top: -12px;
    width: 64px;
    height: 64px;
    background: var(--sprk-color-error);
    border: 6px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-notice--error::after,
.nf-spark-signin-form__error::after,
.edd_errors.edd-alert-error::after,
.edd_error.edd-alert-error::after,
.edd-alert.edd-alert-error::after {
    content: '';
    position: absolute;
    left: calc(var(--sprk-space-2) + 17px);
    top: 4px;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 19.794922 2.7910156 L 19.085938 3.4980469 L 12 10.585938 L 4.9414062 3.5273438 L 4.234375 2.8203125 L 2.8203125 4.234375 L 3.5273438 4.9414062 L 10.585938 12 L 3.2929688 19.292969 L 2.5859375 20 L 4 21.414062 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20 21.414062 L 21.414062 20 L 20.707031 19.292969 L 13.414062 12 L 20.501953 4.9140625 L 21.208984 4.2050781 L 19.794922 2.7910156 z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nf-spark-notice--info,
.edd-alert.edd-alert-info {
    color: var(--sprk-color-info-text);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--sprk-color-info) 35%, transparent),
        inset 0px 0px 0px 2px rgba(255, 255, 255, .6);
    border-color: color-mix(in srgb, var(--sprk-color-info) 35%, transparent);
    background: color-mix(in srgb, var(--sprk-color-info) 5%, transparent);
    padding-left: var(--sprk-space-12);
}

.nf-spark-notice--info::before,
.edd-alert.edd-alert-info::before {
    content: '';
    position: absolute;
    left: var(--sprk-space-2);
    top: -12px;
    width: 64px;
    height: 64px;
    background: var(--sprk-color-info);
    border: 6px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-notice--info::after,
.edd-alert.edd-alert-info::after {
    content: '';
    position: absolute;
    left: calc(var(--sprk-space-2) + 16px);
    top: 3px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 1 C 11.083334 1 10.268559 1.3797556 9.7519531 1.9609375 C 9.2353472 2.5421194 9 3.2777779 9 4 C 9 4.7222221 9.2353472 5.4578806 9.7519531 6.0390625 C 10.268559 6.6202444 11.083334 7 12 7 C 12.916666 7 13.731441 6.6202444 14.248047 6.0390625 C 14.764653 5.4578806 15 4.7222221 15 4 C 15 3.2777779 14.764653 2.5421194 14.248047 1.9609375 C 13.731441 1.3797556 12.916666 1 12 1 z M 12 3 C 12.416666 3 12.601893 3.1202444 12.751953 3.2890625 C 12.902014 3.4578806 13 3.7222221 13 4 C 13 4.2777779 12.902014 4.5421194 12.751953 4.7109375 C 12.601893 4.8797556 12.416666 5 12 5 C 11.583334 5 11.398107 4.8797556 11.248047 4.7109375 C 11.097986 4.5421194 11 4.2777779 11 4 C 11 3.7222221 11.097986 3.4578806 11.248047 3.2890625 C 11.398107 3.1202444 11.583334 3 12 3 z M 7 8 L 7 13 L 8 13 L 8 17 L 7 16.998047 L 7 22 L 8 22 L 17 22 L 17 16.998047 L 16 17 L 16 8 L 7 8 z M 9 10 L 14 10 L 14 19.003906 L 15 19.001953 L 15 20 L 9 20 L 9 19.001953 L 10 19.003906 L 10 11 L 9 11 L 9 10 z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nf-spark-notice--help {
    color: #2d1185;
    box-shadow:
        0 0 16px rgba(67, 24, 199, 0.35),
        inset 0px 0px 0px 2px rgba(255, 255, 255, .6);
    border-color: rgba(67, 24, 199, 0.35);
    background: rgba(67, 24, 199, 0.05);
    padding-left: var(--sprk-space-12);
}

.nf-spark-notice--help::before {
    content: '';
    position: absolute;
    left: var(--sprk-space-2);
    top: -12px;
    width: 64px;
    height: 64px;
    background: #4318c7;
    border: 6px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-notice--help::after {
    content: '';
    position: absolute;
    left: calc(var(--sprk-space-2) + 16px);
    top: 3px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 2 C 8.6983746 2 6 4.6983746 6 8 L 6 9 L 8 9 L 8 8 C 8 5.7796254 9.7796254 4 12 4 C 14.220375 4 16 5.7796254 16 8 C 16 10.455294 15.003814 11.535739 13.783203 12.789062 C 12.562592 14.042386 11 15.496274 11 18 L 13 18 C 13 16.286726 13.937408 15.49727 15.216797 14.183594 C 16.496186 12.869917 18 11.059706 18 8 C 18 4.6983746 15.301625 2 12 2 z M 11 20 L 11 22 L 13 22 L 13 20 L 11 20 z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nf-spark-notice--warning,
.edd-alert.edd-alert-warn {
    color: var(--sprk-color-warning-text);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--sprk-color-warning) 35%, transparent),
        inset 0px 0px 0px 2px rgba(255, 255, 255, .6);
    border-color: color-mix(in srgb, var(--sprk-color-warning) 35%, transparent);
    background: color-mix(in srgb, var(--sprk-color-warning) 5%, transparent);
    padding-left: var(--sprk-space-12);
}

.nf-spark-notice--warning::before,
.edd-alert.edd-alert-warn::before {
    content: '';
    position: absolute;
    left: var(--sprk-space-2);
    top: -12px;
    width: 64px;
    height: 64px;
    background: var(--sprk-color-warning);
    border: 6px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-notice--warning::after,
.edd-alert.edd-alert-warn::after {
    content: '';
    position: absolute;
    left: calc(var(--sprk-space-2) + 16px);
    top: 3px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 11 2 L 11 17 L 13 17 L 13 2 L 11 2 z M 11 20 L 11 22 L 13 22 L 13 20 L 11 20 z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nf-spark-notice-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.nf-spark-notice-link:hover {
    text-decoration: none;
}

/* ==========================================================================
   2. Greeting Header
   ========================================================================== */

.nf-spark-account-greeting {
    margin-bottom: var(--sprk-space-6);
}

.nf-spark-account-greeting h1 {
    font-family: var(--sprk-font-heading);
    font-size: var(--sprk-font-size-3xl);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin: 0 0 var(--sprk-space-1) 0;
}

.nf-spark-account-greeting p {
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-secondary);
    margin: 0;
}

.nf-spark-account-msg {
    font-size: var(--sprk-font-size-xxl);
    color: var(--sprk-color-text-secondary);
    line-height: var(--sprk-line-height-snug);
    margin-top: var(--sprk-space-1);
    max-width: 1024px;
}

.nf-spark-account-msg-line-1 {
    font-weight: var(--sprk-font-weight-bold);
}

/* ==========================================================================
   3. Sidebar Navigation (.nf-spark-sidenav)
   ========================================================================== */

/* --------------------------------------------------------------------------
   3a. Base block
   Used by: account dashboard, add-ons template, form templates archive.
   - `.nf-spark-sidenav` on the sidebar wrapper (<aside>)
   - `.nf-spark-sidenav__toggle` on the mobile toggle button
   - `.nf-spark-sidenav__heading` on a heading above the list (optional)
   - `.nf-spark-sidenav__list` / `__item` / `__name` on the nav primitives
   - `.nf-spark-sidenav--filter` modifier when items carry count badges
   - `.nf-spark-sidenav--sticky` modifier for sticky positioning
   -------------------------------------------------------------------------- */

/* Desktop: toggle hidden, list always visible */
.nf-spark-sidenav__toggle {
    display: none;
}

.nf-spark-sidenav__heading {
    font-size: var(--sprk-font-size-xl);
    margin-bottom: var(--sprk-space-3);
}

.nf-spark-sidenav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nf-spark-sidenav__item {
    margin-bottom: var(--sprk-space-0-5);
}

.nf-spark-sidenav__item a {
    display: block;
    padding: var(--sprk-space-1) 0;
    color: var(--sprk-color-text-secondary);
    text-decoration: none;
    font-size: var(--sprk-font-size-lg);
    border-radius: var(--sprk-radius-base);
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.nf-spark-sidenav__item a:hover {
    color: var(--sprk-color-text-primary);
    padding-left: var(--sprk-space-1);
}

.nf-spark-sidenav__item.is-active a {
    color: var(--sprk-color-text-primary);
    font-weight: var(--sprk-font-weight-bold);
}

/* --------------------------------------------------------------------------
   3b. Filter modifier — items have a count badge on the right
   -------------------------------------------------------------------------- */

.nf-spark-sidenav--filter .nf-spark-sidenav__item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nf-spark-sidenav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--sprk-space-1);
    background: var(--sprk-color-background-muted);
    border-radius: var(--sprk-radius-lg);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-primary);
    margin-left: var(--sprk-space-2);
}

/* --------------------------------------------------------------------------
   3c. Sticky modifier — applied where the layout calls for it
   Default offset suits a sidenav without a heading (lists hug the top).
   Add `--has-heading` when the sidenav opens with `__heading` so the active
   row aligns with adjacent column content.
   -------------------------------------------------------------------------- */

.nf-spark-sidenav--sticky {
    position: sticky;
    top: calc(var(--sprk-sticky-top) + var(--sprk-admin-bar-offset) - var(--sprk-space-2));
    align-self: start;
    /* When the list is taller than the viewport, let the sidenav itself
       scroll so every item stays reachable without waiting for the page
       to scroll past. Scrollbar is visually hidden but scroll still works
       via wheel / touch / keyboard. */
    max-height: calc(100vh - var(--sprk-sticky-top) - var(--sprk-admin-bar-offset));
    overflow-y: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}

.nf-spark-sidenav--sticky::-webkit-scrollbar {
    display: none;                  /* Chromium / Safari */
}

.nf-spark-sidenav--has-heading.nf-spark-sidenav--sticky {
    top: calc(var(--sprk-sticky-top) + var(--sprk-admin-bar-offset) - var(--sprk-space-1));
}

/* --------------------------------------------------------------------------
   3d. Page layout paired with .nf-spark-sidenav
   Two-column grid: sidenav (left) + content (right). Stacks below 1024px.
   Used by the account dashboard, the EDD add-ons template, and the Glovebox
   form templates archive.
   -------------------------------------------------------------------------- */

.nf-spark-sidenav-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sprk-space-7);
    align-items: start;
}

@media (max-width: 1024px) {
    .nf-spark-sidenav-layout {
        grid-template-columns: 1fr;
        gap: var(--sprk-space-4);
    }
}

/* ==========================================================================
   4. Product Cards
   ========================================================================== */

.nf-spark-products-section {
    margin-bottom: var(--sprk-space-8);
}

.nf-spark-products-section--memberships {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-3);
    margin-bottom: var(--sprk-space-3);
}

/* Generic Account Section Title */
.nf-spark-account-section-title,
.nf-spark-products-section__title,
.nf-spark-payment-methods__title,
.nf-spark-orders__title {
    font-family: var(--sprk-font-heading);
    font-size: var(--sprk-font-size-xxl);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin: 0 0 var(--sprk-space-4) 0;
}

.nf-spark-products-section__description {
    color: var(--sprk-color-text-muted);
    margin: 0 0 var(--sprk-space-4) 0;
}

/* Filtered Transactions View */
.nf-spark-filter-header,
.nf-spark-license-back-link {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: var(--sprk-space-3);
    gap: var(--sprk-space-3);
}

.nf-spark-order-label {
    font-size: var(--sprk-font-size-xs);
    color: var(--sprk-color-text-muted);
    font-weight: normal;
    margin-left: var(--sprk-space-1);
}

.nf-spark-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sprk-space-3);
}

.nf-spark-product-card {
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    padding: var(--sprk-space-3);
    display: flex;
    flex-direction: column;
}

.nf-spark-product-card__header {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    margin-bottom: var(--sprk-space-3);
}

.nf-spark-product-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    height: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    padding: var(--sprk-space-1);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    flex-shrink: 0;
    transition: var(--sprk-transition-base);
}

.nf-spark-product-card__icon svg {
    width: var(--sprk-space-5);
    height: var(--sprk-space-5);
    color: var(--sprk-color-text-secondary);
}

.nf-spark-product-card__title-row,
.nf-spark-bundle-card__title-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sprk-space-2);
}

.nf-spark-product-card__title {
    font-family: var(--sprk-font-heading);
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin: 0;
    line-height: var(--sprk-line-height-snug);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-spark-product-card__title-row .nf-spark-status-badge {
    flex-shrink: 0;
}

/* ==========================================================================
   5. Bundle/Membership Cards (Full Width, Expandable)
   ========================================================================== */

.nf-spark-bundle-card {
    grid-column: 1 / -1; /* Span full width */
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    overflow: hidden;
}

.nf-spark-bundle-card__header {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    padding: var(--sprk-space-3);
}

.nf-spark-bundle-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    height: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    padding: var(--sprk-space-1);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    flex-shrink: 0;
    transition: var(--sprk-transition-base);
}

.nf-spark-bundle-card__icon svg {
    width: var(--sprk-space-5);
    height: var(--sprk-space-5);
    color: var(--sprk-color-text-secondary);
}

.nf-spark-bundle-card__title {
    font-family: var(--sprk-font-heading);
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.nf-spark-bundle-card__title-row .nf-spark-status-badge {
    flex-shrink: 0;
}

/* Bundle card metadata (always visible) */
.nf-spark-bundle-card__metadata {
    padding: 0 var(--sprk-space-3);
}

.nf-spark-bundle-card__metadata .nf-spark-meta-row {
    padding: var(--sprk-space-2) 0;
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-bundle-card__metadata .nf-spark-meta-row:last-child {
    border-bottom: none;
}

/* License meta row (contains toggle arrow) */
.nf-spark-meta-row--license {
    flex-wrap: wrap;
}

/* Expandable content inside license row - full width */
.nf-spark-meta-row--license > .nf-spark-bundle-card__content {
    width: 100%;
    flex-basis: 100%;
}

/* License key in meta row */
.nf-spark-meta-row__license {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
}

.nf-spark-meta-row__license .nf-spark-license-key {
    margin: 0;
    width: 100%;
}

/* Expand icon in license row */
.nf-spark-meta-row--license .nf-spark-bundle-card__expand {
    margin-left: var(--sprk-space-2);
    flex-shrink: 0;
}

/* Action links section (outside expandable content) */
.nf-spark-bundle-card > .nf-spark-product-card__actions {
    padding: var(--sprk-space-3);
    position: relative;
}

.nf-spark-bundle-card > .nf-spark-product-card__actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--sprk-space-3);
    right: var(--sprk-space-3);
    height: 1px;
    background-color: var(--sprk-color-border);
}

.nf-spark-bundle-card__expand {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sprk-color-text-muted);
    transition: transform 0.2s ease, background-color 0.15s ease;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.nf-spark-bundle-card__expand:hover {
    background-color: var(--sprk-btn-primary-bg);
    color: var(--sprk-btn-primary-color);
}

.nf-spark-bundle-card__expand:focus {
    box-shadow: var(--sprk-shadow-btn-hover-sm);
    outline: none;
}

.nf-spark-bundle-card.is-expanded .nf-spark-bundle-card__expand {
    transform: rotate(180deg);
}

/* AAP Scrollable table wrapper (inside expandable content) */
.nf-spark-bundle-table-wrapper {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--sprk-color-border);
    border-radius: 4px;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--sprk-color-border) transparent;
}

.nf-spark-bundle-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.nf-spark-bundle-table-wrapper::-webkit-scrollbar-track {
    background: var(--sprk-color-bg-secondary);
}

.nf-spark-bundle-table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--sprk-color-border);
    border-radius: 4px;
}

.nf-spark-bundle-table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--sprk-color-text-light);
}

.nf-spark-bundle-card__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nf-spark-bundle-card.is-expanded .nf-spark-bundle-card__content {
    max-height: 2000px; /* Large value for smooth animation */
}

.nf-spark-bundle-card.is-expanded .nf-spark-bundle-card__content {
    overflow: inherit;
}

.nf-spark-bundle-card__inner {
    padding: var(--sprk-space-3) 0 0;
}

/* Bundle products table */
.nf-spark-bundle-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--sprk-space-1);
}

.nf-spark-bundle-table th {
    text-align: left;
    padding: var(--sprk-space-1) var(--sprk-space-2);
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
}

.nf-spark-bundle-table td {
    padding: var(--sprk-space-1) var(--sprk-space-2);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-primary);
    vertical-align: middle;
}

/* Column sizing: Product expands, License and Activations collapse to content */
.nf-spark-bundle-table th:nth-child(1),
.nf-spark-bundle-table td:nth-child(1) {
    width: auto; /* Product column expands to fill available space */
}

.nf-spark-bundle-table th:nth-child(2),
.nf-spark-bundle-table td:nth-child(2),
.nf-spark-bundle-table th:nth-child(3),
.nf-spark-bundle-table td:nth-child(3) {
    width: 1%; /* License and Activations columns collapse to content size */
    white-space: nowrap; /* Prevent text wrapping in these columns */
}

/* Row hover effect */
.nf-spark-bundle-table tr {
    transition: background-color var(--sprk-transition-base);
}

.nf-spark-bundle-table tbody tr:hover {
    background-color: var(--sprk-color-background-subtle);
}

.nf-spark-bundle-table tbody tr:hover .nf-spark-license-key__text {
    background-color: var(--sprk-color-background);
}

.nf-spark-bundle-table__product {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
}

.nf-spark-bundle-table__product a {
    color: var(--sprk-color-text-primary);
    text-decoration: underline;
}

/* Hide Activations column for AAP (All Access Pass) bundles
   AAP activations are per-site, not per-product, so individual
   product activation counts are not meaningful */
.nf-spark-bundle-card--aap .nf-spark-bundle-table th:nth-child(3),
.nf-spark-bundle-card--aap .nf-spark-bundle-table td:nth-child(3) {
    display: none;
}

.nf-spark-bundle-card__actions {
    display: flex;
    gap: var(--sprk-space-2);
    margin-top: var(--sprk-space-3);
    align-items: center;
}

.nf-spark-bundle-card__actions .nf-spark-btn-wrapper {
    width: auto;
    flex-shrink: 0;
}

/* Global placeholder color — overrides Kadence's var(--global-palette6) */
::placeholder {
    color: var(--sprk-color-text-muted);
}

/* Global Form Input Overrides (Kadence defaults) */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea,
select {
    color: var(--sprk-color-text-primary);
    border-color: var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus,
select:focus {
    box-shadow: var(--sprk-shadow-btn-hover);
    border-color: var(--sprk-color-border-strong);
}

/* License Management Add Site Form */
.nf-spark-license-add-site-form {
    padding-top: var(--sprk-space-3);
}

.nf-spark-form-label {
    display: block;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
    margin-bottom: var(--sprk-space-2);
}

.nf-spark-form-row {
    display: flex;
    gap: var(--sprk-space-2);
    align-items: center;
}

.nf-spark-form-input {
    flex: 1;
    padding: var(--sprk-space-2) var(--sprk-space-3);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    color: var(--sprk-color-text-primary);
    background-color: var(--sprk-color-background);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nf-spark-form-input:focus {
    outline: none;
    border-color: var(--sprk-color-brand-red);
    box-shadow: 0 0 0 3px rgba(239, 71, 72, 0.1);
}


/* License Management Card Adjustments */
.nf-spark-license-manage-card .nf-spark-bundle-table-wrapper {
    margin: 0 0 var(--sprk-space-3);
}

.nf-spark-activations-count {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
    margin: 0;
    padding: var(--sprk-space-2) 0;
}

/* ==========================================================================
   6. Receipt Page Styles (EDD Blocks)
   ========================================================================== */

/* Main Receipt Block Wrapper */
.wp-block-edd-receipt,
.edd-blocks__receipt,
.nf-spark-license-management,
form#edd-invoices {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
}

/* Receipt Totals Section / EDD Invoices form - Card Style */
.edd-blocks-receipt__totals,
form#edd-invoices {
    background: var(--sprk-color-surface);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    padding: var(--sprk-space-4);
    margin-bottom: var(--sprk-space-4);
}

/* Receipt Row Styles */
.edd-blocks-receipt__totals .edd-blocks__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sprk-space-2) 0;
    border-bottom: 1px solid var(--sprk-color-border);
}

.edd-blocks-receipt__totals .edd-blocks__row:last-child {
    border-bottom: none;
}

/* Receipt Header Row (Order #) */
div.edd-blocks-receipt__totals .edd-blocks__row.edd-blocks-receipt__row-header {
    padding-top: 0;
    border-bottom: 2px solid var(--sprk-color-border-strong) !important;
}

div.edd-blocks-receipt__totals .edd-blocks__row.edd-blocks-receipt__row-header .edd-blocks__row-label,
div.edd-blocks-receipt__totals .edd-blocks__row.edd-blocks-receipt__row-header .edd-blocks__row-value {
    font-size: var(--sprk-font-size-xl);
    color: var(--sprk-color-text-primary);
}

/* Row Labels and Values */
.edd-blocks__row-label {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
}

/* Items section uses larger label font */
.edd-blocks-receipt__items .edd-blocks__row-label {
    font-size: var(--sprk-font-size-base);
}

.edd-blocks-receipt__items .edd-blocks__row {
    align-items: start;
}

.edd-blocks__row-value {
    font-size: var(--sprk-font-size-sm);
    text-align: right;
}

/* Order Status Badge */
.edd-blocks__row-value.edd_receipt_payment_status {
    display: inline-block;
    padding: var(--sprk-space-1);
    border-radius: var(--sprk-radius-full);
    font-size: var(--sprk-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.edd-blocks__row-value.edd_receipt_payment_status.complete {
    background-color: var(--sprk-color-success-light);
    color: var(--sprk-color-success-dark);
}

/* Total Row Emphasis */
.edd-blocks-receipt__totals .edd-blocks__row:has(.edd-blocks__row-label:contains("Total")),
.edd-blocks-receipt__totals .edd-blocks__row:last-of-type {
    font-size: var(--sprk-font-size-base);
    padding-top: var(--sprk-space-3);
    margin-top: var(--sprk-space-2);
    border-top: 2px solid var(--sprk-color-border-strong);
}

/* Receipt Items Section - Card Style */
.edd-blocks-receipt__items {
    background: var(--sprk-color-surface);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    padding: var(--sprk-space-4);
}

/* Receipt Items List */
.edd-blocks-receipt__items .edd-blocks-receipt__item {
    padding: var(--sprk-space-3) 0;
    border-bottom: 1px solid var(--sprk-color-border);
}

.edd-blocks-receipt__items .edd-blocks-receipt__item:last-child {
    border-bottom: none;
}

.edd-blocks-receipt__items .edd-blocks-receipt__item-name {
    margin-bottom: var(--sprk-space-1);
}

/* License Key Row */
.edd-blocks-receipt__row-item--license-key .edd-blocks__row-label,
.edd-blocks-receipt__row-item--license-key .edd-blocks__row-value {
    font-size: var(--sprk-font-size-sm);
}

.edd-blocks-receipt__row-item--license-key .edd-blocks__row-sublabel {
    font-size: var(--sprk-font-size-sm);
    padding-left: var(--sprk-space-3);
}

/* Tighten spacing between multiple license items (exclude last item which is 2nd-to-last child) */
.edd-blocks-receipt__row-item.edd-blocks-receipt__row-item--license-key:not(:nth-last-child(2)) {
    padding-bottom: 0;
    border-bottom: none;
}

/* EDD License Key Styling (match nf-spark-license-key) */
.edd_sl_license_key {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-0-5);
    font-family: var(--sprk-font-mono);
    font-size: var(--sprk-font-size-xs);
    padding: var(--sprk-space-1) var(--sprk-space-2);
    border-radius: var(--sprk-radius-sm);
    border: 1px solid var(--sprk-color-border);
    background: var(--sprk-color-background-subtle);
    color: var(--sprk-color-text-secondary);
    word-break: break-all;
}

/* Receipt Item Details and Price */
.edd-blocks-receipt__item-details {
    font-size: var(--sprk-font-size-sm);
}

.edd-blocks-receipt__item-price {
    font-size: var(--sprk-font-size-sm);
}

/* Download Files Links */
.edd-blocks-receipt__item-files,
.edd_purchase_receipt_files {
    list-style: none;
    padding: 0;
}

.edd-blocks-receipt__item-files {
    margin: var(--sprk-space-2) 0 0;
}

.edd_purchase_receipt_files {
    margin-top: var(--sprk-space-2);
}

.edd-blocks-receipt__item-files li,
.edd_purchase_receipt_files li {
    position: relative;
    padding-left: var(--sprk-space-4);
    padding-top: var(--sprk-space-1);
    padding-bottom: var(--sprk-space-1);
}

.edd-blocks-receipt__item-files li::before,
.edd_purchase_receipt_files li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M 11 1 L 11 2 L 11 12.585938 L 8.7070312 10.292969 L 8 9.5859375 L 6.5859375 11 L 7.2929688 11.707031 L 12 16.414062 L 16.707031 11.707031 L 17.414062 11 L 16 9.5859375 L 15.292969 10.292969 L 13 12.585938 L 13 2 L 13 1 L 11 1 z M 2 3 L 2 21 L 22 21 L 22 3 L 18 3 L 17 3 L 17 5 L 18 5 L 20 5 L 20 19 L 4 19 L 4 5 L 6 5 L 7 5 L 7 3 L 6 3 L 2 3 z" fill="%23666"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.edd-blocks-receipt__item-files a,
.edd_purchase_receipt_files a {
    color: var(--sprk-color-text-secondary);
    font-size: var(--sprk-font-size-sm);
}

/* Subscription Details Section - Card Style */
#edd_subscription_receipt {
    background: var(--sprk-color-surface);
    padding: var(--sprk-space-4);
    margin-top: var(--sprk-space-4);
    width: 100%;
    border-collapse: collapse;
}

/* Hide unnecessary line breaks in table */
#edd_subscription_receipt br {
    display: none;
}

/* Subscription Details Table Header */
#edd_subscription_receipt thead th {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
    text-align: left;
    padding: var(--sprk-space-1);
    border-bottom: 2px solid var(--sprk-color-border-strong);
    font-weight: 500;
}

/* Subscription Details Table Body */
#edd_subscription_receipt tbody td {
    padding: var(--sprk-space-3) var(--sprk-space-1);
    border-bottom: 1px solid var(--sprk-color-border);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-primary);
    vertical-align: top;
}

#edd_subscription_receipt tbody tr:last-child td {
    border-bottom: none;
}

/* Subscription Name - Slightly Larger */
.edd_subscription_name {
    font-size: var(--sprk-font-size-base);
    font-weight: 500;
    color: var(--sprk-color-text-primary);
    display: block;
    margin-bottom: var(--sprk-space-0-5);
}

/* Subscription Billing Cycle */
.edd_subscription_billing_cycle {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
    display: block;
}

/* Subscription Status - Match status badge styling */
.edd_subscription_status {
    display: inline-block;
    padding: var(--sprk-space-0-5) var(--sprk-space-1-5);
    border-radius: var(--sprk-radius-sm);
    font-size: var(--sprk-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Status Colors - Active */
.edd_subscription_status:is([class*="active"], [class*="Active"]) {
    background-color: var(--sprk-color-success-light);
    color: var(--sprk-color-success-dark);
}

/* Status Colors - Cancelled/Expired */
.edd_subscription_status:is([class*="cancelled"], [class*="Cancelled"], [class*="expired"], [class*="Expired"]) {
    background-color: var(--sprk-color-error-light);
    color: var(--sprk-color-error-dark);
}

/* Responsive Table - Stack on Mobile */
@media (max-width: 768px) {
    #edd_subscription_receipt thead {
        display: none;
    }

    #edd_subscription_receipt tbody td {
        display: block;
        padding: var(--sprk-space-1) 0;
        border-bottom: none;
    }

    #edd_subscription_receipt tbody tr {
        display: block;
        padding: var(--sprk-space-3) 0;
        border-bottom: 1px solid var(--sprk-color-border);
    }

    #edd_subscription_receipt tbody tr:last-child {
        border-bottom: none;
    }

    #edd_subscription_receipt tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--sprk-font-size-xs);
        color: var(--sprk-color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin-bottom: var(--sprk-space-0-5);
    }
}

/* ==========================================================================
   7. License Key Display
   ========================================================================== */

.nf-spark-product-card__meta {
    display: flex;
    flex-direction: column;
}

.nf-spark-product-card__meta .nf-spark-meta-row {
    padding: var(--sprk-space-2) 0;
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-product-card__meta .nf-spark-meta-row:last-child {
    border-bottom: none;
}

.nf-spark-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--sprk-font-size-sm);
}

.nf-spark-meta-row__label {
    color: var(--sprk-color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
}

.nf-spark-enable-auto-renew {
    font-size: var(--sprk-font-size-xs);
    padding-top: 3px;
}

.nf-spark-meta-row__value {
    color: var(--sprk-color-text-primary);
}

/* Helper text for expired subscriptions (Scenario C) */
.nf-spark-helper-text {
    margin-top: var(--sprk-space-1);
    font-size: var(--sprk-font-size-xs);
    color: var(--sprk-color-text-muted);
    line-height: 1.5;
}

.nf-spark-expired-text {
    display: block;
    margin-bottom: var(--sprk-space-0-5);
}

/* Extend License - Dashed underline style */
.nf-spark-extend-license,
.nf-spark-extend-license:visited {
    text-decoration-style: dashed;
    text-decoration-color: var(--sprk-color-border-strong);
    border-bottom: none;
}

.nf-spark-extend-license:hover,
.nf-spark-extend-license:focus {
    text-decoration-style: solid;
    text-decoration-color: var(--sprk-color-accent-hover);
}

/* Extend License - Wrapper for icon and link */
.nf-spark-extend-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Extend License - Renewal icon (shown on hover, slides in from left) */
.nf-spark-renew-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
    transform: translate(0px, 1px) scale(0.9);
    transition: opacity 0.3s ease-out, transform 0.2s ease-out;
    margin-right: var(--sprk-space-0-5);
}

.nf-spark-renew-icon svg {
    width: var(--sprk-space-2);
    height: var(--sprk-space-2);
    display: block;
}

.nf-spark-extend-wrapper:has(.nf-spark-extend-license:hover) .nf-spark-renew-icon,
.nf-spark-extend-wrapper:has(.nf-spark-extend-license:focus) .nf-spark-renew-icon {
    opacity: 1;
    transform: translate(-2px, 1px) scale(1.2);
}

.nf-spark-license-key {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-0-5);
    margin: var(--sprk-space-2) 0;
    justify-content: flex-end;
}

.nf-spark-meta-row__value .nf-spark-license-key {
    margin: 0;
}

.nf-spark-license-key__text {
    font-family: var(--sprk-font-mono);
    font-size: var(--sprk-font-size-xs);
    padding: var(--sprk-space-1) var(--sprk-space-2);
    border-radius: var(--sprk-radius-sm);
    border: 1px solid var(--sprk-color-border);
    background: var(--sprk-color-background-subtle);
    color: var(--sprk-color-text-secondary);
    word-break: break-all;
}

.nf-spark-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--sprk-radius-sm);
    color: var(--sprk-color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nf-spark-copy-btn:hover {
    background: var(--sprk-btn-primary-bg);
    color: var(--sprk-btn-primary-color);
    box-shadow: none !important;
}

.nf-spark-copy-btn:focus {
    box-shadow: var(--sprk-shadow-btn-hover-sm) !important;
    outline: none;
}

.nf-spark-copy-btn.is-copied {
    background: var(--sprk-btn-primary-bg);
    color: var(--sprk-btn-primary-color);
}

.nf-spark-copy-btn svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   7. Status Badges
   ========================================================================== */

/* Standard Badge Component - Used site-wide for status indicators */
.nf-spark-badge,
.nf-spark-status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--sprk-space-0-25) var(--sprk-space-1);
    border-radius: var(--sprk-radius-full);
    font-size: var(--sprk-font-size-xs);
    font-weight: var(--sprk-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

/* Badge Variants */
.nf-spark-badge--active,
.nf-spark-badge--inactive,
.nf-spark-status-badge--active,
.nf-spark-status-badge--inactive {
    background-color: #dcfce7;
    color: #166534;
}

.nf-spark-badge--expired,
.nf-spark-status-badge--expired {
    background-color: #fee2e2;
    color: #991b1b;
}

.nf-spark-badge--disabled,
.nf-spark-status-badge--disabled {
    background-color: var(--sprk-color-background-muted);
    color: var(--sprk-color-text-muted);
}

.nf-spark-badge--default {
    background-color: var(--sprk-color-text-primary);
    color: var(--sprk-color-background);
}

/* ==========================================================================
   8. Action Links
   ========================================================================== */

.nf-spark-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sprk-space-2);
    padding: var(--sprk-space-3) 0 0;
    font-size: var(--sprk-font-size-sm);
    position: relative;
}

.nf-spark-product-card__actions .nf-spark-btn-wrapper.nf-spark-btn-primary {
    width: 100%;
    padding: 0; /* No padding on wrapper - anchor handles it for full clickability */
}

.nf-spark-product-card__actions .nf-spark-btn-wrapper.nf-spark-btn-primary > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sprk-space-1);
    width: 100%;
    padding: calc(var(--sprk-space-1) * 1.5) var(--sprk-space-2); /* Padding on anchor for clickability */
    font-weight: 400;
}

.nf-spark-product-card__actions .nf-spark-btn-wrapper.nf-spark-btn-primary > a svg {
    width: calc(var(--sprk-space-1) * 2.5);
    height: calc(var(--sprk-space-1) * 2.5);
}

.nf-spark-product-card__actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--sprk-color-border);
}

/* Order Actions - Container for action links (Renew, Upgrade, etc.) */
.nf-spark-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sprk-space-2);
    width: 100%;
    position: relative;
}

/* Cancel Confirmation - Inline slide animation */

/* Hide all action links when confirmation is active */
.nf-spark-order-actions.confirmation-active > .nf-spark-meta-link {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out,
                text-underline-offset 0.1s linear,
                text-decoration-color 0.1s linear,
                text-decoration-thickness 0.1s linear;
}

.nf-spark-order-actions > .nf-spark-meta-link {
    opacity: 1;
    transition: opacity 0.2s ease-in-out,
                text-underline-offset 0.1s linear,
                text-decoration-color 0.1s linear,
                text-decoration-thickness 0.1s linear;
}

.nf-spark-cancel-wrapper {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    z-index: -1;
    transition: z-index 0s 0.25s;
}

.nf-spark-cancel-wrapper:has(.nf-spark-cancel-confirmation.showing) {
    z-index: 1;
    transition: z-index 0s 0s;
}

.nf-spark-cancel-confirmation {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    border: 1px solid var(--sprk-color-border);
    padding: 2px 2px 2px 8px;
    border-radius: var(--sprk-radius-sm);
    background: var(--sprk-color-background-subtle);
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s;
}

.nf-spark-cancel-confirmation.showing {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nf-spark-cancel-confirmation-text {
    margin-right: var(--sprk-space-1);
    color: var(--sprk-color-text-primary);
    font-size: var(--sprk-font-size-sm);
}

.nf-spark-cancel-confirm,
.nf-spark-cancel-deny {
    text-decoration: none !important;
    display: inline-block;
    padding: 0 8px;
    background: var(--sprk-color-background);
    color: var(--sprk-color-text-primary);
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .125);
}

.nf-spark-cancel-confirm {
    border-radius: 4px 0 0 4px;
}

.nf-spark-cancel-deny {
    border-radius: 0 4px 4px 0;
}

.nf-spark-cancel-confirm:hover,
.nf-spark-cancel-deny:hover {
    color: var(--sprk-color-background);
    background: var(--sprk-color-background-dark);
}

/* Meta Link - Reusable link style with dark underline that turns red on hover */
.nf-spark-meta-link,
.nf-spark-meta-link:visited,
.inner-link-style-normal a:not(.button),
.widget-area.inner-link-style-normal a:not(.button),
.hkb-searchresults__showall a {
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-text-primary);
}

.nf-spark-meta-link:hover,
.inner-link-style-normal a:not(.button):hover,
.widget-area.inner-link-style-normal a:not(.button):hover,
.hkb-searchresults__showall a:hover {
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-accent-hover);
    text-decoration-thickness: 0.15em;
}

/* Disabled meta link (not clickable) */
.nf-spark-meta-link--disabled {
    color: var(--sprk-color-text-muted);
    text-decoration: none;
    pointer-events: none;
}

/* When disabled link has tooltip, allow interaction */
.nf-spark-meta-link--disabled.nf-spark-tip-text {
    pointer-events: auto; /* Allow tooltip to show */
    /* cursor: help inherited from .nf-spark-tip-text */
}

/* Widget area links - inherit color on hover (no color change) */
.widget-area a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)) {
    text-decoration: underline;
    text-decoration-color: transparent;
}

.widget-area a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):hover {
    color: inherit;
    text-decoration-color: var(--sprk-color-accent-hover);
    text-decoration-thickness: 0.15em;
}

.nf-spark-activations-link {
    /* Inherits color from global link styles */
    text-decoration: underline;
}

/* ==========================================================================
   9. Downloads List
   ========================================================================== */

.nf-spark-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    overflow: hidden;
}

.nf-spark-download-row {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
    padding: var(--sprk-space-2) var(--sprk-space-3);
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-download-row:last-child {
    border-bottom: none;
}

.nf-spark-download-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    height: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
    padding: var(--sprk-space-1);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    flex-shrink: 0;
    transition: var(--sprk-transition-base);
}

.nf-spark-download-row__icon svg {
    width: var(--sprk-space-5);
    height: var(--sprk-space-5);
    color: var(--sprk-color-text-secondary);
}

.nf-spark-download-row__title {
    flex: 1;
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
}

.nf-spark-download-row__action .nf-spark-btn-wrapper {
    min-width: 120px;
}

.nf-spark-download-row__action .nf-spark-btn-wrapper.nf-spark-btn-primary > a,
.nf-spark-download-row__action .nf-spark-btn-wrapper.nf-spark-btn-secondary > a {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
    padding: var(--sprk-space-1-5) var(--sprk-space-3);
    font-weight: var(--sprk-font-weight-bold);
    white-space: nowrap;
}

.nf-spark-download-row__action .nf-spark-btn-wrapper svg {
    flex-shrink: 0;
    width: var(--sprk-space-2);
    height: var(--sprk-space-2);
}

/* ==========================================================================
   10. Payment Methods (EDD Stripe managed cards UI)
   Styles target EDD's #edd-stripe-manage-cards output to match our design.
   ========================================================================== */

.nf-spark-payment-methods {
    margin-bottom: var(--sprk-space-6);
}

.nf-spark-payment-methods__notice {
    font-style: italic;
}

/* Hide EDD's fieldset chrome and legend — we use our own h2 above */
#edd-stripe-manage-cards > fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#edd-stripe-manage-cards > fieldset > legend {
    display: none;
}

/* Card grid layout — the fieldset is the actual parent of card items and add-new form */
#edd-stripe-manage-cards > fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--sprk-space-3);
    margin-bottom: var(--sprk-space-4);
}

@media (max-width: 768px) {
    #edd-stripe-manage-cards > fieldset {
        grid-template-columns: 1fr;
    }
}

/* The add-new-card form and the hidden user ID input span the full grid width */
#edd-stripe-add-new-card,
#edd-stripe-manage-cards > fieldset > legend,
#edd-stripe-manage-cards > fieldset > input[type="hidden"] {
    grid-column: 1 / -1;
}

/* Individual card item */
.nf-spark-payment-methods #edd-stripe-manage-cards div.edd-stripe-card-item {
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    padding: var(--sprk-space-2) var(--sprk-space-3);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-2);
}

/* Card header: brand name + default badge */
.edd-stripe-card-item .card-details {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
}

/* EDD outputs "— Default" as a text separator + span; convert the badge span to match our design */
.edd-stripe-card-item .default-card-sep {
    display: none;
}

.edd-stripe-card-item .card-is-default {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: var(--sprk-space-0-25) var(--sprk-space-1);
    border-radius: var(--sprk-radius-full);
    font-size: var(--sprk-font-size-xs);
    font-weight: var(--sprk-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    background-color: var(--sprk-color-text-primary);
    color: var(--sprk-color-background);
}

/* Expiry and address meta */
#edd-stripe-manage-cards .edd-stripe-card-item .card-meta > span {
    color: var(--sprk-color-text-secondary);
    display: flex;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-meta .card-address {
    text-align: right;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-2);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-expiration {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-expiration-label {
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
}

/* Expired card badge */
.edd-stripe-card-item .card-expired {
    display: inline-flex;
    align-items: center;
    padding: var(--sprk-space-0-25) var(--sprk-space-1);
    border-radius: var(--sprk-radius-full);
    font-size: var(--sprk-font-size-xs);
    font-weight: var(--sprk-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background-color: #fee2e2;
    color: #991b1b;
    margin-left: var(--sprk-space-1);
}

/* Card actions bar */
#edd-stripe-manage-cards .edd-stripe-card-item .card-actions {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-1);
    padding-top: var(--sprk-space-2);
    position: relative;
    /* font-size: 0 hides the literal | pipe separators EDD outputs between action spans */
    font-size: 0;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--sprk-color-border);
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-actions > span {
    font-size: var(--sprk-font-size-sm);
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-actions a,
#edd-stripe-manage-cards .edd-stripe-card-item .card-actions a.delete {
    color: var(--sprk-color-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-text-primary);
    transition:
        text-decoration-color 0.1s linear,
        text-decoration-thickness 0.1s linear;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-actions a:hover,
#edd-stripe-manage-cards .edd-stripe-card-item .card-actions a.delete:hover {
    color: var(--sprk-color-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--sprk-color-accent-hover);
    text-decoration-thickness: 0.15em;
}

/* Card update form (toggled visible by EDD JS on Update click) */
.card-update-form {
    display: none;
    padding: var(--sprk-space-3);
    background: var(--sprk-color-background-subtle);
    border-radius: var(--sprk-radius-md);
    margin-top: var(--sprk-space-2);
}

.card-update-form > label {
    display: block;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin-bottom: var(--sprk-space-2);
}

.card-update-form .card-address-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sprk-space-2);
    margin-bottom: var(--sprk-space-2);
}

.card-update-form .edds-card-address-field--address1,
.card-update-form .edds-card-address-field--address2 {
    grid-column: 1 / -1;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-address-fields input,
#edd-stripe-manage-cards .edd-stripe-card-item .card-address-fields select {
    width: 100%;
}

.card-update-form p {
    margin: 0;
}

.card-update-form > label:first-child {
    font-size: var(--sprk-font-size-xl);
    color: var(--sprk-color-text-primary);
    margin-bottom: 0.5em;
}

.card-update-form label {
    display: block;
    font-size: var(--sprk-font-size-xs);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
    margin-bottom: 4px;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-update-form .edd-input,
#edd-stripe-manage-cards .edd-stripe-card-item .card-update-form select {
    width: 100%;
    padding: var(--sprk-space-1) var(--sprk-space-2);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-sm);
    font-size: var(--sprk-font-size-sm);
    box-sizing: border-box;
}

#edd-stripe-manage-cards .edd-stripe-card-item .card-update-form select {
    background: var(--global-palette9) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat 98% 50%;
}

.card-update-form .card-expiration-fields {
    display: grid;
    grid-template-columns: 1fr 0fr 1fr;
    gap: var(--sprk-space-0-5);
    margin-bottom: var(--sprk-space-4);
    align-items: center;
    justify-content: start;
}

.card-update-form .card-expiration-fields .edd-label {
    grid-column: 1 / -1;
}

.card-update-form .exp-divider {
    margin: 0 var(--sprk-space-1);
    color: var(--sprk-color-text-secondary);
}

.edd-stripe-submit-update {
    background: var(--sprk-color-text-primary);
    color: var(--sprk-color-background);
    border: none;
    padding: var(--sprk-space-1) var(--sprk-space-3);
    border-radius: var(--sprk-radius-md);
    cursor: pointer;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
}

.edd-stripe-submit-update:hover {
    opacity: 0.9;
}

.edd-stripe-cancel-update {
    color: var(--sprk-color-text-secondary);
    margin-left: var(--sprk-space-2);
}

/* Add new card section */
#edd-stripe-add-new-card {
    border: none;
    padding: 0;
}

/* "Add New Card" section title label */
#edd-stripe-add-new-card .edd-stripe-add-new-card > label {
    display: block;
    font-family: var(--sprk-font-heading);
    font-size: var(--sprk-font-size-xl);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin-bottom: var(--sprk-space-3);
}

/* Fieldset — strip chrome, same as profile editor */
#edd-stripe-add-new-card #edd_cc_card_info,
#edd-stripe-add-new-card #edd_cc_address {
    border: none;
    padding: 0;
    margin: 1em 0 0;
    display: grid;
    gap: var(--sprk-space-3);
}

/* Legend — styled as subsection heading */
#edd-stripe-add-new-card #edd_cc_card_info legend,
#edd-stripe-add-new-card #edd_cc_address legend {
    font-size: var(--sprk-font-size-base);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
    padding: 0;
    margin: 0 0 var(--sprk-space-3) 0;
    width: 100%;
    float: none;
}

/* Field wrapper paragraphs */
#edd-stripe-add-new-card p {
    margin: 0 0 var(--sprk-space-2) 0;
}

#edd-stripe-add-new-card p:last-of-type {
    margin-bottom: 0;
}

/* Field labels */
#edd-stripe-add-new-card .edd-label {
    display: block;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
    margin-bottom: var(--sprk-space-1);
}

/* Card name input */
#edd-stripe-add-new-card .edd-input {
    width: 100%;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}


/* Helper description text */
#edd-stripe-add-new-card .edd-description {
    display: block;
    font-size: var(--sprk-font-size-xs);
    color: var(--sprk-color-text-muted);
    margin-bottom: var(--sprk-space-1);
}

/* Required indicator */
#edd-stripe-add-new-card .edd-required-indicator {
    color: var(--sprk-color-accent);
    margin-left: 2px;
}

.edd-stripe-add-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-2);
}

/* "Add new card" submit button — styled like our primary button */
.edd-stripe-add-new {
    background: var(--sprk-color-text-primary);
    color: var(--sprk-color-background);
    border: none;
    padding: var(--sprk-space-1) var(--sprk-space-3);
    border-radius: var(--sprk-radius-md);
    cursor: pointer;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
}

.edd-stripe-add-new:hover {
    opacity: 0.9;
}

#edd-stripe-add-new-cancel {
    color: var(--sprk-color-text-secondary);
}

/* The hidden Stripe Elements mount area (shown when adding a new card) */
#edd-stripe-manage-cards #edd-stripe-add-new-card .edd-stripe-add-new-card {
    padding: 0;
    margin: 0 0 var(--sprk-space-3);
}

/* Success/error notices within card management */
.edd-stripe-alert {
    padding: var(--sprk-space-2) var(--sprk-space-3);
    border-radius: var(--sprk-radius-sm);
    font-size: var(--sprk-font-size-sm);
    margin-bottom: var(--sprk-space-2);
}

.edd-stripe-alert-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.edd-stripe-alert-success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}


.nf-spark-payment-methods.cc-modal-active .nf-spark-cc-modal-overlay {
    opacity: 1;
    visibility: visible;
}

/* Fixed modal positioning for card update and add-new forms */
.card-update-form.is-modal-active,
#edd-stripe-add-new-card.is-modal-active {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10011;
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--sprk-color-background);
    border-radius: var(--sprk-radius-lg);
    padding: var(--sprk-space-4);
    margin-top: 0;
    box-shadow: var(--sprk-shadow-strong);
}

/* ==========================================================================
   11. Orders Table
   ========================================================================== */

.nf-spark-orders {
    margin-bottom: var(--sprk-space-6);
}

.nf-spark-orders-table {
    width: 100%;
    background: var(--sprk-color-background);
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.nf-spark-orders-table th {
    text-align: left;
    padding: var(--sprk-space-2) var(--sprk-space-3);
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-secondary);
    background: var(--sprk-color-background-subtle);
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-orders-table td {
    padding: var(--sprk-space-2) var(--sprk-space-3);
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-primary);
    border-bottom: 1px solid var(--sprk-color-border);
}

@media (min-width: 641px) {
    .nf-spark-orders-table tr:last-child td,
    .nf-spark-bundle-table tr:last-child td {
        border-bottom: none;
    }
}

.nf-spark-orders-table a {
    color: var(--sprk-color-text-secondary);
}

/* Mobile card reflow — stacks table rows as labeled cards */
@media (max-width: 640px) {
    .nf-spark-orders-table {
        border: none;
    }

    .nf-spark-orders-table thead {
        display: none;
    }

    .nf-spark-orders-table tbody tr {
        display: block;
        border: 1px solid var(--sprk-color-border);
        border-radius: var(--sprk-radius-base);
        margin-bottom: var(--sprk-space-3);
        overflow: hidden;
    }

    .nf-spark-orders-table td:first-child {
        background: var(--sprk-color-background-subtle);
    }

    .nf-spark-orders-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--sprk-space-2) var(--sprk-space-3);
        border-bottom: 1px solid var(--sprk-color-border);
        text-align: right;
    }

    .nf-spark-orders-table td:last-child {
        border-bottom: none;
    }

    .nf-spark-orders-table td::before {
        content: attr(data-label);
        font-weight: var(--sprk-font-weight-bold);
        font-size: var(--sprk-font-size-sm);
        color: var(--sprk-color-text-secondary);
        text-align: left;
        flex-shrink: 0;
        display: inline-flex;
        margin-right: auto;
    }
}

/* Add site form — stack button below input on mobile */
@media (max-width: 640px) {
    .nf-spark-license-add-site-form .nf-spark-form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Bundle card header — icon + title on one line, license key below */
@media (max-width: 640px) {
    .nf-spark-bundle-card__header {
        flex-wrap: wrap;
    }

    .nf-spark-bundle-card__header .nf-spark-license-key {
        flex-basis: 100%;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Bundle table card reflow */
@media (max-width: 640px) {
    .nf-spark-bundle-table-wrapper {
        border: none;
    }

    .nf-spark-bundle-table thead {
        display: none;
    }

    .nf-spark-bundle-table tbody tr {
        display: block;
        border: 1px solid var(--sprk-color-border);
        border-radius: var(--sprk-radius-base);
        margin-bottom: var(--sprk-space-1);
        overflow: hidden;
    }

    .nf-spark-bundle-table td:first-child {
        background: var(--sprk-color-background-subtle);
    }

    .nf-spark-bundle-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8em var(--sprk-space-2);
    }

    .nf-spark-bundle-table td:first-child {
        border-bottom: 1px solid var(--sprk-color-border);
    }

    /* Activations label — less obvious without the column header */
    .nf-spark-bundle-table td:nth-child(3)::before {
        content: attr(data-label);
        font-weight: var(--sprk-font-weight-bold);
        font-size: var(--sprk-font-size-sm);
        color: var(--sprk-color-text-secondary);
        flex-shrink: 0;
        margin-right: var(--sprk-space-3);
    }

    /* License cell — let the key widget fill remaining space */
    .nf-spark-bundle-table td:nth-child(2) .nf-spark-license-key {
        flex: 1;
        justify-content: flex-start;
    }

    .nf-spark-bundle-table td:nth-child(2) .nf-spark-license-key__text {
        flex: 1;
    }
}

/* Product card license row — stack label above license key on mobile */
@media (max-width: 640px) {
    .nf-spark-meta-row--license {
        flex-direction: column;
        align-items: flex-start;
    }

    .nf-spark-meta-row--license .nf-spark-meta-row__label {
        margin-bottom: var(--sprk-space-1);
    }

    .nf-spark-meta-row__license {
        max-width: 100%;
        width: 100%;
    }

    .nf-spark-meta-row--license .nf-spark-license-key {
        justify-content: flex-start;
    }

    .nf-spark-meta-row--license .nf-spark-license-key__text {
        flex: 1;
    }
}

/* ==========================================================================
   11.5 Account Details / Profile Editor Form
   ========================================================================== */

/* Form Container */
.nf-spark-profile-editor {
    max-width: 720px;
}

#edd_profile_editor_form {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-6);
}

/* Fieldsets - No borders */
#edd_profile_editor_form fieldset {
    border: none;
    padding: 0 0 var(--sprk-space-2) 0;
    margin: 0;
}

#edd_profile_editor_form fieldset:last-of-type {
    padding-bottom: 0;
}

/* Legend - Styled as section heading */
#edd_profile_editor_form legend {
    font-size: var(--sprk-font-size-lg);
    padding: 0;
    margin: 0 0 var(--sprk-space-3) 0;
    width: 100%;
    float: none;
}

/* Field Wrapper Paragraphs */
#edd_profile_editor_form p {
    margin: 0 0 var(--sprk-space-2) 0;
}

#edd_profile_editor_form p:last-of-type {
    margin-bottom: 0;
}

/* Inputs and Selects - Full width only */
#edd_profile_editor_form input[type="text"],
#edd_profile_editor_form input[type="email"],
#edd_profile_editor_form input[type="password"],
#edd_profile_editor_form select {
    width: 100%;
}

/* Responsive - Adjust spacing on mobile */
@media (max-width: 768px) {
    #edd_profile_editor_form {
        gap: var(--sprk-space-4);
    }

    #edd_profile_editor_form fieldset {
        padding-bottom: var(--sprk-space-4);
    }

    #edd_profile_editor_form legend {
        font-size: var(--sprk-font-size-lg);
        margin-bottom: var(--sprk-space-3);
    }
}

/* EDD Invoices Form
   Card wrapper styled in the receipt-totals rule above. These rules give the
   form its internal layout (flex column, label-above-input field stacks) so
   it matches the profile editor's look without altering EDD's markup. */

form#edd-invoices {
    display: flex;
    flex-direction: column;
    gap: var(--sprk-space-3);

    /* Inputs and Selects - Fixed width */
    input[type="text"],
    input[type="email"],
    select,
    textarea {
        width: 450px;
        max-width: 100%;
    }

    .edd-invoices-div {
        display: flex;
        flex-direction: row;
        gap: var(--sprk-space-1);
        margin: 0;
    }

    .edd-invoices-div label {
        flex: 0 0 200px;
    }

    .edd-invoices-field {
        font-size: var(--sprk-font-size-sm);
        font-weight: var(--sprk-font-weight-bold);
    }    
}


/* ==========================================================================
   12. Membership Promo Banner
   ========================================================================== */

.nf-spark-membership-promo {
    display: flex;
    align-items: center;
    gap: var(--sprk-space-3);
    padding: var(--sprk-space-2);
    border-radius: var(--sprk-radius-lg);
    background: var(--sprk-color-background-dark);
    margin-bottom: var(--sprk-space-6);
}

.nf-spark-membership-promo__graphic {
    flex-shrink: 0;
    width: 256px;
    height: 256px;
}

.nf-spark-membership-promo__graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nf-spark-membership-promo__content {
    flex: 1;
    padding: var(--sprk-space-2) 0;
}

.nf-spark-membership-promo__title {
    margin: 0 0 0.125em;
    font-size: var(--sprk-font-size-3xl);
    line-height: 1.1;
    color: var(--sprk-color-text-inverse);
}

.nf-spark-membership-promo__text {
    margin: 0 0 0.5em;
    font-size: var(--sprk-font-size-xl);
    font-weight: var(--sprk-font-weight-light);
    color: var(--sprk-color-text-muted);
}

.nf-spark-membership-promo a,
.nf-spark-membership-promo a:visited {
    font-size: var(--sprk-font-size-lg);
    color: var(--sprk-color-text-inverse);
}

/* ==========================================================================
   13. Empty States
   ========================================================================== */

.nf-spark-empty-state {
    text-align: center;
    padding: var(--sprk-space-8) var(--sprk-space-4);
    background: var(--sprk-color-background);
    border: 1px dashed var(--sprk-color-border);
    border-radius: var(--sprk-radius-base);
}

.nf-spark-empty-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sprk-space-3);
    color: var(--sprk-color-text-muted);
}

.nf-spark-empty-state__title {
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin: 0 0 var(--sprk-space-1) 0;
}

.nf-spark-empty-state__text {
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-muted);
}

/* ==========================================================================
   14. Expired Products Section
   ========================================================================== */

/* Expired Products Collapsible Section */
.nf-spark-expired-products-wrapper {
    position: relative;
    overflow: hidden;
    height: 200px; /* Initial collapsed height (25 * 8px) */
    transition: height 400ms ease-in-out;
}

/* Base gradient overlay (hover state gradient - always visible) */
.nf-spark-expired-products-wrapper:not(.is-expanded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.55) 25%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Solid white dimming overlay (fades out on hover to reveal base gradient) */
.nf-spark-expired-products-wrapper:not(.is-expanded)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
    z-index: 2;
}

/* Fade out dimming overlay on hover to reveal lighter gradient */
.nf-spark-expired-products-wrapper:not(.is-expanded):hover::after {
    opacity: 0;
}

/* Subtle bounce on toggle button when wrapper is hovered */
.nf-spark-expired-products-wrapper:not(.is-expanded):hover + .nf-spark-expired-products-toggle-wrapper .nf-spark-expired-products-toggle {
    transform: rotate(180deg) translateY(-4px);
}

.nf-spark-expired-products-toggle-wrapper {
    text-align: center;
    margin-top: var(--sprk-space-3);
}

.nf-spark-expired-products-toggle.nf-spark-btn-wrapper.nf-spark-btn-primary,
.nf-spark-changelog-toggle.nf-spark-btn-wrapper.nf-spark-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sprk-space-1);
    min-width: 48px;
    width: auto;
    height: 48px;
    border-radius: var(--sprk-radius-full);
    transform: rotate(180deg); /* Arrow points down by default (expand) */
}

.nf-spark-expired-products-toggle.nf-spark-btn-wrapper.nf-spark-btn-primary .nf-spark-off-canvas-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-expired-products-toggle.nf-spark-btn-wrapper.nf-spark-btn-primary.is-expanded {
    transform: rotate(360deg); /* Arrow points up when expanded (collapse) */
}

/* ==========================================================================
   15. Responsive Adjustments
   ========================================================================== */

/* Tablet overrides (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .nf-spark-off-canvas-tab-column {
        right: 16px; /* Tablet: inset from edge */
    }

    /* Side branding positioning adjustment for tablet edge spacing (80px vs 104px desktop) */
    .nf-spark-side-branding {
        left: clamp(40px, calc(((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding)) / 2), 93px);
    }

    /* Peeking ninja positioning adjustment for tablet edge spacing */
    .nf-spark-peeking-ninja-wrapper,
    .nf-spark-peeking-ninja-overlay-wrapper {
        left: clamp(42px, calc(((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding)) / 2), 95px);
        width: clamp(54px, calc(100vw / 14), 70px);
    }
}

/* Desktop overrides (restore original desktop behavior) */
@media (min-width: 1025px) {
    .nf-spark-off-canvas-tab-column {
        right: calc(72px - 48px / 2); /* Desktop: offset positioning */
        width: 32px; /* Desktop: narrower column */
    }

    .nf-spark-off-canvas-toggle:not(.nf-spark-top-nav-link) {
        width: 32px; /* Desktop: narrower buttons */
    }
}

@media (max-width: 1024px) {
    /* Off-canvas toggles - always visible on small screens (not scroll-dependent) */
    .nf-spark-off-canvas-tab-column {
        opacity: 1;
        visibility: visible;
    }

    .nf-spark-off-canvas-toggles {
        top: var(--sprk-sticky-top); /* Always in final position */
    }

    /* Hide non-menu toggles when panels are inactive on small screens */
    body:not(.panels-active) .nf-spark-off-canvas-toggle:not(.nf-spark-off-canvas-toggle-menu):not(.nf-spark-mobile-toggle) {
        display: none;
    }

    /* ---- Shared sidenav — mobile collapse behavior ---- */

    .nf-spark-sidenav {
        position: static !important;
        order: -1;
        margin-bottom: var(--sprk-space-4);
    }

    /* Mobile toggle button: shown, styled as dropdown trigger */
    .nf-spark-sidenav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--sprk-space-1) var(--sprk-space-2);
        line-height: var(--sprk-line-height-relaxed);
        background: var(--sprk-color-background-subtle);
        border: 1px solid var(--sprk-color-border);
        border-radius: var(--sprk-radius-base);
        color: var(--sprk-color-text-primary);
        font-size: var(--sprk-font-size-base);
        font-weight: var(--sprk-font-weight-bold);
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .nf-spark-sidenav__toggle:hover,
    .nf-spark-sidenav__toggle:focus {
        background: var(--sprk-color-background-subtle);
        color: var(--sprk-color-text-secondary);
        box-shadow: none !important;
        border-color: var(--sprk-color-border-strong) !important;
    }

    .nf-spark-sidenav__toggle svg {
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .nf-spark-sidenav.is-expanded .nf-spark-sidenav__toggle svg {
        transform: rotate(180deg);
    }

    .nf-spark-sidenav.is-expanded .nf-spark-sidenav__toggle {
        border-bottom-color: transparent !important;
        border-radius: var(--sprk-radius-base) var(--sprk-radius-base) 0 0;
    }

    /* Nav list: collapsed by default, shown when sidebar is expanded */
    .nf-spark-sidenav__list {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: var(--sprk-space-1) 0;
        background: var(--sprk-color-background);
        border: 1px solid var(--sprk-color-border);
        border-radius: 0 0 var(--sprk-radius-base) var(--sprk-radius-base);
    }

    .nf-spark-sidenav.is-expanded .nf-spark-sidenav__list {
        display: flex;
    }

    .nf-spark-sidenav__item {
        margin-bottom: 0;
    }

    .nf-spark-sidenav__item a {
        padding: var(--sprk-space-1) var(--sprk-space-2);
        border-radius: 0;
    }

    .nf-spark-sidenav__item a:hover {
        padding-left: var(--sprk-space-2);
        background: var(--sprk-color-background-subtle);
    }

    .nf-spark-sidenav__item.is-active a {
        background: var(--sprk-color-background-subtle);
        padding-left: var(--sprk-space-2);
    }

    /* Hide section heading on mobile — toggle button conveys that context */
    .nf-spark-sidenav__heading {
        display: none;
    }
}

@media (max-width: 768px) {
    .nf-spark-account-page {
        padding: 0;
    }

    .nf-spark-products-grid {
        grid-template-columns: 1fr;
    }

    .nf-spark-membership-promo {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .nf-spark-download-row {
        flex-wrap: wrap;
    }

    .nf-spark-download-row__action {
        width: 100%;
        margin-top: var(--sprk-space-2);
    }

    .nf-spark-download-row__action .nf-spark-btn-wrapper {
        width: 100%;
    }
}

/* =============================================================================
   Pricing Page
   ============================================================================= */

/**
 * Pricing Plans Cards
 *
 * Clean, minimal pricing cards with membership colors
 */

.nf-spark-pricing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sprk-space-2);
    margin: 0 0 var(--sprk-space-8);
}

/* Mobile: Stack cards */
@media (max-width: 767px) {
    .nf-spark-pricing-plans {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 2x2 grid */
@media (min-width: 768px) and (max-width: 1024px) {
    .nf-spark-pricing-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

div.nf-spark-pricing-plans .nf-spark-pricing-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sprk-color-border);
    border-radius: var(--sprk-radius-md);
    background: var(--sprk-color-background);
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-header {
    padding: var(--sprk-space-4) var(--sprk-space-4) 0;
    min-height: 112px;
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-title {
    font-size: var(--sprk-font-size-xxl);
    margin: 0;
    line-height: var(--sprk-line-height-tight);
    text-transform: uppercase;
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-description {
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-muted);
    margin: 0;
    line-height: var(--sprk-line-height-base);
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-price {
    padding: 0 var(--sprk-space-4);
    margin: var(--sprk-space-1) 0;
    min-height: 165px;
}

div.nf-spark-pricing-plans .nf-spark-price-original {
    display: block;
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, .5);
    text-decoration-thickness: 2px;
    margin-bottom: var(--sprk-space-2);
}

div.nf-spark-pricing-plans .nf-spark-price-main {
    display: flex;
    align-items: baseline;
}

div.nf-spark-pricing-plans .nf-spark-price-amount {
    font-size: var(--sprk-font-size-xxl);
    color: var(--sprk-color-text-primary);
    line-height: var(--sprk-line-height-tight);
}

div.nf-spark-pricing-plans .nf-spark-price-cents {
    vertical-align: super;
    font-size: var(--sprk-font-size-sm);
    color: var(--sprk-color-text-secondary);
}

div.nf-spark-pricing-plans .nf-spark-price-period {
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-muted);
    margin-left: calc(-1 * var(--sprk-space-0-5));
}

div.nf-spark-pricing-plans .nf-spark-price-savings {
    display: inline-block;
    margin-top: var(--sprk-space-2);
    color: var(--sprk-color-text-secondary);
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-regular);
    border: 4px solid #F7E57C;
    border-width: 0 0 4px;
}

div.nf-spark-pricing-plans .nf-spark-price-free {
    display: block;
    font-size: var(--sprk-font-size-xxl);
    font-weight: var(--sprk-font-weight-black);
    color: var(--sprk-color-text-primary);
    letter-spacing: 0.05em;
    margin-top: var(--sprk-space-4);
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-details {
    margin: var(--sprk-space-3) 0;
}

div.nf-spark-pricing-plans .nf-spark-addon-count {
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-primary);
    margin: 0;
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-cta {
    padding: var(--sprk-space-4) var(--sprk-space-4) 0;
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-cta .nf-spark-btn-wrapper {
    width: 100%;
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-cta .nf-spark-btn-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sprk-space-1);
}

div.nf-spark-pricing-plans .nf-spark-pricing-card-cta .nf-spark-btn-wrapper svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/**
 * Button Corner Shapes (Native CSS Squircle Support)
 *
 * Buttons use native CSS corner-shape: superellipse(1.4) for smooth squircle corners.
 * Supported browsers (Chrome 128+, Edge 128+, Brave) show squircles, while others
 * fall back to standard border-radius.
 *
 * Anchor tag buttons (<a>) can be wrapped with .nf-spark-btn-wrapper for consistency
 * with the wrapping approach, though it's not required for corner-shape to work.
 *
 * EXCLUSION CLASS: .no-corner-shape
 * Add this class to any button or parent container to exclude it from corner-shape:
 * - Prevents superellipse() from being applied
 * - Falls back to standard border-radius
 *
 * Use cases for exclusion:
 * - Round/circular buttons
 * - Buttons with specific styling conflicts
 * - Side navigation buttons
 * - Any button where squircle effect is not desired
 *
 * Example usage:
 *   <a href="#" class="nf-spark-btn-primary no-corner-shape">Excluded Button</a>
 *   <div class="no-corner-shape">
 *       <a href="#" class="nf-spark-btn-primary">Also excluded</a>
 *   </div>
 */

/**
 * Base Button Styles (Primary & Secondary)
 * Shared styles for all button types with native CSS corner-shape support
 */
.nf-spark-btn-primary,
.nf-spark-btn-secondary,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary,
.wp-block-edd-checkout .edd-discount-code-field-wrap input[type="submit"],
.edd-button-secondary.edd_discount_link,
.sd-gb-ft__thumbnail--linked::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sprk-space-1);
    padding: var(--sprk-btn-primary-padding);
    font-size: var(--sprk-font-size-base);
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--sprk-transition-base);
    border-radius: var(--sprk-radius-md); /* Fallback for browsers without corner-shape */
    box-sizing: border-box; /* Ensure borders don't add to button dimensions */
}

/* Primary button colors */
.nf-spark-btn-primary,
button,
input[type="submit"],
input[type="button"] {
    background: var(--sprk-btn-primary-bg);
    color: var(--sprk-btn-primary-color);
    border: 2px solid transparent; /* Match secondary button dimensions */
}

/* Preserve button text color on anchor buttons through :hover and :visited
   states (otherwise the global a/a:visited rules repaint them). */
a.nf-spark-btn-primary:hover,
a.nf-spark-btn-primary:visited,
a.nf-spark-btn-primary:active,
a.nf-spark-btn-primary:focus {
    color: var(--sprk-btn-primary-color);
}

/* Secondary button colors */
.nf-spark-btn-secondary,
#edd_sl_show_renewal_form,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary,
.wp-block-edd-checkout .edd-discount-code-field-wrap input[type="submit"],
.edd-button-secondary.edd_discount_link {
    background: var(--sprk-btn-secondary-bg);
    color: var(--sprk-btn-secondary-color);
    border: var(--sprk-btn-secondary-border);
}

/* Hover effects - unified shadow for all buttons */
.nf-spark-btn-primary:hover,
.nf-spark-btn-secondary:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary:hover {
    box-shadow: var(--sprk-shadow-btn-hover);
}

/* Native corner-shape for supported browsers (Chrome 128+, Edge 128+) */
@supports (corner-shape: squircle) {
    .nf-spark-btn-primary:not(.no-corner-shape),
    .nf-spark-btn-secondary:not(.no-corner-shape),
    button:not(.no-corner-shape),
    input[type="submit"]:not(.no-corner-shape),
    input[type="button"]:not(.no-corner-shape),
    .glightbox-container .gclose, .glightbox-container .gnext, .glightbox-container .gprev,
    body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary,
    .wp-block-edd-checkout .edd-discount-code-field-wrap input[type="submit"],
    .sd-gb-ft__thumbnail--linked::after {
        border-radius: var(--sprk-corner-shape-radius);
        corner-shape: superellipse(var(--sprk-corner-shape-smooth));
    }
}

/* Override Kadence global border-color on hover/focus/active for no-corner-shape buttons */
button.no-corner-shape:hover,
button.no-corner-shape:focus,
button.no-corner-shape:active,
input[type="submit"].no-corner-shape:hover,
input[type="submit"].no-corner-shape:focus,
input[type="submit"].no-corner-shape:active,
input[type="button"].no-corner-shape:hover,
input[type="button"].no-corner-shape:focus,
input[type="button"].no-corner-shape:active {
    border-color: transparent;
}

/* Wrapper button styles (for <a> tags) */
.nf-spark-btn-wrapper,
.edd_purchase_submit_wrapper {
    display: inline-flex;
    border-radius: var(--sprk-radius-md); /* Fallback */
    transition: var(--sprk-transition-base);
    box-sizing: border-box; /* Ensure borders don't add to wrapper dimensions */
}

.nf-spark-btn-wrapper.nf-spark-btn-primary,
.edd_purchase_submit_wrapper,
button,
input[type="submit"],
input[type="button"],
.sd-gb-ft__thumbnail--linked::after {
    background: var(--sprk-btn-primary-bg);
    border: 2px solid transparent; /* Match secondary button dimensions */
    padding: var(--sprk-btn-primary-padding); /* Wrapper handles padding for box-sizing to work */
}

.nf-spark-btn-wrapper.nf-spark-btn-secondary {
    background: var(--sprk-btn-secondary-bg);
    border: var(--sprk-btn-secondary-border);
    padding: var(--sprk-btn-secondary-padding); /* Wrapper handles padding for box-sizing to work */
}

/* Wrapper inner anchor styles */
.nf-spark-btn-wrapper > a,
.edd_purchase_submit_wrapper > a,
.nf-spark-add-to-cart-btn {
    display: flex; /* Fill wrapper container */
    align-items: center;
    justify-content: center; /* Center text horizontally */
    gap: var(--sprk-space-1);
    padding: 0; /* No padding - wrapper handles it */
    font-size: var(--sprk-font-size-base);
    text-decoration: none;
    color: inherit;
    width: 100%; /* Fill wrapper width */
    box-sizing: border-box; /* Consistent box model with wrapper */
}

.nf-spark-btn-wrapper.nf-spark-btn-primary > a,
.edd_purchase_submit_wrapper > a,
.nf-spark-add-to-cart-btn {
    color: var(--sprk-btn-primary-color);
}

.nf-spark-btn-wrapper.nf-spark-btn-secondary > a {
    color: var(--sprk-btn-secondary-color);
}

/* Unified hover effect - shadow on wrapper */
.nf-spark-btn-wrapper.nf-spark-btn-primary:hover,
.nf-spark-btn-wrapper.nf-spark-btn-secondary:hover,
.edd_purchase_submit_wrapper:hover {
    box-shadow: var(--sprk-shadow-btn-hover);
}

/* Native corner-shape for wrappers */
@supports (corner-shape: squircle) {
    .nf-spark-btn-wrapper.nf-spark-btn-primary:not(.no-corner-shape),
    .nf-spark-btn-wrapper.nf-spark-btn-secondary:not(.no-corner-shape),
    .edd_purchase_submit_wrapper:not(.no-corner-shape) {
        border-radius: var(--sprk-corner-shape-radius);
        corner-shape: superellipse(var(--sprk-corner-shape-smooth));
    }
}

/**
 * Small Button Modifier
 *
 * Add .nf-spark-btn-sm to any button for a smaller size variant
 * Works with both direct buttons and wrapped buttons
 *
 * Usage:
 *   <a class="nf-spark-btn-primary nf-spark-btn-sm">Small Button</a>
 *   <span class="nf-spark-btn-wrapper nf-spark-btn-secondary nf-spark-btn-sm">
 *       <a>Small Button</a>
 *   </span>
 */

/* Small size for direct buttons (not wrappers) */
.nf-spark-btn-primary.nf-spark-btn-sm:not(.nf-spark-btn-wrapper),
.nf-spark-btn-secondary.nf-spark-btn-sm:not(.nf-spark-btn-wrapper),
#edd_sl_show_renewal_form,
#edd-add-license-renewal,
#edd-cancel-license-renewal,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary,
.wp-block-edd-checkout .edd-discount-code-field-wrap input[type="submit"],
.edd-button-secondary.edd_discount_link {
    font-size: var(--sprk-font-size-sm);
    padding: var(--sprk-btn-primary-padding-sm);
}

/* Small size for wrapped buttons - wrapper handles padding and font-size */
.nf-spark-btn-wrapper.nf-spark-btn-sm {
    padding: var(--sprk-btn-primary-padding-sm);
    font-size: var(--sprk-font-size-sm);
}

/* Small size for wrapped buttons - anchor needs explicit font-size (overrides default button styles) */
.nf-spark-btn-wrapper.nf-spark-btn-sm > a {
    font-size: var(--sprk-font-size-sm);
    padding: 0;
}

/* Small button hover shadow */
.nf-spark-btn-primary.nf-spark-btn-sm:hover,
.nf-spark-btn-secondary.nf-spark-btn-sm:hover,
.nf-spark-btn-wrapper.nf-spark-btn-sm:hover,
#edd_sl_show_renewal_form:hover,
#edd-add-license-renewal:hover,
body.edd-checkout .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary:hover,
.wp-block-edd-checkout .edd-discount-code-field-wrap input[type="submit"]:hover,
.edd-button-secondary.edd_discount_link:hover {
    box-shadow: var(--sprk-shadow-btn-hover-sm);
}

/**
 * Large Button Modifier
 *
 * Add .nf-spark-btn-lg to any button for a larger size variant
 * Works with both direct buttons and wrapped buttons
 *
 * Usage:
 *   <a class="nf-spark-btn-primary nf-spark-btn-lg">Large Button</a>
 *   <span class="nf-spark-btn-wrapper nf-spark-btn-secondary nf-spark-btn-lg">
 *       <a>Large Button</a>
 *   </span>
 */

/* Large size for direct buttons (not wrappers) */
.nf-spark-btn-primary.nf-spark-btn-lg:not(.nf-spark-btn-wrapper),
.nf-spark-btn-secondary.nf-spark-btn-lg:not(.nf-spark-btn-wrapper) {
    font-size: var(--sprk-font-size-xl);
    padding: var(--sprk-btn-primary-padding-lg);
}

/* Large size for wrapped buttons - wrapper handles padding and font-size */
.nf-spark-btn-wrapper.nf-spark-btn-lg {
    padding: var(--sprk-btn-primary-padding-lg);
    font-size: var(--sprk-font-size-xl);
}

/* Large size for wrapped buttons - anchor needs explicit font-size */
.nf-spark-btn-wrapper.nf-spark-btn-lg > a {
    font-size: var(--sprk-font-size-xl);
    padding: 0;
}

/**
 * Subtle Button Modifier
 *
 * Add .nf-spark-btn-subtle for a lighter, more understated appearance
 * Works with both primary and secondary buttons
 *
 * Primary + Subtle: Lighter background with dark text
 * Secondary + Subtle: Subtle border (lighter gray)
 *
 * Usage:
 *   <a class="nf-spark-btn-primary nf-spark-btn-subtle">Subtle Primary</a>
 *   <a class="nf-spark-btn-secondary nf-spark-btn-subtle">Subtle Secondary</a>
 *   <span class="nf-spark-btn-wrapper nf-spark-btn-primary nf-spark-btn-subtle">
 *       <a>Subtle Wrapped</a>
 *   </span>
 */

/* Subtle styling for PRIMARY buttons (background change) */
.nf-spark-btn-primary.nf-spark-btn-subtle:not(.nf-spark-btn-wrapper) {
    background: var(--sprk-btn-subtle-bg);
    color: var(--sprk-btn-subtle-color);
}

.nf-spark-btn-primary.nf-spark-btn-subtle:not(.nf-spark-btn-wrapper):hover {
    background: var(--sprk-btn-subtle-bg-hover);
}

/* Subtle styling for SECONDARY buttons (border change) */
.nf-spark-btn-secondary.nf-spark-btn-subtle:not(.nf-spark-btn-wrapper),
#edd_sl_show_renewal_form,
.edd-button-secondary.edd_discount_link {
    border: var(--sprk-btn-subtle-border);
    width: 100%;
}

.nf-spark-btn-secondary.nf-spark-btn-subtle:not(.nf-spark-btn-wrapper):hover,
#edd_sl_show_renewal_form:hover,
.edd-button-secondary.edd_discount_link:hover {
    border: var(--sprk-btn-subtle-border-hover);
}

/* Subtle styling for wrapped PRIMARY buttons */
.nf-spark-btn-wrapper.nf-spark-btn-primary.nf-spark-btn-subtle {
    background: var(--sprk-btn-subtle-bg);
}

.nf-spark-btn-wrapper.nf-spark-btn-primary.nf-spark-btn-subtle:hover {
    background: var(--sprk-btn-subtle-bg-hover);
}

.nf-spark-btn-wrapper.nf-spark-btn-primary.nf-spark-btn-subtle > a {
    color: var(--sprk-btn-subtle-color);
}

/* Subtle styling for wrapped SECONDARY buttons */
.nf-spark-btn-wrapper.nf-spark-btn-secondary.nf-spark-btn-subtle {
    border: var(--sprk-btn-subtle-border);
}

.nf-spark-btn-wrapper.nf-spark-btn-secondary.nf-spark-btn-subtle:hover {
    border: var(--sprk-btn-subtle-border-hover);
}


/**
 * Universal Button Hover Effect
 *
 * Applies sharp offset shadow to buttons across the entire site including:
 * - Kadence buttons (.kt-button, .kb-button)
 * - EDD buttons (.edd-submit, .edd-button)
 * - WordPress core buttons (.button, button, input[type=submit])
 * - Custom buttons (.nf-spark-btn-*)
 *
 * Uses :where() for zero specificity - won't override specific button styles
 */
:where(
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn,
    .kt-button,
    .kb-button,
    .wp-block-kadence-singlebtn,
    .edd-submit,
    .edd-button,
    .wp-block-button__link,
    .nf-spark-btn-primary,
    .nf-spark-btn-secondary,
    .nf-spark-download-membership-btn
):not([disabled]) {
    transition: background 300ms ease-in-out,
                color 300ms ease-in-out,
                border-color 300ms ease-in-out,
                box-shadow 300ms ease-in-out;
}

:where(
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn,
    .kt-button,
    .kb-button,
    .wp-block-kadence-singlebtn,
    .edd-submit,
    .edd-button,
    .wp-block-button__link,
    .nf-spark-btn-primary,
    .nf-spark-btn-secondary,
    .nf-spark-download-membership-btn
):not([disabled]):hover,
:where(
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn,
    .kt-button,
    .kb-button,
    .wp-block-kadence-singlebtn,
    .edd-submit,
    .edd-button,
    .wp-block-button__link,
    .nf-spark-btn-primary,
    .nf-spark-btn-secondary,
    .nf-spark-download-membership-btn
):not([disabled]):focus {
    box-shadow: var(--sprk-shadow-btn-hover);
}

/* Kadence button hover - needs higher specificity to override Kadence defaults */
.kb-button:not(.kb-btn-global-inherit):hover,
.kb-button:not(.kb-btn-global-inherit):focus,
.wp-block-kadence-singlebtn:hover,
.wp-block-kadence-singlebtn:focus {
    box-shadow: var(--sprk-shadow-btn-hover);
}

/**
 * Kadence Buttons Integration
 * Ensure Kadence buttons match theme button styling with corner-shape support
 */

/* Base Kadence button styles */
.kb-button:not(.kb-btn-global-inherit),
.wp-block-kadence-singlebtn {
    border-radius: var(--sprk-radius-md);
    transition: var(--sprk-transition-base);
}

/* Native corner-shape for Kadence buttons */
@supports (corner-shape: squircle) {
    .kb-button:not(.kb-btn-global-inherit):not(.no-corner-shape),
    .wp-block-kadence-singlebtn:not(.no-corner-shape) {
        border-radius: var(--sprk-corner-shape-radius);
        corner-shape: superellipse(var(--sprk-corner-shape-smooth));
    }
}


/* Pricing Details Section */
.nf-spark-pricing-details {
    font-size: var(--sprk-font-size-sm);
    margin-top: var(--sprk-space-6);
    padding: var(--sprk-space-4);
    border-top: 1px solid var(--sprk-color-border);
}

div.nf-spark-pricing-plans .nf-spark-details-heading {
    display: block;
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin-bottom: var(--sprk-space-2);
}

div.nf-spark-pricing-plans .nf-spark-details-list {
    list-style: none;
    padding: 0;
    padding-left: 0.5em;
    margin: var(--sprk-space-2) 0;
}

div.nf-spark-pricing-plans .nf-spark-details-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sprk-space-2);
    margin-bottom: var(--sprk-space-2);
    color: var(--sprk-color-text-secondary);
}

div.nf-spark-pricing-plans .nf-spark-details-checkmark {
    flex-shrink: 0;
    width: calc(var(--sprk-space-1) * 2.5);
    height: calc(var(--sprk-space-1) * 2.5);
    color: var(--sprk-color-text-muted);
}

div.nf-spark-pricing-plans .nf-spark-details-separator {
    margin: var(--sprk-space-4) 0;
    border: 0;
    border-top: 1px solid var(--sprk-color-border);
}

div.nf-spark-pricing-plans .nf-spark-details-text {
    color: var(--sprk-color-text-secondary);
    line-height: var(--sprk-line-height-relaxed);
    margin: var(--sprk-space-2) 0;
}

.nf-spark-admin-notice {
    padding: var(--sprk-space-3);
    background: var(--sprk-color-background-muted);
    border-left: 4px solid var(--sprk-color-accent);
    color: var(--sprk-color-text-secondary);
    font-size: var(--sprk-font-size-sm);
}

/**
 * Features Comparison Table
 *
 * Responsive table with toggle for sub-features
 */

.nf-spark-features-wrapper {
    margin: var(--sprk-space-6) 0;
}

/* Features Grid - CSS Grid Layout */
.nf-spark-features-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    width: 100%;
    background: var(--sprk-color-background);
}

/* Dynamic column count support */
.nf-spark-features-grid[data-columns="5"] {
    grid-template-columns: 2fr repeat(4, 1fr);
}

.nf-spark-features-grid[data-columns="6"] {
    grid-template-columns: 2fr repeat(5, 1fr);
}

.nf-spark-features-grid[data-columns="7"] {
    grid-template-columns: 2fr repeat(6, 1fr);
}

/* Hide features grid on mobile */
@media (max-width: 767px) {
    .nf-spark-features-grid {
        display: none;
    }
}

/* Sticky Header Row */
.nf-spark-grid-header {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    position: sticky;
    top: var(--sprk-admin-bar-offset);
    z-index: 20;
    background: var(--sprk-color-background);
    border-bottom: 2px solid var(--sprk-color-border-strong);
}

.nf-spark-grid-cell {
    padding: var(--sprk-space-3);
}

.nf-spark-feature-name-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sprk-space-2);
    text-align: left;
    font-weight: var(--sprk-font-weight-bold);
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-primary);
}

.nf-spark-features-label {
    font-weight: var(--sprk-font-weight-bold);
}

.nf-spark-features-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sprk-space-1);
    cursor: pointer;
    font-size: var(--sprk-font-size-sm);
    font-weight: var(--sprk-font-weight-regular);
    color: var(--sprk-color-text-secondary);
}

.nf-spark-features-toggle input[type="checkbox"] {
    cursor: pointer;
}

.nf-spark-membership-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sprk-space-2);
    text-align: center;
}

.nf-spark-membership-name {
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-bold);
}

/* Add-on Section Wrapper - Groups add-on with its features */
.nf-spark-addon-section {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/* Grid Sections (Add-on rows) - Sticky when features visible */
.nf-spark-grid-section {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--sprk-color-border);
    position: sticky;
    top: var(--sprk-space-12); /* 96px - positions below sticky header with clearance */
    z-index: 10;
    background: var(--sprk-color-background);
}

/* Account for WordPress admin bar with sticky add-on rows */
.admin-bar .nf-spark-grid-section {
    top: calc(var(--sprk-space-12) + var(--sprk-admin-bar-offset));
}

.nf-spark-section-label {
    padding: var(--sprk-space-4) var(--sprk-space-3);
}

.nf-spark-addon-name {
    display: block;
    font-size: var(--sprk-font-size-lg);
    font-weight: var(--sprk-font-weight-bold);
    color: var(--sprk-color-text-primary);
    margin-bottom: var(--sprk-space-0-5);
}

.nf-spark-addon-subtitle {
    display: block;
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-secondary);
    font-weight: var(--sprk-font-weight-regular);
}

/* Grid Rows (Sub-feature rows) */
.nf-spark-grid-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--sprk-color-border);
}

.nf-spark-grid-row:last-child {
    border-bottom: none;
}

/* Sub-feature specific styling */
.nf-spark-subfeature-row .nf-spark-grid-cell {
    padding: var(--sprk-space-2) var(--sprk-space-3);
}

.nf-spark-feature-name {
    text-align: left;
}

.nf-spark-feature-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sprk-space-1);
    font-size: var(--sprk-font-size-base);
    color: var(--sprk-color-text-primary);
}

.nf-spark-feature-tooltip {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.nf-spark-info-icon {
    width: 16px;
    height: 16px;
    color: var(--sprk-color-text-muted);
}

/* Feature checkmarks */
.nf-spark-feature-check {
    text-align: center;
    vertical-align: middle;
}

.nf-spark-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nf-spark-check-icon {
    width: 24px;
    height: 24px;
    color: var(--sprk-color-text-primary);
}

.nf-spark-check-icon-small {
    width: 20px;
    height: 20px;
    color: var(--sprk-color-text-primary);
}

/* ==========================================================================
   EDD Add-ons Template
   ========================================================================== */

/* Layout */
.nf-spark-addons-page {
	padding: var(--sprk-space-6) var(--sprk-space-4);
	max-width: var(--sprk-container-max-width);
	margin: 0 auto;
}

/* Generic filter grid + card behavior — paired with .nf-spark-sidenav--filter via sidenav-filter.js */
.nf-spark-filter-grid {
	min-height: 100vh;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.nf-spark-filter-grid.is-collapsing {
	opacity: 0;
}

.nf-spark-filter-card.is-hidden {
	display: none;
}

/* Product Grid */
.nf-spark-addon-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sprk-space-3);
	align-content: start;
}

@media (max-width: 768px) {
	.nf-spark-addon-grid {
		grid-template-columns: 1fr;
	}
}

/* Product Cards */
.nf-spark-addon-card,
.sd-gb-ft-card {
	padding: var(--sprk-space-3);
	background: var(--sprk-color-background);
	border: 1px solid var(--sprk-color-border);
	border-radius: var(--sprk-radius-base);
}

.nf-spark-addon-card {
	display: grid;
	grid-template-columns: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2)) 1fr;
	gap: var(--sprk-space-3);
}

.nf-spark-addon-card__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
	height: calc(var(--sprk-space-5) + (var(--sprk-space-1) * 2));
	padding: var(--sprk-space-1);
	border: 1px solid var(--sprk-color-border);
	border-radius: var(--sprk-radius-sm);
	flex-shrink: 0;
	transition: var(--sprk-transition-base);
}

.nf-spark-addon-card__icon-box:hover {
	border-color: var(--sprk-color-border-strong);
	box-shadow: var(--sprk-shadow-base);
}

.nf-spark-addon-card__icon-box svg {
	width: var(--sprk-space-5);
	height: var(--sprk-space-5);
	color: var(--sprk-color-text-secondary);
}

.nf-spark-addon-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--sprk-space-1);
	min-width: 0;
}

.nf-spark-addon-card__title,
.sd-gb-ft-card__title {
	font-size: var(--sprk-font-size-xl);
	font-weight: var(--sprk-font-weight-regular);
	margin: var(--sprk-space-1) 0;
	line-height: var(--sprk-line-height-snug);
}

.sd-gb-ft-card__title {
	margin-top: 0;
	margin-bottom: var(--sprk-space-2);
}

.nf-spark-addon-card__title a,
.sd-gb-ft-card__title a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.15em;
}

.nf-spark-addon-card__title a:hover,
.sd-gb-ft-card__title a:hover {
	text-decoration-color: var(--sprk-color-accent-hover);
}

.nf-spark-addon-card__tags,
.sd-gb-ft-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sprk-space-1);
}

.nf-spark-addon-card__tag,
a.nf-spark-addon-card__tag,
.sd-gb-ft-card__tag,
.sd-gb-ft__category {
	display: inline-block;
	padding: var(--sprk-space-0-25) var(--sprk-space-1);
	background: var(--sprk-color-background-muted);
	border-radius: var(--sprk-radius-sm);
	font-size: var(--sprk-font-size-xs);
	color: var(--sprk-color-text-secondary);
	white-space: nowrap;
}

a.nf-spark-addon-card__tag,
.sd-gb-ft__category {
	text-decoration: none;
	transition: box-shadow var(--sprk-transition-base);
}

a.nf-spark-addon-card__tag:hover,
.sd-gb-ft__category:hover {
	box-shadow: var(--sprk-shadow-base);
}

.nf-spark-addon-card__description,
.sd-gb-ft-card__description {
	font-size: var(--sprk-font-size-base);
	line-height: var(--sprk-line-height-base);
	color: var(--sprk-color-text-muted);
	margin-top: var(--sprk-space-1);
}

.sd-gb-ft-card__description {
	margin-top: var(--sprk-space-2);
}

/* Auto-generated excerpts (no manual `post_excerpt` set) get clamped to
   5 lines with a soft fade in the bottom 2 lines so any cut-off mid-sentence
   doesn't read as broken. Manual excerpts skip this — they're typically
   already short and authored to fit. */
.sd-gb-ft-card__description--auto {
	position: relative;
	max-height: calc(var(--sprk-line-height-base) * 4em);
	overflow: hidden;
}

.sd-gb-ft-card__description--auto::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: calc(var(--sprk-line-height-base) * 2em);
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		var(--sprk-color-background) 100%
	);
	pointer-events: none;
}

.nf-spark-addon-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sprk-space-2);
	align-items: stretch; /* Ensures all flex children match height */
	margin-top: auto;
	padding-top: var(--sprk-space-2);
}

.nf-spark-addon-card__actions > * {
	flex: 1;
}

/* Force the btn-wrapper span to fill its flex-item space (overrides inline-flex default) */
.nf-spark-addon-card__actions .nf-spark-btn-wrapper {
	display: flex;
}

.nf-spark-addon-card__actions .edd-cart-ajax-alert {
	display: none;
}

/* Flatten EDD's form and submit wrapper into the actions flex layout.
   min-width calc pins the EDD side to exactly 50% minus half the gap,
   matching the Details btn-wrapper and producing equal-width buttons. */
.nf-spark-addon-card .edd_download_purchase_form,
.nf-spark-addon-card .edd_purchase_submit_wrapper {
	display: flex;
	flex: 1;
	min-width: calc(50% - var(--sprk-space-1));
	background: transparent;
	padding: 0;
	border: none;
	box-shadow: none;
}

/* Grow the EDD AJAX button to fill the wrapper */
.nf-spark-addon-card .edd_purchase_submit_wrapper > button.edd-add-to-cart {
	flex: 1;
	width: 100%;
	min-width: 0;
	gap: 0;
}

.nf-spark-addon-card .edd_purchase_submit_wrapper .edd-add-to-cart-label {
	white-space: nowrap;
}

/* Checkout link — shown by EDD (no inline display:none) when item is already in cart */
.nf-spark-addon-card .edd-addon-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	text-decoration: none;
	color: var(--sprk-btn-primary-color);
	background: var(--sprk-btn-primary-bg);
	padding: var(--sprk-btn-primary-padding);
	font-size: var(--sprk-font-size-base);
	border: 2px solid transparent;
	border-radius: var(--sprk-radius-md);
	box-sizing: border-box;
	transition: var(--sprk-transition-base);
}

.nf-spark-addon-card .edd-addon-checkout:hover {
	box-shadow: var(--sprk-shadow-btn-hover);
}

@supports (corner-shape: squircle) {
	.nf-spark-addon-card .edd-addon-checkout {
		border-radius: var(--sprk-corner-shape-radius);
		corner-shape: superellipse(var(--sprk-corner-shape-smooth));
	}
}

/* Add-to-cart button: price slides up on hover, label slides in from below */
.nf-spark-addon-add-to-cart {
	position: relative;
	overflow: hidden;
}

.nf-spark-addon-card__actions .nf-spark-addon-add-to-cart {
	color: transparent; /* Hide original text; pseudo-elements provide visible content */
}

.nf-spark-addon-add-to-cart::before,
.nf-spark-addon-add-to-cart::after {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sprk-btn-primary-color);
	transition: transform var(--sprk-transition-base);
	pointer-events: none;
}

/* Price: visible by default */
.nf-spark-addon-add-to-cart::before {
	content: attr(data-price);
	transform: translateY(0);
}

/* "Add to Cart" label: starts below, slides up on hover */
.nf-spark-addon-add-to-cart::after {
	content: attr(data-label);
	transform: translateY(110%);
}

.nf-spark-addon-add-to-cart:hover::before {
	transform: translateY(-110%);
}

.nf-spark-addon-add-to-cart:hover::after {
	transform: translateY(0);
}

@media (max-width: 640px) {
	.nf-spark-addon-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nf-spark-addon-card__icon-box {
		margin: 0 auto;
	}

	.nf-spark-addon-card__tags,
	.sd-gb-ft-card__tags {
		justify-content: center;
	}

	.nf-spark-addon-card__actions {
		flex-direction: column;
		align-items: stretch; /* Full-width buttons when stacked */
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    list-style: none;
    padding: var(--sprk-space-0-25) 0;
    font-size: 0.9em;
}

.site-footer ul li a {
    color: var(--sprk-color-text-secondary);
    text-decoration-color: transparent;
}

.site-footer ul li a:hover,
.site-footer ul li a:focus {
    text-decoration-color: var(--sprk-color-accent-hover);
}

/* ==========================================================================
   EDD CHECKOUT
   ========================================================================== */

.edd-checkout.edd-page #nf-off-canvas-system {
    display: none !important;
}

body.edd-checkout {

    .edd_cart_item_name .edd-sl-renewal-details-cart {
        grid-row: 3;
        font-size: var(--sprk-font-size-sm);
    }

    .edd_cart_item_name .edd-sl-upgrade-details {
        font-family: var(--sprk-font-mono);
        grid-row: 3;
        font-size: 0.75em;
    }

    #edd_sl_cancel_renewal_form {
        margin: 0 1.5rem;
    }

    .edd_cart_item_image {
        display: flex;
    }

    .edd_cart_item_image svg {
        width: 40px;
        height: 40px;
    }

    .edd_cart_item_price {
        position: relative;
    }

    .edd_cart_item_price em {
        font-size: 0.75em;
        position: absolute;
        bottom: -1.25em;
    }

    .edd_cart_item_price em span {
        display: none;
    }

    #edd_cart_fee_nf_membership_discount .edd_cart_fee_label {
        flex: 1;
    }

    #edd_cart_fee_nf_membership_discount .edd_cart_fee_amount {
        flex: none;
    }
    fieldset {
        border: 0;
        padding: var(--sprk-space-3) 0;
    }

    .edd-sl-renewal-form-fields {
        border-top: 1px solid var(--sprk-color-border-strong);
        padding: var(--sprk-space-4) 1.5rem 0;
    }

    #edd_checkout_form_wrap #edd-license-key-container-wrap {
        padding: 0 0 1em;
        font-size: var(--sprk-font-size-sm);
    }

    .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form,
    .wp-block-edd-checkout #edd_purchase_form .edd-blocks__payment-details {
        border: 0;
        padding: 0 var(--sprk-space-6) 0 0;
        gap: 1em;
        margin: 0 0 2em;
    }

    .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form legend,
    #edd_payment_mode_select legend {
        font-size: var(--sprk-font-size-xl);
        margin-bottom: 0.5em;
    }

    .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form .edd-blocks-form__group > label,
    #edd_purchase_form_wrap label:not([for="edd_agree_to_terms"]) {
        font-size: var(--sprk-font-size-sm);
        font-weight: var(--sprk-font-weight-bold);
        display: block;
    }

    #edd_terms_agreement {
        padding-top: 0;
        margin-top: 0;
        font-size: var(--sprk-font-size-sm);
    }

    .edd-blocks__logged-in {
        margin-bottom: 1.5em;
    }

    #edd_agree_to_terms {
        margin-right: var(--sprk-space-0-5);
        font-size: var(--sprk-font-size-base);
        width: 16px;
        height: 16px;
    }

    .edd-terms-agreement {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--sprk-space-0-5);
    }

    #edd_sl_show_renewal_form {
        margin: 0 1.5rem;
        width: calc(100% - 3rem);
    }

    .edd-button-secondary.edd_discount_link {
        border-radius: var(--sprk-radius-base);
    }

    .wp-block-edd-checkout #edd_purchase_form_wrap .edd-loading-ajax.edd-loading {
        margin: 5rem auto;
    }

    .wp-block-edd-checkout .edd-blocks__user-details .edd-loading-ajax.edd-loading {
        margin-left: 25%;
    }

    #edd_secure_site_wrapper {
        padding: 8px 24px 8px 96px;
        font-weight: var(--sprk-font-weight-regular);
        font-size: 16px;
        margin: 1em 0;
    }

    #edd_secure_site_wrapper .padlock {
        fill: #fff;
    }

    .edd-checkout-block__personal-info .edd-description,
    .edd-blocks__payment-details .edd-description {
        font-size: var(--sprk-font-size-sm);
        color: var(--sprk-color-text-secondary);
        display: block;
    }

    .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option {
        flex: 1;
        border-radius: var(--sprk-radius-full);
    }

    .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option.edd-gateway-option-selected,
    .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option:hover {
        background-color: var(--sprk-color-background-muted);
    }

    #edd_payment_mode_select {
        margin: 0;
        padding: 0;
    }

    #edd_cc_fields,
    #edd_checkout_user_info {
        margin: 1em 0;
        padding: 0;
    }

    #edd_cc_fields legend,
    #edd_checkout_user_info legend {
        font-size: var(--sprk-font-size-lg);
        margin-bottom: 0.5em;
    }

    .edd-stripe-new-card {
        display: grid;
        gap: 1em;
        padding: 1em 0 0;
    }

    .edd-stripe-new-card p {
        margin: 0;
    }

    .edd-stripe-new-card #card_name {
        width: 100%;
    }

    #edd_checkout_form_wrap fieldset#edd_sl_renewal_fields {
        background: transparent;
        border: 0;
        padding: 0;
        margin-top: var(--sprk-space-8);
    }

    @media (min-width: 600px) {
        .edd-blocks__checkout-forms--inline {
            right: var(--sprk-space-6);
            top: 5px;
        }
    }

    @media (min-width: 782px) {
        .wp-block-edd-checkout.edd-checkout__layout--four-fifths,
        .wp-block-edd-checkout.edd-checkout__layout--half,
        .wp-block-edd-checkout.edd-checkout__layout--two-thirds {
            grid-template-columns: 9fr 7fr;
        }
    }

    .edd-blocks-form__cart #edd_checkout_cart {
        border: 0;
    }

    .edd-blocks-form__cart .edd-blocks-cart__row-header {
        display: none;
    }

    .edd-blocks-form__cart .edd-blocks-cart__items {
        margin-bottom: 0.5em;
    }

    .edd-blocks-form__cart .edd-blocks-cart__row-footer {
        padding-top: var(--sprk-space-2);
        padding-bottom: 0;
    }

    .edd-sl-renewal-form-fields input[type="text"] {
        width: 100%;
        margin-top: 1em;
    }

    .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary:disabled {
        opacity: .35;
        cursor: default !important;
        box-shadow: none !important;
    }

    .edd-button-secondary:active,
    .edd-button-secondary:hover,
    .edd-submit:active,
    .edd-submit:hover,
    input[type="submit"]:active,
    input[type="submit"]:hover,
    .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary:active,
    .wp-block-edd-checkout #edd_purchase_form .edd-button-secondary:hover,
    .wp-block-edd-checkout #edd_purchase_form .edd-submit:active,
    .wp-block-edd-checkout #edd_purchase_form .edd-submit:hover,
    .wp-block-edd-checkout #edd-payment-mode-wrap label.edd-gateway-option:hover {
        transform: none;
    }

    .edd-blocks-form__cart .edd-blocks-cart__row {
        align-items: flex-start;
    }

    .edd-blocks-form__cart .edd-blocks-cart__row:last-child {
        align-items: center;
    }

    .edd-blocks-form__cart .edd-blocks-cart__items .edd-blocks-cart__row:not(:first-child) {
        border-top: 1px solid var(--edd-blocks-light-grey);
    }

    .edd-blocks-form__cart .edd_cart_item_name {
        gap: 0;
    }

    .edd-blocks-form__cart .edd_checkout_cart_item_title {
        align-items: flex-start;
        line-height: 1.25;
    }

    @media (min-width: 480px) {
        .edd-blocks-form__cart .edd-blocks-cart__row > div:last-of-type:not(:first-of-type) {
            line-height: 1.25;
        }
    }

    p.eddr-notice.eddr-cart-item-notice {
        margin-left: calc(40px + 1rem);
        margin-top: -1em;
        line-height: 1;
        color: var(--sprk-color-text-muted);
    }

    #edd-cancel-license-renewal {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 0.1em;
        text-underline-offset: 0.25em;
        transition: text-underline-offset 0.1s linear, text-decoration-color 0.1s linear, text-decoration-thickness 0.1s linear;
    }

    #edd-cancel-license-renewal:hover {
        text-decoration-color: var(--sprk-color-accent-hover);
        text-decoration-thickness: 0.15em;
        text-underline-offset: 0.36em;
        box-shadow: none;
    }
}

/* ==========================================================================
   Glovebox Reviews — Theme Overrides
   ========================================================================== */

div.sd-gb-reviews {

    & .sd-gb-review-card {
        padding-left: var(--sprk-space-4);
        padding-right: var(--sprk-space-4);
    }

    /* Layout 1 only — border + radius on card, padding-top on stars */
    &.sd-gb-reviews--layout-1 {
        & > .sd-gb-review-card {
            border: 2px solid var(--sprk-color-border);
            border-radius: var(--sprk-radius-md);
        }

        & .sd-gb-review-card__stars {
            padding-top: 16px;
        }
    }

    & .sd-gb-review-card__header {
        margin-bottom: var(--sprk-space-3);
    }

    & .sd-gb-review-stars {
        color: var(--sprk-color-rating);
    }

    & .sd-gb-review-card__title {
        font-family: var(--sprk-font-heading);
    }

    & .sd-gb-review-card__quote {
        font-style: italic;
        color: var(--sprk-color-text-secondary);
        font-size: 0.9em;
    }

    & .sd-gb-review-card__name {
        font-size: 0.9em;
    }

    & .sd-gb-review-card__subtitle {
        color: var(--sprk-color-text-secondary);
    }

    & .sd-gb-review-card__avatar-fallback {
        background: var(--sprk-color-border);
    }

    & .sd-gb-review-card__avatar-icon {
        color: var(--sprk-color-text-secondary);
    }

    & .sd-gb-review-card__source {
        color: var(--sprk-color-text-secondary);
    }

    & a:not(:hover) {
        text-decoration-color: var(--sprk-color-background);
    }

}

/* ==========================================================================
   404 Page
   Standalone error template — scoped via `.nf-spark-404` body class.
   ========================================================================== */

.nf-spark-404 {
    color: var(--sprk-color-text-inverse);
    background: var(--sprk-color-background-dark);

    main.page-404__main {
        position: relative;
        margin: 0;
    }

    .page-404__content {
        width: 100%;
        max-width: var(--global-content-width);
        margin: 4.5rem auto 5rem;
        padding: 0 var(--global-content-edge-padding);
        font-size: var(--sprk-font-size-xl);
        color: color-mix(in srgb, var(--sprk-color-text-inverse) 50%, transparent);
    }

    .error-code-bg {
        --font-size: 24vw;
        position: absolute;
        top: 50%;
        right: 50%;
        font-size: var(--font-size);
        font-weight: var(--sprk-font-weight-bold);
        line-height: 1;
        transform: translate(90%, -50%);
        opacity: 0.65;

        .digit {
            --blurriness: calc(var(--font-size) * 0.08);
            display: inline-block;
            filter: blur(calc(var(--blur, 0.8) * var(--blurriness)));
            transition: filter 6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 6s cubic-bezier(0.22, 0.61, 0.36, 1);
            opacity: 0.8;
        }

        .digit:hover {
            --blur: 0;
            opacity: 0.5;
            transition: filter 0.4s ease-in-out,
                        opacity 0.4s ease-in-out;
        }
    }

    h1 {
        display: inline-block;
        margin: 2em 0 0;
        padding: var(--sprk-space-1) var(--sprk-space-2);
        border: 2px solid color-mix(in srgb, var(--sprk-color-text-muted) 24%, transparent);
        border-radius: var(--sprk-radius-md);
        font-family: var(--sprk-font-mono);
        font-size: var(--sprk-font-size-base);
        font-weight: var(--sprk-font-weight-regular);
        text-transform: uppercase;
        color: color-mix(in srgb, var(--sprk-color-text-inverse) 65%, transparent);
        background: color-mix(in srgb, var(--sprk-color-text-muted) 24%, transparent);

        span {
            font-weight: var(--sprk-font-weight-bold);
            color: var(--sprk-color-accent);
        }
    }

    .display-lead {
        margin: 0.35em 0 0;
        font-size: var(--sprk-font-size-5xl);
        font-weight: var(--sprk-font-weight-bold);
        line-height: var(--sprk-line-height-tight);
        color: var(--sprk-color-text-inverse);
    }

    .display-sub {
        margin: 0 0 0.65em;
        font-size: var(--sprk-font-size-4xl);
        line-height: var(--sprk-line-height-tight);
        color: var(--sprk-color-text-inverse);
    }

    a,
    a:visited {
        color: color-mix(in srgb, var(--sprk-color-text-inverse) 65%, transparent);
    }
}

/* ==========================================================================
   Celebrate Icon — Animated Confetti
   Inline SVG used as content (e.g., EDD thank-you page). Each `.confetti-N`
   path cycles through the alt-accent palette; staggered animation-delays
   keep neighboring pieces out of phase.
   ========================================================================== */

@keyframes celebrate-confetti-cycle {
    0%   { fill: var(--sprk-color-accent-alt-1); }  /* blue   */
    20%  { fill: var(--sprk-color-accent-alt-3); }  /* pink   */
    40%  { fill: var(--sprk-color-accent-alt-5); }  /* yellow */
    60%  { fill: var(--sprk-color-accent-alt-2); }  /* purple */
    80%  { fill: var(--sprk-color-accent-alt-4); }  /* teal   */
    100% { fill: var(--sprk-color-accent-alt-1); }  /* blue (loop) */
}

.celebrate-icon .confetti {
    animation: celebrate-confetti-cycle 4s step-end infinite;
}

.celebrate-icon .confetti-2 { animation-delay: -0.5s; }
.celebrate-icon .confetti-3 { animation-delay: -1.0s; }
.celebrate-icon .confetti-4 { animation-delay: -1.5s; }
.celebrate-icon .confetti-5 { animation-delay: -2.0s; }
.celebrate-icon .confetti-6 { animation-delay: -2.5s; }
.celebrate-icon .confetti-7 { animation-delay: -3.0s; }