/* Company cabinet («Кабінет компанії») — no Figma mock exists for this page
   either, so it is built from the site's established language: the profile
   card rhythm, the catalog pill, the public review card's chips.

   Three zones: the head, the public figures, and a two-column body where the
   reviews lead and the subscription sits in a sticky sidebar — the first
   question a company opens the cabinet with is what is being said about it. */
#business .container {
    padding-top: 50px;
    padding-bottom: 100px;
}
#business .business-head .title {
    margin-top: 16px;
    font-size: 42px;
    font-weight: 800;
    line-height: 50px;
}
#business .business-head .hint {
    margin-top: 12px;
    color: var(--color-text-alt);
    font-size: 16px;
    line-height: 24px;
}
/* Title and the way out to the public page on one line — the link is an
   action, so it is shaped like the site's other secondary buttons rather than
   left as underlined text under the heading. */
#business .business-head .head-row {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}
#business .business-head .head-row .title {
    margin-top: 0;
}
#business .business-head .page-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--color-bg-fifth);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
}
#business .business-head .page-link .icon {
    display: flex;
    font-size: 18px;
}
#business .business-head .page-link:hover {
    opacity: 0.85;
}
/* Status / subscription pills — the catalog chip language. */
#business .pill {
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-alt);
    color: var(--color-text-alt);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}
#business .pill--active {
    border-color: var(--color-border-secondary);
    background: var(--color-bg-third);
    color: var(--color-text-third);
}

/* Tabs between the cabinet's own sections. Plain links, not a widget: every
   section is a real URL a company can bookmark or open in a second tab.

   Shaped as the design's own menu item (Figma «Menu», the same component the
   header implements): 8px radius, nothing but text until it is current, and
   the current one on white with the standard hairline. */
#business .business-nav {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 4px;
}
#business .business-nav a {
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-text);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}
#business .business-nav a:hover {
    border-color: var(--color-border);
}
#business .business-nav a.is-active {
    border-color: var(--color-border);
    background-color: var(--color-bg-alt);
}

/* Zone headings. They are what turns the page from one long column into named
   blocks a reader can skip between. */
#business .section-title {
    margin-top: 50px;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}

#business .business-tiles {
    margin-top: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
#business .business-tile {
    padding: 20px 22px;
    background: var(--color-bg-alt);
    border-radius: 16px;
}
#business .business-tile .label {
    color: var(--color-text-link);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
#business .business-tile .value {
    margin-top: 8px;
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
    font-variant-numeric: tabular-nums;
}
#business .business-tile .value--muted {
    color: var(--color-text-link);
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
/* The second line carries what the figure is OF — the period, the base it is
   counted from — so the number above it can stay a bare number. */
#business .business-tile .note {
    margin-top: 4px;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 20px;
}

#business .business-grid {
    margin-top: 0;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr minmax(300px, 360px);
    align-items: start;
}

/* The working list of reviews: a filter bar over the same cards. The bar is a
   plain GET form — every combination is a URL the company can bookmark, and
   the page needs no script to work. */
/* The working list reads as a column, not as a full-width table: 800px is
   what the public company page gives a review card, and a line much longer
   than that stops being comfortable to read. */
#business .reviews-layout {
    max-width: 800px;
    margin: 0 auto;
}
#business .reviews-count {
    margin-top: 50px;
    color: var(--color-text-link);
    font-size: 14px;
    line-height: 20px;
}
#business .reviews-filters {
    margin-top: 20px;
    display: grid;
    gap: 16px 20px;
    /* Search on its own line, then the three narrowers and the button — the
       column is 800 wide, five fields in a row would be unusable. */
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
    padding: 24px 30px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .reviews-filters .field--search {
    grid-column: 1 / -1;
}
#business .reviews-filters .form-control {
    width: 100%;
}
#business .reviews-filters .actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 1px;
}
#business .reviews-filters .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}
#business .reviews-filters .reset {
    color: var(--color-text-link);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}
/* The list page paginates; the overview does not, so the spacing lives here. */
#business .business-reviews .paginationContainer {
    margin-top: 30px;
}

/* Reviews use the site's own .review-card as-is, so the cabinet looks like the
   rest of Rankly. The only change is the body: five full reviews turned the
   landing page into a feed to scroll past, and the whole text is one click
   away on the public page. */
#business .business-reviews .list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Only the overview clamps: there the five cards are a glance. On the working
   list the company is about to answer the review, so it needs all of it. */
#business .business-reviews--preview .review-card .text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The answer and its state. The reply block itself is the public one
   (cards/review-card.css); only the states the reader never sees are added
   here — waiting on a moderator, and refused with a note. */
#business .business-reviews .company-reply--pending {
    border-left-color: var(--color-bg-secondary);
    background: var(--color-bg-empty);
}
#business .business-reviews .company-reply--rejected {
    border-left-color: var(--color-text-link);
    background: var(--color-bg);
}
#business .business-reviews .company-reply--pending .reply-head .icon,
#business .business-reviews .company-reply--rejected .reply-head .icon {
    color: var(--color-text-link);
}
#business .business-reviews .company-reply .reply-state {
    color: var(--color-text-link);
    font-size: 13px;
    line-height: 18px;
}
#business .business-reviews .company-reply .reply-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-alt);
    font-size: 13px;
    line-height: 20px;
}

/* Answering. A native <details>, so the form is out of the way until the
   company wants it and no script has to exist for a card that may repeat five
   times on the page. */
#business .business-reviews .reply-form {
    margin-top: 16px;
}
#business .business-reviews .reply-form summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-third);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}
/* inline-flex drops the native triangle, so the chevron is a real element —
   and it turns when the form is open, which is the whole affordance. */
#business .business-reviews .reply-form summary::marker,
#business .business-reviews .reply-form summary::-webkit-details-marker {
    display: none;
    content: '';
}
#business .business-reviews .reply-form summary .icon {
    display: flex;
    font-size: 16px;
    transition: transform 0.2s ease-in-out;
}
#business .business-reviews .reply-form[open] summary .icon {
    transform: rotate(180deg);
}
#business .business-reviews .reply-form form {
    margin-top: 14px;
}
#business .business-reviews .reply-form .form-control {
    width: 100%;
}
/* The rules of the answer, right where it is written: in this niche the
   dangerous sentence is not an insult but "дякуємо за замовлення диплома" —
   the client never agreed to that being public. */
#business .business-reviews .reply-form .hint {
    margin-top: 10px;
    color: var(--color-text-link);
    font-size: 13px;
    line-height: 18px;
}
#business .business-reviews .reply-form .btn {
    margin-top: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
}
/* A filed complaint and its verdict, under the review it is about. Grey
   rather than red: it is a statement waiting for a person, not an alarm. */
#business .business-reviews .review-complaint {
    margin-top: 12px;
    padding: 12px 16px;
    border-left: 2px solid var(--color-text-link);
    border-radius: 0 12px 12px 0;
    background: var(--color-bg);
}
#business .business-reviews .review-complaint--upheld {
    border-left-color: var(--color-border-secondary);
}
#business .business-reviews .review-complaint .reply-head .icon {
    color: var(--color-text-link);
}
#business .business-reviews .complaint-form {
    margin-top: 12px;
}
#business .business-reviews .complaint-form summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-link);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}
#business .business-reviews .complaint-form summary::marker,
#business .business-reviews .complaint-form summary::-webkit-details-marker {
    display: none;
    content: '';
}
#business .business-reviews .complaint-form summary .icon {
    display: flex;
    font-size: 16px;
    transition: transform 0.2s ease-in-out;
}
#business .business-reviews .complaint-form[open] summary .icon {
    transform: rotate(180deg);
}
#business .business-reviews .complaint-form form {
    margin-top: 14px;
}
#business .business-reviews .complaint-form .form-container + .form-container {
    margin-top: 14px;
}
#business .business-reviews .complaint-form .form-control {
    width: 100%;
}
#business .business-reviews .complaint-form .hint {
    margin-top: 12px;
    color: var(--color-text-link);
    font-size: 13px;
    line-height: 18px;
}
#business .business-reviews .complaint-form .btn {
    margin-top: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
}

/* Without a subscription the cabinet says so once, quietly. The public page
   says nothing at all — a "this company has not connected replies" plaque
   under a negative review is sales pressure (docs §0.1). */
#business .business-reviews .reply-locked {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-link);
    font-size: 13px;
    line-height: 20px;
}
#business .business-reviews .reply-locked .icon {
    display: flex;
    font-size: 16px;
}

#business .business-reviews .all-reviews {
    margin-top: 20px;
    display: inline-block;
    color: var(--color-text-third);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: underline;
}

/* The subscription rides along as the page scrolls: it is the one thing on this
   screen the company might act on at any point. */
#business .business-subscription {
    position: sticky;
    top: 20px;
    margin-top: 50px;
    padding: 30px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .business-subscription .card-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#business .business-subscription .state {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
#business .business-subscription .state--active {
    border-color: var(--color-border-secondary);
    background-color: var(--color-bg-third);
}
#business .business-subscription .state .icon {
    display: flex;
    font-size: 24px;
    color: var(--color-text-third);
}
#business .business-subscription .state-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
#business .business-subscription .state-note {
    margin-top: 4px;
    color: var(--color-text-alt);
    font-size: 14px;
    line-height: 20px;
}
#business .business-subscription .perks-title {
    margin-top: 24px;
    color: var(--color-text-link);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
#business .business-subscription .perks {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#business .business-subscription .perks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
}
#business .business-subscription .perks .icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 18px;
}
#business .business-subscription .perks .is-open .icon {
    color: var(--color-text-third);
}
/* Locked perks stay fully readable — this list is the pitch, not a tease. */
#business .business-subscription .perks .is-locked .icon {
    color: var(--color-text-link);
}
#business .business-subscription .price {
    margin-top: 24px;
    font-size: 20px;
    font-weight: 800;
    line-height: 26px;
}
/* The request already sent — same shape as the active-subscription state. */
#business .business-subscription .requested {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 12px;
    background-color: var(--color-bg-third);
}
#business .business-subscription .requested .icon {
    display: flex;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--color-text-third);
}
#business .business-subscription .btn {
    margin-top: 14px;
    /* It is an <a>, and the site underlines links by default — a underlined
       label inside a filled button reads as a mistake. */
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
}

#business .empty {
    margin-top: 20px;
    color: var(--color-text-alt);
    font-size: 16px;
    line-height: 24px;
}

/* Company picker (two or more companies on one account). */
#business .business-companies {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}
#business .business-company {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: var(--color-bg-alt);
    border-radius: 20px;
}
#business .business-company .name {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

/* «Статистика». Bars are CSS, not a chart library: the public front has no
   Chart.js (it lives inside Filament only), and a div per day draws exactly
   what a canvas would have. */
#business .stats-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
}
#business .stats-head .section-title {
    margin-top: 50px;
}
#business .periods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Period switch = the review star-filter chip, the site's own control for
   "narrow this list" (reviews.company.css). */
#business .periods a {
    padding: 5px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}
#business .periods a.is-active {
    border-color: var(--color-bg-fourth);
    background: var(--color-bg-fourth);
    color: var(--color-text-secondary);
}
#business .business-tile .value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#business .business-tile .delta {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}
#business .business-tile .delta--up {
    color: #2E7D4F;
}
#business .business-tile .delta--down {
    color: #B3261E;
}
#business .stats-card {
    margin-top: 20px;
    padding: 30px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .stats-card .card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
/* A figure inside a card rather than a tile — the click counter. Same
   typographic step as the tiles above it (28/36 EB + 12/20 note), so the two
   rows of the page read as one scale. */
#business .stats-card .value-row {
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
#business .stats-card .value-row .value {
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
    font-variant-numeric: tabular-nums;
}
#business .stats-card .delta {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}
#business .stats-card .delta--up {
    color: #2E7D4F;
}
#business .stats-card .delta--down {
    color: #B3261E;
}
#business .stats-card .note {
    margin-top: 6px;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 20px;
}
#business .stats-card .note + .note {
    margin-top: 12px;
}
#business .stats-card .none {
    margin-top: 12px;
    color: var(--color-text-link);
    font-size: 14px;
    line-height: 20px;
}
/* Group heading between cards — one step under the zone title (Headline 6 of
   the design's scale), so «Джерела трафіку» never competes with «Статистика». */
#business .section-subtitle {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
#business .stats-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}
#business .stats-grid--two {
    grid-template-columns: repeat(2, 1fr);
}
#business .stats-grid .stats-card {
    margin-top: 20px;
}
/* One bar per day (or per hour). They shrink to fit — a year of days is a
   sparkline, a week is a proper column chart, and neither needs a script. */
#business .chart {
    margin-top: 16px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
}
#business .chart--hours {
    height: 120px;
}
#business .chart .bar {
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
#business .chart .bar span {
    display: block;
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--color-bg-fourth);
}
#business .chart-axis {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 16px;
}
#business .rows {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* The site's reset leaves <ul> markers on: a bullet in front of a bar
       chart row reads as a typo. */
    list-style: none;
}
#business .rows .row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
}
#business .rows .row-head .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#business .rows .row-head .count {
    color: var(--color-text-link);
    font-variant-numeric: tabular-nums;
}
#business .rows .track {
    margin-top: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-bg);
    overflow: hidden;
}
#business .rows .track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-bg-fourth);
}

/* «Профіль»: one long form in three cards, plus the verdict on the last
   proposal above it — the company should read why it was refused before it
   starts retyping. */
#business .section-hint {
    margin-top: 12px;
    max-width: 760px;
    color: var(--color-text-alt);
    font-size: 15px;
    line-height: 24px;
}
#business .profile-state {
    max-width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}
#business .profile-state--pending {
    border-color: var(--color-bg-secondary);
    background: var(--color-bg-empty);
}
#business .profile-state--rejected {
    background: var(--color-bg-alt);
}
#business .profile-state .icon {
    display: flex;
    flex-shrink: 0;
    font-size: 24px;
    color: var(--color-text-link);
}
#business .profile-state .state-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
#business .profile-state .state-note {
    margin-top: 4px;
    color: var(--color-text-alt);
    font-size: 14px;
    line-height: 20px;
}
/* The width the design gives a form card, and its place on the page: most of
   the content column, centred (Figma «Feedback» — 958 of 1240, equal margins).
   The heading and the verdict ride inside the same column so they line up with
   the card's edge instead of hanging off to the left. */
#business .profile-layout {
    max-width: 960px;
    margin: 0 auto;
}
#business .profile-form {
    max-width: 100%;
}
/* The form card: the review form's own proportions (50px padding, 24px
   radius) — one card per form is what the design does, so the three blocks
   live inside it under their own headings instead of floating apart. */
#business .profile-card {
    margin-top: 20px;
    padding: 50px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .profile-card .card-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#business .profile-card .card-title--section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}
#business .profile-card .hint {
    margin-top: 8px;
    color: var(--color-text-alt);
    font-size: 14px;
    line-height: 20px;
}
#business .profile-card .form-container {
    margin-top: 20px;
}
#business .profile-card .form-control {
    width: 100%;
}
#business .profile-card .form-note {
    display: block;
    margin-top: 6px;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 20px;
}
#business .contacts-grid {
    display: grid;
    gap: 0 20px;
    grid-template-columns: repeat(2, 1fr);
}
/* The gallery as it stands, each photo with the checkbox that drops it. */
#business .current-photos {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
}
#business .current-photos li {
    width: 120px;
}
#business .current-photos img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
}
#business .current-photos .remove {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-alt);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}
#business .profile-card .photo-upload {
    margin-top: 20px;
}
/* Same notice box as the review form (form.create-review.css): the design has
   exactly one shape for "read this before you submit". */
#business .profile-notice {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 12px;
    background-color: var(--color-bg-third);
    color: var(--color-text-link);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
#business .profile-notice .icon {
    display: flex;
    flex-shrink: 0;
    font-size: 29px;
    color: var(--color-text-third);
}
/* Full-width submit inside the card — same as the review and auth forms. */
#business .profile-card .btn {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
}

/* «Збір відгуків»: the link and the QR side by side, then what came back,
   then the rules of the thing — printed on the page rather than buried in an
   offer, because this is the closest the product gets to selling a rating. */
/* Одна колонка на всю страницу сбора — той же ширины, что и форма профиля:
   ссылка, QR и счётчики читаются как один блок. */
#business .collect-layout {
    max-width: 960px;
    margin: 0 auto;
}
#business .collect-grid {
    margin-top: 20px;
    display: grid;
    gap: 20px;
    /* Link and counters on the left, the picture in a fixed column on the
       right — the QR has one size and does not want to stretch. */
    grid-template-columns: 1fr 300px;
    align-items: start;
}
#business .collect-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#business .collect-main .business-tiles {
    margin-top: 0;
}
#business .collect-card {
    padding: 30px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .collect-card .card-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#business .collect-card .hint {
    margin-top: 8px;
    color: var(--color-text-alt);
    font-size: 14px;
    line-height: 20px;
}
/* The whole link has to be visible to be trusted — a truncated URL reads as a
   broken one, so the field takes it a size down rather than cutting it off. */
#business .collect-link {
    width: 100%;
    margin-top: 20px;
    font-size: 13px;
}
#business .collect-card .btn {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
}
#business .collect-main .collect-card .btn {
    align-self: flex-start;
    display: inline-flex;
}
#business .collect-card--qr {
    display: flex;
    flex-direction: column;
    text-align: center;
}
#business .collect-card--qr .card-title,
#business .collect-card--qr .hint {
    text-align: left;
}
#business .collect-card .qr {
    align-self: center;
    margin-top: 20px;
    width: 220px;
    height: 220px;
    max-width: 100%;
    padding: 10px;
    background: #FFF;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
/* The second format is for whoever takes the code to a printer — a plain link,
   so it never competes with the button above it. */
#business .collect-card .btn-plain {
    margin-top: 10px;
    align-self: center;
    color: var(--color-text-link);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: underline;
}
#business .collect-card .btn-plain:hover {
    color: var(--color-text);
}
#business .business-tiles--two {
    grid-template-columns: repeat(2, 1fr);
}
#business .collect-rules {
    margin-top: 20px;
    padding: 30px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .collect-rules .card-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#business .collect-rules ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
#business .collect-rules li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 22px;
}
#business .collect-rules .icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 18px;
    color: var(--color-text-third);
}

/* Paying for the subscription: one button per switched-on gateway, stacked so
   the names stay readable in the 300-wide sidebar. */
#business .business-subscription .pay-title {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
#business .business-subscription .pay-buttons {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#business .business-subscription .btn--pay {
    width: 100%;
}
#business .business-subscription .pay-note {
    margin-top: 12px;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 18px;
}
#business .business-subscription .payment-error {
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-bg-empty);
    font-size: 13px;
    line-height: 20px;
}
#business .business-subscription .payment-error .icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 18px;
}

/* The bridge page to a gateway, and the page it drops the payer back on. One
   centred column — there is nothing else on either screen. */
#business .payment-state {
    max-width: 560px;
    margin: 60px auto 100px;
    padding: 50px;
    text-align: center;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .payment-state > .icon {
    display: flex;
    justify-content: center;
    font-size: 42px;
    color: var(--color-text-third);
}
#business .payment-state--paid > .icon {
    color: #2E7D4F;
}
#business .payment-state--failed > .icon,
#business .payment-state--canceled > .icon {
    color: #B3261E;
}
#business .payment-state .title {
    margin-top: 16px;
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
}
#business .payment-state .hint {
    margin-top: 12px;
    color: var(--color-text-alt);
    font-size: 15px;
    line-height: 24px;
}
#business .payment-state .meta {
    margin-top: 20px;
    color: var(--color-text-link);
    font-size: 12px;
    line-height: 20px;
}
#business .payment-state .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
}

/* A paid section seen by a company without a subscription: the pitch, not a
   wall. Same card language as the subscription sidebar. */
#business .business-locked {
    max-width: 640px;
    margin-top: 30px;
    padding: 40px;
    background: var(--color-bg-alt);
    border-radius: 24px;
}
#business .business-locked > .icon {
    display: flex;
    font-size: 28px;
    color: var(--color-text-third);
}
#business .business-locked .card-title {
    margin-top: 14px;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#business .business-locked .hint {
    margin-top: 12px;
    color: var(--color-text-alt);
    font-size: 15px;
    line-height: 24px;
}
#business .business-locked .price {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 800;
    line-height: 26px;
}
#business .business-locked .requested {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 12px;
    background-color: var(--color-bg-third);
}
#business .business-locked .requested .icon {
    display: flex;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--color-text-third);
}
#business .business-locked .state-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
#business .business-locked .state-note {
    margin-top: 4px;
    color: var(--color-text-alt);
    font-size: 14px;
    line-height: 20px;
}
#business .business-locked .btn {
    margin-top: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-btn);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    text-decoration: none;
}

@media (max-width: 1200px) {
    #business .business-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    /* One column: the sidebar stops being a sidebar, so it also stops sticking
       (a sticky full-width block would hover over the reviews above it). */
    #business .business-grid {
        grid-template-columns: 1fr;
    }
    #business .business-subscription {
        position: static;
    }
    #business .stats-grid,
    #business .stats-grid--two {
        grid-template-columns: repeat(2, 1fr);
    }

}
@media (max-width: 900px) {
    #business .collect-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    #business .container {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    #business .business-head .title {
        font-size: 28px;
        line-height: 34px;
    }
    #business .section-title {
        margin-top: 40px;
        font-size: 20px;
        line-height: 26px;
    }
    #business .business-tiles {
        gap: 12px;
    }
    #business .business-tile {
        padding: 16px 18px;
    }
    #business .business-tile .value {
        font-size: 26px;
        line-height: 32px;
    }
    #business .business-subscription {
        padding: 24px;
    }
    #business .stats-grid,
    #business .stats-grid--two {
        grid-template-columns: 1fr;
    }
    #business .stats-card,
    #business .profile-card,
    #business .business-locked {
        padding: 20px;
    }
    #business .contacts-grid,
    #business .business-tiles--two {
        grid-template-columns: 1fr;
    }
    #business .reviews-filters {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    #business .reviews-filters .btn {
        width: 100%;
    }
    #business .collect-card,
    #business .collect-rules,
    #business .payment-state {
        padding: 20px;
    }
    #business .payment-state .title {
        font-size: 22px;
        line-height: 28px;
    }
    #business .chart {
        height: 120px;
    }
}