/* ================================================================
   FLUENT FORMS — BRAND OVERRIDE
   Separate file, kept apart from arvinity-global.css since this
   styles third-party plugin markup, not theme markup — easier to
   maintain independently if Fluent Forms changes its class names in
   an update.

   Built against the REAL rendered markup (inspected via browser dev
   tools on the live quiz form), not guessed selectors — Fluent Forms'
   own "CSS Ready Classes" system explicitly doesn't support
   Conversational Forms, so generic/guessed selectors were not a safe
   bet here.

   !important is used deliberately on color/background/font rules
   only. Fluent Forms' Design panel (Preview & Design → Design tab)
   can also set a few of these same properties, and it's not fully
   verifiable from static markup whether that panel injects its own
   competing <style> tag or inline styles — !important guarantees this
   file wins regardless of what's set there or when it loads. Layout
   rules (spacing, borders, radius, hover states) don't need it, since
   nothing else is styling those properties.

   IF YOU BUILD MORE FLUENT FORMS AND SOMETHING ISN'T STYLED:
   Right-click the unstyled element → Inspect → find its class name →
   add a rule here following the same pattern as what's below.
================================================================ */


/* ----------------------------------------------------------------
   01. ROOT / BACKGROUND
---------------------------------------------------------------- */
.ff_conversation_page_body {
    background: var(--bg-onyx) !important;
}

.ffc_conv_wrapper,
.ff_conv_app,
.vff {
    background: var(--bg-onyx) !important;
    font-family: var(--font-body) !important;
}


/* ----------------------------------------------------------------
   02. QUESTION COUNTER — recolored to match the site's existing
   numbered-circle motif (process steps, etc.)
---------------------------------------------------------------- */
.ffc-counter-div {
    color: var(--accent) !important;
}

.counter-value span {
    font-family: var(--font-display) !important;
    color: var(--accent) !important;
    font-size: 1rem !important;
    letter-spacing: 0.04em;
}

.counter-icon-container {
    background: rgba(122, 44, 255, 0.12) !important;
    border: 1px solid rgba(122, 44, 255, 0.3) !important;
    border-radius: 50%;
}

.counter-icon-span svg path {
    fill: var(--accent) !important;
}


/* ----------------------------------------------------------------
   03. QUESTION TEXT
---------------------------------------------------------------- */
.ffc_question .f-text,
.ffc_question .f-text span {
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
}

.f-required .asterisk-right span,
.f-required span[aria-hidden="true"] {
    color: var(--accent) !important;
}

.f-sub .f-help {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
}


/* ----------------------------------------------------------------
   04. TEXT / EMAIL / NAME INPUTS — matches .form-control elsewhere
   on the site
---------------------------------------------------------------- */
.ff_conv_input_wrapper label.f-text {
    color: var(--text-light) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

.ff_conv_input input[type="text"],
.ff_conv_input input[type="email"],
.ff_conv_input_wrapper input {
    background: var(--surface-charcoal) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    padding: 0.875rem 1rem !important;
}

.ff_conv_input input[type="text"]:focus,
.ff_conv_input input[type="email"]:focus,
.ff_conv_input_wrapper input:focus {
    border-color: var(--accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.ff_conv_input input::placeholder {
    color: rgba(138, 149, 160, 0.5) !important;
}


/* ----------------------------------------------------------------
   05. MULTIPLE CHOICE OPTIONS — same left-accent-border + hover
   treatment as the site's original custom quiz build, so the visual
   language carries over even though the mechanism changed
---------------------------------------------------------------- */
.f-radios .f-label-wrap {
    background: var(--bg-onyx) !important;
    border: 1px solid var(--border-default) !important;
    border-left: 3px solid var(--accent-border) !important;
    border-radius: var(--radius-sm);
    padding: 1rem 1.125rem !important;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.f-radios li:hover .f-label-wrap,
.f-radios li:focus .f-label-wrap {
    background: var(--accent-subtle) !important;
    border-left-color: var(--accent) !important;
}

.f-radios .f-label {
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    font-size: 0.9375rem !important;
}

.f-radios .f-key {
    color: var(--text-muted) !important;
    border-color: var(--border-light) !important;
}

.f-radios .f-key span:not(.f-key-hint) {
    color: var(--accent) !important;
}

.ffc_check_svg svg path {
    fill: var(--accent) !important;
}


/* ----------------------------------------------------------------
   06. PROGRESS BAR
---------------------------------------------------------------- */
.ffc_progress_label {
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
}

.f-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.f-progress-bar-inner {
    background: var(--accent) !important;
}


/* ----------------------------------------------------------------
   07. PREV / NEXT NAV ARROWS — matches the site's existing circular
   arrow-button component (used for "next project" navigation)
---------------------------------------------------------------- */
.f-nav .f-prev,
.f-nav .f-next {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.f-nav .f-prev:hover,
.f-nav .f-next:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.f-nav .f-prev svg path,
.f-nav .f-next svg path {
    fill: var(--text-muted) !important;
}

.f-nav .f-prev:hover svg path,
.f-nav .f-next:hover svg path {
    fill: var(--text-light) !important;
}

.f-nav .f-prev.f-disabled,
.f-nav .f-next.f-disabled {
    opacity: 0.3;
}

.f-nav-text {
    display: none; /* keep just the icon — cleaner against the dark background */
}


/* ----------------------------------------------------------------
   08. "POWERED BY FLUENT FORMS" — de-emphasized, not hidden (removing
   it entirely is a paid-plan feature per the form's own settings)
---------------------------------------------------------------- */
.ffc_power {
    color: rgba(138, 149, 160, 0.35) !important;
    font-size: 0.7rem !important;
}

.ffc_power:hover {
    color: rgba(138, 149, 160, 0.6) !important;
}


/* ----------------------------------------------------------------
   09. SUBMIT BUTTON — matches the site's .btn component. Class name
   unconfirmed for this specific form (no submit step was visible in
   the inspected markup yet), so this targets Fluent Forms' documented
   default submit classes as a reasonable starting point.
---------------------------------------------------------------- */
.ff_conv_app button[type="submit"],
.ff_conv_app .ff-btn-submit {
    background: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.875rem 2rem !important;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ff_conv_app button[type="submit"]:hover,
.ff_conv_app .ff-btn-submit:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}


/* ----------------------------------------------------------------
   10. PER-QUESTION BACKGROUND IMAGES
   Each question currently has a demo stock photo set in the form
   builder (Design → per-field Media settings) — that's not something
   CSS controls. Worth clearing those or swapping in your own images
   directly in the builder. If you keep photography, this dims it so
   it doesn't clash with the dark theme once it's showing:
---------------------------------------------------------------- */
.ff_conv_section_wrapper[style*="background-image"] {
    background-color: rgba(13, 15, 18, 0.75) !important;
    background-blend-mode: multiply;
}