/**
 * Fluent Cart Account Portal — customer dashboard theme
 *
 * Targets the Fluent Cart 1.7.0 customer dashboard app and maps every
 * surface to the --fcpa-* roles defined by the plugin's dynamic mapping
 * block (.fcpa-active { ... }), which in turn reference the Astra global
 * palette variables (--ast-global-color-0..8). Those variables are
 * rewritten on <html> in dark mode, so no color here is ever hardcoded.
 *
 * Fallbacks in var() only apply if the dynamic mapping is missing.
 */

/* ------------------------------------------------------------------ */
/* Layout: unbox the dashboard, app-like frame                         */
/* ------------------------------------------------------------------ */

/* FC centers its own 1200px card; stretch the frame to fill the
   Astra page container instead (1200px => full container width).
   FC ships this with !important in customer-profile-global.css, so we
   have to match it (scoped to portal pages, no other page is affected). */
.fcpa-active .fct_customer_profile_wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* The frame page (22) wraps the shortcode in a padded group block;
   remove that padding so the dashboard runs edge-to-edge.
   :has() is supported in all modern browsers; older ones keep the box. */
@supports selector(:has(> *)) {
    .fcpa-active .wp-block-group:has(> .fct_customer_profile_wrap) {
        padding: 0 !important;
    }
}

/* FC ships an inline min-height of 700px — too short for board views.
   !important is required to beat the inline style. */
.fcpa-active .fct-customer-root-container {
    min-height: calc(100vh - 160px) !important;
}

/* Main content: edge-to-edge, fills the viewport, scrolls independently.
   FC declares these on `.fct-customer-dashboard-app-container
   .fct-customer-dashboard-main-content` (specificity 0-2-0) in a stylesheet
   that loads after ours, so we match its selector exactly (0-3-0 wins) and
   override the padding / min-height / overflow it sets. */
.fcpa-active .fct-customer-dashboard-app-container .fct-customer-dashboard-main-content {
    padding: 0 !important;
    min-height: calc(100vh - 220px) !important;
    overflow: auto !important;
}

/* Custom endpoint pages: keep a gutter for regular content (headings,
   intro text, tables, forms)… */
.fcpa-active .fct-customer-dashboard-main-content .fluent-cart-custom-page-content > div {
    padding: 20px;
}

/* …but let the Fluent Boards app bleed out of the gutter so the board
   area is edge-to-edge within the frame. */
.fcpa-active .fluent-cart-custom-page-content .fluent_boards_frontend {
    margin: -20px -20px 0;
    width: calc(100% + 40px);
}

/* Vue app views (dashboard tab, purchase history, profile, …): the content
   area runs edge-to-edge now, so give the app root its own gutter. Keeps
   section headers, tables and empty-state cards off the frame edges.
   Server-rendered endpoint pages (Fluent Boards) are outside .fct-customer-app. */
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app {
    padding: 12px 20px 24px;
}

/* ------------------------------------------------------------------ */
/* Custom tab title band                                               */
/* ------------------------------------------------------------------ */

/* Server-rendered account tabs (Support, Projects, Invoices, Affiliate)
   open with the same full-bleed title strip the Vue views draw via
   .fct-customer-dashboard-header: surface background, 1px bottom border,
   67px tall (bottom-aligned with the sidebar customer-info box) with the
   text starting at the 20px gutter. The -20px top margin cancels the
   content div's 20px padding and the side margins escape the gutter, so
   the band spans the content column exactly. */
.fcpa-active .fct-customer-dashboard-main-content .fluent-cart-custom-page-content > div > .fcpa-page-band {
    margin: -20px -20px 16px;
    padding: 0 20px;
    min-height: 67px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
}

.fcpa-active .fcpa-page-band .fcpa-page-band-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

/* With the board area now the same field as the band (v1.3.19), the app
   can land directly against the band's border-bottom; the side bleed
   cancels the content div's 20px gutter. */
.fcpa-active .fluent-cart-custom-page-content > div:has(> .fcpa-page-band) .fluent_boards_frontend {
    margin: 0 -20px 0;
}

/* In board context the band's own 16px bottom margin is what keeps the
   app 16px below the band (the board top margin is now 0); drop it so
   the board lands against the band's border. */
.fcpa-active .fct-customer-dashboard-main-content .fluent-cart-custom-page-content > div:has(> .fcpa-page-band):has(> .fluent_boards_frontend) .fcpa-page-band {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Board edge-to-edge (v1.3.20)                                       */
/* ------------------------------------------------------------------ */

/* In the dark scheme, FC's dashboard frame (color-5) is slightly darker
   than the site surface (color-4), so it reads as a visible seam: the 16px
   strip between the title band and the board, the strip right of the frame
   (the body behind it), and the bottom edge. Map the portal main content to
   the surface role so band + board area + body form one continuous field and
   the seams disappear. The light scheme is already seamless (white frame on
   white body), so its frame colour stays. */
html.astra-color-scheme-dark body.fcpa-active .fct-customer-dashboard-main-content {
    background-color: var(--fcpa-surface, var(--ast-global-color-4));
}

/* The OS scrollbar beside the dark portal renders as a light strip.
   Style the portal scrollbar with the dark scheme's own palette. */
html.astra-color-scheme-dark body.fcpa-active {
    scrollbar-color: var(--ast-global-color-6) var(--ast-global-color-4);
}
html.astra-color-scheme-dark body.fcpa-active ::-webkit-scrollbar {
    width: 12px;
}
html.astra-color-scheme-dark body.fcpa-active ::-webkit-scrollbar-track {
    background: var(--ast-global-color-4);
}
html.astra-color-scheme-dark body.fcpa-active ::-webkit-scrollbar-thumb {
    background: var(--ast-global-color-6);
    border-radius: 6px;
}
html.astra-color-scheme-dark body.fcpa-active ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ast-global-color-6) 80%, var(--ast-global-color-3));
}

/* FC ships the mobile dashboard menu toggle as a bare <button>; its own
   Tailwind rule (#fct-customer-menu-container #fct-customer-menu-toggle =
   two IDs) paints it #F5F6F7 and forces the svg colour to #2F3448, so a
   white box with a dark icon sat on the themed nav row. Match its specific
   selector with an extra body class and restore an icon button in the
   portal text role, both schemes. */
body.fcpa-active #fct-customer-menu-container #fct-customer-menu-toggle {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 8px;
    color: var(--fcpa-text, var(--ast-global-color-2));
}
body.fcpa-active #fct-customer-menu-container #fct-customer-menu-toggle:hover,
body.fcpa-active #fct-customer-menu-container #fct-customer-menu-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 8%, transparent);
}
body.fcpa-active #fct-customer-menu-container #fct-customer-menu-toggle svg,
body.fcpa-active #fct-customer-menu-container #fct-customer-menu-toggle path {
    /* FC's Tailwind rule (#fct-customer-menu-toggle svg) force-colours the
       icon #2F3448 in both schemes; currentColor follows the path's own
       colour, so the portal text role is set here too. This selector has
       more IDs than FC's, so it wins regardless of load order. */
    color: var(--fcpa-text, var(--ast-global-color-2));
    fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* Frame chrome                                                        */
/* ------------------------------------------------------------------ */

/* FC draws a 1px border around the whole dashboard frame — the visible
   outer box; remove it. */
.fcpa-active .fct-customer-dashboard-app-container {
    border: none !important;
}

/* ------------------------------------------------------------------ */
/* Fluent Cart palette variables                                       */
/* ------------------------------------------------------------------ */

/* FC drives the sidebar text, hover, and active colors through its own
   --fct-customer-dashboard-nav-* variables (rules at equal specificity
   in a later stylesheet — so overriding the variables is the reliable
   lever). One source of truth also keeps text and icons the same color
   on hover/active in both light and dark mode.

   FC 1.7.0 re-declares every leaf --fct-customer-dashboard-* variable on
   `body:not(.fluent-cart-no-colors)` (0-1-1), resolved against the fixed
   storefront palette (e.g. --fct-secondary-bg-color: #e0eff8). A plain
   `.fcpa-active` (0-1-0) block loses to that, so the active nav item turned
   light-blue with white (dark-mode) text. `html body.fcpa-active` (0-1-2)
   wins, and every leaf is mapped onto the portal roles so the surfaces
   follow the Astra dark-mode palette rewrite too. */
html body.fcpa-active {
    --fct-customer-dashboard-nav-text-color: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-nav-active-bg-color: color-mix(in srgb, var(--fcpa-accent, var(--ast-global-color-1)) 12%, transparent);
    --fct-customer-dashboard-nav-active-text-color: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-nav-active-bar-color: var(--fcpa-accent, var(--ast-global-color-1));

    /* Text */
    --fct-customer-dashboard-primary-text-color: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-title-color: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-secondary-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-sub-title-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-meta-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-faint-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-label-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-caption-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-hint-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-note-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-paginator-text-color: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-link-color: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-link-hover-color: var(--fcpa-accent, var(--ast-global-color-1));
    --fct-customer-dashboard-info-link-color: var(--fcpa-accent, var(--ast-global-color-1));
    --fct-customer-dashboard-blue-link-color: var(--fcpa-accent, var(--ast-global-color-1));

    /* Surfaces: tints of the surface role instead of fixed light hexes */
    --fct-customer-dashboard-card-bg: var(--fcpa-surface, var(--ast-global-color-4));
    --fct-customer-dashboard-surface-alt: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 4%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-surface-muted: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 5%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-surface-neutral: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 3%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-surface-light: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 4%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-code-bg: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 7%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-chip-bg: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 8%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-info-panel-bg: color-mix(in srgb, var(--fcpa-accent, var(--ast-global-color-1)) 10%, var(--fcpa-surface, var(--ast-global-color-4)));
    --fct-customer-dashboard-hover-bg: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 6%, transparent);
    --fct-customer-dashboard-hover-strong-bg: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 10%, transparent);
    --fct-customer-dashboard-soft-hover-bg: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 4%, transparent);

    /* Lines */
    --fct-customer-dashboard-border-color: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-divider-color: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-row-divider-color: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-rule-color: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-scrollbar-thumb: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-focus-border-color: var(--fcpa-accent, var(--ast-global-color-1));

    /* Secondary buttons and inputs */
    --fct-customer-dashboard-secondary-btn-bg: var(--fcpa-surface, var(--ast-global-color-4));
    --fct-customer-dashboard-secondary-btn-text: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-secondary-btn-border: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-input-bg: var(--fcpa-surface, var(--ast-global-color-4));
    --fct-customer-dashboard-input-text: var(--fcpa-text, var(--ast-global-color-2));
    --fct-customer-dashboard-input-border: var(--fcpa-border, var(--ast-global-color-6));
    --fct-customer-dashboard-input-placeholder: var(--fcpa-muted, var(--ast-global-color-3));
    --fct-customer-dashboard-el-input-text: var(--fcpa-text, var(--ast-global-color-2));
}

/* ------------------------------------------------------------------ */
/* Fluent Boards (embedded app)                                        */
/* ------------------------------------------------------------------ */

/* The FB app mounts its own top bar (site logo + pinned dropdown)
   inside the portal — redundant next to the site header and the
   customer sidebar; hide it. */
.fcpa-active #fluent-boards-app .fframe_main-menu-items {
    display: none;
}

/* Let the app fill the content area; its internal views then size
   against the real width instead of the old 806px box.
   (FB picks its layout mode from container width: <1024px = tablet.) */
.fcpa-active #fluent-boards-app,
.fcpa-active #fluent-boards-app .fframe_app,
.fcpa-active #fluent-boards-app .fframe_body {
    width: 100%;
}

.fcpa-active #fluent-boards-app .fframe_body {
    min-height: calc(100vh - 280px);
}

/* FBs own admin.css ships `.fframe_body { margin-left: -20px !important }`
   to bleed the body to the frame edge (its full-page layout pads the
   frame 20px). Embedded in the portal the frame has no padding, so the
   bleed shifts the board 20px left of the content area and leaves a
   20px dead band on the right; neutralise it. */
.fcpa-active #fluent-boards-app .fframe_body {
    margin-left: 0 !important;
}

/* ------------------------------------------------------------------ */
/* App container                                                       */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-root-container,
.fcpa-active .fct-customer-dashboard-app-container {
    background: var(--fcpa-bg, var(--ast-global-color-5));
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-dashboard-layout-width {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

/* ------------------------------------------------------------------ */
/* Sidebar navigation                                                  */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-dashboard-navs-wrap,
.fcpa-active .fct-customer-navs-wrap,
.fcpa-active .fct-customer-navs {
    background: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-color: var(--fcpa-border, var(--ast-global-color-6));
}

.fcpa-active .fct-customer-nav-item,
.fcpa-active .fct-customer-nav-item a {
    color: var(--fcpa-text, var(--ast-global-color-2));
    background: transparent;
}

.fcpa-active .fct-customer-nav-link {
    color: var(--fcpa-text, var(--ast-global-color-2));
    background: transparent;
}

.fcpa-active .fct-customer-nav-link:hover {
    background: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 8%, transparent);
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-nav-link-icon {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-nav-link-icon svg,
.fcpa-active .fct-customer-nav-link svg {
    fill: currentColor;
    stroke: currentColor;
}

/* Active tab — subtle accent tint (same source of truth as hover via the
   --fct-customer-dashboard-nav-active-* variables set above). */
.fcpa-active .fct-customer-nav-item.active_customer_menu,
.fcpa-active .fct-customer-nav-item.active_customer_menu .fct-customer-nav-link {
    background: var(--fct-customer-dashboard-nav-active-bg-color, transparent);
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-nav-item.active_customer_menu .fct-customer-nav-link-text {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

/* FC's active indicator bar sits at left: -20px — outside the item, in the
   sidebar's edge gutter (reads as stray corner marks). Park it at the
   item's own left edge, aligned with the link's rounded corners. */
.fcpa-active .fct-customer-nav-item.active_customer_menu::before {
    left: 0;
}

/* Clicked nav links get a 3px outline in some browsers whose rounded
   corners peek out as corner brackets; use a radius-following shadow ring
   for keyboard focus and none for mouse focus. */
.fcpa-active .fct-customer-nav-link:focus {
    outline: none;
}

.fcpa-active .fct-customer-nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fcpa-accent, var(--ast-global-color-1)) 50%, transparent);
}

/* Tooltip (compact / mobile nav) */
.fcpa-active .fct-customer-nav-tooltip {
    background: var(--fcpa-text, var(--ast-global-color-2));
    color: var(--fcpa-bg, var(--ast-global-color-5));
    border-radius: 4px;
}

.fcpa-active .fct-nav-compact-toggle-wrap {
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-color: var(--fcpa-border, var(--ast-global-color-6));
}

/* ------------------------------------------------------------------ */
/* Dashboard header                                                    */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-dashboard-header {
    background: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
}

/* Section titles ("Purchase History", "Your Recent Purchases", …):
   FC ships them at 16px with zero margin — squished against the top edge. */
.fcpa-active .fct-customer-dashboard-title {
    color: var(--fcpa-text, var(--ast-global-color-2));
    font-size: 22px;
    font-weight: 600;
    padding-top: 2px;
    margin: 0 0 16px;
}

/* FC pins the in-band title to 16px in a rule of equal specificity,
   delivered in a Vue-injected <style> that loads after this sheet.
   The header-scoped declaration (0-3-0) wins reliably in both views. */
.fcpa-active .fct-customer-dashboard-header .fct-customer-dashboard-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
}

/* Title band: full-bleed across the content column, same height as the
   sidebar customer-info box (67px measured) so the two align on one line,
   and the text starts at the 20px gutter where the content cards begin.
   -12px top margin cancels the app padding-top (collapses to the column
   edge); ±20px side margins escape the gutter. FC's flex/space-between
   row layout stays in place. */
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-customer-dashboard-header {
    margin: -12px -20px 16px;
    padding: 0 20px;
    min-height: 67px;
    box-sizing: border-box;
}

/* The band must bleed, but the order section it lives in is clipped
   (overflow:hidden). Release the clip on portal sections; nothing in
   them overflows horizontally. */
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-customer-dashboard {
    overflow: visible;
}

/* The Profile view is a single bordered card with no title element of its
   own, so the band is synthesized on the app's ::before (the app is the
   full-width content column whose border-box top edge is the column top),
   and the card is pushed below it: 67px band + 16px gap, minus the app's
   12px padding-top = 71px margin. */
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app:has(> div.fct-customer-dashboard-user-profile),
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app:has(> div.border-gray-outline) {
    position: relative;
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app:has(> div.fct-customer-dashboard-user-profile)::before,
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app:has(> div.border-gray-outline)::before {
    content: "Profile";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 67px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    background: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app > div.fct-customer-dashboard-user-profile,
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app > div.border-gray-outline {
    margin-top: 71px;
}

/* The profile form (Account Details and any further sections) sets its
   heading/description colors through the --fct-customer-dashboard-* chain
   and its inputs through Element Plus light-theme defaults (white boxes,
   #D6DAE1 1px solid borders) that never follow the portal palette. This build
   draws the input border as a REAL 1px border on .el-input__wrapper (not an
   inset box-shadow), so border-color and background-color are overridden
   directly. The disabled state's background is set by a higher-priority
   utility rule, so a scoped !important is required. All rules are scoped to
   the portal form container, so nothing leaks to other inputs. */
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .form-heading {
    color: var(--fcpa-text, var(--ast-global-color-2));
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .form-desc {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input__wrapper {
    background-color: var(--fcpa-bg, var(--ast-global-color-5)) !important;
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
    box-shadow: none !important;
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input__wrapper:hover {
    border-color: color-mix(in srgb, var(--fcpa-accent, var(--ast-global-color-1)) 60%, var(--fcpa-border, var(--ast-global-color-6))) !important;
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input__wrapper.is-focus {
    border-color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input.is-disabled .el-input__wrapper {
    background-color: color-mix(in srgb, var(--fcpa-bg, var(--ast-global-color-5)) 90%, var(--fcpa-border, var(--ast-global-color-6))) !important;
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input:not(.is-disabled) .el-input__inner {
    color: var(--fcpa-text, var(--ast-global-color-2));
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input.is-disabled .el-input__inner {
    color: var(--el-disabled-text-color, #a8abb2);
}
.fcpa-active .fct-customer-dashboard-main-content .fct-customer-app .fct-form-container .el-input__inner::placeholder {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}

/* ------------------------------------------------------------------ */
/* Search control (purchase history header)                            */
/* ------------------------------------------------------------------ */

/* The search toggle (icon-button) ships a white box in light mode and
   only gains a dark variant under FC's own .fluent_theme_dark class,
   which the Astra color switcher never sets. Map it to the portal roles;
   the expanded search input gets the same treatment. */
.fcpa-active .icon-button,
.fcpa-active .icon-button:focus {
    background: transparent;
    border-color: var(--fcpa-border, var(--ast-global-color-6));
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .icon-button:hover {
    background: color-mix(in srgb, var(--fcpa-text, var(--ast-global-color-2)) 8%, transparent);
}

.fcpa-active .fct-collapsible-search-wrap .el-input__wrapper {
    background: var(--fcpa-bg, var(--ast-global-color-5));
    box-shadow: 0 0 0 1px var(--fcpa-border, var(--ast-global-color-6)) inset;
}

.fcpa-active .fct-collapsible-search-wrap .el-input__inner {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-collapsible-search-wrap .el-input__inner::placeholder {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}

.fcpa-active .fct-customer-dashboard-customer-info,
.fcpa-active .fct-customer-dashboard-customer-info-content {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

/* FC hardcodes a light border-bottom under the customer block
   (rgb(234 236 240)) — glows in dark mode; map it to the border role. */
.fcpa-active .fct-customer-dashboard-customer-info {
    border-color: var(--fcpa-border, var(--ast-global-color-6));
}

/* FC ships the logout button with a hardcoded danger-red palette via
   --fct-customer-dashboard-logout-btn-* variables. Override the variables
   themselves (not just the properties) so the button can't fall back to
   the stock red on hover/focus or via any FC selector we haven't seen. */
.fcpa-active {
    --fct-customer-dashboard-logout-btn-bg-color: transparent;
    --fct-customer-dashboard-logout-btn-hover-bg-color: var(--fcpa-surface, var(--ast-global-color-4));
    --fct-customer-dashboard-logout-btn-text-color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-logout-btn {
    background: transparent;
    color: var(--fcpa-accent, var(--ast-global-color-1));
    border: 1px solid var(--fcpa-border, var(--ast-global-color-6));
    border-radius: 6px;
}

.fcpa-active .fct-customer-logout-btn:hover {
    background: var(--fcpa-accent, var(--ast-global-color-1));
    color: var(--fcpa-accent-text, var(--ast-global-color-5));
    border-color: var(--fcpa-accent, var(--ast-global-color-1));
}

/* ------------------------------------------------------------------ */
/* Main content area                                                   */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-dashboard-main-content {
    background: var(--fcpa-bg, var(--ast-global-color-5));
    color: var(--fcpa-text, var(--ast-global-color-2));
}

.fcpa-active .fct-customer-dashboard-main-content h1,
.fcpa-active .fct-customer-dashboard-main-content h2,
.fcpa-active .fct-customer-dashboard-main-content h3,
.fcpa-active .fct-customer-dashboard-main-content h4,
.fcpa-active .fct-customer-dashboard-main-content h5 {
    color: var(--fcpa-text, var(--ast-global-color-2));
}

/* Classless links in content get the accent; classed components keep
   their own (the :where() keeps this rule from outrunning them). */
.fcpa-active .fct-customer-dashboard-main-content :where(a:not([class])) {
    color: var(--fcpa-accent, var(--ast-global-color-1));
}

/* Form fields */
.fcpa-active .fct-customer-dashboard-main-content :where(input, select, textarea) {
    background: var(--fcpa-bg, var(--ast-global-color-5));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-color: var(--fcpa-border, var(--ast-global-color-6));
}

.fcpa-active .fct-customer-dashboard-main-content :where(input, select, textarea):focus {
    border-color: var(--fcpa-accent, var(--ast-global-color-1));
    outline: 2px solid color-mix(in srgb, var(--fcpa-accent, var(--ast-global-color-1)) 30%, transparent);
}

/* ------------------------------------------------------------------ */
/* Tables (purchase history, lists)                                    */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-dashboard-table {
    border: 1px solid var(--fcpa-border, var(--ast-global-color-6));
    border-radius: 8px;
    overflow: hidden;
}

.fcpa-active .fct-customer-dashboard-table th {
    background: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
    text-align: left;
}

.fcpa-active .fct-customer-dashboard-table td {
    background: transparent;
    color: var(--fcpa-text, var(--ast-global-color-2));
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
}

.fcpa-active .fct-customer-dashboard-table tbody tr {
    background: transparent;
}

.fcpa-active .fct-customer-dashboard-table tbody tr:hover {
    background: var(--fcpa-surface, var(--ast-global-color-4));
}

/* ------------------------------------------------------------------ */
/* Element Plus tables (v1.3.9)                                        */
/* ------------------------------------------------------------------ */
/* Vue views render Element Plus order tables (dashboard "Your Recent
   Purchases", order details "Related transactions"). Fluent Cart
   delivers the Element Plus styles in customer-profile.css (plus
   Vue-injected <style> tags) AFTER this sheet and pins stock light
   values on chains at least as specific as ours, so the bare `td` /
   `th` rules above lose and the light values survive in the dark
   scheme too: white table surface, #F9FAFB headers with near
   invisible text, #2F3448 cell text. Re-declare along the full chain
   with !important and map every color to the portal roles — the same
   approach as the purchase-history sheet (v1.3.7). Roles resolve
   through the Astra palette, so one set of rules covers both
   schemes. */
.fcpa-active .fct-customer-dashboard-main-content .el-table {
    background-color: var(--fcpa-bg, var(--ast-global-color-5)) !important;
}

/* The 1px hairlines Element Plus draws at the table edges follow the
   portal border role. */
.fcpa-active .fct-customer-dashboard-main-content .el-table::before,
.fcpa-active .fct-customer-dashboard-main-content .el-table::after {
    background-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
}

.fcpa-active .fct-customer-dashboard-main-content .el-table th.el-table__cell,
.fcpa-active .fct-customer-dashboard-main-content .el-table thead th {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6)) !important;
}

.fcpa-active .fct-customer-dashboard-main-content .el-table td.el-table__cell {
    background-color: transparent !important;
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6)) !important;
}

/* Row hover: a surface-role tint in both schemes. */
.fcpa-active .fct-customer-dashboard-main-content .el-table__body tr:hover > td.el-table__cell {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
}

/* Order number + date pair (recent purchases, order header): the
   number link takes the main text role, the date the muted one (FC
   ships a mid-gray token), and the link gets the site accent on
   hover — the same treatment as the purchase-history sheet. */
.fcpa-active .fct-customer-dashboard-main-content .invoice-id-date a {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}

.fcpa-active .fct-customer-dashboard-main-content .invoice-id-date a:hover,
.fcpa-active .fct-customer-dashboard-main-content .invoice-id-date a:focus-visible {
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}

.fcpa-active .fct-customer-dashboard-main-content .invoice-id-date span.text {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}

/* ------------------------------------------------------------------ */
/* Order details — summary card (v1.3.9)                               */
/* ------------------------------------------------------------------ */
/* The "Tax breakdown by rate" card ships as a near-white #F9FAFB box
   (FC's own dark variant only applies under its .fluent_theme_dark
   class, which the site does not set), so on the dark scheme it
   reads as a white card inside the dark summary. Map it to the
   surface role and its rows to the muted role (FC ships #565865 /
   #9D9FAC tokens there). */
/* !important: FC declares the box background along a 4-class chain
   (.fct-order-summary-wrap .fct-order-summary-body .fct-order-summary-
   order-calculation .fct-customer-tax-box), which beats this 3-class
   selector; same for the inner text colours. */
.fcpa-active .fct-order-summary-order-calculation .fct-customer-tax-box {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
}

.fcpa-active .fct-order-summary-order-calculation .fct-customer-tax-box .tr,
.fcpa-active .fct-order-summary-order-calculation .fct-customer-tax-box .fct-customer-tax-breakdown-heading,
.fcpa-active .fct-order-summary-order-calculation .fct-customer-tax-box .fct-customer-tax-breakdown-col-headers {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}

/* ------------------------------------------------------------------ */
/* Button-style links (v1.3.9)                                         */
/* ------------------------------------------------------------------ */
/* Astra's per-page dynamic CSS underlines every link inside
   .entry-content at (0-2-1), and Fluent Cart pins the order details
   "Receipt" action at #253241 with !important — plus a permanent
   underline (its dark variant is gated behind .fluent_theme_dark).
   On the dark page that is an underlined, near-invisible link. Both
   are button-style actions: no underline, the portal text role, and
   an accent on hover instead of an underline. */
.fcpa-active .fct-customer-dashboard-main-content a.underline-link-button {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
    text-decoration: none !important;
}

.fcpa-active .fct-customer-dashboard-main-content a.underline-link-button:hover,
.fcpa-active .fct-customer-dashboard-main-content a.underline-link-button:focus-visible {
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}

/* The "View all" action in the dashboard header band: FC underlines
   .is-link there — with !important, so the override needs it too —
   and pins its color with !important. Keep it unlined and shift the
   color on hover instead. */
.fcpa-active .fct-customer-dashboard-header a.is-link {
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
    text-decoration: none !important;
}

.fcpa-active .fct-customer-dashboard-header a.is-link:hover,
.fcpa-active .fct-customer-dashboard-header a.is-link:focus-visible {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}

/* ------------------------------------------------------------------ */
/* Generic buttons (Fluent Cart UI)                                    */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-customer-dashboard-main-content :where(.fct-btn, button.fct-btn, .fct-btn--primary) {
    background: var(--fcpa-accent, var(--ast-global-color-1));
    color: var(--fcpa-accent-text, var(--ast-global-color-5));
    border-color: var(--fcpa-accent, var(--ast-global-color-1));
}

/* ------------------------------------------------------------------ */
/* Checkout modal chrome (iframe content is a separate page)           */
/* ------------------------------------------------------------------ */
.fcpa-active .fct-checkout-modal-container {
    background: rgba(0, 0, 0, 0.6);
}

.fcpa-active .fct-checkout-modal-content {
    background: var(--fcpa-bg, #fff);
    border: 1px solid var(--fcpa-border, #d1dae5);
    border-radius: 12px;
}

.fcpa-active .fct-checkout-modal-close {
    color: var(--fcpa-text, #0f172a);
}

.fcpa-active .fct-checkout-modal-loader {
    background: var(--fcpa-bg, #fff);
}

.fcpa-active .fct-checkout-modal-loader-spinner {
    border-color: var(--fcpa-accent, #007aca);
    border-top-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Dark-scheme contrast + profile tab (v1.3.12)                        */
/* ------------------------------------------------------------------ */
/* FC 1.6.4's customer-profile / saved-payment-methods sheets ship     */
/* light-only colors (there is no .fluent_theme_dark variant), so      */
/* these portal areas keep light-ink values on the dark dashboard.     */
/* Remap onto the --fcpa-* roles; the single dark-only value (FC's     */
/* amber tax amount) is scoped like the receipt/checkout dark chip     */
/* remaps.                                                             */

/* Order details: summary calc rows (Subtotal, tax rows, Total).       */
/* FC pins them at light ink #565865 along a 4-class chain.            */
.fcpa-active .fct-order-summary-order-calculation .tr {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}

/* Order details: the "more actions" dots next to the Receipt link     */
/* are FC ink #2F3448 — invisible on the dark page.                    */
.fcpa-active .fct-more-option-wrap .more-btn {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}
.fcpa-active .fct-more-option-wrap .more-btn:hover,
.fcpa-active .fct-more-option-wrap .more-btn:focus-visible {
    color: var(--fcpa-accent, var(--ast-global-color-1));
}

/* The Element Plus table root colour (empty states, scroll text).     */
.fcpa-active .fct-customer-dashboard-main-content .el-table {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}

/* Breadcrumbs inside the portal (order page "Purchase History / …"):  */
/* FC ships #2F3448 / #696778 light-mode links.                        */
.fcpa-active .el-breadcrumb__inner {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}
.fcpa-active .el-breadcrumb__inner.is-link,
.fcpa-active .el-breadcrumb__item a {
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}
.fcpa-active .el-breadcrumb__inner.is-link:hover,
.fcpa-active .el-breadcrumb__item a:hover {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}

/* FC's amber tax amount (exclusive VAT rows) is #854F0B — readable    */
/* on the light card, near-invisible on the dark one; mirror the       */
/* checkout-dark-mode chip treatment (slot 3).                          */
html.astra-color-scheme-dark .fcpa-active .fct-order-item-tax-rate .fct-tax-amount {
    color: var(--ast-global-color-3);
}

/* Profile tab -------------------------------------------------------- */
/* FC's address cards ship white (#fff, #D6DAE1 border) and the        */
/* dark-scheme body text inherits on top — invisible in the dark       */
/* scheme.                                                              */
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .fct-customer-address-list {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
    color: var(--fcpa-text, var(--ast-global-color-2));
}

/* Form container divider ships a light #EAECF0 hairline.              */
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .fct-form-container {
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
}

/* Saved payment methods empty state: light-ink title + light border.  */
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .fct-payment-methods-empty {
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
}
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .fct-payment-methods-empty-title,
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .fct-payment-methods-empty-text {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}

/* Profile buttons: EP defaults ship white cards; the primary          */
/* "Save Profile" is FC's flat #253241 navy (same as the fixed         */
/* checkout button).                                                    */
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button:not(.el-button--primary) {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button:not(.el-button--primary):hover,
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button:not(.el-button--primary):focus-visible {
    border-color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}
body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button--primary {
    background-color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
    border-color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}
html:not(.astra-color-scheme-dark) body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button--primary {
    color: var(--ast-global-color-5) !important; /* white in the light scheme */
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app .el-button--primary {
    color: var(--ast-global-color-2) !important; /* white in the dark scheme */
}

/* ------------------------------------------------------------------ */
/* Dark-scheme profile add/edit dialog + poppers (v1.3.13)             */
/* ------------------------------------------------------------------ */
/* The "Add New Address" / "Edit" dialog is an Element Plus el-dialog   */
/* (.el-dialog.fluent-cart-customer-profile-app). Its shell is dark    */
/* (FC paints it with the site bg) but the EP form controls inside keep */
/* EP's light defaults: white fields, #475569 ink, #A8ABB2 placeholders, */
/* #2F3448 dialog title / section titles. Remap the EP theme variables */
/* onto the --fcpa-* roles on the dialog itself; FC pins a few values   */
/* above the variables, so those get explicit rules too.               */

html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app {
    --el-dialog-bg-color: var(--ast-global-color-4);
    --el-fill-color-blank: var(--ast-global-color-4);
    --el-input-bg-color: var(--ast-global-color-4);
    --el-text-color-primary: var(--ast-global-color-2);
    --el-text-color-regular: var(--ast-global-color-2);
    --el-text-color-secondary: var(--ast-global-color-3);
    --el-text-color-placeholder: var(--ast-global-color-3);
    --el-input-text-color: var(--ast-global-color-2);
    --el-input-placeholder-color: var(--ast-global-color-3);
    --el-input-border-color: var(--ast-global-color-6);
    --el-input-hover-border-color: var(--ast-global-color-1);
    --el-input-focus-border-color: var(--ast-global-color-1);
    --el-border-color: var(--ast-global-color-6);
    --el-border-color-light: var(--ast-global-color-6);
    --el-border-color-lighter: var(--ast-global-color-6);
    --el-color-primary: var(--ast-global-color-1);
    --ast-form-input-text: var(--ast-global-color-2);
}

/* FC/EP pin these above the EP variables.                              */
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app .el-dialog__title {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app .el-dialog__close {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app .el-dialog__close:hover,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app .el-dialog__close:focus-visible {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dialog.fluent-cart-customer-profile-app .fct-customer-address-business-details-title {
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}

/* EP dropdowns (country select, ... ) and the address-options menu     */
/* render as poppers attached to <body>, outside the dialog's variable  */
/* scope: remap the EP variables there and pin the item colours FC       */
/* overrides to a light #565865.                                         */
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select__popper,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dropdown__popper {
    --el-bg-color-overlay: var(--ast-global-color-4);
    --el-fill-color-blank: var(--ast-global-color-4);
    --el-fill-color-light: var(--ast-global-color-4);
    --el-fill-color-lighter: var(--ast-global-color-4);
    --el-text-color-primary: var(--ast-global-color-2);
    --el-text-color-regular: var(--ast-global-color-3);
    --el-text-color-placeholder: var(--ast-global-color-3);
    --el-color-primary: var(--ast-global-color-1);
    --el-border-color: var(--ast-global-color-6);
}

html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select-dropdown,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dropdown__menu {
    background-color: var(--fcpa-surface, var(--ast-global-color-4)) !important;
    border-color: var(--fcpa-border, var(--ast-global-color-6)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select-dropdown__item,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dropdown-menu__item {
    color: var(--fcpa-muted, var(--ast-global-color-3)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select-dropdown__item.is-active,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-dropdown-menu__item:hover,
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select-dropdown__item:hover {
    background-color: var(--fcpa-bg, var(--ast-global-color-5)) !important;
    color: var(--fcpa-text, var(--ast-global-color-2)) !important;
}
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .el-select-dropdown__item.is-selected {
    color: var(--fcpa-accent, var(--ast-global-color-1)) !important;
}
/* ------------------------------------------------------------------ */
/* Fluent Boards button chrome (v1.3.14)                               */
/* ------------------------------------------------------------------ */
/* Astra site-wide custom CSS styles every bare `button` element      */
/* (accent background, white ink, accent border, 15px/30px padding).  */
/* Fbs' bundled Element Plus build ships no .el-button--default rule  */
/* and leaves --el-button-bg-color undefined, so the boards app'      */
/* plain EP buttons (topbar icons, filter, mini, full-width) fall     */
/* through to Astra's accent pill in BOTH colour schemes.             */
/* Reset to the look Fbs ships for its explicitly styled plain        */
/* buttons (fbs-quick-description-btn): transparent, no border,       */
/* secondary ink.                                                     */
/* The :where() wrapper keeps this rule at specificity (0,1,1): it    */
/* beats Astra's bare `button` / `.ast-button` (0,0,1)/(0,1,0)        */
/* parts, while Fbs' own two-class button chrome (0,2,0) still wins.  */
/* v1.3.15: scope also covers the body-level task-detail overlay      */
/* (.fbs_view_task_modal_class) — its plain EP buttons (Add Subtask,   */
/* Add Custom Field, Add Attachment, Log, History, 10h estimated,      */
/* Add Label, icon/chevron buttons) had the same leak and rendered     */
/* as blue accent pills with Fbs' intended padding:0.                  */
:where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class) button.el-button {
    background-color: transparent;
    border-width: 0;
    border-color: transparent;
    box-shadow: none;
    color: var(--fbs-secondary-text, var(--ast-global-color-3));
}

/* EP --primary CTAs keep the site accent (the only visible           */
/* occurrence is Fbs' hidden 0x0 file-upload label button; this keeps  */
/* any real primary button in the task modal on brand blue).          */
:where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class) button.el-button--primary {
    background-color: var(--ast-global-color-7);
    border-color: var(--ast-global-color-7);
}
html.astra-color-scheme-dark :where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class) button.el-button--primary {
    color: var(--ast-global-color-2);
}
html:not(.astra-color-scheme-dark) :where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class) button.el-button--primary {
    color: var(--ast-global-color-5);
}

/* v1.3.42: the boards app' BARE buttons (no .el-button class) render as
   accent pills too — most visibly the Element Plus table sort carets
   (button.caret-wrapper) in the table view, where five 61x31 blue pills
   replaced the small sort arrows, plus Fbs' off-canvas close buttons
   (fframe_handheld, fframe_offcanvas_close) and the filter drawer'
   close button (el-drawer__close-btn, portaled to <body> in
   .fbs_filters_sidebar). Element Plus' own .el-table .caret-wrapper
   declaration sits inside a cascade layer in the bundled style.css,
   and Astra' site-wide unlayered `button` rules beat layered rules
   regardless of specificity, so the native EP look (transparent,
   24x14, no border) has to be re-declared from this unlayered sheet
   along the scoped chain. Same reset as the fbs-quick-description-btn
   treatment above; the .el-button--primary CTAs are untouched. */
:where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class) button.caret-wrapper,
:where(body.fcpa-active #fluent-boards-app) button.fframe_handheld,
:where(body.fcpa-active #fluent-boards-app) button.fframe_offcanvas_close,
:where(body.fcpa-active #fluent-boards-app, body.fcpa-active .fbs_view_task_modal_class, body.fcpa-active .fbs_filters_sidebar) button.el-drawer__close-btn {
    background-color: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    color: inherit;
}

/* The 1px outline Astra' unlayered `table, td, th` border rule forces
   onto the boards table' header/body <table> elements and the calendar
   grid (site border accent in both schemes) is stripped — the EP
   hairlines and the portal-mapped cell borders (above) are the only
   lines that remain. */
.fcpa-active .fct-customer-dashboard-main-content #fluent-boards-app table.el-table__header,
.fcpa-active .fct-customer-dashboard-main-content #fluent-boards-app table.el-table__body,
.fcpa-active .fct-customer-dashboard-main-content #fluent-boards-app table.el-calendar-table {
    border: none;
}
/* EP form ink: Astra's own form rules paint inputs with                 */
/* `var(--ast-form-input-text, #475569)` on `input[type=text], ...` —      */
/* specificity (0,1,1) beats EP's .el-input__inner, and the variable is    */
/* undefined on this site, so EP's light slate leaked into the dark        */
/* scheme (dialog fields + the main form's country select). Define the    */
/* role for the dark scheme on the portal wrapper; the dialog is attached  */
/* to <body> outside that wrapper and is covered above.                    */
html.astra-color-scheme-dark body.fcpa-active.fcpa-endpoint-profile .fluent-cart-customer-profile-app {
    --ast-form-input-text: var(--ast-global-color-2);
}

/* ------------------------------------------------------------------ */
/* Logged-out /account/: FluentAuth login/register/reset widget        */
/* ------------------------------------------------------------------ */
/* Fluent Cart's CustomerProfileHandler defers to FluentAuth (when       */
/* active) and prints `[fluent_auth]` inside its own `.fct_auth_wrap`    */
/* card. FluentAuth's widget (`.fls_auth_wrapper`) itself ships almost   */
/* no visual chrome — three plain sub-forms toggled via a `hide` class   */
/* (`.fls_login_wrapper`, `.fls_registration_wrapper`,                   */
/* `.fls_reset_pass_wrapper`) — so this recreates the old site's card,   */
/* pill tab switcher and accent-blue CTA look on top of it. The card's   */
/* inline border/padding come from Fluent Cart and need !important to    */
/* beat them.                                                            */
.fcpa-active .fct_auth_wrap {
    max-width: 460px !important;
    margin: 48px auto !important;
    padding: 32px 28px !important;
    background: var(--fcpa-surface, #fff) !important;
    border: 1px solid var(--fcpa-border, #d1dae5) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .18);
}

/* Desktop split-screen hero panel, injected as a sibling of              */
/* `.fct_auth_wrap` by auth-hero.js and wrapped together in               */
/* `.fcpa-auth-shell`, matching the old site's two-column                 */
/* `.molti-login-area` layout. Hidden below the desktop breakpoint —      */
/* the old site's own row isn't actually responsive (it overflows         */
/* horizontally on narrow viewports), so mobile keeps the single-column   */
/* card instead of copying that bug.                                     */
.fcpa-auth-hero {
    display: none;
}

@media (min-width: 900px) {
    .fcpa-auth-shell {
        display: flex;
        align-items: stretch;
        max-width: 940px;
        margin: 48px auto !important;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .18);
    }

    .fcpa-auth-hero {
        display: flex;
        flex: 0 0 42%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 48px 36px;
        text-align: center;
        /* Fixed accent-blue panel with white text, same in light and    */
        /* dark mode — matches the old site's always-blue hero, and       */
        /* color-7 itself doesn't change value between the two modes.     */
        background: var(--ast-global-color-7);
        color: #fff;
    }

    .fcpa-auth-hero img {
        max-width: 100%;
        height: auto;
    }

    .fcpa-auth-hero h3 {
        margin: 0;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 700;
        color: #fff;
    }

    .fcpa-auth-hero p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .85);
    }

    .fcpa-auth-shell .fct_auth_wrap {
        flex: 1 1 58%;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-left: 1px solid var(--fcpa-border, #d1dae5) !important;
        box-shadow: none !important;
    }
}

.fcpa-active .fct_auth_wrap h4 {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--fcpa-text, #0f172a);
}

/* Pill tab switcher (Login / Register) injected by auth-tabs.js just    */
/* under the heading; hidden until the script confirms both forms exist  */
/* so there is no flash of an inert bar if FluentAuth ever changes markup.*/
.fcpa-auth-tabs {
    display: none;
    gap: 4px;
    margin: 0 0 24px;
    padding: 4px;
    background: var(--fcpa-bg, #eef2f7);
    border: 1px solid var(--fcpa-border, #d1dae5);
    border-radius: 999px;
}

.fcpa-auth-tabs.is-ready {
    display: flex;
}

.fcpa-auth-tabs button {
    flex: 1 1 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fcpa-muted, #64748b);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.fcpa-auth-tabs button.is-active {
    background: var(--fcpa-surface, #fff);
    color: var(--fcpa-text, #0f172a);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* Field labels: small, uppercase, muted — matches the old site's        */
/* "USERNAME OR EMAIL ADDRESS" style. The login form's bare `<label>`s    */
/* need the block treatment themselves; FluentAuth's registration/reset   */
/* fields already wrap their `<label>` in a `.fls_field_label` div, so    */
/* only the wrapper gets it there. Astra's own front-end form styles set   */
/* `label{display:block}` sitewide, so the inner `<label>` still needs an  */
/* explicit inline override here or it takes its own line, pushing the     */
/* `.is-required` `::after` asterisk onto a second line under it.          */
.fcpa-active .fct_auth_wrap .login-username label,
.fcpa-active .fct_auth_wrap .login-password label,
.fcpa-active .fct_auth_wrap .fls_field_label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fcpa-muted, #64748b);
}

.fcpa-active .fct_auth_wrap .fls_field_label label {
    display: inline !important;
}

/* FluentAuth already draws its own red "*" for required fields (on
   `label::after`, in login_helper.css) — only the plain WP login form's
   labels need one added here. */
.fcpa-active .fct_auth_wrap .login-username label::after,
.fcpa-active .fct_auth_wrap .login-password label::after {
    content: ' *';
    color: #e35b5b;
}

.fcpa-active .fct_auth_wrap .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--fcpa-muted, #64748b);
}

.fcpa-active .fct_auth_wrap .login-remember input {
    accent-color: var(--ast-global-color-7);
}

/* Registration field layout: the old WooCommerce billing form paired    */
/* related fields side by side (name / company+VAT / city+state /        */
/* postcode+country) instead of stacking every field full-width — this   */
/* recreates that, collapsing back to a single column on narrow phones.  */
.fcpa-active .fct_auth_wrap .fls_registration_fields {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
}

.fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_group {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    /* Same 4-class specificity as the base ".fls_registration_fields >
       .fls_field_group" rule above (which would otherwise win and force
       these back to 100% width) — the ".fls_registration_fields >"
       prefix here isn't for selection, it's to match that specificity. */
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_first_name,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_last_name,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_company_name,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_vat_number,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_city,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_state,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_postcode,
    .fcpa-active .fct_auth_wrap .fls_registration_fields > .fls_field_country {
        flex: 1 1 calc(50% - 8px);
    }
}

/* Searchable Country combo box (auth-country.js): the visible search     */
/* input reuses the standard text-input styling above automatically      */
/* (it's still a real `input[type="text"]`); only the dropdown list       */
/* itself needs its own look.                                            */
.fcpa-country-combo {
    position: relative;
}

.fcpa-country-list {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% - 14px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--fcpa-surface, #fff);
    border: 1px solid var(--fcpa-border, #d1dae5);
    border-radius: 10px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .25);
}

.fcpa-country-list.is-open {
    display: block;
}

.fcpa-country-option {
    padding: 9px 14px;
    font-size: 14px;
    color: var(--fcpa-text, #0f172a);
    cursor: pointer;
}

.fcpa-country-option:hover {
    background: var(--fcpa-bg, #eef2f7);
}

/* Text inputs: rounded, full width, themed border/background.           */
.fcpa-active .fct_auth_wrap input[type="text"],
.fcpa-active .fct_auth_wrap input[type="email"],
.fcpa-active .fct_auth_wrap input[type="password"] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 18px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--fcpa-text, #0f172a);
    background: var(--fcpa-bg, #fff);
    border: 1px solid var(--fcpa-border, #d1dae5);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fcpa-active .fct_auth_wrap input[type="text"]:focus,
.fcpa-active .fct_auth_wrap input[type="email"]:focus,
.fcpa-active .fct_auth_wrap input[type="password"]:focus {
    outline: none;
    border-color: var(--ast-global-color-7);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ast-global-color-7) 25%, transparent);
}

/* Primary submit buttons: full-width accent pill, on every sub-form      */
/* (`#wp-submit` login, `#fls_submit` register, `#fls_reset_pass` reset). */
.fcpa-active .fct_auth_wrap input.button.button-primary,
.fcpa-active .fct_auth_wrap #fls_submit,
.fcpa-active .fct_auth_wrap #fls_reset_pass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ast-global-color-5);
    background: var(--ast-global-color-7);
    border: 1px solid var(--ast-global-color-7);
    border-radius: 999px;
    cursor: pointer;
    transition: filter .15s ease;
}

html.astra-color-scheme-dark .fcpa-active .fct_auth_wrap input.button.button-primary,
html.astra-color-scheme-dark .fcpa-active .fct_auth_wrap #fls_submit,
html.astra-color-scheme-dark .fcpa-active .fct_auth_wrap #fls_reset_pass {
    color: var(--ast-global-color-2);
}

.fcpa-active .fct_auth_wrap input.button.button-primary:hover,
.fcpa-active .fct_auth_wrap #fls_submit:hover,
.fcpa-active .fct_auth_wrap #fls_reset_pass:hover {
    filter: brightness(1.08);
}

/* Passkey button: FluentAuth themes it through two CSS variables         */
/* (`--fls-form-button_color` / `--fls-form-button_label_color`) instead  */
/* of a class, so re-pointing those to the site accent is enough — no     */
/* !important battle needed for its color. Only the border-radius (its    */
/* own inline style hardcodes 3px) needs an override to match the pill    */
/* shape used everywhere else on the card.                                */
.fcpa-active .fct_auth_wrap {
    --fls-form-button_color: var(--ast-global-color-7);
    --fls-form-button_label_color: var(--ast-global-color-5);
}

html.astra-color-scheme-dark .fcpa-active .fct_auth_wrap {
    --fls-form-button_label_color: var(--ast-global-color-2);
}

.fcpa-active .fct_auth_wrap #fls_passkey_login_button {
    border-radius: 999px !important;
}

.fcpa-active .fct_auth_wrap .fls_passkey_login__or span:first-child,
.fcpa-active .fct_auth_wrap .fls_passkey_login__or span:last-child {
    background: var(--fcpa-border, #d1dae5) !important;
}

.fcpa-active .fct_auth_wrap .fls_passkey_login__or span:not(:first-child):not(:last-child),
.fcpa-active .fct_auth_wrap #fls_passkey_login_status {
    color: var(--fcpa-muted, #64748b) !important;
}

/* "Not registered?" / "Forgot your password?" / "Already have an        */
/* account?" links under each form, plus the JS-injected "Back to        */
/* login" paragraph on the reset-password pane.                          */
.fcpa-active .fct_auth_wrap .fls_login_wrapper > p,
.fcpa-active .fct_auth_wrap .fls_registration_wrapper > p,
.fcpa-active .fct_auth_wrap .fcpa-back-to-login {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--fcpa-muted, #64748b);
}

.fcpa-active .fct_auth_wrap .fls_login_wrapper > p a,
.fcpa-active .fct_auth_wrap .fls_registration_wrapper > p a,
.fcpa-active .fct_auth_wrap .fcpa-back-to-login a {
    font-weight: 700;
    color: var(--ast-global-color-7);
    text-decoration: none;
}

.fcpa-active .fct_auth_wrap .fls_login_wrapper > p a:hover,
.fcpa-active .fct_auth_wrap .fls_registration_wrapper > p a:hover,
.fcpa-active .fct_auth_wrap .fcpa-back-to-login a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .fcpa-active .fct_auth_wrap {
        margin: 24px 16px !important;
        padding: 24px 20px !important;
    }
}