/*
 * «آمار فروش» — the four managements تسک ۱۴۰۵/۰۷/۱۳/۰۲ reworked together:
 * «آمار فروش ماهیانه», «تراکنش‌ها», «سفارش‌ها (سوابق خرید)» with each order's
 * own page, and «گزارش فروش اشتراک», brought into one style by
 * تسک ۱۴۰۵/۰۷/۱۸/۰۳. («مانیتور عکس‌های فروش رفته» keeps its own file.)
 *
 * Every rule is scoped to one of those pages' own classes, and no colour is
 * written as a literal: the panel's `--std-color-*` tokens decide them, so the
 * standards block keeps the last word and dark mode follows for free. The one
 * text colour a cell needed — the yellow of «تاریخ پرداخت» — is not here at
 * all: a table cell's colour belongs to «استاندارد‌سازی نمای پنل» and is an
 * exception row written by a migration.
 */

/* ——— Zebra rows (تسک ۱۴۰۵/۰۷/۱۸/۰۳، بند ۵) ———————————————————————————————————
 *
 * One pair of row colours for every sales table — «سفارش‌ها»، «تراکنش‌ها»،
 * «آمار فروش ماهیانه» and «جزئیات فروش اشتراک» — held in two variables so the
 * next change is made once (the task's own «پیشنهاد فنی»).
 *
 * The old pair was the card's own surface and a 10% wash of grey over it, so
 * every other row was exactly the colour of the table around it. Now neither
 * is: the odd row takes a light wash, the even row a clearly stronger one, both
 * unlike the page behind the card and unlike the column-header strip. They are
 * washes rather than solid colours, so the badges and the coloured figures keep
 * their colours on both, and the row under the pointer is a third, bluer wash
 * so it is still found.
 *
 * `--agency-zebra-*` are written on `:root`, so a management outside this file
 * — «مغایرت تاریخ عکس‌ها» — can take the same pair by name.
 */
:root {
    --agency-zebra-odd: color-mix(in oklab, var(--gray-400, #9ca3af) 5%, transparent);
    --agency-zebra-even: color-mix(in oklab, var(--gray-400, #9ca3af) 14%, transparent);
    --agency-zebra-hover: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

.dark {
    --agency-zebra-odd: color-mix(in oklab, var(--gray-400, #9ca3af) 6%, transparent);
    --agency-zebra-even: color-mix(in oklab, var(--gray-400, #9ca3af) 15%, transparent);
}

.fi-sales-monitor-page .fi-ta-row,
.fi-transactions-page .fi-ta-row,
.fi-orders-list-page .fi-ta-row,
.fi-subscription-reports-page .fi-ta-row,
.fi-income-table-page .fi-ta-row {
    background-color: var(--agency-zebra-odd);
}

.fi-sales-monitor-page .fi-ta-row.fi-striped,
.fi-transactions-page .fi-ta-row.fi-striped,
.fi-orders-list-page .fi-ta-row.fi-striped,
.fi-subscription-reports-page .fi-ta-row.fi-striped,
.fi-income-table-page .fi-ta-row.fi-striped {
    background-color: var(--agency-zebra-even);
}

.fi-sales-monitor-page .fi-ta-row:hover,
.fi-transactions-page .fi-ta-row:hover,
.fi-orders-list-page .fi-ta-row:hover,
.fi-subscription-reports-page .fi-ta-row:hover,
.fi-income-table-page .fi-ta-row:hover {
    background-color: var(--agency-zebra-hover);
}

/* ——— The shared heading (بند ۳ و ۴) ——————————————————————————————————————————
 *
 * «عنوان | شاخص: عدد | …» — `App\Support\FinanceHeading`. The title's size is
 * a row of «استانداردسازی نمای پنل»; the colours are its three roles. What is
 * here is the layout only: the figures and their labels a little under the
 * title, in the heading's ordinary weight, and on a narrow screen the groups
 * fall to the next line whole rather than overlapping (بند ۴).
 */
.fi-finance-heading {
    align-items: center;
    row-gap: 0.375rem;
}

.fi-finance-heading-stat,
.fi-finance-heading-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.fi-finance-heading-stat {
    white-space: nowrap;
}

.fi-finance-heading-label {
    font-size: 0.667em;
    font-weight: 400;
}

/* ——— «آمار فروش ماهیانه» ——————————————————————————————————————————————— */

/* بند ۳.۵: the two figures that open a month's photographs read as links. */
.fi-sales-monitor-link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/*
 * بند ۳.۳: «در لیست انتخاب سال و ماه نیز گزینه‌ها به‌صورت یکی‌درمیان دارای
 * پس‌زمینه متفاوت باشند». The two filters are drawn as the panel's own list
 * (not the browser's), so every other option can carry the stripe.
 */
.fi-sales-monitor-page .fi-select-input-options-ctn > li:nth-child(even) {
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

/* ——— «تراکنش‌ها» ——————————————————————————————————————————————————————————— */

/* بند ۷.۳: «نوع تراکنش» beside the search box. */
.fi-transactions-kind {
    display: inline-flex;
    min-width: 11rem;
}

/* ——— «سفارش‌ها (سوابق خرید)» ————————————————————————————————————————————— */

/* «سفارش ۵۹ | مشتری» on an order's own page (بند ۸ of تسک ۱۴۰۵/۰۷/۱۳/۰۲).
   The list's heading is the shared one above since تسک ۱۴۰۵/۰۷/۱۸/۰۳. */
.fi-order-heading-divider {
    margin-inline: 0.5rem;
    opacity: 0.45;
}

.fi-order-heading-customer {
    font-size: 0.75em;
    opacity: 0.85;
}

/* بند ۸.۴: «تعداد عکس» opens that order's photographs. */
.fi-orders-photo-count {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ——— «گزارش فروش اشتراک» ——————————————————————————————————————————————— */

/*
 * بند ۲۲.۴: the two tabs in the middle of the page's own content, wherever the
 * table is scrolled and whichever tab is open.
 *
 * They drifted because of how every wide table in this panel scrolls
 * (`agency-tables.css`): the page itself grows to the table's width and
 * scrolls sideways, and the heading, the toolbar and the filters are pinned to
 * the visible area so they never scroll away. The tabs were not on that list,
 * so on «جزئیات فروش اشتراک» they were centred in the whole width of the table
 * and moved with it. Their row is pinned the same way now — the same offset,
 * the same width — and the tabs are centred inside it. On «آمار کلی» there is
 * no table, the page is its ordinary width, and the row simply centres them.
 */
.fi-subscription-reports-tabs-row {
    display: flex;
    justify-content: center;
}

.fi-body:has(.fi-page .fi-ta-ctn) .fi-subscription-reports-page .fi-subscription-reports-tabs-row {
    position: sticky;
    inset-inline-start: calc((var(--agency-page-area-width) - 100cqi) / 2);
    width: 100cqi;
    z-index: 20;
}

/* بند ۲۰: how many of each length were sold, after the title. */
.fi-subscription-lengths {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.fi-subscription-length {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--std-color-hex-111827, #111827);
}

.fi-subscription-length-day {
    background-color: var(--std-color-chart-sky, #38bdf8);
}

.fi-subscription-length-month {
    background-color: var(--std-color-chart-amber, #eab308);
}

.fi-subscription-length-quarter {
    background-color: var(--std-color-chart-violet, #a78bfa);
}

.fi-subscription-length-other {
    background-color: var(--std-color-chart-teal, #14b8a6);
}

/* بند ۲۱: the titles of the «آمار کلی» cards, lighter so they are read rather
   than guessed at. Their size and weight, and the figures under them, stay. */
.fi-subscription-reports-page .fi-sales-summary-label {
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-subscription-reports-page .fi-sales-summary-label {
    color: var(--std-color-gray-200, #e5e7eb);
}

/* بند ۲۲.۳: today's, this month's and six months' sales on the table's toolbar. */
.fi-subscription-periods {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-inline-end: auto;
    padding-inline-start: 0.5rem;
    font-size: 0.8125rem;
}

.fi-subscription-period {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.fi-subscription-period-label {
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-subscription-period-label {
    color: var(--std-color-gray-300, #d1d5db);
}

.fi-subscription-period-value {
    font-weight: 700;
    color: var(--std-color-warning-600, #d97706);
}

.dark .fi-subscription-period-value {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-subscription-period-divider {
    opacity: 0.45;
}

/* بند ۱۲.۹: the granting operator's face, their initial underneath it. */
.fi-subscription-granted-by {
    display: flex;
    justify-content: center;
    width: 100%;
}

.fi-subscription-granted-by-face {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
    cursor: default;
}

.fi-subscription-granted-by-avatar {
    position: absolute;
    inset: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
}

/* ——— تسک ۱۴۰۵/۰۷/۲۰/۰۴ — «گزارش فروش اشتراک» ————————————————————————————————
 *
 * Sizes and places only, every one of them a ratio of what stood before it,
 * and every rule under this page's own class: the tiles are the ones «آمار
 * فروش ویترین من» and «درآمد من» draw, and neither of those moves.
 */

/* بند ۴.۱: the three markers after the title, one and a half times over — the
   words, the line they stand on, the room around them and the corner alike. */
.fi-subscription-reports-page .fi-subscription-lengths {
    gap: 0.5625rem;
}

.fi-subscription-reports-page .fi-subscription-length {
    padding: 0.28125rem 0.75rem;
    border-radius: 9px;
    font-size: 1.125rem;
    line-height: 1.875rem;
}

/*
 * بند ۴.۲: half the room between the two tabs and the first row of cards.
 *
 * 3rem stood there: the page's own 2rem between two blocks, and the 1rem the
 * grid of cards kept above itself. The grid's own 1rem goes, and the block is
 * drawn 0.5rem up into the page's gap, which leaves 1.5rem. Neither a card's
 * inside nor the tabs are touched.
 */
.fi-subscription-reports-summary {
    margin-top: -0.5rem;
}

.fi-subscription-reports-summary .fi-sales-summary {
    padding: 0 0 1rem;
    gap: 1.125rem;
}

/*
 * بند ۴.۳: every card half as large again.
 *
 * Four cards and a half of their width do not fit where four stood, which the
 * task foresaw («چیدمان شبکه‌ای و تعداد ستون‌ها متناسب اصلاح شود»): three stand
 * to a row, and the grid gives up the 1.5rem it kept at either side, so a card
 * is as wide as the page allows — about four tenths wider than it was — and
 * one and a half times as tall. The room inside it, the room between its
 * lines and its corner grow by the same half, and the lines are centred in
 * the height so none of it is left as a blank strip at the bottom.
 */
@media (min-width: 1024px) {
    .fi-subscription-reports-summary .fi-sales-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fi-subscription-reports-summary .fi-sales-summary-tile {
    justify-content: center;
    gap: 0.5rem;
    min-height: 8.34375rem;
    padding: 0.9375rem 1.3125rem;
    border-radius: 1.125rem;
}

/*
 * بند ۴.۴ و ۴.۵: the title a third larger — 0.75rem × 4/3 — with its icon
 * before it, as tall as the title's own line and in the title's own colour,
 * so it is light on a dark card and dark on a light one without a colour
 * being written here. The figure and the line under it are the size they
 * were. A long title wraps under itself, beside the icon, rather than being
 * cut.
 */
.fi-subscription-reports-summary .fi-sales-summary-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.fi-subscription-reports-summary .fi-sales-summary-icon {
    display: inline-flex;
    flex: none;
}

.fi-subscription-reports-summary .fi-sales-summary-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-subscription-reports-summary .fi-sales-summary-label-text {
    min-width: 0;
}

/* The one green card keeps its green in its icon as well. */
.fi-subscription-reports-summary .fi-sales-summary-tile-income .fi-sales-summary-icon {
    color: var(--std-color-success-600, #16a34a);
}

/* بند ۵.۵: «فروش اشتراک امروز | این ماه | شش ماه اخیر» a third larger —
   0.8125rem × 4/3, labels and figures alike — with a third more room between
   them. They wrap as whole groups, and the search box stays at its own end. */
.fi-subscription-reports-page .fi-subscription-periods {
    gap: 0.6667rem;
    font-size: 1.0833rem;
}

.fi-subscription-reports-page .fi-subscription-period {
    gap: 0.3333rem;
}

/*
 * الزام مشترک ۴: on a narrow screen the three figures fold onto a second line
 * and the three markers of the heading onto a line of their own, rather than
 * running off the edge. Both are wrapping rows already; what stopped them was
 * that neither was allowed to be narrower than its unwrapped width.
 */
.fi-subscription-reports-page .fi-subscription-periods {
    flex-shrink: 1;
    min-width: 0;
}

.fi-subscription-reports-page .fi-header > div:first-child {
    min-width: 0;
}

/*
 * بند ۵.۴: two row colours that are told apart at a glance.
 *
 * The shared pair is a 6% and a 15% wash, and on this table — eighteen columns
 * wide, read across — the lighter of the two was all but the card behind it.
 * The pair is the same two variables, given their own values under this page's
 * class alone, so «سفارش‌ها»، «تراکنش‌ها» and «آمار فروش ماهیانه» keep theirs:
 * the odd row barely tinted, the even row a clear step above it. Both are
 * still washes of the panel's grey, so white, yellow, green, red and every
 * badge read on either, and the bluer row under the pointer is still a third.
 * Filament marks the even rows itself, on whatever rows the sort, the search,
 * the filters and the page leave, so the stripes follow all four.
 */
.fi-subscription-reports-page {
    --agency-zebra-odd: color-mix(in oklab, var(--gray-400, #9ca3af) 4%, transparent);
    --agency-zebra-even: color-mix(in oklab, var(--gray-400, #9ca3af) 20%, transparent);
    --agency-zebra-hover: color-mix(in oklab, var(--info-400, #60a5fa) 22%, transparent);
}

.dark .fi-subscription-reports-page {
    --agency-zebra-odd: color-mix(in oklab, var(--gray-400, #9ca3af) 3%, transparent);
    --agency-zebra-even: color-mix(in oklab, var(--gray-400, #9ca3af) 24%, transparent);
}

/* ——— «جدول درآمدی» (تسک ۱۴۰۵/۰۷/۲۱/۰۱) ———————————————————————————————————————
 *
 * The three tabs, and under them «ماهانه | سالانه» beside the «سال» filter.
 * Pinned to the visible area the way the tabs of «گزارش فروش اشتراک» are, so
 * they stay where they are while a wide view is scrolled sideways.
 *
 * No colour of a figure is here: yellow, red and green are three exception
 * rows of «استانداردسازی نمای پنل», written by a migration.
 */
/* The «سال» list opens over the table. The table's toolbar is a stacking
   context of its own at 21 (`agency-tables.css`), so at an equal or lower
   figure the list was drawn under it and could not be clicked.

   …and it may not be 30 or more (تسک ۱۴۰۵/۰۷/۲۱/۰۲، بند ۳ و ۴). Filament's top
   bar is a stacking context at 30, and both of the panel's menus open out of
   it, down over the page. This bar comes after the top bar in the document, so
   at an equal figure it was drawn *over* the open menu — it is as wide as the
   page and has no background, so nothing showed — and took the pointer from
   it: the menu was told the pointer had left, and closed. The rows it lay
   across were the first ones of the menu, «گالری‌ها»، «عکس‌ها» و «بارگذاری
   عکس». One step over the toolbar is all the «سال» list ever needed. */
.fi-income-table-bar {
    /* «ماهانه | سالانه» is as far under the tabs as it is over the table
       (تسک ۱۴۰۵/۰۷/۲۱/۰۲، بند ۶) — and both distances are a third of the
       page's own 2rem between blocks (تسک ۱۴۰۵/۰۷/۲۱/۰۳، بند ۲.۲ و ۲.۳). The
       distance to the table is the page content's gap, set below from this. */
    --income-bar-gap: calc(var(--spacing, 0.25rem) * 8 / 3);

    position: relative;
    z-index: 22;
    display: flex;
    flex-direction: column;
    gap: var(--income-bar-gap);
}

/* The tabs nearer the page's title: half the page's own distance between its
   header and its content (تسک ۱۴۰۵/۰۷/۲۱/۰۳، بند ۲.۱). The title keeps its
   place; only the gap under it closes, so nothing comes to stand on it. */
.fi-income-table-page .fi-page-header-main-ctn {
    row-gap: calc(var(--spacing, 0.25rem) * 4);
}

/* …and the table a third as far under «ماهانه | سالانه» (بند ۲.۳). */
.fi-income-table-page .fi-page-content {
    row-gap: calc(var(--spacing, 0.25rem) * 8 / 3);
}

.fi-income-table-tabs-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fi-body:has(.fi-page .fi-ta-ctn) .fi-income-table-page .fi-income-table-bar {
    position: sticky;
    inset-inline-start: calc((var(--agency-page-area-width) - 100cqi) / 2);
    width: 100cqi;
}

/* «سال» at the end of the second line, beside it and not in it: the two
   periods are then centred in the whole line — on the axis of the three tabs
   above — and the line is exactly as tall as they are (بند ۵ و ۶). */
.fi-income-table-filters {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    padding: 0.375rem 0.75rem;
}

.fi-income-table-filters .fi-pstat-filter {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* Where the line is too short to hold the periods in its middle and «سال» at
   its end, «سال» takes a line of its own under them, centred on the same
   axis, rather than standing on top of them. */
@media (max-width: 36rem) {
    .fi-income-table-second-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .fi-income-table-filters {
        position: static;
        transform: none;
    }
}

/* ——— Every heading over its own figures (تسک ۱۴۰۵/۰۷/۲۱/۰۲، بند ۹ و ۱۰) ————————
 *
 * Every column is aligned to its end — the left, on this right-to-left panel
 * — by the page itself. What is here is the one thing that still set a title
 * off from its figures: the sort arrow. It follows the title in the markup, so
 * on a line that ends at the left it stood *between* the title and the edge the
 * figures are on, and the title began an arrow's width short of them. Turned
 * round, the title is the last thing on the line and ends where the figures
 * do; the arrow is still there, on the other side of it.
 */
/* The last column, where the floating «بالا / پایین» pair is drawn: its title
   and its cells are both kept clear of the pair by the same strip
   (`agency-scroll-jump.css`), but a cell's text then adds its own margin
   inside that strip and a title has none — so the title began that margin
   short of its figures. It is given the same one, on the same screens. */
@media (min-width: 1024px) {
    .fi-income-table-page .fi-ta-ctn .fi-ta-table > thead > tr > .fi-ta-header-cell:last-child .fi-ta-header-cell-sort-btn {
        padding-left: calc(var(--spacing, 0.25rem) * 3);
    }
}

.fi-income-table-page .fi-ta-ctn .fi-ta-header-cell.fi-align-end .fi-ta-header-cell-sort-btn {
    flex-direction: row-reverse;
    /* The start of a line turned round is its left. */
    justify-content: flex-start;
}

/* An amount keeps to one line and reads from its own edge (بند ۱۰). */
.fi-income-table-page .fi-income-amount,
.fi-income-table-page .fi-income-empty {
    white-space: nowrap;
}

/* «بدون داده» is quieter than a figure, so it is never read as one. */
.fi-income-table-page .fi-income-empty {
    opacity: 0.55;
    font-style: italic;
}

/* «جمع کل» of the filtered view: set apart from the periods above it. */
.fi-income-table-page .fi-ta-row.fi-income-total-row {
    border-top: 2px solid var(--std-color-gray-400, #9ca3af);
    background-color: var(--agency-zebra-even);
}

.fi-income-table-page .fi-income-total-row .fi-ta-text-item {
    font-weight: 700;
}

/* ——— The page's name at two thirds (تسک ۰۵، بند ۳) ——————————————————————————
 *
 * Two thirds *of the heading*: `em` is read against the `h1` the name stands
 * in, so the proportion holds at both sizes «استانداردسازی نمای پنل» gives a
 * heading — the phone's and the wide screen's — instead of being one figure
 * that is two thirds of only one of them. The rule is on this page's span
 * (`IncomeTable::getHeading()`) and nothing else, so the `h1`, the line it
 * sets, «مبنای محاسبات» and «مستندات فنی» beside it, and every other
 * management's heading keep the size they had. Colour and weight are the
 * heading's, inherited.
 */
.fi-income-table-page .fi-income-table-heading-title {
    font-size: 0.6667em;
}

/* ——— «درآمد خالص» (تسک ۱۴۰۵/۰۷/۲۱/۰۳، بند ۵) ————————————————————————————————
 *
 * The whole column — heading, every period and «جمع کل» — on a green wash of
 * its own. A wash, not a fill: the rows' alternating shades still show through
 * it, so the stripes run across the column unbroken (بند ۵.۱).
 *
 * The figure itself sits in a box. Its colours — white writing on the panel's
 * green — are the «income-table-net» row of «استانداردسازی نمای پنل»; what is
 * here is only its shape: one width for every box of a column, round corners,
 * room inside. It is a figure, not a control, so it takes no pointer (بند ۵.۲).
 */
.fi-income-table-page .fi-ta-table th.fi-income-net-col,
.fi-income-table-page .fi-ta-table td.fi-income-net-col {
    background-image: linear-gradient(
        color-mix(in oklab, var(--success-500, #22c55e) 12%, transparent),
        color-mix(in oklab, var(--success-500, #22c55e) 12%, transparent)
    );
}

/* A cell of one figure is one element — Filament's text item and the column's
   own classes together — so the box is that element, sized to its figure and
   kept at the column's end (its left) by its own margin. */
.fi-income-table-page .fi-ta-text-item.fi-income-amount.fi-income-net {
    display: block;
    box-sizing: border-box;
    width: max-content;
    min-width: 8.5rem;
    margin-inline-start: auto;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    cursor: default;
}

/* «جمع کل»: the same box, a little stronger. */
.fi-income-table-page .fi-income-total-row .fi-ta-text-item.fi-income-amount.fi-income-net {
    padding: 0.4rem 0.875rem;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--success-400, #4ade80) 70%, transparent);
}

/* ——— «مبنای محاسبات جدول درآمدی» (تسک ۱۴۰۵/۰۷/۲۱/۰۴، بند ۹) ——————————————————
 *
 * A question bold, in the panel's colour, after a question mark; its answer
 * under it in the regular weight. Separated by a hairline, as the window of
 * «مانیتورینگ آماری عکاسان» is.
 */
.fi-income-basis-item {
    padding: 0.75rem 0;
    border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}

.fi-income-basis-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.fi-income-basis-question {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--primary-400, #fbbf24);
}

.fi-income-basis-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
}

.fi-income-basis-answer {
    margin: 0;
    padding-inline-start: 1.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.9;
}