/* /support/ ([fbk_support], page_support.py). White dominates, yellow (--primary) only as an accent, 1px
   borders, Borna, SVG icons — never yellow text on light, including on hover. */

/* M4 (2026-10-20): centered hero (.fbw-hero--center, fbw.css) with the ticket icon in a tile above the H1, and the
   panel centered under it, so no row is left half empty */
.fbw .fbw-support-hero .fbw-tile .fbw-icon--lg { width: 28px; height: 28px; }

.fbw .fbw-support-panel-wrap { max-width: var(--content-width-text); margin-inline: auto; }

/* Shared chrome for the three server-rendered states (fbk-support.php) */
.fbw .fbw-support-panel { display: flex; flex-direction: column; gap: 1rem; padding: var(--space-l); border: 1px solid var(--border-color-strong); border-radius: var(--radius); background: var(--base-ultra-light, #fff); }
.fbw .fbw-support-panel p { margin: 0; color: var(--text-color); }
.fbw .fbw-support-panel__title { font-size: var(--h5); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--heading-color); }
.fbw .fbw-support-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.fbw .fbw-support-panel__upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color-strong); }
.fbw .fbw-support-panel__upsell p { font-weight: 500; color: var(--heading-color); }

/* Free-account state keeps the community line visually separate from the docs links */
.fbw .fbw-support-panel--free > p:nth-of-type(2) { font-size: var(--text-s); color: var(--text-color); }

/* The Fluent Support customer portal is a third-party Vue (Element Plus) app: restyled through its own CSS
   custom properties and base chrome, not a full reskin of every internal class. */
.fbw .fbw-support-portal { border: 1px solid var(--border-color-strong); border-radius: var(--radius); overflow: hidden; background: var(--base-ultra-light, #fff); }
.fbw [data-fbk-support-portal] {
  --el-font-family: var(--font-sans);
  --el-color-primary: var(--heading-color);
  --el-color-primary-light-3: var(--border-color-strong);
  --el-color-primary-light-5: var(--border-color-strong);
  --el-color-primary-light-7: var(--base-ultra-light, #f5f5f5);
  --el-color-primary-light-8: var(--base-ultra-light, #f5f5f5);
  --el-color-primary-light-9: var(--base-ultra-light, #f7f7f7);
  --el-color-primary-dark-2: var(--heading-color);
  --el-border-radius-base: 8px;
  --el-border-color: var(--border-color-strong);
  --el-border-color-light: var(--border-color-strong);
  --el-border-color-lighter: var(--border-color-strong);
  --el-text-color-primary: var(--heading-color);
  --el-text-color-regular: var(--text-color);
  --el-text-color-secondary: var(--text-color);
  font-family: var(--font-sans);
}
/* The icon-only sort button (Element Plus, no built-in label) and the empty-state text need a direct fix: a CSS
   variable alone doesn't reach aria attributes, and the default secondary gray under-contrasts on white. */
.fbw [data-fbk-support-portal] .el-table__empty-text { color: var(--text-color); }
/* Primary (accent) action inside the portal: the brand's one yellow button, ink text so it never reads as
   yellow-on-light text (house rule). */
.fbw [data-fbk-support-portal] .el-button--primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--base-ultra-dark) !important; }
.fbw [data-fbk-support-portal] .el-button--primary:hover, .fbw [data-fbk-support-portal] .el-button--primary:focus { background-color: var(--primary-dark, var(--primary)) !important; border-color: var(--primary-dark, var(--primary)) !important; color: var(--base-ultra-dark) !important; }
/* Links inside ticket content: the house underline, never a bare color change on hover. */
.fbw [data-fbk-support-portal] a { color: var(--heading-color); }
.fbw [data-fbk-support-portal] a:hover { color: var(--heading-color); text-decoration-color: var(--heading-color); }